Here’s a very quick tutorial, Squipple, of how to make gifs.
Create a new folder on your desktop, call it TEMP.
Find 5 pictures using Google search. It would be good if they were all different pixel x pixel size.
Save them to this TEMP folder.
Open Photoshop.
Drag the 5 pics into Photoshop.
Open each pic and change the image size proportions. Make the largest one 150 pixels. You’ll probably see that each image has the following type of dimensions: 110x150, 131x150, 150x124, etc.
Or...open each pic and change the size proportions where you make the lowest figure 150 pixels. You’ll get things like: 224x150, 182x150, 150x190, etc.
What you’re gonna do is try to find the best method, whether to downsize the canvas size or upsize the canvas to meet that 150 mark. Some images you’ll need to downsize, some you can get away with upsizing because the lower dimension is so close to the higher one that you wont see any image quality loss or major borders happening.
When you change canvas size, choose the background method as white, so that it can be posted in this forum (all white background to hide borders that occur).
Basically, with those 5 images, make them all 150x150 thru this method. It doesnt have to be 150x150, but whatever you do, they all have to be the same size...could be 135x150 or 150x135 or 220x150. Just as long as they’re all the same, and all with white backgrounds (just for now).
Once you have done this. SaveToWeb for each picture. Make sure they’re all being saved as JPG files, which you will see the option in the next window popup you get. You need it to be JPG, not gif, or bmp etc. And, dont choose Save, or SaveAs, but SaveToWeb. This reduces the image size in kbs which is important especially if you want to make gif avatars. Make sure you save them all in the same TEMP folder for easy access. I prefer NOT to use the same names, so they dont overwrite the original files in case you need to go back and change anything.
Once you save each one, close the ones there and select NO for do not save these files. Then go back into the folder and select all the newly saved pics and drag them into photoshop.
Select NEW, and make sure the new file is 150x150 (or whatever the canvas size was that you made all those edited pics. It should be a white background too.
Then get the MOVE tool and drag each pic onto the blank new canvas you created. They should all sit on top of each other as you do it, but if you notice on the far workspace, you’ll see there should be five layers there, each layer representing each of those 5 pics.
Choose SAVE AS, and call the file 'Squipple' It should be saving this as a PSD file. Ie, squipple.psd Make sure to do this so you can always have the editable version to play with later, make adjustments etc.
Then you find the EDIT THIS FILE IN IMAGEREADY icon, which is placed on your workspace where all the hand tools are. It’s the very bottom one in that little rectangle.
ImageReady will now open that file as well as opening up a horizontal window that’s like a film reel showing you all the 5 pics.
Click the edge of this reel box (where there’s a tiny arrowhead) and choose select all. All five images should be now highlighted blue. Look under any of the 5 pics and there should be another tiny little arrow under each one. You only need to click one of them. A menu opens and select the speed in seconds that you’d like the 5 images to move at. Experiment with the times, but you’ll find if you have 5 pictures of a person moving, and you want it to look realistic, you’ll need the speed to be something like 0.01 But experiment anyway.
Next, on the far workspace, there’s that box again showing the layers. Delete the layer called BACKGROUND. You dont need it. Just the layers marked Layer1 to Layer5.
Here’s the important part...On the reel, click the first image so it’s highlighted. Then make sure only the eyeball on Layer1 is ticked. Then click the 2nd image in the reel and make sure the eyeball on Layer2 is ticked. Do this for each image. Make sure you do this right, each image in the reel calling on the right numbered layer. It doesn’t matter if for image3 you have eyeballs ticked on layer1, layer2 and layer3. Just as long as you have layer3 as the highest ticked eyeball. Same goes for all the others. There should be no eyeballs ticked above the layer that represents the image in the horizontal reel.
Once you’ve done all that, click PLAY inside the reel to see what it looks like. If you need to make any speed adjustments to ONE or multiple pics you can do it either individually or by selecting SELECT ALL like you did before.
If you’re happy, click and SAVE. It should automatically save it as a gif file. So that if you went into the TEMP folder and opened the squipple.gif file in Firefox, you should see a gif animation happening.
If you want to adjust the dimensions of the images. You only need to change the canvas size in ImageReady and it will apply that change to all 5 pics at once inside the reel.
There is a whole lot more you can do of course, like putting words and stuff on each image in the gif, so that it says something different on each image, or the one word that stays there for all images. There’s stuff you need to know here like how to do it the best way so as your words arent fucking up or moving all over the place.
But this is very finnicky and hard to explain how to do it thru here. But you basically need to do something like this....
In ImageReady. Click image5 in the reel so that Layer5 also gets highlighted. Then choose the TEXT tool. Click on the main box (not the reel image or the workspace layer, but the actual box showing the image). Then type some shit in there. If you need to do any fancy stuff to the font, click the EDIT IN PHOTOSHOP icon located in the same tool box window. There you can make stuff fancy. Then return by clicking EDIT IN IMAGEREADY. Where you will click play and test that it looks good. Then save again to have your gif file.
If you do this, then you should have a gif like this one...
Where the “WTF” stays in the one spot as the animation moves around.
The other method you can use is right back at the beginning when you were first editing your pics in photoshop. If you wanted each pic to have a different word in each one, then you needed to do this here with each image when you were resizing them etc, and savingToWeb as JPG files.
The easiest way to do this is by doing this.
In image ready, click the FILE menu and select EXPORT FILES AS IMAGES. When the option pops up, make sure you choose JPG and make sure you name them something different to distinguish from older stored pics. Also, make sure they’re being saved in that TEMP folder for easy access.
Once the export is done. You’ll have 5 150x150 images, so you dont have to go and re-do all the work you did before. But, after you put text in for each image etc, you’ll still have to SaveToWeb as JPG, and you’ll still have to click NEW, and make it 150x150, and drag and drop each image in the new template, and save it as a PSD file, and then click EDIT IN IMAGEREADY and then go thru all that process again in image ready of setting the parameters of your reel, and doing the eyeball thing.
Just imagine therefore, how 'painful' this whole process can be when you have to make gifs that have a LOT of fancy stuff in them, and that have often 200 images in them that need to be eyeballed etc. Which is what I often have to do for work.
---
»
Off-Topic
» Photoshop can be scary
