Design a clean sports web layout in magazine-style with Photoshop

Posted by vkdt at Friday, May 22, 2015

I spend my days developing websites, improving WeGraphics and playing football. Well, I’ve tried to mix these three activities designing a blog-magazine style layout, perfect for an on-line football/sport community.
This kind of websites generally are focused on the content because they should provide a lot of information to the readers and in this case I’ve choosen to bring out all the contents (the articles) giving more relevance to images and headings. The reason behind the choice of using large images is the direct consequence of my love for this sport: browsing a football-related website I need images, pictures, figures, colors, videos… I want to see my favourite champions.

Do you need a flexible Magazine-Style WordPress Theme? Don’t wait, download it, just $7!

From psd to html/css…

In this first tutorial I’ll show you how to realize the layout in Photoshop. In the second article of the series you can learn how to code this layout, creating a functional html/css site layout from scratch. So, after reading how to design a good magazine template in Photoshop, take a look to “Converting a clean magazine-style PSD template to HTML/CSS.”

Below you can take a look to the final result of our efforts.

The Final Result

A grid-based magazine web layout with a clean design and a nice look to engage the visitors.

DOWNLOAD PSD TEMPLATE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.

Step 0 – The canvas

Let’s start with Photoshop. Create a new document 1200×2100 pixels with a resolution of 72 pixels/inch. In our previous tutorial we used the 960 grid template (12 Col Grid), for this layout we want to design within 1000 pixels so we have to add a column in order to create a custom grid. To enhance your grid, I suggest to use Photoshop’s guides (View>New guide).

Step 1 – The background

Fill the background layer with the color #eee. Draw a rectangle on the top of the page (using the Rectangle Tool, color #ffffff) and add a pattern overlay, I’ve used one of our ‘Soft Grunge Patterns’ to add the grid effect.

Now, add a new layer and, using the Rectangular Marquee Tool, this time draw a rectangle and fill it with the black color. Right-click on the rectanlge and choose ‘Free Transform,’ then switch to ‘warp mode’ and now modify the shape as shown below.

Add a ‘Gaussian blur’ filter in order to obtain the following result.

Positionate the layer just created below the white rectangle to have a good shadow effect.

Create a new layer (Ctr+Shift+n) and, with the help of the Single Row Marquee Tool, add two 1px lines as shown below.

Now we want to add a little detail. Open a new 500×500 pixels document and using the pen tool draw a football ball (you can use an image like the following to trace a good ball: Stock photo on Sxc.hu: football). Copy and paste it in our template document set a low value of opacity and positionate it just under the header background.
Note that I’ve traced only the black pentagons.

Step 2 – The header

Now we fill the header with some elements, such as the logo and the search bar.

In order to add a simple, but nice, logo we’ve used the font Harabara, for the rest we will use ‘Lucida Sans’.
Use the Horizontal Type Tool and add a first string (color #dbdbdb) as shown.

Add a second string changing only the color to #f2f2f2.

Add a third string, this time color to #000000.

Add a new rectangular shape (color #000000) with a slogan and the input box for the search as shown.

Now design a minimal icon for the search using line tool (Weight: 5px) and Ellipse Tool.

How to draw the circle for the lens?Choose the Ellipse tool, hold down Shift and use the mouse to draw a perfect circle. Now set the fill to 0% and add a 5px white stroke (from styles) to convert the circle in a ring.

Add two simple buttons, draw two rectangle for this and use the following colors: #97bd0e, #029de0 and #ffffff (for the text). Add also a Drop Shadow (from styles) to the text.

Step 4 – Featured articles

With the help of the guides design a white rectangle and add the style (Drop Shadow and Stroke) as shown.

Append a good image and trace a new rectangle for the title, add also a line and a little “badge” for the category (remember we are using ‘Lucida Sans’).

Repeat to add other nice boxes with featured articles, change the color of the badge by category.

Step 5 – Other articles

Following the same criterion of the previous step you can create a clean section with other important article divided by category. Take a look to the image below to understand how to create a list of articles with an alternate background (use Line Tool for the 1px grey lines).

Step 6 – Footer

We use, as usual, the Rectangle Tool and the Horizontal Type Tool to create a simple menu for the footer, also in this case a proper use of the guides could be useful.

A nice and simple illustration in the footer can make the difference ;-) For this reason we add a circle in order to reproduce le midfield’s lines, where we’ll add the credits. This circle is created through the Ellipse Tool (don’t forget to hold down ‘Shift’). Also add a Drop Shadow and a Stroke. The images below are explanatory.

Now use the Line Tool (Weight: 12px) and the Ellipse Tool to complete the midfield.

Now we should draw a nice ball icon (open a new document). Take a look to the following images to understand how to create an attractive ball (don’t forget that a photo of a ball can help you in tracing the main lines).

A clipping mask is created using at least two layers in Photoshop. The bottommost layer acts as a mask for the image on the layer above, so this last layer will be visible only within the shape of the bottommost layer.

Copy and paste the ball in our main document, add credits and other decorative stuff.

The ‘X’ and the arrow have been created with the help of a tablet, then a soft Drop Shadow has been added to the layers.

Step 7 – Sidebar

We add a navigation menu on the top of the sidebar, use the Rectangle Tool with the help of the grid and guides to build it.

Append the same style to all buttons.

Add your favourite social icons, we can use the beautiful set designed by Sebastiano,‘Socialiconized’, then fill the sidebar with useful widget. you can mix previous techniques to add text contents within the sidebar.

A little touch to design a very nice widget title.
Draw a white circle and positionate it on the bottom-right of the widget background. Now ctrl+click on the layer thumbnail in the layer palette to create a selection of the circle, activate the widget background layer in the layer palette, hold down Alt and Add Layer Mask to this layer.

Do you are a newbie who doesn’t know how Photoshop masks work? Take a loot atthis tutorial we’ve written on this matter.

Append a soft Drop Shadow and a 1px white Stroke, then set the Fill to 0%, in order to obtain the following result.

Add a new white circle and positionate it correctly, add the title (you can use a soft Inner Shadow Effect).

Perfect! This is the end of the first part. Now all what remains to do is to turn this Photoshop theme into a fully functional html/css layout. If you’re an aspiring webdesigner this series of tutorials is for you. Don’t miss next updates, follow us on twitter or subscribe to our rss.