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!
Related posts
Tags: Design House Gallery, Mary Shaw, Photoshop, Scrapbook Layouts, Templates, Tutorials
Great post! thanks Mary. I agree, your layouts are awesome!
This is helpful, but there are a couple of points I don’t totally agree with:
1.) It’s not necessary to re-size first to prevent that error box on the Save for Web menu. I’ve never experienced any slowness or difficulty from choosing Yes to continue.
2.) If you do re-size for saving in Photoshop Elements, its important to flatten your digital layout first.. else any drop shadows will not scale proportionally. (PSE does not have the option to scale styles.)
3.) While the easiest method to guarantee an output size, Save for Web decreases the saturation of digital layouts. Thus, the final image won’t have the exact same coloring as the original. (If you’re going to the trouble to re-size manually anyway, its just as easy to save your jpeg with a lower % quality the normal way and not fuss with Save for Web.)
4.) It’s important to remember that many digital scrapbooking galleries only allow images of 600×600 and 150K – so these are the sizes that are most community throughout our community.
Ha Ha! Thanks, Jen!
I wrote myself a “resize layout” action to use in Photoshop to prep my layouts for the web.
1) Save PSD
2) Flatten layout
3) Resize to 500 X 500 at 72 dpi
4) Smart sharpen, Amount 100%, radius 60 pixels
5) Increase saturation 12%
6) Save as .jpg, quality 5 (medium)
This has always worked great for me, and my layouts never look faded or mushy!
Thank you for the post, great article and I love the layout that you used for your tut!