Glossy Professional Navigation Bar with Rollovers

In this tutorial you will learn to create this navigation bar with subtle rollovers.
(click on image to view full)



First thing that you want to do is create a new image that is 800 x 40 with these settings.



Now, make your foreground color #005fa9 and your background color #00487f and create a gradient from the bottom to the top of the image. It should look like this.
(click on image to view full)




Now, create a new layer and name that layer "shine." Now press Ctrl + A to select the entire canvas. Switch to the rectangular marquee tool and hold Alt and click from the bottom left to the middle right. This should de-select half of the selection leaving you with only the top, like so.
(click on image to view full)


Now, press D to reset your foreground and background colors, and press X to switch to white. Now fill in this selection with white by pressing Alt+Backspace (this fills current selection with foreground color)
Set this "shine" layer's opacity to 15% and it should look like this.
(click on image to view full)



Now, create a new layer and name this border.
Press Ctrl + A again to select everything, and then go to select > modify > Contract by 2

Then press control Ctrl + Shift + I to select the inverse and press Alt + Backspace again to fill this selection with white, Set this layer's opacity to 20% and it should look like so.
(click on image to view full)


Now save this image (don't copy and paste it) and open it up in photoshop. After you have done this, go to Edit > Define Pattern and call it "ScanLines." Now, go back to your other document, set your foreground color to #00457b and then create a new layer above the gradient layer, but below the shine and border layer. Now hit Shift and Backspace. This should open up a menu that looks like so,

Select the dropdown menu and change it from Foreground color to Pattern, and change the Custom Pattern to the new pattern we just created. Now set this layer's opacity to 50% and it should look like this.
(click on image to view full)

Now we are done with the main background of the navigation bars. All we have to do now is create the separator images, the rollovers and the text.


Ok, first, we want to make some text, so select your text tool set the Font to Tahoma and the size to 6. Now Click on the left of the image and type "Home." Now allign this to the middle and a few pixels from the left like so.
(click on image to view full)

Now we want to start creating the rollover image. Create a new layer and put it below your text layer , Set your foreground color back to white, and make a rectangular box which is inside of the 2px border and behind the home text, that extends a bit off to the right, like so.

Now, click the layer style button and add an inner glow with the following settings.
(click on image to view full)

After this, set this layers opacity to 35% and it's fill to 25%. It should look like this now.
(click to view full)



Now that we have the overlay, we need to create a separator for the rest of the buttons. Zoom in on your image, Hit D and then X to reset your colors and set the foreground to white. Select and hole the marquee tool to select the "Single Column Marquee Tool" now select a column to the right of the overlay and hit alt enter, now press your arrow to the right once, hit X to change the foreground color to black and hit alt enter again. This should create a white and black line next to each other like so.
(click on image to view full)

Now set this layers opacity to 15%.
After this, you can create more and more buttons until you are satisfied with them, following the same exact steps. You can move them around and eventually get an effect like this. (every other button is set to look like rollover for preview)
(click on image to view full)

You can download the PSD Here.

Hope you enjoyed the tutorial.

How to create an Awesome Abstract WallPaper

Hey guys and gals, this is the first official tutorial of Double Helix Designs on the web. I hope you all enjoy. In this tutorial you will learn to create something similar to this.

(click to see full resolution)

First thing to do is create a new image whatever size you wish. I am using 1280x800 for this tutorial. (Tip: Bigger is better, if you make it bigger you can always downsize it, if you make it too small you can't make it much bigger without distorting it)


Second thing that you want to do is fill the background in with any color you wish. I am going to choose to make a gradient, from #0072ff to #0049a4. To Make a gradient you first choose your click your foreground color and choose the first color you want to use. Then you click the background color and change that.

Now select your gradient tool and make sure that your settings at the top look like this.
(click to see full resolution)


Now that all of your settings are all setup, we can actually make the gradient. Drag your cursor from the top left of the screen until your cursor is past the bottom just a bit. Then let go. Your screen should look like this.
(click to see full resolution)


Now that our gradient is all set and ready to go let's start the abstract portion of the wallpaper. First, select the elliptical marquee tool and create an ellipse somewhere on the canvas. Draw the ellipse to look somewhat like this.
(click for full resolution)

Now we are going to switch back to our gradient tool but this time, i want you to go and click the arrow next to the gradient preview on the top toolbar and select "Foreground to Transparent"
After this press "D" and then "X". Pressing D resets the default foreground and background colors and pressing X swaps the two colors. Now you should have a white to transparent gradient.

Now, create a new layer by hitting the "Create new Layer" button on the Layers Pallete.

Now I want you to take your gradient tool and drag from the top left of the ellipse to about 3/4 of the way through the ellipse.

It should look like this afterwords.

Now that you have this. I want you to press Ctrl + D which deslects, and then change the layer opacity from 100% to about 55%.

After you have done this, I want you to scale up the ellipse by pressing Ctrl + T and drag the top right corner further right and a little downward 3/4 the length of the canvas. Then hit enter. It should look something like this. (click to view full resolution)

After you have achieved this, I want you to go to Edit > Transform > Rotate. Now Hold shift and rotate the bottom left corner to the bottom right of the screen like so.
Then hit enter.

Now go to Layer > Duplicate layer and hit Enter. Now you have two of these ellipsis. Now go back to Edit > Transform > Rotate and hold shift, rotate this one down one movement like so.


Do this entire step one more time, except duplicate this newly created layer. You should now have three of these ellipsis.

Now select all three of these ellipsis layers and Press Ctrl + E to merge them together.

Now you can move these abstract things around, duplicate them, scale them up and down and you can use filters like Filter > Blur > Motion Blur with a distance of about 30. It is really up to you. After you have moved all of your ellipsis around you can add some extra color to make the wallpaper look nice. I will teach you this method next.

Now that I have all of my abstract items finished I am going to add some more color.

I like to use gradients to add color to wallpapers like this, so using the method from step 1, i am going to set my foreground to red and my background to green and just create a gradient across the screen. Then I am going to take that layer and set it's layer mode to soft light.


Do this as many times as you like to get the desired color and you are finished.
(click to see full resolution)

I hope you enjoyed the tutorial. If you have any questions, comments or tutorial requests you can leave a comment here or can send an e-mail to me at takido1@hotmail.com.