Web Design Blog Layout with 3D Details Using Photoshop

Mohammad Jeprie Posted on 04. Jun, 2010 | Comment in!

• Tweet

• Tweet

In this tutorial, we will create a 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.

Step 1: Create Main Background

Create new file with size: 1100 x 1600 px.

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 .

Step 3

Fill background with color #656565.

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.

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.

Step 6

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

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.

Step 8

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.

Step 10

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.

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.

Step 13

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

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.

Step 15

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

Step 16

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

Step 17

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.

Step 19

Now, select right side for sidebar.

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.

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.

Step 22: Create Featured Content

Create a white rounded rectangle and use these Layer Styles.

Step 23

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

Step 24

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

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.

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

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.

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.

Step 29: Create Post

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

Step 30

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

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.

Step 32

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

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.

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.

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.

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.

Step 37

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

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.

Step 39: Add Social Media Icon

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

Step 40

Download icons and put it on top of sidebar.

Step 41

Draw a rounded rectangle and add these layer styles.

Step 42

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

Step 43

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.

Step 45

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.

Step 48

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

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.

Step 50: Pagination

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

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.

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.

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.

Author: Mohammad Jeprie

Mohammad Jeprie is a blogger, author, and graphic designer from Indonesia. He is the creative mind behind DesainDigital. You can find him in DeviantArt, Facebook, and Twitter.

4 Arcticles posted by Mohammad Jeprie