Create IGN.com Sidebar Box in Photoshop

11-7-07 Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 400×300 pixels canvas set at 72dpi, and I filled my background with a white color. In a new layer draw a gray, color code #C0BFBF rectangle size 315×280 px.

Step 2:
In a new layer draw a purple, color code #1C2340 rectangle slightly smaller than your first rectangle. See the picture for the proper size.

Step 3:
Using your Rectangular Marquee Tool make a selection inside the purple rectangle, exact height of 22 px. Now set your foreground color to #051550 and background to #04369E. In a new layer, apply a linear gradient on the marquee selection using the Gradient Tool.

Step 4:
Make the same marquee selection from the last step below the blue gradient rectangle. In a new layer fill the marquee selection with black color.

Step 5:
Under Layer Style(Layer > Layer Style) add a Drop Shadow and Gradient Overlay blending options to your black rectangle layer.

Step 6:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial, bold, 11 pt, none and white color. In a new text layer type the title of your content box. I used ‘LATEST NEWS’ with white color and #FFFF66 color shade.

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

---

Add a Comment

Name (required)

Mail (required)

Website