Hi everyone, this time I'll show you some of the basics of Photoshop's Automate options and some practical applications. We'll create a complex action, build a Droplet with it and batch edit a folder with pictures. Then we'll create a custom web photo gallery. Let's get it started!
Part I - Creating the Action
Final Image Preview for Part I
Let's take a look at the gallery we'll be creating. Click the screen shot below to view the web photo gallery. As always, the tutorial files are available via our Psdtuts+ Plus membership.
Step 1 - Let's Get it Started
Since not every Photoshop user is a graphic designer, neither a web developer, there's a lot of people who need graphic tools that can make their life easier. If you're a photographer, or a webmaster, maybe this is the right tutorial for you.
This time we're going to build a custom web photo gallery in a blink of an eye, are you ready? First, put all the pictures you want to include in the gallery into a folder anywhere in your system. Then open any of those pictures, we'll use them to create the Photoshop Action Set to batch edit the folder later.
Step 2 - Set up the Action
Now start with the action. First open the Actions Window, go to Window > Actions or hit Option + F9. Then click on the tiny folder icon to create a new Action Set, name it "Psdtuts+."
Once you have created the set, create a New Action by clicking the little folded sheet on the Actions window. Name the new Action "Vintage Halftone." Once you have finished, you'll notice that there appears three small icons, Stop, Record and Play. These are the Action controllers. Ensure the Record option is selected an go to the next step.
Step 3 - Resize the Picture
Now we'll build the action. I will explain what you should and what you should not do when working with actions on each step; you must be very careful when doing each step as is, otherwise the result will be different. Once you have opened your picture, and ensured the Record option on Actions window is selected, you can start recording the steps.
The first one will be resizing the image. Since all our pictures will become a web gallery we need to reduce them a lot, for this go to Image > Image Size and set the Width value to 700px, check the Constant Proportions options to keep the image's aspect ratio. Also, check the Resample Image option and select Bicubic Sharper, which is best for image reduction.
Do not resize the image by other methods, like Free Transform, because the math applied resizing the image is hard coded, and it will only work for similar images, e.g. it doesn't work for a vertical picture. Hit OK and go to next step.
Step 4 - Duplicate the Image
Now, a useful step on each complex action process is Reset Swatches. Do this just by pressing D key on your keyboard. Do not change the swatches using the color picker. Then double click on the "Background" layer in the layers palette to make it editable, drag and drop the layer miniature over the Create a new layer icon, this will duplicate the layer. Ensure that the "Layer 0" copy is selected and go to next step.
Step 5 - Add a Diffuse Glow
As "Layer 0 copy" is selected we'll going to add a Diffuse Glow filter to it, to increase the lights and add a dramatic look to our image. Go to Filter > Filter Gallery and select Distort > Diffuse Glow filter. Set the values as shown below and click OK.
Step 6 - Change Opacity and Merge Layers
Now we'll move down the "Layer 0 copy" opacity a little bit, for this enter an Opacity of the desired value (75% in this case) and hit return. Do not use the slider to change the Opacity value, because you'll record a step for each percent stage 100, 99, 98, 97 ... 75 and we don't want that. Next, Shift + Click on the "Layer 0" miniature, then Command-click (or right-click on the PC) and select Merge Layers. Your resultant layer must be just "Layer 0 copy."
Step 7 - Gaussian Blur Filter
Duplicate "Layer 0 copy" by dragging its miniature over the Create new layer icon, which will create a new layer called "Layer 0 copy 2" just above "Layer 0 copy." Ensure that "Layer 0 copy 2" is selected and go to Filter > Blur > Gaussian Blur, set the radius to 2 pixels and click OK.
Step 8 - Change the Copy's Blending Mode
Change "Layer 0 copy 2" Blending mode to Overlay, do not switch on blending modes because Photoshop will record each try you've made, go directly to Overlay. If you want to try this with different blending modes options click on the Stop button in the Actions window, select your favorite blending mode, then Edit > Undo until you're back at the last recorded step. Next, click on the Record option again to go directly to your desired blending mode. Finally, set the Opacity value to 70%.
Step 9 - Create a Fill layer
Now, let's add a black background to our work. For this, go to Create New Fill or Adjustment Layer > Solid Color, set #000000 on hexadecimal color and hit OK. This will create a full size fill layer, then click and drag the "Color Fill 1" layer and place it below the "Layer 0 Copy" in the layers palette.
Step 10 - Add a Layer Mask
Then click on "Layer 0 copy" miniature and go to Layer > Layer mask > Hide All.
Step 11 - Select Layer mask
Now we're going to create an irregular border on our picture. Once you've created the layer mask, you must click on its miniature, then create a full selection by pressing Command + A on your keyboard. This is a critic step, if you don't click on the Layer mask's miniature, the result will become ugly at the end.
Besides you must Select All; you can not use the Marquee tool and make an arbitrary selection. If you do that, Photoshop will store the coordinates as hard numbers only for a single picture, and it doesn't work on any other.
Step 12 - Transform the Selection
Now go select the Marquee tool in the Tools palette. Command-click and choose the Transform Selection option. Now the selection will appears with the free transform shape, but don't transform the shape itself. Check on the top panel there're two values W and H (these are Width and Height and must be on 100%). Click on the little chain in middle of both values and change the value of any of them to 95%. This way you'll be reducing your selection shape by 5%. Now hit Return twice to apply the transform.
Step 13 - Create an Irregular Border
Here's where the irregular border takes shape. Check that your selection is a square and a few pixels away from the border. Also, ensure that "Layer 0 copy's" layer mask is selected. Then go to Select > Refine edge, and set the values of the image below and then click OK. At this point you should have an irregular selection like the bottom of the following image. If you're working on a different size of image, you should play a little bit with Refine edge's values to obtain a good effect.
Step 14 - Fill the Selection
Now let's fill the selection with white. First hit the D key to reset the Swatches, then select the Marquee tool in Tools palette, Command-click anywhere over the selection to see the options, and click on Fill... option. In the dialog set Contents to Use as Foreground Color, Mode as Normal and Opacity as 100%. Finally, hit Command + D to deselect the selection.
Step 15 - Duplicate Actions
Now let's repeat the irregular border process (Steps 10 to 14) but this time "Layer 0 copy 2" layer. You can just repeat the previous steps or duplicate them in the Actions window. To duplicate the steps, first Select "Layer 0 copy 2" layer in the Layers palette and TOP the action after that.
Next select (in the Actions window) all the steps involved on the border creation process, that means from the "Make" step, after selection "Layer 0 copy" layer, until the "Set Selection" step, just before Select "Layer 0 copy 2" layer.
Select all those layers by Command or Shift-clicking on them, then go to the advanced options and select Duplicate, by doing that all your selected steps will be duplicated just below the last step ("Set selection"). Now just drag and drop the selected actions below the "Select 'Layer 0 copy 2'" step. Finally, click on the last step in the Actions window.
Step 16 - Halftone Pattern
Next, click on the Layer mask's miniature of "Layer 0 copy." Next, go to Filter > Filter Gallery, and browse to Sketch > Halftone Pattern and set the values shown below, then hit OK. This process will apply a Halftone Pattern on the layer mask.
Step 17 - Add a Photo Filter
Next select the "Layer 0 copy 2" in the layers palette, and then go to Create New Fill or Adjustment Layer > Photo Filter, select Color Option (#957345), and set Density to 100%. Then just hit OK.
Step 18 - Hue/Saturation Adjustment
Following, create a New Fill or Adjustment Layer > Hue Saturation, set the values shown below and hit OK.
Step 19 - Fill a New Layer
In the layers palette, create a New layer, ensure the new layer is above all the others. Actually, it's the first layer we've creating so it supposed to have this name: "Layer 1." Hit Command + A to make a full selection, then select the Marquee tool, Command-click and choose Fill... use Foreground color to fill the selection with black.
Step 20
Next add to "Layer 1" a Pattern Overlay effect. I'm using "Gray Granite" from the Grayscale Paper preset.
Step 21 - Rasterize the Layer Effect
Following create a new layer, then Shift-click "Layer 1" in the layers palette to select both layer, and hit Command + E to merge them.
Step 22 - Change texture layer's blending mode
Now change the "Layer 2" Blending Mode to Multiply and Opacity to 75%.
Step 23 - Flatten the image
In the layer's palette, select "Layer 2" and Shift-click on the "Color Fill 1" layer. This way you'll be selecting all the layers. Then, within the layer's palette options, select Flatten image. Finally, in the Actions window, click on Stop. And that's it, now we have a custom action ready to run.
End of Part I - Test Your Action on Different Images
Now it's time to test if your action works properly on other pictures. Try to use it on wider or taller images. If you followed the simple rules of the previous steps, there'll be no errors. To re-apply the action on another image, just open the image, select the "Vintage halftone" action and press the tiny Play button.
Before moving forward, it's a good idea to save the action itself. For this Select the "Psdtuts+" action set in the Actions window, then go to advanced options (the tiny list at the top right of the actions panel) and select Save Actions... write a name for your action set and save it anywhere you want. Now we're ready for batch editing.
Part II - Batch Editing
Step 1 - Create a Droplet
A droplet applies an action to one or more images, or a folder of images, that you drag onto the Droplet icon. You can save the droplet anywhere you want and reuse it as many times as needed. To create a Droplet, go to File > Automate > Create droplet... a dialog window will appear. There you can choose many options.
First choose your original pictures folder and save the droplet there. On Play options select the "Psdtuts+" action set and Action of Vintage halftone. On destination select Folder and choose a different folder than the original pictures' folder. In this case, I'll call it "vintage pictures."
Besides, you can customize the names of the resultant images by adding custom text, series of numbers, extensions and maximize compatibility. Once you've set up your custom droplet, click on OK. As you can see at the bottom of the following image, I've created a droplet in a folder with many pictures in it.
Step 2 - Make the Droplet Work
Now open your images' directory, select and drag the images you want to edit onto the droplet icon. You'll see that Photoshop is auto-editing all the pictures one by one and saving them into your selected destination folder. Finally, open the resultant images' directory to see how they look.
End of Part II
At this point, you have a nice collection of vintage halftone pictures, ready to print if you want to, or ready to upload them into a blog, or Flickr, or anywhere. But we'll move a step forward, we're going to create a custom web photo gallery with our vintage pictures using only Photoshop.
Part III - Web Photo Gallery
Step 1 - Select the Template
Photoshop CS3 has the Web Photo Gallery feature, by using this we can create complex HTML or FLASH galleries in minutes. Let's give it a try. First, we need to open the Web Photo Gallery window. For this, go to File > Automate > Web Photo Gallery... When the window is open you'll notice there's three important fields to customize.
One of which is Styles. There you can change the look and feel of your web gallery and the contact email. Two is Source Images. There you may select the source files and the destination. The third is Options, which depending on the Style, you can customize several features of the gallery like background and foreground colors, images' and thumbnails' width and height, and security options.
First, we're going to change the style. I'm choosing "Flash Gallery - 1" (I'm using Photoshop CS3 extended by the way) because it's a beautiful and full customizable web gallery. You can add an e-mail as well. For now, do not click anywhere and go to next step.
Step 2 - Select the Source and Destination Folders
Go to the Source images section, select Use as Folder and browse your system until you find the "vintage pictures" folder created in Step 1 of Part 2. For destination, browse your system, create a new folder anywhere and name it "vintage gallery."
Step 3 - Customize Your Gallery
Now it's time to customize the visual aspect of your gallery. Start by selecting the Banner option, write a title for your gallery and add some contact info as well. Then select Large Images option and set the full view width and height, also set the JPEG quality and the Titles of each image.
On Thumbnails option customize the maximum size of the thumbnails. On custom colors, set these values: Background of #000000, Banner of #000000, Text of #DEC8A1, Active Link of #DEC8A,1 Link of #FFFFFF, and Visited Link of #EBDABE. Finally, for the Security Option we're going to add a Custom Text as a watermark. Once you've finished the customization process, hit OK in the Web Photo Gallery window and let Photoshop do the hard work. In a matter of minutes your gallery will be ready.
Conclusion
Photoshop's Automate options are great time savers and a must know feature for designers, webmasters and photographers. Try this tutorial with your own pictures and have fun!
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
