More Animation Training and UTFC

Animation Training

More animation training! This week was motion design focused which I mainly had fun with because it made me use more after effects features and puppet animati0n.

The first assignment was to fix a “broken” file which was mainly just using masking and reordering the assets. I think the biggest challenge was waiting for it to render since it’s over a minute long. It’s also a rather slow paced video, but nonetheless, I had fun figuring out how to fix it!

Broken File Link

Next up was animating a banner and animating Illustrator assets! This was actually really interesting as I used the puppet pin tool to essentially create limbs and mesh for the banner. I think one of the main things I learned is that it’s really easy to lose track of the proportions of an asset when using the puppet tool so I had to be very cautious the animation didn’t look too unnatural.

Animated Banner Link

I had a lot of fun with this one since I got to work with premade assets with an already established style. I’m used to just working with my own art so I look forward to projects like this.

UTFC

I’ve actually heard about the UTFC assignment before and that’s it’s mainly finding photos for the textbook. It’s a rather straightforward and meditative assignment. Some of the words can be really similar so working around that or figuring out the main thing that differentiates the words. However, I look forward to the feedback I can get so I can see what I can look for in the future.

Fall ’23 STA Roster Poster

Project: Fall 2023 STA Roster Poster
Client: LAITS
Completion Status: *Final touches*
Staff guidance: De’sha
STA team members: Leilani
Description/plans: We will be finalizing the design/composition to be reviewed by Mike. The QR code placement and design are yet to be finalized but we want it to blend in with the poster, as well as display some significance to passersby who will want to scan it.

 

 

 

9/25 Group Meeting – MOODBOARD

Activity: De’sha gave us 15 minutes to create and upload a mood board of goals/ambitions. My initial mood board was very rushed but for good reason– because De’sha didn’t want us to dwell on the small details, so we could focus on the bigger picture. I went back in and made it look better because De’sha said she’d be printing these out… I expanded a bit more on my goals because my first one mostly consisted of pictures– which didn’t help me remember the explicit goals I was trying to display with them. With the bullet points, it’s much easier for me to stay aware of the goals I’ve set, and what I need to do to accomplish them.

 

Although I like our check-in meetings, it was also fun to participate in an activity with other STA’s. This activity was also beneficial for all of us to see where we are in our design journey

 

Animation Training

I figured out how to make titles!

Anyway this was an exciting week as I got to practice my favorite medium, animation! I had a lot of fun with these training, but there were a few bumps.

I’ve never animated in photoshop before and I don’t think I’m used to it yet. I ran into some problems because there were steps I didn’t keep in mind completely. But all worth it cause I got to make an animated GIF!

It’s so satisfying to watch.

Next, I completed the online course graphics which was also really fun as I got to use After Effects!

That program is very intense and overwhelming but I’m surprised to say I’m getting used to it. The training was to make an animated intro for a class of our choice so I chose the RTF class, Comics and Cartoons. Here’s how it turned out.

Link

Some of the assets I had to make in procreate which wasn’t a problem at all. Some effects I used weren’t very straightforward and looking up tutorials wouldn’t get me anywhere so there was more experimenting with this project than I thought.

I’m currently working on the motion design animation training. I’ll upload those to my blog next week!

Week 29: Vue.js

What is Vue.js

Vue.js is an open source JavaScript framework. It is created to build user interfaces and single-page application.

Vue.js offers a lot of benefits that I really enjoy using.

1. Virtual DOM: Vue created a virtual document object model and allows the page to update automatically when we update the variable in the JavaScript.
2. Directives: Vue has special commands that we can integrate easily in HTML to handle the logic of the page.
3. Template: Vue makes it easy for the newcomers to learn because of the HTML template with added instructions that only Vue can offer.

Training 1: Built a simple counter

Date: Sep 22, 2023

This is the training that I built to examine the difference between Vue and Vanilla JS.

VueJS makes it super easy to add logic and directives to the page. The user can just insert special commands frm Vue and it will display the data with that logic accordingly.

Training 2: Built up the Project Management App

Date: Sep 22, 2023

Built upon the Figma application, I start to work on the first homepage of the app. I also start to lay out the foundation for the dashboard.

 

Project Hunter Gatherer

Started on: Sep 28, 2023

Staff Guidance: Chris

Description: 

The project aims to update from Vue 2 to Vue 3. I spent a lot of time cleaning up the code, setting up the environment with Vue and Laravel PhP.

Now, the project is in a good position to examine and upgrade the code from Vue 2 to Vue 3.

 

Activity: Sketch logos, draft in Photoshop or Illustrator, transform into a favicon, and mock up the design on different items. https://leilanimcabello.myportfolio.com/

This project’s purpose is to put oneself into words and distill the essence of a personality in written and visual language. It allows one to distill their personality, values, and aesthetic preferences into a simple and effective visual representation. By creating a wordmark logo of myself, I was able to establish a strong visual identity that can be used across various platforms, from social media to business cards.

Creating a wordmark logo requires a deep understanding of typography and branding.  Throughout the process, I experimented with various typefaces and layouts to find the perfect balance between readability and aesthetics. The challenge was to create a wordmark that not only looks visually appealing but also aligns with my personality and style. I went through numerous trials and errors, testing different font weights, styles, and colors, until I arrived at the final design. The process taught me the importance of paying attention to every detail, from kerning and leading font selection, to creating a cohesive and memorable logo.

To me eyes are a form of looking into the soul, you can read so much about a person by looking into their eyes. I have a fond attachment to them which is why I decided to incorporate and mimic my own brown eyes into this logo of my name Leilani Cabello. Overall, I feel confident about the outcome of this project. Through understanding the medium and researching how wordmarks work, I believe I conveyed an idea of who I am. I was able to have creative freedom, learn more about typefaces, and understand some basics of Adobe Illustrator.

I decided to take a unique approach to the assignment Activity #1: Creating your Color Wheel. I created a composition of flowers in an art nouveau style with a faded aesthetic to break away from the traditional color wheel concept. This decision stemmed from a desire to challenge myself and take an advanced approach to the project. I saw this as an opportunity not only to fulfill the assignment’s requirements but also to create a piece that could enhance my portfolio and further solidify my understanding of color theory. In selecting the colors for the flowers, I carefully considered the meanings and values commonly associated with each hue. For instance, I chose a soft and muted palette of pastel blues and purples. These colors are often linked to tranquility, serenity, and a sense of balance. While I initially entertained the idea of using bolder and more contrasting colors, such as vibrant reds and oranges, I eventually discarded them because they could have overwhelmed the composition and distracted me from the overall aesthetic. By focusing on hues and adjusting their saturation and brightness, I aimed to create a soft and pleasing composition that would complement the art nouveau style and convey a sense of timelessness and elegance. In summary, this project allowed me to deepen my understanding of color theory and apply it in a creative and unique way