Warning: Illegal offset type in isset or empty in /home/tripwire/public_html/wp-content/plugins/winnr/model/excerptHandler.php on line 138

web-design-tutorial

This post pick up on the previous and first part of a very detailed tutorial for Creating a Clean and Elegant Blog Design with Photoshop, Part 1. This is part 2 and it will be covering steps required in Photoshop to create the Blog Front Page Post Section.


ElegantThemes
ThemeForest

AdvertisementWe pick up just where part 1 ended and the result of part 2 will be looking like this.

web-design-tutorial

This tutorial now consists of:

Download the source file

Make sure you get a copy of the PDS source file before you start working on the tutorial. License: Creative Commons License.

Lets get started…

Step 10: First thing you need to do is to load up the PSD you created in part one or get the one available for download above. Web designs tend to become messy and complex in Photoshop because of the many elements put into separate layers. One way to keep an overview of the layers is to use groups. Lets start creating a Group called “PART 1 – Header” by clicking on the folder icon as shown below. Add your layers to the group simply by pulling them onto it. Add another group called PART 1 – Content background and put only the content layer into it. Close both PART 1 groups by clicking the arrow next to it. Then create a group called PART 2 to be used for new layers. Generally it is a good idea to use sub-groups simplify even further. Part one layers have been divided into MENU, LOGO and HEADER groups in “design – par2.psd” to show this. Simple but very effective and key to reusing design elements like fx. “Continue reading…” buttons consisting of more than one layer in multiple location.

web-design-tutorial

Find more info on layers in this great article on designtutorials4u.com: Photoshop Layer Effects Explained

Content and sidebar Background

Step 11: Next thing you have to do is clearing the guides from part 1. Do this in the View menu. Then you have to create new guides to help aligning the elements we are adding. To add guides on exact locations use the View->New Guide… feature. Add horizontal guides at 25px, 50px, 338px, 625px, 650px, 670px, 690px and vertical at 120px, 650px, 670px….

web-design-tutorial

Then create layers called “Featured Content back”, “Content list back” and “Sidebar back”. You may group these layers into a group called “BACKGROUND CONTENT AREAS”. Fill the content areas with white color on separate layers as shown here and add same drop shadow as used for header in part 1.

web-design-tutorial

Step 12: Add featured article/post layout. I will use content that is related to design and development subjects  but really use something that match your blogging niche. First add group for all post content elements called “CONTENT AREA CONTENT”. Then add group called “FEATURED POST”. Add any title you may want using Arial, regular, 22pt and color #444444. Location shown below. Then add post meta info below title as shown below using  Arial, regular, 12pt and color #797979 and #cc9900. Then add any good looking featured post image with dimensions 575x260px.

web-design-tutorial

Below the image add some dummy text Arial, regular, 12pt and color black. You can use text generators for this fx. lipsum.com. Don’t let the text be to long and make it end just over 570px from the top. You should now hide (NOT CLEAR!) the guide to see how the design looks. Use [Ctrl]-H or view menu for this. Then finally lets add a grey inside stroke on the image.

web-design-tutorial

Step 13: We will now add a button to allow readers to continue reading the post. First add group called “CONTINUE BUTTON” inside “FEATURED POST”. Add guides as shown on image below and text using Arial, regular, 12pt and color #797979.

web-design-tutorial

Then add layer called “continue-reading button”. Select the area between the guides and fill it with color #eeeeee. Then apply gradient style as shown below.

web-design-tutorial

In the final implemented theme it would make sense to allow the blog owner to configure to have zero to fx. 3 featured posts. To keep this design simple only one is shown.

Step 14: Using same techniques as used for the featured articles now add list of posts below the featured post as shown below. Images are 100x100px and have stroke as used above. Reuse articles to keep workload down and copy “CONTINUE BUTTON” created earlier. Also make sure the articles are all created in groups inside “CONTENT AREA CONTENT”. Download PSD for further details on this part if needed. In the final theme implemantation I would expect 8-10 posts in the lists but to keep it manageable here in Photoshop I have limited the number to 4.

web-design-tutorial

Step 15: As the last step in part 2, now lets add some page navigation. Add some guides as shown below to guide placement of navigation buttons. Each button is 25px with 1px internal black stroke. Colors used are #bdbdbd, #797979 and white. Space between buttons is 10px.

The result

We have now added the blog front page content area. This is the result you should have by now (see layers screenshot as well below final result image). Part 2 of the tutorial will end here and the next part will focus on completing the design for sidebar and footer.

web-design-tutorial

Your layers panel should look more or less like this.

web-design-tutorial

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares