Hjemmeside » Photoshop » Design en ren og elegant bloglayout i Photoshop CS6

    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.

    Menu

    Trin 19

    Tegn menuer på anden side af menulinjen. Brug skrifttype Sansation 14 pt. Igen bemærke placeringerne.

    Trin 20

    For den aktive menu skal du indstille skrifttypen til fed skrift.

    Trin 21

    Aktiver Polygon værktøj og sæt sider til 3. Tegn en trekant form med Fyld: # 3d3123 og Slag: Ingen. Tilføje Layer Style > Drop Shadow.

    Trin 22

    Lad os understrege den aktive menu ved at tilføje en linje under den. Aktivér Line værktøj og sætte sin vægt på 5 px. Vælg # f76b6a for sin fyldning uden slag.

    Sæt linjen lige under den aktive menu og tilføj 1 px plads til bunden af ​​menulinjen.

    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 Gennemsigtighed100%.

    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