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).
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.
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.
- The Gif text itself - what's it going to say
- The color of each line of text
- 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.
Text entered will usually, usually, be squished if necessary in order to keep it no longer than the width of the gif.
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.
Text fonts
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.
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
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.