Ontwerp een schone en elegante bloglay-out in Photoshop CS6

In deze tutorial ga ik je het proces laten zien een eenvoudig en schoon designblog maken gebruik van de nieuwste Photoshop. We gaan het nieuwe gebruiken Tekenstijlen en Alineastijlen om ons te helpen het proces te stroomlijnen.

Om deze tutorial te volgen, hebt u de volgende bronnen nodig:

Gratis lettertype Sansation van Bernd Montag.
26 Herhaalbaar pixelpatroon van PSDfreemium.
Gratis Social Media Icons van Daniele Selvitella.

demonstratie

Het canvas voorbereiden

Stap 1

In dit ontwerp gebruiken we 960 gs als kader. Download de sjabloon van de hoofdpagina en zoek in het zipbestand naar het photoshop-bestand. Open het bestand '12 Column Grid 'in Photoshop.

Klik op het oogpictogram voor de 12 Col Grid-laag om het te verbergen; we zullen het voorlopig niet nodig hebben.

Stap 2

De huidige canvasgrootte is te klein. Klik Afbeelding> Canvasgrootte (of Ctrl + Alt + C). Voeg een groter formaat toe en zorg ervoor dat het ankerpunt in het midden wordt geplaatst.

Stap 3

Druk op Ctrl + R om de liniaal zichtbaar te maken. Klik Bekijken> Nieuw Handleiding voor het maken van een nieuwe handleiding die ons helpt bij het nauwkeurig ontwerpen. kiezen Verticaal en op positie: 185 px om een verticale geleiding van 185 px te maken vanaf het canvas bovenaan links.

Stap 4

Teken een andere verticale gids op positie 150 px, 1095 px en 1130 px.

Hieronder is onze laatste gids in het canvas.

Kleurthema voorbereiden

Stap 5

Voor dit ontwerp gaan we een mooie kleurencombinatie gebruiken van Colorlouver. Klik op de koppeling Voorbeeld om de kleurencombinatie als een JPEG-bestand te openen.

Sla de kleurencombinatie op en plaats deze in het Photoshop-bestand. Door de afbeelding direct in het canvas te plaatsen, kunnen we de kleur sneller en gemakkelijker samplen.

De achtergrond voorbereiden

Stap 6

kiezen Achtergrond laag en klik op het vergrendelpictogram boven in het deelvenster Lagen om het te ontgrendelen. Dubbelklik op de miniatuur om de kleur te wijzigen.

Klik op de tweede kleur, # 948371, om het te selecteren.

Stap 7

Teken een rechthoekige vorm op het canvas. Dit zal de tweede achtergrond zijn.

Stap 8

Houd de vorm geselecteerd. In de Optiebalk, Open Vullen Kleur vak en klik vervolgens op de kleurenwiel pictogram. Wanneer het dialoogvenster Kleurkiezer wordt geopend, klikt u op de eerste kleur om deze te selecteren. Voor zijn Beroerte kleur selecteren Geen.

Stap 9

Maak een nieuwe laag en selecteer vervolgens het bovenste canvas met behulp van het rechthoekige selectiekader. Activeer de verloop gereedschap en vul het met radiale helling van wit naar zwart. Zorg ervoor dat het verloop gecentreerd is op de bovenkant van het canvas.

Verander zijn Mengsel mode naar Scherm en verminder zijn ondoorzichtigheid naar 37%.

Stap 10

Maak een nieuwe laag en noem deze 'schaduw'.

Teken een rechthoekige selectie onder aan de secundaire achtergrond, zoals weergegeven. Klik Bewerken: vullen. set Gebruik naar Zwart. Klik OK om de selectie met zwart te vullen.

Stap 11

Verzachten met Gaussiaanse vervaging. Klik Filter> Blur> Gaussiaans vervagen.

Stap 12

Houd Alt ingedrukt en plaats de cursor ertussen schaduw en bovenste achtergrond laag. Klik, zonder de Alt-toets los te laten, op zet de laag om in Clipping Mask. Door het om te zetten naar Knipmasker gaat de schaduw nu naar de bovenachtergrond.

Stap 13

Breng schaduw ondoorzichtigheid naar 50% om het subtiel te maken. Hieronder ziet u het resultaat in een vergroting van 100%.

Stap 14

Het is altijd een goed idee om deze lagen in één groep te plaatsen. Om dit te doen, selecteer alle lagen en klik vervolgens op Ctrl + G.

hoofd

Stap 15

Teken een rechthoek op het bovenste canvas zoals weergegeven.

Stap 16

In de Optiebalk, reeks Beroerte kleur naar # af9f8e.

Stap 17

Voor zijn Vullen kleur, selecteer lineair verloop van # d0c4b9 tot # a89c91.

Hieronder ziet u het resultaat in een weergave van 100%.

Naam van de site

Stap 18

Voeg de naam van de site toe aan de linkerkant van het ontwerp. Observeer de plaatsing zoals hieronder weergegeven. Dubbelklik op de tekst en voeg toe Slagschaduw. Gebruik Sansation voor het lettertype.

Tekenstijlen gebruiken

Stap 23

Laten we de tekeninstelling opslaan als een tekenstijl. Deze functie is een vereenvoudigde versie van tekenstijlen in InDesign. Om het op te slaan, activeert u de tekst en klikt u vervolgens op het pictogram 'Nieuwe tekenstijl'.

Dubbelklik op de nieuwe tekenstijl en gebruik de volgende instelling.

Stap 24

Selecteer het andere menu en klik vervolgens op de tekenstijl om het toe te passen. Als u een plusteken naast de tekenstijl vindt, betekent dit dat het teken een andere instelling heeft. Als u de instellingen wilt overschrijven, klikt u op het pictogram met de cirkelvormige pijl.

Stap 25

Herhaal de vorige stap om een nieuwe tekenstijl voor het actieve menu te maken.

Stap 26

Wat heeft het voor zin om tekenstijlen te gebruiken? Tekenstijlen helpen ons de tekeninstelling te centraliseren. We kunnen eenvoudig de tekenstijl bewerken om elke tekst met die stijl te bewerken. Zie een voorbeeld hieronder. Als we het lettertype in Character Style bewerken Hoofdmenu - Normaal bij Corbel wordt al het normale menu automatisch gewijzigd in Corbel.

Stap 27

Maak een nieuwe laag en plaats deze onder de menubalk. Houd Ctrl ingedrukt en klik op de menubalk om een nieuwe selectie te maken op basis van de vorm. Vul het met zwart.

Stap 28

Selectie verwijderen met Ctrl + D. Verzachten door toe te voegen Gaussiaanse vervaging, Filter> Blur> Gaussiaans vervagen.

schuif

Stap 29

Teken een rechthoekige vorm met de breedte van 10 kolommen (zie hieronder).

Voor zijn Opvulkleur kiezen # dfd1c2. Voor zijn Beroerte kiezen # c8baac met maat 10 pt. Klik op de kleine vervolgkeuzepijl naast het lijnvoorbeeld en zorg ervoor dat dit klopt Lijn naar binnen is geselecteerd.

Stap 30

Plak een afbeelding bovenop het frame. Converteer het naar Knipmasker door op Ctrl + Alt + G te drukken. De afbeelding wordt automatisch in het kader van de schuifregelaar geplaatst. Indien nodig kunt u de afbeelding verplaatsen en de grootte ervan wijzigen zonder het kader aan te tasten.

Stap 31

Teken een andere rechthoekige vorm achter de schuifregelaar met dezelfde kleur. Zorg ervoor dat u hem vastklikt aan de buitenste gids. Toevoegen Laagstijl> Patroonoverlay met behulp van pixelpatroon van PSDfreemium. Toon het ondoorzichtigheid om het subtiel te maken.

Stap 32

Teken een rechthoekige vorm boven de vorm met Invullen: # b3aca5 en geen beroerte. Druk op Ctrl + T en vervolgens op draai het 45 °. Converteer laagvorm naar Knipmasker.

Stap 33

Dupliceer de vorm en verklein hem. Verander zijn Vullen naar een donkerdere kleur. Converteer laagvorm naar Knipmasker.

Stap 34

Herhaal dezelfde stap om nog een pijl aan de andere kant te tekenen.

Stap 35

Houd Ctrl ingedrukt en klik op het diaframe om een nieuwe selectie te maken. Maak een nieuwe laag en converteer deze naar een Knipmasker. Vul de selectie met zwart.

Stap 36

Deselecteer (Ctrl + D) vervolgens verzachten het gebruiken Gaussiaanse vervaging.

U kunt de schaduwdekking indien nodig verminderen.

Stap 37

Teken een afgeronde rechthoek op de hoek van de schuifregelaar met Vul # c8baac.

Stap 38

Teken een cirkel in de vorm. Stel zijn Beroerte naar zwart met grootte 1 pt en verwijder de vulling.

Stap 39

Selecteer de cirkel pad gebruiken Pad selectie tool. Houd Shift + Alt ingedrukt en sleep het pad om het te dupliceren.

Herhaal dit om meer cirkels te tekenen.

Stap 40

Selecteer een van de cirkelpaden. Raak Ctrl + Shift + J om het naar een nieuwe laag te knippen.

Stap 41

In de Optiebalk, verwijder zijn Beroerte en verander zijn Vullen naar een radiale verloop vanaf # e38989 tot # bb5c5c. Toevoegen Layer Style> Outer Glow en Slagschaduw.

Stap 42

Teken een elliptische selectie onder de schuifregelaar. Maak een nieuwe laag en vul deze aan zwart.

Stap 43

Deselecteer (Ctrl + D). Verzachten met behulp van Gaussiaanse vervaging.

Lagere achtergrond

Stap 44

Teken nog een rechthoekige vorm voor de achtergrond onderaan. Gebruik hetzelfde Vullen en Beroerte kleur als de vorm van de schuifregelaar.

Wees zoals altijd erg voorzichtig met de plaatsing. We willen dat het elke gids op het doek beslaat.

Toevoegen Laagstijl> Patroonoverlay.

Hieronder ziet u het resultaat in een vergroting van 100%.

Stap 45

Selecteer het upergebied met behulp van het gereedschap Rechthoekige selectiekader.

Stap 46

Maak een nieuwe laag, plaats deze achter de vorm. Vul de selectie met zwart. Druk op Ctrl + T, klik met de rechtermuisknop en selecteer Perspectief.

Sleep de bovenste hoeken naar buiten.

Klik opnieuw met de rechtermuisknop en kies Schaal. Sleep de bovenste hendel naar beneden.

Klik met de rechtermuisknop en kies schering. Sleep het linker- en rechtersegment naar binnen.

Verzachten met behulp van Gaussiaanse vervaging.

Laat de ondoorzichtigheid naar 20%.

Stap 47

Teken een witte rechthoek in de achtergrond. Dit wordt een achtergrond voor de belangrijkste inhoud van de site.

Voeg een ruimte van 10 px toe aan de linker-, rechter- en bovenzijde van de achtergrond. De afstand moet gemakkelijk zijn, omdat we de handleiding in een vroeg stadium hebben gemaakt. Toevoegen Layer Style> Outer Glow.

Stap 48

Voeg een nieuwe gids toe, 25 px vanaf de bovenkant van de vorm.

Sectietitel

Stap 49

Voeg een nieuwe tekenstijl toe voor de titel van de paginasectie en de bijbehorende beschrijving.

Voeg de sectietitel en de beschrijving toe met het gereedschap Tekst. Pas stijlen toe die we eerder hebben gemaakt. Zorg ervoor dat u 25 px ruimte aan de bovenzijde van de achtergrond toevoegt met behulp van de eerder gemaakte handleiding.

Stap 50

Teken een lijn van 5 px onder de beschrijving van de site met Invullen: # 938270 en Slag: Geen.

Blogpost

Stap 51

Maak een andere tekenstijl voor de berichttitel.

Stap 52

Voeg een berichttitel toe en pas de vorige tekenstijl toe.

Stap 53

Teken een rechthoekige vorm onder de titel met een breedte van 4 kolommen. set wit voor zijn Vullen en #BEBEBE voor zijn Beroerte. Toevoegen Layer Style> Stroke.

Stap 54

Plak een afbeelding bovenop de vorm. Converteer het naar het uitknipmasker (Ctrl + Alt + G).

Stap 55

Teken een afgeronde rechthoek met Invullen: # 8e8380 en Slag: Geen. Converteer het naar Knipmasker.

Stap 56

Maak nieuwe tekenstijlen voor de metadata van de blog.

Stap 57

Voeg metadatatekst toe bovenop de vorm en pas de tekenstijl toe die we eerder hebben gemaakt.

Stap 58

Activeren Type gereedschap en klik-sleep om een tekstvak te maken. Stel de breedte in op 4 kolommen. Klik Typ> Plakken Lorem Ipsum om het te vullen met automatisch gegenereerde Lorem Ipsum van Photoshop.

Stap 59

Maak een nieuwe alineastijl voor de inhoud van het personage. Klik op het nieuwe pictogram in het deelvenster Alineastijlen.

Dubbelklik op de alineastijl en gebruik de volgende instelling.

Stap 60

Pas deze stijl toe op de inhoud van het bericht. Je kunt ook experimenteren met de instellingen voor inspringing en afstand.

Voor webontwerp, deactiveer woordafbreking.

Stap 61

Teken een afgeronde rechthoek met Invullen: # 8e8380 en Slag: Geen. Toevoegen Laagstijl> Patroonoverlay. Gebruik voor de consistentie hetzelfde patroon als in de schuifregelaar.

Stap 62

Voeg een knoplabel toe. Ik stel voor dat je het opslaat als een tekenstijl. Op deze manier kunnen we het gemakkelijk gebruiken voor andere knoppen.

Stap 63

De vorige knop is voor de normale toestand. Laten we het dupliceren en van kleur veranderen # f76b6a. Stel ook het labeltype in op vet.

Stap 64

Plaats het bericht in een groep en druk op Ctrl + J om het te dupliceren. Houd Alt ingedrukt en sleep om de groep te dupliceren.

Herhaal dezelfde stap om meer berichten te maken. Vergeet niet om de afbeelding en titel van elk bericht te wijzigen.

Stap 65

Duplicaat Lees verder knop en verander het label in nummer. We gaan het gebruiken voor paginanavigatie. Vergeet niet om een van de knoppen in te stellen op de zweefstand.

Stap 66: voettekst

Laten we beginnen aan de voettekst. Voeg een widgettitel en de beschrijving toe.

Stap 67

Voeg een link toe en teken er een lijn van 1 px onder. set Vulling: Geen en Beroerte: # 8e8380.

Stap 68

Klik Meer opties knop en selecteer stippellijn.

Stap 69

Voeg meer links toe aan de widget.

Stap 70

Dupliceer de widget.

Stap 71

We moeten ook de hover-voorwaarde toevoegen. Stel een van de links in op vet.

Onder die actieve link voegt u een lijn van 5 px toe. Stel de kleur in op # f76b6a. Voor consistentie lijkt het uiterlijk van deze link op het actieve menu op de menubalk.

Stap 72

Voeg een andere rechthoek toe aan het onderste gedeelte. Stel zijn Vullen naar # 3d3123.

Voettekstinformatie

Stap 73

Voeg voettekst info toe met Type tool. Geef het een duister Slagschaduw om contrast toe te voegen aan de achtergrond.

Sociaal netwerk

Stap 74

Voeg wat social media-iconen toe van Daniele Selvitella. Toevoegen Layer Style> Outer Glow.

Stap 75

Zet het normale pictogram op 50%. Voor hover-conditie, laten we gewoon blijven ondoorzichtigheid op 100%.

Stap 76

Pak een pictogram voor een losse handcursor en plaats de kleinste handcursor boven de actieve of zweeft u.

Eindresultaat

Dit is ons eindresultaat. U kunt zien dat de nieuwste Photoshop-versie enkele interessante functies heeft voor het ontwerpen van een weblay-out. Tekenstijlen en alineastijlen is een aanzienlijke verbetering voor elke webontwerper.

demonstratie
Download de bron