Share
Ikke bare har akvarellbørstestninger blitt en populær trend i moderne webdesign, men har også avanserte lag av gjennomsiktighet (eller det jeg kaller, translucens). Det nye Envato-designet har fått mye kudos for å bruke denne effekten, og denne opplæringen vil vise deg hvordan du lager en lignende effekt, samtidig som du kombinerer den med andre populære webtrender.
Ta en titt på bildet vi skal skape.
La oss sette opp dokumentet vårt. Jeg pleier å lage mine nettsteder med en fast bredde på 960 px og variabel høyde. For denne opplæringen valgte jeg en høyde på 800px for å sikre at vi har nok plass til alle innholdsdelene vi ønsker å inkludere. Opprette originaldokumentet med den nøyaktige størrelsen du vil at nettstedet skal gjøre det lettere å lage guider.
Deretter skal vi sette opp våre guider. Dra retningslinjer fra dokumentlinjene til de fire kantene av dokumentet.
Nå må vi tildele litt plass til bakgrunnen vi skal lage. Gå til Image> Canvas Size og utvide dokumentet til 1100 piksler med 1000 piksler. Dette burde gi oss rikelig med områder for å fylle ut vår unike bakgrunn.
Fyll nederste lag med hvitt (Shift + F5). Gi nytt navn til dette laget som "bakgrunn". Dokumentet ditt skal nå se ut som bildet nedenfor.
Høyreklikk på "bakgrunn" -laget, og velg Blandingsalternativer. Vi legger til et Gradient Overlay i vårt "bakgrunn" -lag. Jeg valgte en tre fargegradient med litt blues og tans, men du kan i hovedsak velge noen farger du vil ha. Skjønnheten ved å bruke blandingsalternativene til bakgrunnen er at du når som helst kan enkelt bytte ut farger og justere gradienten etter smak.
Dokumentet ditt skal nå se slik ut:
Du vil kanskje hoppe over dette trinnet, men jeg føler at den skarpe gradienten er litt for blank for dette designet. Vi legger til litt støy for å tone det litt.
Lag et nytt lag. Gi nytt navn til dette laget "støy". Fyll deretter laget med hvitt (Rediger> Fyll). Når du har laget fylt med hvitt, må vi legge til noe støy ved å bruke Filter> Støy> Legg til støy. Sett beløpet til 400%, med en uniform distribusjon og ikke-monokromatisk. Alle støyens farger gir oss mye mer dybde i bakgrunnen.
Sett "Støy" -laget til Multiply, og sett Opacity til 5%. Dette burde gi oss akkurat nok kornethet å tone nedover gradienten.
Først må du laste ned noen penselstrømpebørster, hvis du ikke allerede har dem. Her er noen jeg har brukt tidligere: "Penselstreng".
Lag et nytt lag, over lagene dine "bakgrunn" og "støy". Gi nytt navn til dette laget til "brush1" (vi lager flere lag som dette). Sett dette laget til Multiply. Velg en varm forgrunnsfarge (for å kompensere de kule tonene) i vår blå gradientbakgrunn. Jeg valgte en varm brun: # 996726. Velg børsten du ønsker å tegne, og plasser den øverst til venstre i dokumentet, og sørg for at penselslaget ligger utenfor grensene for retningslinjene dine (vi vil at bakgrunnen skal utvides utenfor).
Juster laget Opacity til 50% (slik at kornet viser seg). Gjenta de to foregående trinnene for flere børster som passer til din smak. Din bakgrunn bør nå se ut som bildet vist nedenfor.
Gratulerer, din egendefinerte, unike bakgrunn er fullført. Siden du plasserte børstene tilfeldig, vil det skille deg fra de designene som kjøpte en lignende lagerbakgrunn.
Først må vi ta tak i det avrundede rektangelverktøyet, og sett radiusen til 20px. Fremfor alt ditt bakgrunnslag (pensler + støy + gradient), dra og tegne et avrundet rektangel i de opprinnelige retningslinjene vi har satt opp. Ditt rektangel skal være 960px ved 800px. Endre navn på dette laget "container", og Høyreklikk laget, og velg Rasterize Layer (vi skal gjøre noen endringer i dette laget senere, så vi kan også få det ut av veien nå).
For å gjøre "beholderlaget" utseende ugjennomsiktig, må vi gjøre noen ting:
Når du har angitt alle lagstiler, bør "container" -laget ditt se slik ut:
For å sikre at vi holder fast konsistens på "container" -laget (forutsatt at vi ikke vil telle våre piksler hver gang vi plasserer et element), la vi legge til guider ved 40px i vår originale guideboks.
Som du så i Final Preview, vil vi gjøre navigasjonen så som den er sunket eller skjære ut av "beholder" laget. For å gjøre dette vil vi bare fjerne noe av "container" -laget og la lagstilene gjøre deres magi.
For å opprette valget for utklippet, vil vi opprette en ny rektangulær form i det rommet vi ønsker at navigasjonsutskriften skal være. Bruk en radius på 10px her (som er halve radiusen av "beholder" laget) for å sikre at hjørnet har konsistent avstand hvor det avrundes.
Hvis nødvendig, flytt formen til øverst til høyre på dine indre polstringslinjer. Når du har laget på plass, kommandoklikk laget i lagets palett slik at det er valgt. Velg "container" -laget og trykk Slett. Du kan nå skjule ditt 10px avrundede rektangel for navigasjonen, og "container" -laget ditt vil nå vise en utklipp som vist under.
Legg merke til hvor glatt de avrundede hjørner er. Hvis vi ville ha nettopp valgt et firkantet område og avrundet valget, ville utklippshørene ha sett veldig hakkete ut. Også, det er ikke fint hvordan lagstilene automatisk blir brukt på laget, og alle skråningene og skyggene vi la til, ser bra ut.
Nå trenger vi litt tekst. Jeg valgte Rockwell som min skrift (det kommer som standard med MS Office, men kan også kjøpes). Jevnt plasser navigasjonselementene i utklippet som vist.
Vi ønsker å gi teksten en etset i stein effekt, og for å gjøre dette legger vi til en dråpeskygge i teksten (vi kan også legge til en indre skygge, men det gjør teksten tynnere enn den egentlig er). Her er de skyggeinnstillingene jeg vanligvis bruker.
For å oppnå ønsket effekt, lager vi et nytt lag like under teksten vi la til for navigasjonen. Gi nytt navn til dette laget "aktiv nav". Fyll dette valget med hvilken som helst farge (det spiller ingen rolle).
Deretter må vi legge til noen lagstilter til "active nav" -laget. Jeg har gitt dem under (du trenger en Drop Shadow, Gradient Overlay, Stroke og Inner Glow).
Dupliser ditt "active nav" -lag (Command + J), og flatt alle lagstiler. Gi nytt navn til dette laget "aktiv nav flatet." Vi skal bruke noen avlinger til dette laget, og vi vil ikke ha lagstiler lenger.
Bruk seleksjonsverktøyet til å slette streken og innvendig glød fra toppen og bunnen av det "aktive navflattede" laget.
Nå må vi legge til skyggene for å få laget "active nav" til å se ut som det er vevd gjennom "container" -laget. Vi lager disse skyggene ved hjelp av Ellipseverktøyet.
Lag en svart ellipse som er 20px bredere enn bredden på det "aktive navflattede" laget og omtrent 5px høyt. Senter din ellipse på toppkanten av det "aktive navflatede" laget. Høyreklikk laget og velg Rasterize Layer. Gi nytt navn til dette laget til "topp aktiv skygge."
Vi må sløre ellipsen litt, gå til Filter> Blur> Gaussian Blur og søk med med en radius på 2px. Nå som ellipsen ser mer ut som en skygge, vil vi fortsette og slette topp 50% av skyggen.
Juster opaciteten til "top active shadow" laget til 75%. Den øverste skyggen er ferdig. For å lage den nederste skyggen, dupliser laget (Command + J), bruk Rediger> Transform> Flip Vertical, og flytt skyggen til bunnen av "Aktiv nav flatt lag."
Før vi kommer til logoen, la oss avslutte vår topptekst litt. Først legger vi til et par flere guider. Tegn en horisontal guide 40px under bunnen av navigasjonsutsnittet som vist.
Vi skal lage vår skillelinje, noe som vil gi inntrykk av at "beholderlaget" har etset eller foldet på dette stedet. For å opprette denne effekten tegner du en 1px høy horisontal linje på et nytt lag som kjører bredden på "container" -laget. Fyll din horisontale linje med en mørkegrønn (jeg valgte min fra bakgrunnen). Gi nytt navn til dette laget "separeringslinje".
For å få etsingsfølelsen, dupliser "separeringslinjens" lag og fyll dette laget med hvitt. Flytt dette laget 1px ned, slik at toppen av det berører det opprinnelige "separeringslinjeskiktet".
Nå må vi legge til vår logo. Jeg er ikke mye av en logo designer, så jeg valgte bare en kul skrift (Gill Sans) og skrev litt stor tekst i øverste venstre hjørne. Akkurat som vi gjorde utklippet for navigasjonen, gjør et utvalg av logoteksten og slett den fra "container" -laget. Layer Styles vil igjen tilpasse seg den nye formen, og oppdateres til den.
Stjernen ble gjort ved å bruke nøyaktig samme teknikk som det aktive navigasjonselementet, for å få det til å virke som om det stikker ut av "beholderlaget".
Igjen, vi skal bruke samme utklippsteknikk som vi brukte til navigasjonsseksjonen.
Lag et avrundet rektangel med en grense radius på 10px. Pass på at du tillater 40 px mellomrom på alle sider (vi opprettet guidene tidligere for å hjelpe med dette).
Kommandoklikk det runde rektangellaget for å velge det, velg deretter "container" -laget og trykk Slett. Du kan fjerne det avrundede rektangelet, da vi ikke vil bruke det lenger.
Vi må da opprette pilene på hver side, så du kan ha flere porteføljeposter på forsiden og bytte gjennom dem i en slags lysbildefremvisning. For å gjøre dette, opprett en sirkel på 40 px med formverktøyet. Flytt sirkelen på plass på venstre side, sentrere den på kanten av utsnittet.
Dupliserer sirkelen til den andre siden, og senter den igjen på den andre kanten av utsnittet (horisontalt og vertikalt).
Siden vi ikke jobber med vektormasker her (og fyllingen vår er satt til 0% på "container" -laget), må vi øyeblikkelig justere dette for å sikre at vi kan legge til på "container" -laget.
Så la oss sette fyllingen av "beholder" laget til 100%. Nå Merge Down (Command + E) begge sirkler vi opprettet for pilene i "container" laget. Når du har slått sammen, kan du sette Fill av "container" -laget tilbake til 0%. Her er ønsket effekt:
Legg merke til hvordan de to sirkler har blitt en del av "container" laget.
Deretter må vi legge til noen piler. Du kan enkelt lage dem ved hjelp av parentes, men jeg valgte å lage min egen.
Lag et avrundet rektangel med en kantradius på 3px, bredde på 20px, høyde på 6px; og plasser den rett over der du vil ha pilen. Transform og roter (Command + T) det avrundede rektangel med 45 grader mot klokken, slik at det er vippet. Slik gjør vi poenget til pilen.
Dupliser det avrundede rektangelet (Command + J) og Rediger> Transform> Flip Vertical. Flytt laget på plass, slik at de venstre hjørnene er kantet opp og produserer en brakett. I lagpaletten velger du begge avrundede rektangler og slår sammen lagene (Command + E). Gi nytt navn til laget "venstre pil". Slik ser pilen din ut:
Vi må legge til noen lagstilter på pilen for å gjøre det passe med resten av designet som følger:
Dupliser "venstre pil" -laget (Command + J), og rediger> Transform> Vend horisontalt. Gi nytt navn til dette laget "høyre pil", og flytt det til høyre side av utklippet.
En siste ting vi må legge til for vårt utvalgte porteføljeposterområde er en skygge for å gi det litt dybde. Legg til en gjennomsiktig til svart gradient nederst på utsnittet som vist.
For å trimme ut eventuell overskytende gradient utenfor skjæringen, bare kommando + Klikk på "container" -laget og trykk Slett. Vi legger skjermdumpene våre under dette laget for å gi en illusjon av dybden.
Ta en skjermdump av ditt favorittsted (jeg brukte en av min egen portefølje, ryanscherf.net). Gi nytt navn til dette laget "skjermbilde".
Legg til et slag og en innvendig skygge til "skjermbildet" laget, bruk lagstilene dine:
Dupliser "skjermbildet" -laget, og flatt alle lagstiler (flett skjermbildet "skjermbilde" med et nytt, tomt lag). Roter skjermbildet "skjermbilde" 45 grader mot urviseren, akkurat som du gjorde for pilene i trinn 9.
Legg skjermbildet nederst til venstre på porteføljeskåret, og sørg for at toppen av skjermbildet stikker ut av utklippet (vi skal gi det litt dybde) og få det til å se ut som det er gjemt bak "beholderlaget". Beskjær eventuelle overskudd av "skjermbildekopien" fra bunnen som vist.
Nå som vi har vår skjermbilde på plass, la oss legge til en kort beskrivelse til høyre. Ikke noe for fancy her, men prøver fortsatt å holde fast ved vårt tema på dybde og lag.
Lag litt tekst med en nesten hvit (eller veldig lyseblå / grønn) farge. Bruk samme fargeskygge etsning teknikk fra navigasjonen (vinkel ved -60 grader, avstand på 1px og størrelse på 1px).
Lag et ugjennomsiktig firkant bak teksten. Jeg brukte et helt svart lag, med 30% opasitet. Effekten skal se slik ut:
Vi trenger noen navigeringspunkter som iPhone-visningene. Vi lager en aktiv prikk, som vil bruke nøyaktig samme lagstiler som «active nav» -laget (forhåpentligvis slette du ikke det), og en inaktiv prikk som bruker lagstiler fra "venstre pil" -laget.
Merk: Gjenbruk av lagstilter er viktig, ikke bare fordi det sparer tid fra å gjenskape lignende stiler, men også fordi det vil holde utformingen konsekvent gjennom hele.
Lag en sirkel ved hjelp av Shape Tool, med en diameter på 20px (jeg liker mine navigeringspunkter stort, som jeg finner noen ganger er de for vanskelig å klikke og navigere gjennom). Høyreklikk på "active nav" -laget og velg Copy Layer Style. Velg sirkelen fra Lagpaletten, Høyreklikk, og velg Lim inn lagstil.
Gjenta disse trinnene for så mange inaktive prikker som du vil, pass på at du bruker lagestilen fra "venstre pil" -laget.
Vi må la våre besøkende vite nøyaktig hva vi viser her. Vi lager et bånd med nøyaktig samme teknikk som vi brukte for "active nav" -laget, som ble skissert over i trinn 7.
Den eneste forskjellen her er at jeg har lagt til litt høyere opasitet for dråpeskyggen for å sikre at det ser ut som det hviler langt over alt annet.
For å fullføre denne delen, vil vi duplisere (Command + J) vår "separeringslinje" -lag som vi opprettet i trinn 8, og flytte det 40 px under utskriften av porteføljeposter. Det er det!
Vi lager først flere guider for å sikre at vi har tre like kolonner. Ikke vær redd, men vi må gjøre matte her:
960px bred side - 80px av indre polstring = 880px ledig plass til våre kolonner. Vi vil også legge til 40px polstring mellom kolonnene, så i hovedsak har vi 800px tilgjengelig for våre 3 kolonner.
800px delt med 3 tilsvarer 266px per kolonne (jeg valgte mine kolonner som 267px, 266px, 267px fra venstre til høyre for å opprettholde balansen). Deretter tegner du støttelinjene med disse intervaller, slik at du tar hensyn til 40px-polstring på hver side av senterkolonnen.
Opprett en ny gruppe i lagets palett som heter "Siste fra bloggen." Dette er hvor vi skal holde alle lagene knyttet til denne delen.
Lag litt tekst for overskriften. Igjen brukte jeg Rockwell-fonten med de samme lagformatene for etsning som jeg brukte på navigasjonen. I tilfelle du glemte, er det skissert i trinn 6.
Velg en tilpasset form for å forankre hver side av teksten. Jeg valgte en standard Photoshop tilpasset form, men det er bokstavelig talt tusenvis av tilpassede figurer du kan legge til i biblioteket ditt.
Vi må legge til noen lagstiler til figurene slik at de ser litt mer 3D ut:
Det endelige produktet skal se ut som det følgende bildet.
Vi trenger litt tekst nedenfor for våre blogginnlegg. Pass på at tekstfargen din er en lys nyanse av den blå / grønne bakgrunnen. Vi kan bruke så mange forskjellige nyanser av denne blå / grønn som vi vil, og det vil sikkert gjøre at teksten skiller seg ut.
For å få teksten til å se ut etset igjen, vi skal prøve litt annerledes spinn på den tidligere teknikken. Før vi la til en svart dråpe skygge øverst til venstre i teksten, men siden vi bruker en litt lettere tekst, skal vi legge til dropshadow nederst til høyre ved hjelp av hvitt. Du kan se effekten nedenfor:
Jeg brukte den egendefinerte, runde formen for kulene, og gjenbrukte lagestilen fra de egendefinerte figurene vi la til i overskriften til denne delen.
Denne delen skal være ganske enkel. Dupliser "Siste fra bloggen" -gruppen og endre navnet på duplikatet til "Twitter-oppdateringer".
Juster teksten for å være mer indikativ for en Twitter-oppdatering (linker, nevner, tidsstempel osv.). Flytt denne gruppen til senterkolonnen - og du er ferdig!
Dupliser "Twitter Updates" -gruppen, og endre navnet på "Nyhetsbrev". Flytt denne gruppen til høyre kolonne.
Juster innholdet for å være mer som et beskrivende avsnitt, samt fjern alle kulene (innledende avsnitt trenger vanligvis ikke kuler).
For å opprette e-post skjemaet oppretter vi et avrundet rektangel med kantlinje på 10px og høyde på 40px. Bredden skal være 266px (eller hva du valgte som bredden til høyre kolonne). Gi nytt navn til dette laget til "input form", og sett lagformatene som følger:
Til slutt, vi trenger en knapp for å sende skjemaet. Vi bruker våre lagstilter fra "aktiv nav" -laget for knappen, fordi vi ønsker å holde det konsistente utseendet på alle elementene våre.
Lag et annet avrundet rektangel, Høyde på 40px, Bredde på 140px og en kantlinje på 20px. Gi nytt navn til dette laget til "knappen".
Kopier lagstilen fra "active nav" -laget og lim det inn på "knappen" -laget.
Dupliser teksten fra navigasjonen (Command + J) og endre den for å si "Abonner". Flytt teksten som skal sentrere i knappen. Resultatet skal se ut som bildet nedenfor.
Klienter vil alltid be om det, og du bør alltid legge til det. Utenfor og under ditt "container" -lag, legg til noen opphavsrettsinformasjon. Bruker etsning teknikk igjen for å gi det litt dybde.
Jeg håper dette hjelper alle med å utforske noen nye grenser med egne design. Som du så, er mange av de teknikkene som diskuteres her enkle, men likevel elegante; og bør være enkel å implementere i dine egne design.
Accentsconagua