Designing Cool Interface for Magazine Portal

This is one of the few Web Interface tutorials I did for 10Steps.SG. We shall go through some basic considerations and plans to take before we do the actual designing for a Magazine portal. You may find this tutorial useful for your upcoming projects.

Preview of Final Image

The texts and images are copyrighted to 10Steps.SG and their respective owners. You CANNOT copy the whole tutorial, either in English or translate to another language.

Let us start off with wireframes for the layouts. A simple one will do, just to get an idea of the positions for each element. Identify the sections to form the main navigation bar and latest items to showcase on the main page.

Create a document of size 960×1200 pixels. This is a good size for users with screen resolution set to 1024×768 pixels. Set the foreground color to #85848c and background to #414048. Make a Radial gradient like the one shown below on Background layer.

Create a new layer and rename it as Header. Using the Pen tool, make a cap-shape as shown in the example. Right-click on the Header layer and choose Blending Options. Check on Gradient Overlay and make the gradient (from top: #242329 to bottom: #363640).
Quick Tip: Press on SHIFT key to maintain a straight path when using Pen tool.

Create a new layer and rename it as Containers. Draw in the shapes with color #2e2d33 and position them according to the wireframes you done right at the start.

Type in the draft titles, navigations and texts.

Create a new layer and rename it as Nav Divider. Draw a vertical line with Pencil tool, set at 1pixel and color #000000. Draw another 1 pixel line to the right with color #6e6f74.

Click on Edit in Quick Mask Mode. Pick on the Gradient tool and choose Reflected Gradient. Do a small reflected gradient like I did below.

Exit the Quick Mask Mode and you will get a selection. Press DELETE and you will get a nice divider with faded edges.

Create a new layer and rename it as Highlight. Draw a Rounded Rectangle shape with color #242329. Right-click on the layer and choose Blending Options. Check on Inner Glow and set the mode to Normal, color to #000000, opacity to 30% and size to 5.

Create a new layer and rename it as Search Box. Repeat the similar step you did earlier for the Highlight with color as #504f57.

Make a button with vertical gradient (from top: #b8b7c5 to bottom: #95949c).

Place in the necessary texts and seach icon.

This is roughly what you done so far. Let us move on to the center slideshow area.

Using Pen tool, draw a shape with rounded edges on the top left and right corners. Notice that both sides are slightly slanted inwards. Rename this layer as Slideshow Border.

Create a rounded rectangle selection same size as the Header and press DELETE on Slideshow Border.

Draw in two smaller rounded rectangles on both sides of Slideshow Border.

Merge all the black shapes into one single layer. Right-click on the layer and choose Blending Options. Check on Gradient Overlay and set the gradient like I did below (from left: #8d8e92, #cbcbcd, #323137, #c3c5d4). Check on Outer Glow and set the mode to Normal, color to #000000, opacity to 40% and size to 5.

Draw a small simple arrow pointing outwards on each of the two slideshow buttons.

So far so good. Let us move on with creating the border for images and thumbnails.

Create a new layer and rename as Thumbnail Border. Draw a simple hexagonal shape like the first one on the left below. Make a square selection at the middle and press DELETE. This is the size of the thumbnail you set to be. Then right-click on the Slideshow Border layer you done earlier and choose Copy Layer Style. Select the Thumbnail Border layer and choose Paste Layer Style. You will get something like the last shape on the right below.

Create a new layer above the Thumbnail Border and draw a 1 pixel border around it. Make a top-down gradient (from top: #ffffff to bottom: #666666). Do the same for the inner side of Thumbnail Border but reverse the gradient that is all.

Place the Thumbnail Borders around all the image placeholders. You can all fill in some draft text content.

Now comes to the title. Set the color to #000000 and make a Drop Shadow with color #ffffff, angle to 90 degrees, distance to 1 pixel, and size to 2 pixels. Apply this Layer Style to all the main and sub titles. You can also add the necessary icons, check out this post for some free ones.

We are now done and ready to put in the images.

And there you have it!

Lastly, this is how the site will look like when displayed on wide-screen monitors. It is often an overlooked consideration during web design. Hope you like this tutorial. Thanks!