currently watching: 4 Elements ✿ A Dog and a Plane ✿ Enemies With Benefits ✿ Flower Boy ✿ Fourever You Season 2 ✿ Girl Rules ✿ Love Upon A Time ✿ Love of Silom ✿ Perfect Crown ✿ The Rookie ✿ Ticket to Heaven ✿ When Oranges Fall ✿ Wooju Bakery ✿ Wu
Learn how to add a ripped paper edge, an outward curve edge and an inward curve edge to your gif headers. Once you learn how to do these, you can jazz up your gif headers any way you want!
↓ LEARN HOW TO DO THESE UNDER THE CUT ↓
[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 :)
Please like/reblog if this has helped you and feel free to hit me up for any questions and concerns! ♥︎
