Step 1

CRTL+N and create a 1024px X 768px file. Fill the background with the color showing in the image below. Grab the Rectangle Tool and draw a rectangle with take about half of the page with the color given below and rasterize it, rename this as top layer. Using Lasso Tool, draw the shape and press delete.

Step 2

Create new layer belor the top layer. Grab the Brush Tool and with the soft mechanical 100px, #484536 color. brush out the shape of the shadow for the top layer. You may need to zoom in and smudge it to get the better result. Apply 1px outside whtie stroke to the top layer. Then, Apply Pattern Overlay with Soft Light Blend Mode, Rust Flakes.

Tips: try to make the shadow “no fixed as it may make it look not natural. You need some times for this part to make it looks natural.

Step 3

Create a layer above the top layer, ALT and click between the layers to create mask. With the same brush set, #d8ce9d color, brush a long the edge of the top layer.

Step 4

Create a rectangle and CTRL + T then rotate to the angle shown below. CTRL + T again and this time select Wrap and drag the bottom right corner as shown below.

Step 5

Using the Pen Tool, draw out the shadow below the rectangle shape. Apply Gaussion Blur 5px and set the layer blend mode to Multiply.

Tips: Brush out the little shadow at the top to enhance the effect.

Step 6

CTRL + Click on the rectanlge to bring out the selection. Goto select > Modify > Contract > 10px. Create a new layer above it and fill it with white color. Now, place any photo you like and simply create a mask with the new layer we created just now. Then, using the Polygonal lasso Tool to draw the tab and create a new layer above then fill with white color and set the Fill to 47%. Apply 1px inside stroke #e4dec3 and set the opacity to 66%.

Step 7

Brush the shadow for the tab.

Step 8

Type out the Site title. I am using Bernard MT Condensed with #7a745e 72px. Type out the rest of the title. Rasterize the type. Grab the Erase Tool and with the TB_Grunge Brush. Randomly erase the font to make the effect.

Step 9

using the Pencil Tool, zoom in and draw out the arrow shape and then erase it like what we do with the title we made.

Step 10

Using the same technique, Create the Search input field and also the RSS icon.

Step 11

For the footer, use the same technique to create the top layer in Step 1 & 2. Apply Inner shadow, Blend Mode Multiply, 20% opacity, 90 °, Distance 5px, Choke 0, Size 10px. Color Overlay 100% #302e26. 1px outside white stroke with 18% opacity. Well, we are done now, Simply add in 3 rectangle and apply Drop Shaow Effect.

• Font (sizes, colors, type and style)
• White space ( spaces, padding and line height )
• Arrangement ( structure each sections organized )

The main goal of a magazine site is to present useful information to the readers. So, we can expect there will be lots of text on the page. In this case, heavy graphic layout is not recommended. It not only will slow down the page loading time, more bandwidth but also scare the users away from the page which flood with text.

Result

Before we get started, let’s check out what we are aiming for in this tutorial. We are going to use pixel-like text base concept in this design.

Step 1

Open new document (CTRL + N) with 1024px width and 960px height, RGB color. CTRL + R to bring out the ruler. Draw the guide lines follow the sample image. The maximum width we are going to use is 960px. We will use 240px for the left column, 468px for the middle column and 212px for the right column. There will be 20px space between each of them. We will split the middle column into two.

Step 2

Create a new folder and name it as “header”. I use this font for the title. Type the title you want or simply follow mine. I use 48px font for this. Change the color of the first alphabet into #f1b90b. The rest keep it in black (#000000) color. Double click on the text layer, bring out the blending option. Apply 1px outside stroke with grey (#747474) color. Apply black to white Gradient with Soft Light Blend Mode. Then, hold CTRL and left click on the text layer thumbnail to bring out the selection. Go to Edit > Stroke > 1px , white, inside. Grab the rectangle tool and draw a rectangle above the title with color #464646. Apply 1px inside stroke with black color.

Step 3

Create a new folder and name it as “nav”. Grab the rectangle tool and draw a horizontal navigation bar, color #e1e1e1. Apply 1px inside stroke, color #c8c8c8. Type some dummy text. I am using 11pt Tahoma, grey (#7e7e7e) color for inactive link and black color for active link. Draw a rectangle for the active tab and draw the border using pencil tool. You should get the result shown in the sample above. Then, draw a horizontal white color line and place it 1px inside the navigation bar.

Step 4

Subscriber number (readers) is very important for a magazine site. It determinates the popularity of the site in some points. So, I decided to make it big enough and put at the top right of the site. I am using the same technique in Step 3 to achieve this. I am using 30pt Tahoma for the reader’s number.

Step 5

Create a new folder, rename as “feature”. We are going to use this section to display the headline stories. I am going to use the same technique in Step 3 to create the heading and title. What we need to pay attention here is the image size. I am using 220px X 100px where is nearly 2:1 ratio. This is a good option because when it comes to the detailed articles, the image can be resized easier and better.

Step 6

We can now create all the sections by using the same technique in Step 3. Remember to create a new folder for each section. This is to let you modify the layout easier in the future.

Step 7

For the icon we created for the author, refer to the image above. I am using 10pt Tahoma for that, so the icon should match the font size as well. I create 2 guide lines in order to draw the icon. In this stage, you need to zoom into 1200% to draw using 1px pencil tool. We can use the same technique to create the tabbing area icons for the top stories and recent comments.

Step 8

Member login is consider a must have section for magazine site. So, I put it on the top right of the site for easy navigation. I am using 10pt Tahoma for the typing and the similar technique we used before to create the button. You may notice that there is a 1 pixel white color stroke in between the outline and inner gradient. That’s to create the sharper look and feel for the buttons. To create the button, draw a rectangle using rectangle tool and fill it with light grey (#f3f3f3) color. Apply 1px grey (#cccccc) color inside stroke. Apply white to black gradient overlay with soft light blend mode. For the 1 pixel white color stroke, you can zoom in and draw using pencil tool or CTRL+ left click on the rectangle button, bring out the selection. Go to Select > Modify > Contract > 1px. Then create a new layer above the button. Goto Edit > Stroke > 1px inside white color stroke.

Step 9

We use the similar technique for in the footer part. Here, we create a button that allows the user to jump to the top of the page. This is pretty useful while there is a long article.

Conclusion

There are a few things we can conclude from the layout.

Font

You may notice that I’m only using 2 types of fonts for the whole design, Tahoma and Arial. I used Arial for the title and Tahoma for the content. It make the site looks professional, balance, neat and clean. I am using Anti-Alias None for the dummy text so that you can have the exact outcome when it is converted into HTML.

Color

I use grey color for the whole site and only 2 colors for the text links. This may create the consistency and user can browse easily.

Line Height

This is more to CSS / XHTML side. When I am using 12px font, usually the line height will be 18px – 22px. It’s depending on your preferences but never less than that.

Thank You

Thank you to follow this tutorial and I hope it can give you some tips in designing a site like this. I was wondering anyone interested to purchase a WordPress Theme like this? Let me know. Any feedback about this tutorial is welcome.

Recently I am busy with my company product video (yes, again…) So, I take some free time to create my first ever web layout Photoshop Tutorial. Since this is my first time, I bet that it must be some error or unclear section. Please comment as I can make it better for my next one. Thanks.

Step 1

Ok, lets start then. Create a new document with 800 x 800 px, 72 resolution, RGB. Background color set to #434343.

Step 2

Grab the text tool, type your site name and I use “YourSite” here. I use moonstar with 48px, white. Place it nicely on the top left of the page. Press F5 to bring out the brushes setting. Check the Shape Dynamics and use a 3 px hard brush. Create a new layer above of the text layer and name as line_layer. Grab the pen tools and select path. Draw the wave as shown below. This is very depend on you and how the shape you like. After draw a line, right click and select stroke path, check the simulate pressure and stroke with brushes.

Step 3

After complete the desired shape or wave, double click text layer or right click and select blending option. Check Outer Glow,color #009cff,Opacity 80%, Size 6px, Blend Mode Screen. Right click the text layer and copy the layer style. Paste into the line_layer. CTRL+J to duplicate the line_layer to make the glow lighter. Create a new group and name it as Logo and copy all layers except the background layer, into the group.

Step 4

For the top navigation bar, I use the simple but nice custom symbol as shown. To match with the theme, here are what I use. For the activated icon, simply paste the layer style that we had copy just now. I use 11pt Tahoma. Grab the Rounded Rectangle Tool, with 4px radius, draw a small shape (#2f2f2f)that can cover the icon and text as shown. Bring out the blending option. Use Stroke, 1px inside white stroke with 45% opacity. Inner Glow, normal blend mode, 45% opacity, 4px size, black. Put all these layer into a new group named as Nav.

Step 5

Grab the Rounded Rectanlge Tool, draw as shown below, about 2/3 of the page. Apply the blending option shown.

Step 6

Draw the shape shown below with the rectangle tool using color #2581de. Create a new layer below the blue layer and use the Polygonal Lasso Tool draw out the shape to make the drop shadow. With the new empty layer selected, fill it with black, Goto Filter > Blur > Gaussian Blur > 4px. Type the date with Tahoma, Bold, 30pt. and the month and years with Arial 9pt.

Step 7

Grab the Line Tool and draw a line. CTRL+J to duplicate the line. Press the up button the bring it 1px up. Use the color shown.

Step 8

You will get something like this. Put all layers into a new group named Body.

Step 9

For the sidebar, It is simple and the technique is excatly same with what we do for the logo. Here is this. For the gallery boxes. Appy this blending option. 1 inside white stroke 30% opacity. After all done, put all layers into a new group and name it as SideBar.

Step 10

Goto the Nav group and create a new layer, put it at the bottom in the group. Grab the Rectangle Tool and draw the shape. Apply the blending option shown below.

Step 11

Create a new group and name it as Footer. Draw the rectangle with the blending option applied.

12. Hurray! DONE!!!

Hope you enjoy this. Any comment will be welcome!