Quantcast
advanced photoshop
Aug
16

Metro-style websites

Posted in:
General, by Adam Smith

Metro-style websites techniques Creative and technical advice on how to produce stylish grid-based web design

One of the more popular trends in the world of web design is the Metro style, along with its design language created by Microsoft.

All concepts naturally begin in Photoshop, which is still universally preferred by graphic designers.

Permitting a wide range of effects, plug-ins and Smart Objects, graphic designers can follow an entire design process using Photoshop alone.

Here, we will go through the basic steps together and show you the most important things for creating modern web design.

Grid system

We need to select an appropriate grid to work from. The internet offers many grid generators, which can be set up to create our own examples.

For this work, we used a 1200px grid, including 12 columns set to a width of 91px each; the width size for all the columns equals 1180px. This is for higher resolutions and bootstrap technology.

Metro-style websites

Wireframing

Graphic designers are often tasked with creating a wireframe design for a client first. Here we work with basic HTML elements (shapes).

This gives us the chance to make amendments, whether from our own judgment or due to a client’s reaction. This way, we’re not risking time-consuming edits with the final design, which is a big gamble.

Metro-style websites

Backgrounds

We have divided our design into three basic areas, each with a different background. For our page header we start with a gradient area containing blurred Ellipse shapes of different sizes and shades of grey.

These were applied with Gaussian Blur. We enhance this blurred area further by adding several more shape layers and introducing Motion Blur.

Metro-style websites

Colour scheme

Colour management is an integral part of this workflow when you begin to add your tiles. Using certain types evoke certain moods. This is particularly true for a simple-looking design with an emphasis on detail.

Try to pick colours that balance; don’t over-do it with bright and vibrant looks, as these should be used only to highlight something important.

Add your colours to the Swatches palette and save them separately, so they’re at hand for every project and we can load them in later.

Metro-style websites

Content structure

Metro requires a structured layout, and we group elements to avoid less interesting areas. It’s important, though, to size tiles appropriately to avoid the possibility of obscuring content after clicking.

We can find a similar caveat with mobile apps, where the emphasis is on motion and user-friendly navigation.
This all requires careful tuning so that the content fits with the overall tone of the site.

Try to draw out the significant and visible navigation aids so that users always know where they are within the website.

Metro-style websites

Typography

Original web design requires a unique font. We must keep in mind that what looks fine in one browser might not look fine in another. Some sites are almost based on beautiful typography, so it should be chosen from trusted sites.

Developers from Google offer Google web fonts, and these are guaranteed to work correctly in all major browsers.

It’s especially important with Metro styles to choose a font that is easy to read because we’ll be applying it
to active tiles that should be easily definable.

Metro-style websites

Add icons

The right choice of icon is almost as important as the correct choice of font. It’s good if the designer has developed his or her own examples for easy commercial use.

You can create them using the Pen and Shape tools. In CS6, these are vector objects that retain their quality even when you’re resizing and zooming in on them.

Always draw icons at an appropriate size that makes them easily visible. Try to set the icon’s colours in sufficient contrast to the background colour that they are placed on.

Metro-style websites

Smart Objects

Smart Object layers are very advantageous. In our design, we work with these in two ways. First, to interpret the size and dimension of our images, as we transform bitmaps freely.

Second, we also group our elements into Smart Objects so that we can quickly import designs into other projects (PSD files).

When you open these grouped Smart Objects (by double-clicking), you’ll find nested layers – in our case images – which we can then edit or add to.

Metro-style websites

Interesting background

Add a new layer and use the Brush tool to create several circles of varying sizes, between 2px and 12px. Deploy them irregularly over the entire background.

Set the layer’s colour to white by heading to Layer Style>Color Overlay, leaving the blend mode set to Normal. Now apply the Motion Blur filter and set the parameters as shown in the screenshot below.

Metro-style websites

Element states

Our functionality is made dynamic by creating a number of possible states which can appear once the site goes live, such as the active tiles we’ve previously mentioned.

We created two different Smart Objects, one representing an active state and the other an inactive state. This screenshot shows a before and after, demonstrating the dynamic effects you’ll get once we go live with the site.

The red tile on the left will be our active state, for when a mouse hovers above it. The three grey tiles represent the inactive state.

Metro-style websites

Content options

The image above shows all of the options that may occur on the website. We have chosen to use a laptop element to display thumbnails of our other web projects.

There are other, easier ways to creatively display your projects. It’s often enough to apply a soft drop shadow or put something into an alternate shape, such as a circle.

Don’t forget about the grid when inserting similar elements, and set the size of the elements according to their columns.

Metro-style websites

Edit pictures

The appearance of photos is important in the overall tone of the design. Of course, their looks may be subjective according to your colour scheme.

The tools you use are also up to you, but we find colour adjustments work best. We applied Color Balance to our photos, setting Shadows to 5, -10, 6, Midtones to -19, 5, -9 and Highlights to -20, -5, -14, with Preserve luminosity active.

For quick brightness adjustments, use Brightness/Contrast or Levels adjustments.

Metro-style websites

Final product

After completing our design, we need to recheck our files and tune them. This is so the next person to work with our project can understand and manipulate it clearly.

Don’t underestimate this stage, as the state of your PSD file determines the quality of your work. If you use more than the default patterns, brushes and other Photoshop components, provide people with your final set.

In PSD files, always try to have most of the layers active to allow future editing.

Metro-style websites

Metro-style websites

  • Kenshi Press

    Great tutorial