Hi all! Decorator Shannon here with a quick tutorial on how to save your layout for the web. I’ve seen questions on the forums about how people get their layouts to look so crisp and sharp in the galleries. The answer is a quick series of steps after you’ve saved your layout.
These instructions are for Photoshop CS3 and Photoshop Elements 6. If you have a different version the menu options just may be slightly different than what I list.
First, you want to open your full size (12×12 or 8×8) .jpg file of your layout.
Next, you will resize your layout. In CS you do this by image>image size. In PSE it’s image>resize>image size. The dimensions will be 600×600 pixels and 72ppi. Change the pixels/inch first and the size second.
Next, you will sharpen your image. This is what makes it really pop on the web, instead of having that slightly fuzzy look. You’ll do this by applying an unsharp mask to the entire image. In CS you’ll find this in filter>sharpen>unsharp mask. In PSE you’ll find it in enhance>unsharp mask. My settings are as follows; amount: 150, radius: 0.3, threshold: 0. You could play around with it a bit if this doesn’t look quite right to you.
Now you will save your new file. Make sure you choose “save as” and not “save”, you don’t want to overwrite your full size file. I always save my file with the same name as my original, but I add the word “small” to the end.
There you have it! A few easy steps to really make your layouts pop when they’re uploaded to the web. I’ll end with a visual of how my layout looks before and after resizing and using the unsharp mask.
Before:
After:













































