Apr 9, 2007

Stylish website navigation.

Adobe Photoshop Tutorial

click on images to see their real size


In this tutorial, you will learn to create a stylish website navigation design in Photoshop.



Let’s start with creating a new document, with160px by 220px, background is not important. Now, select your Rectangular Shape Tool and create a rectangle that is 40px tall, and about 160px wide. Color doesn’t matter, because we will apply the following settings:




Create a new document with 6 px by 5 px, clear the background, select a Pencil Tool (Master Diameter is 1px) with a color # 939393, and draw two points as it is shown:



Now go to Edit > Define Pattern, name it for example as “new_pattern” and click OK. After that, return to previous document, select our rectangle by Ctrl + click on a layer icon in a layer palette, create a new layer (name it also for example new_pattern), and than go to Edit > Fill:




After filling, go to Filter > Blur > Gaussian Blur with radius 0,3px and click OK. The result must look like this:




Now, create a new layer, select a Pencil Tool (Master Diameter is 2px) with a color # 696969 and draw a line at the bottom of rectangle. Change color to # 808080 and draw a line at the top of our rectangle. Like here:




Select our three layers, and group them by pressing Ctrl + G. Clone them by Alt + Drag to make 5 groups and arrange them as on the following picture:




Select the rectangular in the second group and apply this settings.




In the same group select the layer “new_pattern” and apply the following settings: color overlay # ffffff and set the layer opacity to 25%.

That is how one of our buttons is going to look like when it is selected, but that is not all:




It the same group #2 create a new layer, select a Pencil Tool (Master Diameter is 1px) with a color # ffffff and draw some kind of an arrow, and place it as it is shown below:




Now, select a strict pixel font (I’ve used the Alaska font) and write down your menu. That's it!




Copyright © http://megatutorials.blogspot.com

AddThis Social Bookmark Button

5 comments:

Anonymous said...

hello, can u let me know wer to get alaska font. the font look nice but i couldnt get it.

pls reply me at littleloi_1988@hotmail.com

thanks for tuts , u r great!

Sam Christie-Sgro said...

Hi,
I enjoyed the tutorial, but do you know if there is any way to use this navigation bar on a blogger site? I want to add multiple layers to my blog but I don't know how or if it's even possible on blogger.

Thanks!

-Sam

Anonymous said...

球鞋
nikedao
nikedao.com
NIKE
ADIDAS
PUMA
妮可鞋岛
NIKE运动鞋
NIKE跑鞋
妮可岛
运动鞋
ADIDAS
板鞋
妮可鞋岛
妮可岛
阿迪达斯
妮可鞋岛
NIKE
ADIDAS
ADIDAS运动鞋
ADIDAS
阿迪达斯
运动鞋
运动鞋
板鞋
运动鞋
跑鞋
耐克
球鞋
休闲鞋
男女鞋
男女鞋
品牌
休闲鞋
耐克

Anonymous said...

WatchShow.TV-情色視訊聊天室WatchShow.TV-情色視訊聊天室WatchShow.TV-情色視訊聊天室WatchShow.TV-情色視訊聊天室WatchShow.TV-情色視訊聊天室168,視訊聊天室168,視訊聊天室168,視訊聊天室168,視訊聊天室168,視訊聊天室168,視訊聊天室168,視訊聊天室168,視訊聊天室168,視訊聊天室168,視訊聊天室meiren多人視訊聊天室meiren多人視訊聊天室meiren多人視訊聊天室meiren多人視訊聊天室meiren多人視訊聊天室meiren多人視訊聊天室meiren多人視訊聊天室meiren多人視訊聊天室meiren多人視訊聊天室meiren多人視訊聊天室尋夢園成人視訊聊天室尋夢園成人視訊聊天室尋夢園成人視訊聊天室尋夢園成人視訊聊天室尋夢園成人視訊聊天室尋夢園成人視訊聊天室尋夢園成人視訊聊天室尋夢園成人視訊聊天室尋夢園成人視訊聊天室尋夢園成人視訊聊天室真愛視訊聊天室真愛視訊聊天室真愛視訊聊天室真愛視訊聊天室真愛視訊聊天室真愛視訊聊天室真愛視訊聊天室真愛視訊聊天室真愛視訊聊天室真愛視訊聊天室5278免費視訊聊天室5278免費視訊聊天室5278免費視訊聊天室5278免費視訊聊天室5278免費視訊聊天室5278免費視訊聊天室5278免費視訊聊天室5278免費視訊聊天室5278免費視訊聊天室5278免費視訊聊天室愛上女主播視訊聊天室愛上女主播視訊聊天室愛上女主播視訊聊天室愛上女主播視訊聊天室愛上女主播視訊聊天室愛上女主播視訊聊天室愛上女主播視訊聊天室愛上女主播視訊聊天室愛上女主播視訊聊天室愛上女主播視訊聊天室愛情花園聊天室愛情花園聊天室愛情花園聊天室愛情花園聊天室愛情花園聊天室愛情花園聊天室愛情花園聊天室愛情花園聊天室愛情花園聊天室愛情花園聊天室網路愛情學院聊天室網路愛情學院聊天室網路愛情學院聊天室網路愛情學院聊天室網路愛情學院聊天室網路愛情學院聊天室網路愛情學院聊天室網路愛情學院聊天室網路愛情學院聊天室網路愛情學院聊天室新中台灣聊天室新中台灣聊天室新中台灣聊天室新中台灣聊天室新中台灣聊天室新中台灣聊天室新中台灣聊天室新中台灣聊天室新中台灣聊天室新中台灣聊天室台北聊坊聊天室台北聊坊聊天室台北聊坊聊天室台北聊坊聊天室台北聊坊聊天室台北聊坊聊天室台北聊坊聊天室台北聊坊聊天室台北聊坊聊天室台北聊坊聊天室藍色愛情海聊天室藍色愛情海聊天室藍色愛情海聊天室藍色愛情海聊天室藍色愛情海聊天室藍色愛情海聊天室藍色愛情海聊天室藍色愛情海聊天室藍色愛情海聊天室藍色愛情海聊天室e夜情人免費視訊聊天室e夜情人免費視訊聊天室e夜情人免費視訊聊天室e夜情人免費視訊聊天室e夜情人免費視訊聊天室e夜情人免費視訊聊天室e夜情人免費視訊聊天室e夜情人免費視訊聊天室e夜情人免費視訊聊天室e夜情人免費視訊聊天室kiss影音視訊聊天室kiss影音視訊聊天室kiss影音視訊聊天室kiss影音視訊聊天室kiss影音視訊聊天室kiss影音視訊聊天室kiss影音視訊聊天室kiss影音視訊聊天室kiss影音視訊聊天室kiss影音視訊聊天室色情視訊聊天室色情視訊聊天室色情視訊聊天室色情視訊聊天室色情視訊聊天室

Sam said...

Your web page is probably definitely the most efficient . All around impression of the website is simply dramatic .
West palm beach Locksmith
Locksmith MARGATE FL
Locksmith Campbell CA
RedwoodCity locksmith
Locksmith RedwoodCity
Locksmith RedwoodCity CA
Locksmith RedwoodCity CA
pembroke pines locksmith
Locksmith Mesquite
mesquite tx locksmith
Locksmith Mesquite
aventura locksmith
aventura locksmith
locksmith fort worth texas
hialeah locksmith
hialeah locksmith
Hialeah FL Locksmith