Photoshop Tips: Save for Web

The Lilypad and other sites on the web, where we showcase our layouts, have a maximum file size limitation for posting of about 250k. Many of us make our layouts as 12” X 12” (or 3600 X 3600 pixels), with a DPI of 300 for printing purposes. That is a HUGE file and WAY over the limit for the web! In order for us to share/showcase this with our friends at TLP, we will need to resize our page smaller, without distorting it and losing original quality.

Some of us “Digi’s” have a hard time with resizing for the web. I have some quick easy steps to follow that will assist you as you “Save for the Web”.

Save for the Web:

Start with your completed layout.

• Select  Image > Image Size from the top tool bar

• Change your image size to the following settings:

• In layer palette, right click with your mouse and duplicate background layer

• Now we will sharpen the image.  From the drop down menu select:  Filter> Other> High Pass

• Use setting of about .3 for the High Pass, then click on OK

• Set the High Pass Layer to blend mode Linear Light in the layer palette.

• If it is too bright, adjust opacity level down between 75% and 61%.

• From tool bar select  File > Save for Web & Devices

• Now to adjust the Quality slider. The quality slider changes the size of your image. At the bottom left corner under your image will show the new size of your image for the web. Generally a quality of 75 should be sufficient. TLP has a file size limitation of 250K. As long as your number is less than 250K it would be the correct size for the web. If you are satisfied, with the results, then click the save button.

• You are now done! Here are the before and after photos of resaving for the web.

[Contributing Author Iva (a.k.a. Damayanti). Kate Hadfield’s products used to design the above are the following: Printables: Diamond Jubilee , Cool Britania , Great Britons , Great British Alpha , and Red White n Blue all found at The Lilypad.]

*Bonus Note: “Save for Web” is a great action for you to have in your Photo Shop “Tips & Tricks” toolbox. Repetitive procedures as an Action make for quick work for the future!  To make this action follow the following instructions:

• Select the Create New Set button.

• A box will pop up. (New Set).  It will ask you for the name of your set. Name it “My Actions” and click OK.

• Click on the “Create new action button”.

• It will bring up another box.  Name your action “Resave for Web”.   Scroll in the drop down on “set” for your new folder name. (Your new action will be placed in this folder).  Select Record.

• By selecting Record, this will start recording all the steps you take to “Resave for the Web”.
• Start by going to File > Open and locate the layout you want to resave for the web.
• Go to Image > Image sizing (If your image is not square, only worry that width or height, the bigger of the two, that the larger one is 600 pixels) – resolutions should be 72.  OK.

• Duplicate your layer in the layer palette.
• Go to Filter > Other > High Pass and set the number to .3   OK

• Go to layer palette and select blend mode of Linear Light and switch to opacity 61% (to 75%).

• Go to File > Save for Web & Devices  save quality at 75 or lower so file size is less than 250K.

• Click on the “stop recording” button.

• Look over your action in the action palette to place stops.

• Click on open step and select the empty box as you will want a stop placed there so you can choose your file. That will put a black dialog box there. Once you do that, a red dialog box automatically will be placed next to the name of your action “Resave for Web”. You will select the blank box for each step you want the action to stop at. See the below screen and the reasons in the next screen with details.

Hope you enjoyed both the “Save for Web” tutorial, and how to make your own Action of this task! Until next time…Happy Scrapping!