Go Back   vBulletin Setup > vBulletinSetup Information > Photoshop Tutorials and Graphic Resources > Photoshop Tutorials


Please Register to get full access to the forums.
Reply
 
LinkBack Thread Tools Display Modes



#1   08-13-2008, 10:59 AM
Send a message via AIM to Brandon Send a message via MSN to Brandon Send a message via Yahoo to Brandon Brandon is a glorious beacon of lightBrandon is a glorious beacon of lightBrandon is a glorious beacon of lightBrandon is a glorious beacon of light Join Date: Jul 2006 Location: Topeka, KS
iTrader: (0)
digiXMAS Automatic Directory Submission Tool
Orange Theme Navigation Interface


Preview:

Orange Theme Navigation Interface.

Step 1:

Let’s start out by creating a new file. I used a 800×200 pixels canvas set at 72dpi, and I filled my background with a black color. Now make a new layer set and name it 'Navigation Interface'. In a new layer draw a large rectangle with 99 x 73 px dimensions and #272727 color shade.

Step 2:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your gray rectangle layer.




Result:

Step 3:

Select the Horizontal Type Tool and set the font family to Century Gothic, regular, 11 pt, crisp and white color shade. In a new text layer type your first navigation link on the center of the gradient rectangle.

Step 4:

In a new layer draw a long rectangle with 648 x 72 px dimensions and #FF9000 color shade next to the gray rectangle with gradient effect.

Step 5:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to the orange rectangle.


Result:

Step 6:

Add the rest of your navigation links on the orange rectangle.

Step 7:

Now add a line spacer between your links, in a new layer draw a 1 px white line between your first and second navigation link. Then set the layer's blending mode to Color Dodge at 13% opacity level.

Step 8:

Create a new layer. Next to the white line draw a 1px black line. Then set the layer's blending mode to Soft Light at 40% opacity level.


Step 9:

Add a line spacer for the rest of your navigation links.

Step 10:

In a new layer draw a white rectangle with 218 x 72 px dimensions at the end of your navigation interface. Then set the layer's blending mode to Overlay.

Result:

Step 11:

On the yellow gradient space of the navigation interface add a simple search box made up of white rectangle.

Step 12:

Now for the search button make a new layer and draw a white rectangle with a short width. Then under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options.


Result:

Step 13:

Add a 'go' text on the search button.

Results:

Orange Theme Navigation Interface.
--------------------
Brandon Sheley / vBulletin Setup Staff
Check out our Newsletter for the latest vB and SEO news.
Are you looking for vBulletin work to be done on your forums ?
Would you like to Help Support vBulletin Setup.


Add our Facebook Blog, Group and LinkedIn group.. Thanks
Stay up to date by installing our Tool Bar

Last edited by Brandon; 08-13-2008 at 11:06 AM..
Quote   |  
Reply


Tags
photoshop tutorial

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Digg-like interface for Google search results planned Soliloquy vBulletin SEO Tips and SEO Questions 7 07-24-2008 07:35 AM
vbull interface management opportunity jfk1 vBulletin Services 0 06-16-2008 01:13 AM
MinerSkinz Orange Blue Style Brandon vBulletin Styles for 3.7.x 0 05-16-2008 01:18 PM
Archive navigation link protoss vBulletin Questions 3 06-06-2007 08:41 PM


All times are GMT -6. The time now is 06:16 PM.

vBulletin Setup, vBulletin Setup Forums, vBulletin Services, vBulletin Blogs, vBulletin SEO, vBulletin Questions
vBulletin Skins, Styles, Templates, vBulletin Monetization, Blogs, vBulletin Link Directory,Quality Link Directory