Our Sidebar Box in Photoshop

10-3-07 Filed under Interface & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 400×400 pixel canvas set at 72dpi (regular settings), and I filled my background with a white color. Since our menu has a white rectangle its going to be difficult working in a white background canvas so fill it with the same background color used in our website, color code #EDFFFE.

Step 2:
Create a new layer, call it ‘Top Rectangle’ and using the Rectangle tool draw a white rectangle 260 x 50px size. If you want a bigger menu than the size provided just add your own size settings from now on.

Step 3:
Set your foreground color to a light gray color, color code #E5E5E5. Then using your Pencil Tool with a 1 px brush, draw a light grey border around your white rectangle.

Step 4:
Select your Horizontal Type Tool from the Tools Window and above your screen under the options palette set the font family to Webdings, 48 pt, crisp and #EDFFFE for color.

Step 5:
Now type the number six on your canvas which should render into an arrow like shape because of the font webdings. Also a new text layer with your arrow shape should show appear on your layers palette, place the arrow on the right end of your white rectangle.

Step 6:
Under Layer Styles add a Drop Shadow blending option.

Step 7:
Add an Inner Shadow blending option.

Step 8:
Finish it off with a stroke blending option.

Step 9:
With all the blending options added to your arrow shape text layer the arrow should now have a effect.

Step 10:
Select your text tool again and set the font family setting to Arial, regular, 14 pt, none and #00B26F for color.

Step 11:
Now just type the title of your section.

Step 12:
Here we added another white rectangle without the arrow like shape, this rectangle will hold the content.

Pages: 1 2
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

---

3 Responses to “Our Sidebar Box in Photoshop”

1. Phunkee Says:
   January 14th, 2008 at 1:15 pm

   great tutorial, thanks for sharing:)

2. CFA Level 1 Says:
   January 14th, 2008 at 4:09 pm

   Very nice. Thanks for this.

3. OriginMaker » Design a Web Studio Template Design in Photoshop Says:
   January 20th, 2008 at 10:37 pm

   [...] Box Design: Read Tutorial | Download PSD [...]

Add a Comment

Name (required)

Mail (required)

Website