Sahlin Studio | Digital Scrapbooking Designs

Save Digital Scrapbooking Layouts for the Web

You’ve just finished a beautiful scrapbook page, and you would like to share it with your friends and family; or in an online gallery. How do you do this? For those of you new to digital scrapbooking communities and/or galleries, you might have not had the need to save your layouts for viewing on the web before. Images that are shared on the web are very different than images saved for printing, because the viewing size is smaller. Plus the fact that a 300dpi 12in x 12in.jpg scrapbooking file is HUGE!! WAY too big to send through an email or for viewing on a monitor. In this tutorial I will guide you step by step, and show you how to save your layout or photos with the best quality for Facebook or your favorite gallery.

[pinit]

How to Save Scrapbook Layouts for Sharing on the Web

Save many copies.

Normally I save THREE (3) different copies of my files.
1) as a full-size layered PSD file;
2) a full-size JPG for PRINT;
3) a 600px x 600px sized JPG for web-viewing.

To save for option 1 (original layered PSD file) – go to File > Save As and choose the PSD option
To for option 2 (a full size PRINT copy) – go to File > Save As and choose the JPG option.

Be sure you name them different too!!
My naming practice is: layoutname-PSD; layoutname-PRINT; layoutname-WEB

Saving your Digital Scrapbook Layout for Web Viewing

Step One | Flatten the Layout – To flatten go to Layer > Flatten Image.

After this step, you’ll see only one layer in your Layers Palette.

layerflatten

Step Two | Resize the Layout Change the size of your layout to a web-appropriate size.

Click Image > Image Size. This will bring the dialogue box you see below:

Change the settings to 600×600 pixels with a resolution of 72 pixels/inch.

image sizeimage size for web viewing

Step Three | Sharpen Your Layout This is the step that takes your layout from “eh” to “WOW” when viewed online. It’s a small change, but it helps to crisp and pop the image.

Click Filter > Sharpen > Unsharp Mask

It will open a dialogue box. Adjust Settings | I use these settings: Amount: 150 Radius: 0.3

Start with the settings pictured below, and adjust as needed.

unsharpen mask

Step Four | Save your Ready-for-Web Version

Click File > Save for Web and Devices. Choose JPEG High from the Preset drop-down; with Quality around 60. Keep an eye on the size (it’s in the lower left corner) Try to keep your layout sized around 150K. This is the limit for many digital scrapbooking galleries.

save for web

And You Are Done!

dot-divider

Curious to see what difference the unsharp mask makes in the final product?

unsharpen mask - before after

Here is my layout both ways:

This image was simply flattened, resized, and saved with no unsharp mask.

This image follows the above step-by-step process exactly, including an unsharp mask.

I hope this tutorial helped you get comfortable saving your layouts for the web. Next week, look for another simple step-by-step on exactly how to share your layouts and link your credits in an online gallery.

dot-divider

Now that you know how to save your layout for the web, how about a shortcut? Sahlin Studio’s Resizing Action will flatten, resize, and sharpen your layouts for both print and web with one click. If you need help installing the action, we have a tutorial for that! Check out How to Install and Use Actions here.

Print, Web, Sharpen Images Action from Sahlin Studio

Comments

  • Thank you for this tutorial. I wasn’t sharpening before but will start doing it now!

  • Krista, I do all these steps except I don’t use flatten, I use Merge Visible because I’ve found that flatten sometimes messes with the shadows and styles and merge visible keeps them truer

  • I was doing “save for web” and then sharpening the JPEG it produced but the results were sometimes too bright. This turns out perfectly every time. Thanks for sharing!

    BTW – Do you do anything special before printing?

    • Oh I’m so glad this worked great for you Heather!!
      Yes, I do basically the same technique when I print as well…
      I just use a little different number for sharpening a layout for print.
      I’ll have to do a tutorial on this one soon.

  • […] Sahlin from Sahlin Studio explains how you can best save your digital scrapbook layouts for display online. She illustrates what a difference it makes by sharing before and after photos of one of her […]

  • […] I’m using a new technique for saving files to share on the web that is sooo fantastic. Just a little different from what I was doing before, but the results are […]

  • Krista, will your Resizing Action work in PSE 9? Thank you.

    • I do have PSE users who have gotten the resizing action to work. I don’t have PSE, so I’m not able to check for you… but I think it is all where you place the files to get it to work. If you want to give it a try, go for it. If it doesn’t work for you, I am happy to substitute with something else in my shop.

  • Wonderful tutorial!! I just finished trying out a kit for someone and I had no idea what to do about the size of my layout! It’s a nice extra bonus that I can finally post to galleries now! Thank you!

    • I’m so glad this tutorial worked for you… Can’t wait to see your lovely layouts in the gallery!

  • […] Save Digital Layouts for the Web from Sahlin Studio […]

  • I suppose you need to use photo shop or similar? I have been using DIP.

  • Thank you so much…I have often wondered how to get my LOs to look crisper. This is great. I would love the steps you use to sharpen before printing too. Thanks again!!

    • Oooh… I’m glad this work for you!! I’ll be sure to post about what to do after printing layouts as well!! Be sure to check back!

  • […] love Krista Sahlin’s previews.  They are so bright and clear.  In this post, she’s got a very nice tutorial on how to do it.  Here are two previews, one saved for the […]

  • I just tried this and compared the old way I was saving for the web and THIS way… I am so excited with the results!! It makes all the details, just POP!! I’m so glad I tried it!

    Thanks.

  • […] New here? Subscribe to my RSS feed or Email and never miss a post!Now that you know how to save your digital scrapbook layouts for the web, your 600x600px image is ready to share with your friends in the digital scrapbooking community. […]

  • […] or Email and never miss a post!If you’ve been following the blog lately, then you know how to save your layouts for the web, and how to upload a layout and properly link your credits in an online gallery. Now we’re […]

  • Jennifer B. says:

    Thanks for this tut! What image settings do you recommend when posting a 2-page layout?

    • I use the same settings, and only upload 1 page into the main portion of the gallery. Then I include [img] tags in the description area and save the two-page spread at 700px wide.

  • Thank you so much for this! I had heard about sharpening to save for web, but I didn’t know what settings to use and the whole thing was a bit of a mystery to me. This is extremely helpful!

    I am very curious to know how you save for print as I am just about to print my first photobook of PL layouts and I’d love for them to look as nice as possible.

    Thanks so much!

    • I’m so glad this helped you out!! For printing you can use the same techniques and play around with the settings a little more to get a look you like. But I will put that on the list to tackle soon!

  • Love the tutorial– thank you! I have my eye on that action, but I wonder if it will work with PSE12?

    Thanks!

    • I do have creative team members that use PSE and it works beautifully. But loading the action a little different than PS CS.

      • Thank you! Purchased and installed, playing with it now.

        Turns out it’s WAY easier to install actions in PSE11+; that makes the purchase price of PSE12 worth it all by itself!