In this section we will introduce you how to create global menu (navigation).
This is a must have in web design. We will make a very simple global menu this time.
The technique is not so difficult there are some tips to make it look more professional. Be attentive to those points.
First, draw a rectangle to be the base of the menu.
Draw a rectangle which is the size of the global menu. Fill it with anything and no line. (We will adjust it in the next step.)
Apply gradient on the rectangle created in Step01.
After selecting the rectangle, apply line gradation with property inspector and set the color as shown above. This time we used the refreshing blue gradation.
The key in this section is to apply gradation with similar colors and keep the color difference small. It is important to only apply slight gradation.
We will add slight slashes on the global menu.
Select the rectangle. Select [Slash 1] in Property Inspector Texture. Set the application ratio 10%.
Like with gradient, it is important to just add a slight change. When the application ratio is too high, it would look more non-professional.
Take a break here and have a look at the object.
The slight gradation looks beautiful. You could just simply fill it but the slight gradation gives a whole different impression.
It is important not to be lazy and accumulate slight effects for enhanced designs. We will use filters for better texture in the next step.
Add lines outside the global menu.
Select the rectangle, click filter [+] in Property Inspector. Click Photoshop Live Effect.
[Photoshop Live Effect] dialog appears. Check the [Line] on the left. Set the setting using the example above. Do not click OK yet.
Next, add Bevel (inside) on the global menu.
Click [Bevel and Emboss] in the dialog, set the setting as shown above and click OK. It looks natural by lowering the shadow opacity.
Now we have the global menu base!
Next, add a separator line on the global menu.Add two lines where you would like to separate with Line Tool.
The key here is to set the left line color the same as the line outside (or similar) and set lighter color for the right line (similar to the Bevel shadow).
Having two dark and light colored lines makes the menu look realistic.
Copy and paste the two lines created in Step06 and arrange it on the menu.
It is completed by adding text on the menu.To align the font, use the Alignment Panel.
Now we have the simple global menu!
When rolled over, display inversed gradient image so it would look like the button is pressed. (See above.) This is a technique used commonly.
How was it? It should have been easy for you. We learned some techniques to make the design look more professional. These are important aspects. Make sure you master them.