Techy navigation design

Step one, background design

first off, open a new photoshop document sized 400×40 (px) and paint the background with white (#ffffff) using the paint bucket tool.

then, choose the gradient tool (G), make sure the basic parameters shown in the top bar are like below:

and then click on the gradient icon in the left side of the top bar. it will take you into the ‘Gradient Editor’.

there, you should create a gradient like shown in the following image

this will be done by adding color tags (click on the blue part of the image) and then double click on the color tagged you have just created.

then, when the gradient values are set, draw a straight line with the gradient tool like the following image

choose the pattern from the list of the black\white circle icon in the bottom of the layers window.

in this window, click on the arrow and choose from the list of your patterns a dotted pattern that will look about like the following pattern:

choose the patten layer if it’s not selected yet in the layers window and change the opacity value to 20% and the mode of this layer to ‘multiply’.

end result till this step should be around like the below image:

step two, making the buttons and touch ups

choose the ‘rectangle tool’, make sure it will be vector and editable by choosing the ’shape layers’ from the top bar of this tool.

create a rectangle sized like the following image and then warp it by going to ‘edit-transform path-warp’.

choose the ‘inflate’ option and change the bend present to 5.0

go and change the value of the fill filed in the layers window to 0%.