Photoshop - Save Image for Web Technique
Part of my daily Photoshop for Web Design tips.
So you have your website design all ready to ‘cut up’ while you’re doing the html/css and think “what is the best way of exporting the different parts of this design, I wish someone would tell me, please I just want to know?”. Luckily for you I’m writing this incredibly comprehensive blog post of the bestest technique, honed to perfection over many many years.
Okay, it seems like such a simple task but in reality there’s no definitive way of doing it, some people crop, some people slice (if they’re stupid), and I’m sure there must be 1000s of different techniques. In fact google says there are 246,000 “photoshop save for web techniques” and google never lies.
My process is:
- CTRL + SHIFT + E (merge layers)
- M (marquee tool)
- Select the area you want as an image, this is easier if you use guides
- CTRL + C (copy)
- CTRL + N (new document - it automatically creates the document at the same size as what you copied)
- CTRL + V (paste)
- CTRL + SHIFT + ALT + S - save for web
badaboom - just set it at your preferred optimised setting and click okay, jobs-a-good-en.
Why would someone be stupid for slicing? maybe if they slice and save as a table or something dumb like that. But slicing, you can optimize the size of the image, as well as the pixel perfection. And after pressing ctrl+shift+alt+S you can optimize each slice to your own liking, then save selected images only. Is there something I’m missing? Something that makes this highly inefficient?
Comment by Skadoodly — Monday September 14th, 2009 @ 21:08
Maybe ’stupid’ was a slight exaggeration. My main problem with slicing is that it takes longer to set up the different slice areas etc and is fiddly. Also when you export the images you will need to hide different layers etc.
I don’t see it as flexible either, if you export an image and find it’s wrong, you have to go back and adjust your slices etc again.
Also the way I work is that I export the images I need as I’m going along creating the HTML/CSS opposed to exporting all the images in one go.
I don’t think you can plan ahead and know exactly how you’ll need each individual image before you get to the CSS.
I guess it comes down to personal preference though and if you prefer slicing, my apologies!
Comment by Rich — Tuesday September 22nd, 2009 @ 14:10
I thought this was ‘daily’ tips?
Comment by Andrew John Stelmach — Thursday September 24th, 2009 @ 13:19
Yes, the daily tips were going to appear on my twitter but I realised that it’s pretty hard to give useful Photoshop tips in 140 characters so I gave up!!
Comment by Rich — Friday September 25th, 2009 @ 09:07