| Designing Top Panel in Photoshop
Most of the clients wants search engine friendly web site to be designed very quickly at low cost. Best solution is to design a professional looking top panel, keeping other area of page free for text. Designing top panel takes less time compare to designing a full page, thus saves time & cost. This article covers step-by-step guide / tutorial to design professional looking fast loading top panel in Photoshop. Click here to download the source (.psd) file.
Creating New File
1. Create new file with Dimensions 779px. X 210px and Resolution 72px in RGB mode 2. Save the file as "Toppanel.psd"
Background Gradient Effect
1. Set Foreground color to Hex value #E45D21 2. Set Background Color to Hex value #AB1000 3. Select Gradient Tool 4. Select Window >Show Options & choose Linear Gradient Icon. 5. Click to edit gradient. Select Foreground to Background Option. 6. Press Shift and drag Mouse from bottom to top as shown in image 2.
Dividing Area for Collage and Links Panel
1. Set Guides lines. Leave 18 px margin 2. Select Rectangular Marquee Tool and set style "Fixed Size" in Option bar Width 550px Height 174px 3. Click on Left hand side Guidelines and set Guidelines to box. 4. Set all Guidelines as shown below.
Creating Rectangle for Collage 1. Select Rounded Rectangle Tool and choose "Create New Work Path". Set Radius to 12px.
2. Create Rectangular path 550px X 174px 3. Select Window > Show Paths 4. Click on Third icon in path panel the "Loads path as a selection"
5. Insert new layer (Ctrl + Shift + N) and name the rectangle layer as "Color Fill" 6. Set Foreground color to #AB1000 7. Fill Color in new layer. Select Edit > Fill and Set Foreground Color option.
8. Insert New Layer for square border and name it as "Border" 9. Select Edit > Stroke 10. Put Width 1px. Color Value as #7C0E01 and select Location as Inside
11. Select Layer > Duplicate Layer... 12. Create duplicate of border layer (Layer > Duplicate Layer...) and name it as "Feather Border" 13. Select Filter > Blur > Gaussian Blur. Set Value as 2.4. Click OK Creating Pattern 1. Create New file. Select File > New (Ctrl+N) and name it as "Pattern" 2. Set Dimensions 10px X 10px, Resolution : 72, Mode : RGB Color, Contents as Transparent
3. Set Foreground color to #B0AFAE 4. Select Pencil Tool (B) and draw "L" shape.
5. Select Edit > Define Pattern 6. Give Pattern Name and click OK button 7. Again select "Toppanel.psd" 8. Create New layer over the "Color Fill" layer and name it as "Pattern" 9. Go to Edit > Fill. Select Contents as "pattern " 10. Select Lines Pattern and click ok 11. Go to Layer > Group (Ctrl +G) and group this layer with Previous layer. 12. In Layer Panel select Overlay option and decrease Opacity to 50% .
| 
