Skip to main content

magazine-style with Photoshop

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

Design a clean sports web layout in magazine-style with PhotoshopI 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

Comments

Popular posts from this blog

Use x-ray techniques in Photoshop to show naked skin through clothing

    Do those new naked body scanners have you freaked out at the airports? As far as the TSA is concerned, those x-ray machines are here to stay, but you might as well take comfort in knowing that airport security guards aren't the only ones looking at your private parts. Practically anyone with a computer can manage to see through your clothes, and it's all thanks to a little program called Photoshop. Thanks, Adobe. With a few tweaks using the tools in Photoshop, you can see those boobs in no time, male or female. The video is in German, but it's not hard to figure our what's going on, especially if you're familiar with Photoshop. First, create a few duplicate layers, then get a handle on some of these tools to make the naked body through the clothes: * Auswahl erstellen (Create Selection) * Tonwertspreizung (Input Levels) * Belichtung (Exposure) You can also do this see-through clothing effect in free design programs, such as  GIMP .

Photoshop Photo Effects Tutorials 2024

  Photoshop Photo Effects Tutorials Everyone loves Photoshop effects. Not only are photo effects fun to create, but they’re a great way to learn Photoshop since they often introduce us to tools, commands or other features we might otherwise never know about! All of our Photoshop effects tutorials are written with beginners in mind, with easy-to-follow, step-by-step instructions. See our complete list below, or download our tutorials as  print-ready PDFs ! Fade an Image to Color in Photoshop Faster with Live Gradients Learn how to fade an image to color with Photoshop the new and easy way using live gradients! How to Add Falling Snow to Photos with Photoshop Learn how to add realistic falling snow to your winter photos with Photoshop. Get Better Color Halftone Effects in Photoshop Learn how to create more realistic color halftone patterns using Photoshop’s Color Halftone filter and this simple trick. How to Create a Halftone Dot Pattern in Photoshop Learn how to turn your photo into a h

Ridiculously Cool Photoshop Text Effect Tutorials

  Easy Photoshop Text Tutorials for Beginners If you’re still learning the fundamentals of design or want some quick-and-easy text ideas to jazz up your print designs, these beginner tutorials will be a big asset. In your lessons you’ll learn how to apply texture and 3D effects, create logos, utilize masks and other simple techniques for enhancing your text. 1.  Using Text As A Container For More Text In Photoshop 2.  Glossy Emblem Text Effects 3.  Create a Realistic Emboss/Deboss Effect 4.  Icy Styles in Photoshop 5.  How To Create a Gold Text Effect in Photoshop 6. Moon Shine Text Effect 7. Simple Styled Text with Stars Effect 8.  Elegant Glossy Gold Text Effect 9.  Hipster Text Effect in Photoshop CS6 10.  The Sugar Bag Effect 11.  Easy Chalk Ornament Typography in Photoshop 12.  Abstract Shining Text Effect with Groovy Font 13.  Easy Plastic Text with Layer Styles In Photoshop 14.  Papercraft Text Effect 15.  Making a Clipping Mask With Text In Photoshop 16.  Simple Bokeh Text Effe