"Designing Top Panel in Photoshop" newsletter got very good response form the subscribers, with requests for more such newsletters. Considering the subscribers requests Firewire team has come out with an another newsletter on
"Designing Top Panel in Photoshop - 2".

Most of the clients wants a fast loading web site to be designed very quickly at low cost. In such cases the 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 newsletter covers step-by-step guide / tutorial to design professional looking fast loading top panel in Photoshop.

Click here to download the source (.psd) file.

1. Create new file with Dimensions 779 px. X 244 px. Resolution 72 px. and Mode RGB Color

2. Save the file as "Toppanel.psd"

3. To create a bottom patch, Insert New Layer (Ctrl+Shift+N) and name the layer as "Grey Bottom Patch"

4. Choose Windows > Show Tools > Click Rectangular Marquee Tool

5. Set style "Fixed Size" in the option bar with Width 779 px, Height 31px and create a Rectangular selection with a little distance above the bottom base as shown in the below image.

6. Set Foreground color to Hex value #F2F7F8

7. Click on Edit > Fill

Use: Foreground Color, Blending Mode: Normal & Opacity 100% > Click OK

8. Insert a new layer for Bottom Patch border and name it as "Bottom Patch Border"

9. Choose Edit > Stroke

10. Specify Stroke as, Width 1px, Color value as #BED3D5, Location Outside, Mode Normal, Opacity 100% > Click OK

11. Insert New Layer (Ctrl+Shift+N) for Yellow Patch and name it as "Yellow Patch"

12. Set Horizontal & Vertical guidelines as shown below.

13. Horizontal guide at: 238px and Vertical guide at: 537px

14. Select Window > Show Options & Choose Elliptical Marquee Tool

15. Set style "Fixed Size" in Option bar Width 563 px & Height 331px, Click on the file and place the oval circle in form of a semi circle as shown in the image.

16. Set Foreground color to #FDD91B and fill the selection with the yellow color.

17. Set 2 Vertical guidelines as shown in the image.

18. First vertical guideline at: 38px and second vertical guideline at: 472px

Steps to create the Menu panel

19. Select the Rectangular Marquee Tool.

20. Set style "Fixed Size" in Option bar width 435px & height 244 px. Click on the new file and place the rectangular selection exactly matching the vertical guides.

21. Choose Select > Inverse (Ctrl+Shift+I) and delete the selected part.

Steps to create a line Pattern

22. Create New file. Select File > New (Ctrl+N) and name it as "Pattern"

23. Set Dimensions 10 px. X 10 px., Resolution: 72, Mode: RGB Color, Contents as Transparent.

24. Set Foreground color to #D7D7D7

25. Zoom the file upto 1600%. Select the Pencil Tool (B) and draw a line of 1 pixel. Leave space of 2 pixels and create another line of 1 pixel. Repeat this steps as shown in the below image.