#nongif

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

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.

〰️