Making images for microstock, I end up resizing a lot of Illustrator files. I use the Action palette in Photoshop to help save some time doing the tedious operation of resizing files. With that said, here is a little tutorial for the Action palette.

I start by taking my Illustrator eps file and dragging it onto the Photoshop application icon to open it. A dialogue box pops up. For this example, I want my end file to be 470 pixels by 470 pixels, so I set my greatest dimension (height or width) to a little under 470. I went with 450. Since the Constrain Proportions box is checked, the other dimension will change automatically to keep my file proportional. I click OK and my file opens up.

Next, I want to use the Action palette. To open it, go to Window > Actions.

I click the Create New Action button at the bottom of the palette.

A dialogue box pops up. I name my Action and click Record.

If you look at the Action palette, you’ll notice the red Record light is lit up. Basically, it is recording the actions you are doing on the screen until you Stop it. So, let’s record your canvas resize. Go to Image > Canvas Size.

A dialogue pops up. I set my canvas size to 470 x 470 and click OK.

Notice, I’m still recording. Next, I want Save for Web. Go to File > Save for Web. Set your image specs and Save it to a folder. Take note of the folder you save to because this action will always save to that folder.

Finally for your last recorded action, close the file.

Now, go back to the Action palette and hit the Stop Recording button.

Now that I have my new Action, it is time to do some heavy lifting with it. Select several files that need resizing and drag them onto the Photoshop application icon to open them. A dialogue box will pop up for each file. Like before, set the greatest dimension to below 470 (I used 450).

After all your files are open, select your 470×470 action from the palette and hit Play. Photoshop quickly goes through the Canvas Size, the Save for Web and Closes the file. If you check the folder you set up for it to save in, you’ll find your resized file. Now hit Play for the rest of the files and you’re done.

Have a bunch of cartoon illustrations? Want to animate them? Then, this tutorial is for you. This tutorial uses Illustrator, Photoshop and finally ImageReady to make a simple animated gif. Don’t worry. It’s not as complicated as it sounds (you can just use Photoshop if you don’t have Illustrator).

I start with a cartoon I did in Illustrator. Check out my other cartoon tutorial page for Illustrator tutorials.

As I said in the intro, you can do these steps in Photoshop if you prefer.

Since I’m going to animate the eyes, I want them on a separate layer. To create a new layer, use the Create New Layer button on the Layers palette. Once I have my new layer with the eyes on it, I want to duplicate it. To do this, drag the layer onto the New Layer button.

Now, move the eyes to a new spot on the duplicated layer.

Continue to duplicate the layers and move the eyes around until you have all the steps in your animation. I chose to do only four. Obviously, the more steps you do, the more fluid your animation will be.

Next, I export my Illustrator file to a PSD file.

Make sure you have the Write Layers box checked. This will export your layers to Photoshop.

Open your new PSD file in Photoshop or you can open it directly into ImageReady. Since I forgot to convert my file to RGB, I have to open mine in Photoshop first and convert it. Go to Image > Mode > RGB to convert it. You can also convert it in Illustrator first. Go to File > Document Color Mode > RGB Color.

Next, open your file in ImageReady. Click on the button at the bottom of the Toolbar.

Once in ImageReady, you’ll notice the Animation palette. If not, open it at Window > Animation.

Your first frame in the animation is open, but you’ll need to eliminate the extra eyes in the Layer palette. To do this, simply uncheck the Visibility of the top three layers. That’s the little icon that looks like an eye to the left of the layer name.

Next, make your second frame with the Duplicate Current Frame button. After that, go back to the Layer palette and turn the first set of eyes off and the second on. Repeat this step until you have all four frames.

You can play test your animation in the Animation Palette. Just hit Play.

Also you can modify the time between frames.

When you’re satisfied with the animation, go to File > Save Optimized As. It will save the file as an animated gif. Finally, I usually open the file in my internet browser to see if it works.

Here’s the end result. OK, so it’s not exactly world class animation, but it makes a nice sized animated icon.

Below is a tutorial I’ve written for a cartoon character created in Adobe Photoshop. This is an alternative method from my other cartoon tutorial in Adobe Illustrator.

I start by opening a scanned pen and ink illustration. I cheated and drew mine in Illustrator because I suck with inking. Anyway, you’ll want to scan your illustration at at least 300 dpi for print. Also after opening your sketch in Photoshop. You may want to adjust the brightness and contrast or the curves to get your blacks black and your whites white. Both of these are found at Image > Adjustments.

Next, make a copy of your background layer. To do this, drag the layer onto the Create a New Layer icon. I usually turn off the original background layer, so if I mess up the copy, I still have the original.

After I’ve made my copy, I set the blending mode for the layer to Multiply. This will knock the white out of the sketch, so you can see the color your adding underneath.

Next, I create more layers for the different colors and the different shadows and highlights. All these layers should reside underneath your line art.

Now for the coloring. Using your line art layer and the Magic Wand from the tool bar, select the white area that you want to be skin colored. Using the shift and option/alt keys while clicking allows you to add and subtract from your selection. When you get all the areas of the color selected, you’ll want to expand your selection by a little bit. This will ensure that there aren’t any gaps in the color and the line. Go to Select > Modify > Expand.

A dialogue box will appear. I set mine to 5 pixels. It depends on the thickness of your line and the resolution you’re working in. You don’t want to expand it beyond the line.

After I’ve expanded my selection, I click on the layer for the skin color and fill the selection with color (using the Paint Bucket Tool).

Select the other areas for the various colors and fill them like you did above on the layers you created for them.

Now, It’s time to add in your shadows and highlights. I like to use the Polygon Lasso Tool to draw my highlight and shadow shapes, but you can use whatever tool you are comfortable with. Remember, you can always modify your selection with the option/alt and shift keys, so don’t worry about getting your selection perfect the first time. Also, you’ll notice that I went beyond the lines. Even though I do like to color outside the lines, I’ll fix this later.

After I get my selection right, I want to feather my selection. This will give it a soft edge. Go to Select > Feather.

A dialogue box will pop up. I set mine to 5 pixels. The larger the number, the softer the edge.

Now it’s time to get rid of the part of my selection that is outside the lines. Select the skin colored layer. Using the Magic Wand Tool, option/alt click on the white area. This will eliminate the excess area of the selection while keeping the part you want.

Now, select the skin highlight layer and fill the selection with a light color or white. Since your highlight is on a separate layer, you can adjust the layer opacity to make your highlight blend in better.

Repeat the above steps with the other shadow and highlight layers.

Finally, you can go back to your color layers and add gradients to them. Use the magic wand to select the color and use the Gradient tool (hides underneath the paint bucket) on the tool bar to add gradients.

When that dreaded moment comes when I have to design a new portfolio site, I usually work on my design ideas in Illustrator. Once I get everything sized properly, I import the whole thing into Photoshop and slice it up into seperate images and HTML. Here is a quick Photoshop tutorial for slicing up a design for the web. You can find more of my tutorials here.

Start by pulling out guides where you want to have seperate images. To pull out a guide turn your rulers on. Go to View > Rulers or Command/Control R. With the Rulers on, move your mouse over to the left or top ruler. Click on the ruler, hold and drag a line out to the proper spot. When you release a blue guide line will appear. These guides aren’t pixel objects and can be cleared by going to View > Clear Guides. You can also adjust Guides by using the Move Tool on the Tool Bar. Move your mouse over the guide until your tool tip changes, then click and pull the guide to a new spot. You may need to zoom in close or use your rulers to make sure your guides are in the right spot.

Here is what my guide lines looked like. See all the blue lines on the image below. I left space for a menu bar at the top and the bottom.

Next, use the Slice Tool from the Tool Bar and draw out boxes that snap to the guides. Photoshop labels each slice with a number.

If you’ve got all your slices right, then go to File > Save for Web. I usually like to save a .psd version too. If I need to make changes later, it’s easier to do on a Photoshop document.

A dialogue window will appear. Use the slice tool on the left to select all your slices. Then, choose your image options and click Save.

The save window will pop up. Choose HTML and Images from the options at the bottom. This will create an HTML file that looks like your design plus all the slices will be saved as seperate images. That’s it.

Here is a simple tutorial for creating a halftone pattern in Photoshop. Feel free to check out my other tutorials here.

Start by opening a new file. Make sure you set the Color Mode to Grayscale.

Next, make a gradient shape that fades from black to white.

After that, convert the Color Mode from Grayscale to Bitmap.

This will prompt a few dialogue boxes. Feel free to play around with the settings.

That’s it.

I’ve got a halftone tutorial for Illustrator as well.