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.




