Varia Studios
« Interface Navigation Tutorial »

Welcome Guest. Please Login or Register.
Feb 10, 2010, 7:07am

[Home] [Help] [Search] [Login] [Register]




Varia Studios :: :: The Varia Library :: The Theoretical :: Interface Navigation Tutorial
   [Search This Thread][Send Topic To Friend] [Print]
AuthorTopic: Interface Navigation Tutorial (Read 18,210 times)
Sunjo
Administrator
[image]
member is offline

[avatar]


[homepage]

Joined: Feb 2009
Gender: Male
Posts: 1,914
Location: Not Scotland
Karma: 9
Interface Navigation Tutorial
« Thread Started on Feb 24, 2009, 5:35pm »
Alright, in this tutorial I will explain how to create the below navigation box.
I've included the PSD at the bottom of the post in case you get stuck on any of the steps.

[image]


Note: I will tell you to Ctrl + Click on layers several times through this tutorial, this does not mean to select that layer, it means to Ctrl + Click on the layer icon to make a marquee selection of that layer.


Step 1: Make a new document, 800x600 pixels in size.
Fill your background with a dark color, in this tutorial I used #1b1b1b.

[image]


Step 2: Create a new layer, and name it "BG Box".
Now make a selection like the below, and fill it with #232323.

[image]


Step 3: Now right click on your "BG Box" layer and add these settings:

[image]


Step 4: Create a new layer, and name it "BG Flare".
Now make a selection like the below and fill it with #FFFFFF.
Set this layer to Overlay, and 45% Opacity.

You can right click on this layer and select "Create Clipping Mask" if needed.

[image]


Step 5: Create a new layer, and name it "Noise".
Make a selection similar to the "BG Box" layer, to do this simply Ctrl + Click on the "BG Box" layer.
Now reset your colors (hit D on your keyboard) and fill this layer with black.
Now go to Filter>Noise>Add Noise. Use 55% Noise.
Now set this layer to Overlay and 5%-6% Opacity.

You should now have something like the below.

[image]


Step 6: Create a new layer, and name it "Pattern".
Ctrl + Click on your "BG Box" layer again, right click, and select "Fill".
Use these settings:

[image]


Step 7: Set the "Pattern" layer to Overlay and 35% Opacity.
Now make a new layer, and name it "BG Box 2".
Make a selection like the below and fill it with #111111.

[image]


Step 8: Set the "BG Box 2" layer to 50% Fill.
Right click on the "BG Box 2" layer and select Blending Options, and use these settings.

[image]


Step 9: Create a new layer, and name it "Blue Box".
Make a selection like the below and fill it with #275165.

[image]


Step 10: Now right click on the "Blue Box" layer and select "Blending Options".
Use the settings shown below.

[image]

[image]


Step 11: Create a new layer, and name it "Blue Box Noise".
Repeat Step 5. Now right click on this layer and select "Create Clipping Mask".
You should have something like the below.

[image]


Step 12: Create a new layer, and name it "Blue Box Flare".
Make a selection like the below, and fill the selection with #FFFFFF.
Set this layer to Overlay and 20% Opacity.

[image]


Step 13: Create a new layer, and name it "Soft Brushing".
Reset your brushes and select a 500px Soft Round brush.
Ctrl + Click on the "BG Box" layer to select only the navigation box area.
Click once with the brush in the middle of the layer like shown below.

[image]


Step 14: Now set the "Soft Brushing" layer to Overlay and 35% Opacity.
Now add some text for the menu, select the text tool and use Tahoma on 14pt, and Sharp.
Add in text like I have shown below.

[image]


Step 15: Create a new layer, and name it "Rollover Top".
Make a selection like shown below, and fill it with white.

[image]


Step 16: Now make a selection like I've shown below.

[image]


Step 17: Now right click inside the selection and select "Feather" and use 5px.
Now right click inside the selection again and select "Select Inverse"
Now hit delete on your keyboard twice.
You should now have something like the below.

[image]


Step 18: Now right click on the "Rollover Top" and select Blending Options.
Use the below settings.

[image]


Step 20: Now duplicate the "Rollover Top" layer, and move it to the bottom of the blue bar like I have shown below.

[image]


Step 21: Now this is optional, as it's more about taste, but here I selected the top part of the bottom line and hit Delete on my keyboard. (so it was 1 pixel in height, instead of 2)
I then changed the layer to "Overlay".
Here is my result now.

[image]


Step 22: Now go to Layer>New Adjustment Layer>Brightness/Contrast.
Use Brightness -10, and Contrast +40.
You should now have something like the below.

[image]


Step 22: Now for the final step I will sharpen it.
Create a new layer and name it "Sharpen".
Now go to Image>Apply Image. Then Filter>Sharpen>Sharpen.
Set this layer to 40% Opacity, and you're done!


Result:

[image]


PSD:
Click here


--
Did you enjoy this tutorial?
If so please register, it only takes a minute.. maybe less. [image]
« Last Edit: Apr 20, 2009, 9:44pm by Sunjo »Link to Post - Back to Top  IP: Logged

[image]



Gifts:
[x] - Lil' Nik - [x] - Dude™ - [x] - blackjack


my dA | Passport Studios
Parker
Is this sad
[image]
member is offline



[msn]
[homepage]

Joined: Feb 2009
Gender: Male
Posts: 1,241
Location: Uk
Karma: 0
Re: Interface Navigation Tutorial
« Reply #1 on Feb 24, 2009, 5:41pm »
This is actually really helpful and will probs use it to make a skin! Thanks a lot!
Link to Post - Back to Top  IP: Logged
Clickiess
[image]
[image]
Sunjo
Administrator
[image]
member is offline

[avatar]


[homepage]

Joined: Feb 2009
Gender: Male
Posts: 1,914
Location: Not Scotland
Karma: 9
Re: Interface Navigation Tutorial
« Reply #2 on Feb 24, 2009, 5:42pm »
No worries, glad you found it useful. :)
Link to Post - Back to Top  IP: Logged

[image]



Gifts:
[x] - Lil' Nik - [x] - Dude™ - [x] - blackjack


my dA | Passport Studios
Parker
Is this sad
[image]
member is offline



[msn]
[homepage]

Joined: Feb 2009
Gender: Male
Posts: 1,241
Location: Uk
Karma: 0
Re: Interface Navigation Tutorial
« Reply #3 on Feb 24, 2009, 5:43pm »
Will def post an outcome in about 2 days :D
Link to Post - Back to Top  IP: Logged
Clickiess
[image]
[image]
benjamin
Is this sad
[image]
member is offline

[avatar]

Ja Volim Dizajn



Joined: Feb 2009
Gender: Male
Posts: 6
Location: Bosnia & Herzegovina
Karma: 0
Re: Interface Navigation Tutorial
« Reply #4 on Feb 27, 2009, 10:04pm »
Outcome: http://i232.photobucket.com/albums/ee141/benjo5/NavigationBarcopy.jpg


Great Tut Sunjo

~Ben
Link to Post - Back to Top  IP: Logged
[image]
Sunjo
Administrator
[image]
member is offline

[avatar]


[homepage]

Joined: Feb 2009
Gender: Male
Posts: 1,914
Location: Not Scotland
Karma: 9
Re: Interface Navigation Tutorial
« Reply #5 on Feb 27, 2009, 10:07pm »
Nice outcome. :)

And thanks.
Link to Post - Back to Top  IP: Logged

[image]



Gifts:
[x] - Lil' Nik - [x] - Dude™ - [x] - blackjack


my dA | Passport Studios
benjamin
Is this sad
[image]
member is offline

[avatar]

Ja Volim Dizajn



Joined: Feb 2009
Gender: Male
Posts: 6
Location: Bosnia & Herzegovina
Karma: 0
Re: Interface Navigation Tutorial
« Reply #6 on Feb 27, 2009, 10:39pm »
No Problemo ;)


~Ben
Link to Post - Back to Top  IP: Logged
[image]
Graham
Is this sad
[image]
member is offline

[avatar]

All he ever wanted was a detonator


[homepage]

Joined: Mar 2009
Gender: Male
Posts: 8
Location: Sussex, UK
Karma: 0
Re: Interface Navigation Tutorial
« Reply #7 on Mar 3, 2009, 6:23pm »
I've been looking for something like this - there's some handy little tips and the outcome is epic.

*bookmarks*
Link to Post - Back to Top  IP: Logged

Mar 3, 2009, 1:12am, bbvalentine wrote:
OMG, your vagina has teeth!
dexordesigns
Is this sad
[image]
member is offline





Joined: Mar 2009
Gender: Male
Posts: 1
Karma: 0
Re: Interface Navigation Tutorial
« Reply #8 on Mar 27, 2009, 5:03pm »
Hey Iam new here and i try ur Tutorial and its very easy to follow all steps

Here is my Outcome:

[image]

DexorDesigns
Link to Post - Back to Top  IP: Logged
XeroCint
Is this sad
[image]
member is offline

[avatar]

Just enjoy it.

[yim] [msn] [aim]
[homepage]

Joined: Mar 2009
Gender: Male
Posts: 903
Location: In my Personal Bubble
Karma: -2
Re: Interface Navigation Tutorial
« Reply #9 on Mar 27, 2009, 5:11pm »
Nice outcome, mate :)
Link to Post - Back to Top  IP: Logged
[image]
[image] [image]
[image]
Gifts
-X-
Sunjo
Administrator
[image]
member is offline

[avatar]


[homepage]

Joined: Feb 2009
Gender: Male
Posts: 1,914
Location: Not Scotland
Karma: 9
Re: Interface Navigation Tutorial
« Reply #10 on Mar 27, 2009, 5:52pm »
Glad you found it easy to follow, and nice outcome. :)
Link to Post - Back to Top  IP: Logged

[image]



Gifts:
[x] - Lil' Nik - [x] - Dude™ - [x] - blackjack


my dA | Passport Studios
dacads
Is this sad
[image]
member is offline





Joined: Apr 2009
Gender: Male
Posts: 1
Karma: 0
Re: Interface Navigation Tutorial
« Reply #11 on Apr 25, 2009, 3:51pm »
very nice outcome but how do you actually set up a roll over?
Link to Post - Back to Top  IP: Logged
Dude™
Is this sad
[image]
member is offline

[avatar]

Why stay ordinary?



Joined: Feb 2009
Gender: Male
Posts: 300
Location: Barbourville, Kentucky. US
Karma: 5
Re: Interface Navigation Tutorial
« Reply #12 on Apr 25, 2009, 5:49pm »
To create a rollover, you'll need to look up some Javascript...

You'll need both an image before and after it has been moused over, and that should be about all you'd need.
Link to Post - Back to Top  IP: Logged

[image]

Gifts:

XeroCint
Wrighty
Is this sad
[image]
member is offline

[avatar]


[homepage]

Joined: Mar 2009
Gender: Male
Posts: 101
Location: England UK
Karma: 17
Re: Interface Navigation Tutorial
« Reply #13 on May 5, 2009, 2:38pm »
No, you can use CSS for rollovers! :)
Link to Post - Back to Top  IP: Logged
[image]
[image]
   [Search This Thread][Send Topic To Friend] [Print]


Designed by Sunjo, Coded by Dregond Rahl
Copyright Varia Studios © 2009
Click Here To Make This Board Ad-Free


This Board Hosted For FREE By ProBoards
Get Your Own Free Message Boards & Free Forums!