|
103.
Set Foreground color to Hex value #D7E0E1
104.
Fill the selection with the Foreground color
105.
Place the same rectangular selection at a distance of 4
px. on the same layer "1 Grey Vertical Line"
as shown in the image.
106.
Fill the selection with the set Foreground Color.
107.
Duplicate layer and name it as "
2 Grey Vertical Lines Patch"
108.
Choose
Edit > Transform > Flip Horizontal
109.
Shift "2 Grey Vertical Line Patch" Layer
right side as per the image shown below.
110.
Duplicate layer and name it as "3 Grey
Vertical Lines Patch"
Shift
and Place the layer on left side of the Toppanel.psd image
as shown below.
111.
Create a New layer and name it as "4
Grey Vertical Lines Patch"
112.
Create a Rectangular Marquee Selection
of 66 px. x 177 px.
Fill the selection with the already
set Foreground Grey Color.
113.
To create a patterned effect, lets start from the right side
of the Grey Patch. Leave a distance of 2 px. and create
a rectangular selection of width 2 px. and height 177 px.
and delete the fill inside the selection.
114.
In continuation, leave a distance of 5 px. and create
a rectangular selection of width 3 px. and height
177 px and delete the grey fill. Further leave a distance
of 38 px. and create a rectangular selection of width
4 px. and height 177 px. and delete the fill inside the
selection.
115.
Place the "4 Grey Vertical Lines Patch" besides
the "3 Grey Vertical Lines Patch" layer
at a distance of 12 px.
116.
Duplicate the "4 Grey Vertical Lines Patch"
and name it as "5 Grey Vertical Lines Patch".
117.
To flip the 5 Grey Vertical Lines Patch image, Choose Edit
> Transform > Flip Horizontal
Place
the 5
Grey Vertical Lines Patch image
as shown in the image below.
118.
Create New layer and name it as "Textfield"
119.
Select Rectangular
Marquee Tool,
Set style "Fixed Size" with Width 114
px. & Height 18 px.
120.
Set Foreground color to Hex value #FFFFFF and Fill
the Rectangular selection.
Place
the fill as shown in the below image.
121.
Create New layer and name it as " Textfield Border
"
122.
Click on Edit > Stroke,
set the stroke as Width: 1px, Color:
#ABC3C5, Location: Center, Mode: Normal, Opacity: 100%
& Click Ok.
123.
Create New layer and name it as " Go Button"
124.
Select Rectangular
Marquee Tool,
Set style "Fixed Size" with Width 21 px.
& Height 15 px.
125.
Set Foreground color to Hex value #F2F7F8, Fill the
selection.
126.
Create New layer and name it as "Textfield Border"
127.
Choose Edit > Stroke,
Specify stroke of
width 1px, Color: #CCDADC,
Location: Center, Mode: Normal, Opacity: 100% & Click
Ok
128.
Select Type Tool (T).
Set Type Tool options to Text type Verdana, Regular, Size
3pt, and Color to #850E0E and Type "Go"
and Place it in center within the Go button.
129.
Select
Type Tool
(T). Set Type Tool options
to Text type Verdana, Bold, Size 10pt, and Color to #86A4A7
and Type " Search" and Place it as shown in
the below image.
130.
Select Type Tool (T).
Set Type Tool options to Text type Verdana, Regular, Size
10px, and Color to #000000
131.
Type text "About Us". Align the text as shown
below
132.
Select the "About Us" Layer, Duplicate
layer and name it as "About Us Mouseover"
133.
Select the About Us text in the "About Us Mouseover"
layer and set the Color to #1B5F67
134.
Select Text "About Us" Layer and Duplicate
"About Us " Layer and rename it to "Products"
and edit the text to Products. By double clicking on the Products
layer.
135.
Similarly create the remaining Menu links and Mouseover of
Services, Portfolio, Site Map, Feedback and Contact Us
Place
the Menu links as shown in the below image.
To
create bullets for the Menu links.
136.
Create New layer name it as " About Us Bullet"
137.
Create a rectangular selection of
width 2 px & height 7 px.
138.
Set Foreground color to Hex value #F8AC04 and fill
the bullet selection.
139.
Duplicate the About Us bullet layer and name it as "About
Us Bullet Mouseover"
140.
Set Foreground color to Hex value #BE0E0E.
To
select the bullet, Press
Ctrl and click on the "About Us Bullet Mouseover"
layer, the layer gets selected.
Fill
the selection with the selected Foreground color.
The
bullet will appear as shown in the below image.
141.
Similarily create bullets and Mouseover bullets for
all the menu links.
Thus
the Top Panel designing in Photoshop is complete.
Regards,
Manoj
Kotak.
The author is Director of Image Online Pvt. Ltd.
Developer of Layout Galaxy web site design templates for photoshop
and Flash.
All
accompanying logos, brands and product names are trademarks
of their respective companies.
|
