1 – Vivid Clouds
Fill the area with a tan colour. I've used DDCE92 here.
Create a new layer.
Press D to set the colours back to black and white.
Click Filter > Render > Clouds.
Change the layer's Mode from Normal to Vivid Light. This makes the clouds, well, "vivid" :)
Keep pressing Ctrl+F to redo the Clouds until you're happy.
2 – Brushing in a green area
Create a new layer.
Select a medium green colour (I've used #006000 here)
Choose a fairly large, blurry brush from the drop-down list and brush in an uneven area at the bottom of your image.
3 – Adding grass and a title
Create a new layer.
Change your background colour to a slightly darker green than your foreground colour. (I've used #003200 here.)
In the list of brushes at the top left of the screen, scroll down about two thirds of the way down, and choose Dune Grass. Look out for a brush at size 112, and you'll find it. Change its Master Diameter to 30, and start brushing in your grass. Try to stay roughly at the edge of the green area, though it's not a problem if the green shows through a bit.
Add in your own text. I've used the Plaza Swash font here. Resist the urge to give your text a bevel or shadow. You don't want to lessen the aurora effect with a big plastic-bevel header. :)
Click File > Save for Web, and save the image as a gif. I usually use Jpeg, Quality 60, but in this case, a jpeg mashes the strands of grass together.
4 – Creating a sliver
Select a big patch of grass, the whole width of your image.
Click Image > Crop.
Save this image for the web, using the same settings as the last image.
5 – Creating a shader
A shader (in this case) is a very small image, that's partly transparent, and partly black. When it's tiled over another image, it effectively darkens that image.
Create a new image, two pixels wide, and two pixels high. Press Ctrl + several times to zoom in.
Create a new layer.
Use the Pencil Tool (may be hidden under the Brush Tool) to put in two black dots as shown.
Delete the Background layer. This should reveal the grey and white checkerboard pattern underneath, which indicates that the area is transparent.
Save the image for the web, as a gif. Make sure the Transparency box is ticked.
6 – Making a divider
Create a new image, net quite as wide as your original.
Create a new layer.
Fill the area with an orangey-yellow. I've used #FFDE00 here.
Right-click the layer, in the Layers list, and choose Blending Options. Give the layer a Bevel. Change the Gloss Contour to Ring - Double.
Save this image for the web.
Aurora Website
Pegaweb: This is the Aurora website tutorial from Pegaweb.com.More Information: Fill this area with whatever text you like. I'd recommend using Arial, at size 2 for body text, size 3, bold, for sub-headers, and size 4, bold, for main headers.
Other Options: The shader has helped to darken this area. Because of this, blue is probably not a good link colour. To fit in with the green-yellow-black-white colour scheme or this site, try making your links and main headers the same yellow as you used in step 6.
No comments:
Post a Comment
Thanks