How to: [PS] Navigatiebalk maken

Adobe Photoshop Tutorial

In deze tutorial gaan we uitleggen hoe je een navigatiebalk in Adobe Photoshop kan maken die je op je website kan gebruiken. Er zijn genoeg variatie mogelijkheden op deze tutorial. Dus wees vrij in het gebruiken van andere lengte en breedte verhoudingen, andere kleuren of andere gradiënt effecten. Uiteindelijk moet het wel in je website passen.

Wat heb je nodig?

• Adobe Photoshop

Begin een nieuw document van 500 px. bij 200 px. Pak nu de gradiënt tool en zet de Foreground kleur op #363636 en de Background kleur op #252525. Zet de gradiënt nu diagonaal over je blok.



Maak een nieuwe layer aan (Layer > New > Layer). Pak de rectangular marquee tool en zet een blokje weg van 100 px. bij 40 px.



Vul deze selectie door middel van de gradiënt tool. Gebruik deze twee kleuren: #68ad40 en #4c8c2c. (Je kan ook kiezen voor andere kleuren zolang de een maar wat lichter is dan de andere).



Nu gaan we een paar effecten aan dit hokje toevoegen.

Layer > Layer Styles > Inner Glow.



Layer > Layer Styles > gradiënt Overlay.



Layer > Layer Styles > Stroke. Ik heb #427a25 als kleur gebruikt.



Als het goed is, heb je dit resultaat gekregen: