I hate side menus. I always have, I prefer having as much content on
the screen as I can (ok I know this blog don’t conform to that, but I
mean generally). Never the less side menus are needed with most sites
that want to display more than just navigation links. Here is a short
tutorial on creating a bubble style navigation menu.
First create your document, I used the values:
Width: 900 Pixels
Height: 700 Pixels
Background: Transparent.
Of course if you feel more comfortable with having a small display
window that’s fine, but for me the extra spaces gives me an area to
play around in.
Create a new layer (Layer – new – Layer) Set your color to be
#aaccef. Now using the rounded rectangle tool create a rectangle with
Radius of 7.
http://danstuts.com/wp-content/uploa...rad7-thumb.jpg
Make the rectangle slightly smaller than you want the width of the
navigation menu to be. The size of the menu is all dependant on what
you really want to use it for, never the less I use the values 175
Pixels. By this time you should have something like:
http://danstuts.com/wp-content/uploa...age-thumb9.png
Create a new layer (Layer – New - Layer) Now once again
use the rounded rectangle change the radius from 7 to 11 and the color
to #d4e5f6. Starting drawing a rectangle on top of your previous
rectangle but slightly smaller, leaving a larger gap at the top than
the bottom (see picture below)
http://danstuts.com/wp-content/uploa...ge-thumb10.png
It’s already a nice looking side bar. Of course we want to really
make it stronger when it comes to standing out. For this we shall add a
drop shadow on the first layer, so select it from the Layers menu
section then right click and select Blending Options
http://danstuts.com/wp-content/uploa...ding-thumb.jpg
You should now see the blending options window, on this window select the Drop Shadow tab item then use the following settings:
Blend Mode: Normal
Opacity: 75%
Noise: 0
Color: #4155a1
http://danstuts.com/wp-content/uploa...ge-thumb11.png
Now we want to add a stroke. To do this click the Stroke option in
the Blending Options ******** We will use the follow details to give it
a light bordered style.
Size: 2 Pixels
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Color
http://danstuts.com/wp-content/uploa...ge-thumb12.png
This should create a very nice elegant and smooth border around the
box, without using to many dark colors. Next we want to move onto the
finishing touches. We’re going to use a icon to give our navigation box
some more interest, the icon you use is up to you, and you can find
some fantastic icons here. Because of the blue nature of the menu, and because I like fish I shall be using this fantastic icon
from TurboMilk. Download the icon you plan to use in PNG format at the
biggest size you can. Then in photoshop open the icon you downloaded
The icon will open in a full ******** Because of this we
want to click the inner minimize icon as indicated in the image below.
This should make the icon window around the same size of the icon
http://danstuts.com/wp-content/uploa...here-thumb.jpg
We now want to drag our icon onto our menu document
(make sure you have the move tool selected, press v to activate the
move tool. Once you’ve moved the icon into your menu document you can
let go of the mouse. Now still using the move tool navigate the icon to
the top left of the menu. Then press CLT and T together to activate the
transform options slightly angle the icon (see image below)
You should now have something like the below image.
That’s the end of this short tutorial. The method is extremely easy to
do, and so much so at one point when Photoshop crashed it only took me
40 seconds to recreate the menu.
