#gif header tutorial

first, I did a Google search for "color change GIF." I used one very similar to this:

I imported the GIF into my header PSD in Photoshop.

I changed the GIF's blending mode to "Lighten".

this is what my GIF looks like now. it's already looking more subtle and glowy, which is our goal!

I moved the GIF over the light, then reduced the size quite a bit.

be sure to actually play the GIF through a couple of times and see if you like how the light is moving. you can always rotate the GIF, resize it, etc. to better achieve the effect you're going for.

now the fun part: make a layer mask and get thee to blending!

make sure you have the GIF layer selected (see screenshot). create a layer mask by clicking on the little square and circle icon (again, screenshot).

blending is a whole other tutorial, so check out a guide on Tumblr or on YT if you're not familiar. there's an art to it- you're literally blending away the GIF/image/whatever by hand- so a lot of it comes down to the effect you're trying to achieve and personal preference.

my advice: use a brush set to 0% hardness, blend away the hard outer edges first, and play around with the opacity (I'd start no higher than 50%). you can always use the eraser tool to bring back anything you blended away too much of.

as a last step, I changed my brush size to a small enough size that I could erase the GIF completely just on the smiley face portion. we want those lines to pop and stay stationary while the rest of the GIF seems to "move" (the glowing effect).

here's what I ended up with:

we're not done yet, though: I wanted the light to look like it was actually fading in and out, so I needed to add a fade transition to the beginning and end of the GIF.

click on the half-white square on the Timeline (see screenshot).

a little pop-up menu will come up- "Fade" is the first option at the top. click and drag on "Fade", releasing over the start of your GIF.

a little incline 'hill' will appear on the GIF layer. you can click and drag on the high point of the 'hill' to make the fade effect longer or shorter.

do the same thing again, but click and drag the Fade effect onto the end of the GIF.

that's pretty much it!

you might have noticed I have two color fade GIF layers on my header (layers 6 and 7, above). I wanted the lamp to have multiple fades- it's just more visually interesting- so I copy-pasted my blended GIF. now, the effect will play twice as the header loops (never said I wasn't extra).

[1] Create your gif

Gif dimensions: 640px x 360px

Make the gif like you normally would, apply coloring, sharpen, etc. If you don’t know how to make gifs yet, click here for some great tutorials.

Assuming you’ve already converted into a Video Timeline and your layers into a Smart Object in your gif making process, let’s proceed.

[2] Make sure the playhead is at the start of the timeline

If your playhead isn’t at the start of the timeline, do this before adding new layers (which are the next steps) so the new layers will be aligned with your gif and coloring layers as demonstrated below:

[Option A] Apply the ripped paper texture

You can download the texture I used here, which I got from freepik. I've converted some of them into png files for those who don't have Adobe Illustrator.

[A1] Place the texture on your gif file then move it near the bottom edge of your gif. To place the texture, go to File > Place or Place Embedded...

NOTE: If you're using the texture I've provided, just resize it accordingly and skip the next step.

[A2] Select the Rectangle tool (shortcut key: U) and draw a shape on the top part of your gif that isn't covered by the texture.

NOTE: The size and color of the shape doesn't matter, as long as it doesn't cover the ripped edges part of the texture.

[A3] Group your texture and shape layers

To do this:

Select both layers

Click the "Create a group" button which looks like a folder at the bottom of the Layers window

Drag the group layer to the bottom. It should be below the gif layer now.

NOTE: If you're using the texture I've provided, just skip the group part and drag the layer to the bottom, below the gif layer.

[A4] Create Clipping Mask

To do this, right-click on your gif layer and find Create Clipping Mask.

After doing this, there should be an arrow icon "↴" on your gif layer pointing down to the group/pointing down to the texture layer you're using the texture I've provided.

[A5] Add a background color

To do this, add a Color Fill/Solid Color... layer as demonstrated below:

Select your preferred color. The color should be the same as your mobile theme's background color.

Next, Drag the group layer to the bottom the same way we did in [A3]. It should be below the group layer now/below the texture layer if you're using the texture I've provided.

Next you'll learn how to add a curved edge to your gif header.

[Option B] Apply an outward curve edge

[B1] Select the Ellipse tool

If you can't find it, find the Rectangle tool first, do a long press on the button and this will come out:

NOTE: If you’re more comfortable/experienced with the pen tool, you can use that instead to create the shape.

[B2] Draw a shape over your gif like this:

NOTE: The color of the shape doesn't matter. You can resize, move and position the ellipse to your liking afterwards.

[B3] Drag the Ellipse layer to the bottom the same way we did in [A3]. It should be below the gif layer now.

[B4] Create Clipping Mask

To do this, right-click on your gif layer and find Create Clipping Mask.

After doing this, there should be an arrow icon "↴" on your gif layer pointing down to the Ellipse layer.

[B5] Add a background color

Do the same thing we did in [A5]. This layer should be below the Ellipse layer.

If you want your curve to go inwards...

[Option C] Apply an inward curve edge

[C1] Follow steps [B1] to [B2]

NOTE: If you’re more comfortable/experienced with the pen tool, you can skip this step and use the pen tool instead to create the shape then go directly to step C7.

I personally prefer the Ellipse tool because I want it to be a perfectly curved edge (with the even sides when I center it) 😂

[C2] Move the shape downwards and resize it to reach the corners.

[C3] Select the shape

To do this, Ctrl-click (Windows) / command-click (Mac) the thumbnail of the Ellipse layer which I've highlighted in blue below:

There should be marching ants/dashed lines around the shape on your gif now.

[C4] Add a Solid Color layer

To do this, check out [A5]. The marching ants should disappear after adding this layer.

[C5] Invert the layer mask

After the Solid Color layer's been added, you may notice that it has a layer mask. To invert it, make sure to select the layer mask thumbnail first then press command (Mac)/Ctrl (Windows) + i

[C6] Delete the Ellipse layer

We only needed this for the mask.

[C7] Drag the Color Fill layer to the bottom the same way we did in [A3]. It should be below the gif layer now.

[C8] Create Clipping Mask

To do this, right-click on your gif layer and find Create Clipping Mask.

After doing this, there should be an arrow icon "↴" on your gif layer pointing down to the Color Fill layer.

[C9] Add a background color

Do the same thing we did in [A5]. This layer should be below the Color Fill layer.

〰️

And there you have it! Three different gif headers. With the gif header knowledge you now have, you can use it to apply different shapes and textures to your gif header's edge :)