Design en ren og elegant bloglayout i Photoshop CS6

I denne øvelse vil jeg vise dig processen med gør en enkel og ren design blog bruger den nyeste Photoshop. Vi skal bruge den nye Tegn stilarter og Stykkeformater for at hjælpe os med at strømline processen.

For at følge denne vejledning skal du bruge følgende ressourcer:

Gratis Font Sansation fra Bernd Montag.
26 Repeatable Pixel Pattern fra PSDfreemium.
Gratis Social Media Ikoner fra Daniele Selvitella.

Demo

Forbereder lærredet

Trin 1

I dette design bruger vi 960 gs som rammer. Download skabelonen fra hovedsiden og inde i zip-filen, søg efter photoshop-filen. Åbn filen '12 Kolonne Gitter 'i Photoshop.

Klik på øjeikonet for 12 Col Grid-laget for at skjule det; vi har ikke brug for det for nu.

Trin 2

Den nuværende lærredstørrelse er for lille. Klik Billede> Lærredsstørrelse (eller Ctrl + Alt + C). Tilføj en større størrelse og sørg for at sætte sit ankerpunkt til midten.

Trin 3

Tryk Ctrl + R for at afsløre linjalen. Klik Vis> Ny Guide til at lave en ny guide, der hjælper os med at designe præcist. Vælg Lodret og på stilling: 185 px at lave en lodret guide 185 px fra lærredets øverste venstre hjørne.

Trin 4

Tegn en anden lodret styring på position 150 px, 1095 px og 1130 px.

Nedenfor er vores sidste guide inde i lærredet.

Forbereder Fargetema

Trin 5

Til dette design skal vi bruge en fin farvekombination fra Colorlouver. Klik på Preview-linket for at åbne farvekombinationen som en jpeg-fil.

Gem farvekombinationen og læg den inde i Photoshop-filen. Ved at placere billedet direkte inde i lærredet kan vi prøve sin farve hurtigere og nemmere.

Forbereder baggrunden

Trin 6

Vælg Baggrund lag og klik på låsikonet øverst på panelet Lag for at låse det op. Dobbeltklik på miniaturebilledet for at ændre farve.

Klik på den anden farve, # 948.371, for at vælge det.

Trin 7

Tegn en rektangulær form oven på lærredet. Dette bliver den anden baggrund.

Trin 8

Hold den valgte form. I Mulighedslinje, åben Fylde Farve boks og klik derefter på farvehjulikonet. Når dialogboksen Farvevælger åbnes, skal du klikke på den første farve for at vælge den. For dets Slag farvevalg Ingen.

Trin 9

Lav et nyt lag og vælg derefter det øvre lærred ved hjælp af det rektangulære markeringsværktøj. Aktivér gradientværktøj og udfyld det med radial gradient fra hvid til sort. Sørg for at graden er centreret oven på lærredet.

Skift dens Blanding mode til skærm og reducere dens Gennemsigtighed til 37%.

Trin 10

Lav et nyt lag og navngiv det 'skygge'.

Tegn et rektangulært valg i bunden af den sekundære baggrund som vist. Klik Rediger: Fyld. Sæt Brug til Sort. Klik Okay for at udfylde markeringen med sort.

Trin 11

Blødgør det ved hjælp af Gaussian Blur. Klik Filter> Blur> Gaussisk sløring.

Trin 12

Hold Alt, og placér markøren mellem skygge og øvre baggrund lag. Uden at slippe Alt-tasten, skal du klikke på konvertere laget til Clipping Mask. Ved at konvertere den til Clipping Mask, går skyggen nu inde i den øvre baggrund.

Trin 13

Tag skygge ned Gennemsigtighed til 50% at gøre det subtilt. Nedenfor kan du se resultatet i 100% forstørrelse.

Trin 14

Det er altid en god ide at sætte disse lag i en gruppe. At gøre dette, vælg alle lag og klik derefter på Ctrl + G.

Header

Trin 15

Tegn et rektangel på det øverste lærred som vist.

Trin 16

I Mulighedslinje, sæt Slag farve til # af9f8e.

Trin 17

For dets Fylde farve, vælg lineær gradient fra # d0c4b9 til # a89c91.

Nedenfor er resultatet i 100% visning.

Webstedets navn

Trin 18

Tilføj webstedets navn på venstre side af designet. Overhold placeringen som vist nedenfor. Dobbeltklik på teksten og tilføj Drop Shadow. For sin skrifttype skal du bruge Sansation.

Brug af tegnstile

Trin 23

Lad os gemme tegnindstillingen som en tegnestil. Denne funktion er en forenklet version af Character Styles i InDesign. For at gemme det skal du aktivere teksten og derefter klikke på ikonet "Ny tegnestil".

Dobbeltklik på den nye tegnstil og brug følgende indstilling.

Trin 24

Vælg den anden menu, og klik derefter på tegnstilen for at anvende den. Hvis du finder et plustegn ved siden af tegnestilen, betyder det, at tegnet har en anden indstilling. Hvis du vil tilsidesætte indstillingerne, skal du klikke på ikonet for cirkulær pil.

Trin 25

Gentag det forrige trin for at lave en ny tegnestil for den aktive menu.

Trin 26

Så hvad er meningen med at bruge Character Styles? Tegn Styles hjælper os med at centralisere tegnindstillingen. Vi kan simpelthen redigere tegnstilen for at redigere hver tekst ved hjælp af denne stil. Se et eksempel nedenfor. Hvis vi redigerer skrifttypen indeni tegnestil Top Menu - Normal til Corbel ændres al den normale menu automatisk til Corbel.

Trin 27

Lav et nyt lag og læg det under menulinjen. Ctrl-klik på menulinjen for at gøre nyt valg baseret på dets form. Fyld det med sort.

Trin 28

Fjern markeringen ved hjælp af Ctrl + D. Blødgør det ved at tilføje Gaussisk sløring, Filter> Blur> Gaussisk sløring.

Slider

Trin 29

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

For dets Fyld farve Vælg # dfd1c2. For dets Slag Vælg # c8baac med størrelse 10 pt. Klik på den lille rullemenu ved siden af linjevisningen og sørg for Juster indvendigt er valgt.

Trin 30

Indsæt et billede oven på rammen. Konverter det til Clipping Mask ved at trykke på Ctrl + Alt + G. Billedet går automatisk inde i skyderrammen. Hvis det er nødvendigt, kan du flytte og ændre størrelsen på billedet uden at påvirke rammen.

Trin 31

Tegn en anden rektangulær form bag skyderen med samme farve. Sørg for at snappe den til den yderste vejledning. Tilføje Layer Style> Mønsteroverlay bruger pixel mønster fra PSDfreemium. Tone ned dens Gennemsigtighed at gøre sin subtile.

Trin 32

Tegn en rektangulær form over formen med Fyld: # b3aca5 og ingen slagtilfælde. Tryk Ctrl + T og derefter drej det 45 °. Konverter lagform til Clipping Mask.

Trin 33

Dupliker formen og resize den. Skift dens Fylde til en mørkere farve. Konverter lagform til Clipping Mask.

Trin 34

Gentag det samme trin for at tegne en anden pil på den anden side.

Trin 35

Ctrl-klik diasramme for at foretage nyt valg. Lav et nyt lag og konverter det til en Clipping Mask. Udfyld markeringen med sort.

Trin 36

Fravælg (Ctrl + D) derefter blødgøre det bruger Gaussisk sløring.

Du kan reducere skyggeopacitet, hvis det er nødvendigt.

Trin 37

Tegn et afrundet rektangel på hjørnet af skyderen med Fyld # c8baac.

Trin 38

Tegn en cirkel inde i formen. Sæt dens Slag til sort med størrelse 1 pt og Fjern Fyld.

Trin 39

Vælg cirkel sti ved hjælp af Sti valg værktøj. Skift + Alt-træk stien til at duplikere den.

Gentag dette for at tegne flere cirkler.

Trin 40

Vælg en af cirkelstierne. Tryk Ctrl + Shift + J for at skære det til et nyt lag.

Trin 41

I Mulighedslinje, fjern dens Slag og ændre dens Fylde til a radial gradient fra # e38989 til # bb5c5c. Tilføje Layer Style> Outer Glow og Drop Shadow.

Trin 42

Tegn et elliptisk valg under skyderen. Lav et nyt lag og udfyld det med sort.

Trin 43

Fravælg (Ctrl + D). Blødgør det ved hjælp af Gaussisk sløring.

Nedre baggrund

Trin 44

Tegn en anden rektangulær form for den nederste baggrund. Brug det samme Fylde og Slag farve som skyderen form.

Som altid være meget forsigtig med sin placering. Vi vil have det til at dække alle guider på lærredet.

Tilføje Layer Style> Mønsteroverlay.

Nedenfor er resultatet i 100% forstørrelse.

Trin 45

Vælg dets uper område ved hjælp af værktøjet Rektangulær markør.

Trin 46

Lav et nyt lag, læg det bag formen. Udfyld markeringen med sort. Tryk Ctrl + T, højreklik og vælg Perspektiv.

Træk dets øvre hjørner udad.

Højreklik igen og vælg vægt. Træk det øverste håndtag nedad.

Højreklik og vælg Warp. Træk venstre og højre segment indad.

Blødgør det ved hjælp af Gaussisk sløring.

Tone ned i Gennemsigtighed til 20%.

Trin 47

Tegn en hvid rektangel inde i baggrunden. Dette vil være baggrund for webstedets hovedindhold.

Tilføj et mellemrum på 10 px til venstre, højre og øverste side af baggrunden. Afstanden skal være let, fordi vi har lavet vejledningen i tidlige trin. Tilføje Layer Style> Outer Glow.

Trin 48

Tilføj en ny guide, 25 px fra den øverste side af formen.

Afsnit Titel

Trin 49

Tilføj en ny tegnestil for sidestykketitel og dens beskrivelse.

Tilføj afsnit titlen og dens beskrivelse ved hjælp af Type værktøj. Anvend stilarter, vi har lavet tidligere. Sørg for at tilføje 25 px mellemrum fra oversiden af baggrunden med hjælp fra tidligere foretaget vejledning.

Trin 50

Tegn en 5 px linje under webstedets beskrivelse med Fyld: # 938270 og Slag: Ingen.

Blogindlæg

Trin 51

Lav en anden tegnestil til posttitel.

Trin 52

Tilføj en post titel og anvend tidligere tegn stil.

Trin 53

Tegn et rektangelform under titlen med 4 kolonner bredde. Sæt hvid for dets Fylde og #BEBEBE for dets Slag. Tilføje Layer Style> Stroke.

Trin 54

Indsæt et billede oven på formen. Konverter det til Clipping Mask (Ctrl + Alt + G).

Trin 55

Tegn et afrundet rektangel med Fyld: # 8e8380 og Slag: Ingen. Konverter det til Clipping Mask.

Trin 56

Lav nye tegnstile til blogmetadata.

Trin 57

Tilføj metadatatekst oven på formen og anvend den tegnestil, vi har lavet tidligere.

Trin 58

Aktiver Type værktøj og klik-træk for at lave en tekstboks. Indstil dens bredde til 4 kolonner. Klik Type> Paste Lorem Ipsum at udfylde det med automatisk genereret Lorem Ipsum fra Photoshop.

Trin 59

Lav et nyt stykkeformat for tegnindholdet. Klik på det nye ikon på panelet Stilformater.

Dobbeltklik på Paragraph Style og brug denne indstilling.

Trin 60

Anvend denne stil til postindholdet. Du kan også eksperimentere med indstillingerne Indent and Spacing.

For webdesign, deaktiver Hyphenation.

Trin 61

Tegn et afrundet rektangel med Fyld: # 8e8380 og Slag: Ingen. Tilføje Layer Style> Mønsteroverlay. For ensartethed skal du bruge samme mønster som i skyderen.

Trin 62

Tilføj en knap etiket. Jeg foreslår, at du gemmer det som en tegnestil. På den måde kan vi nemt bruge den til andre knapper.

Trin 63

Den foregående knap er til normal tilstand. Lad os kopiere det og ændre sin farve til # f76b6a. Indstil også dens etiketype til fed skrift.

Trin 64

Placer posten inde i en gruppe, og tryk derefter på Ctrl + J for at duplikere den. Alt-drag for at duplikere gruppen.

Gentag det samme trin for at få flere indlæg. Husk at ændre billedet og titlen på hvert indlæg.

Trin 65

Duplikere Læs mere knappen og skift dens etiket til nummer. Vi skal bruge den til side navigation. Husk at indstille en af knapperne for at svæve tilstanden.

Trin 66: Footer

Lad os begynde at arbejde på footer. Tilføj en widget titel og dens beskrivelse.

Trin 67

Tilføj link og tegne en 1 px linje under den. Sæt Udfyld: Ingen og Slag: # 8e8380.

Trin 68

Klik Flere muligheder knappen og vælg stiplet linje.

Trin 69

Tilføj flere links i widgeten.

Trin 70

Duplikér widgeten.

Trin 71

Vi skal også tilføje sværstanden. Indstil et af linket til fed skrift.

Tilføj et 5 px linie under det aktive link. Sæt dens farve til # f76b6a. For ensartethed ligner udseendet af dette link den aktive menu på menulinjen.

Trin 72

Tilføj et andet rektangel i det nederste område. Sæt dens Fylde til # 3d3123.

Footer Information

Trin 73

Tilføj footer info ved hjælp af Type værktøj. Giv det et mørkt Drop Shadow for at tilføje kontrast til baggrunden.

Socialt netværk

Trin 74

Tilføj nogle sociale medier ikoner fra Daniele Selvitella. Tilføje Layer Style> Outer Glow.

Trin 75

Tone ned normalt ikon til 50%. Til svær tilstand, lad os bare holde det Gennemsigtighed på 100%.

Trin 76

Tag et frihånds cursor-ikon, og læg den mindste håndmarkør over det aktive eller svæve-link.

Endeligt resultat

Dette er vores endelige resultat. Du kan se, at den nyeste Photoshop-version har nogle interessante funktioner til at designe et weblayout. Tegnstile og afsnit stilarter er en betydelig forbedring for hver webdesigner.

Demo
Download kilde