Designing an app icon is not such an easy task! You’ve got to make sure it’s unique and sticks out in the sea of other apps, and is appealing to the eye. The icon needs to represent in some way what your app is about.

I’ve been working on my first iOS app, BB Links (short for Beachbody Links), and this weekend I decided to work on its icon after watching Michael Flarup‘s great video called Designing Better App Icons (which has an awesome 80s vibe!!!).

I’m not that great with Photoshop. I’ve only ever used it for editing video and for making somewhat hacked logos before for my Beachbody business. After watching Michael’s video, I picked up some functions of Photoshop that I didn’t really realize I could use for making logos, such as smart objects using shapes.

The first version, created a month ago

I whipped out Photoshop last night afterwards and started working with shapes to come up with a logo that incorporated the letter b. Here’s the first iteration after deciding that my original logo above which had just the app’s name in text was not good enough.

Redesign, iteration #1

This first version I used shares to create a B (a rectangle and a circle), and then added a shadow behind it. This created a double B in a way, which fit the BB Links app name.

This is the second iteration:

Redesign, iteration #2

I experimented with using some linear shapes with gradients to simulate a block shadow, however, this how meant there was only a single B present. That’s not a bad thing, but my husband said that something was off with the shadow (I’m assuming since I didn’t create a vanishing point…I tried but couldn’t figure out out with Photoshop 🙃). He also said that the ‘b’ should have a circle inside it–I’d tried to go without just to make it different, but agreed that it just looked “off.”

So with a (BUNCH) of more fiddling around, here’s the final app icon I’ve come up with!

Redesign, iteration #3 (final…for now)

I changed up the blues in the background a bit so they’re brighter, added the inside of the ‘b’, doubled up the ‘b’s, added a slight shadow to the ‘b’s to give them a bit of POP and added a line underneath to play tribute to the fact that hyperlinks have underlines often so that plays on the BB Links name. 😁

I used Michael’s awesome iOS App Icon Template (FREE/Donationware) to export all of the sizes required to include in the app’s assets for all of the iOS icon sizes for all of the different iOS devices. It’s great…get it! And support him as well so he keeps it updated and keeps improving it.

For now I’m happy with the way it looks. Much better than I’ve done in the past as most of what I’d made was very flat and didn’t have much depth. I’ll probably play around with it some more after a while to tweak it, but I think this is now close to the final version!

Let me know what you think, and feel free to leave some suggestions for improving it if you want! I’m an amateur and love learning new tips/tricks. 🙂