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

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

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.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

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.

Design a clean sports magazine-style web layout with Photoshop

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.

Design a clean sports magazine-style web layout with Photoshop

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

Design a clean sports magazine-style web layout with Photoshop

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

Design a clean sports magazine-style web layout with Photoshop

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

Design a clean sports magazine-style web layout with Photoshop

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.

Design a clean sports magazine-style web layout with Photoshop

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.

Design a clean sports magazine-style web layout with Photoshop

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

Design a clean sports magazine-style web layout with Photoshop

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

Design a clean sports magazine-style web layout with Photoshop

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

Design a clean sports magazine-style web layout with Photoshop

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.

Design a clean sports magazine-style web layout with Photoshop

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.

Design a clean sports magazine-style web layout with Photoshop

Step 4 – Featured articles

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

Design a clean sports magazine-style web layout with Photoshop

Design a clean sports magazine-style web layout with Photoshop

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’).

Design a clean sports magazine-style web layout with Photoshop

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

Design a clean sports magazine-style web layout with Photoshop

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

Design a clean sports magazine-style web layout with Photoshop

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.

Design a clean sports magazine-style web layout with Photoshop

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.

Design a clean sports magazine-style web layout with Photoshop

Design a clean sports magazine-style web layout with Photoshop

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

Design a clean sports magazine-style web layout with Photoshop

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

Design a clean sports magazine-style web layout with Photoshop

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.

Design a clean sports magazine-style web layout with Photoshop

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.

Design a clean sports magazine-style web layout with Photoshop

Append the same style to all buttons.

Design a clean sports magazine-style web layout with Photoshop

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.

Design a clean sports magazine-style web layout with Photoshop

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 at this 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.
Design a clean sports magazine-style web layout with Photoshop

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

Design a clean sports magazine-style web layout with Photoshop

Design a clean sports magazine-style web layout with Photoshop

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.

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.

[ Images credits: marlon.net, joncandy, fakelvis, peacecup ]

Related Posts

high quality vectors

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

piervix

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development. Now he works to make WeGraphics the best place to find design resources

27 Comments

(+add yours)
  1. Great tutorial and design!

  2. Another great tutorial and template. Your resources are well done and the articles are very detailed. I love your work guys.

  3. Yeh Piervincenzo is a template machine!

    • ahahahh… Template Machine [ Model H579 - Serial N° 173638 ]… and the next week the code! Hard work, the only way to improve our skills, guys.

      Thank you for the comments.

  4. neat and clean layout. great tutorial. Thanks!

    @Sebastiano, if Piervincenzo is a template machine so who’s the code machine ? :p

  5. Nice and clean look, and right on time – Champions League is about to begin :)

    Good work Pier!

  6. Excellent tutorial, I love first because is soccer and then because is really clean and colorfull.

  7. Great tut!!! Thanks…

  8. Clean work guys…
    i like the result… :D

  9. Thanks friends! I’m glad you like the tutorial… your comments are always appreciated ;)

  10. Bravo! I know this is geared towards sports content, but really this can be used for anything.

    The ‘how-to depth’ you offer here is fantastic -with all the design blogs popping up, it’s great to see some real time spent on a tutorial.

    Again, great job on the post and keep it up!

    • Thank you, Andrew!

  11. professional web layout tutorial. thanks

    • Thank you, friend!

  12. Great tutorial and great template! I will try to make something simillar (but, I prefer basketball :)). Thank you very much for all details!

    • Thank you dear Tixy… As italian I really love three things in my life: pasta, coffee and football ;)

  13. Thank you for this wonderful tutorial. So neat and clean template

  14. Very nice tutorial. I’m a soccer fan .

  15. Hi,
    I am Exciting ADS. This blog give such a great information. Describe the fact of selection of choosing. This blog give such a great knowledge about shopping.
    I like to thank for give such a awesome facts.
    Thanks
    Exciting ADS

  16. Wow that was odd. I just wrote an extremely long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Anyways, just wanted to say wonderful blog!

  17. I like your idea tixy how about u give me your number baby. we can get it on in my batcave while Alfred watches us

  18. perveted batman how bout we all 3 (tixy- nice tits) get it on at the batcave you can suck on my iron dick and my welled on balls:) bring some K&Y also and some maginums and 2 red bulls

  19. Great tutorial thanx :)

  20. Thank you piervix. Nice design and well explained tutorial

  21. ????? ????? ? ?????? ?????? ????? ???????
    ???? ?? ????? ????? ? ????????????? ??????? ?
    ????????
    ???? ?????? ?? 24 ???? ? ???? ??????
    ? ???? ??? ???? ?? ???????? ?????? ?? ????? ?????????? ???? ????,
    ? ????? ?????????? ?????? ?? 24 ????, ??????????? ??
    ???? ????????????? ?????? ??? 399 ??, ????? ? ???????? ???????? , ??????
    ? ??????? ?? ?????????? ?? ???????, ???????????? ?? ?????? ??????, ?????? ?????? ?? ?????
    ???????? ?? ???-??????? ??????, ??????????, ?????? ? ?????? ?????? ?????? ?? ?????????????? ? ??????? ?? ??????, ??????? ??????????.

  22. I like the helpful info you supply to your articles.
    I will bookmark your blog and check once more here frequently.
    I am somewhat sure I’ll be told lots of new stuff proper here!
    Good luck for the next!

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team