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!

Other Design Articles You May Find Interesting

70 Comments | Write a Comment

  1. Lamiai says:

    Thats amazing! Thank you so much
    But i have a question, we did that template but can how we publish that ? and how can we edit that in dreamweaver ?

  2. TheShadow says:

    Nice and Clearly explained.well done

  3. nzhul says:

    Hey pretty nice layout!
    You have missed a lot of steps … but i am smart enough to get it done … :D

  4. radyo says:

    Thank you! nice post :)

  5. Texture Plus says:

    this was easy to follow step by step tutorial, excellent…thanks a lot.

  6. dattai says:

    very coool

    Thanks alot

  7. srinivasan says:

    very nice tutorial… easy to adopt

  8. Маша says:

    Bro, do you design websites? It would be interesting to look at them… You really have a talant!

  9. laptop says:

    thank you for this excellent tutorial.

  10. Very nice work. This tutorial would be very handy for a lot of new web designers out there. Great job. Keep it going….

    All the best,
    3TurtleStudios

  11. samoedra says:

    good design very nice

  12. Imon says:

    Amazing layout, nice work!

  13. Didim says:

    very good, looks perfect. enjoyed reading

  14. you did really professional design an interface of Magazine, you sharing all tips and tricks step by step.

  15. hitesh says:

    hey nice tut really nice because i like the flow of your design are you using any standalone software for wireframing or do that manually in photoshop

    • Johnson Koh says:

      Hello Hitesh, actually I am using Illustrator for doing a fast wireframe for clients since the concept always change during the initial phase of development. But of course, you can use any tool as long as it is comfortable ;) Thanks for liking this tut!

  16. Wow!
    Just amazing! Really very useful tutorial on the use of photoshop.
    Thanks alot for that!

  17. Lamiai says:

    thats awesomeee! & i could do it
    but i have a problem
    how can i make this psd to css or html ?

  18. budicokro says:

    great tutorial.
    now i can create web psd template.
    but unfortunately i don’t understand how to use it. :(

  19. Arshad says:

    Johnson;

    This tutorial is amazing.Thank your very much for your effort on this tutorial.

    Inspired alot:)

  20. Amazing design and the steps are really easy to follow, it will be nice to have a tutorial of PSD to HTML and CSS.

    J

  21. mate says:

    mate, its nice, but i dont see a FULL SIZE preview, thats why a have to leave know, because thumbs are nothing…

  22. Tom Ross says:

    Nice tutorial. I love the 3d effect you’ve created.

  23. Tirath says:

    Awesome web layout with nice step by step tutorial thanks so much for posting & sharing it
    keep up good work
    God Bless you :-)

  24. Jim says:

    Great Joy! I learned a lot. Next I need to know how to convert the Photoshop file to web blog or site.

  25. Akhil says:

    hands off dude…

  26. So cool man, loved it, great work!

  27. John says:

    I cant wait to dive in further to this site, this is the first quick tut ive been to at gurus… and wow, thanks for the tips. very well done!

  28. Richie says:

    Simple yet brilliant. Amazing tutorial, John

  29. Excellent! Just loved it!

Follow My Twitter Subcribe Full RSS