Tutorial Blog

Maak een Ornate website header Photoshop Tutorial




Deze tutorial zal u tonen hoe het maken van een decoratieve header die u kunt gebruiken op websites of blogs.

Dit is wat je zal maken:
website header tutorial

Eerste stap is het aanmaken van een leeg doek van ongeveer 770px breed en 400px hoog, selecteer vervolgens de afgeronde rechthoek tool, zet de radius op 9px en teken de vorm van uw koptekst hoe lang je zou het als volgt uit:

website header tutorial step1

Next up voegt een helling aan de vorm - klik met de rechtermuisknop op de laag van de shape en voeg een gradiënt overlay-instellingen:

website header tutorial stap 2

Kies een licht paars en donker paars voor de gradiënt, gebruikte ik # 190141 voor de donkere en # 5E01F7 voor het licht
De vorm zal nu als volgt uitzien:

website header tutorial Stap3

Nu moeten we een patroon kiezen om op de kop, voor deze tutorial gebruikte ik een van de site van de uitstekende squidfinger's.
Mijn gekozen patroon was:

patroon

U kunt deze, gewoon rechts klikken op de afbeelding en opslaan of blader door squidfinger's om u een voorkeur te vinden.

Open nu het patroon in photoshop, selecteren en knippen en plakken in uw koptekst psd, Ctrl + klik op het patroon te laag, selecteert u als volgt:

website header tutorial stap 4

Ga vervolgens naar> Edit> Define Pattern> En geef het een naam.

Ctrl + Klik op uw belangrijkste header vorm laag te selecteren, maak een nieuwe laag erboven en klik op de emmer verf tool. Schakel de vulling soort van 'voorgrond' naar 'patroon' en kies uw patroon uit de dropdown.

website header tutorial stap 4

Vul de nieuwe laag met je patroon:

website header tutorial stap 5

Klik met de rechtermuisknop het patroon laag en selecteer het mengen opties, verander de mengmodus op 'overlay' en nemen de dekking tot 39%:

website header tutorial stap 6

Uw kop zal nu als volgt uitzien:

website header handleiding stap 7

Selecteer de header vorm laag, klik met de rechtermuisknop en ga naar het mengen van opties, zullen we nu voeg wat buitenste gloed:

website header tutorial stap 8

Een 4pixel binnen een beroerte:

website header tutorial stap 9

U moet nu:

website header tutorial stap 10

Nu eindelijk voeg uw logo / tekst en navigatie en uw koptekst is voltooid:

website header photoshop tutorial

U kunt ook downloaden van de PSD voor deze tutorial.



Reacties

12 Reacties op "Maak een Ornate website header Photoshop Tutorial"
  1. Uitstekende tutorial

  2. mheidzir zegt:

    dit is een goede tutorial. zou graag zien dat gimp tutorial in de toekomst

  3. Seyhan zegt:

    Dit is echt mooi, dank je. Keep up the good work ..

  4. morly zegt:

    Very Very nice informatie vindt u hier ... Thanks

  5. Henry zegt:

    Nice tutorial!

    Je kunt veel vrije elementen webdesign vergelijkbaar met deze op http://www.stemplate.com

  6. Black Tiger zegt:

    Bedankt, mooie tutorial!

  7. Mattias B. zegt:

    Bedankt ik echt genoten van deze Tuturial. Easy effecten die kunnen worden gebruikt in veel manieren echt helpen coders die proberen te zetten iets grafische nu en dan zonder dat uitgelachen =)

  8. psdtemplates zegt:

    Mooi effect. Zal binnenkort proberen. Tnx again!

  9. Laura zegt:

    Grote tutorial, thanks!

  10. Chalo zegt:

    Grote tutorial - Basic, maar met een aantal functies die ik zocht, added bonus.

    Bedankt.

Trackbacks

Check out wat anderen zeggen over deze post ...
  1. Jack zegt:

    Jack

    Wil je post ook op mijn opmerkingen? Proberen om mijn site kijken populair lol :)



Tutorial Blog