Webmasters Gallery

Want to impress the world with your Web site? Create your very own animated gif using Photoshop.

Instructions

Creating the Art

1

Open Photoshop 5.5 and create a new image file measuring 100 by 100 pixels. Set the resolution to 72 pixels per inch and the mode to RGB color.

2

Choose Show Layers from the Window menu. This will bring up the Layers floating palette.

3

Select the pencil tool. Use it to draw a picture.

4

Click on the Layer palette’s submenu arrow and select Duplicate Layer.

5

Click on the eyeball icon to the left of the bottom layer on the Layer palette. Use the pencil tool to add to the image on the top layer. Select the erase tool to remove part of the image.

6

Under the file menu, select Jump to, and then Adobe ImageReady 2.0. Save when prompted.

Animating in ImageReady

1

Choose Show Animation from the Window menu. This will bring up the Animation floating palette.

2

Click on the Animation palette’s submenu arrow and select Make Frames from Layers.

3

Use Save Optimized As to save the animation under a new name.

In this tutorial, we’ll explore how to add more energy and dynamism to a photo. The effects can be extended and used on a multitude of photos to create a feeling of motion and vibrancy to a static image.

The tutorial was created and written by renowned artist Mike Harrison (a.k.a. destill) and this is his first tutorial for a blog. His work has been featured in Computer Arts and Advanced Photoshop magazines.

OK, enough of an introduction, and on with the tutorial…

Step 1

Start by choosing an image similar to this one of someone jumping in the air (original image). Pick an image that you feel has a lot of energy already, even before you’ve added everything else. Create a new document at A3 size with 300dpi, or if you prefer slightly smaller, then go for A4 300dpi.

Step 2

Drag your image into the new document and grab the pen tool, carefully start adding point by point until you’ve drawn around the entire body of the girl. Hit A to select the path selection tool and right click on the path>create vector mask. This will give us a clean edge and knock out the background, ready for us to add our own.

Step 3

With a blank background, let’s create some instant depth to this piece by adding a gradient. So select the gradient tool and keep it black to white. Now drag from the bottom right to top left, but drag over the canvas edges so that it sort of goes from dark grey to light grey.

Step 4

Now I sometimes like to get colour palette and tone sorted early, and in the case of this piece let’s do just that. What we’re going to do is something ever so simple but very effective in creating the mood of the piece. In the menu go to Layer>New adjustment layer>Gradient map. Now choose the preset blue, red to yellow gradient, hit ok and set this layers opacity to 40%. It looks a bit washed out, so something you should always do is add a couple more adjustment layers and for this piece we’ll add one for brightness/contrast, set to +8 for brightness and +28 for contrast, and one for levels which we’ll set to 15, 1.00 and 246 for the 3 input boxes.

 

Step 5

Let’s give some pop to the girl and add some lighting. Ctrl+click on the original stock layer to create a selection around the girl, then on a new layer, grab the brush tool and using varying sizes and the flow set to around 24%, begin brushing areas you think would look good with some white light on them. Then lower the opacity to around 15-35%.

Step 6

Give the piece some instant energy appeal by adding some diagonal stripes in the form of random geometric selections filled with a pattern. Create a new document 40 x 40 pixels and create a shape similar to the screenshot on the left below, make the background transparent then Ctrl+A and go to Edit>define pattern. Now back to your main document and create some random geometric selections with the polygonal lasso tool and Edit>Fill them with your pattern. Keep them in the direction of the energy of your person in the piece and make some black, some white.

Step 7

Time to add some big bright coloured shapes to get this piece moving. Again with the polygonal lasso tool, create some big geometric multi-sided shapes, and with the gradient tool set from red to yellow, fill your selections and position/transform until you have a nice arrangement. Place them above or behind the diagonal striped shapes, whatever you feel looks good.

Step 8

Now start to layer it up by adding lots more shapes of various sizes over and behind the girl. Do what we did in the last step by using the polygonal lasso tool and create sharp shapes. Fill some with a black to white gradient, others with a yellow to transparent or red to transparent, play around with it until you’ve padded out the illustration with a nice amount of shapes.

Step 9

Looking good? I thought so. Now let’s get some detail worked into this piece. To do this lets create some shards to enhance to energy of the piece. Grab the polygonal lasso tool again and create a small angular shape, hold down shift and create another. Repeat this several times until you have a bunch of shapes. Then fill them with black/white and position. You could also use the pen tool, but in this instance the lasso tool is better as the shapes will feel more erratic and unplanned, which is what we want.

Step 10

Time to develop the piece some more. Grab the polygonal lasso tool (yet again) and create some more selections, but keep these quite square and not as sharp to provide some contrast to the other shapes we created earlier. Fill with black and apply a gradient overlay with the settings shown in the screenshot below. Notice the effect on the girls arm, it’s now showing through as a solid shape because of the lighting we added to her in step 5. So place a shape behind that layer so it shows through, also feel free to create this effect with other body parts of the girl.

 

Step 11

For some added energy, flow and detail we can add some thin lines to the image, both over the top of most layers and some right in the background. So grab the line tool and set it to 2 pixels wide, on a new layer start drawing some lines in the direction of the rest of the shapes, don’t go too crazy with them though, keep them subtle. Now make the line tool 1 pixel wide and on another new layer draw some more lines, almost as if the lines are fragmenting.

 

Step 12

To further enhance the energy let’s create some light streaks. So create some more thin sharp shapes and fill them in white. Go to filter>blur>motion blur and make the angle the same as the angle of your shape, with the distance set quite high to around 4-500. Duplicate and arrange some shapes and play with opacity and blending modes for more interest.

 

Step 13

The image is now looking great but it’s not quite complete, it needs some finishing touches. So create some more particles with the pen or lasso tool and fill them with white and position them behind most of the layers. Also create some larger shapes with subtle gradients and overlay blending mode to give off a nice look, position them as you’d like to achieve a nice balance. I’ve marked out where I’ve added some extra shapes to using selections in the screenshot below.

Step 14

Almost there, and to make things abit more dynamic for some of the shapes. Grab the brush tool at a size around 900 with the flow set to around 15-20%. Gently brush onto areas to lighten it up, be very subtle with this though as you don’t want to kill it. Then lower the opacity to blend it in nicely.

 

Step 15

For the finishing touch well, you may not be a fan of textures but I am, and for this piece it will work really well. Find a high res paper texture like the one in the screenshot and drag it above all layers in your main document, scale it up to fit if needs be and set the blend mode to color burn with opacity at around 40%. This makes the colours really come to life and makes the image more moody.

 

Step 16

So there we are, check the finished image below! With images like this, there is a minimalist route and a more chaotic route where we could have kept on going adding more and more shapes. But in this instance we’ve settled for something in the middle with a really nice balance.

 

Written exclusively for WDD by Mike Harrison. You can see more of his work at his website destill.net

Today we’re going to demonstrate how to peel a hand in Photoshop. You can use this technique to peel other objects of course. This is the final image preview..

 

Step 1

 

Let’s get started, first download this picture of an open hand. You can use any other if you want to. Start extracting the hand from the background and pasting it into a new document, 1280 x 1024 pixels. Then create a new Black Fill Layer below “Hand” layer.

Step 2

Now, what we need is to make all the fingers larger. Using the Lasso Tool, select only the thumb on “Hand” layer, then press V key to activate the transform options and distort the thumb a little bit, you can Command (Ctrl) – Click one of the selection corners and transform the shape.

Step 3

With the Clone Stamp Tool fix the distortions on the finger, also Erase the bad areas.

Step 4

Repeat the same process than step 2, but this time select the rest of the fingers, distort them and fix the details.

At this point you must have a nice hand with long fingers. Now it’s time to start the peeling process.

Step 5

Duplicate the “Hand” layer, hide the original for a while and then adjust the Hue / Saturation values of “Hand copy” layer, set Saturation: +20 and Lightness: -40.

Step 6

Now select “Hand” layer on Layers palette and go to Layer > Layer Mask > Reveal All.

Step 7

Now start peeling, select a 20px brush (Hardness 100%), set a black foreground and start painting on the hand’s layer mask.

Step 8

Paint more stripes on hand’s layer mask across the finger.

Step 9

Now select “Hand copy” layer and apply to it a Layer Mask > Reveal all.

Step 10

On “hand copy” layer mask, paint some black stripes. Check the tiny red circles, those will be the visual join points between the two hand layers.

Step 11

Repeat the previous steps as many times as needed, try to get something like the images below. Remember, take care of the join points because those will give realism to our design.

Step 12

Now repeat the peeling on all other fingers, wrist and palm.

Step 13

Then select the Burn tool, set the brush to 20px Hardness 0% and Exposure to 50%. And paint over “Hand copy” layer, burn all the areas next the joins. Burn some areas of “Hand” layer aswell.

Step 14

To improve the torn sensation select the Dodge Tool, set an irregular brush and paint on “Hand” layer edges.

Step 15

Burn with a huge brush, the palm and fingers on “Hand copy” layer, also Burn the fingers and palm of “Hand” layer to increase the deep sensation.

Step 16

We’re close to finish. After burning here and there you should have something like this.

Step 17

Now, draw a Radial Gradient background below “Hand” layer, use these colors (#996938 – #000000). Then change the “Gradient” layer Opacity to 35%.

Step 18

These are optional steps. Create a new layer above “Hand copy” layer and name it “Red Veins”. Then with the Pen tool (just the paths), draw lines across the fingers. Then select a red Brush (Hardness 100%), hit the A key, then Right click (or Control Click on a Mac), click on Stroke Path option, select Brush – Simulate Pressure and then OK, do the same for all the fingers.

As an additional detail, just Burn some shadows over the “Red Veins” layer.

Finally Repeat this step but with “Blue Veins” this time.

Step 19

Now apply the following layer styles to “Veins” layers.

Final result

And that’s it! just try peel another stuff, or add more interesting things inside a peeled object. Good luck!.

DOWNLOAD PSD FILE

Feel free to post links and examples of stuff you peeled and leave us some feedback. Thanks…

You have a picture of a stuffed penguin. It’s not just any stuffed penguin, though. It’s the  latest and greatest in stuffed penguin technology, the hot item that everyone will want under their Christmas trees this year. You’ll make a fortune with this penguin, if only you can start selling it online in time for the holidays. “But wait!”, you say. “I can’t just put this picture on the Internet looking like that! It’s too big! It needs a border! It needs a drop shadow! What shall I ever do?”

OK, maybe not. Your penguin won’t lead to fame and fortune, and you can easily edit your image with Photoshop. So let’s change the scenario a bit: your client has a picture of a stuffed penguin, and a picture of a stuffed owl, and a stuffed gopher, and a stuffed wallaby, and a stuffed flamingo… You get the idea; hundreds of pictures from their Stuffed Animals from Around the World catalog.

Before you can load all of the pictures into your client’s fancy new e-commerce site, you need thumbnails with simple borders and drop shadows for each and every image. Simple, yes, but tedious. And you’ll get to do it all over again when they release next year’s line of stuffed animals.

Photoshop Droplets Save the Day

Fortunately, Photoshop includes a helpful tool for processing large batches of images: droplets. By creating a droplet, you can tell Photoshop to perform the same set of operations for every file in a folder.

Note: The instructions below are for Photoshop CS2. Menu items may have moved or had their names changed slightly in other versions of Photoshop.

Step 1: Plan Your Action

Before you create your droplet, carefully plan out what you want it to do, sparing no detail. Start by specifying what you have and what you want the results to look like.  In our case, we start with folder full of product images of various sizes. We want to end up with another folder full of product images that all have the following characteristics:

• No more than 200px wide and 200px tall
• A 1px grey border
• A 5px drop shadow cast to the bottom right of the image on a white background
• JPEG compression

Open up your first image and determine exactly what you need to do with that image to get the results you want.

1. Resize the image to fit within your maximum dimensions, minus 5px in each direction to allow room for the shadow.
   1. Select File->Automate->Fit Image.
   2. Set the width and height constraints to 195px.
2. Add a border to the image.
   1. Select the whole image (Select->All).
   2. Modify your selection so you have the border selected.
      1. Select->Modify->Border, and set the width to 1px.
   3. Fill the border with your chosen color
      1. Edit->Fill.
      2. Use->Color… and set the color to #808080.
   4. Deselect everything
3. Add a drop shadow to the image.
   1. Make the background into a layer.
   2. Add the Drop Shadow layer style.
   3. Set the angle to 135 degrees, the distance to 3px, and the size to 5px (this will fit within our extra 5px).
   4. Resize the canvas, adding 5 pixels to the right and bottom, so the shadow will be visible.
4. Flatten the image.
5. Save the image in a different folder.
6. Close the image.

Step 2: Record Your Action

You can save your process as an action, which is simply a series of steps that you record and then play back as many times as you like. The process of recording a new action is quite simple.

1. Open one of the images you want to edit.
2. Open the Actions palette (Window->Actions).
3. Create a new set of actions, called “My Actions” (or anything you want).
4. Create a new action in that set, called “My Neat Action” (or, again, anything you want).
5. Make sure Photoshop is recording (if not, press the “Begin Recording” icon in the Actions palette), then go through the steps listed above to modify your image, save it, and close it.
6. Press the “Stop Playing/Recording” icon in the Actions palette.

Step 3: Create a Droplet

Now that you have your action recorded, it’s time to save it as a droplet. Select File->Automate->Create Droplet… There are a few options you’ll need to set, such as the file name for the droplet and the location to save your modified images. It is very important that you check the “Override Action ‘Save As’ Commands” box. This will let the droplet save the files with the name and location you specify, rather than the name and location specified in the action you recorded earlier. When you click “OK”, Photoshop will create an EXE file. You use it by dragging images or folders onto that file’s icon.

 

Step 4: Let the Droplet Work Its Magic

You now have your droplet all set up and ready to go. Now, simply take a folder full of images and drag it onto the droplet file you created. Photoshop will run the set of actions you recorded earlier for each image in that folder, sending the results to the folder you specified when you created the droplet file.

A special note for Windows Vista users: when you first try to run a new droplet, you might get an error message from Windows, saying “Adobe Photoshop CS2 has stopped working.” If you get this error, Windows’ User Access Control restrictions are preventing the droplet from running properly. To fix it, right click on the droplet file and choose “Properties”. On the Compatibility tab, check the box labeled “Run this program as administrator”. You’ll have to click the “Allow” button every time you start a new batch.

Do More with ImageMagick

At this point, you’ve impressed your client with your quick turnaround on the project. So much so that you get an even bigger job. More than just stuffed animals, their full catalog includes stuffed fruits, stuffed rocks, stuffed small appliances. You name it, they stuff it. You need to prepare tens of thousands of images for your client. Try running that folder through your droplet and you’ll come back to your computer a few hours later to find that Photoshop has crashed. There is no hard and fast limit to how many files you can process at once; but the more you have, the more likely it is that Photoshop will get overwhelmed and stop responding. If you need to process extremely large batches of images, you might want to consider using ImageMagick.

What is ImageMagick?

Like Photoshop, ImageMagick is software for creating and editing raster images, featuring a rich set of tools. Unlike Photoshop, you’ll do most of your work in ImageMagick outside of the comfortable embrace of a graphical user interface. Instead, you open a command line, tell ImageMagick what you want it to do, and it goes about doing that without the need to display the images to you. ImageMagick is freely available open source software, with versions for Windows, OS X, and Unix. Chances are, if you have shell access to your web host, you’ll find ImageMagick already installed there.

Working with Files

You call ImageMagick from the command line using the command “convert“, along with various options to tell it exactly what to do. We’ll start by going through the commands necessary for each of the modifications we want to make to our image.

1. Resize the image to so it is no larger than 192px x 192px.

   convert input.png -resize 192x192 output.png

2. Add a 1px grey border to the image.

   convert input.png -bordercolor "#808080" -border 1 output.png

3. Add a dropshadow to the image.

   convert input.png »
       ( +clone -background black -shadow 75x2+2+2 ) »
       +swap -background white -layers merge +repage -chop 2x2 output.png

4. Save as a JPEG

   convert input.png output.jpg

Now that we know exactly how to do the individual step, we can mash everything together into one command to turn our original penguin into the thumbnail we’re after:

convert input.png -resize 192x192 -bordercolor "#808080" -border 1 »
    ( +clone -background black -shadow 75x2+2+2 ) +swap »
    -background white -layers merge +repage -chop 2x2 output.jpg

We need an easy way to apply the command to every file in our folder. The simplest way is to create a loop that grabs every file name in the folder (”%f” in the example below) and calls our command for that file name, creating an output file with the same name in a different directory (”../out/%~nf.jpg“).

This example works in a Windows command line; it can be modified to work on OS X or Unix:

for %f IN (*) do convert %f »
    -resize 192x192 -bordercolor "#808080" -border 1 »
    ( +clone -background black -shadow 75x2+2+2 ) +swap »
    -background white -layers merge +repage -chop 2x2 ../out/%~nf.jpg

Written exclusively for WDD by Jonathan Brinley.

Have you worked with ImageMagick or Photoshop droplets? Share your experiences below.