Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us
Web based scribbles
If you’re like me, and enjoy getting your crayons out for some hardcore, old-school mark-making, and you want to combine the mess you make with some web design, then here are a few tips:
Start your design / illustration at a high-res (300 dpi or the like, as if you were designing for print). Doing this will enable you to be very detailed and precise with your mark-making. When the design is complete and you reduce the size to 72dpi, your design will look sharp, considered and intricate.
But remember that, on screen, 100% at 72dpi, ‘what you is seeing is what you be getting’ – so you have to ensure that the design works well at that size, usually in terms of line weight and subtle details.
From a ‘web-design-good-practice’ point of view, ensure that your work is optimised correctly – so that you get a good visual outcome, combined with a ‘low as possible’ file size. If, like myself, you work with quite sharp lines and flat colours, the .gif is the best choice. You can get a good sharp finish with a workable file size, meaning the madness you create can penetrate the viewer’s minds quickly and with unrelentless clarity.
When taking on a project, it is also good to find out the intended output for the design. If the client wishes the illustration to animate, and perhaps wishes the design to carry through into print and livery, it may be worth designing using vectors. This way you are not having to create multiple versions of the design for each output.
Maintaining a certain style in vectors is tricky, but can be achieved with practice and with reference to your line work in hand rendered sketches. I tend to use a combination of Illustrator and Fireworks when artworking my designs, with my initial scans ‘placed’ on page for reference – these are then removed / hidden on the finished design.
8 Comments
Commenting is closed for this article.
© Copyright 2006 Bite Size Standards and Authors
Gabriel Mihalache
: http://gabriel.mihalache.name/bop/
14 April 2006, 16:54 : Permanent link to comment
.GIF? Why not 8-bit .PNG? They’re smaller, most of the time. And patent-issues-free.
kevadamson
: http://www.bitesizestandards.com
14 April 2006, 17:15 : Permanent link to comment
Interesting point. This clears up the patent issue – www.w3.org/QA/Tips/png-gif
(about half way down page)
The lack support for png transparency (IE6 specifically) puts me off a more wider use in my practice – with this in mind, for me, the gif has better flexibility versus file size and quality.
Martin
: http://
15 April 2006, 18:59 : Permanent link to comment
@kevadamson:
But 8-bit PNG transparency is the same as GIF transparency. 8-bit PNGs don’t offer alpha transparency, so IE has no problems displaying them.
As Gabriel Mihalache mentions, (8-bit) PNGs can often be crunched down into smaller sizes than equivalent GIFs, if you use a dedicated app for this (although I find that smaller files – say smaller than 3 KB – tend to optimise better in GIF format). FOr Windows at least (sorry), there’s the PNGCrush app (I’m sure that there are Mac equivalents).
James
: http://watmm.com
17 April 2006, 12:50 : Permanent link to comment
I’ll chime in on the 8-bit PNG issue as well – I recently discovered in Adobe PhotoShop CS2 that the “save for web” feature will tell you the number of colours in the slice you are exporting – you can set the index colour table to that number, resulting in very small PNGs.
kevadamson
: http://www.bitesizestandards.com
17 April 2006, 13:53 : Permanent link to comment
@all
Cheers for all the 8bit png info. I guess it has been an option that I, myself, have dismissed out of hand. Not the intended focus for the post, but keep the png info flowing as it’s all good …
Kyle Haskins
: http://www.kylehaskins.com
18 April 2006, 06:07 : Permanent link to comment
I would recommend sticking with 72dpi when creating designs for the web. It makes it easier to predict the size of the page.
If you use Photoshop, take advantage of vector shapes (lines, squares), custom masks on a vector shape, editable text, and layer styles. Using these you can then scale items without bitmaping and also create nice printouts to give to clients.
reese
: http://designbyreese.com
19 April 2006, 13:34 : Permanent link to comment
Kyle,
Are you suggesting to create the shapes, masks, styles, etc in another doc that’s at 300dpi and then bringing it into the 72dpi page and scaling accordingly? Just trying to wrap my brain around your suggestion, which, if I understand correctly, allows for Kev’s considerations on high detail while not requiring you to scale down a full design. Is that right?
kevadamson
: http://www.bitesizestandards.com
20 April 2006, 00:01 : Permanent link to comment
@ Kyle
My point isn’t about the actual design ready for output for the web, more the best methods for designing graphical elements with the intention for them to then be used in a web-ready design.
Take an illustration that you wish to integrate into your design layout, form example: If you begin your design at 300dpi you will have much more ‘pixel-perfect’ control over your mark-making. Once the element is complete, you then integrate it into your 72dpi design, making final adjustments to ensure the element sits well within the rest of the design.