Google Doodles
Illustration/Animation
.png)
For project three, the task was to create a Google Doodle. Animated logos enrich brand appeal beyond the one-dimensional representation of static logos. The animation must evoke a sense of character, personality, and narrative through the use of animated illustrations. The approach taken in this project was to create a series of illustrations separated by layers and then animate them using Procreate on an iPad Pro. The character, personality, and narrative was achieved with the idea chosen and the illustrative style. Cassini Huygen which was a drone sent to Saturn was chosen as the concep for this project.
The first cover is an illustration of a dragon, which ties into the symbolism of the dragon in ancient Chinese culture.
The second cover is Chinese soldier holding his sword with the text of the book in the background. Can be further expanded by adding symbolism like dragons cranes, tigers.
Some extra research I did to help me progress with this project. The research was largely on ancient Chinese symbolism and how I can relate that to The Art of War. Out of this research, the symbolism of the Crane became the most useful in helping me develop a cover that the meaning behind it and also was visually appealing. I also reviewed the ideas of semiotics and dis-course analysis on this page.
Illustrated in an ancient Chinese looking style continue being connected to the author of the book who was Chinese 2500 years ago. The water color was used because it mimics the style used in ancient Chinese art. The cranes symbolize the passing of life to the afterlife which is one of the aspects of war.
For the final design, I used the symbolism of the crane’s life in the refined concept but now I also how to extend the design to make a back cover and the flaps for the front and back. For the front cover, I refined the watercolor painting. Leading to the back cover I painted a blood moon which symbolizes war and death. Fits nicely with the themes in the book. I also explored three different typefaces to work with the book, two serifs and one sans serif typeface.
I also added the synopsis of the book. Created a barcode for the back cover and added type for the front flap. The front flap contains a quote from Sun Tzu. The measurements for the front and back cover pages are 4.25 x 7 inches and for the !aps, it is 2.5 x 7 inches.
Before starting any code I created wireframes using Adobe XD. These lo-fi wireframes allowed me to visualize a potential layout for the Pokédex. I wanted a simple layout with an emphasis on the Pokémon images and their names in order from the first Pokémon ID to the last.
The PokéAPI offers a wide range of endpoints that a user can gather data from. I used a program called Insomnia to access those endpoints and display the JSON data in a manner that is easier to read.
For example, these are endpoints I accessed to gather data to create the Pokédex.
https://pokeapi.co/api/v2/pokemon/
https://pokeapi.co/api/v2/item/
https://pokeapi.co/api/v2/type/
Working off the book redesign for the Art of War by Sun Tzu I took the time to split the illustrations into individual layers and also create new layers that would be used to add hidden meaning to this augmented reality project. The concept behind the first book cover was to illustrate a different meaning to war. With this augmented reality expansion of the first project I wanted to add a new hidden layer of meaning.
After individually creating new illustrations for the layers my next step was to then start adding everything to the online software, Vectary. Vectary is a 3D modeling software that you can use in your browser. This is where I created the initial 3D model of my book cover.
In Vectary I also created the blood spills. This was the layer of hidden layer that you would only see if you had the QR code for the Augmented reality. To create these models of the blood spills I used the tools:
- Draw Lines
- Hand Draw
These two tools allowed me to draw lines to create unique and organic shapes which aided the process of created the blood drips and spills.
In the last stage of this project I put all the visuals together. After a user scans the QR code he new illustration and the 3D modeled blood pool and drips bring this book to life.
For future reference I will not use Vectary again to create Augmented Reality models. Although Vectary is a strong software I had problems troubleshooting why when viewing the AR using a phone camera the 3D model would be desaturated and some elements would clip through each other.
Cassini Huygen was a sophisticated robotic spacecraft that was sent to study Saturn and its complex system of rings and moons in unprecedented detail. This sketch captures the spacecraft, Saturn and its rings.
Before tackling the animation I planed out a five-step storyboard. This helped me with visualizing how the scene would develop with a narrative in mind. The first storyboard is just a scene of space. In the second Saturn and its rings starts to appear up from the bottom of the screen. In the third Saturn is in place. The fourth storyboard is when the Google Logo is introduced. Lastly, in the fifth storyboard Cassini Huygen flies in and knocks a letter from Google out.
Another exercise that I did to help myself develop the scene was practicing illustrating layouts in different grids, balances, etc. The main three I practiced were, grid, radial, and random.
First I sketched out the background of my scene. To begin the watercolor I started with adding in the base layers with light tones. When I was finished I put an alpha lock on the layer The next step was to add in more details with a different watercolor brush. I then merged the two layers when I was happy with the result. Since watercolor is somewhat transparent I added a layer with a black fill into the background of the combined layers. Lastly, for the background, I drew in my starts. To dot his I used a sketching brush rather than watercolor. I made big stars that would flicker and smaller dots acting as starts in the distance.
With the background done I sketched out Saturn with its rings. I started with the base layer of watercolor and then started working to define the painting with a thinner brush and blending. This was the finished product with Saturn and the background together in one layer.
After finishing the Illustration I started with the animation. The photos these next three pages document my journey of creating my first animation. To being I started with animating Saturn popping up on the scene. This took a total of 10 frames.
.webp)
The drone I drew whacks out the first “o” out of google. The drones appears on a curve to mimic the effect of gravity. Then once it knocks the “o” out of the frame it stays put with the Google logo almost as if the Google logo trapped it within Saturn's gravity.
This is the final GIF put together in low quality to not impact browser performance.
