hey guys welcome back to our channel and the number one place for people who love design
art and everything creative my name is laszlo i do graphic design & illustration here at d+b
and today's video is all about app icon design as all of you iphone users are probably know by
now the latest ios 14 update lets you customize your iphone's aesthetic you probably have seen
all these screenshots of people's customized iphone layouts online ios 14 has enabled us to
customize our home screen to an extent that has never been allowed before on apple devices and
for us designers this is pretty exciting news so when i first heard about this thing i thought this
is going to be huge and we creatives should all jump on it while the topic is still hot so i have
set myself this little side project of building the ultimate christmas ios 14 home screen layout
i have designed 40 unique handcrafted well adobe illustrator crafted icons of the most
popular apps of 2020. this has been my little secret side project since early october and i
am ecstatic that i have managed to finish it just before we get into december but enough about me
i don't want this video to be a 10 minute long advert of me trying to find different ways of
asking you to buy my icon set so i thought i would show you how i made one of them so you can go and
make your own sets i did a little youtube search and it looks like no one has made a messenger app
icon design tutorial in illustrator for this new facebook logo yet so i want to fill in this gap
the first half of this video is going to be me showing you how you can redesign this icon
in illustrator step by step from scratch and once we are done with that i'll show
you how i modified design to make it look a bit more christmassy interested let's jump in
so let's open up illustrator and start a new document since we are designing scalable wactos
it doesn't really matter what size canvas you open i tend to start with a landscape a3 make sure it's
rgb colored okay that's good now let's open up our search engine of choice and look for some
reference images essentially we are looking for an image that will most likely be a pixel-based jpeg
of our app icon and we're gonna use that as a guide to build our scalable vector graphic
i have brought in some app icons because i need to make sure my curved rectangles in the background
will look exactly like these then i copy and paste in the actual facebook messenger logos
this one is the most important for us even so this is the old blue logo it's got all the right
ratios of the logo within the rounded square so i will use this as a centerpiece of my tracing
now let's start with recreating the white background i'm gonna take the opacity of my
reference image down a little then i wanna lock this object you can go object lock
or just hit ctrl and 2 or comment 2 to lock your selected objects
now go to your rectangle tool and holding down the alt key draw at a perfect square
when i trace stuff like this i find it's a good idea to take the opacity of your design down
and use a wheat color that will show through your tracing so you can see what you're doing
keep holding down the alt key as you modify your square so it stays in shape once that's done we
need to bring in the corners by grabbing one of these little white dots literally just bring them
in and match it with the curve like so take your time with this make sure it's as close as possible
to your reference okay now we have our background so we can change its color to white and bring
the opacity back to 100 now let's move on to the speech bubble now since it's a relatively simple
shape i think we don't need to manually recreate it by playing around with circles and the pen tool
it's enough to unlock this jpeg then go and trace image just like that
now i want to separate the bubble from this little lighting bolt so i duplicate it and separate them
using the shape builder too select all your work then drag the two elements together with the shape
builder to make the bubble and on another version you hold down the arc key then drag your cursor
from the outside of the shape to subtract the bubble from the lighting just like that
a little insight here for you 99 of the time every element is perfectly centered in these app icons
so if you select all three parts then click on one of the object as a reference point you can
align the other two objects to it so you just go align then center vertically and then center
horizontally as well now we basically recreated the old mustang gel logo so all we need to do is
set up this new color gradient as far as i can tell it's a free color gradient you see it is blue
purple and there's a little bit of bright neon orange there as well so what you want to do is
first of all select these colors from the jpeg and drag and drop them onto your swatches panel
you literally take the color from here on the bottom left and you drag and drop it into your
colors now obviously since it's a gradient there are like millions of different shades within this
graphic so what you want to do is try to look for the sharpest of these three shades to pick out
for your swatches now if you worked with gradients in illustrator before you know it can only be
applied in two ways you can either set up a linear gradient and then put this onto a slight angle
which looks almost like the real deal but not quite as we are missing this nice little curve
so to make a perfect version of this let me share my little magic trick with you
what we need is a radial gradient that sort of goes through the speech bubble in a slightly
offset way coming from the bottom right so to do that you need to draw out a big circle shape
set it up with your three gradient colors in the gradient panel and set it as a radial gradient
then what you want to do is copy a speech bubble shape on top of this here you can see
i put a temporarily yellow stroke on it just so i can see what i'm doing now try to match
the speech bubbles position so the gradient goes through it the way it does on your reference jpeg
once you think you are on the right spot i want you to put your speech bubble stroke to
none then select these two elements the bubble as well as this new big circle
now with both of them selected you go object clipping mask make da da pretty cool right
we basically messed up the unnecessary parts of the big circle using the speech bubble shape
as its little guide now if you double click on this you can still move things
around within the design if you think you didn't get it quite right the first time
with the big circle selected you can also go back to your gradient settings and change the colors
if you want to like here i made my neon orange a little bit sharper but that's basically it
now if you center this onto your rounded rectangle and get the little white lighting
board on top as well we have recreated the new facebook messenger logo happy days
okay time to turn this into a christmas themed icon i thought since it's a circular bubble
what we could do is make the logo look like one of those very christmasy lollipops so i
pulled in a reference image it's pretty simple to do all i want is to create these white lines
on top so i draw out a line with the line tool let's say two points wide zoom in a little bit
then i want to use the width tool so with these two selected i click on one of my end points on
the line and drag it slightly to the side to get this narrow triangular shaped line just like that
then i want to copy this line flip it over and put it at the end point of the first line so
it looks like one continuous line that starts at white and arrows in the middle then gets big again
hit ctrl or command g to group them then i want to copy this hit ctrl c then ctrl
shift v to paste your copy at the exact same place of the original one with this new copy
selected i want you to put this horizontally into place by dragging it to the side if you
hold down shift while dragging it's going to put it into the perfect horizontal angle by the way
yeah now group this and copy and paste it in place again then same as earlier you put this
to the side while you hold down shift and let it go somewhere in between these lines
so we basically have this little star shape at this point i thought it would be a good idea
to put this over our speech bubbles so we can see in real time how will this look in the end
now select your line shapes and go effect warp this brings up this window where you
can twist your shape and see how it will look if you got preview ticked once you are happy
with your swords hit okay then let's bump up the line wait a little or a lot actually
34 points look about right for me now since our app icon bracket in ios is actually white we are
essentially done here but we are professionals right so we want to make a pixel perfect design
so to cut these lines in the right place let's bring in another speech bubble shape on top
then put its fill and stroke to none then let's mask off these lines with the shape so select
your newly designed swirly line work and this invisible speech bubble on top then again you
go object clipping mask make boom pixel perfection right there again nothing is finalized here so if
you want to go back and change the amount of the angle of your swirls go for it otherwise
it's all done all that's left to do is save this out the right way first of all let's scale this
up to i would say at least a thousand pixels on each side way and make sure that you have
the scale corners option ticked otherwise this upscaling will change your rounded rectangle
then you put this onto asset export and save it out as a png file now unfortunately when you make
a png out of a graphic with masked elements it will save with all these messed up shapes in place
even if they are transparent here you can see we have all this empty space for the big radial
gradient circuit so what you have to do is just cut it in shape manually i don't believe there is
a way to save pngs out with these transparent elements subtracted but i might be wrong here
if you know of a better way to do that help us out and leave it in the comments please
other than that we are done here
so that's basically how you do it by the time this video gets in front of you i imagine you would
have seen a bunch of different ios 14 icon sets some of them are quite great some of them are of
weaker quality i think the trick is to make a good one you have to develop an
understanding of how the original icon has been built up and why does it work so well
for its respective brands that is trying to represent and for that this sort of
master copying recreating it's a great exercise again if you cannot be asked to do any of this you
can buy my icon set if you want from our website i'll leave a link down below somewhere there if
you enjoyed this video please give it a thumbs up because that really does help out our channel and
we do appreciate it a great deal and feel free to join our little design tribe if you're interested
in this sort of content we make videos about illustration graphic design interiors architecture
all of that good stuff take care guys and i'll see you this time next week with another video bye