Web design has changed. Spliced and diced images in tables and cells? Oh, that's very last century€¦ With the arrival of CSS and absolute positioning, the designer's creativity has been set free to create inspiring and enticing graphical websites.
Photoshop CS2 is the perfect tool of choice to help you build these sites. From creating your layouts to exporting with the great 'Save for web' optimisation feature, Photoshop is king for starting your website designs - ones that are no longer restricted to the dull old HTML table.
We're going to create such a site. It's called Blush and is run by a group of artists, fashion designers and textile makers. It's a consortium of creative guys and gals who produce rich and colourful designs and materials and want the world to know more about them. The brief is to make their site big, bold and colourful.
Photoshop is a great tool for meeting website design briefs. Mock-ups can be created with minimum fuss and switched around easily when elements are grouped together in layer sets. Just drag the content around in its layer set, or make it invisible and add on something new. This fluid structure is great when there's a deadline to meet and the client wants change after change.
A neat trick is to make several output JPEGs from your one Photoshop mock-up using several arrangements of content. This looks to the client as if you've created a number of different designs, but it's all come from one master file.
The key to this is to keep all your work organised. Layer sets in particular can make your life so much easier when it comes to making changes to your work. Oh, and don't forget to name your layers as you go. Otherwise it'll drive you mad when you return to your work and find you have to go through all your layers.
In the following tutorial, we're going to look at elements of the Blush website and show you how to make a web-friendly background texture and have fun with images and bits of thread. Learning to sew in Photoshop, animating (using the new Animation palette), messing around with textures and a few tips will help you excel with your website designs.
Click here to download the support files ( 9MB)
Click here to download the tutorial for free
