One of the most highly requested features of all time finally hit Apple devices this year with the release of iOS 14. After many many years of asking, Apple fans finally have the chance to customize their home screens a little more as it is now possible to design or use custom icons for apps and place widgets on your home screen for the first time ever on an Apple device.
This is all achieved through Shortcuts(?) which is Apple’s way to allow you to add a simple task to your home screen which is triggered by a custom icon. One of those tasks that you can create is simply the ability to launch an app. So while this will not be an actual replacement for the official app icons, it is a very handy way to create a secondary shortcut link on your home screen which can launch any app and you can use whatever graphic or image you want for these shortcuts.
We’ve already seen some beautiful custom iOS 14 Icon Packs hitting the marketplace and people have been quick to show off their own custom home screens online, but this space is still very new so if you’re looking for something a little more unique, or niche you might be better off just creating something new from scratch.
With that in mind, today we’re going to explore a very easy method of designing your own custom iOS 14 Icons by creating a simple template and workflow that will allow us to use existing icon packs to quickly produce unique app icons that match with the style of any wallpaper you wish to pair it with.
Getting Started
For this method we are going to start out by choosing a wallpaper that we like, and then using this as a base for our ´theme.’ Then we will be building out different icons that match the same look, feel and color scheme of the wallpaper – this way you can follow similar steps and the method remains flexible enough that you can modify the colors to fit with any wallpaper of your choice.
01. Choosing Your Wallpaper
Your wallpaper plays such a huge part in defining the look of your home screen, regardless of which icons you choose (or make) the majority of your screen is dominated by your wallpaper, so it’s important you choose one you like, and for the purpose of our tutorial, this wallpaper will also set the tone for all of the icons we design to follow.
If you don’t have an existing wallpaper in mind that you want to work with, you could discover some beautiful photos, patterns, or textures here on Creative Market which could all be used as your wallpaper or take a look at the handpicked collection of abstract graphics and backgrounds that I’ve put together myself.
In my upcoming example, I used this photo which I found as my wallpaper background.
02. Extracting Wallpaper Colors
Now that you’ve decided on your wallpaper, open it up in Photoshop (or any graphics software you are comfortable with) and create a number of squares above your wallpaper. We are going to use the eyedropper tool to fill each of these boxes with a sample color from your chosen background, in essence, you are building up a color scheme using areas of color from your wallpaper.
Once you have your base colors, create some variations on these colors, just to give yourself some options as you move forward with the icon design. Try making some alternatives featuring different shades of the same colors and then try creating some more vibrant versions of the same colors.
After doing this, I ended up with these different rows of color blocks which will make up my color scheme. You can repeat this same step with any new wallpaper you want to use to capture the colors.
03. Create Your Icon Document
Your App Shortcut icon will display at 180 x 180 pixels on the device, but when you begin designing your document you should aim to use 1024 x 1024 pixels for your document dimensions. This allows your icon to retain better detail when displayed on the iPhone’s retina display.
Creating Custom Shortcut Icons
The workflow that we are following relies on us using existing icon shapes to save ourselves a bunch of time. We won’t be creating any iconography from scratch, but we will be taking some icon outlines and applying our own layer styles and colors to them, giving a more unique finish that fits with our wallpaper.
01. Finding Your Base Icons
So to get started we need to find ourselves a good reliable pack of icons to use as our base. You can explore thousands of Icons on Creative Market.
I would suggest looking for a pack of icons that contains a lot of different individual icons in some kind of vector format .EPS / .SVG / .AI are the most common vector formats to look for, and essentially having files as vectors will allow you to re-size the icons to any size without losing any quality. One quick way to explain it is that vector files are not pixels or graphics, but rather they are maths or points that tell the computer what to draw, so when you re-size the vector shape, the computer re-draws the graphics again at the right size at the best quality.
The more icons included in the pack the more options you will have when it comes to creating unique app shortcuts. The product I settled on for my project was Mini Line Minimal Pix Perfect Icons by Howcolour which includes over 2755 icons, giving us a huge variety of icons to pick from.
02. Open or Import Icon Shapes
We need to get our vector icons into Photoshop as shapes. To do this find the .SVG file for the icon you want to use (or similar file format that you are using) and first open it up in Adobe Illustrator.
Once opened, you need to use the Selection Tool, or Direct Selection tool to select the entire shape of the icon, then hit File > Copy, or use CTRL + C to copy, then move over to Photoshop, head to your 1024 x 1024 template document and hit File > Paste, or CTRL + V. Now, importantly you should be prompted at this stage to decide how your icon is pasted into Photoshop, and you need to choose “Shape.†This will keep the maths and the points of your base shape in place, allowing you to re-size it over and over without losing any quality.
03. Resize Your Icon Shape
Now that your vector shape is correctly placed into Photoshop you need to re-size your shape to fit the 1024 x 1024 dimensions. For me, this meant scaling up my icon 300% but you will need to adjust your size as needed, being sure to leave some ´negative space’ or padding around the edges of your document to that your icon sits nicely against your app background.
04. Add Color To Your Background
Before we dive into styling the icon itself, let’s use the color scheme we extracted earlier to add a gradient fill to the background. Duplicate your background layer and head into the blending options menu by selecting the layer in your layers panel, then right-clicking the layer and selecting “Blending Options†from the list of available actions.
Now under Styles select “Gradient Overlay†and start to add new points to your Gradient slider, being sure to sample colors from your color scheme blocks that you created earlier. Once you have your colors loaded into your gradient just re-order them so that they move from light to dark (or feel free to experiment with something else.) At this point, you should have a gradient that looks something like this.
05. Layer Styles
Let’s add some color and dimension to your icon shape so that it stands out from a background a little more and we get more of a very gentle 3D feel. There’s no exact formula to follow here, you are going to need to experiment with your layer styles to create a look that you want, but here are the basic settings that I applied: Bevel and Emboss, Inner Shadow, Gradient Overlay & Drop Shadow. The values of each of these styles will depend entirely on how you want your icon to look, but for reference here’s the settings I had for each:
The important thing here is to alter and experiment with different blend modes and opacity levels. Moving away from using “Normal†as your blend mode will give you a lot more variety in the final look of your shadows or overlays, and many styles in Photoshop can feel quite harsh, so it’s always a good idea to soften effects by lowering the opacity and editing any values that might help to give a softer look.
Once you have the core style in place you’re all set. This is going to be your main look which you can use to copy and paste on to new shapes and vectors to create new shortcut icons as needed. You just rinse and repeat all steps up until this point with new shapes and you have yourself a new shortcut app icon. After this, you will now have a coherent set of icons that borrow colors from your wallpaper to create a reusable template that you can use to create many icons in the same style over and over.
If you want to level it up and you feel confident then you can add some small finishing touches to each individual icon too, just some small textures, shadows, or highlights in the right places can make a huge difference, but this is an optional step.
06. Create Variety
Simply repeating these same steps but instead using different color selections for your background gradients will give your icons some variety. Or instead of using the dark color selections on the background you could invert it and set your background to use the lighter shades from your palette and now use the darker gradients on the icon shape layer instead.
You can continue to create variety by pulling certain colors to act as more dominant base colors on your background and turning down the opacity of the gradient. For example, you could set your background color to purple, and tone down the gradient overlay so that more of the purple color shows through on your background. This gives you more variety while still following the same theme and still using the same colors.
Just the simple act of selecting different color combinations, which are all based on our original wallpaper colors can give you a lot of room to create different color combinations if you don’t want your icons to all feature the exact same color setup.
I followed these steps and created some variations myself and after a short time I ended up with 8 different icons that fit well together, match our background nicely and each icon now acts as a template which I can use to make more and more icons and more variations with the same style.
So there we have it, a very simple method that didn’t require us to design any iconography from scratch, but we still ended up with a coherent set of custom iOS14 Icons, using some color samples and some existing icon resources.
Loading Custom Icons on to Your iPhone
Finally, once you’ve designed your icons and got them all saved you will need to get those images loaded onto your phone and follow some very simple steps to make them work as Shortcut Icons. As the focus of this article was all about the design and method itself I would like to point you towards this very handy YouTube video which will explain in fantastic detail how to load these on to your own iPhone.
Loading Custom Icons in iOS14
Download this printable PDF poster and hang these 10 design principles on your favorite wall.
Get the file
Try some of my FREE goods: https://liammckay.lemonsqueezy.com - Designer with a love for beautiful Icons, Textures, Brushes and WordPress Themes.
View More Posts
2 Comments