Create a White and Blue Template in Photoshop

2-16-08 Filed under Photoshop Tutorials & Web Layouts

Step 1:
Let’s start out by creating a new file. I used a 1000×800 pixels canvas set at 72dpi, and I filled my background with a white color. Now “Create a Simple Gradient Header” or download the PSD and insert into your canvas.

Step 2:
Leave a Leaderboard advertisement space under your header.

Step 3:
Select the Rounded Rectangle Tool from your tools palette then above your screen under options palette choose Fill Pixels, set the radius to 6 px and check anti-aliased. Create a new layer and draw a cool blue rounded rectangle with #0092F6 color shade and 208×168 px dimensions.

Step 4:
Now make another layer and draw a black rectangle with 208×26 px dimensions right around the bottom of your rounded rectangle.

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

Step 6:
Create a new layer, on the bottom corner of your blue rounded rectangle draw a small black circle.

Step 7:
Under Layer Style(Layer > Layer Style) add a Stroke blending options to your small circle layer.

Step 8:
Add the same circle design on the right corner.

Step 9:
Create a new layer and draw a white rounded rectangle with 209×26 px dimensions. Now cut the bottom corners.

Step 10:
Under Layer Style(Layer > Layer Style) add a Drop Shadow, Gradient Overlay blending options to your white rounded rectangle layer.

Step 11:
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 for color. In a new text layer type the name of your section box.

Step 12:
In a new text layer add your content with a font size of 13 pt.

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

---

7 Responses to “Create a White and Blue Template in Photoshop”

1. Tutorial Effect Says:
   February 17th, 2008 at 10:15 am

   Nice looking template, thanks for submitting it to my site.

2. Chase Says:
   February 18th, 2008 at 4:18 am

   Good looking template! Great tips, thx!

3. Katalog Stron Says:
   February 20th, 2008 at 8:16 am

   Template looks really good! Regards.

4. kaynak Says:
   February 23rd, 2008 at 11:03 am

   very thanks

5. Professional Web Design Says:
   March 9th, 2008 at 5:29 am

   Nice one!

6. bob Says:
   April 5th, 2008 at 11:10 am

   E6hgpN hi nice site thanks http://peace.com

7. googlaaaa Says:
   April 5th, 2008 at 4:27 pm

   hpmFIJ http://googlaaaa.com/

Add a Comment

Name (required)

Mail (required)

Website