Share
I denna handledning kommer vi att gå igenom en gratis Photoshop-förlängning som heter Velositey. Velositey (för närvarande i version 2) ger vanliga layoutmönster för att skapa prototyper för webbdesign i Photoshop.
"Spendera mer tid på att perfekta detaljer och styling och mindre tid på alla de tråkiga grejerna." - Velositey
Innan vi får våra händer vår Velcosy, låt oss först undersöka några vanliga layoutmönster som finns på många webbplatser idag.
Om vi tittar på tre av de mest populära WordPress-teman i ThemeForest (Avada, Enfold, and Salient) kommer du att märka att de delar några vanliga funktioner.
För det första, på stora skärmar, har de en navbar med sin logotyp bild till vänster och navigeringen till höger. Under navbaren möter vi vanligtvis en hjältebild tillsammans med ett par knappar som visas genom ett animerat bildspel. Efter de slående huvudområdorna hittar vi ofta kolumner eller någon form av nätbaserad layout.
Eftersom denna typ av layout är så vanligt i naturen, kan du ofta hitta dig själv att bygga något liknande. Att prototyper bekanta layouter gång på gång kan därför bli en repetitiv uppgift.
I denna handledning kommer vi att gå igenom Velositeys funktioner och lära oss hur de ska användas för att automatisera vanliga uppgifter, vilket i slutändan påskyndar vårt prototyper-arbetsflöde. Dessutom kommer vi att lära oss hur vi använder Photoshops inbyggda funktioner för att anpassa och lägga till några klockor och visselpipor till vår prototyp.
Utan ytterligare ado, låt oss komma igång!
Minimikravet för att köra Velositey är Adobe Photoshop CC 2014 / CS6. Se även till att du har installerat Adobe Extensions Manager. Med de nuvarande, ladda ner Velositey (du måste betala med ett Tweet eller Facebook-post) och installera det via Adobe Extension Manager.
Starta Photoshop och navigera till Fönster> Förlängning> Velositey för att avslöja Velositey-panelen.
Velacey panelFör att starta skapar vi en rak layout.
Först måste vi skapa ett nytt tomt dokument via [+] Ny mall knappen inom Velositey-panelen.
Det här nybildade dokumentet kommer med en guidelinje som spänner över 1170px bredd med 30px rännan. Detta är ett lämpligt arrangemang om du planerar att använda Bootstrap som din webbplats grid foundation.
En av de första sakerna som du ser under [+] Ny mall knappen är en serie flikar, den första är för rubriker. Jag ska välja det 10: e toppmönstret. Klicka på den, så kommer Velositey genast att generera rubriken och lägga den i dokumentet.
Header-alternativet i Velositey-panelenI vårt fall ger det oss en rubrik med logotypen till vänster och navigeringen till höger. I Photoshops infödda Lager panelen, hittar du också lagren är ordentligt strukturerad och namngiven inom Rubrik grupp.
Den nakna layouten av rubriken och dess lagerstruktur i Skikten panel.Notera: Om du senare väljer ett annat rubrikalternativ ersätter Velositey det första exemplet.
Trots nackdelarna vill många fortfarande ha en skjutreglage på deras hemsida. Att lägga till en skjutregion är lika lätt som rubrikområdet. Velositey ger en uppsättning glidmönster som är klara att lägga till med ett knapptryck.
Alternativen för Slider layoutmönster.Här har jag valt det sista skjutmönstret som ger oss en skjutreglage som innehåller en rubrik, dummyinnehåll och två knappar.
Slider-området, med motsvarande lager .Som du kan se ovan hittar du en ny grupp, Slider, läggas till i Lager panel där alla glidlageren ligger.
Att lägga till innehållsområdet är lika enkelt. Navigera till den tredje fliken i Velositey-panelen och du hittar några innehållsalternativ.
InnehållslayoutmönsterJag har valt den tredje stilen, vilket ger oss innehållet i tre kolumner med varje kolumn som innehåller en rubrik, en bildplatshållare och en dummyinnehåll.
Innehållsområdet med dess lageren Modul, i detta fall är ett oberoende innehållsblock. Det är upp till oss att definiera innehållet och vad det används för. Till skillnad från rubriken Header, Slider och Content kan vi lägga till flera moduler i ett enda dokument. Här har jag lagt till det andra modulmönstret:
ModulmönsterDen andra typen av modul ger oss en bildplatshållare (som sträcker sig över dokumentrutan), en rubrik och några rader av dummy text.
Modulen lagde till lagrenDen sista delen av vår hemsida kommer förutsägbart att vara sidfoten. För footers ger Velositey återigen ett antal förinställda mönster att välja mellan:
Det första fotmönstret ger oss följande footer-layout:
Vid detta tillfälle har vi slutfört att lägga till alla nödvändiga hemsidor - från rubriken till sidfoten - med några få klick. För att ordna varje avsnitt ordentligt kan du lägga till några vertikala mellanslag mellan dem som så:
Nu har vi den grundläggande layouten på plats, det är dags för oss att anpassa den. Vi behöver ändra ett par saker för att göra prototypen presentabel.
Tumregeln när det gäller att anpassa Photoshop-dokument är att lämna lagren intakt när det är möjligt. Varje lager ska anpassas utan att förstöra dess ursprungliga form eller egenskaper. Detta leder oss att använda vissa Photoshop-funktioner som:
Dessutom föredrar jag att använda minsta möjliga mängd lager.
I vårat fall, Smarta objekt är användbara för att inkludera logotypen.
Till att börja med väljer du det skikt som heter logotyp inom Rubrik grupp (för närvarande ett rektangulärt formlager). Högerklicka sedan och välj Konvertera till Smart Object alternativ.
De logotyp skiktet är nu a Smart Object.
För att placera vår logotyp inom detta lager, högerklicka på logotyp lager och välj Redigera innehållet alternativ.
Detta leder oss till ett nytt dokument i Photoshop-fönstret. Inom den här fliken sätter du det rektangulära formen lagret osynligt och dra och släpp sedan logotypen i fliken genom att anpassa logotypen till vänster. När du sparar filen ska ändringarna återspeglas i index.psd.
Logotypen placeras genom ett smart objektNu ska vi konvertera logotyp lager, som nu är en Smart Object, in i en Länkt smart objekt. Detta lagrar effektivt vår logotyp som en extern fil. För att göra det, högerklicka på lagret och välj Konvertera till länkad ... alternativ.
Photoshop kommer att uppmana dig att spara Smart Object fil, .psb. Rädda Smart Object av logotypen inom en typisk organisation som du skulle göra när du organiserar webbplatsens bilder. I det här fallet skulle jag spara det i en mapp som heter /bilder.
"Håll lagerfoton / ikoner i en mapp nära PSD, inte i en skrivbordsmapp med namnet" Diverse saker "- Photoshop Etiquette
När vi arbetar med Smart Objects nu, låt oss återanvända logotypen i vår sidfot. Gå över till sidfot grupp och hitta logotyp lager. Högerklicka på lagret och välj Ersätt innehåll ... .
Navigera till mappen där du sparade .psb fil av logotypen, välj filen och tryck på Plats knapp. Du borde nu ha logotypen i sidfoten.
Upprepa dessa steg för att placera bilder i de andra sektionerna; Innehåll, Slider och Modul. När det är klart, borde du ha ett liknande resultat till min nedan:
Lägga till en lagseffekt kommer troligen att vara bekant för någon av er som har använt Photoshop ett tag. Lågeffekter applicerar en eller flera effekter som färg, gradient, skugga etc. ovanpå ett lager. I vårt fall kommer vi att använda den för att ställa in en ny färg på logotypen och lägga till en gradient.
Börja med att välja logotyp lager i Rubrik grupp. Välj sedan fx ikon inom Lager panel där effektalternativen finns. Välj Färgöverdrag ... , och ställ färgen till vit.
Upprepa detta steg för att anpassa varje navigeringslänkfärg, ikonfärgen i innehållsavsnittet och knappfärgen i reglaget. Dessutom lägger du till en gradienteffekt på skjutreglaget för att ge mer kontrast mellan rubriken och reglaget, vilket gör logotypen och navigationen mer läsbar.
Justeringslager tillåta oss att anpassa ett lager ton (till exempel ljusstyrka och kontrast) på ett icke-destruktivt sätt. I vårt fall kan vi använda ett justeringslager för att aktivera modulens ikoner svartvitt.
Välj först behållare lager i Modul grupp. Högerklicka och välj Redigera innehåll ... alternativ. Efteråt klickar du på nytt justeringslager och välj Svartvitt… alternativ. Och voila!
Det sista du behöver göra är att omformulera rubrikerna och texten i innehållsinnehavarna. Med det gjort, här är det, vår färdiga prototyp:
Bra gjort, vi har framgångsrikt byggt en designprototyp för en webbsida. Vi använde Velositey, så att vi snabbt kan skapa den raka layouten. Vidare anpassade vi lageren med färger, gradienter och justeringar på ett icke-destruktivt sätt, vilket behöll sin ursprungliga form intakt och möjliggjorde framtida ändringar.
Har du några andra tips och tricks för att använda Velositey? Låt oss veta i kommentarerna!
Accentsconagua