Here is the collection of my contribution to the art assets, logo design, and UI mockups for the game, Cook to the Beat, by Raccoopack Studios. Other collaborators on the visuals team are Pinia Chandra, Sylvia Paik, Yasmin Halwani, and Hazel Dang.
The name was originally "Cooking to the Beet" so the logo was highly inspired by merging a beet vegetable with music and cut lines.
Concept sketches of the lootbox was done by me. The final animated and vectorized version was done by Pinia Chandra.
Concepts of indicators to solve the problem of overlapping left and right tap mechanic.
UI/UX design sketches were done by Yasmin Halwani. Then I would digitize a mockup of the layout. Later we changed assets to relate to the theme. Squares turned into cooking trays and circles into frying pans.
Background assets of new kitchen design. I saved time and space by making the cabinets one image change from open to close.
Studio
https://raccoopack.com/
https://raccoopack.com/
Trailer
https://youtu.be/Km2B8zbIJnw
https://youtu.be/Km2B8zbIJnw
Google Play
http://bit.ly/cttb-gplay
http://bit.ly/cttb-gplay
Apple iOS
http://bit.ly/cttb-app
http://bit.ly/cttb-app
The game's landing scene was developed with Premiere Pro but with advanced Photoshop techniques. I have summarized the constraints and what my approach was.
Constraints:
-Match the intro song but keep it under 12 seconds for the landing scene
-Sizable resolution for Androids and iPhones
-Dishes are top-down perspective
-Animation from the trailer was done in Premiere Pro so the editing platform is set to save time when passing files for collaboration
-File size must be under 30MB, UI interface cannot be on top of a video (mp4) must be a gif or unity animation
Approach:
-Plan with animatic to match song length
-Illustrated the composition in photoshop
-Keep animated loops simple and repeatable
-Learned Premiere Pro import/keyframe settings
-Created a fast and efficient process of changing dish perspectives without having to redraw it
-Exported video at 720p and shorter animation time
-Created looping background for start buttons exported as a gif and low 480p/720p for testing
Tools Used: Surface Pro 4 for drawing, Photoshop CC 2017, Premiere Pro 2019