Create en grungy, Gjennomsiktige Web Portfolio Design
Ikke bare har akvarell penselstrøk blitt en populær trend i moderne web design, men så har avanserte lag av gjennomsiktighet (eller hva jeg kaller, gjennomsiktighet ). Den nye Envato design har fått mye skryt for å bruke denne effekten, og denne opplæringen vil vise deg hvordan du oppretter en lignende effekt, mens kombinere det med andre populære web trender.
Final Forhåndsvisning av bilde
Ta en titt på bildet vi skal opprette.
Tutorial Detaljer
Program: Adobe Photoshop CS3 +
Vanskelighetsgrad: Middels
Estimert Gjennomføring Tid: 2 timer
< h3> Trinn 1 - Sett opp Mal
La oss sette opp vår dokument. Jeg pleier å lage mine nettsteder med en fast 960 x bredde og variabel høyde. For denne opplæringen, valgte jeg en høyde på 800px for å sikre at vi har nok plass for alle innholds deler vi ønsker å inkludere. Opprette originaldokumentet på den eksakte størrelsen du vil at nettstedet skal være gjør det lettere for å skape guidene.
Deretter vil vi sette opp våre guider. Dra retningslinjer fra dokumentet herskere til de fire kantene på dokumentet.
Nå må vi fordele litt plass for bakgrunnen vi vil lage. Gå til Image > Canvas Size og utvide dokument til 1100 piksler med 1000 piksler. Dette bør gi oss rikelig med areal til å fylle ut vår unike bakgrunn.
Fyll bunnen lag med hvit (Shift + F5). Gi nytt navn til dette laget som "bakgrunn". Dokumentet skal nå se ut som på bildet nedenfor
Trinn 2 -. Opprett Gradient Bakgrunn
Høyreklikk på "bakgrunn" lag, og velg Blending Options. Vi skal legge en Gradient Overlay til vår "bakgrunn" lag. Jeg valgte en tre farge gradient med noen blues og tans, men du kan faktisk velge alle farger du ønsker. Det fine med å bruke Blending Options for bakgrunnen er at til enhver tid, kan du enkelt bytte ut farger og justere gradient å smake
Dokumentet skal nå se slik ut:.
Du kan være lurt å hoppe over dette trinnet, men jeg føler den skarpe gradient er litt for blank for denne utformingen. Vi vil legge til litt støy å tone det ned litt.
Lag et nytt lag. Gi denne layer "støy". Deretter fylle laget med hvit (Edit > Fyll). Når du har laget fylt med hvit, må vi legge til litt støy ved hjelp av Filter > Noise > Legg til støy. Sett Beløp 400%, med en jevn fordeling og ikke-monokromatisk. Alle fargene på støy vil gi oss mye mer dybde i vår bakgrunn.
Sett "støy" lag for å formere seg, og sett Opacity til 5%. Dette bør gi oss akkurat nok kornethet Først trenger du å laste ned noen penselstrøk børster, hvis du ikke allerede har dem. Her er noen jeg har brukt i det siste: ". Brush Stroke" Lag et nytt lag, over din "bakgrunn" og "støy" lag. Gi nytt navn til dette laget til "brush1" (vi skal opprette flere lag som dette). Sett dette laget til Multipliser. Velg en varm forgrunnsfarge (for å oppveie de kjølige toner) i vår blå gradient bakgrunn. Jeg valgte en varm brun: # 996726. Velg pensel du ønsker å tegne, og plassere den i øverst til venstre i dokumentet, slik at børsten hjerneslag er utenfor grensene for dine retningslinjer (ønsker vi bakgrunnen for å ekspandere utenfor). Juster lag opacity til 50% (slik at kornethet viser gjennom). Gjenta de to foregående trinnene for flere børster som passer din smak. Din bakgrunn bør nå se ut som på bildet nedenfor. Gratulerer, din egendefinerte, er unik bakgrunn fullført. Siden du plassert børster tilfeldig, vil det skille deg fra de design som har kjøpt en lignende lager bakgrunn Først vi må ta tak i Avrundet rektangel Tool, og satt radiusen til 20px. Fremfor alt av dine bakgrunnslag (børster + støy + gradient), dra og tegner et avrundet rektangel innenfor de opprinnelige retningslinjene vi har satt opp. Rektangelet skal være 960 x 800px. Gi denne layer "container", og Høyreklikk på laget, og velg Rastrer Layer (vi skal gjøre noen endringer i dette laget senere, så vi kan like godt få dette ut av veien nå). For å gjøre "container" lag ser ugjennomsiktig, må vi gjøre et par ting: Når du har satt alle lagstiler, din "container" lag bør se slik ut: For å sikre at vi holder oss med konsekvent polstring på "container" lag (forutsatt at vi ikke ønsker å telle våre piksler hver gang vi legger et element) For å opprette utvalg for utskjæringen, vil vi lage en ny rektangulær form i verdensrommet at vi ønsker navigasjons cutout å være. Bruk en radius på 10px her (som er halve radius av "container" layer), for å sikre at hjørnet har konsekvent avstand der det er avrundet. Hvis det er nødvendig, flytte formen til øverst til høyre dine indre padding ledelinjer. Når du har laget på plass, Kommando-klikker du på lag i Layer palett så det er valgt. Velg "container" lag og trykk Delete. Du kan nå skjule 10px avrundet rektangel for navigasjon, og din "container" lag vil nå vise en utskjæring som vist nedenfor. Legg merke til hvor glatt avrundede hjørner er. Hvis vi ville ha bare valgt et firkantet område og rundet valg, ville de cutout hjørnene har så veldig hakkete. Dessuten er det ikke fint hvordan Layer stil er automatisk påført laget, og alle beveling og skygger vi lagt ser flott ut. Nå må vi litt tekst. Jeg valgte Rockwell som min font (det kommer standard med MS Office, men kan også kjøpes). Jevnt plass navigasjons elementer innen utskjæringen som vist. Vi ønsker å gi teksten en risset inn i stein For å oppnå ønsket effekt, vil vi opprette et nytt lag rett under teksten vi lagt for navigasjon. Gi denne layer "aktiv nav." Fyll dette valget med hvilken som helst farge (det spiller ingen rolle). Deretter må vi legge til noen Layer Styles til den "aktive nav" lag. Jeg har gitt dem under (du trenger en Drop Shadow, Gradient Overlay, Stroke, og indre glød). Duplicate den "aktive nav" lag (Command + J), og flat alt av laget stiler. Gi denne layer "aktiv nav flat." Vi kommer til å bruke noen avlinger til dette laget, og vi ønsker ikke lagstiler lenger. Bruk Selection Tool for å slette Stroke og indre glød fra toppen og bunnen av " aktiv nav flatet "lag. Nå må vi legge skyggene for å gjøre den" aktive nav "lag ser ut som det er vevd inn i" container "lag. Vi vil opprette disse skygge med Ellipse Tool. Lag en svart ellipse som er 20px bredere enn bredden på den "aktive nav flatet" lag og omtrent 5px høy. Sentrer din ellipse på den øverste kanten av "aktive nav flatet" lag. Høyreklikk på layer og velg Rastrer Layer. Endre navn på dette laget til ". Top aktiv skygge" Vi trenger å dimme ellipsen litt, gå til Filter > Blur > Gaussian Blur og påfør med en radius på 2 piksler. Nå som ellipse ser mer ut som en skygge, vil vi gå videre og slett topp 50% av skyggen. Juster Opacity av "top aktive skygge" lag 75%. Den øverste skyggen er gjort. Å skape bunnen skygge, duplisere lag (Command + J), gjelder Rediger > Transform > Flip Vertical, og flytte skyggen til bunnen av Før vi kommer til logoen, la oss ferdig ut vår header litt. Først vil vi legge til et par flere guider. Tegn en horisontal guide 40px under bunnen av navigasjons cutout som vist. Vi kommer til å lage vår skillelinjen, som vil gi inntrykk av at "container" lag har en etsning eller brettes på dette få øye på. For å skape denne effekten, tegne en 1px hau horisontal linje på et nytt lag kjører bredden på "container" lag. Fyll horisontal linje med en mørk grønn (jeg valgte mine fra bakgrunnen). Gi denne layer "skille linje." For å få etsing føler, duplisere "skille line" lag og fylle dette laget med hvitt. Flytt dette laget 1px ned slik at toppen av den berører den opprinnelige "skille line" lag. Nå må vi legge vår logo. Jeg er ikke mye av en logo designer, så jeg valgte bare en kul font (Gill Sans) og skrev noen stor tekst i venstre kryss. Akkurat som vi gjorde utskjæringen for navigasjon, gjøre et utvalg av logoen teksten og deretter slette den fra "container" lag. Igjen Layer Styles vil tilpasse seg den nye formen, og oppdatere til den. Stjernen ble gjort ved hjelp av nøyaktig samme teknikk som aktiv navigasjon element, for å gjøre det synes som om det stikker ut av den " container "lag Nok en gang, vi kommer til å bruke samme cutout teknikk som vi brukte for navigasjonsdelen Opprett et avrundet rektangel med en ramme radius på 10px. Sørg for å tillate 40px avstand på alle sider (vi laget guidene tidligere for å hjelpe til med dette). Kommando-klikk avrundet rektangel lag å velge den, og deretter velge "container" lag og trykk Delete. Du kan fjerne avrundet rektangel som vi ikke vil bruke det lenger. Vi må skape pilene på hver side, slik at du kan ha flere portefølje elementer på forsiden og veksle mellom dem i en slags lysbildeserie. For å gjøre dette ved å opprette en 40px diameter sirkel med Shape Tool. Flytte sirkelen på plass på venstre side, sentre det på kanten av utskjæringen. Duplicate sirkelen for den andre siden, og nok en gang sentrere det på den andre kanten av utskjæringen (horisontalt og vertikalt) . Siden vi ikke jobber med vektormasker her (og vår Fill er satt til 0% på "container" lag), må vi øyeblikk justere dette for å sikre at vi kan legge seg på "container" lag. Så, la oss sette Fill av "container" lag til 100%. Nå Merge Down (Kommando + E) som begge sirklene vi opprettet for pilene inn i "container" lag. Når du har slått sammen ned, kan du deretter sette Fill av "container" lag tilbake til 0%. Her er ønsket effekt: Legg merke til hvordan de to sirklene har nå blitt en del av "container" lag Neste vi må legge til noen piler.. Du kan enkelt lage dem ved hjelp av braketter, men jeg valgte å lage min egen Opprett en avrundet rektangel med en Border Radius av 3px, Bredde på 20px, høyde 6PX.; og plassere den rett over der du vil pilen. Omforme og Roter (Command + T) avrundet rektangel med 45 grader mot klokken slik det står på skrå. Dette er hvordan vi skal gjøre det punktet til pilen Dupliser avrundet rektangel (Command + J), og Edit >.; Transform > Flip Vertical. Flytt lag på plass, slik at de venstre hjørnene er foret opp med å produsere en brakett. I Layer Palette, velge begge avrundede rektangler og flette lagene sammen (Kommando + E). Endre navn på lag "pil venstre". Her er hvordan pilen bør se: Vi må legge til noen Layer Styles til pilen slik at den passer med resten av designet som følger: Dupliser "pil venstre" lag (Command + J), og Edit > Transform > Vend vannrett. Gi denne layer "pil høyre", og flytte den til høyre side av utskjæringen. En siste ting vi må legge til for vår omtalt portefølje eks-området er en skygge for å gi det litt dybde. Legg en gjennomsiktig til svart gradient på bunnen av utskjæringen som vist. For å klippe av overflødig gradient utenfor utskjæringen, rett og slett Command + Klikk på "container" lag og trykk Delete. Vi kommer til å plassere våre screenshots nedenfor dette laget for å gi illusjon av dybde Ta et skjermbilde av din favoritt nettsted (jeg brukte en av mine egne portefølje, ryanscherf.net). Gi denne layer "screenshot". Legg til en Stroke og Indre skygge til "screenshot" lag bruke Layer Styles: Dupliser "screenshot" lag, og flat alle lagstiler (flette "screenshot kopi" lag med en ny, blank layer). Roter "screenshot kopi" lag 45 grader mot klokken, akkurat som du gjorde for pilene i Trinn 9. Plasser skjermbilde nederst til venstre av porteføljen cutout, slik at toppen av skjermbilde pinner ut av cutout (vi kommer til å være å gi det litt dybde) og slik at det ser ut som det er gjemt bak "container" lag. Beskjære overflødig av "skjermbilde kopien" 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 fortsatt prøver å feste med vårt tema av dybde og lag. Lag litt tekst med en nesten hvit (eller svært lys blå /grønn) farge. Bruk samme skygge etsning Opprett en ugjennomsiktig plassen bak teksten. Jeg brukte et helt sort lag, ved 30% dekkevne. Effekten skal se slik ut: Vi trenger noen navigasjons prikker som visningene iPhone. Vi vil opprette en aktiv prikk, som vil bruke de samme Layer Styles som "aktive nav" lag (forhåpentligvis du ikke slette den), og en inaktiv prikk som bruker Layer Styles fra "pil venstre" lag. . Merk: Gjenbruk Layer Styles er viktig ikke bare fordi det sparer tid fra å måtte gjenskape lignende stiler, men også fordi det vil holde design konsekvent gjennom Opprett en sirkel med Shape Tool, med en diameter på 20px (jeg liker mine navigasjons prikker stor, så finner jeg noen ganger er de så vanskelig å klikke og navigere gjennom). Høyreklikk på "aktiv nav" lag og velg Copy Layer stil. Velg sirkelen fra lagpaletten Høyreklikk og velg Paste Layer stil. Gjenta disse trinnene for så mange inaktive prikker som du ønsker, og sørg for å bruke lagstilen fra "venstre pil "lag Vi må la våre besøkende vet nøyaktig hva vi er et utstillingsvindu her. Vi vil skape et bånd med nøyaktig samme teknikk som vi brukte for "aktive nav" lag, som ble skissert ovenfor i trinn 7. Den eneste forskjellen her er at jeg har lagt litt høyere tetthet for skygge for å sikre at det ser ut som det hviler langt over alt annet. For å avslutte dette avsnittet ønsker vi å duplisere (Command + J) vår "skille line" lag vi opprettet i trinn 8 og flytt den 40px under portefølje elementer cutout. Det er det Vi skal først lage flere guider for å sikre at vi har tre like kolonner. Ikke vær redd, men vi må gjøre litt matematikk her: 960 x bredt område - 80px av indre padding = 880px ledig plass for våre spalter. Vi vil også være lurt å legge 40px padding mellom kolonnene, så i hovedsak har vi 800px tilgjengelig for våre 3 kolonner. 800px delt på tre lik 266px per kolonne (jeg valgte mine kolonner som 267px, 266px, 267px fra venstre til høyre for å opprettholde balansen). Så, tegne guider på disse intervallene, slik at du står for 40px padding på hver side av midtkolonnen Opprett en ny gruppe i din Layer palett som heter, "Siste fra bloggen." Det er der vi vil holde alle lagene knyttet til denne delen. Lag en tekst for overskriften. Igjen, jeg brukte Rockwell skrift med de samme Layer Styles for etsning 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 Vi må legge til noen Layer Styles til figurer for å gjøre dem ser litt mer 3D. Den endelige Produktet skal se ut omtrent som bildet nedenfor. Vi trenger noen teksten nedenfor for våre blogginnlegg. Sørg for at din tekst farge er en lys skygge av det blå /grønne bakgrunnen. Vi kan bruke så mange forskjellige nyanser av blå /grønn som vi liker, og det vil sikkert gjøre vår tekst skiller seg ut. For å gjøre teksten titt etset Jeg brukte skikk, runde formen for kuler, og gjenbrukes lagstilen fra tilpassede former vi lagt i overskriften på dette avsnittet Denne delen skal være ganske enkelt. Duplisere "Siste fra bloggen" gruppen og endre navn på duplikat til «Twitter-oppdateringer." Juster teksten skal være mer en indikasjon på en Twitter-oppdatering (linker, nevner, tidsstempel, etc). Flytt denne gruppen til sentrum kolonnen - og du er ferdig Dupliser "Twitter Updates" gruppe, og endre navnet til "reise". Flytt denne gruppen til høyre kolonne. Juster innholdet til å være mer som en beskrivende ledd, samt fjerne alle kulene (innledende avsnittene vanligvis ikke trenger kuler). For å opprette e-postskjema, vil vi lage et avrundet rektangel med Border Radius av 10px, og høyde 40px. Bredden bør være 266px (eller hva du valgte som bredden på høyre kolonne). Gi nytt navn til dette laget til "input form," og sette de Layer Styles som følger: Til slutt, trenger vi en knapp for å sende inn skjemaet. Vi vil bruke våre Layer Styles fra "aktive nav" lag for knappen, som vi ønsker å holde det konsekvent utseende til alle våre elementer. Opprett en avrundet rektangel, høyde 40px, Bredde på 140px og en Border Radius av 20px. Gi nytt navn til dette laget til "-knappen." Kopier Layer stil fra "aktive nav" lag og lim den inn på "knappen" lag. Duplicate teksten fra navigasjons (Command + J) og endre det å si "Abonner". Flytt teksten til å være sentrert i knappen. Resultatet skal se ut som på bildet nedenfor Kundene vil alltid be om det, og du bør alltid legge det til. Utenfor og under din "container" lag, legge til litt informasjon om opphavsrett. Bruke etsning Jeg håper dette hjelper alle utforske noen nye grenser med sine egne design. Som du så, mange av teknikkene som diskuteres her er enkel, men likevel elegant; og skal være enkelt å implementere i ditt eget design. Anmeldelser
å tone ned gradient
Trinn 3 -. Tilsett Texture (penselstrøk) til Bakgrunns
Trinn 4 -. Lag Indre Opaque /Gjennomsiktige Container
Sett "container" lagets Fill til 0% (vi skal bruke Color Overlay lag stil for å gi den litt farge)
Legg til en Drop Shadow. Opacity på 41%, Vinkel på 90, Avstand fra 0, Spread av en, og størrelse 10
Skråkant og preg: Stil av Inner Bevel, Teknikk satt til Glatt, Dybde på 100%, Retning Up, størrelse på 20px, mykere av 0px, Angle 135, Høyde ved 58, Marker Opacity på 27%, og Shadow Opacity satt til 15%
Color Overlay: Hvit med en Opacity på 73%
Stroke: Størrelse 1px og Opacity på 100% (for å gi den litt ekstra dybde)
Trinn 5 - Sett opp Indre Stopp Guides
Trinn 6, la oss legge guider på 40px inne vår opprinnelige guide boks - En cutout Navigation
<. p> Som du så i finalen Preview, ønsker vi å gjøre navigeringen ser ut som det er nedsunket
eller kuttet ut
av "container" lag. For å gjøre dette, vil vi bare fjerne noe av "container" lag og la Lagstil oss gjøre sin magi.
effekt, og for å gjøre dette, legger vi en skygge til teksten (vi kan også legge til en indre skygge, men det gjør teksten vises tynnere enn den faktisk er). Her er de Skygge innstillingene jeg bruker vanligvis
Trinn 7 -. Aktiv Navigation Woven gjennom Page
Trinn 8 "aktiv nav flatet lag.» - Fullfør Ut Header Med en logo
Trinn 9 -.. Featured Portfolio Elementer
Viktig
Fyll: 0%
Indre skygge: Opacity på 50%, Angle 120, Avstand fra 2, Choke satt til 0, Størrelse på tre, og Støy på 0
Trinn 10 -. Legge til en portefølje Varen
teknikk fra navigasjons (Angle på -60 grader, Avstand fra 1px, og størrelse på 1px).
Trinn 11 -. merke det med et bånd
Trinn 12 - Opprett hovedinnholdet området
Trinn 13 -. Siste fra bloggen Column
som jeg brukte på navigasjon. I tilfelle du har glemt, er det skissert i trinn 6.
Color Overlay: # 0e696a
Indre skygge: Opacity på 63%, Vinkel på 120 grader, Avstand fra 1px, og størrelse på 1px
igjen, vi er kommer til å prøve en litt annerledes vri på den tidligere teknikk. Før vi lagt en svart skygge til toppen venstre for teksten, men siden vi bruker litt lettere tekst, kommer vi til å legge vår skygge til høyre, ved hjelp av hvit. Du kan se effekten nedenfor.
Trinn 14 - Nyeste Twitter Updates
Trinn 15 - Nyhetsbrev Meld deg Form
Trinn 16 -. Legg Copyright Information
teknikk igjen for å gi det litt dybde.
Konklusjon