I denne opplæringen Vi vil bruke 960 Grid System. Last den ned og pakk ut arkivet. Deretter åpner “ 960_grid_12_col.psd ” fil i Photoshop.

De 12 røde søyler som du ser er det nettet som vi skal bruke. Du kan skjule røde streker ved å klikke på øyet ikonet for “ 12 Col Grid ” lag. Dette PSD filen inneholder noen guider også, som vil være svært nyttig. For å aktivere dem gå til Vis > Show > Guider, eller bruk snarveien Kommando /Ctrl +;. Jeg pleier å skjule røde streker og aktivere guider når jeg trenger dem.

Også smarte guider er svært nyttig når designe web-oppsett. Aktivere /deaktivere dem ved å gå til Vis > Show > Smart Guides. De vil hjelpe deg justere hvert lag avhengig av posisjonen til andre lag.

I denne opplæringen vil du bli bedt om å lage figurer med visse dimensjoner. Når du oppretter en form, vil du se den nøyaktige bredde og høyde i infopanelet (Vindu > Info).

Nå som vi dekket grunnleggende for å bruke 960 Grid System, kan vi gå videre til å lage selve web layout. La ’ s komme i gang

Trinn 1: Sette opp dokumentet

Åpne " 960_grid_12_col.psd " fil i Photoshop. Så gå til Bilde > Canvas Size og angi bredden til 1200px og høyden til 2400px. Dette vil gi oss nok plass til å arbeide med

Trinn 2:. Opprette overskriften på vår web layout

Opprett en ny gruppe og gi den navnet " Header ". Velg rektangelverktøyet (U) og lage et rektangel med dimensjonene 1200px ved 520px og fargen # 595e61. Navn dette laget " header bg ", høyreklikk på den og velg Convert to Smart Object

Gå til Filter >.; Noise > Legg Støy og bruke innstillingene fra bildet under. Dette vil skape en fin subtil tekstur.

Last ned denne pakken av stoff mønstre og åpne .pat filen i Photoshop. Deretter dobbeltklikker du på " header bg " lag for å åpne Lagstil vinduet og legge et mønster Overlay effekt med innstillingene fra bildet nedenfor og et mønster fra pakken du lastet ned

Trinn 3:. Opprette navigasjons bakgrunnen

Velg rektangel Tool (U) og lage et rektangel på toppen av dokumentet med høyden 120px og farge # 000000. Navn dette laget " navigasjon bg ". Sett Fill av dette laget til 20%, dobbeltklikker du på den og bruke innstillingene fra bildet nedenfor for Inner Shadow

Nå vil vi legge til en sirkel i ". Navigasjon bg " lag for å gjøre plass til logoen senere. Velg Ellipse Tool (U) og klikk på " Legg til forme området (+) " .-knappen fra alternativ bildet over din

Klikk på vektormaske av " navigasjon bg " lag for å gjøre den aktiv. Deretter bruker Ellipse Tool, holder du nede Skift-tasten og lage en sirkel i midten av navigasjonsfeltet med radius 140px. Ta en titt på følgende bilde for referanse

Trinn 4:. Lage en stiplet linje mønster

Opprett et nytt dokument (Kommando /Ctrl + N) med dimensjonene 3px av 1px. Zoom inn så mye du kan. Deretter velger du Rectangular Marquee Tool (M) og lage en firkant utvalg som du ser i bildet nedenfor. Lag et nytt lag og fylle markeringen med hvitt.

Hide " Bakgrunn " lag ved å klikke på øye-ikonet. Deretter slo Kommando /Ctrl + D for å fjerne markeringen. Lagre mønsteret ved å gå til Rediger > Definer Mønster. Gi mønsteret et navn og klikk OK.

Gå tilbake til ditt layout dokumentet. Velg Line Tool (U) og sette Vekt til 1px. Deretter holder du nede Skift-tasten og lage en horisontal linje nederst på navigasjonslinjen.

Sett Fill av dette laget til 0% og Opacity til 20%. Dobbeltklikk på dette laget å åpne Lagstil vinduet og legge det mønsteret du opprettet tidligere.

Nå må vi slette det området av den stiplede linjen som går over sirkelen. Bruk Rectangular Marquee Tool (M) for å velge det området. Så gå til Layer > Lagmaske > Skjule Utvalg

Trinn 5:. Legge gradienter til header bakgrunn

Bruk Rectangular Marquee Tool (M) for å opprette et utvalg som du ser på bildet nedenfor (1). Så gå til Layer > New Fill Layer > Gradient og bruke innstillingene fra følgende bilde (2).

Klikk på masken av dette laget å gjøre det aktivt. Deretter velger du en svart myk børste (B) og male med den over området der gradienten dekker navigasjonslinjen sirkel (3). Sett opacity på dette laget til 3% (4).

Nå vil vi legge til en radial gradient i bunnen av overskriften bakgrunnen. Hold nede Kommando /Ctrl-tasten og klikk på miniatyrbildet av " header bg " lag for å laste et utvalg av det. Så gå til Layer > New Fill Layer > Gradient og bruke innstillingene fra bildet nedenfor (1).

Med Gradient Fill vinduet fremdeles er åpent, klikker på bildet og dra ned. Sett blandingen modus for dette laget til Soft Light 40%

Trinn 6:. Legge subtile grunge brushes til header bakgrunn

Last ned denne pakken av børster og åpne dem i Photoshop. Opprett en ny gruppe og gi den navnet " børster ". Deretter oppretter du et utvalg av " header bg " lag (hold nede Kommando /Ctrl-tasten og klikk på miniatyrbildet). Forsikre deg om at " børster " laget er aktiv og gå til Layer > Lagmaske > Avslør Utvalg. Nå er alt vi satt inne i denne gruppen vil være synlig bare over header området.

Lag et nytt lag i denne gruppen. Sett forgrunnsfargen til hvit. Velg Brush Tool (B) og bruke noen av børstene du har lastet ned for å legge en subtil grunge effekt på spissen. Opprett et nytt lag for hver børste du bruker, og justere opasiteten til hvert lag. Deretter sette Blend Mode av " børster " gruppe til Soft Light. Ta en titt på følgende bilde for referanse.

Trinn 7

Velg Line Tool (U), holder du nede Skift-tasten og lage en horisontal linje med vekt 1px og fargen # 50565a. Navn dette laget " 1px linje " og legg den i bunnen av topptekstområdet.

Duplicate dette laget (Kommando /Ctrl + J), velg Move Tool (V) og traff pil opp på tastaturet for å flytte det én piksel opp. Endre fargen på denne linjen til # 8e9496

Trinn 8:. Opprette logoen

For å lage en logo vi vil bruke både Adobe Photoshop og Illustrator. Først vil vi skape teksten og en sirkel med stiplet strek i Illustrator, og da vil vi fullføre logo ved hjelp av Photoshop.

Fyr opp Adobe Illustrator og opprette et nytt dokument. Velg Type Tool (T) og skrive " Min Folio ". Sett hvert ord i et separat objekt. Skriften som jeg brukte heter akzidenz-Grotesk Condensed Medium Kursiv

Velg de to tekstobjekter som bruker Selection Tool (V) og gå til Objekt >.; Utvide. Dette vil gjøre tekstlag redigerbare slik at vi kan endre ankerpunktene

Velg ordet ". Min " og flytte den ned for å koble den nederste området av brevet " Y " med det øverste området av brevet " F ".

Bruk Direct Selection Tool (A) for å velge ankerpunktene fra bunnen av " Y " brev, som du ser i bildet nedenfor. Deretter slo tilbaketasten for å slette dem

Bruk Pen Tool (P) for å rekonstruere den nederste delen av brevet ". Y " og koble den til " F " brev. Pass på at du lukker banen. Ta en titt på følgende bilde for referanse.

Nå må vi lage en sirkel med en hvit stiplet strek. Velg Ellipse Tool (L), hold nede Skift-tasten og lage en sirkel uten fyll og en 1pt hvit strek. Deretter går du til Strek-panelet (Vindu > Stroke) og bruke innstillingene fra følgende bilde

Endre fargen på teksten til hvit.. Jeg har lagt en grå firkant under alle stedene for å se teksten og sirkelen

Finishing logoen i Adobe Photoshop

Gå tilbake til Photoshop, opprette en ny gruppe og gi den navnet ". Logo ". Deretter velger du Ellipse Tool (U) og lage en sirkel med dimensjonene 125px ved 125px og fargen # 2e3134

Navn dette laget ". Sirkel ", dobbeltklikk på den for å åpne Lagstil vinduet og legge et mønster Overlay effekt ved hjelp av følgende innstillinger. Skinnet mønster som jeg brukte er fra pakken du lastet ned i begynnelsen av denne opplæringen.

Kopier tekstobjekter fra Illustrator, gå tilbake til Photoshop og lime dem som et smart objekt. Bruk Free Transform (Kommando /Ctrl + T) for å endre størrelsen på dette laget og sette den i sentrum av den mørke sirkelen. Legg en Color Overlay effekt til dette laget med fargen # f4f4f4.

Kopier stiplet sirkel fra Illustrator og lime den inn i Photoshop som smart objekt. Bruk Free Transform (Kommando /Ctrl + T) for å endre størrelsen på dette laget og sette den i midten av den mørke sirkelen. Navn dette laget " stiplet sirkel " og sette opacity til 60%

Dupliser ". stiplet sirkel " lag (Kommando /Ctrl + J). Bruk Free Transform (Kommando /Ctrl + T) for å endre størrelsen på dette laget til den når den buede kanten under logoen. Navn dette laget " bunnen grensen ".

Bruk Rectangular Marquee Tool (M) for å velge den øvre delen av sirkelen som du ser i bildet nedenfor. Så gå til Layer > Lagmaske > Skjule Utvalg. Det vil gi en stiplet buet linje under logoen, akkurat som vi ønsker

Trinn 9:. Legge navigasjons

Opprett en ny gruppe og gi den navnet " Navigation ". Velg Type Tool (T) og skriv navnet for menyelementer navigasjon ved hjelp av skrift Oswald og fargen hvit. Spre dine navigasjonselementer like i venstre og høyre side av logoen.

Opprette stilen for menypunktet
aktiv

Velg Avrundet rektangel Tool (U) og sett Radius til 4px . Deretter oppretter du en avrundet rektangel under en av våre navigasjons element med høyde 32px og fargen svart.

Sett Fill av dette laget til 25%, dobbeltklikker du på den for å åpne Lagstil vinduet og bruke innstillinger fra følgende bilde.

Trinn 10: Opprette " Utvalgt " Området

Opprett en ny gruppe og gi den navnet " Utvalgt ". Velg Type Tool (T) og skrive navnet på prosjektet med skriften Oswald med størrelsen 22pt og fargen hvit. Sett dette laget i venstre side av oppsettet og på 50 piksler under navigasjonsfeltet.

Velg Line Tool (U) og lage en horisontal linje med bredde 300px. Sett Fill av dette laget til 0% og Opacity til 50%. Dobbeltklikk på dette laget og legge den stiplede linjen mønster som du opprettet tidligere i denne opplæringen.

Bruk Type Tool (T) for å legge til en blokk med tekst under den horisontale linjen. Bruke skriften Helvetica med fargen hvit og på størrelse 13pt. Gå til Tegn-panelet (Vindu > Character). Og sette den ledende (avstanden mellom linjer av type) til 24 pt å gjøre teksten mer lesbar

Opprette en " Les mer " knappen

Opprett en ny gruppe og gi den navnet " knappen ". Velg rektangelverktøyet (U) og sett Radius til 4px. Deretter oppretter du en avrundet firkant under tekstblokk med størrelsen 110px ved 30px og fargen # 9ca2a6. Navn dette laget " knappen ".

Dupliser " knappen " lag (Kommando /Ctrl + J) og flytte dette nye laget under den originale. Velg Move Tool (V) og traff pil ned på tastaturet en gang for å flytte dette laget én piksel ned. Sett opacity på dette laget til 50%.

Dupliser forrige lag (Kommando /Ctrl + J) og endre farge til # 54585b. Flytt dette laget én piksel ned og sette opacity til 100%

Nå bør du ha tre ". Knappen " lag. Dobbeltklikk på den øverste å åpne Lagstil vinduet og bruke innstillingene fra bildet under. Fargen som jeg brukte for Strek effekten er # 54585b

Hold nede Kommando /Ctrl-tasten og velge de to ". Knappen " lag fra bunnen. Høyreklikk på en av dem og velg Konverter til smart objekt.

Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde for Gradient Overlay. Dette vil legge til en subtil 3D-effekt til knappen

Hold nede Kommando /Ctrl + Shift-tastene, og klikk på miniatyrbildet av ". Knappen " smart objekt og deretter på vektormaske av " knappen " lag. Dette vil skape et utvalg av hele knappen. Lag et nytt lag og fylle markeringen med hvitt. Hit Kommando /Ctrl + D for å fjerne markeringen.

Høyreklikk på dette laget og velg Konverter til smart objekt. Deretter går du til Filter > Noise > Legg Støy og bruke innstillingene fra bildet under. Sett blandingen modus for dette laget til Multipliser 25%

Nå velger Type Tool (T) og skrive ". Les mer " på knappen ved hjelp av skrift Oswald med størrelsen 15pt og fargen hvit. Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde for Drop Shadow

Trinn 11:. Legge et bilde slider

Opprett en ny gruppe og gi den navnet " image slider ". Velg rektangelverktøyet (U) og lage et rektangel med dimensjonene 620px by 300px. Navn dette laget " image_holder ", dobbeltklikk på den for å åpne Lagstil vinduet og bruke og bruke innstillingen fra følgende bilde for Ytre glød

Åpne et bilde i Photoshop som du ønsker du har i. dette området og flytte den inn på din egen layout dokument ved hjelp av Move Tool (V). Navn dette laget " bilde " og sette den over " image_holder " lag. Deretter høyreklikker du på den og velg Create Clipping Mask. Nå bildet vil være synlig bare over området av " image_holder " laget.

Opprette bildeskyve pilene

Velg Custom Shape Tool (U), høyreklikker du på bildet og velg en piltast former. Deretter oppretter du en pil i høyre side av bildet slider med fargen # e2e6e8

Navn dette laget ". Høyre pil ", dobbeltklikk på den for å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde. Høyreklikk på dette laget og velg Konverter til smart objekt. Deretter satt sin opacity til 40%

Duplicate dette laget (Kommando /Ctrl + J) og navngi den nye ". Venstre pil ". Deretter går du til Edit > Transform > Vend vannrett. Flytt denne pilen i venstre side av nettet layout. Ta en titt på følgende bilde for referanse.

Opprette navigasjons kuler for bildet slider

Opprett en ny gruppe og gi den navnet " navigasjons kuler ". Velg Ellipse Tool (U), holder du nede Skift-tasten og lage en sirkel med dimensjonene 10px av 10px og fargen # 4d5357. Navn dette laget ". Navigasjon bullet ".

Duplicate dette laget (Kommando /Ctrl + J) et par ganger, og ordne dem som du ser i bildet nedenfor

Velg Ellipse Tool ( U) igjen og skape en mindre sirkel i midten av en navigasjons kule for å indikere den aktive bildet. For denne sirkelen bruke farge # 9ca2a4

Trinn 12:. Lage " tjenester " Området

Opprett en ny gruppe og gi den navnet " tjenester ". Velg rektangelverktøyet (U) og lage et rektangel med høyden 450px og fargen #fafafa.

Navn dette laget " tjenester bg ", høyreklikk på den og velg Konverter til smart objekt. Så gå til Gå til Filter > Noise > Legg Støy og bruke innstillingene fra følgende bilde.

Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde for Indre skygge og Ytre glød.

Velg Line Tool (U) og dra en horisontal linje på bunnen av " tjenester " område med fargen # d2d2d2. Navn dette laget " 1px linje ".

Duplicate dette laget (Kommando /Ctrl + J) og endre fargen på den nye linjen til hvit. Deretter flytter dette laget 1px opp

Trinn 13:. Legge til innhold på " tjenester " Området

Velg Type Tool (T) og skrive ordet " tjenester " med størrelsen 38pt og farge # 5b656a. Sett dette laget i på venstre side av nettet layout og 40px under " omtalt " . område

Opprett en ny gruppe og gi den navnet " webdesign ". Lag en annen gruppe inne dette og kaller det " spotlights ". Vi vil lage en 3D-utseende rom med noen spoter over et bilde.

Velg rektangel Tool (U) og lage et rektangel med dimensjonene 300 x 100 piksler og fargen # 3b444a. Navn dette laget " border ", høyreklikk på den og velg Konverter til smart objekt.

Gå til Gå til Filter > Noise > Legg Støy og bruke innstillingene fra bildet under. Deretter dobbeltklikker du på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde for Gradient Overlay.

Nå vil jeg vise deg hvordan du kan lage 3D-utseende rom. Først velger rektangel Tool (U) og opprette en grå firkant med dimensjonene 286px etter 86px og legg den i midten av " border " rektangel. Dette er et midlertidig lag som vil hjelpe oss å lage veggene.

Velg rektangel Tool (U) og lage et rektangel med høyde 22px og fargen # 434f57. Sørg for at dette laget ikke går over grå rektangelet. Navn dette laget " etasje ", dobbeltklikk på den for å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde.

Opprett en ny rektangel med dimensjonene 240px ved 64px og farge # 3b4851. Navn dette laget " frontveggen " og plassere det som du ser i bildet nedenfor. Ten legge en Gradient Overlay effekt til dette laget

Bruke Direct Selection Tool (A), velger du øverst i høyre hjørne på ". Gulv " lag og flytte den til venstre. Velg deretter den øvre venstre hjørne og flytt den til høyre. Ta en titt på følgende bilde for referanse.

Lag en firkant i venstre side av 3D-rom med fargen # 39444b. Bruk Direct Selection Tool (A) for å flytte den nederste høyre hjørne av denne rektangel, som du ser i bildet nedenfor. Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde.

Duplicate dette laget (Kommando /Ctrl + J) og flytt den til høyre. Deretter endrer vinkelen på Gradient Overlay til 0.

Opprett en ny rektangel på toppen av 3D-rom med fargen # 505e67. Navn dette laget " tak " og bruke Direct Selection Tool (A) for å justere de nederste hjørnene som du gjorde for " etasje " lag. Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde.

Nå kan du slette den grå rektangelet du har lagt i begynnelsen av dette trinnet. Nedenfor kan du se hvordan min " 3d room " gruppe ser ut

Høyreklikk på ". 3d room " gruppen, og velg Konverter til smart objekt. Så gå til Gå til Filter > Noise > Legg Støy og bruke innstillingene fra følgende bilde

Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra bildet nedenfor

Trinn 14:.. Opprette spotlights

Opprett en ny gruppe og gi den navnet " topp lysene ". Deretter velger du Ellipse Tool (U) og lage en hvit sirkel, som du ser i bildet nedenfor. Høyreklikk på dette laget og velg Konverter til smart objekt. Deretter går du til Filter > Blur > Radial Blur og bruke innstillingene fra bildet under. Navn dette laget " lys en ".

Opprett en ny sirkel, større enn den forrige. Navn dette laget " lys 2 " og konvertere den til smart objekt. Påfør deretter en Radial Blur Filter med de samme innstillingene.

Gjenta prosessen en gang til med en større sirkel. Navn dette laget " lys 3 ". . Ta en titt på følgende bilde for referanse

Gruppe tre " lys " lagene sammen og sett opacity til hver og en som følger:

" tenne en " - 70%

" lys 2 " - 50%

" lys 3 " - Soft Light 40%

Duplicate gruppen to ganger og ordne spotlights som du ser i bildet nedenfor

Hold nede Kommando /Ctrl + Shift-tastene, og klikk på. miniatyr av hver " lys " lag for å velge dem. Så gå til Layer > New Adjustment Layer > Hue & Metning og bruke innstillingene fra følgende bilde. Dette vil legge til en subtil blå farge til lysene.

Noen av lysene kan gå over grensen av 3D-rom. For å rette opp dette, holder du nede Kommando /Ctrl-tasten og klikk på miniatyrbildet av " 3d room " lag. Klikk deretter på " topp lysene " gruppe for å gjøre det aktivt og gå til Layer > Lagmaske > Avslør Utvalg

Opprett en ny gruppe og gi den navnet ". Gulv lys ". Deretter bruker Ellipse Tool (U) for å opprette tre ellipser som du ser i bildet nedenfor. Konvertere hver lag til et smart objekt. Deretter legge til en Gaussian Blur-filter og et støyfilter til hvert lag. Sett opacity av disse lagene til 40%.

Deretter kan du legge til et bilde i midten av 3d rom som representerer design service du har lagt. Jeg brukte Webdesign Tuts + logo.

Trinn 15

Velg rektangel Tool (U) og lage et hvitt rektangel med dimensjonene 300 x 210px under spotlights området. Navn dette laget " innhold bg ", dobbeltklikk på den for å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde for Ytre glød.

Velg Pen Tool (P) og lage en trekant form ved hjelp av farge # d1d6da, som du ser i bildet nedenfor. Du kan aktivere guider for å hjelpe deg å lage denne formen.

Navn dette laget " topp trekant ", dobbeltklikk på den for å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde. Fargen som jeg brukte for Strek effekten er # c5cace.

Velg Type Tool (T) og legge til innhold for denne tjenesten boksen. For overskriften bruke skriften Oswald med størrelsen 20 pkt og farge # 747d82.

for tekstblokk bruke skriften Helvetica Vanlig med størrelsen 13pt og farge # 5f6c74. Sett også ledende i denne tekstlaget til 24 pkt fra tegnpanelet.

Opprett en ny svart stiplet linje mønster akkurat som du laget den hvite i begynnelsen av denne opplæringen. Deretter bruker Line Tool (U) for å dra en horisontal linje mellom overskrift og tekstblokk. Sett Fill av dette laget til 0% og bruke det mønsteret du opprettet

Kopier ". Les mer " knappen fra " omtalt " området (høyreklikk på sin gruppe og velg Duplicate Group). Deretter flytter den nye knappen under tekstblokk fra " tjenester " område. Ta en titt på følgende bilde for referanse.

Step 16

Dupliser " webdesign " gruppe to ganger og ordne nye kolonner som du ser i bildet nedenfor. Deretter erstatte overskriftene og bildene som er under spotlights

Trinn 17:. Opprette " Portfolio " Området

Opprett en ny gruppe under " tjenester " gruppe og gi den navnet " Portfolio ". Deretter velger du rektangel Tool (U) og lage et rektangel med høyden 590px og farge # f1f1f1 under " tjenester " Området

Navn dette laget ". portefølje bg ", høyreklikk på den og velg Konverter til smart objekt. Gå til Filter > Noise > Legg Støy og bruke innstillingene fra følgende bilde. Deretter dobbeltklikker du på dette laget å åpne Lagstil vinduet og anvende en av stoff teksturer du har lastet ned

Velg Type Tool (T) og skrive ". Portfolio " i øvre venstre hjørne av dette området. Jeg brukte skriften Oswald med størrelsen 38pt og farge # 5b656a

Trinn 18:. Legge portefølje elementer

Opprett en ny gruppe og gi den navnet " bilder ". Deretter velger du rektangel Tool (U) og lage et rektangel med dimensjonene 180px by 140px. Navn dette laget " image_holder ".

Duplicate dette laget (Kommando /Ctrl + J) og flytter det nye rektangelet til høyre på 10px avstand fra den første. Fortsett å kopiere dette laget før du oppretter et rutenett som du ser i bildet nedenfor.

Åpne noen bilder som du ønsker å vise frem i " portefølje " område. Dra hvert bilde over en " image_holder " lag, høyreklikker du på lagene av bildene, og velg Create Clipping Mask. Dette vil sette et bilde inne i hver firkant.

På bildet under er det to kolonner hvor jeg ikke legge noen bilder. Vi vil bruke dette området til å legge en detaljert portefølje element.

Trinn 19: Legge til en detaljert portefølje element

Opprett en ny gruppe og gi den navnet " aktive prosjektet ". Velg rektangelverktøyet (U) og lage et rektangel over de to kolonner som ikke har noen bilder med farge # 595e61.

Velg rektangelverktøyet igjen og lage et bilde holder med dimensjonene 330px by 160px. Åpne et bilde som du vil vise i dette området og sette den over " image_holder " lag. Høyreklikk på " bilde " lag og velg Create Clipping Mask.

Velg Type Tool (T) og legge litt innhold til dette området. For overskriften bruke skriften Oswald med størrelsen 22pt og fargen hvit. For tekstblokk bruke skriften Helvetica Vanlig med størrelsen 13pt og fargen #fafafa

Duplicate en av det forrige ". Les mer " knapper og legg den under tekstblokk fra " aktive prosjektet " . område

Opprett en ny gruppe og gi den navnet " nær knappen ". Velg rektangel Tool (U), holder du nede Skift-tasten og lage en firkant med dimensjonene 20px av 20px og fargen # 484c4f. Sett dette rektangelet i øvre høyre hjørne av " aktive prosjektet " Området

Velg Line Tool (U) og opprette to diagonale linjer for å danne en ". X " form. Hold nede Skift-tasten for å dra en linje på 45 °

Trinn 20:. Opprette " Blogg " Området

Opprett en ny gruppe og gi den navnet " blogge ". Velg rektangelverktøyet (U) og lage et rektangel med høyden 340px under " portefølje " området ved hjelp av farge #fafafa.

Høyreklikk på dette laget og velg Konverter til smart objekt. Gå til Filter > Noise > Legg Støy og bruke innstillingene fra bildet under.

Velg Line Tool (U) og lage en horisontal linje på toppen av dette rektangelet med fargen # d2d2d2. Kopiere denne layer (Kommando /Ctrl + J) og flytte den nye linjen én piksel ned. Endre fargen på denne linjen til hvit

Trinn 21:. Legge blogginnlegg

Velg Type Tool (T) og skrive " Blogg " . i øvre venstre hjørne av dette området ved hjelp av skriften Oswald med størrelsen 38pt og farge # 5b656a

Opprett en ny gruppe og gi den navnet " post # 1 ". Velg rektangelverktøyet (U) og lage et bilde holder med dimensjonene 180px by 140px. Åpne et bilde som du vil vise i dette området, og dra den over den " image_holder " lag. Høyreklikk på " bilde " lag og velg Create Clipping Mask å gjøre det synlig bare over området av " image_holder " laget.

Velg Type Tool (T) og legge litt innhold ved siden av bildet. For overskriften bruke skriften Oswald med størrelsen 22pt og farge # 747d82. For tekstblokk bruke skriften Helvetica Vanlig med størrelsen 13pt og farge # 5f6c74. Sett også ledende i dette avsnittet til 24 pkt. Deretter legge til en " Les mer " . knappen under tekstblokk

Dupliser " post # 1 " gruppe og bevege den nye til høyre. Deretter kan du endre bildet og innhold for denne bloggposten

Trinn 22:. Opprette " Footer " Området

Opprett en ny gruppe og gi den navnet " footer ". Duplisere " header bg " lag (Kommando /Ctrl + J) fra " Header " gruppe og flytte den på bunnen av oppsettet, under " Blogg " område. Navn dette laget " footer bg ".

Hold nede Kommando /Ctrl-tasten og klikk på miniatyrbildet av " footer bg " lag for å velge det. Så gå til Layer > New Fill Layer > Gradient og bruke innstillingene fra bildet under. Mens Gradient Fill vinduet er fortsatt åpent, klikker du på bildet og flytte gradient opp, som du ser i bildet nedenfor.

Sett Blend Mode av dette laget til Soft Light 40%.
< p> Velg Line Tool (U) og lage en horisontal linje på toppen av din " Footer " område med fargen # 50565a. Navn dette laget " 1px linje ".

Duplicate dette laget (Kommando /Ctrl + J) og flytte det én piksel ned. Deretter endrer fargen på denne linjen til # 8e9496

Trinn 23:. Opprette " Om " Området

Nå vil vi dele bunnteksten i tre kolonner: " Om ", " Twitter " og " Kontakt ".

Opprett en ny gruppe og gi den navnet " om ". Velg Type Tool (T) og skrive " Om quot meg &; ved toppen av den første kolonnen. Legg igjen en avstand på 40px mellom øvre kant av " footer " området, og dette tekstlag.

Velg Line Tool (U) og lage en horisontal linje under overskriften. Sett Fill av dette laget til 0% og opacity til 50%. Da gjelde for dette laget den hvite linja mønster som du opprettet i denne opplæringen.

Bruk Type Tool (T) for å legge til en blokk med tekst under den stiplede linjen ved hjelp av skriften Helvetica Regelmessig og fargen #fafafa . Sett ledende i dette avsnittet til 24 pkt fra tegnpanelet. Deretter legge til en " Les mer " knappen under tekstblokk

Trinn 24:. Opprette " Følg quot meg &; Området

Opprett en ny gruppe og gi den navnet " følge quot me &;. Deretter legge til en overskrift og et par tweets på dette området. Bruk samme linja å skille tekstblokker

Legg til en ". Les mer " knappen under tweets. Velg Type Tool (T) og endre teksten i " Følg meg ".

Last ned dette settet med Twitter fugler og flytte et par av dem i nett layout dokumentet, under " følg " meg; område. Legg en Drop Shadow effekt til disse fugle lag ved hjelp av innstillingene fra bildet nedenfor

Trinn 25:. Opprette " Kontakt " Området

Opprett en ny gruppe og gi den navnet " Kontakt ". Deretter legger en overskrift til dette området og en stiplet linje under den.

Bruk rektangel Tool (U) for å opprette kontaktskjemaet, som du ser i bildet nedenfor. Fyll hver rektangel med fargen # eff0f0. Deretter legger en indre glød og en Stroke effekt til hvert rektangel lag. Fargen som jeg brukte for Strek lagstilen er # 4d5254.

Velg Type Tool (T) og skrive inni hvert rektangel hva det representerer (navn, emne, e-post, melding).

Legg til en " Les mer "