Get your Photoshop shred on and follow this step by step overview of building a snowboarding themed website layout. The design we’ll be creating takes inspiration from the typical style of the snowboarding culture, with grungy textures and distressed brush marks adding detail to the design. We’ll start by producing a core grid to base the design elements on, then use a mix of photography and Photoshop manipulation to create a concept web design for a fictional brand named ‘Snow Candy’.
Ideas, Research and Sketches
A good place to start any design project is in your sketchbook. Before opening up Photoshop, I took the time to jot down some keywords and create a brand persona for Snow Candy. The website would aim to present a few key elements of information such as upcoming events, latest video and focus areas that could send the user deeper into the website. I then sketched out a potential layout that balanced out the page elements, and outlined my idea of using a large header graphic to catch and draw in the viewer’s attention.
Creating an underlying grid
Using a grid to base your design on is one of the core design principles that helps bring out balance and cohesion in your designs. This particular design is based on a simple 12 column layout making up a total width of 970px, and a uses a baseline of 24px;
A useful tool for generating a grid for your design is the Grid System Generator, where you can create a template and steal the handy pink column graphic to paste it into Photoshop! To create a baseline, create a 24x24px document in Photoshop, and draw a single pixel line across the bottom. Go to Edit > Define Pattern, then in your main document fill a black layer with this pattern to give a baseline template to set your text and page items to.
Let’s shred the gnar!
With the page template ready to rock, let’s get on with some creative Photoshop work. Start by filling the background with a light blue (#b9d2f8), then add a gradient spanning from a dark blue (#02357a) at the top through to a mid blue (#295ba6) then blending out to the #b9d2f8 background colour.
Head over to Bittbox and download one of the awesome noir grunge textures. Paste the texture into the document and scale down in size. Also change the blending mode to Luminosity and drop the opacity to 25%.
Add a layer mask to the texture, then use a large soft brush to blend out the texture so that it spans from the top center of the document. Black paint renders the area invisible while white represents the visible portions of the mask.
With Snow Candy being a fictional brand, we can quickly throw together a cool logo that fits into the overall style we’re aiming for. Download the flowing Black Rose font and set out the words in lower case. Remember to make the most of your grid by scaling and positioning the logo in relation to the columns and baseline.
Rough up the logo a little by adding a layer mask and brushing over it with some grungy Photoshop brushes. I’m using my paint stroke brushes that are available for download from Blog.SpoonGraphics. Set the opacity of the brush to 10% then slowly build up the layers of distress.
To draw focus to the logo add a soft and subtle drop shadow, then draw a white radial gradient on a new layer. Set the layer style to Overlay and move into position behind the logo. Once in place tone down the effect by dropping the opacity to 50%.
Type out a simple navigation list to the right of the logo, following on the same baseline. Use a widely available font such as Helvetica or Arial to allow the text to be rendered in HTML when coded up for real.
Create a visual clue to highlight the active menu item by adding a small brush stroke in white behind the navigation text. Reduce the opacity to keep the white text legible.
Draw a large content area that spans the whole 970px width and fill with white.
Reduce the opacity of the content area to 30%, and add a very subtle drop shadow. Alter the distance and spread to 0px, while setting the size to 10px. Drop the opacity down to 25% to maintain a subtle shading effect.
One of the main features of the design is a large heading that holds a Snowboarding action shot. This area could be used as a rotating slideshow of featured content on the final website build, but for now, we’ll just mockup one of these features. Paste in, rotate and scale a photograph. This particular shot can be found on SXC.
Add some design tweaks to the shot by dabbing some vibrant spots of colour over the image. Choose a bright pink, blue and yellow and paint them onto a layer above the photograph.
Set this colour layer to Overlay and set the opacity to 35%. The result is a subtle colour shift that spices up the photograph.
Use a range of Photoshop brushes to draw a rough border around the shot. Paint the brush marks in black, then change the blending mode to Overlay to allow the colours to interact.
Painting brush strokes on a couple of layers will also allow each layer to overlap, creating more depth and interest as different levels of transparency appear.
Next, we’ll create a creative typographic layout for some event details. Here I’m manipulating the text in Illustrator for ease, but there’s no real reason to move out of Photoshop. Use guides to aid the alignment of all the words.
Paste the text into the main web design document and scale into place. Position the words between the columns and lay it perfectly on the baseline grid.
Underneath this main feauture header the secondary content can appear. Use headers to create clear visual anchors to attract the eye and give immediate regonition of the content. Manipulate the text with tight tracking and lowercase appearance, and draw some small icons with the pencil and eraser tools to back up the wording with a visual clue.
A mockup of the featured video can be created with another Snowboarding action shot. Add a grungey border using the rough Photoshop brushes.
On a new layer, draw a circular mask and fill with black. Draw a triangle using the Polygonal Lasso Tool to represent the play icon, then delete this shape out of the circle. Drop the opacity to allow the video content to show through.
To the right of the video will be a short list of upcoming events. Write out the title and back this up with an icon. Zoom right in to adjust the finest details of the icon.
Set out the event information with style. Use a range of font sizes to create a hierarchy of importance.
When laying out the content, especially the text, remember to base everything on the baseline grid. With our baseline being 24px, use a line height of 24px on all paragraphs. Finish off the content area with the desired number of elements, and end each section with an anchor that links through to deeper levels of the website.
Below this content, we’ll lay out some elements that span the width of both columns. Lay out some portrait shots to build up the Meet the Team section. Add a small white stroke and subtle drop shadow to give the appearance of a tactile photographs.
Rotate each portrait shot to give the impression of a collection of photographs that have been roughly placed on the page.
Continue the casual theme of the design by typing out the names of each team member in a hand-drawn font.
To finish off the design, copy a selection of the texture used in the header area. Move it into position behind the lower portion of the content panel.
Alter the layer style and opacity to tone down the effect and blend the colours toghether, then use a layer mask to allow the texture to peek out from the center of the panel.
The visual concept is complete! The blue colour scheme helps tap into the coolness of the snowboarding scene, while the mix of textures and distressed brush strokes add some gnarliness that relates well to the culture and lifestyle of extreme sports in general.
Be sure to subscribe to check out the next stage of the tutorial, where we’ll be coding up the design into HTML and CSS.