Create a Gnarly Snowboarding Themed Web Design
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.
A few snowboading vector graphics can be sourced from FreeVectors.net that help add the finishing
touches to the styling of the event information.
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.