WANNA SAY HI?

Frankentoon Team © 2019 All Rights Reserved. San Salvador, El Salvador.

Creating a Retro Icon in Affinity Designer

Updated: Nov 11, 2019


If you (like me) were born in the eighties and grew up in the nineties... my gosh, you're old!


When video games were still a 'fad', this little toy called the GameBoy came out back in '89. If you had the chance to put your hands on that bulky piece of yellowish plastic and beautiful puke-green graphics; mostly sure, you're now tripping into your inner kid's brain and having a shitload of memories coming one after another. Maybe in the back of your dad's car during long trips to grandma's home; maybe at the bus, the last day of school, knowing you had the entire summer to do nothing more than playing video games (and take out the trash, of course)...


Whatever the case, today we gonna pay some homage to that little machine that gave us (and still is for some of us) many hours of joy and happiness, making it into a modern app icon using Affinity Designer's tools. If you're with me scream: RADICAL, DUDE!


Let's get started.


Step Uno, Main Body:

Create a new 1200x1200 px, RGB Affinity Document.

Create a new 765x765 px square, using the Rectangle Tool, then using the Corner Tool, round the upper-left, upper-right and bottom-left corners (about 35 px each). While keeping the Corner Tool selected, let's switch its corner type to 'Straight', from the top Context Toolbar. Transform the bottom-right corner using this mode, about 185px.

Then, let's add a Linear Gradient, using the Gradient tool. Copy the RGB values shown above, using the RGB Sliders in the Color Panel.

Duplicate this shape, change its color to a flat grey as shown above. Now, using again the Corner Tool with the regular Rounded Corner Type, round the bottom-right corner about 185px.

Line both shapes up, leaving the darker one at the bottom.

Select the top rounded square and add an Inner Shadow effect from the FX Panel. Use the settings of the image above.

This way, both shapes would look more like a single tridimensional piece with a nice bevel at the bottom-right corner.

To emphasize the 3D effect, duplicate the bottom shape and move it vertically a couple of pixels. Now the main piece of our Gameboy icon is done.


Step Dos, Screen:

Again, select the Rectangle Tool, create a new rectangle about half the size of the top one. With the Corner Tool, round its corners as shown in the image above. Color it with these RGB values: 89, 88, 106.


Duplicate this rectangle and change its color to a lighter value: 106, 111, 127.

Let's create a reflection effect, by drawing a rectangle similar to the one above; you can use the Pen Tool for this task.

Select both; the shape you've just drawn and the lighter duplicated rectangle. Then, use the Subtract function from the Context Toolbar above, to cut the bottom part of this rectangle.

Move it vertically a couple of pixels to add some depth to it.

Add another rectangle, color it green, using these values: R:153, G:70, B:80. Then repeat the process we've just made a couple of minutes ago to create the screen reflection.


Duplicate the screen, change its color to a lighter shade of green: R:184, G:183, B:78. Use the Convert to Curves function from the top Context Toolbar to be able to manipulate its nodes. Select the Node Tool and move its bottom corners upwards as shown above.


Don't forget to move this shape vertically a couple of pixels to the bottom, to add some depth to the screen.

Add a thin rectangle, with the same width as the screen, to create a sharp bevel effect. Use a light grey on this one.


Step Tres, Buttons:

Create a pill-like shape using the Rectangle and Corner tools. With the Gradient Tool, create a linear gradient using the colors above.


Then, add a circle using the Ellipse Tool and color it using a linear gradient as well. Pick the colors from the image above.

Now, select the round button and add an Outer Shadow Layer Effect. Copy the settings above.

Keep the Layer Effects Panel open and add a Bevel / Emboss effect to the button.

Copy the values above for the Highlight color.

Copy the values above for the Shadows color.

You should have something similar to the image above. Duplicate this button.

Group the pill shape and both buttons, then rotate this group -45°, using the Transform Panel.

To create the D-Pad, merge two rounded rectangles together, using the Add function from the top Context Toolbar. Add a linear gradient to this either, using the RGB values shown above.

Let's add a drop shadow using an Outer Shadow Layer Effect.

Then, add a Bevel / Emboss Layer Effect to give it a nice plastic finish.

You should end up with something similar to the image above.

As a final detail, add small circle on top of the D-Pad, using a linear gradient with the same values, but reversed.

Now let's create some air vents using three rounded rectangles, again fill them with vertical linear gradients. Next, copy these rectangles and fill them with a plain light grey color (RGB values above) and, move them down a couple of pixels to add a subtle bevel effect.

To make the 'Select' and 'Start' buttons, create two pill shapes again. Look at the image above for reference. The bigger one, will have the same values we used for the previous rounded rectangle we made for the purple buttons. In fact, you can just duplicate that shape and use it here.


Step Cuatro. Putting All Together:

Take all spare parts we've made so far and place them over your Gameboy's main body. Looking nice, right?


Extra Details:

For the sake of presentation, I've added a background, a drop shadow and some tiny details to make my icon design more realistic. Here you can use your imagination and as many details as you wish, you can experiment even further and change your Gameboy's colors, background design, etc... Just have fun!


We hope you've enjoyed this little tutorial. Please, let us know that in the comments. Also, tell us if you'd like to see more of these tridimensional icon tutorials in the future.

2,955 views4 comments