Design a Snowboard Website

Overview: Quick Hints and Source File

You will be expected to know basic drawing, layer management, blending modes, styles, and patterns. However, if you are a gumbie then this is a good way to see the process. The thing to remember about this design is to not be too picky, you may end up with something similar and not exactly the same as mine. See the final image below and download the .psd file here.

Click to enlarge

Step 1: Drawing the Framework

Open up a document around 1024x768 and add your first blank layer. Using the "Rounded Rectangle Tool" draw a white container on your new layer, this will give us the general foundation for everything else. On your "Background" layer fill it with a light gray color of your choice. Apply a dropshadow style to this layer.

On a new layer draw a black rectangle spanning the same width as your container but position it to have a little space on the top and not too high, this is where your header graphics will go. The black box will actually become a mask later on.

Next, add another layer and draw another rectangle for your nav area, color it a light green color. This is what you should get.

Click to enlarge

Step 2: Designing the Header

Add a layer above the black header rectangle, make it into a layer set by putting your curser directly over the middle of the layers in the layers palette and while holding down the "alt" key simply click. Now anything you draw on the layer you just created it will be masked off by the black rectangle layer.

On the new layer draw out a rectangle marquee just beyond the header box and apply a gradient fading from a dark to light blue.

Add another layer into the layer set but make sure it is above the gradient layer and add a pattern of your choice, I used a diagonal striped pattern. Find tons of patterns at www.k10k.net. Make sure you play with this layers blending mode, I used overlay, and I brought the opacity down a bit.

On another layer above the pattern add some cutout mountains and correct any flaws. Tons of free pics on www.sxc.hu. This is what you should have so far.

Click to enlarge

Step 3: Grunge Brushing and Graphics

Create a new layer in the layer set for the header. Now apply some grunge brushing, find tons of brushes at www.photoshopbrushes.com. Play with this layers blending modes and

Click to enlarge

Next add another layer and draw some trendy graphics, I used photoshop default vector shapes and just made them work for this design. Make sure you show all the designs in the vector list to see all photoshop can offer.

Click to enlarge

Step 4: Designing the Nav Bar

Above the layer with the green bar on it add a new layer and apply a pattern of your choice, I used a pixel pattern that I had created. Play with the opacity and blending modes, just enough to give it some style. I also applied some more grunge brushing, do this on a new layer.

Click to enlarge

Add text and dividers on their own layer, I used Myriad Pro for my nav body text. This is at the point now where you could show your client and gain approval. Hope you enjoyed this tutorial, let me know how I can improve it or what you think.

Click to enlarge