Graf1031 – Week 8
Navigation and button design in Photoshop and Fireworks
There are 2 brushes to install for this workshop. Download, and double click to execute in PS.
Create a new doc
- width to 1100px and the height to 900px.
First we need to decide what our website will consist of and what our colour scheme will be. For this example, I have decided to use three main layers of colours: the sky, distant mountains, and a rolling hill with trees.
Right click and copy the image below. Then paste into your doc, and create new swatches.
Sky palette: #E7D1A2, #D0B16E, #C08C41, #B1722B
Mountains palette: #8E6428, #85531E, #794B1A
Hill and Trees palette: #4D2B0F, #331807, #200F05
Now it’s time to start painting. Let’s start with the sky since it is behind everything else. Select the Brush Tool (B), and then from the Brush Preset Picker, locate your new brushes. Make sure to keep the brush size between 300 and 400.
Creating the sky
- Select the lightest color from your sky palette
- Begin in the middle of the document and start placing single brush strokes across the page using different watercolour brushes set at varying sizes.
- Continue to place strokes until you have painted an area that spans the width of the document and is about 300px high.
- Just like a real painting, don’t over work it. You will end up losing all of the stroke details that make these brushes so beautiful.
- Now repeat this using the other colors from the sky palette, each time moving up so that you are overlapping the previous color.
Now lets create the distant mountains
Pick the mid tone color from your mountains palette
Using your pen tool, set to "Shape Layers":
- Draw the desired shape of the mountain range spanning the length of the document. This will act as a guide for our brush strokes and a solid foundation of colour.
Select the Brush Tool again, and select a watercolour brush that is mostly flat on top. Don’t forget to keep the brush size around 300px.
With the top edge of the brush slightly overlapping the top edge of the mountains, follow along the curve placing strokes along the way. This will replace the smooth edge with small brush marks.
Our mountains are a little flat, so lets give them some depth. Select a brush that has a nice angle and set the size between 100 and 150.
Using the darkest and lightest colours for our mountains, add shadows and highlights. Remember to keep it subtle since the mountains are still far away and details should be minimal.
Hills
Let’s use the same technique from the mountain stage to make the rolling hill in the foreground. Only this time keep the curves much flatter and use the darkest color from our hill palette.
Also, make sure the placement doesn’t cover up too much of the mountains.
Now, lets bring our hill to life with some trees. These brushes are also high-res, so size them down accordingly. Placement is totally up to you, but don’t overdo it.
After the trees are in place, use the remaining colours chosen for our hill to give our foreground some detail. Choose a watercolor brush again, and add random stokes to the hill. Also, size you brush way down so that it is smaller than the trees, and use it to add highlights and shadows to the foliage.
Additional Texture
The colours and brush strokes of our painting look really great, but everything seems a little too smooth. It needs some texture.
Create a layer above all of the other layers, and set its blend mode to multiply.
Using the Brush Tool, select one of the watercolour brushes.
- Only this time, leave it set to its maximum size.
- Select a mid-tone colour from the sky (#D0B16E or #C08C41)
- apply one brush stroke in the middle of the document.
Using this oversized brush allowed a lot of detail and texture to be added in one click. Experiment with the different brushes to achieve the best affect.
Merge all of the layers, and add some noise (Filter > Noise> Add Noise) with an amount of .3px
Use this as the background to a web template. Create your own using the following example as a guide:
The great thing about this technique is that it is really easy, fun, and the possibilities are endless. Experiment with different colours, and try using some great landscape photos as inspiration.