Skip to main content

Design a graphic-rich website

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

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.