Photoshop Ninja
Expert Photoshop tips and tricks for designers and photographers since 2005
Web image slicing the quick and easy way
All web developers have been through the painful and slow process of cutting up images into sections, individually optimising them for the web and then constructing a table to hold them all together in a HTML design application. Fortunately Adobe have realised that this is a common task and have given us a quick and easy way to perform boring job!
Firstly, ensure you are working in pixels. Then drop in pixel snapped guides on-top of your design where you would slice it up, holding down shift will ensure your guides snap to exact pixel increments. Now fine adjust your design so everything snaps into these guides. This is an important step to spend a little time getting right to ensure you create neat slices with no stray pixels in them.
I prefer to create my website visuals in Photoshop, because Image Ready doesnt have all the features and functionality of Photoshop and I think most other designers do too. Once you have got all this done save the file, and click on the big icon at the very bottom of the tools palette – the one with two icons with an arrow in-between. This will open your current image in Image Ready.
Now click on Slices>Create Slices. This will carve up your image into slices, with a small number overlaying each slice in the corner.
The next step is optimisation of the individual images. Use the slice selection tool and click on each slice. Using the Optimise palette and the ‘2 up’ view to compare your compression to the original, carefully compress each slice. Basically you want to use GIF compression on areas of flat or limited colour, and JPEG compression on more ‘photographic’ high colour areas.
Once you have all the slices optimised, quickly check out your preferences (File>Output Settings>Slices). You have the options for naming conventions of your slices down the bottom here, the rest of the options can be left as their defaults.
Now just click on ‘Save Optimised As’ under the File menu, ensuring the ‘HTML and images’ option is selected. Image Ready will then quickly generate a HTML file with a table to hold all your compressed slices in place and of course compress all the individual slices. Just open this up in your favourite HTML editor and copy and paste the table into your webpage design-job done!
The real advantage of this technique is that unless you radically change your design, you can just amend what you need to and export again, and a PSD saved in Image Ready saves all the slices and compression information – true Ninja power is yours!
(1 votes, average: 5.00 out of 5)
Loading ...
Written by Jonny Allbut - freelance graphic designer
Last modified: 16 August, 2005 (08:42) | First published: 16 August, 2005
Filed under Photoshop Top Tips, Techniques - Web No Comments »
If you like this, you might also find this related Photoshop content useful too!
No related posts.
No Comments »
No comments yet.