Design en ren og elegant bloggoppsett i Photoshop CS6

I denne opplæringen skal jeg vise deg prosessen med lage en enkel og ren designblogg bruker den nyeste Photoshop. Vi skal bruke den nye Character Styles og Stikkord for å hjelpe oss med å effektivisere prosessen.

For å følge denne opplæringen trenger du følgende ressurser:

• Gratis Font Sansation fra Bernd Montag.
• 26 Repeatable Pixel Pattern fra PSDfreemium.
• Gratis sosiale medier ikoner fra Daniele Selvitella.

• Demo

Forbereder lerretet

Trinn 1

I dette designet skal vi bruke 960 gs som rammeverk. Last ned malen fra hovedsiden og i zip-filen, søk etter photoshop-filen. Åpne filen "12 kolonne grid" i Photoshop.

Klikk på øyeikonet for 12 Col Grid-laget for å skjule det; Vi trenger ikke det for nå.

Steg 2

Den nåværende lerretstørrelsen er for liten. Klikk Bilde> Lerrets størrelse (eller Ctrl + Alt + C). Legg til en større størrelse og sørg for å sette sitt ankerpunkt til senter.

Trinn 3

Trykk Ctrl + R for å avsløre linjalen. Klikk Vis> Ny Guide til å lage ny guide som vil hjelpe oss med å designe nøyaktig. Å velge vertikal og på posisjon: 185 px å lage en vertikal guide 185 px fra lerret øverst til venstre.

Trinn 4

Tegn en annen vertikal styring på stillingen 150 px, 1095 px og 1130 px.

Nedenfor er vår siste guide inne i lerretet.

Forbereder farge tema

Trinn 5

For denne designen skal vi bruke en fin fargekombinasjon fra Colorlouver. Klikk på Forhåndsvis-lenken for å åpne fargekombinasjonen som en jpeg-fil.

Lagre fargekombinasjonen og legg den inn i Photoshop-filen. Ved å plassere bildet direkte i lerretet, kan vi prøve fargene raskere og enklere.

Forbereder bakgrunnen

Trinn 6

Å velge Bakgrunn lag og klikk på låsikonet øverst på Layer-panelet for å låse opp det. Dobbeltklikk på miniatyrbildet for å endre fargen.

Klikk på den andre fargen, # 948371, for å velge det.

Trinn 7

Tegn en rektangulær form på toppen av lerretet. Dette blir den andre bakgrunnen.

Trinn 8

Hold formen valgt. I Alternativ Bar, åpen Fylle Farge boksen og klikk deretter på fargehjulikon. Når dialogboksen Fargeplukker åpnes, klikker du på den første fargen for å velge den. For dens Stroke fargevalg Ingen.

Trinn 9

Lag et nytt lag, og velg deretter det øvre lerretet ved hjelp av det rektangulære markeringsverktøyet. Aktiver gradientverktøy og fyll det med radial gradient fra hvitt til svart. Pass på at graden er sentrert på toppen av lerretet.

Endre dens Blanding modus til Skjerm og redusere dens opacity til 37%.

Trinn 10

Lag et nytt lag og nev det "skygge".

Tegn et rektangulært utvalg nederst på den sekundære bakgrunnen som vist. Klikk Rediger: Fyll ut. Sett Bruk til Svart. Klikk OK for å fylle utvalget med svart.

Trinn 11

Bløtgjøre det ved hjelp av Gaussian Blur. Klikk Filter> Uklarhet> Gaussisk uskarphet.

Trinn 12

Hold Alt og plasser markøren mellom skygge og øvre bakgrunn lag. Uten å slippe Alt-tasten, klikker du på konverter laget til Clipping Mask. Ved å konvertere den til Clipping Mask, går skyggen nå inne i øvre bakgrunn.

Trinn 13

Ta ned skyggen opacity til 50% å gjøre det subtilt. Nedenfor kan du se resultatet i 100% forstørrelse.

Trinn 14

Det er alltid en god idé å sette disse lagene i en gruppe. Å gjøre dette, velg alle lag og klikk deretter Ctrl + G.

Overskrift

Trinn 15

Tegn et rektangel på det øvre lerretet som vist.

Trinn 16

I Alternativ Bar, sett Stroke farge til # af9f8e.

Trinn 17

For dens Fylle farge, velg lineær gradient fra # d0c4b9 til # a89c91.

Nedenfor er resultatet i 100% visning.

Nettstedets navn

Trinn 18

Legg til nettstedets navn på venstre side av designet. Følg plasseringen som vist nedenfor. Dobbeltklikk på teksten og legg til Drop Shadow. For sin skrifttype, bruk Sansation.

Meny

Trinn 19

Tegn menyer på andre siden av menylinjen. Bruk skrifttype Sansation 14 pt. Igjen, legg merke til plasseringene.

Trinn 20

For den aktive menyen, sett inn skrifttype til fet skrift.

Trinn 21

Aktiver Polygon verktøy og sett Sider til 3. Tegn en trekantform med Fyll: # 3d3123 og Stroke: Ingen. Legg til Lag stil > Drop Shadow.

Trinn 22

La oss vektlegge den aktive menyen ved å legge til en linje under den. Aktiver Linjeverktøy og legg vekten til 5 px. Å velge # f76b6a for sin fylling uten strekk.

Sett linjen rett under den aktive menyen og legg til 1 px plass til bunnen av menylinjen.

Bruke tegnstiler

Trinn 23

La oss lagre tegninnstillingen som en tegnstil. Denne funksjonen er en forenklet versjon av Character Styles i InDesign. For å lagre det, aktivere teksten og klikk deretter ikonet "Ny tegnstil".

Dobbeltklikk på den nye tegnstilen og bruk følgende innstilling.

Trinn 24

Velg den andre menyen, og klikk deretter Karakterstilstand for å bruke den. Hvis du finner et plustegn ved siden av tegnstilen, betyr det at tegnet har en annen innstilling. For å overstyre innstillingene, klikk på ikonet for sirkulær pil.

Trinn 25

Gjenta det forrige trinnet for å lage en ny tegnstil for den aktive menyen.

Trinn 26

Så, hva er poenget med å bruke Character Styles? Tegnstiler hjelper oss med å sentralisere karakterinnstillingen. Vi kan ganske enkelt redigere tegnstilen for å redigere hver tekst ved hjelp av den stilen. Se et eksempel nedenfor. Hvis vi redigerer skrifttypen inne i tegnstil Toppmeny - Normal til Corbel blir all normal meny automatisk endret til Corbel.

Trinn 27

Lag et nytt lag og legg det under menylinjen. Ctrl-klikk på menylinjen for å gjøre nytt valg basert på formen. Fyll det med svart.

Trinn 28

Fjern markeringen ved å bruke Ctrl + D. Softe det ved å legge til Gaussian Blur, Filter> Uklarhet> Gaussisk uskarphet.

Slider

Trinn 29

Tegn en rektangulær form med bredden på 10 kolonner (se nedenfor).

For dens Fyll farge å velge # dfd1c2. For dens Stroke å velge # c8baac med størrelse 10 pt. Klikk på den lille rullegardinmenyen ved siden av linjevisningen og sørg for Juster innvendig er valgt.

Trinn 30

Lim inn et bilde på toppen av rammen. Konverter det til Clipping Mask ved å trykke Ctrl + Alt + G. Bildet går automatisk inn i glidebryteren. Om nødvendig kan du flytte og endre størrelsen på bildet uten å påvirke rammen.

Trinn 31

Tegn en annen rektangulær form bak glideren med samme farge. Pass på at du sniker den til den ytre guiden. Legg til Lagstil> Mønsteroverlegg bruker pikselmønster fra PSDfreemium. Tone ned dens opacity å gjøre sin subtile.

Trinn 32

Tegn en rektangulær form over formen med Fyll: # b3aca5 og ingen slag. Hit Ctrl + T og deretter dreie det 45 °. Konverter lagform til Clipping Mask.

Trinn 33

Dupliser formen og endre størrelsen på den. Endre dens Fylle til en mørkere farge. Konverter lagform til Clipping Mask.

Trinn 34

Gjenta det samme trinnet for å tegne en annen pil på den andre siden.

Trinn 35

Ctrl-klikk lysbilde for å gjøre nytt valg. Lag et nytt lag og konverter det til en Clipping Mask. Fyll utvalget med svart.

Trinn 36

Fravelg (Ctrl + D) da myke det bruker Gaussian Blur.

Du kan redusere skyggen Opacity hvis nødvendig.

Trinn 37

Tegn et avrundet rektangel på hjørnet av glidebryteren med Fyll # c8baac.

Trinn 38

Tegn en sirkel inne i formen. Sett sin Stroke til svart med størrelse 1 pt og fjern fyllingen.

Trinn 39

Velg sirkel bane ved bruk av Sti utvalg verktøy. Shift + Alt-dra banen for å duplisere den.

Gjenta dette for å tegne flere sirkler.

Trinn 40

Velg en av sirkelbanene. Trykk Ctrl + Shift + J for å kutte det til et nytt lag.

Trinn 41

I Alternativ Bar, fjern det Stroke og endre dens Fylle til en radial gradient fra # e38989 til # bb5c5c. Legg til Lagstil> Ytre glød og Drop Shadow.

Trinn 42

Tegn et elliptisk utvalg under glidebryteren. Lag et nytt lag og fyll det med svart.

Trinn 43

Fravelg (Ctrl + D). Bløt det med Gaussian Blur.

Nedre bakgrunn

Trinn 44

Tegn en annen rektangulær form for den nederste bakgrunnen. Bruk det samme Fylle og Stroke farge som glidebryteren.

Som alltid, vær svært forsiktig med plasseringen. Vi vil at den skal dekke alle guider på lerretet.

Legg til Lagstil> Mønsteroverlegg.

Nedenfor er resultatet i 100% forstørrelse.

Trinn 45

Velg uper-området ved hjelp av Rectangular Marquee-verktøyet.

Trinn 46

Lag et nytt lag, legg det bak formen. Fyll utvalget med svart. Trykk Ctrl + T, høyreklikk og velg Perspektiv.

Dra sine øvre hjørner utover.

Høyreklikk igjen og velg Scale. Dra det øvre håndtaket nedover.

Høyreklikk og velg Warp. Dra venstre og høyre segment innover.

Bløt det med Gaussian Blur.

Tone nedover opacity til 20%.

Trinn 47

Tegn en hvit rektangulær inne i bakgrunnen. Dette kommer til å være bakgrunn for nettstedets hovedinnhold.

Legg til et mellomrom på 10 px til venstre, høyre og øverste side av bakgrunnen. Avstanden skal være enkel fordi vi har laget veiledningen i tidlige trinn. Legg til Lagstil> Ytre glød.

Trinn 48

Legg til en ny guide, 25 px fra oversiden av formen.

Seksjonstitel

Trinn 49

Legg til en ny tegnstil for tittelseksjonens tittel og beskrivelse.

Legg til delen tittel og dens beskrivelse ved hjelp av Type verktøy. Bruk stiler vi har laget tidligere. Pass på at du legger til 25 px plass fra oversiden av bakgrunnen med hjelp fra veiledning gjort tidligere.

Trinn 50

Tegn en 5 px linje under nettstedets beskrivelse med Fyll: # 938270 og Stroke: Ingen.

Blogg innlegg

Trinn 51

Lag en annen karakterstil for posttittelen.

Trinn 52

Legg til en posttittel og bruk tidligere tegnstil.

Trinn 53

Tegn et rektangelform under tittelen med 4 kolonner bredde. Sett hvit for dens Fylle og #BEBEBE for dens Stroke. Legg til Lagstil> Stroke.

Trinn 54

Lim inn et bilde på toppen av formen. Konverter den til Clipping Mask (Ctrl + Alt + G).

Trinn 55

Tegn et avrundet rektangel med Fyll: # 8e8380 og Stroke: Ingen. Konverter det til Clipping Mask.

Trinn 56

Lag nye tegnstiler for bloggmetadataene.

Trinn 57

Legg til metadatatekst på toppen av formen og bruk tegnstilen vi har laget tidligere.

Trinn 58

Aktiver Type verktøy og klikk-dra for å lage en tekstboks. Sett bredden til 4 kolonner. Klikk Type> Paste Lorem Ipsum å fylle den med automatisk generert Lorem Ipsum fra Photoshop.

Trinn 59

Lag en ny Paragraph Style for tegninnholdet. Klikk på det nye ikonet på Stilformat-panelet.

Dobbeltklikk på Paragraph Style og bruk denne innstillingen.

Trinn 60

Bruk denne stilen til innleggets innhold. Du kan også eksperimentere med innrykk og mellomrom.

For webdesign, deaktiver Hyphenation.

Trinn 61

Tegn et avrundet rektangel med Fyll: # 8e8380 og Stroke: Ingen. Legg til Lagstil> Mønsteroverlegg. For konsistens, bruk samme mønster som i glidebryteren.

Trinn 62

Legg til en knappetikett. Jeg foreslår at du lagrer det som en tegnestil. På denne måten kan vi enkelt bruke den til andre knapper.

Trinn 63

Den forrige knappen er for normal tilstand. La oss kopiere det og endre fargen til # f76b6a. Sett også etikettypen til fet skrift.

Trinn 64

Plasser innlegget i en gruppe, og klikk deretter Ctrl + J for å kopiere det. Alt-dra for å duplisere gruppen.

Gjenta det samme trinnet for å få flere innlegg. Husk å endre bildet og tittelen til hvert innlegg.

Trinn 65

Duplisere Les mer knappen og endre etiketten til nummeret. Vi skal bruke den til side navigasjon. Husk å sette en av knappene for å sveve tilstanden.

Trinn 66: Footer

La oss begynne å jobbe med bunnteksten. Legg til en widget tittel og dens beskrivelse.

Trinn 67

Legg til lenke og tegne en linje under 1 px. Sett Fyll: Ingen og Stroke: # 8e8380.

Trinn 68

Klikk Flere valg knappen og velg strekket linje.

Trinn 69

Legg til flere linker i widgeten.

Trinn 70

Dupliser widgeten.

Trinn 71

Vi må også legge til svingertilstanden. Sett en av koblingen til fet skrift.

Under den aktive linken legger du til en 5 px linje. Sett fargen til # f76b6a. For konsistens ligner utseendet på denne lenken den aktive menyen på menylinjen.

Trinn 72

Legg til et annet rektangel i det nedre området. Sett sin Fylle til # 3d3123.

Bunntekstinformasjon

Trinn 73

Legg til bunntekstinfo ved hjelp av Type verktøy. Gi det en mørk Drop Shadow å legge til kontrast til bakgrunnen.

Sosialt nettverk

Trinn 74

Legg til noen sosiale medier ikoner fra Daniele Selvitella. Legg til Lagstil> Ytre glød.

Trinn 75

Tone ned normalt ikon til 50%. For hover tilstand, la oss bare holde den opacity på 100%.

Trinn 76

Ta tak i et gratis håndpekepunkt og plasser den minste håndpekeren over aktiv eller svingekoblingen.

Endelig resultat

Dette er vårt endelige resultat. Du kan se at den nyeste Photoshop-versjonen har noen interessante funksjoner for å designe et weboppsett. Tegnstiler og stykkstiler er en betydelig forbedring for hver webdesigner.

• Demo
• Last ned kilde