Tools Used: Figma was primarily used to create most of the components of the card. Pexels and Iconify were used as reference for some of the icons and background images. Wikimedia was used as a reference for 2d reference images to model Kirby and the props (hat, sword, hammer).
2D Compositing/Layers
A 12 column grid was used to determine element placement and spacing.
To create an organized layout for the card various methods were used to ensure clarity of visual information and legibility of fonts. Initially standard grid layouts and components were examined from existing trading cards to get a sense of element placement and spacing. A 12-column grid was chosen to allow for content to place linearly from top to bottom. The focal point of the card would be the image spaced across 6 columns. Below this would be various 10 column content blocks containing text. The remaining columns were used as a border for the 1st iteration of the card and as negative space for the 2nd and 3rd versions.
Card Layers
This is the layout for the Figma Card. The border is the top layer. Items that are indented are overlaid on top hierarchically.
The reason for breaking down layers into different sections was so that various interactions could be planned out in advance. An example of this would be the “Image/Model” section being split into 2D Image/3D Viewer areas with buttons being placed further down the hierarchy. This organization clarified that buttons would be used to influence aspects of the 2D image or the model in the 3D viewer such as the background, or prop items like the hammer or sword.
Style Guide
The visuals and color choices for the card are based on the color palette of the character Kirby as well as color coding moves or elements to match with their names. A pink background was chosen to match the primary color of the character and a gradient added to add more dimension to the card.
Appropriate icons were used that match the name of Kirby’s moves such as a hammer icon for the “Hammer Flip” move. Each move icon was given a bright, high contrast color so users could easily discern each move type. The icons used to manipulate the picture/model were colored white on a black background to be easy for users to see their purpose.
The sans serif font Oswald was used for most of the text content because it is easy to read on a variety of desktop and mobile devices and flexible at different font sizes. The arial font is used for the copyright section for legibility reasons as well.
2D Assets
Card Components
The vector graphics used for the card icons were made using the Iconify Plugin on Figma, by modifying existing icons, or by creating original icons. The icons referenced were altered by changing color, background, and stroke thickness. The original icons made include the 2D/3D icon. This icon was made because an icon representing switching from a 2D to 3D perspective – in this case the Kirby image to model – was unable to be found. A closed arrow loop was created, and the words 2D/3D were placed within to create this icon.
Backgrounds
The Kirby background was created first as a solid color background closely resembling the color palette of the character. A pink gradient was then added to add contrast and dimension to the card.
The Duck Hunt Dog background was created by blending two images together to create a painted aesthetic similar to classic trading cards.
The border mimics the look of classic cards and adds more definition to the content space. A gradient was used to provide better contrast for the text content.
Images
Reference images for this project included classic Pokémon Cards, perspective images of video game characters, and vectors of character items such as swords and hats. Classic Pokémon cards were used to determine a rough layout as well as the look of containers and icons. Images of game characters and items were used to assist with modeling from different perspective views.
Figure 3 Various Kirby reference images used to create the Kirby model and props such as the sword.
Photography
Photos of the characters Kirby and Duck Hunt Dog were taken in a small photo room for use as a background image as well as for a looped animation. The photo room was set up to allow for the highest quality of indoor pictures to be taken – using two lights and a white background to allow for ample illumination and minimal outside light sources. Photos were taken at a variety of angles for use as reference for modelling.
Animations
The animation was created by taking multiple shots of the Kirby and Duck Hunt Dog characters from different angles. Figurines of the characters were placed on a turntable an rotated at fixed angles. Each time the characters were rotated a picture would be taken. Pictures were taken until the character rotated once on the turntable.
The images were then turned into an animated GIF using Photoshop. Each image was made into a separate frame layer and a frame animation was created in the timeline. The animation was then exported as a GIF and as an mp4
Animated GIF created by combining images taken at different angles on a turntable.
Kirby figurine photographed on a white background with minimal outside light interference.
