Backwater Tutorials

     A little more difficult than creating simple stickers but can be visually be worth the effort. For the purpose of these tutorials I will use the pictures used to create the catalog icon 100pixels x 80pixels, a picture of my avatar 100pixels x 192pixels and Photoshop CS2.

     Although I now use Photoshop for my graphics work I started out with a program called PhotoImpact 10 which worked just as well but didnt have the capability to create animated .gif files. However, after searching the web i found an excellent free program called Photoscape (link to the website can be found in Useful Links section) which works along similar lines as Photoshop layer animation does but you need to create seperate pictures instead of layers

     The methods I show here can be used for everything from stickers and stamps through to banners and adverts 

     1 of the more simpler forms of animation to create as it involves only 2 frames or pictures. This is the style of animation I use to create my catalog icons

     Start with the 2 pictures you wish to use open in the Photoshop (make sure they both same height and width) and also the animation bar open, if you do not have this open click on the window tab in Photoshop and select Animation

      Now click on the other picture and the small animation arrow again and select 'Paste Frame' which brings up the position box, select 'Paste After Selection' and click OK

      Now in the animation bar you will have 2 pictures side by side and if you press play in the window now you will see the basic animation as shown below 

      As you can see, the animation is too fast so we need to alter the frame timing. In bottom left corner of each animation frame you will see the timing value, this can be easily changed by clicking on the arrow beside the value and selecting whichever speed you require, I shall use a value of 1 sec for both frames

      Now as you can see the animation is slower and more visible. I use this style of animation for my adverts because they naturally catch your eye in the catalog, as do the Moving Frame Animations I will cover next.

     Another excellent way to make eye catching catalog icons is to use the moving frame method of animation (especially good for advertising clothing). It uses the same principles as 2-frame animation but involves moving each picture within the frames. We will use the 3 layers below to create this animation

      Do not worry that 2 of the pictures are larger than the base one, that is how we make a slide animation. So at the moment your picture may look something like the example below with 3 layers visible in the layers window

      Click on layer 1, then the move tool (the small cross in main toolbar window)

      Now using the arrow keys move layer 1 upwards until it has just left the visible frame. click on layer 2 and repeat the process but this time moving the layer downwards. This will now leave you with a picture showing only the background as in the example below

     In the animation bar check to ensure that frame one is highlighted by clicking on it, set the timing, as before in 2-frame tutorial, to 0.5 sec then click on the 'Duplicate' button

      Click on frame 2 to highlight it then repeat the slide step but in reverse. Click on layer 1 then using the move tool and arrow keys again slide the layer to the bottom of frame and the same with layer 2 moving it to the top. This will now leave you with 2 frames looking still the exact same but the animation is now in place

      To make the animation visible we need to add frames. To do this click on the 'Tween' option in the animation bar and set how many frames you want to appear, I will use 5 frames for this tutorial

      The animation box will now look like the example shown below, showing each frame in transistion

      You can now set the timeline you want your animation to run for e.g. Forever or Once. if you wish the animation to run forever it can be a good idea to loop the frames. To do this, highlight frames 2 through 6 by using the shift key and right clicking with your mouse. Now copy these frames using the method shown in the 2-frame tutorial, click on frame 7 and then paste your frames into the animation box. Now with the newly pasted frames still higlighted click on the frame arrow again and select 'Reverse Frames'. Now if you press play you will have a looped animation like the example below

      You can now upload your sticker in the same manner as before but remember when saving your animation to your pc to save it as a .gif file, in Photoshop I usually use the 'Save For Web' option under the file tab

     Put simply there are very few; the real limitation being your imagination. I cover only the basics on Content Creating here in these tutorials, but with practise and a little more knowledge you can create visually amazing still and animated pictures.

     Examples of my graphics work can be seen by visiting my main website BACKWATER CREATIONS and clicking on the My Graphics section