New Trainings!

I completed the history of design training! This one was a lot of fun since I feel like emulating a style you like makes you appreciate it more.

I chose to do 2 of these since I wanted to do the Dada era art but that was more photoshop focused and I wanted to get more practice in Illustrator so I did the New Typography style too. Here’s how they turned out.

I got a new animation training assignment which I’m really excited about! I don’t have a lot of experience in using rigged animation and this training will really help me understand it better.

I need to design a character in Illustrator that I can then rig and animate a walk cycle for in After Effects. I don’t have great knowledge in rigged animation in After Effects and I basically know nothing about Illustrator, so I really wanna see what I can do here!

I started by practicing basic illustration in Illustrator. I used this youtube video to do a follow-along practice and tried to recreate the character design in the video. Here’s how it looked (I got impatient and didn’t want to do the body).

Then I moved onto following this video to learn how to sketch out my own character in illustrator. Here’s how it’s looking so far.

I’m trying to be very conscious that this design will be able to be rigged in the future so I’ll try to hold off on making the design heavily detailed. I look forward to how this will turn out!

2023 Caricature

I was inspired by Lorena to update my caricature for 2023! Although not much has changed about me, I like this outfit more because purple is my favorite color! I also updated my hair (a very minor change but it makes a difference to me!)

STA Training: UIUX with Figma

Start: Oct 13th, 2023

To be Completed: N/A

Staff Guidance: De’sha

Project Description: Learn the fundamentals of user experience and use Figma to develop my NEW personal portfolio website and see how this process can make the website easier.

I started to work on this training for “client 2”. I read through the whole KB and found it cool to design a brand new personal portfolio website for myself with all the knowledge I learned. After ideations, I created these wireframe and user flow by listing out all the pages in its big “three-pages structure”. I found it’s cool to combine my personal logo as part of the website so I can create strong designer taste and personality.

 

Here is my Figma file (digital website mockup) for myself to develop it in Figma.

Here is how my website looks like now. I want to refine it by adding fancy animation and rolling effect on it. I might start a new design research on how to make website effect with custom coding and the design approach of it.

Specially, the first animation I want to create a frame-by-frame transition from a statement introducing who I am to the selected design works. I get the inspiration from Apple official website. I really love their aesthetic, color scheme, and web animation that works for their fantastic storytelling. If I’m able to make that tutorial, I might start with the case study of it. Moreover, I want to add in the basic transition/hover effect when people natural scroll the page. Such animation give people a smooth experience and emphasize the clickable section of the page when they want to explore around. I believe that it’s extremely crucial for web designer know how to guide people and imply information via details.

Basic Training: How to Create Flashcards

I created flashcards with basic Photoshop skills as well as learned how to tie iconography, color, text, and layout in a cohesive manner. I used icons, color schemes, Google Translate, and Photoshop layers/grids to create flashcards.

Bird Logo:

Andrew Doane from the Noun Project

Supalerk Laipawat from the Noun Project

Hea Poh Lin from the Noun Project

Whale logo:

Anthony Ledoux from the Noun Project

Wira Wianda from the Noun Project

Amethyst Studio from the Noun Project

Fish logo:

Zaenul Yahya from the Noun Project

Iconpacks from the Noun Project

Viet EDC from the Noun Project

 

Intro Training: Custom/Studio Course Graphics

EAS 1030 MO1 Earth’s Dynamic Environment II

class content: interaction of land, water, air, and life; emphasis on humans and the environment; atmosphere, oceans, weather, storms, etc.

EAS1030 Design Brief: The Professor has a preference for burnt orange

Project: EAS 1030 MO1 Earth’s Dynamic Environment II
Client:  Dr. Ivan A. Sánchez
Staff guidance: De’sha
Description/plans: Class content includes the interaction of land, water, air, and life; emphasis on humans and the environment; atmosphere, oceans, weather, storms, etc. The Professor likes burnt orange but is open to what the Designers think is best.

 

 

STA Routine Wallpaper

Cleaned up the last iteration because some of the edges looked ‘crunchy’.

10/9 Group Meeting – Passion Projects

This week we gave short presentations about passion projects we do outside of work. I liked hearing everyone talk about their projects and the stage of development they were in. I talked about building my portfolio and how/what work will best represent me as an artist. I received helpful insight from Carrie and Adriana about their experience with websites/portfolio building. Talking about it made me feel more excited to start developing my website, as well as making me feel the expectations of people around me to get started so that I can show my progress.

 

 

 

New Course Graphics!

This week, I was assigned to make some course graphics for the Data Science for Health and Discovery class. It’s pretty simple stuff but it still had to go through some iterations. I got there in the end!

Iterations:

Final banners:

UTFC

Finding images for the UTFC textbook is actually going a lot smoother now! I think once I figured out how to communicate with Yasmina and not stress about finding pictures, it’s been a much better process. I’m currently still in the process of finding approved images, but sooner than later I’ll be able to work on the slides.

Logo Animation Training!

This training was a lot of tedious fun! It was solely tedious because it took me I’d say an hour total just to figure out masking properly and I had to put it on hold for a bit to work on other assignments.

I created an eye logo in Illustrator which was a good amount of trial and error. These were the main images I needed. Pretty simple stuff for illustrator.

I made it an eye logo because I like animating eyes a lot.

Next was exporting it into After Effects. I was not prepared for this.

So After Effects uses vectors differently. I’m not sure how it works, but the amount of paths the design had in illustrator changed in After Effects. I also had to keep in mind that while After Effects kept the same amount of layers in the design, it made every component editable so I had to be REALLY careful that I was editing the right thing.

To animate it blinking, I had to manually animated the vector paths. This wasn’t difficult, but I had to keep in mind that the animation wouldn’t look as clean as I wanted it too. That’s why the closed eye part looks very choppy/raggedy.

 

Masking took a while to figure out mainly because I wasn’t entirely sure where I wanted it to be. I needed one to cover up the pupil when the eye closes, so I had to think about what layer would work best for the mask.

Here’s the final animation! I’m pretty happy with how it looks as this is my first time doing logo animation.

Final Animation