Close

Gif Maker With Text

Personalizing GIF Text

Being able to personalize a gif is an added flare that many people love giving and appreciate receiving. Nothing beats being able to put the recipient's name on a thank you gif, a birthday gif, or any other. We at Editable GIFs aim to make this as quick and as easy as possible.

This article is going to dive into the details of how we let you customize the text on our gifs. But the methods are quite simple and you can skip this manual quite easily. If you want to jump right into it, there many kinds of gifs here that have text customization. Here are three categories, and there are many more editable gif categories as well. (see our menu).

Customize Thank You GIF Text Customize Birthday GIF Text Customize Good Morning GIF Text
Gifs whose text your can customize

If you like the details of things, then please read on.

GIF Text Overview

Adding text to gifs is a basic functionality of almost every gif maker. It is done in many different ways and Editable GIFs tries to make it as quick and easy as possible - but also as flexible as possible.

Example Good Morning GIF with default text Example Good Morning bestie GIF
Easy text customization on gifs

Most of our newer gifs provide one or more lines of text that you can fill in. When you run the animation you can see how your text will appear in the gif. The default settings are fine, but basic settings can be easily customized too.

GIF Text Options

At Editable GIFs we provide 3 basic text options on gif customization.

  1. The Gif text itself - what's it going to say
  2. The color of each line of text
  3. The font of each line of text

Warning. Not all of our gifs follow the rules and guidelines below. It's been a learning experience and an evolving process.

Gif text

Most text in our gifs can be changed. We usually make an effort to highlight this by using curly braces around one of the lines - usually {Name}. But other lines are changeable too making it possible to turn a good morning gif into a thank you gif.

gif text entry fields
A couple text entry fields

Text entered will usually, usually, be squished if necessary in order to keep it no longer than the width of the gif.

Example gif of squished text
Long text is made to fit

Text color

Text colors in gifs can usually be changed. Honestly, I think all the time at this point. Gif text will often have border color options and sometimes even a shadow color. Colors are selected via the color selector of your device.

Color selector for gif text
Color select for Chrome on Windows

Text fonts

Font selector for gif text
Color select for Chrome on Windows

Editable GIFs support 6 basic fonts.

The "Block" font was added for birthdays.

The "Spooky" font was added for Halloween.

Do we need more?

Super Text Customization

Now we are getting into the weeds. Editable GIFs give you far more customization than the basic entry fields shown below.

GIF Font Entry Fields
Basic gif text customization

Editable GIFs, and all the gifs on this site are created using Canvas Language (or SCL). SCL is a text-based animation description language. This means you can just edit the gif instructions directly, and change the formatted text.

Notice the Edit gif icon icon in the picture above? Clicking that will take you to the edit page for the gif. This page gives you complete control over the animation and gif options. This is how you can further customize text.

The edit page will give you access to the SCL code that describes the gif animation. It looks like this:

We create text on gifs in two ways, 1) text sprites, 2) drawing. For both types I'll show how to change font size. You'll see that other changes are also intuitive to make.

Text Sprites

Text sprites can have animations attached to them. That is used to move (animate) text around, grow and shrink a text element, etc. Sprite descriptions are given as a list of values as you can see in the snippet below.

To make these changes, open the edit page, scroll to the GIF animation code and search for the text you want to change. Be aware that the text you want will be represented with a value like LINE1. You can find what this is at the top of the source code, for example: var LINE1="Happy Birthday"

create textsprite as Line1
where
  x=200 y=15 angle=0
  center=auto text=LINE1
  align="center" color=LINE1COLOR
  style="border" borderwidth=3 bordercolor=LINE1BORDER
  font="normal 600 50px "+LINE1FONT

As you can see for the "font" property, we can easily change the font size. We can also change the "borderwidth". In fact there are enough options that we have a reference page to describe it all. The capitalized values like LINE1COLOR come from the entry fields and should not be changed.

Drawing Text

Editable GIFs has another way to draw text in a gif and that is simply by drawing it (obviously!). Really though, this means the text isn't used as a sprite that can be animated, instead the text is just painted where instructed.

Text drawn this way is done in a "draw" block that can draw under the sprites (_bottom), on top of all the sprites (_top) or actually onto a sprite (just name the sprite). Read more about "draw" in SCL reference

draw onto _top
  fillstyle "red"
  font "normal 600 42px serif"
  filltext "Happy Birthday",10,10,400
enddraw

As you can see, just like with textsprites, it's easy to see where and how to make your chances. That said however, you really should view the reference material before you get too deep into it.

Conclusion

That is how we put the text on our gifs. Our primary concern is making gif templates that are easy to personalize and that can be easily generated and shared.

Editable GIFs does most of the work for you in creating our templates, but like all things template, they can be customized. If you want to create templates yourself, consider getting a creator account here. The templates you make will be used by other people who make their own personalized gifs.

More websites that use SCL for animations and game development: