Skapa en ren och elegant blogglayout i Photoshop CS6

I denna handledning kommer jag att visa dig processen med gör en enkel och ren designblogga använder den senaste Photoshop. Vi ska använda den nya Teckenformat och Styckeformat för att hjälpa oss att effektivisera processen.

För att följa denna handledning behöver du följande resurser:

• Gratis Font Sansation från Bernd Montag.
• 26 Repeterbart pixelmönster från PSDfreemium.
• Gratis sociala medierikoner från Daniele Selvitella.

• demo

Förbereda Canvas

Steg 1

I denna design kommer vi att använda 960 gs som ramverk. Ladda ner mallen från huvudsidan och inuti zip-filen, leta efter photoshop-filen. Öppna filen "12 kolumngrid" i Photoshop.

Klicka på ögonikonen för 12 Col Grid-laget för att dölja det; Vi behöver inte det för nu.

Steg 2

Den aktuella dukstorleken är för liten. Klick Bild> Kanfastryck (eller Ctrl + Alt + C). Lägg till en större storlek och se till att sätta dess ankarpunkt i centrum.

Steg 3

Tryck Ctrl + R för att avslöja linjalen. Klick Visa> Ny Guide till att skapa en ny guide som hjälper oss att utforma exakt. Välj Vertikal och vid position: 185 px att göra en vertikal guide 185 px från duken övre vänstra hörnet.

Steg 4

Rita en annan vertikal styrning i läge 150 px, 1095 px och 1130 px.

Nedan är vår sista guide inuti duken.

Förbereder färgtema

Steg 5

För denna design kommer vi att använda en fin färgkombination från Colorlouver. Klicka på länken Förhandsgranska för att öppna färgkombinationen som en jpeg-fil.

Spara färgkombinationen och placera den i Photoshop-filen. Genom att placera bilden direkt inuti duken kan vi prova färgen snabbare och lättare.

Förbereda bakgrunden

Steg 6

Välj Bakgrund lager och klicka på låsikonen ovanpå panelen Lager för att låsa upp den. Dubbelklicka på miniatyren för att ändra dess färg.

Klicka på den andra färgen, # 948.371, för att välja den.

Steg 7

Rita en rektangulär form ovanpå duken. Detta blir den andra bakgrunden.

Steg 8

Håll formen vald. I Alternativbar, öppna Fylla Färg rutan och klicka sedan på färghjulikon. När dialogrutan Färgplockare öppnas klickar du på den första färgen för att välja den. För dess Stroke färgval Ingen.

Steg 9

Skapa ett nytt lager och välj sedan den övre duken med det rektangulära markeringsverktyget. Aktivera övertoningsverktyg och fyll det med radiell lutning från vit till svart. Se till att lutningen är centrerad ovanpå duken.

Ändra dess Blandning läge till Skärm och minska dess Opacitet till 37%.

Steg 10

Gör ett nytt lager och namnge det "skugga".

Rita ett rektangulärt urval längst ner på den sekundära bakgrunden som visas. Klick Redigera: Fyll. Uppsättning Använda sig av till Svart. Klick ok för att fylla urvalet med svart.

Steg 11

Mjuka det med Gaussian Blur. Klick Filter> Blur> Gaussian Blur.

Steg 12

Håll Alt och placera sedan markören mellan skugga och övre bakgrunden lager. Utan att släppa Alt-tangenten klickar du på konvertera skiktet till Clipping Mask. Genom att konvertera den till Clipping Mask går skuggan nu inuti den övre bakgrunden.

Steg 13

Ta ner skuggan Opacitet till 50% för att göra det subtilt. Nedan kan du se resultatet i 100% förstoring.

Steg 14

Det är alltid en bra idé att lägga dessa lager i en grupp. Att göra detta, välj alla lager och klicka sedan på Ctrl + G.

Rubrik

Steg 15

Rita en rektangel på den övre duken som visas.

Steg 16

I Alternativbar, uppsättning Stroke färg till # af9f8e.

Steg 17

För dess Fylla färg, välj linjär gradient från # d0c4b9 till # a89c91.

Nedan visas resultatet i 100% vy.

Webbplatsens namn

Steg 18

Lägg till webbplatsens namn på vänster sida av designen. Observera placeringen enligt nedan. Dubbelklicka på texten och lägg till Drop Shadow. För sin typsnitt, använd Sansation.

Meny

Steg 19

Rita menyer på andra sidan menylinjen. Använd typsnitt Sansation 14 pt. Observera igen placeringarna.

Steg 20

För den aktiva menyn, sätt dess typsnitt till fetstil.

Steg 21

Aktivera Polygon verktyg och ställa in Sidor till 3. Rita en triangelform med Fyll: # 3d3123 och Slag: Ingen. Lägg till Lagerstil > Drop Shadow.

Steg 22

Låt oss betona den aktiva menyn genom att lägga till en rad under den. Aktivera Linjeverktyg och sätta sin vikt på 5 px. Välj # f76b6a för dess fyllning, utan stroke.

Lägg raden rätt under den aktiva menyn och lägg till 1 px mellanslag till botten av menyraden.

Använda teckenformat

Steg 23

Låt oss spara teckeninställningen som en teckenstil. Den här funktionen är en förenklad version av teckenformat i InDesign. För att spara det, aktivera texten och klicka sedan på ikonen "Ny teckenstil".

Dubbelklicka på den nya teckenstilen och använd följande inställning.

Steg 24

Välj den andra menyn och klicka sedan på teckenstilen för att applicera den. Om du hittar ett plustecken bredvid teckenstilen betyder det att tecknet har en annan inställning. Om du vill åsidosätta inställningarna klickar du på ikonen för cirkulär pil.

Steg 25

Upprepa föregående steg för att skapa en ny teckenstil för den aktiva menyn.

Steg 26

Så, vad är meningen med att använda teckenformat? Teckenstilar hjälper oss att centralisera teckeninställningen. Vi kan helt enkelt redigera teckenstilen för att redigera varje text med den stilen. Se ett exempel nedan. Om vi ​​redigerar typsnittstypen inuti teckenstil Toppmeny - Normal till Corbel ändras all normal meny automatiskt till Corbel.

Steg 27

Skapa ett nytt lager och placera det under menyraden. Ctrl-klicka på menyraden för att göra nytt urval baserat på dess form. Fyll den med svart.

Steg 28

Ta bort markeringen med Ctrl + D. Mjuka det genom att lägga till Gaussisk suddighet, Filter> Blur> Gaussian Blur.

Slider

Steg 29

Rita en rektangulär form med bredden på 10 kolumner (se nedan).

För dess Fyllnadsfärg Välj # dfd1c2. För dess Stroke Välj # c8baac med storlek 10 pt. Klicka på den lilla rullgardinsmenyn bredvid linjens förhandsgranskning och kontrollera Rikta inuti är vald.

Steg 30

Klistra in en bild ovanpå ramen. Konvertera det till Clipping Mask genom att trycka på Ctrl + Alt + G. Bilden går automatiskt in i glidramen. Om det behövs kan du flytta och ändra storlek på bilden utan att påverka dess ram.

Steg 31

Rita en annan rektangulär form bakom reglaget med samma färg. Se till att du klickar fast i den yttersta guiden. Lägg till Lagstil> Mönsteröverlägg använder pixelmönster från PSDfreemium. Tona ner dess Opacitet att göra sin subtila.

Steg 32

Rita en rektangulär form ovanför formen med Fyll: # b3aca5 och inget slag. Hit Ctrl + T och sedan rotera det 45 °. Konvertera lagerform till Clipping Mask.

Steg 33

Duplicera formen och ändra storlek på den. Ändra dess Fylla till en mörkare färg. Konvertera lagerform till Clipping Mask.

Steg 34

Upprepa samma steg för att rita en annan pil på andra sidan.

Steg 35

Ctrl-klicka på bildruta för att göra nytt urval. Skapa ett nytt lager och konvertera det till en Clipping Mask. Fyll ur valet med svart.

Steg 36

Avmarkera (Ctrl + D) då mjukna det använder Gaussisk suddighet.

Du kan minska skuggans opacitet om det behövs.

Steg 37

Rita en rundad rektangel på hörnet av skjutreglaget med Fyll # c8baac.

Steg 38

Rita en cirkel inuti formen. Sätt dess Stroke till svart med storlek 1 pt och ta bort fyllningen.

Steg 39

Välj cirkel väg med Sökväg verktyg. Skift + Alt-dra vägen för att kopiera den.

Upprepa detta för att rita fler cirklar.

Steg 40

Välj en av cirkelvägarna. Tryck Ctrl + Shift + J för att klippa den till ett nytt lager.

Steg 41

I Alternativbar, ta bort dess Stroke och ändra dess Fylla till a radiell gradient från # e38989 till # bb5c5c. Lägg till Layer Style> Outer Glow och Drop Shadow.

Steg 42

Rita ett elliptiskt urval under reglaget. Gör ett nytt lager och fyll i det svart.

Steg 43

Avmarkera (Ctrl + D). Mjuka det med hjälp av Gaussisk suddighet.

Lägre bakgrund

Steg 44

Rita en annan rektangulär form för bottenbakgrunden. Använd samma Fylla och Stroke färg som gliderformen.

Som alltid var mycket försiktig med placeringen. Vi vill att den ska täcka varje guide på duken.

Lägg till Lagstil> Mönsteröverlägg.

Nedan är resultatet i 100% förstoring.

Steg 45

Välj sitt uperområde med verktyget Rektangulärt markeringsverktyg.

Steg 46

Gör ett nytt lager, placera det bakom formen. Fyll ur valet med svart. Höger Ctrl + T, högerklicka och välj Perspektiv.

Dra sina övre hörn utåt.

Högerklicka igen och välj Skala. Dra det övre handtaget neråt.

Högerklicka och välj Varp. Dra vänster och höger segment inåt.

Mjuka det med hjälp av Gaussisk suddighet.

Tone nerför Opacitet till 20%.

Steg 47

Rita en vit rektangel i bakgrunden. Detta kommer att vara bakgrund för webbplatsens huvudinnehåll.

Lägg till ett mellanslag på 10 px till vänster, höger och övre sidan av bakgrunden. Avståndet ska vara enkelt eftersom vi har gjort guiden i tidiga steg. Lägg till Layer Style> Outer Glow.

Steg 48

Lägg till en ny guide, 25 px från överkanten av formen.

Avdelningstitel

Steg 49

Lägg till en ny teckenstil för rubrikens rubrik och dess beskrivning.

Lägg till avsnittets titel och dess beskrivning med Typverktyget. Applicera stilar som vi har gjort tidigare. Se till att du lägger till 25 px utrymme från överkanten av bakgrunden med hjälp av guide som gjorts tidigare.

Steg 50

Rita en 5 px linje under webbplatsens beskrivning med Fyll: # 938270 och Slag: Ingen.

Blogginlägg

Steg 51

Gör en annan karaktärsstil för posttiteln.

Steg 52

Lägg till en posttitel och använd tidigare teckenstil.

Steg 53

Rita en rektangelform under titeln med 4 kolumner bredd. Uppsättning vit för dess Fylla och #bebebe för dess Stroke. Lägg till Layer Style> Stroke.

Steg 54

Klistra in en bild ovanpå formen. Konvertera det till Clipping Mask (Ctrl + Alt + G).

Steg 55

Rita en rundad rektangel med Fyll: # 8e8380 och Slag: Ingen. Konvertera det till Clipping Mask.

Steg 56

Skapa nya teckenformat för bloggmetadata.

Steg 57

Lägg till metadatatekst överst i formen och använd karaktärsstilen vi gjort tidigare.

Steg 58

Aktivera Typ verktyg och klicka-dra för att skapa en textruta. Ställ in dess bredd till 4 kolumner. Klick Typ> Pasta Lorem Ipsum att fylla den med automatiskt genererade Lorem Ipsum från Photoshop.

Steg 59

Skapa en ny styckeformat för teckeninnehållet. Klicka på den nya ikonen på panelen Styckeformat.

Dubbelklicka på Paragraph Style och använd följande inställning.

Steg 60

Tillämpa denna stil på inläggets innehåll. Du kan också experimentera med inställningarna Indent and Spacing.

För webbdesign, inaktivera Hyphenation.

Steg 61

Rita en rundad rektangel med Fyll: # 8e8380 och Slag: Ingen. Lägg till Lagstil> Mönsteröverlägg. För konsistens, använd samma mönster som i reglaget.

Steg 62

Lägg till en knapp etikett. Jag föreslår att du sparar den som en karaktärsstil. På så sätt kan vi enkelt använda det för andra knappar.

Steg 63

Den tidigare knappen är normalt. Låt oss kopiera det och ändra dess färg till # f76b6a. Ställ in dess etikettyp till fetstil.

Steg 64

Placera inlägget i en grupp och tryck sedan Ctrl + J för att kopiera den. Alt-dra för att duplicera gruppen.

Upprepa samma steg för att göra fler inlägg. Kom ihåg att ändra bild och titel på varje inlägg.

Steg 65

Duplicera Läs mer knappen och ändra dess etikett till nummer. Vi ska använda den för sidnavigering. Kom ihåg att ställa in en av knapparna för att sväva tillståndet.

Steg 66: Footer

Låt oss börja jobba på sidfoten. Lägg till en widget titel och dess beskrivning.

Steg 67

Lägg till länk och dra en 1 px linje under den. Uppsättning Fyll: Ingen och Slag: # 8e8380.

Steg 68

Klick Fler alternativ knappen och välj streckad linje.

Steg 69

Lägg till fler länkar i widgeten.

Steg 70

Kopiera widgeten.

Steg 71

Vi behöver också lägga till svävarillståndet. Ange en av länken till fetstil.

Under den aktiva länken lägger du till en 5 px linje. Ställ in färgen till # f76b6a. För konsistens liknar den här länkens utseende den aktiva menyn på menyraden.

Steg 72

Lägg till en annan rektangel på det nedre området. Sätt dess Fylla till # 3d3123.

Footer Information

Steg 73

Lägg till sidfot info med Typ verktyg. Ge det en mörk Drop Shadow för att lägga till kontrast till dess bakgrund.

Socialt nätverk

Steg 74

Lägg till några sociala medierikoner från Daniele Selvitella. Lägg till Layer Style> Outer Glow.

Steg 75

Tone ner normal ikon till 50%. För svävar villkor, låt oss bara behålla sin Opacitet på 100%.

Steg 76

Ta en frihandsmarkörsymbol och placera den minsta handmarkören ovanför den aktiva eller svänglänken.

Slutresultat

Detta är vårt slutresultat. Du kan se att den senaste Photoshop-versionen har några intressanta funktioner för att utforma en webblayout. Teckenformat och styckeformat är en signifikant förbättring för varje webbdesigner.

• demo
• Hämta källa