Hi, Mary Shaw here today. In this tutorial, I’m going to walk you through saving your layouts for the Web in Photoshop.
My layouts are awesome. They’re not awesome because I’m the best scrapper in the world. I can assure you I’m not. They’re awesome because they’re my own creation: a piece of me. I spent time and effort to take the photos, choose the best pics, and pick coordinating templates, paper, and elements. I put them together all by myself. And I’m pretty darn proud of them!
So: I need to share them online. I need to put them on my personal blog, my Facebook account, and in the Design House Digital layout gallery. in this tutorial, I’m going to walk you through saving this layout for the Web.
First, I open my layout in photoshop – it’s a .psd file.
Because my layouts are so awesome, I need to save them as the very biggest file size for online sharing – right?!! Wrong! Online, bigger is not always better. Instead, let’s just say smarter is better.
The main things to consider when saving layouts for the Internet are:
- Image size
- File type
- Image quality
- File name
Image Size
My 12×12 layouts are pretty big. If I try to open the Save for Web & Devices box in Photoshop while viewing my layouts at full size, I get an error.
The best way to avoid this error is to resize my layout before opening this box. First, I save my layout at full size. I can’t save my layout as a .psd again or I will lose data in my original file.
Then, I go to Image > Image Size and change the height and width from 3600×3600 to something below 1000×1000. The resolution needs to change from 300ppi (pixels per inch) to 72ppi. When I change this number, the height and width of the image automatically changes to 864×864. I like this, so I keep it at that.
Now that my image is an okay size and resolution for the Web, I can move on.
File Type
File type is easy. For a layout, the best file type is .jpg, hands down. .gif and .png are good for other things, but not for files that have the combination of text and photos that layouts have.
Web files are so different from their printable counterparts that Photoshop has dedicated a whole sub-program just to saving for the Web. It’s very important to use this when saving images for the Internet. I go to File > Save for Web & Devices.
To choose the jpeg file size, I select it in the top right hand side of the Save for Web & Devices box.
Image Quality
Images saved in .jpg format can be saved at a wide range of file quality. The same image can become a very large file and high quality or a very small one and low quality, and I have total control over it.
Here you can see my layout at various levels of quality. 25% is almost as good as 100%. I look closely at Timmy’s Gatorade bottle to look for a visible difference.
For the Web, the lower the quality, the smaller the file, and the quicker the page loads on peoples’ computers. So, small is good. When surfing the Web, “what you see is what you get.” If I save the file at a quality that looks fine to me, it will look fine to everyone who looks at my layout.
So I click the down arrow next to “Quality” and tap the little quality bar that pops up, sliding it back and forth until I find the number just above where the picture starts looking bad. For my layout, I found this point at 40% quality.
In the box, file size is depicted at the bottom left. This tells me how big the file will be once it’s saved.
File Name
I like to make sure my file name is descriptive and yet good for a Web filename. So, I use all lowercase letters and hyphens instead of spaces. I tack something onto the end to remind me what kind of a file it is: either “web” or “width x height.” So for this layout, at 800 by 800 pixels, I would save it as “discovery-park-800×800.jpg” or “discovery-park-web.jpg” . Then I save another version at 450×450 pixels, called “discovery-park-450×450.jpg” for inserting into this post right here:
And that’s it. My file is saved for the Web. Since I shrank the file to a size I don’t want to keep, I close my original layout without saving it.
I hope this helps you when saving your files for the Web. Happy scrapping, and happy blogging!
