All in one forum  - Applications | Games | E-Books | Music, Movies & Videos | Mobile Stuff | Live Discussions | Webmaster Stuff | Many More | Community to Hang Out and Stick to
Search Today's Posts Mark Forums Read

Go Back   Home > Tutorial Section > Softwares > Adobe Photoshop
Reload this Page [Tutorial] Professional Blog Template Design
Forgot Password? Join Us!
Adobe Photoshop Post your photoshop Tutorials here.

Notices
Your link here Your link here Your link here Your link here Your link here

Your Ad Here


Rate This Thread - Professional Blog Template Design.

Post New Thread Reply
Bookmarks
 
LinkBack Thread Tools Display Modes
Old 06-14-2008, 06:13 AM   #1 (permalink)
 
KoOL's Avatar
 
User Info
Join Date: Oct 2007
Location: In You Mind
Age: 26
Achievements Posts: 10,574
Casino Cash: $1106520

Total Points: 237,091,348,803.95
Donate

Reputation: 95713
KoOL has a reputation beyond reputeKoOL has a reputation beyond reputeKoOL has a reputation beyond reputeKoOL has a reputation beyond reputeKoOL has a reputation beyond reputeKoOL has a reputation beyond reputeKoOL has a reputation beyond reputeKoOL has a reputation beyond reputeKoOL has a reputation beyond reputeKoOL has a reputation beyond reputeKoOL has a reputation beyond repute


Awards Showcase
Administrator Of the Month Of Jan 
Total Awards: 1
Professional Blog Template Design


Step 1:

Let's start out by creating a new file. I used a 1024 x 950 pixels canvas set at 72dpi, and I filled my background with a black colour.
Now insert a dark wooden background into your canvas, grab the design <here>. When you insert the background design into your canvas it should have its own layer, stretch it down at the bottom of your canvas.

Step 2:

Select the Horizontal Type Tool and set the font family to Britannic Bold (click to download) , regular, 36 pt, strong and white colour shade. In a new text layer type your website name on top of your canvas. If you want you can change the colour to #59DEFF colour shade.

Step 3:

In a new layer draw a large white rounded rectangle just below your website name. This will be the body of the template. Then under Layer Style (Layer > Layer Style) add a Stroke blending option.

Step 4:

Now create the design for the left sidebar. First make a new layer set and name it 'About'. In a new layer draw a black rectangle with 268 x 29px dimensions on top corner of your white body.

Step 5:

Under Layer Style (Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to the black rectangle layer.




Step 6:

Select the Horizontal Type Tool and set the font family to Arial, bold, 13 pt, none and white colour shade. In a new text layer type the title of your first sidebar section, in this case 'About us'.

Step 7:

In a new layer draw a gray rectangle with 268 × 116px dimensions and #E6E6E6 colour shade below the title tab of your sidebar section. Then under Layer Style (Layer > Layer Style) add a Gradient Overlay blending option.


Step 8:

Now add the content of your 'about us' section.

Step 9:

Add more sidebar sections using the same designs. In this blog I added a section for Categories and Latest Content.

Step 10:

In a new layer set titled 'Center Content' add the same section design from the sidebar on the center body.

Step 11:

Since the center content section requires more space for details, create a new layer and draw a black rectangle with 552 × 24px dimensions. Then under Layer Style (Layer > Layer Style) add a Gradient Overlay blending option.


Step 12:

Now add text details such as author name, date, type of category or anything you want to add. Use font Arial, regular, 11 pt, none, white for text colour and #59DEFF colour shade for links.

Step 13:

Add more content section on the center.

Step 14:

On the right side of your white body leave a space for a skycraper advertisement banner.

Step 15:

Now add a navigation interface above your white body. First select the Rounded Rectangle Tool and above your screen under the options palette choose Fill Pixels, set the radius to 10 px and check anti-aliased. Create a new layer and draw a rounded rectangle with 142 × 28px dimensions and #59DEFF colour shade. Make sure you position the rounded rectangle layer behind the white body layer.

Step 16:

Under Layer Style (Layer > Layer Style) add a Gradient Overlay blending option to your rounded rectangle tab layer.


Step 17:

Select the Horizontal Type Tool and set the font family to Arial, bold, 11 pt, strong and white colour shade. In a new text layer type 'Subscribe to RSS Feed'. Then under Layer Style (Layer > Layer Style) add a Stroke blending option to your text layer on the blue tab.


Step 18:

Next to your RSS tab create the same style of tab but use #767676 colour shade for colour.

Step 19:

On your layers palette select the white rounded rectangle(body) from step three. Then select the Eraser Tool with a large soft brush and erase some parts on the bottom left corner of the large rounded rectangle.

Step 20:

Now add your footer, first make a new layer set and name it Footer Design. In a new layer draw a white circle below the erased parts of the white rounded rectangle.
Under Layer Style (Layer > Layer Style) add a Gradient Overlay and Stroke blending options to the your white circle layer. Then set the layer's blending mode to Darken.


Step 21:

Now create a smaller circle with #59DEFF colour shade. Then under Layer Style (Layer > Layer Style) add a Satin, Gradient Overlay and Stroke blending options. Also set the layer's blending mode to Soft Light.




Step 22:

Finish it off by adding your navigation links at the bottom and copyright information at the other end of the footer.

Results:

Professional Blog Template Design. Click here to see the full view.

If you found the above Photoshop tutorial helpful, please help to share this with others by using the 'digg' button below.


For Download Links U need to Press Thanks Button

Please don't PM me For Posts, Request and Not Working Threads. Use Button.
KoOL is online now  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply
Click here to Donate to remove the Adverts.
Your Ad Here
Post New Thread Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
[Tutorial] Design a Colorful Template Design in Photoshop KoOL Adobe Photoshop 0 06-14-2008 06:09 AM
[Tutorial] Professional, Clean and Easy Website Design KoOL Adobe Photoshop 0 06-14-2008 05:52 AM
[Tutorial] Design a Red and White Template in Photoshop KoOL Adobe Photoshop 0 06-14-2008 05:48 AM
Advanced IP Network Design (CCIE Professional Development) kamrul Ebooks,tutorials & Other Stuff 0 04-23-2007 05:39 AM



Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
vBulletin Skin developed by: vBStyles

RapidShare Links PhazeDDL Warez
PhazeDDL Warez