27/10/2021 - 16/11/2021 / Week 10 - week 13
Shofwa Alyadiena / 0350019
LECTURES
Lectures in Task 1
INSTRUCTIONS
Task 3B - Type Design and Communication
A. Visual Research
After choosing to create a sticker for either 'Happy Holidays' or 'Happy Valentine's Day', I found one example for each that brought my ideas to me.
What caught my eye in figure 1.1 was the letters forming a heart without too much distortion. It's simple, and gets the point across effectively. Although it didn't help too much with ideas. Figure 1.2 was what brought the idea for my 'Happy Holidays' sketches, which is the words coming out of a gift box.
B. Exploration
I started off with sketching the first drafts for the idea I had based on the visual research I have conduction previously.
Going off of what ideas I had, I created four designs, two for each greeting. For the first 'Happy Holidays' on the top left, the idea was that sprinkles and party glitters are being spread because of it being the holidays. The second idea for 'Happy Holidays' is in a gift box because of how usually people would say it near Christmas where gifts are what a lot of people look forward to.
Im not sure why I chose to do valentine's greetings as I don't exactly have much ideas, but I thought it was worth a shot. Both the designs for valentine's is based on placing letters in or around hearts. It was an idea that sprouted from thinking the sharp part of a heart shape can be replaced with the letter V, but it didn't turn out as expected.
After receiving feedback I worked on designing an entirely different version by combining the gift box for the valentine's greeting. I looked up more references to use and came across two chocolate boxes that I believed would fit at the time.
This one is square, and has the ribbons on both ends that I plan to add the extra words on for the project.
This one is a heart shaped chocolate box. The animation gif is the first thing I thought about upon seeing this reference.
I then moved to Illustrator to start on creating the sticker with vectors. I made three and kept the Holiday box idea regardless, just to see if it could work. I followed Mr. Vinod's suggestion for the square chocolate box, but I couldn't think of a way that would make it look good.
I liked how the hearts looked so I colored it before anything else using a color palette that I believe could work, so I tried something similar to keep the harmony intact.
Moving on to the next meeting, I was told to fix the text with full capitals and using envelope masks.
I tried different slices of the heart to use for the masking, and decided from the three that straight across is the best option of them all. I continued to check in with all the other fonts for what can work best.
Starting from Adobe Caslon Pro to Univers LT Std, I zoomed out to see what's easier to see and how the spacing works compared to each fonts. My decision is to go with serif fonts; leading up to the final decision of using Bembo Std.
I returned to choosing a similar but different color palette.
After exploring more color combinations, I was tied between the two colors. I decided to just check it out on telegram to judge.
Admittedly the orange-ish version is much better than the green - red. I used a made up white border because I couldn't figure out how the white border could be generated, but luckily I was able to find an answer through a youtube tutorial embedded below (link here).
I quickly applied what I just learned from the video and moved on to making the final PNG of the sticker.
Moving on to creating the animation, I tested out at first how I wanted the general animation to flow. I moved on to photoshop to do that, as After Effects is still a little too complicated for me to improvise using. The main idea is that the GIF first starts with the cover of the chocolate box covering the entire thing, then revealing the greeting.
After getting my progress reviewed I was given the suggestion to go with an earlier version of the envelope distortion, so I tested it again as seen in figure 2.16.
After testing it out, I decided that i should check how Gill Sans Std would fit. When I compared it to the previous version, I still believe the previous is better and fit the theme better.
Luckily I was already in the process of animating it so I could proceed without problem. I first started by preparing
After that was taken care of, I moved opened the file through After Effects and started working on how I imagined the animation to be like. When I finished the entire thing, I realized there was nothing to convert it into a GIF and thus I had to go through different steps. Unfortunately, there was no easy way and with limited connection I was only able to create a low resolution GIF.
C. FINAL DESIGNS
NOTES:
You can use the sticker on Telegram with this link! https://t.me/addstickers/ValentinesDayFinal
(A higher resolution version of this is only available in MOV Format on youtube, embedded below.)
Feedbacks
General Feedback
Hearing from the lecturer's comments on other's works, I gathered some things to keep in mind in doing mine. Most importantly was that we should plan out the sticker with the animation being considered. Other than that, It's also important to explore as much as possible and make as many different versions as we can to find out the best outcome of it all.
Specific Feedback
I was advised to make a different sketch that had the words inside a chocolate box. There wasn't much comments on the first draft, but the second time I've presented my draft, there was several adjustments needed to be made. First off, the typeface should be explored more. Second, I should use all capital letters so it doesn't look too odd. Third, the smaller hearts aren't necessary, and it's a better idea to use envelope mask instead. The next week I was given the feedback that in figure 2.7 the version on the far left is better, and to avoid problems with readability it would be a good idea to attempt different versions with sans-serif fonts.
Reflections
Experience
As usual I felt excited to work on the project once it was given to us, although a bit lost and confused at first. Unfortunately during the making of the animated sticker I felt as if motivation quickly drained from me as I wasn't understanding very well how to do things while thinking about other real life blocks. I did, however, have a lot of fun just making the design on Illustrator and attempting an animation. I couldn't get After Effects to work the way I wanted it to so I had to use frame by frame animation technique.
Observations
Something I realize is that I've been more aware of how animated texts are done in applications like LINE, Discord or Instagram. Most would avoid line art as it's easier to animate individual elements with a lot of just flat colors. A good method people have been using is balance the lack of lines with gradients.
Findings
I'm now also aware how difficult small things could be. Mostly since Adobe applications have been a headache to figure out personally, but the patience to have details be cleaned up as well is admirable. I've learned little by little how to choose the right typeface for a design and have become better at using
Further Readings
Wanting to continue from the previous reading, I read about font styles. There are four types; plain, italic, bold, and bold italic. Plain fonts have been used most frequently as a default for writing applications like Microsoft Word, allowing a bold or italic font be chosen by the user. In recent years, newer programs like InDesign or Illustrator don't support that concept. If there isn't a bold or italic font downloaded, it wouldn't work even if we choose so.
Comments
Post a Comment