Share
I denna handledning kommer jag snabbt att visa dig hur du kan bygga en webbplats med Adobe Muse CC. Bland annat kommer vi att:
Ladda ner video eller prenumerera på Tuts + Web Design på YouTube
Hallå där! Jag heter Michael Chaize. Jag är en Creative Cloud-evangelist för Adobe, och i denna handledning kommer jag att visa dig hur du snabbt kan skapa en webbplats med Adobe Muse CC.
Första gången du startar Adobe Muse får vi den här skärmen och du kan säga att jag vill skapa en ny webbplats.
Och då definierar du måtten på dina sidor. Om du vill, som en inledande layout, ska du rikta dig mot dina stationära användare, tabletanvändare eller telefonanvändare och ställa in sidans marginaler. Så jag klickar på ok, och jag kommer att upptäcka planens arbetsyta med alla mina sidor.
För tillfället har jag bara en hemsida, men här kan jag säga att jag också behöver en produktsida och kanske en om sida. Och i produkterna får jag produkt A och på samma nivå produkt B. Så så kan du snabbt skapa strukturen på din webbplats.
Du har också mastersidor. Så, varje gång du lägger till ett designelement i rubriken eller sidfoten på huvudsidan kommer det att finnas på alla dina sidor. För min rubrik ska jag bara skapa en rektangel i bakgrunden. Kanske fyller den med en mörk färg.
Och jag vill lägga till en logotyp. Så det här är en bild, du kan direkt dra och släppa bilder från din skiva. Okej, låt mig dra och släppa en PNG-fil och placera den. Du ser att du får Smart Guides att automatiskt klämma fast dina element till de andra elementen på scenen.
Nu om jag går tillbaka till den övergripande planen på min hemsida ser jag att rubriken visas på alla sidor, eftersom den är en del av mastersidan. Okej, nu kanske jag vill lägga till en navigeringsmeny för att navigera genom sidorna.
Så här ska du använda widgetar bibliotek. Detta är ett bibliotek med interaktiva widgets. Du får knappar, komponenter som ljusboxens display, former, menyer, paneler, ljus visar i det här fallet kommer vi att använda en horisontell meny och placera den kanske inuti rubriken.
Den får automatiskt den struktur som definieras i planen. Så jag har redan tre sidor i navigeringsmenyn. Hem, Produkter, och Handla om. Egentligen är detta en dynamisk widget, så om jag lägger till en annan sida som jag kommer att namnge Kontakt och om jag går tillbaka till min mastersida har jag redan kontaktknappen.
Om du klickar på den blå ikonen får du inställningarna för widgetsna. Kanske vill du också visa sidnivåerna på undersidan. Så jag skulle säga, alla sidor och då kan du stile.
För att välja ett webbsättstyp får du de klassiska här, men du kan också bestämma att lägga till webbfonter som kommer från typpaket. Den kommer automatiskt att bläddra i katalogen över fria teckensnitt som finns på typsnittet. Och du kan exempelvis säga att du vill använda skådespelare typsnitt, klickar du på OK, och det läggs till i listan med teckensnitt.
Och du kan direkt välja den här. Så här skapar du din meny, och sedan om du vill lägga till ett stycke text. Det borde inte vara på mastersidan, men låt oss säga på hemsidan. Du måste bara definiera ett block och säga Välkommen till min hemsida.
Återigen väljer jag bara skådespelare typsnitt, kanske ökar textens storlek, och här går vi.
Sedan till höger lägger jag till en annan interaktiv widget. Kanske ett bildspel. Så du har olika slags bildspel, den grundläggande, blanda till helskärm en, ljuslådan.
Låt oss spela med grundläggande bildspel som kommer att visa en standardbild här. Men varje gång du lägger till en widget, kommer du att ha den här blå ikonen, och här har du inställningarna och du kan säga Jag vill lägga till mina egna bilder.
Det ändrar automatiskt bilderna. Och då kan du ställa in legenden, du kan navigera för att kontrollera alla bilder och du har också olika övergångar. Så som standard kommer det att blekna in och blekna ut, men du kan också välja att ha de horisontella bilderna.
Så det här är min hemsida, kanske vi kan lägga till något på sidan Omkring, du kan naturligtvis kopiera klistra in element från en sida till en annan. Så om jag väljer att visa alla mina sidor med kakelanordningen så kan jag kopiera klistra in några element.
Och du kan också lägga till animering, så låt mig lägga till en bild. Och du har denna bläddringsrörelse. Så här är en väldigt kraftfull panel där du kan säga att du vill lägga till parallaxkravseffekten. Så om jag kontrollerar Motion här har jag här nyckelpositionen vilket innebär att när du rullar ner sidan och når denna nyckelposition innan det vill jag få ett visst beteende.
Så kanske något kommer från höger vid denna hastighet. Och efter det ska vi säga att jag inte vill att den ska flytta, så jag vill att den ska flytta i samma hastighet på sidan. Så bara en. Du kan också spela med opacitet för att lägga till några nyckelpositioner, om du vill att objektet ska visas och försvinna.
Jag lägger till ett annat textblock. Lägg till knappen. Bara för att öka dimensionen på min sida för att visa effekterna. Så om jag vill förhandsgranska den här sidan i webbläsaren kan jag antingen välja att spara fil, förhandsgranska sida i webbläsare eller direkt klicka på den nya Förhandsvisning knapp som vi lanserade direkt i Adobe Muse och när jag rullar ner ser jag min byggnad.
Det framgår från höger. Det slutar, och sedan försvinner det. Så det här är exakt den effekt jag ville definiera inom min design tack vare panelen Scroll Effects.
Nu om jag vill dela den här webbplatsen med min kund för att få feedback, har du Publicera knapp.
Du måste bara säga Publicera, då skriver du ett namn. Jag klickar på ok, och det kommer att använda Adobe Business Catalyst, som är en värdplattform tillgänglig för alla Creative Cloud-medlemmarna och publicera din webbplats på den här webbadressen så att du kan dela den med din kund.
Här är det. Jag har min första sida. Produkt A, produkt B. Om jag klickar på sidan Om och om jag rullar ner har jag effekten direkt i min webbläsare. Och jag kan kopiera klistra in den här webbadressen och dela den med mina kunder eller mina medarbetare.
Adobe Muse CC riktar sig till designers som vill utforma webbsidor utan kodning.
Vem som helst kan använda den och bli väldigt kreativ. Du kan besöka muse.adobe.com för att ladda ner och prova Adobe Muse. Jag uppmanar dig också att besöka sidan om dagen för att kontrollera vackra webbplatser som publicerats med Adobe Muse. För din information, förra året 2013, skapades och publicerades mer än 500 000 webbplatser med Adobe Muse.
Om du vill veta mer om Adobe Muse, fortsätt också med tutsplus.com och kolla Adobe Muse-kategorin för att få nya, nya handledning och videor för att lära dig att skapa fantastiska webbplatser.
Konstverk av Črtomir Just
Accentsconagua