<font size=2>Thank you LD. Working on websites is one thing I have very heavily considered. In many ways I think I would be very good at it, yet I lack confidence dealing with people and so I am afraid to jump into it.
I do want to learn more about website databases and ecommerce as I think those skills would be necessary to consider myself a "professional". I do believe I have the layout and content skills from my experience in print typesetting.
One real problem though is that I lack talent when it comes to art. I would want to be "partnered" with someone who can really do artwork. I can do simple things if I have something for reference, for example I created all of the icons on my website. Art from scratch is pretty much out of the question. I am very happy with the way your dragon came out but I used a gif I found for reference to copy and even so it took me a very long time, and although I think it looks pretty good at a small size the original drawing I did is not that sharp when blown up large.
I am really happy with the way the dragon opens and closes his mouth when he shoots the fire (I am such a geek). The flames don't look all that great (that's where I lack talent) but they go by so fast that I don't think it matters too much.
>> my boyfriend said it was so cool.. He wants to know how to do it
Creating an animated gif isn't too hard if you have something to draw with (and can draw). I am using a bunch of professional applications that I use for typesetting and graphics.
- The art was drawn as vector artwork in Adobe Illustrator. as I said above I found a gif for reference and drew the dragon from that.
- The parts that "move" are created as separate "frames" in the gif.
<ul>
- I drew those also in Illustrator, using a separate layer in the file for each "frame", for example each fire shape is on its own layer.
I set the name and separated the letters so that I could make them "appear" one at a time as the flame recedes
- I did the color change in illustrator, starting with the two end colors "hot" and "cooled", and blended them in illustrator to get the frames necessary to change from one color to the other. (the fading i did in a later step, not in illustrator)
- I also created a background box with the color that matches the PsychCentral forum, which is, in "web code", "FFFFEE". This makes the graphic appear without a box around it when used in the forums.
Note: graphics can also be made with a "transparent" background. The reason I don't like to do that is to do it properly you have to create the transparency on the same, or a similar color background as the graphic will be used on. A transparent GIF that was matted against a white or light background will show up with unsightly white "fringe" around the edge if used on a darker or black background. Likewise a graphic matted for black will have dark "fringe" around the edges if used on a light background.
I prefer to keep it simple and just make a solid background that matches the intended use. Transparency is useful if the graphic is going to be used on a patterned background or is going to be used in several spots with a similar color background.
[*]When the art was complete in illustrator, I exported the graphic to Adobe Photoshop. The Adobe apps work well together for a project like this. In this case, for example, you have the option of keeping all the illustrator layers as separate layers in photoshop which makes it easy to do the animation, rather than having to export each layer separately and combining them to make the finished gif. One step replaces 10-20 steps.
[*]The exported file was opened in Adobe Imageready, a companion program to Photoshop meant for web optimization and animation. All the separate elements appear as separate layers in Imageready, the way I set them up in Illustrator.
Each item that changes is on its own layer. In this case the dragon body is on one layer that appears in every frame. There are two separate "heads" each on one layer, one with the mouth open and one with the mouth closed. The different text colors are each on a layer, and one set in the "hot" orange color is separated with each letter on one layer.
The order of the layers is important, not in reference to the animation, but in reference to objects appearing on top or underneath each other. Think of it like a collage where you paste one photo above another. For this file the "fire" layers are all above the "body" layer so that the flame appears in front of the dragon's left wing. The text is under the "fire" layers so taht i can turn them on one at a time when they are obscured by the fire layers so that they are "revealed" as the fire recedes.
[*]The animation is then created. In imageready you get a palette where you can add frames to the graphic. For each frame you turn on the layers you want to see and turn off the layers that should not be seen in that frame.
<ul>[*]The "body" layer and the "background" layer are on in every frame of the graphic.
[*]The "flame" layers are turned on one at a time in successive frames. Each new frame turns the previous frame layer "off" and the next one "on". I keep those layers in order to make it easy to figure out which order they go in when making the animation.
[*]In the appropriate frames the letter layers are turned on. They are not seen in the frame for which they are turned on because they are covered by the flame, but those layers remain on in successive frames so that they are revealed as the flame receeds.
[*]Other movement, such as the mouth opening/closing is also set by the layers shown in the appropriate frames.[/list][*]Some frame manipulation is done directly in imageready. The frames palette for example, remembers not only which layers are on or off for each frame, but also the transparency setting for particular layers in each frame. I did the final name fade by creating new frames identical to the final frame of the image, changing the transparency of the final type layer in each frame. I did that because when I was testing the graphic it looked better than having the name disappear suddenly before the graphic looped.
[*]Final adjustments are made, such as the timing for each frame. Most of the frames here are for immediate change, the speed of the animatioin goes as fast as your browser can display it. I put a bit of pause for the color change frames (it looked better) and held the last frame before the fade begins for a few seconds to display the name, which of course is the point of it being a "signature". You can also set things like whether the graphic loops or not, etc.
[*]When everything is set, the final GIF is exported from ImageReady. ImageReady takes all the frame and layer information and creates an animated GIF in the proper format to display in browsers. Then the GIF was uploaded to my webspace, ready to use. Some tweaking may be necessary sometimes going back to illustrator for adjustments. If necessary you can export one layer from illustrator and incorporate it into the file in imageready so that you don't have to redo all the frame settings from scratch.[/list]<hr>
That sounds like a lot of work but drawing the graphic is really the only thing that takes me a lot of time, mainly because it is hard for me to do.
Without all of the professional software you can still make an animated GIF on your own. You just need something to draw the graphic and the different graphic frames. "Paint" that comes with Windows would do the trick. I prefer to work in vector format because it is then easy to resize it to the final size you need. If drawing directly in a bitmap application, like "Paint" or "Photoshop LE" or Jasco's "Paint Shop Pro" (Which I recommend for anyone who wants a semi professional image application that is not as feature loaded, nor as expensive, as Photoshop) then if you resize the graphic it suffers in quality. It's best to figure out the pixel size you want to end up with and draw the graphic directly at the size you need.
Then to animate you need a tool like "GIF Construction Set" which is what I used to use before Photoshop included the tools necessary with ImageReady. There are lots of applications like these available free or as shareware (around $20). They are not as flexible as the process I described using imageready. In most cases you will have to create all the frames separately as a separate graphic. The animation tool just allows you to take the individual graphics and combine them all to one animated GIF by displaying each graphic as a frame in the GIF. You lose the ability to easily experiment with different layer combinations as each change to a frame has to be made to all of the individual graphics.
It is cheap and easy to get started though.
>> and when I can I will add it to my website..
When you are ready for that let me know and I will create a version that will show up well on the background of your site. If you are going to use it over black then I will also change the text color so that it will show up against a dark background. Making the color change should not be difficult since all the elements are already set up and it will only be a matter of swapping them.</font>
-- The world is what we make of it --
-- Dave
-- <A target="_blank" HREF=http://www.idexter.com>http://www.idexter.com</A>