Create a White and Blue Template in Photoshop

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

Step 13:
Add more glassy blue rounded rectangle for your other sections.

Step 14:
For your content area add the same glassy blue rounded rectangle with 745 x 427 dimensions. Modify the height if you have a lot of content.

Step 15:
Now for each content on the section, add a 290 x 140 px avatar of the content. Then next to that add the title with a font size of 16 pt. Below the title add the description with font Verdana and a font size of 12 pt.

Step 16:
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 white rounded rectangle with 381×28 px dimensions just below your description.

Step 17:
Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your white rounded rectangle layer from step sixteen.

Step 18:
Now add the information of the content such as the date and category. Use font Arial with a font size of 12 pt and #0092F6 color shade.

Step 19:
Add another set of content.

Step 20:
Now add your footer under the large, glassy blue rounded rectangle.

Step 21:
That’s it your done.

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?

---

8 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/

8. Rajita -Logo Design Says:
   May 18th, 2008 at 11:40 pm

   Thanks for this simple yet very useful tutorial

Add a Comment

Name (required)

Mail (required)

Website