/Graphics/ Design a website masthead
10/09/2008 | Filed under Develop > Graphics
Craig Grannell explains how to create a striking website masthead using Illustrator – and avoid the worst conventions of Web 2.0
Most web designers favour Photoshop as their design tool of choice, with Fireworks the most common alternative, followed by a slew of cheap consumer tools. Perhaps due to its popularity within the publishing and illustration industry, Illustrator rarely gets a look-in, but in fact it’s an extremely useful piece of software for working on websites with an illustrative bent.
When I was commissioned to create a website for artist Edith Garcia (who can be found online at www.nenadot.com) for her Contemporary Monsters series, it became obvious that Photoshop wasn’t going to cut it. Edith’s work was based around simple monsters, full of character, and that style lent itself to the use of vectors. The final design is shown above (see www.contemporarymonsters.com for the site itself), and in this tutorial I’ll show how the masthead was created.
From this, you’ll pick up a few tricks about using more than just Photoshop when creating web page designs, including how to rapidly work up some vector shapes, plus tips for creating a cartoon-like masthead design centred around silhouettes and simple objects.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: nformation architecture, graphics, interface and front-end design
Clients: Various magazines
Biscuit: Oatmeal & raisin cookies
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
Webdesign Agentur / 12/02/2009 / 20:45 / http://www.designbits.de
Never thought about using Illustrator for web design purposes before... except for logo design of course. But using vector files does make sense because they are very small in size (despite their dimensions).
Rowan / 21/03/2009 / 01:24
JPEG is not lossless
One unfortunate trait with most designers is they think JPEG is the only format compatible with Photoshop and web browsers. Step 16 in the article says to export the AI image as a JPEG because "compression shouldn't be done at the stage". Well I've got news for you. JPEG is, by design, a method of compressing images. It doesn't matter if you use 100% quality as there is always compression going on.
When dealing with images of limited colours and high contrast or sharpness, much like this masthead, it's important to keep it in a lossless format such as PNG. Not only is PNG lossless (no compression whatsoever), it can also produce smaller file sizes than JPEG. PNG also works perfectly fine on the world wide web (in fact that's what it was designed for) and is supported wherever JPEG is supported.
So if you're following this tutorial and you get to step 16, please choose PNG as the format to export as. You will be rewarded with better quality and smaller file size.
http://en.wikipedia.org/wiki/Portable_Network_Graphics
http://en.wikipedia.org/wiki/JPEG
