Share
Vad du ska skapaUnder denna handledning kommer jag att gå igenom processen med att skapa sofistikerad webbelement styling i Photoshop, men utan att använda en enda bildfil på din färdiga webbplats. När vi är klara har du en enda sidlayout med alla UI-element som du ser i förhandsgranskningsbilden ovan, med ingenting annat än CSS3, Base64-kod och teckensnittikoner.
Genom att skapa en "ingen bild" -design kan du hålla din belastningstid och HTTP-förfrågan räknas till ett absolut minimum samtidigt som du uppnår den högsta möjliga flexibiliteten i dina UI-element. Ren kod UI-element kan snabbt och enkelt tweaked via CSS på sätt som statiska bilder inte kan utan att manuellt redigeras och återexporteras.
För att göra allt detta kommer vi att använda fyra nyckelresurser:
* Du kan använda en annan förbehandlare om du föredrar det.
Genom att föra dessa element tillsammans är det möjligt att skapa en ren koddesign som är nästan identisk med den ursprungliga PSD:
PSD
Det rena kodresultatet (ses i Firefox)Denna handledning delas upp i två delar:
Under den här första delen kommer vi att visa vilka typer av tekniker du kan använda i Photoshop när du skapar en CSS3- och Base64-vänlig design. Även om vi idag kan uppnå mycket med ren kod, kan vi ännu inte översätta absolut allt du kan hitta i Photoshop. Så det är viktigt att ha "dos" och "don'ts" i åtanke när du anger.
Låt oss komma igång med en kort översikt över CSSHat och PNGHat, de Photoshop-plugins som vi ska använda för att generera vår CSS3- och Base64-kod.
Med CSSHat-plugin installerat kan du klicka på vilket lager som helst i ditt Photoshop-dokument och CSSHat-fönstret skickar direkt produktionsklar kod till dig.
CSSHat tolkar primärt från dina lagerstilställningar, så du bör sikta på att lägga till dina grader och gränser via lagerformat snarare än någon av Photoshops alternativa metoder.
Accentsconagua
px (valfri)typsnittsfamilj, textstorlek, font-weight (fet / normal), typsnitt PNGHat kan göra många saker. Kolla in hur du exporterar Photoshop-tillgångar till webben med PNGHat för en fullständig rundown på plugin.
I fallet med denna handledning använder vi den för att generera Base64-kod som kommer att bilda bakgrundsbilden av designen. Du får se hur detta fungerar i praktiken inom kort.
När en bild konverteras till Base64 får du en textsträng som sedan kan integreras direkt i CSS. Ju mer data finns i bilden, ju längre strängen, så därför är Base64 bäst lämpad för enkla tegelbilder med få färger..
För att få bollen att rulla behöver du några saker.
Till att börja med bör du ha CSSHat- och PNGHat-plugins installerade.
Om du inte kan köpa en kopia av CSSHat kan du fortfarande följa med och använda Photoshop i inbyggd "Copy CSS" -funktionalitet, som kan väljas från snabbmenyn efter att högerklicka på vilket lager som helst.
I det här fallet måste du manuellt ta bort oönskad standardkod för saker som absolut positionering, z-index, dimensioner och klassnamn. Det hanterar inte generering av flera skuggor och gradienter såväl som CSSHat, och det kan inte producera mindre, Sass / SCSS eller Stylus redo kod.
Om du inte kan köpa PNGHat kan du manuellt exportera din bakgrundsbild och sedan sätta den via en online-omvandlare som: http://webcodertools.com/imagetobase64converter
Jag rekommenderar också ett tredje plugin från källan heter Subtle Patterns. Det här tillägget lägger till ett bibliotek med hundratals mönster till Photoshop, som vart och ett kan tillämpas omedelbart som ett mönsteröverlagring till vilket lager som helst.
Som ett alternativ till att använda pluginet Subtle Patterns kan du bara bläddra i mönstren och ladda ner dem gratis.
Notera: Jag vet vad du kanske undrar - Det är många saker av Source, är detta ett sponsrat inlägg? Nej. Sannan är att jag köpte Källans hela produktsortiment långt innan jag började skriva för Tuts + och jag älskar var och en på grund av det stora antalet timmar som de har lagt tillbaka till min dag. Jag rekommenderar dessa plugins eftersom jag har varit så imponerad av min egen erfarenhet av hela sviten.
Vi lägger några ikoner i din design via Font Awesome, så du måste gå och ladda ner teckensnittet och installera det på ditt system.
Valfri typsnitt för vår vanliga text blir Roboto så du måste installera det också. Du kan ta tag i det från Google Webfonts.
Skapa ett nytt Photoshop-dokument i en storlek på 1600px x 2180px. Dubbelklicka på standardlagret "Bakgrund" för att låsa upp det och spara sedan din PSD.
I Subtila mönster fönster, (eller hemsida), söka efter satinväv. När du hittar det, med din Bakgrund lagret, klicka på mönstrets kakel så att det automatiskt appliceras som ett mönsteröverlägg.
Du bör nu se några subtila gråskala vertikala linjer på din duk. Vi har valt det här mönstret som en bra passform för konvertering till Base64 eftersom den använder mycket få färger och endast 24px med 12px i storlek, vilket betyder att den kommer att producera en relativt liten kodsträng.
För att hjälpa till att rama sidan skapar du en rektangel överst på din duk, kör hela bredden och 8px i längd. Ge den dessa egenskaper:
Fyllnadsfärg: #dddddd
Opacitet: 50%
Lagstil> Inre Skugga:
Vanligt # c8c8c8 100% -90 2 4 Lagstil> Drop Shadow:
Vanligt #ffffff 100% 90 2 1 Din "övre trim" ska se ut så här:
Genom att skapa denna meny får vi se några av effekterna som kan skapas med gradienter, skuggor och slag. Vi går för en ren upptagen meny som sitter i ett insatsomslag.
Till att börja med skapar vi insatsomslaget som håller menyn. Skapa en centrerad, avrundad hörnrektangel på din duk på 1200px bred vid 61px hög. Ange följande egenskaper:
Fyllnadsfärg: # f9f9f9 - notera att även om det kommer att finnas en gradient på denna rektangel vill vi ändå ställa en fyllnadsfärg som en återgång.
Egenskaper> Egenskaper för Live Shape> Hörnradie: 12px
Lagstil> Inre Skugga:
Vanligt # 000000 15% 90 1 10 Layer-stil> Gradientöverlägg:
#ffffff # f3f3f3 Linjär Lagstil> Drop Shadow:
Vanligt #ffffff 100% 90 1 2 Din menyomslag ska nu se ut som:
Skapa en andra rundad hörnrektangel ovanför menyomslaget, på 1190px bred vid x 50 bildpunkter högt, med sitt övre vänstra hörn 5px längre fram till höger och ner än menyomslagets övre vänstra hörn. Lägg till dessa egenskaper:
Fyllnadsfärg: #ffffff
Egenskaper> Egenskaper för Live Shape> Hörnradie: 10px
Lagstil> Slag:
1 utanför # e4e4e4 Layer-stil> Gradientöverlägg:
# e5e5e5 #ffffff Linjär Lagstil> Drop Shadow:
Vanligt # c1c1c1 100% 90 3 4 Du borde nu ha:
Skapa en annan rektangel, den här gången på 130 x bred vid 51px högt, direkt överst på menyn "menybakgrund". Ge det här övergångsöverdraget:
Layer-stil> Gradientöverlägg:
#efefef # e4e4e4 #fcfcfc Linjär Lägg nu till platstext: skriv ordet "Sida" och placera det över mitten av menyalternativen med följande inställningar:
Tecken> Teckensnitt: Roboto, Regular
Tecken> Teckensnitt: 18px
Karaktär> Färg: # 5c5c5c
Lagstil> Drop Shadow:
Vanligt #ffffff 100% 90 1 0 Ditt menyalternativ ska se ut så här:
Gör en duplikat av din menyobjekt rektangel och text och flytta sedan till höger så det sitter precis bredvid ditt original. Redigera texten för att läsa "Aktuell".
Ställ in rektangelens lagerstilegenskaper till:
Lagstil> Slag:
1 utanför # e62d4ee4e4e4 Lagstil> Inre Skugga:
Vanligt # faabb9 60% 90 3 5 Layer-stil> Gradientöverlägg:
# ef3d5d # dc2345 # fc6c86 Linjär Lagstil> Drop Shadow:
Vanligt # cc2241 100% 90 1 0 Ändra sedan din textfärg och släpp skugginställningar till:
Karaktär> Färg: #ffffff
Lagstil> Drop Shadow:
Vanligt # b50020 100% 90 1 0 När du är klar med ovanstående gör du några fler dubbletter av det ursprungliga "menyalternativet" och placera dem till höger om "nuvarande menyalternativ". Vi gör detta för att se hur menyalternativen ser ut när vi sitter ihop mot varandra för att se till att det finns tillräcklig visuell separation från ett objekt till nästa.
Tyvärr har Photoshop ingen möjlighet att ställa in något som "gränsen till vänster" så vi kan inte ställa in vänster eller höger gränser direkt på våra menyalternativ rektanglar. Men vi behöver fortfarande simulera effekten så att vi kan skapa åtskillnad mellan varje objekt. Använd Photoshops linjeværktyg för att rita lite 1px breda vertikala linjer mellan menyalternativen och ställa in fyllnadsfärgen till #dddddd
Med alla dessa element på plats borde du ha:
Om du använde den här layouten för en klient, är det det område där du skulle lägga till huvudintressen eller handlingen. För syftet med denna handledning lägger du till följande fyra rader, alla centrerade på sidan:
Ge de första och tredje raderna följande inställningar:
Tecken> Teckensnitt: Roboto, Tunn
Tecken> Teckensnitt: 48px
Karaktär> Färg: # 6b6b6b
Ge sedan andra och fjärde linjerna dessa inställningar:
Tecken> Teckensnitt: Roboto, fet
Tecken> Teckensnitt: 80px
Karaktär> Färg: # ef3d5d
Din text ska nu se ut så här:
Under huvudtexten, skapa en rundad hörnrektangel 1200px bred vid 665px hög. Ge det här inställningarna:
Fyllnadsfärg: #ffffff
Egenskaper> Egenskaper för Live Shape> Hörnradie: 15px
Lagstil> Slag:
1 inuti # d8d8d8 Lagstil> Drop Shadow:
Vanligt # c1c1c1 27% 90 3 4 Sedan, 60 bildpunkter under toppen av panelens bakgrund, skapa en annan rundad hörnrektangel. Det borde vara 1230px bred och 70 bildpunkter hög. Centrera den på duken så det sticker ut genom 15px vardera sidan av panelens bakgrund. Ge den dessa egenskaper:
Fyllnadsfärg: # ef3d5d
Egenskaper> Egenskaper för Live Shape> Hörnradie: 10px
Lagstil> Inre Skugga:
Vanligt # de2a4a 60% 90 0 5 Layer-stil> Gradientöverlägg:
# ef2c4f # dc2345 # fc6c86 Linjär Lagstil> Drop Shadow:
Vanligt # cc2241 100% 90 3 0 Vi har redan en droppskugga på rektangeln som vi just skapat, vilket ger den en subtil 3D-effekt. Men vi vill också ha en andra droppskugga som kommer att se ut som en verklig skugga gjuten av en downlight. Eftersom vi redan har "använt" dropshadowegenskapen hos den befintliga rektangeln måste vi skapa en andra rektangel för att tillämpa en andra skugga på.
Duplicera din panelens bakgrundsrektangel och dra den under originalet i din lagerpanel och rensa sedan den befintliga lagstilen. Namnge det "panelheadershadow" så att du enkelt kan skilja mellan de två skikten. Ge det dessa drop shadow inställningar:
Lagstil> Drop Shadow:
Vanligt # 000000 27% 90 5 3 Direkt över mitten av panelhuvudet skriver du ut "I DENNA TUTORIAL:" och ge texten följande inställningar:
Tecken> Teckensnitt: Roboto, Regular
Tecken> Teckensnitt: 24 bildpunkter
Karaktär> Färg: #ffffff
Lagstil> Drop Shadow:
Vanligt # b50020 100% 90 1 0 Till sist lägger du till följande textrader:
Ställ in den första mycket text till:
Tecken> Teckensnitt: Roboto, Tunn
Tecken> Teckensnitt: 36px
Karaktär> Färg: # 6b6b6b
Och den andra mycket text till:
Tecken> Teckensnitt: Roboto, Svart
Tecken> Teckensnitt: 48px
Karaktär> Färg: # 6b6b6b
Markera sedan alla symbolerna "+" och sätt in färgen till: # ef3d5d
Du borde nu ha en informationspanel som ser ut så här:
Det här är där vi börjar använda Font Awesome. Vi kommer att placera ikonen "fa-down-arrow" och använda den istället för en bild.
Det enklaste sättet att göra detta är att få rätt "brev" i din cache genom att gå till Font Awesome cheatsheet. Leta reda på ikonen "fa-down-arrow", markera sedan den lilla bilden förhandsvisning och tryck på CTRL / CMD + C
Markera och kopiera den lilla nedåtriktade pilenGå tillbaka till din duk, placera en markör med textverktyget och klistra in det tecken du just kopierat. Först ser du bara en rolig liten rektangel med ett kors i det, så ändra dina inställningar till det här:
Tecken> Teckensnitt: FontAwesome
Tecken> Teckensnitt: 200px
Karaktär> Färg: # 6b6b6b
Kontrollera att pilen är centrerad på duken och ställ in lagrets opacitet 30%. Du borde nu ha den här snygga pilen:
Skapa en ny rundad hörnrektangel, 420px bred vid 105px hög. Knappen kommer att använda exakt samma lagerstyleegenskaper som "Panelshuvudbakgrund" så att du enkelt kan kopiera över dessa lagstilar. Högerklicka på skiktet på panelen på panelen och välj "Copy Layer Style", högerklicka sedan på ditt nya knapplag och välj "Klistra in lagstil".
Som vi gjorde med paneldelhuvudbakgrunden, vill vi skapa en andra rektangel för den här knappen som kan ha en andra droppskugga som appliceras på den. Duplicera ditt knapplager och dra det under originalet i paletten i din lager, och byt namn på den "knappen skugga". Kopiera lagstilen från skiktet "panelheadershadow" som du skapade tidigare och klistra in det på din nya "" knappskugga" lager.
Vi lägger till en liten cirkel på knappen som kommer att se ut som en liten depression, och vi ställer sedan in en höger pekad vit pil ovanpå den.
Skapa en cirkel (ellips) ovanför knappen på 47px av 47px. Placera det så att det är lika avstånd från de övre, vänstra och nedre kanterna på knappens bakgrund, ge sedan den här övertonen:
Layer-stil> Gradientöverlägg:
# f04f6c # e32d4f Linjär För att skapa rätt piltangent kommer vi återigen att använda FontAwesome. Gå tillbaka till cheatsheet och denna gång kopiera FA-cirkumflex höger ikon. På din duk kan du använda textverktyget för att placera en markör över den cirkel du just skapat och klistra in i ikonen / teckenet Font Awesome. Ge den dessa egenskaper:
Tecken> Teckensnitt: FontAwesome
Tecken> Teckensnitt: 36px
Karaktär> Färg: #ffffff
Placera den nyskapade vita pilen i mitten av den cirkel som den sitter ovanför.
Överst på knappen, till höger om cirkeln och pilen, skriver du "Starta handledningen" och ge texten följande inställningar:
Tecken> Teckensnitt: Roboto, Regular
Tecken> Teckensnitt: 36px
Karaktär> Färg: #ffffff
Denna text använder samma droppskugga som "Panelhuvudtext", så du kan kopiera stilen från den texten och klistra in den på det här skiktet.
Du borde nu ha en knapp som ser ut så här:
Vi ska nu lägga till det sista elementet i designen, en del trim längst ner för att avsluta inramningen utanför rymden. När det här elementet är kodat använder vi separata inställningar för topp- och bottengränser, men eftersom Photoshop inte kan underlätta detta använder vi oss formverktyg istället för att vi kan få rätt färger på plats.
Under startknappen, skapa en rektangel med en fyllfärg på #dddddd det är 5px hög och sträcker hela sidans bredd. Kopiera den nya rektangeln och flytta den ner 10px så det finns en 5px gap mellan de två rektanglarna.
I mitten av din duk och ovanför de två gråa linjerna / rektanglarna ritar du en cirkel som är 40 bildpunkter av 40 bildpunkter och ge den dessa egenskaper:
Fyllnadsfärg: # f2f2f2
Lagstil> Slag:
5 inuti #dddddd Layer-stil> Gradientöverlägg:
#dddddd # f2f2f2 Radiell Var särskilt uppmärksam på inställningarna för gradientöverlagring eftersom de skiljer sig från de som vi tidigare använt. Färgstopparna placeras på 40% och 45% i stället för 0% och 100%, och vi använder en radiell gradient istället för linjär. Tillsammans med gränsen / slaget, ger detta effekten av liten grå cirkel omgiven av en större.
Din nederkant ska se ut så här:
Du ska nu ha en avslutad PSD-design, 100% klar för översättning till ren CSS3 och Base64-kod:
I följande del av denna handledning:
vi ses då!
