16
Website-Ready Your Images with Photoshop Actions
Photoshop actions have become a fundamental part of the workflow to many photographers. However, they are not just limited to the automation of editing techniques. If you have an online portfolio to display your photography masterpieces, then you must have developed a certain system to preparing and saving your photos for upload. In this tutorial, I will show you how to easily use Photoshop actions to automate that system and avoid those repetitive steps every time you wish to save an image for your website.
1. When you have finished editing your image, click on the Actions tab located in your toolbar, or press ALT + F9 to bring up the Actions window. Select or create a Set to assign the action under (for the example, I selected the “Website” set, which is highlighted in Figure 1), then click the “create new action” tab located in your actions palette (Figure 1). Name your new action and select a keyboard shortcut to assign the action to so that you can access it quickly. Click Record to begin recording the functions you perform in Photoshop, which will be assigned to the action we just created..

2. Depending on your website requirements and typical file size, you may input different numbers into these steps. For this example, I will detail the steps I take to website-ready my images and record them to an action assigned to one button so that I never have to repeat these steps again.
First, we are going to merge our layers so that we are working with a flat image. Right-click on any layer in your layers palette and select Flatten Image (Figure 2).

3. Once the layers have been merged, click Image > Image Size (Keyboard Shortcut: CTRL + ALT + I). Adjust your width to 800px. (Note: Changing your DPI won’t make a difference when saving to the web. Your monitor will display only whatever pixel size you determined it to be.) Make sure the Constrain Proportions box is ticked. Click OK to apply your size change (Figure 3).

4. Now we are going to quickly sharpen our image so that it looks crisp and presentable for a website. Click Filter > Sharpen > Sharpen to apply a simple sharpening filter directly onto your image (Figure 4).

5. To add a simple border to your image, click CTRL + A to select your entire canvas. Then go to Edit > Stroke and set your pixel width to 10, color to white, and the Location to inside (Figure 5). When finished, click OK to apply the stroke.

Repeat this process again, only this time set your pixel width to 9 and your color to black. This will give your image a black border with a white pinstripe along the inside perimeter. Press CTRL + D to deselect the canvas.
6. Now it is time to save our image to a designated folder of your choosing. For this example, I will be saving the image to a folder created on my desktop.
Double-check your action palette to make sure you are still recording (the circular button at the bottom of your actions palette should be highlighted in red). Click File > Save As to bring up the Save As window. Navigate to your destination folder as you normally would, press Save, and choose the image quality settings (if saving in jpg format) that you would like to be applied to all your images using this action (Figure 6).

7. When finished, stop recording your actions by clicking on the stop button located in your actions palette (Figure 7).

If you make a mistake at any time during this process, click the stop button on your actions palette toolbar, located to the left of the record button, and select the step you wish to remove. Drag-and-drop it onto the trash can and hit the Record button to restart the action recording process.
Now that you have recorded the action, you can easily apply it to any image by either highlighting the action in the action palette and clicking the “play” button, or just by using the keyboard shortcut you assigned to the action in step 1. The mundane and repetitive process of getting your images website-ready is now completely avoidable thanks to Photoshop actions, which gives you more time to focus on the important and creative aspects of your photography.
Christopher O’Donnell is a professional landscape/portrait photographer who lives on the coast of Maine. When not scouting for new locations or spending time with
his “sons” (his two yellow labs), he is a freelance writer who authors photography course work.
Website: christopherodonnellphotography.com
Like Our Site?
16 Comments
-

-

Pixellicious Photos said:
Very useful post! Thanks for sharing….
-

MYO HAN HTUN said:
Nice. I like it so much .
-

chi said:
what a time saver!!! Thanks.
-

Dorthea Butler said:
I’ve always liked the black backgrounds on the blogs, it’s easier on the eyes. Nice site Crystal and presentation.
-

Terrie R. Greiner said:
i like your blog and article.thanks and bookmark it
-

Igre said:
I have learned in this post. Thanks for the tips.
-

Minneapolis wedding photographer said:
Very useful tutorial. Thanks!!
-

Laren Galloway said:
Excellent explanation, thanks a lot!
-

Bernhard - Fotoretusche.de said:
Nice tutorial .. and liked the related topice too :)
Christoper .. have a great 2011 -

Kraljica juga said:
I live this online tutorials! So simple, and so easy to understand! And it really works!!
-

Tajna starog mosta said:
Nice tutorial, and useful! I really start to take your site seriously :)
-

Asi serija said:
it is working! great!!! :) I really like this website!
-

πλαστικος χειρουργος said:
very nice tutorial! Thanks!
-

Ezel Serija said:
woow, very good explained, thanks!
-

Sulejman Velicanstveni said:
perfect! this is the best site about photography ever made! thanks for advice!





















Making Your Wedding Photography Stand Out
Showcase Challenge: Fences
20 Outstanding Examples of Travel Photography
Techniques of Freezing Action in Digital Photography
Guide To Inkjet Digital Photographic Papers
Simple Rules for Composing Perfect Landscapes
14 Cool Examples of Tilt-Shift Photography
Tips for Perfect Portrait Posing
40 Stunning Photographs of Serene Sunsets
Photographer Showcase: Rivers and Streams by Chip Phillips
25 Wonderful Photographs of Rain
A General Look at Macro Photography
Making Sense of Cloud Storage Services for Photographers
The Golden Hour Portfolio eBook
Portraits of Strangers by Danny Santos
Showcase Challenge: Rain
16 Useful Photography Apps For Your Android Phone
The Breathtaking Beauty of Infrared Landscape Photography