Home Community Submit Tutorials Downloads Gallery Links Contact FAQ's / Help
  Home
  Submit Tutorials
  Community
  Tutorials
  Fonts
  Templates
  Affiliates
  Photography Corner
  Site Map
  Contact Us
 
Affiliates
  Pixel Apex
  Trick Digest
  Racuda
  Free-Brushes
  Pixel2life
  Good-Tutorials
  Tutorialized
  Deviantart
  Majesticlicks
 
Tutorial Categories
3D Studio Max
Adobe Photoshop
Adobe Fireworks
Adobe Flash
Adobe Flex
Adobe Illustrator
ASP.NET
Dreamweaver
eCommerce
Gimp
JavaScript
Maya
Microsoft Frontpage
PHP Coding
Swift 3D Swift 3D
Windows Operation
Wordpress
 
Tutorial
Name:
MP3 Player
Author:
Tutorialsfor3dsmax
Tutorial
Name:
Chubby Kid
Author:
Vforvectors
 
Search:
Search Example: Orb, Oman3d, Adobe Photoshop or Picture Editing
 
 
Navigation Bar - Create a glass type navigation bar.
Introduction: In this tutorial I will teach you how to create a Glass type navigation bar.If you are having problems feel free to e-mail us, or post a message on the forum.
 

Learn how to create this navigation bar.

Step1: Learning how to create the Glass Effect.
I found this effect on www.depiction.net , the reason I used this effect is because it is a nice effect and very simple to recreate. Click here for the direct link to the glass effect. On the other hand, you can click here to download the style and import it into Photoshop

Ok, let us get started. Create a new image using the dimension  800 x 600. Set the background color to white. You can change the background depending on you web site color. Create a new layer, Layer New Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool create a rectangle using the dimensions below. Change the foreground color to #dcdcdc

With that, you should have the effect below.

Now click here to download the style, import it into Photoshop, and add the effect to the bar above. With the effect added, you should have what i have shown in the image below.

Step2: Creating the on/off button.
At this point, you should have the button above. Create a new layer, LayerNew Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool create a small rectangle using the dimensions below. Change the foreground color to #FFFFFF, and place the smaller rectangle as shown in the image below.

We need to create the effect of the embedded button. Still on the same layer, click here to download the style and import it into Photoshop and add the effect to the small rectangle. You should have the effect I have below.

Create a new layer, LayerNew Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool create a small rectangle using the dimensions below. Change the foreground color to #c5c5c5.

Your rectangle should look like the image below.

Right click on the small rounded rectangle and click Blending Options as shown below.

Now add the Blending Options setting below.


Drop Shadow


Inner Shadow


Gradient Overlay


Gradient Overlay (Gradient)

Click ok when you have added the setting.

With that, you should have the effect below.

Now position the button over the gradient you created previously to get the effect in the image below.

Step3: Creating the display screen
Create a new layer, LayerNew Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool create a small rectangle using the dimensions below. Change the foreground color to #b1b1b1.

By using the setting above, create the rectangle below.

We need to add a gradient to the bar above. Right click on the layer you have just created and click Blending Options and add the setting below.


Gradient Overlay



Gradient Overlay (Gradient)

Click ok when you have added the setting.

With that, you should have the effect below.

Step4: Creating the Blue Screen.
Create a new layer, LayerNew Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool create a rectangle using the dimensions below. Change the foreground color to #7dcafc. This rectangle has to be smaller than the previous rectangle to give it the effect that it is imbedded into the display.  

At this point, your image should look like the image below. Place that rectangle above the previous rectangle.

At this point, you should have the effect below.

Right click on the blue screen layer, click Blending Options and add the setting below.


Inner Glow

Click ok when you have added the setting.

Click on the layer and change the Opacity to 75 % as shown below.

With that, your image should look like the screenshot below.

Step5: Power button logo.
I created this button using custom shapes as shown below.

Create a new layer; change the foreground color to 688cab. Click on the circular shape. Draw the circle while holding the shift key to get a perfect circle. Using the Rectangular Marquee Tool delete the top to get the effect below.

Using the Pencil tool at 1 pixel (px) with the same color (688cab). Draw a line on a new layer in the middle of the circle to get the effect below.

Step6: Adding Text.
When you are adding the text, make sure you change the Opacity on the text layer. Doing this will blend the text with the background, giving the effect off the text behind glass.

Finished:
Well that is it, hope it came out to what you expected. I also created a video tutorial for this example. The file is a 16 MB flash file. I have the link up on the video section on the forums. Users have to register to view the file, click here to register and view file.  If you have any question or comment about this tutorial feel free to post a message on the forum.

This Tutorial was Created by Mark
 © 2006 pixeldigest.com. All Rights Reserved.

 
 
Help Support Us
 
 
 
News Updates

An Overview of the Latest Adobe Photoshop Creative Suite Program

Adobe has now sent forth its Creative Suite 5 (CS5) application for worldwide release. Adobe is a company that believes in the power of innovation, which is why it has completely overhauled this latest CS offering in order to add a variety of functionalities into this legendary application. Since it's more than a mere upgrade, the Photoshop CS5 program is undoubtedly a worthwhile purchase for professional graphic artists everywhere.

 
 

Updated the Forum,

Unfortunately i could not use the same link as the old forum for the update. For the new link click Here. All the post and user name are still usable. So, if you previously registered you can still use the old username and password. Some accounts that was not used were deleted.

 
 
News Update [10/16/07]
Yesterday on the 15th of October my gallery went down for some unknown reason. I was able to get the backup of the images, i just lost all the users. The gallery was not that active but i am sill pissed about what happened. I am in the process of reloading the gallery. Just give me some time and it should be up and running. Yesterday on the 15th of October my gallery went down for some unknown reason. I was able to get the backup of the images, i just lost all the users. The gallery was not that active but i am sill pissed about what happened. I am in the process of reloading the gallery. Just give me some time and it should be up and running.  
... Read More
 
Bookmark This Page
 
 
Untitled Document
Latest Gallery Image
 
Sponsors
Custom Shapes
Custom Shapes
Custom Shapes
 
 

Home | Submit | Tutorials | Forums | Gallery | Fonts | Downloads | Privacy Policy | Affiliates | Sitemap | Contact | FAQ's / Help

© 2005 - 2008 pixeldigest.com