In this tutorial, we will create design blog layout with lots of 3D details using Adobe Photoshop. This layout can be used for a tutorial site and also personal site. This layout has some of the most popular feature in current web design trend, such as post thumbnail and featured image. we also giving the opportunity for free download source file, you can use this as personal or commercial use.
Before move on, let’s take a look at the design that we’re going create here. Click on the image to see it in full size.
Step 1: Create Main Background
Create new file with size: 1100 x 1600 px.
Before we move see I’d like to start by creating groups. Putting every layer in appropiate groups will help us works effectively and help the programmer to easily code the final psd .
Fill background with color #656565.
In this step, we’ll change the background color. Click Add adjustment layer icon and choose Hue/Saturation. Activate Colorize option and move three sliders available until we find color that we like.
At this point, you might ask “Why using Hue/Saturation. Why not shoose the color in step 3”. The reason is with this technique you can easily change the color. All you have to do is just open the Hue/Saturation and move the silder to change the color.
We’ll add stripe to our background. You can create stripe pattern in Photoshop but I’ve found a free tool to create stripe. Go to stripegenerator.com. Change the settings available. After you find nice stripe pattern on the preview image, click download button. You’ll have the pattern in png file type.
Open the png pattern file in Photoshop. Click Edit > Define Pattern. Name the stripe pattern if you want then click OK.
Return to our blog design file. Create new layer. Click Edit > Fill. Choose Pattern for its content. Click small down arrow to open available pattern and choose stripe pattern we have just created. Click OK to start fill layer with stripe.
Set Layer’s Blend Mode to Overlay and change Opacity to 8%.
Step 9: Page Background
Activate rounded rectangle tool. Set radius to 10 px and foreground color to #7f7f7f. In the middle of the image, drag to create a rounded rectangle. Put this shape inside base group.
Add these layer styles to give it a 3D look.
Step 11: Create Main Menu Button
Create a rounded rectangle on top. Put it inside top menu group. Add page title inside the button. Add these layer styles to the button.
Create new layer above the button. Create an elliptical selection and fill it with black. Deselect (Ctrl + D). Add Gaussian Blur (Filter > Blur > Gaussian Blur). Change layer’s opacity to 30%. This subtle shadow add more depth to the button and gives 3D impressions.
Use a pencil tool to draw 1 px white line on top of the button. Erase both ends with eraser tool.
This 1 px line is very small. You may not notice it but it does give more depth to button’s 3D appearance. You can the difference in this animated gif.
Draw another 1 px white line. This time on top of the content’s base. Erase both ends with eraser tool.
Again, spot the difference with and without that 1 px line in this gif animation.
Repeat previous steps to create another buttons.
Step 18: Content and Sidebar Background
Draw smaller rounded rectangle for content background. Use color: #c4c3c3. Add these layer styles.
Now, select right side for sidebar.
Click Add Adjustment Layer icon and choose Levels. Use setting shown below to make selected area lighter. This will separate it from main content area.
Double click Hue/Saturation layer and add Inner Shadow. This will add another depth the main content area and make it seems taller.
Step 22: Create Featured Content
Create a white rounded rectangle and use these Layer Styles.
Add picture above shape, convert it to clipping mask by pressing Ctrl + Alt + G.
Draw black rectangle shape. Convert it to Clipping Mask (Ctrl + Alt + G). Add post on it.
Next, we will add Featured Content banner. Draw a rectangle above the picture. Click its right side to add a point. Select the point using direct selection tool and move it to right. Write FEATURED CONTENT inside the shape. Draw another shape under the banner and use darker color.
Ctrl-click banner and fill it with black. Move it few pixels down and add Gaussian Blur. Erase unneeded areas creted from blurring process and change layer’s opacity to 60%.
We will add navigation arrow to move to next or previous featured post. Create a black circle with opacity 35%. In its center draw a white rectangle. Rotate it 45 degree and change its opacity to 35%. Duplicate rectangle path, move it few pixels right and select subtract.
We have just created navigation arrow for previous post. To create next post, duplicate the arrow by Alt-drag it to the opposite side and rotate it 180 degree.
Step 29: Create Post
Draw a white square shape. Add Layer Style Stroke. This shape will be container for post thumbnail.
Add image above square shape. Press Ctrl + Alt +G to convert it to Clipping Mask.
Next to the thumbnail, add some text. Add post title, post info (category, author’s name, number of comments). Finally, add short post content.
Draw a rounded rectangle under the post. This will be read more button. Add these layer styles.
I want to add a subtle 3D effect to the thumbnail image. Create ellips selection under the thumbnail image. Fill it with black. Deselect and add Gaussian Blur. Change fill layer to 20%. Alt-drag this shadow and put it on top side of the thumbnail.
Next, we need to add separator between each post. Activate brush tool. Open brush panel, set brush size to 1 px and increase spaing to 955%. Shift-drag to draw thin dotted line under the post.
In Layers panel, select all post layers. Right click and choose Convert to Smart Object. This way, our post is now in one layer. Alt-drag to duplicate post and fill the content area.
If you want to change something on the post, maybe make the read more bigger. You can do that easily. Double click post layer to open it in new Window. Create some changes and click File > Save. Once you return to original file, every read more button will also change.
Step 36: Create Separator Between Featured Content and Posts
Now, we’ll create a separator between featured content and post list. Create new layer and draw two 1 px lines. Use color #898888 on top and #d6d5d5 under it. The difference of brightness between these lines will gives a 3D look. You can see the result below.
Add layer mask and paint both ends with black to hide them.
Above the line create new layer. Create elliptical selection and fill it with white. Deselect and add Gaussian Blur. Select bottom part and press delete. Change layer’s opacity to 30%. This will add another subtle 3D effet on the image.
Step 39: Add Social Media Icon
Search for free social network icon. I suggest iconfinder because it has a friendly interface.
Download icons and put it on top of sidebar.
Draw a rounded rectangle and add these layer styles.
Add another rounded rectangle shape, this time shorter. Add these layer styles. Add text subscribe on this button.
Repeat step 38 to add a separator between each sidebar widget.
Step 44: Create Ad Spot
Create a rectangle for ad spot. Use color #d7d7d7 and add Stroke.
Draw another smaller rectangle for smaller ad spot.
Step 46: Create Other Sidebar Content
Add another content on the sidebar such as Post List and some text. Don’t forget to put separator between each widget. For the separator you can just duplicate earlier separator by Alt-dragging it.
Step 47: Add Logo
Let’s insert the logo. Grab tutoriallounge’s logo from here. Put it on top right of the image. The logo’s color is unique, dark and light blue. That different gives me an idea to make it looks like a sticker.
Create ellips selection behind the logo. Fill it with black. Deselect (Ctrl + D). Add Gaussian Blur and reduce its opacity.
Create selection with shape like shown below. Fill it with black, deselect, and add Gaussian Blur. Reduce its layer opacity.
Create new layer above logo. Draw a radial white to transparent gradient and reduce layer’s opacity to 30%. This will add a subtle light source on top of the image.
Step 50: Pagination
Draw a white rectangle under posts list. Add Inner Shadow Layer Styles.
Add page list and page number. Between every page draw a thin line to separate them. Higlight active page number with subtle to make it different.
Step 52: Add Search Box
Search for a magnify glass icon and put it on top of the page. Next to it, draw a rounded rectangle. Dont forget to add subtle shadow under the shape and icon. Add these layer styles to the search box.
Finally, we’re done. I hope you like the end result and learn some new techniques from this tutorial. Click on the image to see it in full size.