Author

TheDesignJunkie.com is the blog of Cole Hicks. Cole is a web designer, consultant, and computer book author covering topics related to graphic design, the web, and web 2.0 technology.

Newsletter

    Weekly newsletter packed full of the latest web design tips, tutorials. It's free to subscribe and you can opt-out at any time.

Photoshop Tip #6 | Use Photoshop Actions to Batch Process Photos

11 November 2007 - 19:53

If you post images to websites with any frequency you’ll eventually realize that you end up doing the same routines time and time again to prepare photos for the web. For example you may always end up with a 200×200px square with a border and some padding, or each image you work with may have some specific information printed on it, or each one may need to be set to black and white, etc. What if I told you that you can get through an entire day’s worth of formating in just a few minutes? You’d want to find out how right? Of course you would.

Thankfully those creative folks over at Adobe know a thing or two about how to increase productivity. That’s why the built the functionality to create “actions” in Photoshop.

What are Photoshop Actions?

In Photoshop, actions are a set of recorded events. They range from selecting and using tools to re-sizing, changing colors, applying filters, all the way down to cropping and saving. The user creates the actions either by coding them in a script or recording them. Once the action is played back the recorded/coded events take place in the order they were saved and are applied to the current image.

Batch processing is the task of applying an action or set of actions to a set of images. So how do you batch process images? Simple, just follow the steps below.

Batch Processing with Photoshop

Imagine we have a group of photos that we want to turn into smaller web snaps for our travel blog. They are all big photos, with not much consistency from one to another:
Batch Photos to Process

Looking at the pictures we decided that for our blog we want to re-size them all, add a border with some padding, and then save the output to a separate file and close out of the original image.

Step One, Open the Image and Create an Action Set

To create a new action go to Windows > Actions to bring up the actions pallet and then select the icon that creates a new action. It’s located right next to the little trashcan and looks like the new layer icon.

New Action

We’ll create an action called Create Blog Post Card and hit the record button. What this does is follow us through the first creation of a blog post card image. It is important to remember that the events that are recorded will be applied to every image that is processed so we need to think carefully about what we are doing to our images.

For our purposes we are going to first re-size the image:
Resize Image

We set the image to 400px wide and didn’t pay attention to the height. You could if you want to, but for our purposes here it isn’t needed. Next we’ll add a border to the image by extending the canvas size:

Canvas Size

And finally we’ll output the image to the web.

Web Output

Stop the Recording

Once you have completed the process once you simply stop recording by pressing the stop button.Stop Recording

Start Batch Automation

Now that we have the action, it is time to batch process the images. To do this, select File > Automate > Batch from the file menu. To bring up the Batch Process window. Fill it out, run the process and your done!
Batch Command

No Comments | Tags: Photoshop

Photoshop Tip #5, Speed up your life with Photoshop CS3 Keyboard Shortcuts

4 November 2007 - 1:51

Most people are aware of a few keyboard shortcuts, but they haven’t incorporated those shortcuts into their work routine. Just like learning to type, keyboard shortcuts take a bit of practice to get used to. But once you commit to learning them you’ll wonder how you ever got along without them.

Download a PDF list of all of the available Photoshop CS3:

Photoshop CS3 Keyboard Shortcuts - Mac

Photoshop CS3 Keyboard Shortcuts - PC

Of course the Photoshop CS3 keyboard shortcuts that I use most often are related to the tools pallet. Here’s a list of the few that I use most often:

A - Path/Direct Selection Tool
B - Brush/Pencil/Color Replacement Tool
C - Crop Tool
D - Default Colors
E - Eraser Tool
F - Cycle Screen Modes
G - Gradient/Paint Bucket Tool
H - Hand Tool
I - Eyedropper/Sampler/Measure Tool
J - Spot Healing/Healing/Patch/Redeye Tool
K - Slice Tool
L - Lasso Tool
M - Marquee Tool
N - Notes/Audio Annotation Tool
O - Dodge/Burn/Sponge Tool
P - Pen/Freeform Pen Tool
Q - Standard/Quick Mask Mode
R - Blur/Sharpen/Smudge Tool
S - Clone/Pattern Stamp Tool
T - Type Tool
U - Shape Tool
V - Move Tool
W - Magic Want Tool
X - Swatch Colors
Y - History/Art History Brush Tool
Z - Zoom Tool

No Comments | Tags: Photoshop

Photoshop Tip #4, Creating Reflections on Subjects

1 November 2007 - 20:48

Have you ever wanted to create a reflection on your subject with Photoshop? Sure you have, but no one has shown you the trick. In this Photoshop tip I’ll show you how to create a reflection on your subject.

To demonstrate I’ll be putting a reflection in a crystal ball.

Step One, Select the reflection area using the Marquee or Lasso Tool

Open your image in Photoshop and select the area you want to create a reflection on using the Marquee or Lasso tool.
Photoshop Tip 4, Figure A

Step 2, Copy the reflection you want

Open the image you want to use as the reflection, the section you want to use, and copy it to your clipboard by pressing [ Ctrl+ C ] on a PC or [ Command + C ] on a mac.
Photoshop Tip 4, Figure B

Step 3, Paste the reflection you want on to a new layer

For this step I’m using the “Past Into” function which will past the reflection into the area I’ve selected on my crystal ball.

Photoshop Tip 4, Figure C

Step 4, Change the opacity

Next, we need to bring down the opacity of the reflected image so that it looks more realistic.

Photoshop Tip 4, Figure D

Step 5, Tone down the edges of the reflection

To make the crystal ball more realistic I’m going to tone down the edges of the picture by simply using a light eraser. You could also use a layer mask which would preserve the reflective image.
Photoshop Tip 4, Figure E

Step 6, Duplicate the reflection to use on the floor

I’m adding this because light needs to bounce off of the crystal ball. To get that effect with the reflected image we simply duplicate the reflection layer and flip it vertically.
Photoshop Tip 4, Figure F

Step 7, Distort the reflection as needed

Finally, distort the reflection by selecting Edit > Transform > Distort and then drag it into place.
Photoshop Tip 4, Figure G

And that is it. You’ve now got a reflection of a dog in a crystal ball.

Photoshop Tip 4, Figure H

No Comments | Tags: Photoshop

Photoshop Tip #3, Create a Text Bounding Box

26 October 2007 - 3:32

There are times when you want your text to fit within a selected area. This is when it is a good idea to create a text bounding box. To create one simply select your text tool, click and drag across your image to create the box and type away.

text bounding box, photoshop tip

No Comments | Tags: Photoshop

Photoshop Tip #2, Reuse Your Curve Settings

23 October 2007 - 4:00

From time to time you will have applied a curve setting to an image and you’ll want to reuse that setting. To bring up the Curves dialog box with your previous setting in tact simply press Alt + Ctrl + M on a PC or Option + Cmd + M on a Mac.

Bring up the Curves dialog with the previous setting

No Comments | Tags: Photoshop

Photoshop CS3 Tip #1, Rotate Through Open Images

22 October 2007 - 1:50

Tired of using a mouse to move through open images in Photoshop? Here’s a tip to help you save a bit of time. Use the keyboard shortcut [ Control + Tab ] to rotate quickly through images. It is very useful when you have a stack of them open at one time.

Photoshop Tip #1, From the Design Junkie, Cole Hicks

No Comments | Tags: Photoshop