Share
Hva du skal skapeUnder denne opplæringen skal jeg gå gjennom prosessen med å lage sofistikert webelement styling i Photoshop, men uten å bruke en enkelt bildefil i ditt ferdige nettsted. Når vi er ferdige, har du en enkelt sidelayout med alle brukergrensesnittelementene du ser i forhåndsvisningsbildet ovenfor, ved hjelp av noe annet enn CSS3, Base64-koden og skriftikonene.
Ved å lage et "ingen bilde" -design kan du holde belastningstiden og HTTP-forespørselen telle til et absolutt minimum, samtidig som du oppnår det høyest mulige fleksibilitetsnivået i UI-elementene. Ren kode UI-elementer kan raskt og enkelt tweaked via CSS på måter statiske bilder ikke kan uten å bli manuelt redigert og re-eksportert.
For å få dette til å skje, vil vi ansette fire nøkkelressurser:
* Du kan bruke en annen preprosessor hvis du foretrekker det.
Ved å bringe disse elementene sammen, er det mulig å generere en ren kodesignal som er nesten identisk med den opprinnelige PSD:
PSD
Det rene kodesultatet (sett i Firefox)Denne opplæringen vil bli brutt i to deler:
Under denne første delen demonstrerer vi hvilke typer teknikker du kan bruke i Photoshop når du oppretter en CSS3 og Base64-vennlig design. Selv om vi kan oppnå mye med ren kode i disse dager, kan vi ennå ikke oversette alt du kan finne i Photoshop. Så det er viktig å ha "dos" og "don'ts" i tankene når du setter ut.
La oss komme i gang med en kort oversikt over CSSHat og PNGHat, Photoshop-pluginene vi skal bruke til å generere vår CSS3- og Base64-kode.
Med CSSHat-pluginet installert, kan du klikke på hvilket som helst lag i Photoshop-dokumentet, og vinduet CSSHat vil øyeblikkelig vise produksjonsklar kode for deg.
CSSHat tolker hovedsakelig fra lagstilstilinnstillingene dine, så du bør sikte på å legge til gradienter og grenser via lagstiler i stedet for noen av Photoshops alternative metoder.
Accentsconagua
px (valgfri)font-family, skriftstørrelse, font-weight (fet / normal), fontstil PNGHat kan gjøre mange ting. Sjekk ut hvordan du eksporterer Photoshop-eiendeler på nettet med PNGHat for en fullstendig nedlasting på plugin.
I tilfelle av denne opplæringen bruker vi den til å generere Base64-kode som vil danne bakgrunnsbildet til designet. Du vil se hvordan dette fungerer i praksis kort tid.
Når et bilde konverteres til Base64, får du en tekststreng som deretter kan innlemmes direkte inn i CSS. Jo flere data er i bildet, jo lengre strengen, derfor er Base64 best egnet til enkle fliser med få farger.
For å få ballen til å rulle trenger du noen ting.
Til å begynne med, bør du ha CSSHat- og PNGHat-pluginene installert.
Hvis du ikke klarer å kjøpe en kopi av CSSHat, kan du fortsatt følge med og bruke Photoshop i innebygd "Copy CSS" -funksjonalitet, som kan velges fra kontekstmenyen etter å ha høyreklikket et hvilket som helst lag.
Men i dette tilfellet må du manuelt fjerne uønsket standardkode for ting som absolutt posisjonering, z-indeks, dimensjoner og klassenavn. Den håndterer ikke generering av flere skygger og gradienter, så vel som CSSHat, og den kan ikke produsere mindre, Sass / SCSS eller Stylus klar kode.
Hvis du ikke kan kjøpe PNGHat, kan du manuelt eksportere bakgrunnsbildet ditt og sette det gjennom en online-omformer, for eksempel: http://webcodertools.com/imagetobase64converter
Jeg anbefaler også et tredje plugin fra Source som heter Subtle Patterns. Denne plugin-tillegget legger til et bibliotek med hundrevis av mønstre til Photoshop, som hver kan brukes umiddelbart som et mønsteroverlegg til et hvilket som helst lag.
Som et alternativ til å bruke pluginet Subtle Patterns, kan du bare bla gjennom mønstrene og laste dem ned gratis.
Merk: Jeg vet hva du kanskje lurer på - Det er mange ting ved Source, er dette et sponset innlegg? Nei. Sannheten er at jeg kjøpte Kildes hele produktsortiment lenge før jeg begynte å skrive for Tuts +, og jeg elsker hver og en av dem på grunn av det rene antallet timer de har lagt tilbake til dagen min. Jeg anbefaler disse pluginene fordi jeg har vært så imponert over min egen erfaring med hele pakken.
Vi legger noen ikoner inn i designet ditt via Font Awesome, så du må gå og laste ned skrifttypen og installere den på systemet ditt.
Skrifttypen til valg for vår vanlige tekst vil være Roboto, så du må installere det også. Du kan hente den fra Google Webfonts.
Opprett et nytt Photoshop-dokument på en størrelse på 1600 piksler x 2180px. Dobbeltklikk på standard "Bakgrunn" -lag for å låse opp det, og lagre deretter PSD-en.
I Subtile Patterns vindu, (eller nettsted), søk etter satengvev. Når du finner det, med din Bakgrunn lag valgt, klikk på tegningens tegning for å automatisk bruke det som et mønsteroverlegg.
Du bør nå se noen subtile gråtoner vertikale linjer på lerretet ditt. Vi har valgt dette mønsteret som en god passform for konvertering til Base64 fordi den bruker svært få farger og bare 24px med 12px i størrelse, noe som betyr at den vil produsere en relativt liten kode streng.
For å hjelpe rammen av siden, opprett et rektangel øverst på lerretet, kjør full bredde og 8 piksler i høyde. Gi det disse egenskapene:
Fyll farge: #dddddd
opacity: 50%
Lagstil> Innerskygge:
Normal # c8c8c8 100% -90 2 4 Lagstil> Drop Shadow:
Normal # ffffff 100% 90 2 1 Din "topp trim" bør se slik ut:
Gjennom å lage denne menyen får vi se noen av effektene som kan opprettes med gradienter, skygger og slag. Vi skal ha en skikkelig hevet meny som sitter i en innpakning.
Til å begynne med vil vi lage innpakningspakken som holder menyen. Lag et midtlinjert, avrundet hjørne rektangel på lerretet ditt på 1200px bred ved 61px høy. Angi følgende egenskaper:
Fyll farge: # f9f9f9 - Legg merke til at selv om det vil være en gradient på dette rektangelet, vil vi fremdeles stille en fyllfarge som en tilbakebetaling.
Egenskaper> Egenskaper for levende form> Hjørneradius: 12px
Lagstil> Innerskygge:
Normal # 000000 15% 90 1 10 Lagstil> Gradientoverlegg:
# ffffff # f3f3f3 lineær Lagstil> Drop Shadow:
Normal # ffffff 100% 90 1 2 Menypakken din skal nå se ut som:
Opprett et andre avrundet hjørne rektangel over menyomslaget ditt, på 1190px bred ved 50 piksler høyt, med sitt øverste venstre hjørne 5px ytterligere til høyre og ned enn menybryterens øverste venstre hjørne. Legg til disse egenskapene:
Fyll farge: # ffffff
Egenskaper> Egenskaper for levende form> Hjørneradius: 10px
Lagstil> Stroke:
1 utenfor # e4e4e4 Lagstil> Gradientoverlegg:
# e5e5e5 # ffffff lineær Lagstil> Drop Shadow:
Normal # c1c1c1 100% 90 3 4 Du bør nå ha:
Lag et annet rektangel, denne gangen på 130px bred ved 51px høyt, rett over toppen av "menybakgrunn" -linjen. Gi den denne overgangen på overgangen:
Lagstil> Gradientoverlegg:
#efefef # e4e4e4 #fcfcfc lineær Legg nå litt plassholdertekst: skriv inn ordet "Side" og plasser det over midten av menyelementene dine med følgende innstillinger:
Tegn> skrift: Roboto, Regular
Tegn> Skriftstørrelse: 18px
Karakter> Farge: # 5c5c5c
Lagstil> Drop Shadow:
Normal # ffffff 100% 90 1 0 Menyelementet ditt bør se slik ut:
Gjør et duplikat av menyelementet rektangel og tekst, og flytt det til høyre slik at det sitter like ved siden av originalen. Rediger teksten for å lese "Current".
Sett rektangulens lagstilte egenskaper til:
Lagstil> Stroke:
1 utenfor # e62d4ee4e4e4 Lagstil> Innerskygge:
Normal # faabb9 60% 90 3 5 Lagstil> Gradientoverlegg:
# ef3d5d # dc2345 # fc6c86 lineær Lagstil> Drop Shadow:
Normal # cc2241 100% 90 1 0 Endre deretter tekstfargen og slipp skyggeinnstillingene til:
Karakter> Farge: # ffffff
Lagstil> Drop Shadow:
Normal # b50020 100% 90 1 0 Når du er ferdig med det ovennevnte, gjør du noen flere duplikater av det opprinnelige "menyelementet" og plasser dem til høyre for "nåværende menyelement". Vi gjør dette for å se hvordan menyelementene stiler ser ut når de sitter flush mot hverandre for å sikre at det er tilstrekkelig visuell adskillelse fra ett element til det neste.
Dessverre har Photoshop ingen måte å sette inn noe som "border-left", så vi kan ikke angi venstre eller høyre grenser direkte på menyelementene rektangler. Imidlertid må vi likevel simulere effekten slik at vi kan skape separasjon mellom hvert element. Bruk Photoshops linjeværktøy til å tegne noen 1px brede vertikale linjer mellom menyelementene, og angi fyllfarge til #dddddd
Med alle disse elementene på plass bør du ha:
Hvis du brukte dette oppsettet for en klient, er dette området du vil legge til hovedkrok eller ring til handling. I forbindelse med denne opplæringen legger du til følgende fire linjer, alle sentrert på siden:
Gi de første og tredje linjene følgende innstillinger:
Tegn> skrift: Roboto, Tynn
Tegn> Skriftstørrelse: 48px
Karakter> Farge: # 6b6b6b
Gi deretter den andre og fjerde linjen disse innstillingene:
Tegn> skrift: Roboto, fet
Tegn> Skriftstørrelse: 80px
Karakter> Farge: # ef3d5d
Teksten din skal nå se slik ut:
Under hovedteksten, opprett et avrundet hjørne rektangel 1200px bred ved 665px høy. Gi det disse innstillingene:
Fyll farge: # ffffff
Egenskaper> Egenskaper for levende form> Hjørneradius: 15px
Lagstil> Stroke:
1 innsiden # d8d8d8 Lagstil> Drop Shadow:
Normal # c1c1c1 27% 90 3 4 Deretter, 60px Under toppen av panelets bakgrunn, opprett et annet avrundet hjørne rektangel. Det bør være 1230px bred og 70 piksler høy. Senter den på lerretet slik at det stikker ut av 15px hver side av panelets bakgrunn. Gi det disse egenskapene:
Fyll farge: # ef3d5d
Egenskaper> Egenskaper for levende form> Hjørneradius: 10px
Lagstil> Innerskygge:
Normal # de2a4a 60% 90 0 5 Lagstil> Gradientoverlegg:
# ef2c4f # dc2345 # fc6c86 lineær Lagstil> Drop Shadow:
Normal # cc2241 100% 90 3 0 Vi har allerede en dråpeskygge satt på rektangelet vi nettopp har opprettet, noe som vil gi den en subtil 3D-effekt. Men vi vil også ha en ny dråpe skygge som vil se ut som en faktisk skygge av en downlight. Fordi vi allerede har "brukt opp" dropshadowegenskapen til det eksisterende rektangelet, må vi opprette et andre rektangel for å bruke en ny skygge til.
Dupliser panelets bakgrunnsrektangel og dra den under originalen i lagpanelet, og fjern deretter den eksisterende lagestilen. Navngi det "panelheadershadow" slik at du kan fortelle de to lagene enkelt fra hverandre. Gi det disse drop shadow-innstillingene:
Lagstil> Drop Shadow:
Normal # 000000 27% 90 5 3 Rett over midten av paneloverskriften skrives ut "I DENNE TUTORIALEN:" og gi teksten disse innstillingene:
Tegn> skrift: Roboto, Regular
Tegn> Skriftstørrelse: 24px
Karakter> Farge: # ffffff
Lagstil> Drop Shadow:
Normal # b50020 100% 90 1 0 Til slutt legg til disse linjene med tekst:
Sett den første teksten til:
Tegn> skrift: Roboto, Tynn
Tegn> Skriftstørrelse: 36px
Karakter> Farge: # 6b6b6b
Og den andre teksten til:
Tegn> skrift: Roboto, Svart
Tegn> Skriftstørrelse: 48px
Karakter> Farge: # 6b6b6b
Marker deretter hvert av symbolene "+" og sett fargen deres til: # ef3d5d
Du bør nå ha et informasjonspanel som ser slik ut:
Det er her vi begynner å bruke Font Awesome. Vi skal plassere "fa-down-arrow" -ikonet og bruke det i stedet for et bilde.
Den enkleste måten å gjøre dette på er å få riktig "brev" i cachen din ved å gå til Font Awesome cheatsheet. Finn "fa-down-arrow" -ikonet, merk deretter den lille forhåndsvisningen, og trykk på CTRL / CMD + C
Fremhev og kopier den lille pil nedoverGå tilbake til lerretet ditt, plasser en markør med tekstverktøyet og lim inn det tegnet du nettopp kopierte. Først ser du bare et morsomt lite rektangel med et kryss i det, så endre innstillingene dine til dette:
Tegn> skrift: FontAwesome
Tegn> Skriftstørrelse: 200px
Karakter> Farge: # 6b6b6b
Kontroller at pilen er sentrert på lerretet, og sett lagets opasitet til 30%. Du burde nå ha denne kule utseende pilen:
Opprett et nytt avrundet hjørne rektangel, 420 piksler bred ved 105px høy. Knappen vil bruke nøyaktig samme lag stil egenskaper som "Panel header bakgrunn", slik at du kan bare kopiere over disse lag stiler. Høyreklikk laget på panelhovedbakgrunnen og velg "Kopier lagstil", høyreklikk deretter det nye knappelaget og velg "Lim inn lagstil".
Som vi gjorde med panelhovedbakgrunnen, ønsker vi å lage et andre rektangel for denne knappen som kan ha en andre dråpeskygge brukt på den. Dupliser ditt knappelag og dra den under originalen i lagpaletten din, og endre den på nytt "knappen skygge". Kopier lagstilen fra "panelheadershadow" -laget du opprettet tidligere, og lim det inn på den nye "knappen" -skyggen" lag.
Vi skal legge til en liten sirkel til knappen som vil se ut som en liten depresjon, og vi vil da sette en høyre pekende hvit pil på toppen av det.
Opprett en sirkel (ellipse) over knappen på 47px av 47px. Plasser den slik at den er lik avstand fra topp-, venstre og nedre kantene på knappens bakgrunn, og gi den denne overgangen på overgangen:
Lagstil> Gradientoverlegg:
# f04f6c # e32d4f lineær For å lage den høyre pekepilen skal vi igjen bruke FontAwesome. Gå tilbake til cheatsheet og denne gangen kopierer du fa-caret høyre ikon. På lerretet ditt, bruk tekstverktøyet til å plassere en markør over sirkelen du nettopp har opprettet og lim inn i ikonet / tegn for Font Awesome. Gi det disse egenskapene:
Tegn> skrift: FontAwesome
Tegn> Skriftstørrelse: 36px
Karakter> Farge: # ffffff
Plasser den nyopprettede hvite pilen i midten av sirkelen den sitter over.
Over toppen av knappen, til høyre for sirkelen og pilen, skriver du «Start opplæringen» og gir teksten disse innstillingene:
Tegn> skrift: Roboto, Regular
Tegn> Skriftstørrelse: 36px
Karakter> Farge: # ffffff
Denne teksten bruker samme fargeskygge som «Panel headtekst», slik at du kan kopiere stilen fra teksten og lime den inn på dette laget.
Du burde nå ha en knapp som ser slik ut:
Vi kommer nå til å legge til det endelige elementet i designet, noe trim på bunnen for å fullføre innramming av plassen. Når dette elementet er kodet opp, bruker vi separate topp- og bunngrenseinnstillinger, men da Photoshop ikke kan lette dette, bruker vi igjen formverktøy i stedet for at vi kan få de riktige farger på plass.
Under startknappen, lag et rektangel med en fyllfarge på #dddddd det er 5px høy og strekker hele bredden på siden. Dupliser det nye rektangelet og flytt det ned 10px så det er en 5px gap mellom de to rektanglene.
I midten av lerretet og over de to grå linjene / rektanglene tegner du en sirkel som er 40px av 40px og gi den disse egenskapene:
Fyll farge: # f2f2f2
Lagstil> Stroke:
5 innsiden #dddddd Lagstil> Gradientoverlegg:
#dddddd # f2f2f2 radial Vær spesielt oppmerksom på innstillingene for gradientoverlegg, da de er forskjellige fra de som vi tidligere har brukt. Fargen stopper er plassert på 40% og 45% i stedet for 0% og 100%, og vi bruker en radial gradient i stedet for lineær. Sammen med grensen / slaget gir dette effekten av en liten grå sirkel omgitt av en større.
Din nederste trim skal se slik ut:
Du bør nå ha en ferdig PSD-design, 100% klar for oversettelse til ren CSS3 og Base64-kode:
I følgende del av denne opplæringen:
Jeg ser deg da!
