Web Design Blog Layout with 3D Details Using Photoshop

Author: | Posted in Photoshop 15 Comments

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.

Preview

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.

Create Blog Layout with 3D Details

Step 1: Create Main Background

Create new file with size: 1100 x 1600 px.

Create Blog Layout with 3D Details

Step 2

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 .

Create Blog Layout with 3D Details

Step 3

Fill background with color #656565.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 4

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.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 5

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.

Create Blog Layout with 3D Details

Step 6

Open the png pattern file in Photoshop. Click Edit > Define Pattern. Name the stripe pattern if you want then click OK.

Create Blog Layout with 3D Details

Step 7

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.

Create Blog Layout with 3D Details

Step 8

Set Layer’s Blend Mode to Overlay and change Opacity to 8%.

Create Blog Layout with 3D Details

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.

Create Blog Layout with 3D Details

Step 10

Add these layer styles to give it a 3D look.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

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 Blog Layout with 3D Details

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 12

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.

Create Blog Layout with 3D Details

Step 13

Use a pencil tool to draw 1 px white line on top of the button. Erase both ends with eraser tool.

Create Blog Layout with 3D Details

Step 14

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.

Create Blog Layout with 3D Details

Step 15

Draw another 1 px white line. This time on top of the content’s base. Erase both ends with eraser tool.

Create Blog Layout with 3D Details

Step 16

Again, spot the difference with and without that 1 px line in this gif animation.

Create Blog Layout with 3D Details

Step 17

Repeat previous steps to create another buttons.

Create Blog Layout with 3D Details

Step 18: Content and Sidebar Background

Draw smaller rounded rectangle for content background. Use color: #c4c3c3. Add these layer styles.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 19

Now, select right side for sidebar.

Create Blog Layout with 3D Details

Step 20

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.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 21

Double click Hue/Saturation layer and add Inner Shadow. This will add another depth the main content area and make it seems taller.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 22: Create Featured Content

Create a white rounded rectangle and use these Layer Styles.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 23

Add picture above shape, convert it to clipping mask by pressing Ctrl + Alt + G.

Create Blog Layout with 3D Details

Step 24

Draw black rectangle shape. Convert it to Clipping Mask (Ctrl + Alt + G). Add post on it.

Create Blog Layout with 3D Details

Step 25

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.

Create Blog Layout with 3D Details

Step 26

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%.

Create Blog Layout with 3D Details

Step 27

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.

Create Blog Layout with 3D Details

Step 28

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.

Create Blog Layout with 3D Details

Step 29: Create Post

Draw a white square shape. Add Layer Style Stroke. This shape will be container for post thumbnail.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 30

Add image above square shape. Press Ctrl + Alt +G to convert it to Clipping Mask.

Create Blog Layout with 3D Details

Step 31

Next to the thumbnail, add some text. Add post title, post info (category, author’s name, number of comments). Finally, add short post content.

Create Blog Layout with 3D Details

Step 32

Draw a rounded rectangle under the post. This will be read more button. Add these layer styles.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 33

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.

Create Blog Layout with 3D Details

Step 34

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.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 35

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.

Create Blog Layout with 3D Details

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.

Create Blog Layout with 3D Details

Step 37

Add layer mask and paint both ends with black to hide them.

Create Blog Layout with 3D Details

Step 38

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.

Create Blog Layout with 3D Details

Step 39: Add Social Media Icon

Search for free social network icon. I suggest iconfinder because it has a friendly interface.

Create Blog Layout with 3D Details

Step 40

Download icons and put it on top of sidebar.

Create Blog Layout with 3D Details

Step 41

Draw a rounded rectangle and add these layer styles.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 42

Add another rounded rectangle shape, this time shorter. Add these layer styles. Add text subscribe on this button.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 43

Repeat step 38 to add a separator between each sidebar widget.

Create Blog Layout with 3D Details

Step 44: Create Ad Spot

Create a rectangle for ad spot. Use color #d7d7d7 and add Stroke.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 45

Draw another smaller rectangle for smaller ad spot.

Create Blog Layout with 3D Details

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.

Create Blog Layout with 3D Details

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 Blog Layout with 3D Details

Step 48

Create selection with shape like shown below. Fill it with black, deselect, and add Gaussian Blur. Reduce its layer opacity.

Create Blog Layout with 3D Details

Step 49

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.

Create Blog Layout with 3D Details

Step 50: Pagination

Draw a white rectangle under posts list. Add Inner Shadow Layer Styles.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Step 51

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.

Create Blog Layout with 3D Details

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.

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Create Blog Layout with 3D Details

Final Result

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.

Create Blog Layout with 3D Details

Download Final PSD Tutorial

Comments
  1. Posted by Calgary web design
  2. Posted by Hermitbiker
  3. Posted by Wael
  4. Posted by Multyshades
  5. Posted by Mohammad Jeprie
  6. Posted by Mohammad Jeprie
  7. Posted by Firepixel.com
  8. Posted by Muhammad Ahsan
  9. Posted by Philwebservices
  10. Posted by ranggaw0636
  11. Posted by ilham
  12. Posted by deden
  13. Posted by ranggaw0636
  14. Posted by Obi Mnaohonin
  15. Posted by grammar

Add Your Comment