2022-504-haydenmiddleton - Tumblr blog

[2022-504-haydenmiddleton]

ASAP MP4 NUMBER 1 VERSION 3

This version I followed the feedback I got in making the last important informational lines a lot more legible and easy to read. This is good as this whole gif goes a lot more into the information about the font which makes sense for a Typepromo gif. It gave me a chance to play around a lot with key frames and dwell times as I made each group of text come in different ways to make them stand out. I like how it loops into type design at the end and then goes back into talking about the importance of typography I feel like it has a good thematic loop as well as a physical one.

[2022-504-haydenmiddleton]

ASAP MP4 NUMBER 2 VERSION 3

Here is third version of my mp4 animation with a finished ending. I implemented the flashing and the “finished” word at the end to create a good ending to the ‘race’ design this gif has going. I made the ending fade back into the count down creating the proper gif loop. I got some feedback and I was told I could create a checkered race flag design at some point but as the deadline gets nearer I’ll figure out whether or not I have time to add that.

[2022-504-haydenmiddleton]

ASAP MP4 NUMBER 2 VERSION 2

After brainstorming again to figure out what I was missing from my type specimen booklet I totally reworked the idea I had for this mp4 animation and wanted to focus instead on the numbers. I thought a fun countdown with the numbers expanding or becoming smaller would work well for a countdown and also because being able to change scale is an MP4 video timeline exclusive and only available with the use of key frames. When I was getting to the end I was running out of ideas so this is what I have so far.

I asked for feedback from my peers for help with the ending and someone suggested the word “finished” going across the page which makes sense as I’ve tried to make it look like a race is happening in this gif. Also someone said to add flashing lights to continue and add to the fast pace which I think would work out well. In the next version I’ll implement these things, sort out the end and make sure it loops at the end.

[2022-504-haydenmiddleton]

ASAP MP4 NUMBER 1 VERSION 2

I worked on this gif a bit in class and got some feedback while working. I decided to document it here with what I was up to. After the first part those three lines should be slower, more legible etc especially since I talk about how typography and its design is important because it works to make things clear to read and legible and so the next lines after to be passing by quick and hard to read makes no sense. Trajano gave me some ideas on how to do this and so for my next version I will work on improving the lines of text after. I also need to remember to make the animation loop after everything is done as I’ve been inclined to forget that.

[2022-504-haydenmiddleton]

MP4 GIFS BRAINSTORM x2

I went back to the drawing board after feedback to think for new fresh ideas as I was feeling like I had already gone through all the elements of the asap font. I checked my asap type specimen booklet and came up with two new ideas for the animations which would showcase something new and creative. I will base the first animation on the importance of typography and talking about asap font elements and the second animation will be showcasing the numbers and how they look.

[2022-504-haydenmiddleton]

IN CLASS FEEDBACK

Here is the updated checklist I did in class after handing in my formative. I showed my work and here were some notes I got given. A lot of them were to be expected like just exploring video timeline animation more and getting more creative with it. I also got a few details I should add to my gif animations which I will work to add in the future. Overall I do feel like I’m in a good place with my work and I think I can get it all done in time for the summative in around 2 weeks time.

[2022-504-haydenmiddleton]

ASAP MP4 NUMBER 2 VERSION 1

Here I took inspiration from my earlier research where I saw another type designer use this kind of technique to showcase different styles within the font as it acts like a neon or flashing light. It’s very cool and eye catching but I do think I need to elevate it a bit more as its very similar and even looks like it was done frame by frame instead of using the timeline and key frames. It also needs more elements after this but I was running low on time with other assignments so I will get back to this animation soon.

[2022-504-haydenmiddleton]

ASAP MP4 NUMBER 1 VERSION 1

Here is the first beginnings of my new video timeline animation. It took me a while to get used to the new animation style all over again after becoming really confident with the frame by frame .gif style of animation. At the beginning I forgot some of the most basic stuff like making sure my layers and items on the timeline had been turned into smart objects, but now ill know for the future. Getting into this animation style overall will take a lot of testing and practice before Im confident again with type animation. Anyways this animation I did the typewriter style animation like we were shown on the YouTube tutorial and it made me feel a little less scared or intimidated going into animation with a guide. Next version I definitely need to add some more elements, interest and movement but this was a good base start.

[2022-504-haydenmiddleton]

MP4 GIFS BRAINSTORMING

Here is the first initial brainstorm about what I wanted to do in the mp4 video timeline animations. I tried thinking about the bases I haven’t covered yet with my other frame by frame gifs and so I decided to start off I wanted some more paragraph of text to show off as an example. I also thought about the research I’d done before on mp4 video timeline type animation and decided to incorporate some of that learning like the typewriter style text tutorial I watched and analysed. But at this point I wasn’t sure how my skills were working with this style and I also wasn’t sure what I was able to do with this style so I left the brainstorm pretty bare bones but perhaps will come back to it for other versions when Ive figured out more of the possibilities.

[2022-504-haydenmiddleton]

ASAP GIF NUMBER 1 VERSION 3

I went back to my first gif to add to it like I did with my second one so I could hit the 15 seconds and over mark. Since this gif talks about language compatibility for my font I thought that adding some examples of Maori language or characters would be important, especially the main vowels which I dedicated a page to in my type specimen booklet so this felt like the perfect addition. Here is the updated gif.

I really like how It turned out, only issues I have with it are some small stuff like maybe how the U’s should stay in the middle of the page for longer and not disappear as quick so I will fix that later when finalising the gifs. Here is the new rough timing. It is give or take 20 seconds so now it is of viable gif length for hand in.

[2022-504-haydenmiddleton]

WEEK 10 IN CLASS WORK (2)

Then we tried out different cutting styles and using transitions to create fades or other movement between moving video files where we tested and played around with that. Then masking moving videos onto text and creating a reveal style transition. The beginning of the video as well shows how with mp4 animation and key framing you can do zoom ins which is very helpful and a new feature from the frame by frame animation style and I like this style of zoom in then reveal technique.

[2022-504-haydenmiddleton]

WEEK 10 IN CLASS WORK

This week I accidentally forgot to upload earlier the work we did in class. This day we worked on making textures that could be used as a background for our gifs or as a texture we mask onto the words and letters themselves. We were taught all about clipping masks as well which was super helpful for me since I’ve always been a little confused by them and usually end up doing something a lot more complicated to get the clipping mask effect.

Here is an example of using clipping masks and how my layers looked while working with this texture and my font. Here I also have an example of effects layers and what you can do with those to add more interest to the video and font without warping it like we were told not to.

[2022-504-haydenmiddleton]

ASAP GIF NUMBER 2 VERSION 3

I made some refinements to continue lengthening the gifs and so I started with my second gif. To get ideas I went back to my type specimen booklet and looked at what elements or information I hadn’t added in yet. I found a simple, yet important thing I should add was who designed the asap font which is Pablo Cosgaya so I worked to add that into my second gif here to make up for frames and time.

Here is the third version of this gif with the new added part but I also went back and added longer stops to where it was important as I felt there was still some places where the gif went too fast and you couldn’t fully read so I fixed that by just adding longer stops when the text is fully visible or finished moving into frame. Although after all this I forgot to make the gif loop so I had to go back and change it up again, adding the final frame at the end and adding the tweened frames in between so It’s a smooth fade back to the start.

ASAP GIF NUMBER 2 VERSION 4

Here is the looping gif which I’m hoping that will stay as my final but I will get some more feedback and see what others think before calling this my final.

I timed this new version and was happy to see that it was roughly 19 seconds give or take which was a very good improvement!

[2022-504-haydenmiddleton]

ANIMATION TUTORIAL VIDEO NOTES

I saw the videos provided on canvas which provided tutorials for mp4 video timeline style of animation and so I checked them out and took notes on each video making an almost easy step by step guide for myself in the future when I want to come back to these techniques easily.

How to Create a Typewriter text Animation in Adobe Photoshop

(https://href.li/?https://www.youtube.com/watch?v=cQsjvpXRjIM)

- Start with one main text box but copy and paste each line as they will need to be split up into individual lines.

- Make a layer mask that covers each line of text.

- Holding Alt while making a mask will make it an inverse mask. Otherwise while selected press control.

- Each line of text takes about 4 seconds to animate in this typewriter style.

- Make a layer mask keyframe at the start and then at 4 seconds later move the layer mask (have it selected not the text) off of the text so you can see the line of text.

- Continue with each line of text from where the other movement left off so it creates a seem less movement between all of them.

- Now the text will appear in a typewriter style, but this can also work with regular text with out chosen fonts to make text appear in an interesting and dynamic way in out animations.

How to Make a Lower Third Animation in Adobe Photoshop

(https://youtu.be/jN-e9FuSiUg)

- Create the text you want to work with and place it basically anywhere on the screen where you want it to move but in this example, the lower third.

- Select all elements of the text, lines, objects with the text, different lines of text, etc and make into a smart object by right clicking and finding it on the menu.

- Double click smart object and it will be taken to a new tab in photoshop.

- Then you can see the smart object on the timeline in this new tab and all its elements.

- Now you can animate as you please and can even go even deeper and more specific onto each element by double clicking each layer and working one by one.

- Save as you close each individual tab and when you go back to the smart object as a whole with all the elements they should move as you edited them from the other tabs.

- Check how it looks altogether, make adjustments and then file save.

- Then when you go back to the original place where you maybe have other elements or a background set up this smart object will move how you edited it in other tabs.

- This is an easier way to break up the animation work and therefore keep your timeline clean and less confusing as more elements are added.

[2022-504-haydenmiddleton]

ASAP GIFS V2 TIMING

After doing some refinements on the two gifs I began timing these versions to make sure they were the full 15seconds since with frame by frame animating its a lot harder to tell how long the gif is compared to the mp4 and video timeline animation style. So I just put up the gif in my browser, making sure it wasn’t lagging at all, and then timed on my phone.

This showed me that I definitely still needed to work on these gifs to make them hit that 15second mark so I needed to hit the drawing board again to add extra elements to these gifs.

[2022-504-haydenmiddleton]

MATERIALS AND MEDIA CHECKLIST

We were given a checklist during week 10 and I decided to check off what I had done or knew I was doing so far and then I could be more prepared with what I needed to work on before final hand in. There seems to be some things I don’t know about like the WIP acrobat files which I will ask about but other than that I think checking this list has made me more confident about what I need to get done.

✔️ Research Google Font Typeface as content for publication
⭕️ Develop material specific to the Typeface, the designer why/how/year the typeface was designed
⭕️ Progress your own - frame design iterations
⭕️ Rework your Animations remembering to use several colours if required
⭕️ Ensure all type combinations showcase structure, form, and specifications of the typeface
✔️ Rework any digital typefaces, words and sentences to include a subtle colour in the animation
⭕️ Checking all text used that makes sense - heading, any subheadings, quotes
✔️ References collected and included in the Tumblr Blog

Prepare Adobe Illustrator assets pages with:

✔️ 1080 x 1080 pixels each asset
⭕️ RGB colour 
✔️ Grid guides
⭕️ Colour and various combinations
✔️ Character Styles
✔️ Paragraph Styles
⭕️ Zipped folder
⭕️ Exporting 


Prepare Adobe Photoshop assets pages with .GIFs:

✔️. 1080 x 1080 pixels canvas frame
⭕️  2 Adobe Photoshop Gif animations
✔️. 72 Pixels per inch
⭕️  15 seconds duration
⭕️  12 frames per second
✔️  RGB colour 
✔️  Correct naming
✔️  Correct variations listed 
⭕️  Exporting 

 

Prepare Adobe Photoshop animations with .MP4s:

✔️  1080 x 1080 pixels canvas frame
⭕️  2 Adobe Photoshop .MP4 animations
✔️  72 Pixels per inch
⭕️  15 seconds duration
⭕️  25 frames per minute
✔️  RGB colour 
✔️  Correct naming
✔️  Correct variations listed 
⭕️  Exporting 


Tumblr Blog up-to-date with URL
⭕️  WIP Acrobat file 
✔️  Screenshots
✔️  Annotations
✔️  Various testings


Reflective Statements:
⭕️  WIP Acrobat file or Voice recording
⭕️  Reflection on Technical learning Adobe, etc and teaching
⭕️  Reflection on the Animated Design work on decisions made.  

[2022-504-haydenmiddleton]

ASAP GIFs REWORKED

After getting feedback in class I went back to fix the issues I had with my original 15 second frame by frame gifs. Below is the first one which I decided to change how the alphabet came in and used movement tweening to get them in frame. Then I changed the letters over to glyphs showcasing all the letter styles the font. This way I could make sure that all the letters were actually in line and the margins between lines of text were all the same which cleans up the look of the gif a lot.

Then I made changes to my other gif which I mostly just made the text that pops up in the second half all one caps size, so I chose lower case to showcase in this part. When I made the screen move up to cover the text again it did something weird with all the words by moving them around which I think I know how to fix now but I actually kind of like how it looked as it all dispersed around different areas. I’ll see what others think before deciding this as a final gif. Still I definitely agree that it looks a lot cleaner using one type of text for all the words then what I did before.

I might also decide later to change the end of this gif as it’s quite similar to the beginning of my other gif and I want to make sure I’m showcasing all the elements of this font across my gifs.