#club tutorial

If any of you might notice, I know I've discussed the difference between fonts and typefaces in this post, but for this one, I'll just use the term 'font' even if I probably meant typeface so nobody come for me please 😂

Kinds of Fonts

Before we dive in and start downloading fonts, let's first discuss the kinds of fonts, starting with these two:

Serifs have serifs.

A serif is a small line attached to the end of a bigger line in a letter or symbol. Think Times New Roman, Baskerville, and Didot.

Sans Serifs have no serifs.

‘Sans’ is old French for 'without’. So, sans serif means without serifs. Think Arial, Century Gothic and Comic Sans.

NOTE: There are a variety of styles under serif and sans serifs, but this guide (hopefully) won't dive in too deep. This is just a tiny guide that will help you make prettier gifs. ✨

Script

Script fonts are the ones that are cursive or in longhand. They often look handwritten with a brush.

TIP: Script is best used for headers (big text). Avoid using them as body text (small text) or in long sentences and paragraphs because it won't be very readable.

〰️

Each of the following tips will help add contrast, create consistency and establish harmony in your font pairings.

[1] Limit the # of styles

Don't use too many fonts. Fonts are like introverts. They work best with just a friend or 2 😂

This would also depend on the style, which will be explained in the next tip.

[2] Opposites attract

Don't pair fonts with similar styles like this:

❌ Century Gothic + Montserrat are both Sans Serifs.

❌ Baskerville + Didot are Serifs.

❌ Lavanderia + Bakery are Script fonts.

Even if both fonts look good individually, it just wouldn't work.

It's like if two of the most beautiful people in the world became a couple. They both look good, but their beauty is overpowering each other. There has to be a balance, you know?

Do pair different styles instead:

[3] Avoid conflict

This tip is similar to [2].

Don't:

❌ pair similar font styles

❌ pair an attention-grabbing font with another attention-grabbing font

❌ pair distinctive fonts together such as these:

Notice how they would both keep fighting for the spotlight, destroying the harmony of your texts.

Do pair a distinctive font with a neutral font, like this:

[4] Sans Serif + anything but Sans Serif

Here's a fun tip: When you're too lazy to think about what to pair your serif / decorative / script font with, just pair it with a clean sans serif font. It's what I did in the Do examples in [2] and [3] if you haven't noticed 😂

[5] Pair a font with itself

Opposites attract, and it works with just one font family as well! Play with a single font family's weight and styles.

Do pair a thick sans serif font with its lighter relative (as seen below: Montserrat Bold + Montserrat Light).

Do pair a regular serif font with its italic sibling (as seen below: Baskerville Italic + Baskerville Bold).

TIP: Play with the tracking (letter spacing) and capitalization (lower or uppercase) too. See Montserrat Bold and Baskerville Bold above.

I prefer to increase the tracking whenever the text is bold and/or in all caps to make it easier to read.

[6] Don't mix moods

Fonts have moods. They have traits (i.e. loud, friendly, trendy, timeless). They can be used to convey feelings (i.e. happy, sad).

For example, avoid pairings such as this:

There is nothing about the two fonts above that unite them. They have different vibes — nothing in common.

Though mixing personalities work in friend groups, it doesn't work very much with fonts.

〰️

With all that said, I know some of the tips might contradict each other, and some probably won't always work. It all depends on the font. Just see what looks good to you, and if you're unsure, then come back to this post :)

Please like/reblog if this has helped you and feel free to hit me up for any questions and concerns! ♥︎

〰️

REFERENCES:

reuxdesignco

visme

undullify

FREE FONT SOURCES:

Google Fonts

Open Foundry

awwwards.

Font Squirrel

—

1. THE GIF ON GIF PART

—

[1.1] Create your small gif

Make the gif like you normally would (just the basic brightening/coloring and sharpening) then save. If you don’t know how to make gifs yet, click here for some great tutorials.

We'll leave this for now and move on to the big gif.

[1.2] Create a new document for the big gif

To do this, press command for Mac / Ctrl for Windows + N.

The size is up to you :) Just make sure the width is 540px, the standard Tumblr post width. In the example above, the dimensions are 540px (width) by 615px (height).

[1.3] Click Create Frame Animation

This button can be found in the Timeline window, which is normally found at the bottom portion of Photoshop. If it's not there, go to Windows > ✓ Timeline.

[1.4] Convert to Timeline

To do this, select the button at the bottom left part of the Timeline window, encircled in orange below:

We'll leave this for now and go back to the small gif.

[1.5] Open your saved small gif then turn it into a Smart Object

If you don't know how, here's a quick tutorial on how to do it.

[1.6] Transfer the small gif into the new document

If you don't know how, check out the super easy Duplicate layer method here!

[1.7] Delete the white Background layer after transferring the small gif

[1.8] Drag the playhead to the start of the timeline if it's not at the start of the timeline

Do this before adding text/layers/adjustment layers in order to align them with your gif as demonstrated below:

[1.9] Duplicate the small gif layer

Shortcut keys:

Mac: command + J Windows: Ctrl + J

[1.10] Enlarge the original small gif layer to fill the canvas

This is what it looks like now:

So this is basically how you put a gif over a gif! You can stop here or keep reading to know about the shape, coloring and effects :)

—

2. THE SMALL GIF PART

—

NOTE: Make sure you have the small gif copy layer selected.

[2.1] Add a rounded rectangle shape (or any shape you prefer)

This can be found under the Rectangle Tool (U).

Next, click on the new document/canvas once and this window will pop out:

These are my settings.

NOTE: Make sure the shape's dimensions are the same as the small gif's dimensions or smaller (for step [2.3]). The Radii is for the rounded corners—the bigger the px, the rounder the corner. Feel free to change it :)

[2.2] Align your small gif copy to the shape

My shape and small gif copy are at the center of the big gif. To center your objects perfectly, view step [5B] Move tool here.

[2.3] Clip mask the small gif copy over the shape

To do this:

Make sure the small gif copy layer is above the shape layer

Right click on the small gif copy layer

Select "Create Clipping Mask"

[2.4] Add a stroke to the shape layer

This is for the border around the small gif.

To do this, click the fx button at the bottom of the Layers window. These are my settings:

[2.5] Add a Gradient Map over the small gif copy

This can be found by clicking the circle button at the bottom of the Layers window, as demonstrated here:

Next, clip mask the Gradient Map layer over the small gif layer. To do this, right click on the Gradient Map layer and select Create Clipping Mask.

To edit the Gradient Map colors, double click on the color stop, the one circled in blue below:

TIP: As demonstrated above, drag the color stop near the middle to increase the highlights/brightness of the gif (this would also depend on your chosen color).

—

3. THE BIG GIF PART —

[3.1] Add gaussian blur to the big gif

To do this:

Select the big gif / original small gif layer (the first layer)

Go to Filter > Blur > Gaussian Blur

These are my settings:

Enlarged gifs/photos tend to become pixelated as opposed to reducing the size of big gifs/photos. Other than being a creative gifset effect, adding the gaussian blur softens the rough pixels. So feel free to increase the blur to your liking :)

[3.2] Add a gradient map over the big gif layer

To do this, check out step [2.5]. The colors I've chosen for this are grey for the highlights and black for the shadows. (I've reached the ten photo limit so you're only getting a description 😂)

〰️

Each method will be explained first so pick whichever is most appropriate to your photo and then you will find what to do after removing the background at the last part of this post.

[1] Remove Background

If this feature isn't available in your version of Photoshop, just skip to the ones that you can do :)

TIP: For this method, it's best to use photos with clean, solid backgrounds and "clean" or sharp-edged subjects, such as this:

NOTE: This first method is the quickest way to remove a background but it doesn't work for every photo.

1.1 Open your photo in Photoshop.

1.2 Unlock the layer (if it's locked) by clicking the lock icon.

1.3 Click Remove Background which you will find under the Quick Actions tab in the Properties panel (Window > ✓Properties). That's it!

[2] Subject

If this feature isn't available in your version of Photoshop, just skip to the ones that you can do :)

If your photo has a background that's not too busy and a subject with:

Hair that is either curly, messy, or has visible stray hairs

Clothes that are fluffy or fuzzy

This is the step for you.

These are examples of photos you can use:

For this method, I have decided to just link this video tutorial [Patrick_Star_BOO.gif] because it will take me too long to explain it (and there would be more text for you guys to read and nobody wants that).

[3] Pen + Brush Tool

For this method, you can use any type of photo, like one with a busy background. But I'll be using this photo as an example to keep the explanations simple:

3.1 Open your photo in Photoshop.

3.2 Unlock the layer (if it's locked) by clicking the lock icon.

3.3 Select the Pen tool (shortcut: P)

NOTE: Make sure it's set Path, not Shape, which you can find at the top menu.

3.4 Trace around your subject.

To do this:

3.4.1 Create a starting point by simply clicking anywhere on the edges your subject.

TIP: Turn on caps lock to change your cursor from the pen to a point (like what you see in the gif example below).

3.4.2 Make another point not too close to the first point.

NOTE: To create a curve line, click and drag to arc the line and follow the curve like this:

NOTE:

If you'd like to stop the curves and start drawing straight lines again, hold down option (Mac) / Alt (Windows) + click the on the point you created:

If you'd like to change the curve direction, hold down option (Mac) / Alt (Windows) + click and drag the white point (which now turned blue) as shown below:

3.4.3 Continue this process until you reach the first point you made. Click on it to close the path. It should now look like this:

3.5 Mask the Pen tool path. You will find the Mask button at the top menu, it's between Selection... and Shape.

If it's not there, another way to do this is to:

Right click on your photo (with Pen tool still selected)

Click Make Selection...

Make Feather Radius: 0.1 pixels then click OK.

Add layer mask to your photo's layer. This can be found at the bottom of the Layers window, at the right side of the "fx" button.

3.6 Brush tool (optional)

If there are any parts you accidentally left out, you can just brush them back in and vice versa.

NOTE: Click the layer mask once to select it since we’ll be brushing over the layer mask, not the layer.

TIPS:

You can also brush parts in [1] and [2], just make sure you're brushing over the layer mask.

To switch between adding back and removing the parts you’ve brushed over, press the keyboard shortcut X to swap the foreground and background colors (should be black & white).

Black foreground color: erases

White foreground color: brings back what’s been erased

Making the icon

4.1 Create a New Document by going to File > New... > then make both width and height 128 px, the standard Tumblr icon size.

4.2 Transfer your photo to your new document by using the Move tool (V) to drag the photo onto the new document.

You can also save your photo as a png file then place that file onto the new document.

4.3 Transform and position your photo in the new document (let's call it icon document from now on).

TIP: I personally think it best to convert your photo into a Smart Object (right click the photo layer > Convert to Smart Object) before transforming the photo. This way, if you want to make the photo bigger after making it smaller, it won't become pixelated.

4.4 Color grade your photo.

TIP: If you don't want your coloring to affect your new background, create a clipping mask on your coloring layers to the photo layer. To do this, right click on the coloring layer (i.e. Brightness/Contrast) > Create Clipping Mask. It should all have an arrow pointing down to the photo look like this:

4.5 Change your Background

4.5.1 Unlock the Background layer first (if it's locked) by clicking the lock icon.

4.5.2 Click the "fx" button at the bottom of the Layers window

4.5.3 Select Color Overlay if you want a solid background color or Gradient Overlay if you want a gradient background. Change the colors to whatever you want :)

Once you're okay with your icon, save it as jpeg. If your background is transparent, save it as png.

〰️

[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 :)

[1] Create your gif

NOTE: Make sure the gif you’ve chosen has very minimal movement like in the example above and in the post sent by the anon, otherwise it would be difficult to color. 

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 creating a new layer (which is the next step) in order to align it with your gif and coloring layers as demonstrated below:

[3] Add a Gradient Fill layer

To do this, click the circle button at the bottom of the Layers window and look for “Gradient...”

The “Gradient Fill” window will pop up and this is where you can pick the colors you'd like. To change the gradient colors:

As seen below, click the colored box beside “Gradient”. These are also my settings but feel free to play around with the Style, Angle and Scale. You can also tick the Reverse box if you want to flip the colors.

Once the Gradient Editor is open, select the ones encircled in green as seen below, pick the colors you want, then click OK.

I chose pink and purple for my example because they are analogous to the color of the subject’s clothes in the gif, specifically the red suit.

I could have also chosen colors that complement her costume such as green, yellow-green, or blue. It’s up to you :)

[4] Change the blending mode to Color

Select your Gradient Fill layer and change its blending mode from Normal to Color.

[5] Select the Brush tool

The shortcut key: B

Make sure of these before brushing:

As seen above, click the layer mask once to select it since we’ll be brushing over the layer mask, not the layer.

Have black (#000000) as your foreground color (the color in the front). 

If white became the foreground color after selecting the layer mask, you can change it manually to black OR press the shortcut key X on your keyboard to switch the foreground and background colors.

Make sure the brush size isn’t too big and the hardness is at 0%. Feel free to change the hardness.

With the layer mask selected, brush to remove the colors on your subject like this:

TIP: If you want to color back the parts you’ve brushed over, press the shortcut key X on your keyboard again to switch the foreground and background colors. Always make sure you have the layer mask selected.

Black foreground color: erases

White foreground color: brings back what’s been erased

So that’s pretty much it!

Please like/reblog if this has helped you and feel free to hit me up for any questions and concerns! ♥︎

[6] Last minute changes (Optional)

[1] Create your gif

Make the gif like you normally would, including coloring, sharpening etc. If you don’t know how to make gifs, 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 step [3], so the duplicated layer will be aligned with your gif layer, as demonstrated below:

[3] Duplicate the gif layer

Shortcut keys:

Mac: command + J

Windows: Ctrl + J

[4] Add Gaussian Blur to duplicated gif layer

With your duplicated layer (gif copy layer in the demo below) selected, go to Filter > Blur > Gaussian Blur... The radius is up to you. I used 1.5 pixels in my example.

Feel free to use the other blur options (Blur, Blur More, Box Blur, etc).

[5] Add Layer Mask to duplicated gif layer

To do this, click the square button (highlighted in pink below) beside fx at the bottom of the Layers window.

[6] Brush the parts you don't want blurred

Make sure of these before brushing:

Click the layer mask once to select it since we’ll be brushing over the layer mask, not the layer.

Have black (#000000) as your foreground color (the color in the front).

If white became the foreground color after selecting the layer mask, change it to black OR press the shortcut key X on your keyboard to switch the foreground and background colors.

The brush hardness and size are up to you.

So, with the layer mask selected, brush to remove the blur on your subject(s) like this:

TIP: If you want to blur back the parts you’ve brushed over, press the shortcut key X on your keyboard again to switch the foreground and background colors. Always make sure you have the layer mask selected.

Black foreground color: erases

White foreground color: brings back what’s been erased

〰️

[1] Select the Ellipse tool

Before making the circle, make sure to select Path, not Shape or Pixels.

TIP: To create a perfect circle, hold down shift while creating the shape.

This is what it looks like:

[2] Select the Text tool (shortcut key: T) and hover your cursor over the circle outline, click once the text cursor has a squiggly line like this:

[3] Add your text!

To adjust your text from this:

to this:

[3A] Select the Path Selection tool

[3B] Click and drag the text inwards like this:

[1] Create your gif

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:

[3] Add a photo texture

[3.1] Resources

Download the texture here, which I found through this post. You can also get free textures from Freepik, Pexels or Free Stock Textures.

[3.2] Place your texture

REMINDER: [2] Make sure the playhead is at the start of the timeline before placing.

To place your texture, go to File > Place Embedded... > then select a texture from the file downloaded in [3.1].

I chose the texture named "VHS TEXTURE - LITTLEDR3AMS (2)". It's a long image but I only used the bottom part of it.

NOTE: Make sure the texture layer is above your gif and coloring layers.

[3.3] Change the blending mode

I set the texture's blending mode to Soft Light. Feel free to experiment with the different modes and adjust the opacity.

[4] Add a video texture

[4.1] Resources

The texture used in my gif example from Youtube. In hindsight, I should have gotten my video texture from Pexels or Videezy. They're (mostly) free to download.

[4.2] Make a gif from the texture video

Make the gif like you normally would, but no need to apply coloring and sharpening.

NOTE: No need to gif the whole video, otherwise it would be very long.

[4.3] Change the blending mode

Just like in [3.3], I changed the texture's blending mode. For this one, I set it to Screen with the opacity at 70%. Feel free to experiment with the different modes and adjust the opacity.

Now that you already know how to do that, here's a psd file of the texture I used 😂

NOTE: Before we proceed, make sure you’ve already converted your Frame Animation into a Video Timeline, and converted all your layers into a Smart Object. Here's an easy tutorial on how to do it.

[4.4] Transfer your texture gif onto your main gif

REMINDER: [2] Make sure the playhead is at the start of the timeline before transferring.

To transfer the texture, check out how to do it here. It's super quick.

NOTE: Make sure the texture layer is above your gif and coloring layers. I put my texture gif over my texture photo.

[5] Split colors (OPTIONAL)

If you've noticed, there are green and pink color outlines in the gif. If you haven't, here it is zoomed in:

[5.1] Duplicate your actual gif layer

Select your gif layer then press the shortcut key for duplicating layers: command (Mac) / Ctrl (Windows) + J

[5.2] Split the RGB channels

With the duplicated gif layer selected, click the fx button which is at the bottom of the Layers window then click Blending Options...

Under Advanced Blending, untick the R and B boxes (later, you can experiment with this and untick G and B or R and G). This is what my settings look like:

[5.3] Nudge the duplicated layer

Select the Move tool (shortcut key: V) and press the left arrow key twice. It's a bit subtle, but it should look like this when you're moving it:

You could also nudge your duplicated layer upwards, downwards or to the right. Now that we can see what it looks like, you can now go back and experiment with the channels—untick G and B, or R and G—and see which colors you like best on your gif.

〰️