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

50 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

    • Buongiorno Federico,La Maison du Tiers Monde, ou Espace Martin Luther King est facile e0 trueovr (normalement). Boulevard Louis Blanc, vers le Corum. Un peu avant le feu de signalisation du carrefour avec la rue du Pila (celle e0 droite of9 il y a plein de bars et restaurants). A cf4te9 de l entre9e, il y a une cabine te9le9phonique (un vestige !). C est une grande porte bleue. Il faut entrer dans la cour. Notre salle est une des deux au rez de chausse9e.

  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!

  23. We love digesting your blog posts as soon as I see one we haven’t seen! Do you write on a newsletter? And if you do, what is the link?

  24. Hi, I read your blog like every week. Your story-telling style is witty, keep doing what you’re doing!

  25. We will be passing out free product samples of high-end candy.
    To become allowed, simply just answer our comment together with your address and we’ll
    ship it out over the following working day.

  26. What’s up, yup this article is in fact good and I have learned lot of things from it about blogging.

    thanks.

  27. I’m a plugin programmer for wordpress blogs. I’ve created a plugin that will scrape web surfer’s emails in to the database without
    needing their communication. I was shopping for
    ‘beta’ testers and also, since you’re the one gaining big volumes of visitors, I am contemplating your site.
    You’re intrigued?

  28. Longchamp Le Pliage Sac Hobo Sac Double Portable Longchamp Eljqo (Id.
    AT41.) La denuncia sostiene che molti consumatori pensavano Diophy [b] ag usata nel film
    era in realtà una vera e propria Louis Vuitton e
    Louis Vuitton hanno deciso di Warner Bros. Sac Bandoulière
    Longchamp Sacs Longchamp Bubble bbezE Sono sempre sulla base di almeno sette miglia al giorno, 7 giorni alla settimana e ammortizzazione posteriore e la protezione di tono bolla era perfetto per me perché stavo camminando ho preso non ho comprato la
    tonificazione cordoli sf alto sarebbe un passo sul sentiero.

    Essi appaiono una perdita dopo circa 6 mesi dopo l’acquisto di
    scarpe portato direttamente a 7 chilometri di distanza.
    Trousse De Toilette Longchamp Sac à Main Longchamp Pliage MUxqy 1 batteri marini uccide
    10 in Florida, infetta 31 febbraio Rihanna per appendere il loro ombrello in Soho: fonti tre Louboutin rende tacchi nudo per tutti i 4 alimentari e delle finanze delle scuole superiori gli studenti a perseguire una carriera culinaria 5 adolescenti ragazze che
    praticano il sesso di gruppo sono spesso costretti 6 Cosa
    è Salvia? Miley Cyrus catturato impianto di fumare 7 diresse Incontra rosso Sinosauropteryx: Scienziati determinano
    il colore dei dinosauri per la prima volta 8 Colpi è per i dilettanti SIP tequila con il
    rispetto che merita nove geni legati alla corsa può aumentare il rischio 10 Ristorante Girl: Chef trova la
    sua casa . In Spagna. Sac Bandoulière Longchamp Sacs Longchamp Velcro WLBCL
    Pulito e deodorante er en page Natron di Dio è s Hotel low cost, l’hotel è uno dei miei preferiti.
    Hkan OGS Natron usato per pulire la guarnizione di gomma sul rumore a microonde e frigorifero.
    Sac à Dos Longchamp Sacs Longchamp Bubble SJBZr Mercato incluso nel disegno dei
    grandi spazi aperti in Cina supera i cento milioni di RMB.
    Un certo numero di rivenditori di sport all’aria aperta sono sorti a causa di
    esigenze dei consumatori e costituisce una nuova
    posizione.

    Longchamp Le Pliage Sac Hobo Sacs Longchamp Bubble pXtEa
    Noi rde buddisti in Malesia e Singapore, rispettando i sentimenti religiosi di altre religioni, sulla
    base di superiori uomini singoli obblighi e le responsabilità religiose, i media
    locali citati prosciutto Come saying.Several controversie religiose hanno recentemente fatto notizia
    in Malesia, dove circa il 60 per cento dei 28 milioni persone giuste musulmani.

    Il paese ha a disposizione comunità etniche nonMuslim in Cina e in India, e la religione giusta o sensibilità settimana issue.Two pagina polizia malese ha mantenuto un addestratore di cani musulmano al carrello più giorni per le indagini causato loro di
    essere in disaccordo saluto vacanza video di Eid al Fitr, che la introdusse
    ei suoi cani. Sac à épaule Longchamp Sacs Longchamp Porte Monnaie TDZkj Non importa
    quello che si versa su di essa, semplicemente pulire con un panno
    umido e la borsa è come nuovo come ora comprato.
    Negozi di replica sono pronti a risolvere eventuali crepe o danni alla loro maggiore o
    minore a un costo molto basso. Sac Bandoulière Longchamp Sac Bandoulière Longchamp MzTnq La gente in Lumberton, Silsbee, Kountze e Sour Lake raccolti 6
    aprile, per una comunità congiunta pulito.
    Hardin County Clean Up, un programma di Hardin County, squadra della città, ha attirato le
    organizzazioni, club e organizzata per aiutare i residenti prendono parte allo spettacolo migliore.

  29. Vous pouvez trouver des films de toutes sortes de genres, y compris:
    Action, Fantastique, Comedie, Animation, Aventure, Biographie, Crime, Drame,
    Famille, Film Noir, Game-Show, Histoire, Horreur, Musique, Musical, Mystere, Nouvelles, Roman, Sci Fi, Court, Talk Show Sport,, Thriller,
    Guerre, Western, hindi et coreen.

  30. Fine way of telling, and good piece of writing to taske facts about mmy presentation subject matter, which i am going to convey in college.

  31. Greetings! This is my 1st comment here so I just wanted to give a quick shout out and say I
    genuinely enjoy reading your articles. Can you recommend any other blogs/websites/forums that deal with tthe
    same topics? Thanks for your time!

  32. You could top the cupcakes with icing in a spider’s web design and place a
    jellied sweet spider in the centre of the web. s young enough to have less competition but it also has
    enough traffic to get you the sales you need. Just remember
    to keep text toward the blues and greens and away from yellows which might end up being very hard
    to read.

  33. Thanks for sharing your thoughts about photoshop.

    Regards

  34. Do you mind if I quote a couple of your posts as
    long as I provide credit and sources back to your website?
    My blog is in the ecact same niche as yours and my users would genuinely benefit from some of the information you
    provide here. Please let me know if this alright with you.
    Thanks!

  35. I always spent my half an hour to read this webpage’s articles every day along
    with a cup of coffee.

  36. After I initially commented I appear to have clicked on the -Notify me when new comments are added- checkbox and
    from now on each time a comment is added I get four emails with the exact same comment.
    There has to be an easy method you can remove me from that service?
    Thanks!

  37. Thankfulness to my father who informed me on the topic of this weblog, this web site is really amazing.

  38. I go to seee everyday some web pages and information sites to read articles, however this web site presents feature basaed articles.

  39. Very good blog post. I absolutely love this website. Keep
    writing!

  40. This is really interesting, You are a very skilled blogger.

    I have joined your rss feed and look forward to seeking more of
    your wonderful post. Also, I have shared your site in my social networks!

  41. Thanks for a marvelous posting! I genuinely enjoyed reading it, you’re a great author.I will make certain to bookmark your blog and
    definitely will come back sometime soon. I
    want to encourage one to continue your great work, have a
    nice holiday weekend!

  42. Good day! This post couldn’t be written any better!
    Reading through this post reminds me of my old
    room mate! He always kept talking about this. I will forward this article to him.
    Pretty sure he will have a good read. Many thanks for sharing!

  43. hey there and thank you for your information – I have definitely
    picked up anything new from right here. I did however expertise
    some technical issues using this web site, since I experienced to reload the
    web site many times previous tto I could
    get it to load properly. I had been wondering if your web hosting is OK?
    Not that I am complaining, but slow loading instances times
    will very frequently affect your placement in google and can damage your quality score if ads and
    marketing with Adwords. Well I’m adding this
    RSS to my e-mail and can look out for a lot more of your respective intriguing
    content. Make sure you update this again soon.

  44. Pretty section of content. I just stumbled upon your website and in accession capital to
    assert that I acquire actually enjoyed account your blog posts.
    Anyway I’ll be subscribing to your feeds and even I achievement you access consistently fast.

Leave your comment

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