#text tutorial

┈ ˳ᴗ ᴗ) ｡ OO1, setting up your project :

once you've downloaded alight motion, you must create your project! there are multiple settings available, but here is what is needed for this specific tutorial: a transparent background, a 1:1 canvas ratio (specifically for non-pro users due to the watermark), and a 12 fps frame rate.

┈ ˳ᴗ ᴗ) ｡ OO2, setting up your text/font :

now that your project is open, click the plus button in the bottom right corner of your screen. it should open a tab of options. directly above the plus sign should be a button labeled "text". click that!

input your desired text and play around with the settings! there are many ways to customize your text in alight motion, not just through these settings, but that will be discussed later after the effect tutorial, just to keep things less overwhelming. for non-pro users, try your best to keep your text as far as possible from the watermark so cropping is easier. once you've done that, extend your text duration to 2 seconds (if it isn't already)!

alight motion has a wide range of preinstalled fonts; my favorites being averia sans libre, henny penny, mystery quest, im fell english, fontdiner swanky, kosugi maru, gamja flower, and other fonts you may be familiar with if you use metadata fonts for rentry. if your desired font is not available, you must download it to your device and unzip the file before importing it:

┈ ˳ᴗ ᴗ) ｡ OO3, applying the effect :

this is the tricky part of the tutorial! confirm the changes to your text and click on the button in the bottom right corner that should say "effects". press add effect. at the top of the effects page, look for the search button and search "text transform", then select standard settings! we only need to change 3 or 4 things, so watch the video below carefully.

if you find that the letters in your text are moving too far apart or too closely, it can be adjusted by changing the offset settings. in the video, i used -5 for x and 5 for y in the offset as an example, but it all depends on the selected size of your text. note that your x and y should be additive inverses of each other, so if your x is -3, then your y would be 3. if your x is -7, your y should be 7, and so on! do not be concerned with the speed of your effect, it will be changed later.

for those who want to customize your text further with gradients, strokes, outlines, or shadows, go back to the tab with the effects button and begin experimenting with these options! this is not just for text as well, images can be edited to have a border and drop shadow too. (p.s., i recommend using border instead of stroke for outlining text!)

┈ ˳ᴗ ᴗ) ｡ OO4, exporting the project :

feel satisfied with your project? it's time to export! unselect your layer of text and click on the green export button at the top right of your screen. choose the GIF option, but don't click export just yet! click the arrow on the right to manage the settings of the gif. this allows you to change the final frame rate and resolution size to minimize the overall size of the gif. changing the resolution is completely optional, especially if you plan to import this text onto a larger sized graphic, but its very important you change the frame rate to 'low"! this will slow the speed of the effect and minimize your project to approximately 6 fps, ensuring no duplicate frames.

heres an example of what i was able to come up with after experimenting & exporting! if you feel that this speed is too fast still, you can change the speed of the gif on ezgif.com. for those who did this without pro, you can also crop the alight motion watermark off on ezgif as well!

i hope this was helpful? if you have any questions, feel free to comment and i'll try my best to help!!! also very sorry this tutorial took me like... a week? idk. tumblr was NOT agreeing with me when i made the first draft of this.... good luck and have fun editing <3!!

one: put the text you want to color for your tumblr post.

two: change the color of the text to whatever color you want. there are several options on how you want it. pick whatever option you want. the text will automatically generate for you.

three: copy the entire code then press “copy”.

four: go over to tumblr (website, not the app) and click “edit post” (the pencil) or create a new post.

five: click the settings button and change it from “rich text” to “HTML.”

First, I just make my text layer as per usual. For this one I used The Bold Font font with the settings above and then I changed the blending mode to Exclusion. So now it looks something like this:

The most important thing here to note is the colour of the text. For the blending to do what we want it to do, I find that using this lighter colour region as the base colour works best:

Then for this particular effect you pick the opposite of the colour scheme you're largely using in your edit, unless you specifically want the text to contradict the overall tone. So, in this case, because the edit was mostly made up of cool colours, I used a warm tone as my main text colour.

Then I went into Layer Style (either Layer -> Layer Style or double click on the text layer) and added a Gradient Overlay. Now, you may notice that I used white for both sides of the gradient, which means I could've just as easily used a Color Overlay, but if later on you find that the gif underneath has areas that make the text a little unreadable or messy looking, it can be helpful to adjust the gradient tones, so I like to have the option from the get-go, instead of undoing and redoing my settings.

I used Hard Light for the blending mode on this, but you can play around with some other modes, like Screen or Difference or even Color, to see what pops the most. Then I just lowered the Opacity, so it would keep some of that see through effect while also staying a consistent colour.

The last bit is just some regular old Drop Shadow to separate the edges and make the letters a little clearer.

you should be able to see this coding somewhere on your screen:

you're gonna replace the two hex-codes (highlighted text) with whichever colours you'd like. to do a gradient, like this, the two codes will be different, but i like to do a solid colour like this so my codes will be the same.

the hex code i use for the baby pink is D2A3BE, or you can use your own. if you don't have a hex code you like yet, you can use the colour picker on this site to find one!

just copy and paste the hex codes into the code so it looks like this:

make sure it looks exactly like this. you still need all the spaces, quotations and other code. only change the hex codes.

in the top left of your screen, there should be a "run" button, and when you press it, the colours in the bottom right should change from the default ones to the ones you chose.

next, you're going to open your tumblr post in your first tab.

your post will start like this. you'll go to the settings button in the top right (circled) and change the post from rich text to HTML

this will enable coding on the post. you'll still have 'preview' where it will look normal and you can still type and edit the post as you usually would.

once you've typed something it will show it in the HTML option just in a different way:

you want to go to the preview page and make sure you've got the text looking exactly as you want it (bold, italic, small, etc.). also note that colours look especially good and show up well when the text is bold. i set mine to bold as an example.

when you switch to HTML it will look something like it does above.

next, you'll copy the text between all the coding prompts (e.g. <p><b> and <b><p>). only copy the text you want to be pink or another colour!! don't highlight any of the coding. then paste it this top box on jsfiddle so it looks like this:

press "run" on the right, and it will spit out a line of code in the second box that will look something like this:

you're gonna copy that line of code and switch over to your tumblr tab. on your HTML version of your post, find the text you're changing and highlight it. then paste the code into that spot. make sure not to highlight any of the surrounding code - only the text you've written and want to change.

it will look super weird and long because it's colouring each symbol and letter, if you look closely, each letter of "example text" is separated and surrounded by code. when you switch to preview it will look like this:

for gradient, the process is the exact same, but on jsfiddle, when you're replacing the default hex codes with yours, the second hex code you plug in will be different to the one you start with. for example:

this second colour is C45494 btw!!

to do specific text in a paragraph as if bolding it (which i do in a lot of my posts), you just want to find that text in your HTML post, and copy and paste the specific word/s into your top box on jsfiddle, and then proceed as normal. example: