Intro:
In this tutorial, we’ll be putting a video clip into a sig (graphic banner)
and saving it as an animated gif. You’ll need Adobe Photoshop CS &
ImageReady CS (or above) to create the gif. Im calling this the “definitive
tutorial” because I will also be linking to two other tutorials and by
referencing all three, everything should be covered thoroughly. This
tutorial will focus on slightly more advanced techniques to achieve the most
stylish sig possible.
This is the sig we’ll be looking at as an example:
Dimensions: 570px width x 100px height // File Size: 353kb // Video Length:
Approx. 40 frames
Brief Overview:
Before I start running through the steps, I want to briefly give you an idea
of what we’ll be doing- Find clip (convert to .mov if not already), Find
material for graphics, setup the sig in photoshop, open the clip in
imageready, jump clip to photoshop, add sig layer to clip, jump back to
imageready, save animated gif. Its a simple process once you get used to it. The additional tutorials I mentioned can be found here-
Anim Sig Tut 1or here-
Anim Sig Tut 2
the first doesnt seem to be online anymore and I consider it to be the best
(with the exception of leaving out one crucial step), so thats why im
including it in this tutorial. Read through them if you want to familiarize
yourself with the basic process in more detail than I am covering, or use
them as reference for any steps in my tutorial that you dont understand.
Getting Started:
So, I picked RBSV2 because its my favorite game, I grabbed a high-def clip from
gametrailers.com in quicktime format (.mov), and I went to the game’s
official site for some graphics to work with. Luckily, the splash page
had a good enough image so I grabbed it and thats what we’ll start with:
Setting up the signature in photoshop:
Im setting up my new image at 570px width by 100px height because it
gives me enough room for the games logo, the video clip, an additional
game-related graphic, and my name. Keep in mind that you’ll want to keep the
imported video clip small so that it will not cause your sig to have a large
file size, letting it load faster in the forums. After the blank image is ready, use the extract filter or the marquee tool
to cut the graphic out of your source material. (Remember to Select All +
Duplicate layer, so your original layer will remain for later use.) I prefer
the polygonal lasso for accuracy, but since my character has dark edges
against a dark background, im going to start with the extract filter, brush
size set to 11-
(Click on image to enlarge)
My render (the graphic cut-out) came out a little messy,
but this will give me a better idea of where my characters edges are. Later, im going to put the video clip behind his left side because that
side will look more interesting in front of the clip when its playing,
and it will help cover the side of the clip without blocking too much of
the video.
If you look back at the example sig, youll notice that the right and
left edges of the video are covered. On the left, is the red smoke from the
source graphic, and on the right is the side of the character. Including
this in your design is an additional step that will set your sig apart from
those who just imported a square video clip and dropped it on top of a
pre-made sig. This technique can be used in various ways to make your design
more inventive. At the end of this tutorial, I’ll link to my set of previous
animated sigs i've created so you can see different examples of this
technique.
Back to the tutorial, now that I can see where the edge
of the character should be, I use the marquee tool to trace where the
edge is.
(Click on image to enlarge)
* Tip: When using the polygonal
marquee tool, press delete on your keyboard if your marquee point isnt
accurate enough. I keep one finger on the delete key when using
the tool because im constantly resetting the position of each marquee
anchor as I go along, for better accuracy.
Then, I create a new layer underneath the render and
fill it in with black using the paint bucket. Or you can use the create
new fill option, but this is quicker.
(Click on image to enlarge)
Collapse the render onto the fill layer by selecting both layers in your
layers window (hold shift and click both, or hold ctrl and click each) then
press Ctrl+E. Remember, you always want the foremost layer on top to
collapse down to the layer below when flattening to a single layer. Next, drag your render from its window to your blank sig window you created.
This will automatically copy the render to the new window. Then, position
the graphic:
For the background, there is some red smoke in the source
graphic so ill just marquee some of that and drag it into my sig window:
The background will be mostly covered, so just duplicate the layer and
drag it around until the background of the sig looks like its filled with
smoke. You can do some additional feathering and edge blurring / smudging /
texture cloning if necessary:
At this point, you might notice the right edge of the guy has holes from
the extract filter, but since that side of him is reflecting light anyway,
it looks like its reflecting the red tone from the smoke, so in this
instance, it works. You might need to fix it in your sig though, depending
on how its coming along.
Next, I repeated the process of extraction to bring the
logo from the source graphic to my sig:
As an additional step, intead of just picking a cool font on the sig, i mimicking the style
of the original logo. In most cases, the font is easy to recognize, but I
think the font in this logo is custom so I just picked something close to
it. The more exact, though, the better. Then, I converted the font layers to
raster (create new layer below font layer, Shift+click both layers, Ctrl+E
to merge) and I used Edit > Transform > Perspective:
To match the texture of the Vegas font, I made a few copies of the
render for the word Vegas and blanketed my own font with it until it was
covered and the pattern of the texture matched. Additionally, I did some
cloning and smudging to get rid of the dark areas left from the final copy
of the vegas layer. When I was finished, I Ctrl+Clicked my font’s layer to
create the selection, Inverse selection, and hit delete. Also, I deleted the
white font layer underneath it to make it look better, and added a black
drop shadow for definition-
So, the graphics for the sig are pretty much done, but before we get
into the next section, we’ve got to set a placemarker for the video clip
we’re bringing in. Open up your video clip and grab a frame from the clip:
(Click on image to enlarge)
Obstacle!- Usually, youll just be
able to move right along with the process, but for some reason there is a
white border around the clip I want to use that isnt in the rest of the
video. So, I measure the top and bottom borders to see how many pixels I
need to crop later on when I go to size my video clip. Some might prefer to
just select every layer of the clip after you import it and Ctrl+T to shrink
it down after its imported to ImageReady then jumped to Photoshop, but if
your video is as big as mine and you have alot of frames, it will slow your
system down dramatically when you start playing around with it. This will
also take alot of the guess work out of sizing it later.
Now that ive got a frame to drop into my sig to finish setting the sig
up, I sized the frame down to 100px height to match my sig. You could also
Ctrl+T after bringing it in, but resizing it first is more precise:
The frame is in place but the left side of the frame is a distinctive
edge that I want to get rid of to make the clip look more organic when its
placed in the sig. To do this, I just use the eyedropper tool to get the red
color next to the edge of the frame and use my brush, in a new layer, to
cover the edge. Im sure the regular brush would be fine but I replaced it
with a cloud brush to get a “smokier” brush edge that would match the
backgrounds texture:
(the marquee is only there to highlight the area for you)
With that taken care of, you’re ready to Ctrl+Click your frame layer to
select the area and delete that space from any layer under it so that your
background is transparent-
You can also take this opportunity to check your foreground graphics for
errors, such as the fill in between the I and X in the word SIX. I went
ahead and magic wand (tolerance 20) deleted it, but it really isnt a big
deal since the video will be dark anyway. If your video is bright and
contrasts against the foreground graphics in your sig, though, it will stick
out badly.
Also, now that the background of the video clip’s spot is cleared out,
you can make the frame layer visible again to see if there are any
transparency holes in your foreground graphics that will look bad after the
video clip is dropped in. They are usually around the edge of the frame:
1
2
The last step before moving on, is deciding how to handle the video clip
before actually opening it. The method from the first tutorial I referenced,
measures the area to the left of the frame and the area from the inside left and right
of the frame to the right side of the sig:
That way, you can resize the canvas of your video clip in ImageReady
after resizing the video clip, and your clip should fit into your sig,
precisely, when you jump to photoshop with it.
Otherwise, you can just resize the video clip, then resize the
canvas to match your sig (570×100), and select all the layers of the video
clip in photoshop, to move around for positioning.
Opening the clip in ImageReady & jumping to
Photoshop:
We finally made it to the ImageReady section. Its all
downhill from here. So, leave photoshop open and launch ImageReady. Go
File>Open select your .mov. A window will come up with the clip in it.
Select the “every other frame” option and enter 2. The larger the number,
the smaller the file, but 2 should be fine. In the clip controls, find
section of the clip you want to use and hold down shift while moving the
tracking bar to highlight the area you want. About 8 seconds is recommended,
to keep file size down, and at every 2nd frame. Depending on the length of
your clip, this will come out to around 40-120 layers. That math doesnt
really make sense considering actual fps, but nevermind that. This will then load all the frames into individual layers of the imageready
file. At this point, make your adjustments to image and canvas size like I
went over before.
When you're ready, go to File > Edit in Photoshop.
This will “jump” your file over to photoshop where you can continue
building.
IMPORTANT!- At this
point, you should have your sig window and video window open in
photoshop. Save your sig as a psd, then flatten all the layers. Make
sure the bottom layer is an unlocked transparent layer and not the
locked background. Then, drag the single layer flattened sig to your
video window, making it the very top layer in the window ->
If your video frames are not exactly in the spot they need to be,
deselect the sig layer and select all the video frame layers. Then, move the
layers into position. Once everything looks right, goto
File > Edit in Imageready, to “jump” back to ImageReady with your sig and
video frames now in the same project file.
Jumping back to ImageReady from Photoshop:
Take a look at the animation window, you’ll notice every
frame is set to a delay of .3 seconds. This
will playback fine in IE, but Firefox actually plays it at that speed, super
fast. So, select all the frames of animation in that window and click the .3
sec dropdown under the first frame. Select “Other..” from the list and enter
.12 thats, POINT 12 seconds, not 12 seconds. And that will change the
delay for every frame of animation:
If you’re still on the “Original” tab in your project window, switch to
“Optimized” to see how the quality of the gif will look once its saved.
Then, if everything looks good, goto File > Save Optimized As… and save
your animated gif:
if you want the psd of how it should look like you can open it up from the atatchment
heres a example for halo zero (flash game)
hope this tutorial helps with animation
-Tm-