I'm gonna show you an easy no-nonsense way to design a sleek app screen in a
debut illustrator you can then use this to design the entire app over the in
adobe illustrator but before we kick off today's video another way to increase
revenue into 2020 is to learn a new skill or a new skill set and one of the
best places to do that is skill share with classes on music photography design
freelancing and much much more it's bound to be something there to
trigger your creativity and something that can provide vital skills
heading into 2020 low now you can get Skillshare premium for two months
totally for free later in today's video but let's crack on with the opacity
income list and we first need to set up an industry to document perfect for app
design and this actually might be one of the most important steps in the entire
process so in Illustrator come into the mobile sections here and you're going to
find a wide range of dimensions you need to choose the irrelevant one for your
project so for example an Android app might require the latest Samsung model
for this tutorial let's go for this one here this Apple screen make sure that
you have a 72 PPI resolution and the RGB settings activated for now one our body
is completely fine and so let's generate the app design document if you have the
align to pixel great setting activated you're probably gonna want to turn that
off because it's gonna cause a whole host of issues in this project a
personal preference of mine is to come into the artboard options menu and then
place a centered across hair
now I just like to have a good idea of the center of an app screen at all times
I'm gonna work on a home screen and I want some imagery and a gradient for my
backdrop you can use a flat design of course but if you do want some imagery I
suggest coming to unsplash as they have high-res downloads and the content is
free for you to use on commercial projects so I'm gonna grab myself a tech
related image and then head back to illustrator for the background press M
for the rectangle tool and I personally like to allow my design to bleed over
the edges and this is to make sure the app screen doesn't have any negative
spaces along the edges and again this is just a personal preference so I want to
add a gradient to my background and for that I'm gonna use the freeform a
gradient tool this does allow for a smooth gradient compared to the standard
linear and radial gradients for the grading itself I'm gonna use three nodes
and the top right will be a light source which I think is gonna look really sleek
and neat on the final app screen design
it's now time to drag the image onto my app screen and then coming into the Edit
colors option I can turn this to a grayscale image finally for this image
we head into the transparency window and you can play around with different blend
modes but I personally use multiply and then I'm gonna lower the opacity right
down close to zero and then it's just a case of positioning and scaling the
image onto the app screen I'm gonna select both the background and the image
and then hold down shift and click the image so I'm left just selecting the
background below you could always do this in the layers panel or using
shortcuts now copy the background gradients with command or ctrl C and
then paste a duplication with command or ctrl F this time I will come into the
layers window and drag the duplication above to the top of the stack and then
shift click the blue icons to select these two layers so now with my mouse I
can right click the selection and make a clipping mask let's keep rolling with
this app design tutorial in Illustrator by locking the background layers with
command or control - and then again grabbing the rectangle tool with em on
the keyboard
with illustrator CC you can press a for the direct selection tool and then round
off the live corners like so or if you don't have CC you can come into the
effects and the round corners menu now open up the align menu and if you don't
see in the top menu bar just click the drop down menu here and then make sure
to have the align to our board function chosen and then align this shape
centrally speaking app design is all about consistency and alignment and
asked one of the mainly things to take away from today's video click and drag
the shape whilst holding down the alt/option key and then release it press
command or control D to repeat this process leaving you with three shapes
now I do have some crucial tips relating to a typography on app designs but for
now lower the opacity of the two shapes down to something around 40 to 45
depending on your design and your design taste seeing as this is my homescreen
for the app I need a command to prompt a login and also a password recovery so
I'm going to make some placeholder text for now I'm going to go with the white
and I will use the align to artboard function again to make sure it's central
on the screen the fonts that you want to choose probably should be Universal on
all computers so go for something very very common and also very simple I
personally like Roboto as it's a really nice answer of choice I haven't done it
yet but you want to use the central alignment for the text options in the
text menu
so a quick run-through the text that I've got here for the password recovery
I've used a thinner and a thicker font of Roboto and then again also Roboto for
the main button selections also take note of the kerning and the weight
values in the text box so now grab the pencil with P and make sure you have
strokes only and hold down shift to create a line like so now I'm going to
select the shape line and the text and then align them together but not to the
artboard rather to themselves the text will need to be manually adjusted
however to make sure that I have an exact copy of the button below I'm going
to remove it and then use the alt/option key to duplicate this one down below for
the password section that's putting those circles to hide the password
characters and for this I'm going to bring a guide along to align the text to
the circles using the ellipse tool which is L on my keyboard and holding down
shift I'm gonna make a circle to which I will duplicate with the previous method
shown in today's tutorial
and finally I'm gonna align them so they're perfectly aligned together on a
horizontal plane the last step would be to add in a logo or a graphic that
represents your home screen for your app and then to add a person and a lock icon
which suggests the login and a password tabs you can use this home screen to
make the other app screens as a kind of template and you do that by duplicating
the artboard over to the right but do remember that consistency is king when
it comes to app design I'm making today's video possible is Skillshare
it's the online learning community where millions of creatives come together to
learn new skills and to excel their careers or their hobbies into 20/20 I'm
actually learning how to create 3d and 4d animations through Skillshare and one
of the courses I really am digging right now is one by gastado Torres and even
with my busy schedule I still managed to learn things as most of them are under
60 minutes so it's really easy to integrate Skillshare into your
day-to-day life and you guys will probably see some tutorials around 3 or
4 d animations on this channel when I do perfect I master those skills
it's something I've wants to learn for a long time but I've never really had the
time to do it Skillshare is usually a bit under ten
dollars per month but the first 500 people who sign up using my link down
below will get two months of the premium version totally for free so join the
skill share today and learn some new essential skills for your career or your
hobby heading into 2020 also remember if you
want to keep a boost in your skills as a graphic designer
do subscribe to my channel for weekly graphic design content also click a
video on screen to learn yet more essential skills but until next time
guys design your future today peace