|
After Watching Video , Get Amazing
Photoshop tricks
" Be professional within hours " |
hello everyone in the last part of the , video we discussed the different tools , available internship and how to use , them now , we're going to use those tools to make a , mock ISO that our understanding of , them is better the UI which we will be , making will be of a taxi service we will , be taking design hints from umber and , trying to replicate it so that it's , easier for us to understand and follow , the first thing which we need to do is , make a canvas which resembles a mobile , screen now the usual size of a mobile , screen is W by and we will let , the resolution be W pixels per inch so , as you can see over here we have a , canvas which resembles a mobile screen , we will be making our UI for anise , device so the first thing we need is a , status bar on top so Will just I have , my status bar over here I will just copy , it and paste it into my project we can , resize it by pressing command T on the , Mac and ctr T on Windows so I will just , resize it so that it fits the top of my , screen there so now we have emulated an , ISO screen now if you remember the umber , app it has the following component sit , has a street map view it has taxis on , the on the streets , it has driver information at the bottom , as a card where it shows the profile , picture of the driver his name and his , contact information and you have text , box in the middle which says where to , and beside it is an icon , which allows you to book cabs for later , before we move on to using the Photo shop , tools we need to collect all the , graphics and the images required to make , the application we will start off with , the map so I'll just copy this map into , my project , again I will use ctr T or command to , resize the map now one interesting thing , which we will see over here as I am , increasing the size of the map any , portion of the map which is outside the , canvas is not visible to us so we can , use this to just increase the size till , it fits the mobile screen and we should , remember to hold shift so that the , dimensions of the image don'Tet , distorted here we have the general , skeleton of our application , now the next graphics which we have to , collect is the symbol to identity , indicate that you can book cabs later , depends which will identify where the , cabs are or outline for the driver , profile picture so let'SOS one place , which is very good for to collect all , these icon sis flight icon so it has a , huge database of avatars of symbols and , icons which you can use for your , mock-ups the first thing which I will , search for is a clock which will , identify my feature for booking cabs , later , once Click on it the options will open , UPI will goon PNG and then I can , download the pixels version and it's , a free download the next thing I nee dis , the pins which will identify where my , cabs are so we'll be using blue color , pins to identify with the cabs again the , same restrung in W and we will , using the red pin to identify where the , rider is the last thing we need is a , skeleton which will identify the driver , profile picture , so we can use this one for our mock up , now that we have collected all the , graphics and images which we would need , let's go ahead and build our application , the first thing we will build is the , text box which is ad in the middle of , the screen which says where to I'll be , using the rectangle shape to make it now , here we have rectangle let's just , Center it and if we want to change the , size of it again we can press command , and resize the rectangle now to give , this UI a better appearance what we , would do is add depth tithe text box , how we would do this is we select the , layer in which the rectangle is we go to , the layer option go to layer style and , then blending options all these are , options which were which will modify the , layer in some way or another for now we , need to add depth tithe text box so we , will be using drop shadow so as you , can see over here the moment I added it , there is a shadow behind the box which , give sit an appearance of having some , depth can change the distance over , here which would work for us seems to , be the best , now once we have a text box we need to , add some text Inuit so here I'vie added , the text to where to which is similar to , what Otis in umber we will just make , sure the text is in the center of this , text box and using the different text , properties we can change the font so for , simplicity we'll use Rilke regular , and we can change the color so let's , give this a lighter shade so now we have , a text box ready the one graphic which , we collected was an icon to allow users , to book cabs for later on so let us go , tithe time icon paste it in to our , applique a project and let's resize it , so it fix fits inside the text box , here we have completed the text box , which has where to whether user can , enter his destination and we have a , symbol which indicates that a user can , book cabs for later on the next thing , which we need to do is use the pin to , identify where the user is currently so , I'll go tithe pin icon which I , collected paste it here now I can resize , it and place it on my map so this , indicates where the user is currently , the next thing which we would nee dis , the pins to tell the user where the cabs , are and for this we selected the blue , pin so I will just paste this over here , again will resize it and start placing , these pins on the map now one thing , which which we can do is since we need a , lot of these pins on the map we can just , copy the layers now how you copy the , layers is using command J on the Mac and , ctr J on windows so I will just make a , copy of this layer so as you can see , here we have layer 5 copy and it is on , top of our current layer so I'll just , use these mouse and move it out and , place it somewhere Elsie'll do this , once more place it somewhere else on the , map now we have three cabs on the map , the next thing which we would need now , is a card below which would tell us the , driver information now how we can make , this is using the rounded rectangle tool , again I will use the same trick where I , will make the card in such a way that , some of it is outside the canvas and , some of it is in the canvas so it looks , like the user can swipe up and access , the full card sou will just resize it , now so it fits my screen and I'll make , sure that it's in the center now again , to add some depth to this we will follow , the same procedure where we will select , the layer we will go on the layer , option slayer style blending option sand , add a drop shadow will all add a , distance of and there we have our , card now to increase the roundness of , the edges we have options over here so , as you can see each edge right now is , rounded by pixels so I can just , increase this to and as you can see , the edges became more rounded , now over her ewe be from flat icon , we got the user picture so let it just , copy this into Photo shop we can resize , this and move it Tao card now to make , it add more distinction to it let's just , add circle around the picture I will , use the ellipse tool hold shift down , because I need perfect circle and just , draw it around them , right now our circle USN'transparent , so how we can make it transparent is go , to fill and choose this option it will , make it transparent no wand we need a , border to the circle so how we can do , that is using this option and just , change Otto one as you can see this has , a thicker border NOW'll just make sure , my circle is perfectly around the image , and there we have the driver picture now , the last two things which we need to add , is the driver name and his contact , information we will go back to our text , tool add a text box right over here , which will say driver name so we would , want this to be Little more bold so I , will change the color to black and I , will change the font so it looks a , little more crisp , and we can also reduce the vertical , distance between the each letter for , that just make it W I need to reduce , the font size as it is covering too much , space now there we have the driver name , so now the last thing which we would , need is the driver contact information , so we will just add at ext box below the , driver name and Putin a random phone , number just to make the distinction , between the driver name and the phone , number we'll give this a lighter font , color and we'll make sure it's right , below the driver name there we have a , quick UI prototype for any app which you , want to make you can obviously be more , creative with it use lot more graphics a , lot more images and explore around the , different options we ha vein Photocopy , hope this was informative and we learned , a little better how to use the tools , thank you .
