Instead of spending ages in photoshop, Canva or illustrator I built an automation that will allow me to create thousands of iPhone icons to sell online in minutes
Testing & UX
I was writing my book to release on Gumroad and came across a number of users selling Icon packs for Apple phones. Due to Apple’s latest update, you could create shortcuts to apps and customise the icon. So for those that wanted a certain look to their phone they could purchase various themed packs and customise them to their heart’s content.
I wanted to give this a go, I’m not a designer, but wanted to see if I could build a few icons and then sell them. There was a demand, so why not. The problem at first was the creation of so many icons - you have to cover all the default and popular apps - Spotify, WhatsApp, Facebook, Instagram and 100s more. Once I had my list I realised it was going to take ages to create each icon and each icon in a different theme - thousands. And I wanted them live that night
Adobe Photoshop has a great batch processing functionality, but I wanted something easier. I wanted a process where I drop an icon into a folder and within minutes an Icon pack is created. After a bit of research, I created the perfect set-up.
Here’s what I used:
Banner bear - where the image is compiled
FlatIcon - where I get my transparent icons
Zapier - where the whole process is automated
Airtable - where file naming takes place
Dropbox - where I store my files
Now, I wanted to skip as many steps as I could. I wanted this to produce outputs with the least input. - My plan - drop a downloaded icon into a folder, then the system would create a new mobile icon with the downloaded icon and the backgrounds in that folder.
Before starting I listed out what are the most common icons I would need to create - for instance - Calendar, Spotify, Whatsapp, Calculator etc and throw in a couple of extras. All I did here was buy a mobile icon pack from Gumroad or Etsy and see the list of icons created and then add a few more.
Once you have this list you can now go and search for the transparent Icons you want to use. I recommend FlatIcon to do this, once you subscribe it’s unlimited. Download your icons in black and white (you can edit colours if you want) - download them in the size you need. I recommend a larger size that will be automatically sized down in Banner Bear so you don't lose quality.
The first thing to do is build your template in Banner Bear - its very easy if you understand layers, but there are lots of tutorials on how to use it. - In my case, I wanted a pack that matches all the various iPhone colours. Like a monochrome look
So I visited a few sites to get the colour codes. These would then become solid backgrounds.
My icons would be either black or white - we’ll come to them in a minute, so in Banner Bear I created a square - A square with a colour as a background. Then on top of that, I created a holding layer - this is where the downloaded icon would go.
So in short - the solid background would show with a transparent icon above it - All you are doing here is telling Banner Bear - make an image using this background and then whatever I send you - add that on top of the background and create an image.
I then wanted to save time on the file naming, I renamed all the icons where needed to what they represented - so Spotify.png, or calculator.png. Name these images so you know what they are when they come out the other side.
You also need an Airtable database for the naming process. (there's probably a simpler way to do this but I'm a fan of Airtable) - I’ll explain why and how it’s used in the automation below. In that Airtable database have a column for the file name and a column for the file link.
So, here’s where we are at:
We have all the icons we need, all named correctly. They are ready to be dragged into a folder that’s going to turn them into mobile icons all named correctly, plus we have a database that going to be used to help name each mobile icon as it’s processed.
Here are the steps I created on Zapier. (I would share this automation with you to use but it has a paid part to it so I don't have permission)
Step 1 - New file in dropbox : Here you are telling the automation to start when a new file (your downloaded icons) get added to a specific folder on dropbox
Step 2 - Create the image in Banner Bear. At this step you are telling Banner bear to take the file from that folder and add it into the layer you created and create a file
Step 3 - You are now telling Airtable, take the file name from step 1 and the link to the new image Banner Bear created and create an entry in the database
Step 4 - Now you are telling dropbox, go to Airtable and download the file Banner Bear created but also use the file name we added and rename the created image. Then add that new file to a new folder.
That’s it. There’s a bit of trial and error at first, I recommend adding one or two of your downloaded Icons and testing. Once this is good to go, all you do next is drag and drop your downloaded icons - do white and black separately- and then watch the automation get to work. After a brief delay, you will see a bunch of Mobile icons all named correctly.
A final step I didn’t automate was to rename the files again with more descriptions like Black_Spotify_purplebg as I was going to create lots of mobile themes (you can do this in bulk in your folder).
Once I had finished the first phone colour I just went back into Banner Bear and replaced the background layer with a new colour and started again. I think I could have probably created a few more Banner bear templates and complete it all in one go, but this worked for me.
It took me just under two hours to create over 1500 icons. - Once complete I packaged them up, created my sales pages and let it get to work on the likes of Etsy and Gumroad. The Gumroad sales page is here.
I'm not a designer at all, but this was an experiment to show how I could set up an automation to generate digital products in the quickest time.
Feel free to use this - there are many other applications you can use it for, for instance, a hot seller on Etsy is for Instagram highlight buttons. Define a couple of themes, like mummy bloggers, tech accounts, foodies and more and build a pack of them. Then sell. - Good luck!