Line25

Create a Gnarly Snowboarding Themed Web Design

Read the full post

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’.

Snowboard themed website design

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.

Snowboard themed website design

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.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

54 Comments

  1. Marco says:

    Hey, that’s me :D (“Marco”) ;) .

    Anyway, great tut once again Chris! Now a “PSD to HTML” tutorial for this one.

  2. elQueFaltaba says:

    Nicely put together Chris. Maybe this design lacks a strong footer, very common these days, with more info, contact forms, etc ..

    Looking forward reading the next step ..
    Cheers!

    • Totally agree with you on the footer. It was one area I was wanting to play around with large amounts of content like you mentioned, but being a quick fictional project I basically ran out of content ideas haha!

  3. cchana says:

    beautiful. love the concept and the logo looks pretty cool!

  4. Lee Driscoll says:

    Excellent Tutorial Chris

  5. Alex Rogahn says:

    Awesome design and wonderful tutorial, Chirs. I’d love to see more like this, it’s great seeing a really inspirational piece of work and better yet seeing how it’s done! :)

  6. Neale says:

    Nice work and good use of Gnarly 10/10 :)

  7. Excellent tutorial Chris. That’s a very well designed site! If I ever have a snowboard company come to me for a website, I will use this design. :)

  8. Ehi Great! It’s really cool :D

  9. Great tutorial and absolutely gorgeous design, not a huge fan of the white on light blue text though, might be my screen but I can’t read the text at the bottom at all.

  10. Pete says:

    I wonder where u got the idea for this from, cya bright n early sat morning

  11. This is a great tutorial and a great design. Thanks for this.

  12. Coxychap says:

    Great tut with some really nice touches. Thanks Chris.

  13. Eric B. says:

    Excellent tutorial. Very useful, Chris!

  14. Eko Setiawan says:

    Hi…I really liked this article, you give me inspiration
    Thanks…

  15. RAD DUDE! no seriously… nice design, cool layout…frosty! Makes me wanna go out and shred up a mountain!

  16. paul says:

    great tutorial Chris!
    The baseline grid tip is going to be really useful for future projects.

  17. Jakub says:

    yeah – baseline grid tip is awesome !

  18. Miltonious says:

    Hello Mate, Huge fan of your Blog! I liked this, but where is the Html Css tutorial for this? Would love to see it! (mainly cause I can’t figure how to have that background that moves with the browser size. Thanks

  19. What a brilliant tutorial!!! Love the result, it’s absolutely amazing.

    Thanks for sharing.

  20. jay design says:

    Nice end result! I love the bg texture. I’ve started using bg textures on a few of my designs recently to add depth. Works really well.

  21. paul says:

    could you throw in some CSS3 techniques? multiple backgrounds, rgba, text-shadow?

  22. Really great tutorial here! Line25 has some amazing tutorials and posts for designers, and this is just another great example of this case

  23. Nikhil says:

    Amazing tutorials Chris,
    great walk-through!!!

  24. Levi Ripley says:

    Thank you so much for making this carnt wait for the psd to html

  25. Jimmy says:

    Nice work! Have you ever been to Sälen or how did you know about it? :D I’m from Sweden, so I must ask… :)

  26. Ryan says:

    Nice tutorial, will be helpful to many. For anyone serious about photoshop check this out (USA only) http://bit.ly/psoffer

  27. Stratos says:

    Great tut! Thanks Chris.

  28. aziz says:

    nice tutorial.. and i cant waiting for tutorial coding into html and css in wordpress

    thanks :)

  29. mAdInDo says:

    This is what i’m looking for… clean and detailed tutorial, thank you :D

  30. Brilliant tut! PSD to WordPress would be simply awesome *fingers crossed*

  31. Ben says:

    Whats the name of the Icon Set u’ve used ?

  32. Pretty nice template and the tutorial is well explained. But the “upcoming events” section isnt much visible, especially the end of the section. The white color of the text on the light blue isnt the best combination…

  33. joshua says:

    Nice work, and thorough!

  34. Cool Design!!! You’ve got a great technique to your work.

  35. tuna says:

    very nice, thanks..

  36. nice and simple tutorials …

  37. Brian Jones says:

    Excellent tutorial Chris – one of the best I have come across! Look forward to following the coding tutorial – keep up the great work!

  38. Tyler Plack says:

    Thanks Chris. Where did you get the background for the pages, though? I really like that grunge element.

  39. numodeljob says:

    I very much like this blog. Yet time I will come here

  40. Lucas says:

    Thanks for sharing your thoughts with all of us. Love you work. Appreciate the time you put into your sites and tuts.

  41. carl says:

    Hello,

    I'm kinda new to desining but i'm interested ! I'm stuck since a while on this question … I see you draw with the brush when for example "home" is selected … I saw it with other tutorials too, making the word darker when clicked etc… does that mean you have to make a different background for each webpage? and when the content changes also ? … Now, i make a basic background and I type my text into a label in my web developer (asp.net)

  42. mrk says:

    super like

  43. mrk says:

    super like

  44. Jennie says:

    I’m going to try it, because I’m trying to make a fansite. And it’s really hard, but I already made a psd.

Sorry, comments are now closed