Today we are setting up our Roar accounts and being shown how to make our layers into assets for importing to After Effects.

Some things I need to remember are:

• Dividing my shapes up in layers according to how I wish to have it animated
• Roar only allows 4 layers
• Remember to make the backgrounds transparent when exporting.
• export as mp4s
• From Ai to Ae: double click where u import files, Import, file, select ai doc, import as composition retain layer size, it keeps all the layers.
• Release groups to sequence to make 4 layers
• (select main layer, options)
• Ae: create, create shape from vector
• keyframe shortcut: U
• Choose font with bold and light, make 2 text layers
• create shape from text layer
• double tap U on shape layer, select all paths by holding in cmd, click top keyframe thingy, makes keyframes for all of them. Then, click U once on shape outline layer and click it again. This will make only the path keyframes appear dropped down.
• snapping tool at bar in top
• scrubber: cmd arrows is 1 frame at a time
• cmd shift is 10 frames at a time

We went through the basics of animating shapes in After Effects again, and were shown hoe to make gradients, change path shapes etc.

Then we made our names into shapes and animated the letters to go from bold to light and vice versa.

In our new exercise, we are going to learn about variable fonts. We looked at Axis praxis, a site that lets you play around with different fonts, their kerning, layout, size and weights and gives you the CSS for it.

The benefit of axis praxis is that you can css the whole font family and then just insert which weight etc you need, instead of maybe importing a whole font family from google fonts which will take forever to load.

We started refreshing on how to make an html website and link our css, and made a basic layout of three titles, paragraphs and a body copy text. We need to place the paragraph titles in all 3 columns and I’m still trying to figure it out bc im dumb

Some Dreamweaver tips:

.hello and tab makes div

ul.*3 makes that many lists

lorem*4 bodycopy text

lorem25 makes 25 words

expand objects to make dotted shapes…make lines shorter with triangles

I don’t know how to arrange “do not fear”:

The final changes I had to make was adjusting my warped body copy’s arch to match the arch parallel to it. In addition, I added patterns to the blue semi circle, making it half lined half dotted. Besides that I tweaked small things here and such as the size of decorative rectangles and making sure patterns didn’t overlap.

I’ve already found a lot of cool inspo for my animation….

• 

• 

• 

• 

• 

• 

• 

• 

I realized one word was missing from my sentence, namely “Unfailing.”

I suppose I could just leave it out as the whole sentencce is also written out on the poster already…

Nevertheless, here are 3 different layouts I’ve experimented with: