UI Design in Photoshop - Get Started with UI Design Career

1. What this course is all about?: Hello and welcome to my course about Photoshop and UI design. From the past eight years, I have been working as a UI designer and I faced a lot of problems. Then I thought that I should create something that can bring beginners and newbies into this UI design career. So I created this course about UI design in Photoshop. It will teach you from the basics to all extensions, tricks, tips, shortcuts, and all the tools UI designers use in their daily routine. Let's see what's inside this course. We will begin our course by setting up Photoshop preferences for better performance and speed. Specifically, we will set up Photoshop for UI design. Then we will master the grades and guides and how to layout them instantly with the use of few extensions and plug-ins. Then you will master Photoshop layer styles like Drop Shadows, Stroke Affects, inset and pressed effect. So we're going to cover all these layer styles deeply so you understand how to create the light and Shadow Effects and all this stuff. Then there is an awesome student requests section on dashboard design elements. We are going to design all these awesome looking line graphs, dark graphs, bar graphs. We are also going to craft a really awesome looking header designs or hero header areas. These really matters when you are designing your website. This is the first impression on any website visitor. You are also going to learn about iOS app design. We're going to design a screen of iOS 6 app. We are also going to create this login pop-up form, so you know how to design the input fields and everything. Then we have a great section on wireframes, how to create wireframes, what are the tools required for creating wireframes? I'm going to give you the ultimate challenge to design a website based on this wireframe. Now I'm going to show you in an instant what my students have created and designed so far, so you know what is the progress this course is making. Here is the work of my student, Betty. She designed this Shopify theme and it is really looking great. So she created this after watching my course. You can see over here, very nice theme, very elegant, very classy. Then we have this one. This is based on the mockup I gave my students. This is designed by my student Antonella Spagnoli. You can see over here different sections, our services. This is one other work of my students. Then you can see over here, this is another one by Saqib Ameen, my student. You can see how he laid out everything really nice. It is based on the last wireframe I gave them for the challenge. You can see over here, here are the few headers created by my students. You can see over here in a way it's time to collaborate and make ideas. Then this one from Darryl Haynesworth. Then here are few iOS app screens. The ideas I got from my students, this is one of the student's work, Darryl Haynesworth. Then this is from Neil. This is also another exercise he did. So these are all the great things my students are doing. If you want to join as a student, you are more than welcome. This course is equally good for beginners as well as experts. Even if you are designing from past eight years or six years, you will really like the tips and tricks I have shared in this course. You will love the extensions and popular scripts I have shared in this course. So don't miss out this course. Do check out it's curriculum and let's see you in that course. 2. Lets setup Photoshop CC2017 Preferences for UI Design: First, we need to set up our Photoshop Preferences for better performance and liability and good work flow. We are going to set up Photoshop Preferences by going to this Edit menu and then going to Preferences and General. You can also use the shortcut key Control K or Command K. Now, the first thing you will be seeing is this one. We don't have much to skip over here or setup over here. If you want, you can click this one or uncheck this one: Show "Start" Workspace When No Documents Are Open or Shows "Recent Files". This is what it is going to show this one. Whenever you start up your Photoshop, you will see something like this. This is basically recent files over here. Now, moving to the interface. Interface, we are going to select that color theme, whatever you like, if you like this one, this one more darker, it's up to you. Now, the main thing we are going to setup over here is that this full screen and for artboards, we don't need any line or drop shadow. So I just set it to none, both of these. Then in this UI font size, we need the large font size over here. Don't mess with other things over here. Everything else is just default and leave it like that. In this workspace panel, we are going to set few things like open documents as tabs. I have seen in latest versions of Photoshop like 2017 or 2015, that this one is unchecked. When you install Photoshop, you will see your tabs open in different windows. Make sure you check this one in Large Tabs. These two options are checked. Now in this Tools Panel, we don't have much to select. If you want to uncheck, you should uncheck this animated zoom. It is just going to put some pressure on your graphic card. Skip this HistoryLog. We don't need it. File handling. Now, in the File Handling, we need to make sure that our files are being saved in the background and it is set to save after every five minutes. So set it to five minutes. Then in this maximize PSD and PSB file compatibility, choose "Always". In the recent files, make sure that it is not more than 10 files or five files, because if you increase this number, it will put more RAM usage and it will slow down your Photoshop. Now in this Export settings, export is basically when you need to quickly export your PNG files or your graphics, set it to PNG and make sure that transparency is set over here. I don't normally recommend convert to sRGB, so leave it. Now in this performance, you need to set your RAM usage to almost 70 percent. I have almost 16 GBs of RAM, so I have set like 9-10 GB to this Photoshop. Then from this history and cache, they have recently added this web and UI design. You need to select this one, leave this as it is, and from this area, Graphic Processor Settings, you need to use this Use Graphic Processor. I really recommend that in the latest versions of Photoshop, you should have some good graphic card installed like NVIDIA GeForce, I have this one NVIDIA GeForce GT 710, and it has two GB of RAM. So you need to check this one. It will improve your photoshops performance a lot. Now moving to this Scratch Disks, so this is basically where photoshops saves its temporary files. Make sure it is not one of your system drives. Select any other drive and then uncheck your system drive like my system is on C drive, so I am going to select E or G or H, or anyone else. Now coming to this Units area, here, we need to set that our rulers are in pixels because we will be designing everything in pixels. Type should be pixels or points, both of them are good enough. Now, in the grids and guide setup, first thing is that your guides and grids should be colored separately like Canvas guides are in cyan color, artboards are light blue. Inactive artboard is also light blue and smart guides are basically green color. Also your slices are magenta color. Now coming towards the grid, your grid must always be in even numbers, and it should be divisible by even numbers. So I have set it to 64 pixels and four subdivisions. It is basically, this is my big box of a grid and it will be divided into four smaller boxes. This is how I have set up my grid. You can set it to 32 pixels or 16 pixels, whatever you like. Now here is our extensions and plug-ins sections. Make sure you have enabled this Enable Generator, Enable Remote Connection. Choose a service name or set your password over here, and leave this one like that and use some password over here. Now, you must have checked this load extension panels and allow extensions to connect to the Internet. Sometimes, a lot of students, they ask me that my extensions are not loading and they are not showing up. You need to uncheck and check this one or two times and restart your Photoshop. I think this will work. So make sure enable generator and these two options are checked. Now, in the Type section of the preferences, we are going to look for these two settings. One is that number of present fonts to display. Make sure they are five or seven. I have just increase the number to seven because I don't want to search the fonts again and again, which I have recently used. Then this Show Font Names English, make sure this one is checked. Enable Type Layer glyph alternates, make sure this one is check. Basically, you need to check all these. These are all the settings and preferences for Photoshop latest version CC 2017, and I think these will work for older versions too, and there is not much difference, but I think they have added a few more things in latest versions. So let's move on to the next lesson. 3. Setting Up Custom Keyboard Shortcuts in Photoshop: Today, we are going to set up Photoshop custom shortcuts. Now, what custom shortcuts do is that, as as UI designer who use certain workflows and certain elements or tools of Photoshop time to time, and we don't need others. What we're going to do is we're going to set custom shortcuts for the things we need to do quickly while we are designing for web or mobile apps. Now we are going to go to a Edit. For setting these preferences, we are going to go to Edit and then Keyboard Shortcuts. Here we have the keyboard shortcut menu. There are few things we need to set up over here. Now, first we are going to go to this Edit and we are going to go down to Search. This is very new feature in Photoshop CC 2017. By default there is no shortcut key for it. What we're going to do is we're going to press Control F or Command F, and we're going to press Enter. This is going to add shortcut key over here. This is our first shortcut key. Now the second step is that we're going to set up few custom shortcut keys in this Layer panel. We are going to expand this one, and you need to find this Rename Layer. Once you have found this, now F1 is normally for Photoshop help, but we don't normally use function 1 key, so I have set it to F1 as a Rename Layer. I can quickly rename my layer, just pressing F1, and it led me, rename my layer. This is one shortcut key and the second one is in the section where we have smart objects. Go to this Convert to Smart Object and I have set it to Alt F5. You can use any one you like, option F5 or whatever you like. But make sure you remember these all you know that they are easy to remember. If you set these up and you forget about them, then it is going to be a headache. Now in the Layers menu you need to find this, Align Layers to Selection. We need to set two shortcuts for these vertical centers and horizontal centers. You can set it up whatever you like, but I have set to Alt Control V or Option Command V, for vertical, just to remember that it is vertical centers. Then for Alt Control H for horizontal centers. These are few settings we need in this Layer panel, Layers shortcut keys. Now we need to move to this Window. Expand this Window panel and we need to set the shortcut key for this Tile all Vertically Alt Control F10. We really need this one a lot. These are all the shortcut keys we are going to set up in our Photoshop. There are a few more options that can come handy and I need to explain them right now. Now you can see over here two buttons like you can see over here. This is to save all these shortcut keys into a set. If you want to save the shortcut keys into a new set, you want to create a new set, separate set of shortcuts. You can set, Save it over here. If you want to summarize all the shortcut keys, if you click over here, it will generate a HTML file. If you try to save it over here on the desktop, like that. You can see it can generate all the shortcut keys HTML file. You can check these HTML file and learn all the shortcuts you have set. This is just another way of learning these shortcuts. There are few more things like Shortcuts For: Application Menus. You can go over here, set the Panel Menus too. You can see over here Color, brushes, all the tools you need to access over here. If you want to set shortcut keys for them, you can set over here. Also you can set the shortcut keys for Tools. So Tools are over here. On the left side, you can see Lasso Tool, Polygon Lasso, they have L, and then we have W, W, C, C, C, C. These are all the shortcut keys you can set up in Photoshop. Let's move on to the next lesson. 4. Installing Scripts in Photoshop: Now in this lesson I'm going to talk about how to extend Photoshop's capabilities or how to add new functions to Photoshop, which are currently not present in Photoshop. There are two ways to do that. One is that you can install Custom Scripts made by different professionals and programmers. The second is that we can install Photoshop Extensions created by programmers. They also use the same scripts, but they can be accessed via panels. In this lesson, we are going to install Photoshop Custom Scripts using my PC. If you are on a Mac, you need to see the next lesson to find the path and where you are going to install Photoshop Scripts on a Mac. So let's get started. First what we're going to do is I'm going to show you the website, One Script over here. So this is a script expanding smart objects by this guy kamile. What it does, it actually expands the Smart Objects created by Photoshop, which in Photoshop it is not possible to revert back to normal folder or a group or layers once you have created Smart Objects. If you don't know about Smart Objects, don't bother. There will be a lecture up ahead in the next sections about Smart Objects. Right now you need to know that this capability is not present in Photoshop. What we're going to do, we are going to download this script over here. Scripts are basically in JSX JS format. You can see at the end JSX or JS format. These are basically JavaScript files and we are going to download it. Save the file. Now we have downloaded the Expand Smart Objects custom script. We're going to copy it and we are going to install it inside the Photoshop Installation folder. I'm going to close Photoshop right now. Make sure you close the Photoshop when you are installing it because it will not appear. You need to restart your Photoshop to update the Scripts folder. I'm going to close it. I'm going to right-click and go to Properties and Open File Location. So basically what we are doing is we are going to go to Photoshop Presets folder in Photoshop installation. You can see over here, there are different folders, plugins, preset resources. We need to find these presets folder. Double-click and we are going to find Scripts folder inside it, Scripts. Here it is. You can see once I have opened the script folder, there are a lot of scripts, but these scripts are the default scripts which came along with Photoshop installation. These are all scripts and automated task management scripts that are shipped with Photoshop. I'm going to create a new folder over here, My scripts, something like this, and I'm going to paste it over here. Now we are going to restart our Photoshop again to see how we have this updated script over here. Now go to file and go to scripts and you can see over here we have new script over here, KAM Expand SmartObjects. Let's test it. Let's create a new document of any size. I have created a very small document. For now, just an example, I'm going to create few layers over here. Okay, so second one, let's make it a bit smaller than this one. I have two layers. I am going to create a smart object from these two. Now this is a smart object and there is no way that I can get back my both two layers. I'm going to select this layer and I'm going to go to File, Scripts, and I am going to go to KAM Expand SmartObjects using this script. Once I click this, it is going to perform some actions and you can see over here, here's the folder and it has given me both my layers back. So this is one way of extending Photoshop's capabilities which are not present in Photoshop, you can add new functions, new functionalities, there are a lot of scripts written by programmers or Photoshop users. There is one more thing you can do with these scripts, you can set Photoshop custom shortcut keys for that. We are going to go to Edit, Keyboard Shortcuts and File. Then we need to go to Scripts. Where are the scripts? We have the scripts and you can see this is our Expand Smart Object. I am going to give it a key of Control Shift E. So it is going to give me that it is already assigned layer merge, so something like this, Alt Control, Alt F4, Alt command option F4 on your Mac. But right now I'm showing you how to set up keyboard shortcuts. Next time we're going to use it, we are going to just press Alt Control F4 to expand our Smart Object. This is all about Custom Scripts, how to install them, and how to set shortcut keys for them. Let's move on to the next lesson. 5. Installing Photoshop Scripts on MAC: In this lesson, I'm going to show you how to go to Preset folder and install scripts in using Mac OS. Go to Go, and we are going to go to Applications, and double-click on this Photoshop icon. You can see there are different folders like Plug-ins, Preset. Now we are interested in this Presets folder. Double-click it and you can see you have a whole lot of folders. Now, if you want to go to install some scripts, you can click s and you can go to the scripts. You can paste your scripts over here and this is how we install scripts on Mac OS. Now, there are a lot of Photoshop presets files like actions. We have different actions. You can install actions over here. If you can find them online, then you can have different gradient over here, install different gradients. Then we have different patrons. You can have patrons over here. In different lessons, I have showed different things to install. This is basically how you are going to find Photoshop's Preset folder to install different type of things like styles, grapes, patterns, and shapes, custom shapes, sometimes icons, they come with custom shapes, Photoshop csh file. You can copy the csh file here and you can use that custom shapes in your Photoshop workflow. Now this is the problem a lot of students were having. You can also see color swatches over here. If you have your custom color swatches and you've saved it, it would be over here. If you want to bring some custom swatch over here, you can copy and paste it over here. This is how we install different presets in Photoshop using Mac OS. If you have any questions, please let me know. I will be able to create more such videos for Mac OS users. Let's get ahead and move on to the next lessons. 6. Photoshop Extensions for UI Designers: Today, I'm going to give you the biggest secret of Photoshop and UI design, which is Photoshop extensions. Now a lot of UI designers, they don't really rely fully on just the Photoshop capabilities, but they extend their Photoshop capabilities by using Photoshop extensions and script. Today, we are going to talk about Photoshop extensions. Now, there are many hundreds of Photoshop extensions but I'm going to show you few of them that really help in UI design and really speed up our workflow and we cannot live without them. There are few which are very good in free Photoshop extensions. Then we have premium extensions. I have purchased a lot like maybe around 10 different Photoshop premium extensions and I will show you both of them. It's up to you whether you are going to purchase it or not. Let's first see some of the free Photoshop exchange. The first one I'm going to show you is this Photoshop extension, which is basically random user generator that is based on this website engine randomuser.me. For right now in Photoshop's latest version, CC 2017, it is not working. I have posted the author of this plug-in, the problem that it is not working, I don't know when they're going to update it. But this is the problem with free extensions, so they are not basically managed too well. Now, its alternative is this one UberFaces, and I also have this one too. It is just $5. It is basically premium and it also is based on random user generator website or engine, but it has some more capabilities. You can read about it over here, uberplugins.cc. What it actually does is I'm going to show you the power of these plug-ins and extensions in the next lesson. I will show you some of the plug-ins I am using and how they can be helpful in UI design. Then we have this Font Awesome PS that can easily bring any icon into Photoshop. So you can see over here you need to download it from here. It is available for Mac and Windows, both of them. Now, few more. This is called Griddify. This is another Photoshop panel and it is really cool extension. It can really draw different guides and grids quickly and very swiftly. So this is one of them, this is also free. Then we have Oven. This is basically to export Photoshop assets into different sizes. This is also one of them I sometimes use, even though Photoshop's latest version has its own export engine, so we don't need this much, but you can look at it. Then we have this ink to generate different specifications when we deliver our web design files or our mobile app design files to the developers. They need to know the sizes, so the height and the width, which element is which has the size or what size this element has. So this is basically the plug-in. This is going to help, and this is basically free plug-in. Another one I use is this Markly. It is very marvelous, really easy to use, and a lot of firms like Microsoft, Disneyland, they are using it. I'm also using it, I am one of them. It's basically a premium plugin and it's $50 right now. So these are too for generating specifications for web development and hand it over to developers. Then this is also a free one, Fontea. It manages all the Google fonts and it can have a lot of capabilities. I haven't used it yet, but I think you can try it. It have all the Google forms in it and it can easily manage and you can apply different fonts on text easily. Then this one, Craft, it has many, you can say different functionalities. It's a plugin with four or five different subsections and it is really great, but it just works on Mac. So this is a bit a drawback. It just works for Mac. If you have Photoshop and Mac then you are in luck, you can use it. Then we have another one which is also for creating guides. This is a premium plugin. I really love it if you can buy it for $10, I think you should buy it. This is one of the best I have seen for using guides and creating grids. Then this one is ColorKit and it is basically you manage colors in Photoshop linked to different layers in Photoshop design elements. For example, if you want to change the color of two or three elements at the same time, you can do it with this. So you can check it out. I will give the links to all these plugins, so don't worry about it. Then we are moving to another great site which have a lot of premium plugins. I have bought a lot from them. So one is CSS Hat 2, I really recommend this. If you are a front-end developer, you're a coder, you can code in HTML, you really need this. Then I also have this PNG Express. Then I already have this Guide Guide and this Perspective Mockup. A lot of them I am not using right now. Social Kit Pro is also one of them. It can create social graphics like Facebook avatars and different sizes and social media templates easily within Photoshop in just a few clicks. Then this is ColorKit, I already have this Fontea. Subtle Patterns. It can get a lot of great, Subtle Patterns, very light patterns into Photoshop with just one click. So these are a lot of different plugins. You can all try them out if you are an iOS developer or you design for iOS and Apple a lot, you need this plugin. Then we have UberFaces, UberColumn, UberFrames. There are tons of different Photoshop plugins. You can try them out and you can buy them if you want, then there is a last resource I want to share with you is this pspanels.com. It has a lot of plugins each day, it is updated. If you want to stay up to date, you can e-mail, subscribe over here. It's not my website. So it shows a lot of different Photoshop plugins, panels, even some of them worked with Adobe Illustrator. Few of them are free, like you can see over here. So these are really great, you can try them out. I'm going to share the links with all these plugins and extensions into the sources of this lecture. So do check them out. Now, in the next lecture, I am going to show you the power of all these plugins in action. So let's move on to the next lesson. 7. Power of Photoshop extensions: Now let me show you some of the superpowers of these Photoshop plugins. Now, this is a sample file. This lecture is just for demonstration that these plugins can be used in this way. So I am going to show you some of the uses of the plugins I have. I have expanded this panel over here. I have Color Kit, FontAwesome, Ink, PNG Express, QuickGuide, Griddify, GuideGuide, Subtle Patterns, UberFaces and Device Preview. Let's begin with this Color Kit. What it does, it basically saves the colors of these elements into groups, like that, you can see over here. If I want to change the color of this one like this, and I choose some other color, you can see it is going to update both the buttons or those ovals at the same time. You can see over here, this is very handy. I can update the color scheme of multiple elements at the same time with very speed and even I can change the whole color scheme of the whole website or web design or a whole document. This is the power of this Color Kit. It has this sample project. You create a project and in the project you link different layers with this. If I link this layer with this, you can see it changes the color of this layer. If I change the color to some dark color like that, you can see all of these three, these two ovals and this has changed. This is very handy, very powerful, but it's a premium plugin. You can buy it. Then we have FontAwesome. What it does, it can bring all the different icons into this. I can say arrow. You can see over here there are different types of arrows. Now it's the arrow and it's a shape. You can expand it like that. So you can expand it, you can change its color like this. You can see this is very powerful, very easy, and it is very good for developers too. Then coming to this Ink, Ink and this Markly. I have that Markly over here. Let's open it. This Markly. These two are basically for developing our design specifications. What does that mean? If I'm going to select this rectangle and I'm going to show its measurements, you can see in just a moment. Now it is 97 pixel in height and 802 pixels in width. My developers, they need to know how they are going to produce this design element in HTML. In web design, web development, they need exact sizes. This is what it is going to give them. Then let me show you how it is going to give the details of this one. I'm going to click this icon over here, button. You can see it shows name, super power, opacity one, and the name of the font, MuseoSans-300, style is 300. This is all the details of CSS values like RGBA colors, and a lot of things that developers need from designers. Right now I'm going to delete this folder over here. Then let me show you the power of the other plugin, which is basically this Markly and it is a premium plugin, so I'm going to import the document in it. Now the document has been imported in this Markly plugin, and you can see over here, if I just click over here, you can see it is showing me the sizes in this one. Let's delete this. I'm going to delete all the things over here. Let's delete the information around all these layers quickly. Now, why this one is premium and the other one is not, because you can just double-click on any of this and you can display all the things over here. Just clicking like that. It is very swift and very easy. You can see over here I can just keep on clicking and I can show everything over here, like it's position, x, y position and a lot of other information. It is very easy, very quick. Even if you double-click this, you can see over here it is showing all the font information just by double-clicking on any element. This is really cool, really fast way of generating developers specs. Next, coming to this PNG Express, it adds different tags to these buttons and these different elements or groups, and we need them to export into PNG Express. Right now, Photoshop have a very good export as overlay and it has a very good tool. It can export into multiple formats of different sizes. We don't need this PNG Express much. Then this one, QuickGuide and Griddify. Now what QuickGuide is going to do is that it is going to quickly generate guides around this layer. You can see over here, these are all the guides that has been generated around this square in just one click. So if I want something like this, maybe in the middle and like that, I can just click these two and generate the guides in the middle of this. So if I want to place something in the middle, I know that this is the middle of this circle. It can also lock this layer quickly and hide this layer, hide the guides. Lock the guides, hide the guide and show the guides over here. Now, we are going to use Griddify. Griddify, we can divide the whole document into different sections using guides and grids. It is very good in designing a grid around our design. I'm going to select this. I have made the selection, and I'm going to divide it into four sections, vertically like that, and also horizontally, horizontally and vertically. So I divided this one like that. If I put spacing zero and wrap it, you can see over here it is giving me around this. It is wrapping this with different guides like that. You can see over here, I have prepared a whole grid system over here. This is really cool. Then we have this GuideGuide. What this GuideGuide is going to do is it can generate any grid system in just few seconds. I'm going to generate eight columns grid system over here, and it is going to generate it in just seconds like that. You can see over here, these are the paddings. You are going to learn more about using this grid in the later exercises and lessons. So don't worry about it. I'm just showing you the use of these plugins and how they can help and speed up our workflow. Now I'm going to clear the guides over here. Now there is one more, this is called Subtle Patterns. I showed you how this can bring a lot of great patterns in Photoshop with just one click. I'm going to attach some Subtle Pattern with this background. So let's get started with this Subtle Patterns. I have papers, scribes, wall, different things over here. I'm going to check this one and you can see it applied this as a pattern overlay over here. I can get a paper effect over here with this background. I'm going to delete it right now. So this is another way. Then we have this UberFaces. This is really cool. I'm going to show you just how it is going to amaze you. One, 2, 3, go. You can see it generated four avatars in these four eclipses in just one click. So it saved like next 30 or 40 seconds or maybe two minutes off your work. Let's go back and this is how we use this plugin. You can generate women, men, and you can just click this and it is going the mask in all these shapes. Then this Device Preview, I cannot show it right now, but it is basically to connect and manage your Photoshop design area on your iPhone app. So how you are going to do is that you are going to use this remote connections over here. You can see over here in this preferences. This service name and this password and this IP address. These are the three things you are going to use. I have showed how to connect this in my second course, Typography for UI Designers, which is a bit advanced. In this lesson, I think I'm not going to show you, but you can easily get it. If you want to take my other course, you are more than welcome. These are all the superpowers of these UI Design Photoshop extensions. I think you really liked this lesson. So let's move on to the next lesson. 8. How to Install Photoshop Extensions: Now, I'm going to show you the ways of installing different Photoshop extensions. There are two or three different types of Photoshop extensions and their files basically which you need to install are in different formats. So I'm going to show you different formats. Also, If you have Photoshop version which is like 2014 CC or below 2014, then you need to induce Photoshop Adobe Extension Manager which you need to download from Adobe website. If you have Photoshop latest version, CC 2017 or CC 2015 or 15.5, you need to use a software called ZXPInstaller. I'm going to show you walk through all the things and different problems you can face during the styling of these plug-ins or extensions. Let me show you first Adobe Extension Manager. This is how it looks like. If you are going to install anything, you need to install extension, click over here, and you need to find the file with the extension. You can see over here, ZXP. It is only going to open ZXP files and it is going to work with Photoshop version CC 2014 or below. For CC 2015 and up, you don't need this software. You can even uninstall it if you don't need it. Now, let me show you different file formats which you are going to see during Photoshop extensions installation. The first type I'm going to show you is this one, ZXP. The icon will look like this one. This is PNG Express.zxp extension. You can see over here in the folder path, it is for CC 2014. Now, if you have CC 2015 or the latest one, then you are going to see something closer to this. This is ColorKit 1.5. Now, what you are going to see is you are going to see something like this, installer.jsx file. Now, what you are going to do is most of the plug-ins like I'm going to show you one more, guideguide.ps. So this again have installer.jsx. Normally, what you do is you drag and drop your installer file into this Photoshop and it is going to run and install the Photoshop plug-in and you need to restart Photoshop again, and that's it. Now, I already have guided install. If I click over here, you can see it has given me some error. Now, the second method is that if it doesn't work, then you need to go to "File", and go to "Scripts", and then "Browse", and then you need to find that script file, installer file, and you need to run it from here. You can see over here, it runs JSX, JS, JSXBIN files. What you are going to do is you are going to run this same file from Photoshop's File menu. Go to this "File", "Scripts", and "Browse" through that installers script file, select that installer script file into this, and load it. It is going to install that extension into Photoshop. Now, I'm going to show you the third method of installing Photoshop extensions manually. Sometimes, if your script files or anything, they mess up or you need to install Photoshop extensions manually, then you need to do that with this method. Most of the time, you need to read the instructions manual from the plug-in company if they have something like this. So you can see over here for Mac OS, they said that copy MarklyPS folder to applications and to Photoshop CC 2015 plugins and generator. For CC 2017, they have given the same path over here, you can see with it. One folder you are going to get to this path. There are basically two paths over here: one, this one, and second is this one. Library application support, Adobe, CEP, and Extensions. Sometimes, if you don't find this CEP folder, you need to create it yourself. These are two paths for Mac OS. Most of the plugins, you install manually, either you need to copy this to this folder, those or this one. These are the two parts you need to keep in mind. I'm going to share the link to this installation guide so you can see yourself. Then for Windows, you have also these two paths. You can see over here, Windows 32, if you have 32-bit, and if you have 64-bit Windows, then you need to go to this path, Plug-ins and Generator. Then there is one other path which is this C, Program Files, X86, Common Files, Adobe, CEP, and Extensions. I'm going to share this document so you need to know these two paths to install these plug-ins and all the extensions you need to install in Photoshop. If you have any questions or you don't get your Photoshop extension installed, you need my help, you can ask me anytime any question. If you have Mac operating system, there are two more lectures ahead where I'm going to show you how to install using ZXPInstaller. You need to see the next lectures for another method which is basically ZXPInstaller. It can install ZXP files into even the latest versions like 2015 and 2017 which generally don't support ZXPInstaller files. This is all about installing Photoshop extensions. Let's move on to the next lesson. 9. Installing Extensions using ZXP Installer Photoshop CC2017: Hello everyone. I have seen some students having problem installing their Photoshop CC 2015 extensions, which are basically ZXP extensions. So I thought of making another lecture to help them out because I think that other students might be having same problem. Here's the solution. Number 1. First of all, you have to download this ZXPInstaller for Windows or if you are on OS X download this version. Go to this zxpinstaller.com and download this installer. The problem basically is the newer version of Photoshop, which is CC 2015, I already have described that this version does not support ZXP extension. If you want to install ZXP extensions into Photoshop CC 2015, you have to follow these three steps. Number 1, download this ZXPInstaller from zxpinstaller.com, then I will show you the extensions which you are going to install with the help of this one. Download this one and then install it and you will have something like this, ZXPInstaller. It will open up this window. Install this one and you will get this window and you can just drag your ZXP file over here and it will be installed. You can click over here to select the file, whether it's on desktop or wherever it is. I'm going to go to my extensions folder and now I'm going to drag this Griddify beta 3 ZXP file over here and it's installing my extension. Make sure you shut down your Photoshop before installing this because it might have some problems. Shut down your Photoshop before installing any extension. Also, this extension which is basically quick guide, you can see over here. quickguide.zxp, I'm going to extract it. It's a zip file, double-click. I'm also going to drag this one over here. All your extensions which are ending with this.zxp file, you have to install them using this Adobe ZXPInstaller. It is not basically from Adobe company, it is made with the help of these two companies, Creative DO and GuideGuide. They created this little tool to install ZXP installation into Photoshop latest version, CC 2015. To install all the ZXP extensions, you can use this little tool and I will be including its link in a PDF file. Some students who are also complaining about PDF file links. Basically, why I'm providing links, because these softwares or these plug-ins, they keep on updating themselves. Whenever you need to use the most updated version, you have to go to the URL because my version might not be updated. If I upload it to Dropbox or something like that, then you might have problems installing it because it might not be the latest version. If you really want to install the latest version like this ZXPInstaller, it has been updated. Let me show you the last one I had. The last one was something like this. You can see the icon was different. Now, they have updated it in this fifth number, the last one I downloaded was on July. Also, the size is different. It's 45,298 KB and this 45,464 KB. They really updated this one. This makes sense. If I am giving you the link so you download the latest version. I don't have to worry that my students are getting the old versions of any extension or any tool. This is all about how to use the ZXPInstaller to install Photoshop extensions. Now, I'm going to run the Photoshop. Make sure while you're installing this extension, your Photoshop is not in the working mode, you have to shut it down. Let me just give it some time to load. First, download this extension, then install it. These are few steps. Click on this one and the installer will keep on installing this little tool. Once it is installed, then you can go ahead and install all these three very good Photoshop extensions. This one is Font Awesome. Basically, Creative DO are the ones that created this ZXPInstaller. It is very helpful tool. Download the ZXPInstaller and install this for awesome Photoshop extension, Quickguide, and Griddify. I will be updating or creating a new video on how to use Griddify in my pro tip section, which is coming soon. So stay tuned. I hope you have enjoyed this lecture and you will be able to install Photoshop ZXP extensions after watching this video. Thank you and see you in the next lecture. 10. Installing Photoshop extensions on MAC: A lot of my students have been asking me how to install extension in Photoshop while using Mac OS. So this video is specifically on students request. I'm going to show you the folder, how you are going to locate that folder, where extension will be installed, if you are going to install them manually. There are two ways you can install them manually or you can use this ZXPInstaller. This is an open source Adobe extension installer. You need to download this OS X version. I've already downloaded it, you can see it over here. Let's install this. In the meanwhile, I'm going to show you where is going to be the folder of our main Photoshop extension installation folder. Let's get ahead to that folder. Now, first we are going to go to our computer, then our main drive, this is my drive. Go to this main drive, and then go to this Library, then this Application Support, and then Adobe and the folder is this one, CEP, If you double-click it, you can see over here the extensions folder. Now, whenever you try to install any extension manually, you are going to copy its contents over here, in this Extensions folder. So let's go back and repeat once again, Library, Application Support, Adobe, and CEP. Then we have these extensions. This is the path where all the extensions will reside, even if you install them automatically, they will still be here. Let's find and download Griddify extension for Mac. You can see they have showed that download and install ZXPInstaller. We are going to download this Griddify. Let's download this Griddify extension, here we have. Then we are going to run our ZXPInstaller app and we are going to drag this ZXP file into this. Let's see, it is going to install it. In the meanwhile, we are going to close Photoshop app. Let's exit it. Quit Photoshop CC. I'm going to enter my password. Now it has shown me that your extension has been installed successfully. I don't know why a lot of users and my students having problem installing this. Now we are going to run our Photoshop. So I'm going to paste it over here and we are going to run this Photoshop CC. If I open up a new file, let's see. We're going to open up a new file, just any file right now. Right now I'm out of this 3D card because it is VMware windows. So I'm going to show you the extensions here we have click on Griddify, and you can see it is going to load over here. Now we have Griddify over here let's try it out. Control A, I'm going to select everything. Command A, that's interesting. Command A, and we're going to divide this into five divisions vertically. So divide, We have our Griddify working perfectly. So I don't know why a lot of students are having problems installing it. Let me show you where it is right now. If you are unable to install it with ZXPInstaller, you can go to this file. Copy this folder, Griddify, copy it, and we are going to paste it the manual method, which is that we are going to go to this folder again, extensions and you can see over here already we have Griddify because it installed perfectly. But if you are unable to somehow install it and you are very frustrated just paste your Griddify folder over here and restart Photoshop and everything will be fine again. This is how we install extensions on Photoshop and this is how we locate Photoshop extension folder on a Mac OS. I hope you have liked this exercise because I was having a lot of Mac users requests that they are unable to find this location of Mac resets and Macs extension folder, so stay tuned and let me know if you have any problems. 11. Setup Panels and Workspace for UI Design: Today we're going to set up Photoshop panels. We only need the tools we really require during our UI design process. We only need layers, colors and few plugins. The extra things we are going to remove them from our Photoshop panels and Photoshop interface. Let's get started. We're going to open up just any file. By-pass this area, create any file. Now, when you run the Photoshop for the first time, you will see something like this, which is basically essentials over here. So your panels, all panel settings are saved over here. Right now we are in essentials. If you switch to 3D, the tools will be shifted to 3D setup and then graphics and web, like that, and motion and painting and photography, so on and so forth. Now, first we're going to start with this graphics and web. What we're going to do is we are going to create a new workspace over here like that. I am going to name it new UI. Also we are going to use this keyboard shortcuts and everything else. Save. Now what we're going to do is we need our swatches over here, so we are going to move this above this at the top, like that. So layers and swatches. We don't need colors, so we are going to close it, right-click and close like that. Swatches and here these are our most important two things. Now in this area, we need some panels or plugins loaded over here. We are going to go to window and extensions and we're going to load our GuideGuide extension. I'm going to show all these plugins in next few lessons, so don't worry about it. Then we are going to use this quick guide. Whatever plug-in you are going to use, mostly we are going to use guides related plugins and this Font Awesome plugin, this is free one. This Quick Guide is also free one. This GuideGuide is paid one. Right now we will only need Griddify, GuideGuide and Font Awesome. Let's click this "Griddify". Right now we need all these. Then we are going to load few more things like character styles or characters like that. We are also going to move it around like that inside this area. I'm going to reattach it like that. We have this character over here then we also need Info panel over here. We are also going to move it at the top, Info panel like that. Then we also need these paragraph and paragraph styles if you want, then we are going to move this paragraph with this. Maybe move it inside this one. Paragraph and character styles are two tabs related to each other. Then we also need maybe Properties panel, so we are going to use it again and again, Properties panel maybe move it above this plugins, maybe move this plug-in at the bottom, so Properties and Info panels. Then we might use these styles so we are going to get them over here, like that with swatches. Styles are basically layer styles like drop shadows, their color is, gradients, etc. We can save our button styles over here and we are going to use them again and again also with the colors. I'm going to also use this Layer Comps over here. I'm going to close Libraries and I think these are most of the tools we are going to use, paragraph, paragraph settings and character settings. Is there anything else we need over here? Sometimes we might need these actions, so maybe we can load them over here. Move these actions below this Info panel like that. This is how we are going to set up our Photoshop interface. Right now we have swatches, styles then Layers and one more thing we are going to add over here is Paths, so let's look for Paths. Like that and we are going to combine them with Layers. Almost we are all setup. We need few more things like rulers over here. You can see over here. If you go to view and then Rulers, Control R. We need rulers over here because we're going to drag and drop few guidelines like that. This is just from here and place our elements over here. You can see over here right now it's positioned at some pixels over here, you can see when I move it, it shows 33 pixels, 52, 67, something like that. We might place our objects according to these guidelines like that. We need our Ruler setup. We also need to see that this Snap tool is checked on, Snap to Guides, Layers, don't comment about Slices and Grids. Also, we are going to go to this Show and make sure that these Guides, Canvas Guide, Smart Guides and pixel grid, all these are checked. This is all we are going to need in our UI design process. Maybe we might need few more plug-ins which you might find in next few lessons. You can go ahead and install them. That's it. We have saved our panels in this new UI panel workspace. We right now have swatches, styles, Layers, Paths, and few plug-ins, and properties, and character styles, and few paragraph things loaded over here. If you want to ask any question, ask me, if you are not able to move them around or something like that, maybe you need to practice it. You can see over here how it has detached from its panel. This is all about panels, setting up Photoshop panels. Right now we are using one and the second one is basically minimized. If you want to expand it, you can expand it over here like that. I like it minimized because we have more working space over here. If you want to expand it like that, you can expand it over here. You can see all my plugins and everything is loaded over here and you can go ahead and access the other ones below like that. But I like it over here like this because I don't need to access multiple panels from this area at the same time. This is all about panels, let's move on to the next lesson. 12. What is Color Calibration?: Today, we are going to talk about the color calibration. This is, basically, to calibrate your monitor or LCD or LED colors to standard colors. When you purchase any device, whether it's a LED or any monitor, the colors are not standardized. They might show a tint of red color or green color or blue color. Also, they might not show all the whites and blacks accurately. Then there is this color calibration. There are two types of calibration. One is using some hardware, which is like this. These are few devices to calibrate your colors. This one is ColorMunki Display and ColorMunki Smile. Then we have this, another company, which is Spyder5PRO. These are different color calibration devices. What they do is, you attach them to your monitor like this and install their software. They test the colors, brightness, contrast, and gamma of your screen and adjust it accordingly. This is, basically, hardware-based, hardware plus software based. Now, coming to the easy solution, we have this website which is called lagom.nl/lcd-test. It shows a lot of variety of color calibration test. What color calibration is, we are going to adjust our whites, blacks, and our color tints to standardized mode. We need to check whether our whites, and grays, and blacks, and even our other colors are showing accurately. There are a lot of different tests, but, normally, what I use is I use this contrast. You can see over here there are different bands of colors, up to 32. You should be able to see all of them separately. Each color should be separate from the other color. They should not mix together. This is one test. You can align them in the middle of your screen and see them straight, not look from the top or bottom because some screens don't have very good viewing angle. Here is some description you can radiate along if you want to, then we have this gamma calibration. I don't understand much of it, but what you need to do is you need to sit back a few steps from your screen and you are going to squeeze your eyes, and you can see over here these gray and black bars inside all these colors. You need to check with these bars are basically blending. When you squeeze your eyes, they will blend at some point, like 1.8, 1.9, 2.0 or 2.2, something like this. Standard-setting is 2.2 and 1.8, in between all of these, I guess, is accurate. Sit back, few steps, and squeeze your eyes and see where these lines are going to blend. One other test which I used, this one, black levels. You should check the black levels. How you are going to check them is, there are different shades of black over here, 1, 2, 3, 4. This is pitch black, so it is blending with the background. There are different black to grays. Then there is this white one which is the most sharpest color over here. You should be able to see all of them separately. If you see all the black color over here, up to three or four, then there is some problem with your blacks. You must go to check the settings of your contrast. If you see more black boxes over here, then you should check your brightness level and, maybe, contrast as well. Then come the test for the white saturation. This is different shades of grays to white. You should be able to see all of them. If you sit back a few steps from your screen, you should be able to see all of them. This is one other test. Then we have gradient banding. You should be able to see this white to black, and you might see some bands in between. A very good color monitor or very good screen should not show any bands in between like this. These are different lines in between coming. These are called bands. They should be smooth. They should not show bands like this. They have given examples of bad screen and good screen. Others, I don't know, and I don't use much. This one is important, viewing angle. The screen I am using right now doesn't support very good viewing angles. This is a Samsung LED 23 inch, so it is like 2-3 years old. Now, what you are going to do is, you're going to view this image from a bit top and a bit below. Then from the left side of your screen and right side, and you see the colors are going to change a lot. Even with this purple, it might look blue or reddish tint in it when you look it from some other angle. Also, this one, this shows some time pinkish and sometime red color. This is very important because, if you design something in Photoshop or any other software, and if you are going to look it from some other side or your client is looking from left or right side, he might not see the right colors. In the next lesson, we are going to see different kind of LED screens, which are good for designers. Also, we are going to use our system calibration tool for Windows, or even Macs, to calibrate your screen using just your eyes and that software, which is built in into any operating system. So just a recap what we covered in this lesson, that there are two ways to standardize your colors with your monitor. You can see the image over here, before and after. What we use is we use our eyes. One method is our eyes and color calibration tool given in operating system to change the colors. Do standardize the colors. The second option is use these different devices, like this ColorMunki solution there, two or three. They can calibrate your screen automatically. I am going to purchase this ColorMunki Smile very soon. It is almost $90 from Amazon, I guess, $89 or $90. I haven't used any of these before. Let's see what they are going to do. Now, this is all about color calibration and this Lagom website. In the next lesson, we are going to see how operating system is going to help you. Operating system built-in features help you to set your color calibration to standardize mode. Let's move on to the next lesson. 13. Best Monitors (LED) for Designers: In this lesson, I'm going to talk about some of the LED screens or monitors you really need for a UI design or any designers. If we buy any LED, normally it's TN panel. So there are basically three types of panels. When you buy any LED or monitor for you, you should look for these features. There are TN panels which were basically old technology, three or four years old. It stand for twisted nematic. They are a bit inexpensive. Then there are IPS panels, In-Plane switching. This technology shows and displays better colors than the TN panels. Like IPS and PLS, you should go for these. PLS is a technology introduced by Samsung. So mostly, when you view any Samsung screen like this one, there might be written PLS, it is almost like IPS. So anything that is IPS or PLS, you should buy it, rather than buying TN panels. If you are just starting out in your career, then you should stick with TN panels. But if you want very accurate colors, then you should go for IPS or PLS screens. One very important factor, which is this viewing angle. So always make sure that the screen you are buying have maximum viewing angle like 178 degrees. Mostly these IPS screens and PLS screens, they offer a great variety of viewing angle. So even if you view from left to right, and top and bottom, colors and everything should be the same. Okay. For the guys who use Macs, I guess Mac screens are built on IPS technology, so don't worry about that. But I have seen even Mac users who are using LG or Dell or other companies' screens or very wide monitors. So this is all about monitors or IPS and PLS screens. So that said, let's move on to the next lesson. 14. Operating System Based Color Calibration: In this lesson, I'm going to talk about how to calibrate your display using Mac OS or Windows, using your own operating system calibration tools. First, start with OS X or Mac. What I'm going to do is, I don't have Mac right now, I'm recording on Windows. How you are going to calibrate your display, you are going to use System Preferences. If you go to System Preferences and then click "Displays," you might see color at the right side, so click that and you might see a calibrate button over there. When you walk through this calibration process, you might see different at the end of this calibration tool when you have calibrated your color profile. Then in the end it will show you the old color profiles. If you want to switch to any old one, you can switch to any old ones, so don't worry about it. Also, there is an Expert mode. If you are an expert, you can check that and see more options in it. This is all about calibrating your display. Let me see if I can find any image on Google. But I guess normally it is something like this. If you don't select the Expert mode, you might see this target white point. I normally chose this native. This is how you calibrate in OS X Yosemite, or any other OS X operating system. Using Windows, what we are going to do is we're going to type in Windows search over here, color calibrate and you might see this just calibrate color display. This is a wizard and if you click Next, you might see different options to calibrate your display. If you click Next, you might see this Gamma too low, Gamma good, Gamma too high. What you are going to do is you are going to adjust your Gamma so you don't see any dots in between, like this white or black dots. I'm going to click "Next" and right now it is set to almost exactly what I need so I'm going to skip to the end. Then we have brightness and color adjustments. Make sure you might need to adjust the colors, brightness and contrast from your display menu. If you have Samsung or any other screen, you might have different buttons and knobs on your screen. You need to use them to set your brightness and contrast because this is basically related to your display and hardware. I'm going to just skip next. This is how you are going to set your contrast that your shirt should be visible, these wrinkles should be visible on your shirt and also these two black and grayish background over here. Then the other thing is you are going to remove the taints from your grayish color. If you click Next, you might see taints of red or green, or maybe blue in some monitors so what you are going to do is you are going to move your slider back and move your green a bit back. Let me see if I need to remove the blue. No, blue is okay. Green and red, there were no taints of green and red in my screen, so I'm going to click next. You can check your previous calibration and new calibration. This is previous one, this is current one. I'm going to switch to this previous one. If you finish it, you might see this start ClearType wizard. It is going to show you different texts and see which one is looking best to you. This one looks good and this one looks good. Then this one looks good. This one looks better. You finish this wizard and your calibration is set. Now, there is one more way to control this gamma and other colors, which is going to your graphic card software. I have Intel. If you go to display, this might not be same for each graphic card, but you can go to the settings and panel. You can see here brightness, contrast and gamma. If I try to model with this gamma, you can see the colors are changing on my screen and you can also change this brightness and contrast. You can apply it. Also they are different sample images they are given over here. If I try to change the brightness like this, you can see over here. Right now I am going to cancel it. I don't want to change the settings of my screen because it took me a lot of times to make it closer to the accurate colors. Because sometimes my kids, they just press any button on my Samsung screen and all the colors are gone. Basically I'm going to cancel it. You can also change different contrast and brightness and gamma settings over here. This is another way. I'm going to cancel it right now. This is all about how you calibrate your display using your OS X or Windows operating system. What they are going to show you, they are going to show you and walk through a wizard and just keep the colors which looks best to your eyes. In the end, if you want to test the settings, you can always come to this website and test your settings again. You can see over here now I cannot see this 254 almost. If I go a bit further from my screen, I might see this one. Always make sure that your color calibration is done accurately. Something about screens, I am going to show you in the next lesson what screen you need for graphic design or web design or UI design. Let's move on. 15. How Photoshop's Interface Works: Let me introduce the interface of Photoshop and how it works, how different options and tools are being accessed in Photoshop. So let's get started. I have opened up a sample file over here. I have one layer and one text layer and one shape layer, so first thing first, this one on the left side, we have this toolbar, so we have different tools like Move tool and a lot of tools. If you select any tool, you can see the options at the top related to that tool, so this is basically option bar, so if we click on any of these, if we switch to any other tool, you can see these options are basically changing. These are more options related to this tool. If you keep your mouse or hover over on this tool, you can see the name of that tool, Crop tool. Also you can expand it over here like that and redirect it like that. It's your own liking. You can customize this tool bar from here. Keep pressing your mouse on this and you can edit it over here and you can drag it like that. This is how you can change your whole toolbar. This is your current tool bar, this is basically extra toolbar, if you want to remove something, you can remove over here. Also you can save and load presets of different tool bars. So for more options, you can see over here there are detailed navigations over here, menus. You can see these are image-related, image manipulation then layer, Type tools related to selections, there are different filters. Then we have 3D, we are not going to use it, but this is just for information. Then we have view and different setup like our grids, guides, rulers. They are all in this view panel then we have windows or panels, extensions, everything in this window over here. So make sure that you just see them once. Don't try to remember them, you know that these things are here like these extensions workspace over here. This is our detailed navigation. This is our option bar for these tools, so we do select any tool and the options come over here. Then for more options, sometimes you need to go to this toolbar over here. This is basically panel, so Panel bar. If I select any of this, let me draw some shape right now to show you how it works. So if I drag some shape over here, you can see this live shape properties panel has been opened. It has a lot of options related to this. There are options over here at the top, but there are options over here too. Also you can see width, height, x and y coordinates and location of this object according to this document. Anyhow, there are few tools. You fill pop panels you can access over here related to any object or graphic you design over here. If I try to select this one, you can see over here, I have selected a text layer and I can go to this panel bar and I can select Character, Paragraph and few other things over here. If you don't see this loaded over here, you need to load it from here, Window, and you can load it from here like Layer, Layer Comps. Paragraph, Paragraph Styles. So this is how you load these panels, but they will be activated once you have that type of layer or object selected. Basically we call them layers over here, so this is layer one, layer two, layer three. So few options, you can grab them from here then the third way is that you can right-click on any of this layer and you can access more options and more operations you can do on these layers. So this is how you access different areas of Photoshop. There is one new feature that has just been added, which is the search toolbar. You can see over here, if I go to Search and try to search something like crop, you can see it shows me Crop tool and other things related to crop like Trim, Reveal all. If I select this, it is going to select my Crop tool. This is very handy, I have set the shortcut key for it, Command F or Control F. By default, this shortcut key is not over there, so if you want to try it, you need to assign the keyboard shortcut from here and this is all about this Photoshop interface and how it works, where you are going to access different options and tools and things and more options related to any layer or text you draw or design. So let's move on to the next lesson. 16. Photohsop New Document: In this lesson, I'm going to talk about Photoshop's new document setup, and how we are going to use different presets for mobile apps and web design. So let's get started. Go to "File and New," and you will see this New Document window and you can see, this has been changed a lot in this latest version of Photoshop CC 2017. You can see the details of any preset is at the right side and the presets you are going to select from here. So if I select this one, you can see it is 1440 pixels wide and 880 is its height. You can change the inches or everything. But for web design and mobile app design, we're going to use pixels. Now you can see there is resolution. For digital resolution for mobile apps and web design, we're mostly going to go for 72 pixels per inch. Color mode will be RGB, eight bit white background and in the advanced options, you can see over here, color profile, set it to Don't Color Manage and square pixels. These are going to be your document settings for almost every document. Now, if you see at the top, you can see there are different new document options like saved, which is going to show me some of my saved presets I have saved. Then it is going to switch to this photography. If you are a photographer, you can use these. These are all in inches and 300 PPI, which is for print and photography. Then there are also footprint. Again, you can see these other settings. If you click on it, it is going to be in millimeters. These are print documents, art and illustration, and web and mobile. If you want, you can see over here, you can access more presets from clicking this, by clicking this plus sign over here. You can see over here, iPhone 6 Plus, iPad Pro, Microsoft Surface Pro 3, iPhone 5. There are a lot of different templates. You can see there is a new feature at the bottom. You can see these are free templates from Adobe Stock. If you want to click on it, you can see it will show you some of the size, 32 MB and it is going to download it from Adobe Stock. Make sure you are connected to Internet and you have signed up on this account of your Photoshop's. This is how you use different templates. These are for film and video. Most of the time for web, I don't use these templates sizes or web medium, web minimum, web large. Normally, what I use is I use this one, which I have saved over here, which is 1280 pixel wide bootstrap. Now how you can save a preset? You can name any preset over here like Save new. Make sure you change the height like I'm going to change the width for 1200 and height to maybe 2000 pixels. Orientation will be like that. I don't want a portrait. It will always be in portrait orientation if you want to select art boards, it is a new feature in Photoshop's latest versions. You can check it over here. Other options you need to show the same, which I am using over here, you need to use them. You can select this option over here and to save the preset. Once it is saved, it is going to ask for the name. I'm going to name it 1200 pixels wide. Let's save this preset and you can see over here it has saved this preset. These are my downloaded templates. These are my saved presets. So if I try to create it, you can see it is going to give me a new document with an art board option you can see over here. Now what are art boards? We are going to learn about them in the next lesson. Let's move on to the next lesson. 17. What are Artboards?: Now, in this lesson, we're going to talk about Photoshop artboards. So let's get started. We're going to open up a new file, and make sure that in these options, you need to check this artboard if you want. Without artboards, you can go without them. So check artboard and I'm going to create right now. So you can see this is actually 1,200 pixels wide and 2,000 pixels of the height, and this is basically my Artboard 1. I'm going to rename it by double-clicking on this layer panel. You can see I'm going to rename it to WebDesign. This is WebDesign. Then we can add another artboard. You can see over here there is an Artboard Tool, if you click over here, and you can see we have Artboard Tool V, and you can see that there are different options over here, like you can change the selected artboard to any artboard size you like. So if I want to switch to six, you can see it can go to six or it can go to back to 1,200 pixel wide. Also, you can create a new artboard. By clicking over here, so I can create a new artboard, and I can select any of this, and just drag it over here. Click over here once, and you can see it has created a new artboard, which is iPhone 5 template. So it is basically iPhone 5 dimensions. Now, if you want to create more artboards, you can create more artboards. It is very helpful, like you are designing a website or maybe a mobile app, and it has 10 screens or 12 screens. You can add more screens by clicking this over here, like that, and you can have multiple screens and web view everything on one Canvas. So this is how you use artboards. Now, there are few more options. You can see over here, you can align them. You can select different artboards and you can align them if you want. Maybe, you can align their top edges, if you have mistakenly moved them around. To move them around, you need to go to this Move Tool, and you need to disable this Auto-Select if you have selected it, and you can move any of the artboard you have selected, like I have selected this one. I can move around it like that, and if I want to move it at the bottom, I can move it closer, like that. So this is how you move around your artboards. Then you can also delete them. You can right-click and delete artboard. You can duplicate them over here, if you have created one theme and you need to duplicate the whole artboard with all the layers. So each artboard you can see over here, it is basically a group and it can have a lot of layers, text layers, your whole design sitting over it. So this is how you use different artboards and this is how you delete them. I have pressed my Delete key on my keyboard to delete any artboard I have selected. Any artboard, you can select it over here. Make sure that Artboard Tool is selected and highlighted. So you can see there are few more options like Auto-nest Layers, Auto-size Canvas. There were few problems in previous versions where Canvas size and your artboard size were mismatching. So they created this. Now, if you want to rotate your mobile screen like you need landscape mode, you can select any artboard like iPhone, the last one I have selected and you can rotate it around like that. So this is how you rotate the view of your mobile. So this is portrait, this is landscape view. Now, let me demonstrate the magic of these artboards. If I have, for example, one button over here, like that, this is an all inbuilt and I want to copy it to other, so I am going to just Alt and drag over here. You can see in the right side, it is copied to another artboard. Same is the thing I can do over here. So this layer or this button has been copied to all these other artboards. The same way you can copy groups or drag your design over here or over here. Now, you can see if you have old version of your Canvas size, then you can see if you go to this Canvas size, it is going to show you that Canvas of the whole area you are covering, which is basically 3,408 pixels. So if I try to make a selection over here like this, I think it is going to be 3,176. So it is approximately going to be equal to the size of the whole Canvas. Now, Canvas calculation is different. So if you are calculating everything on Canvas, then you should not use outputs, and if you want to delete, you can just delete the artboard over here. So I'll delete artboard only, and you will left with the contents over here. This is how, if you want to use the just the Canvas, you can go something like this. I'm going to delete all the artboards and you can see we have our Canvas back. So this is our main Canvas. So if I try to resize it right now, I can resize it. So this is one of the problem, one of my students' fears, so I am going to clear this out. That if you don't want to use artboards, when you try to create new file, don't select them, don't check this box. So then you are going to get this old document set up, which is, I really miss that and I really love it. So that is all about artboards and how you are going to use multiple artboards to create your mobile apps or web design, or different views, or different versions of your design. Let's move on to the next lesson. 18. How layers works in Photoshop: In this lesson, I'm going to talk about layers and basically the concept of layers and a bit about this layer panel. Let me first draw up some layers. I'm going to grab this shape tool, and I'm going to draw some eclipse over here. Q 1, 2, 3, and 4. Now I have four eclipse. Let me change their colors so you might understand which one is changing or altering their colors. Now I have four eclipse. Now, as you can see that in the layers panel, the black one is at the bottom most. In this representation it is also at the bottom. They are basically in a stack order. Bottom, then this gray one at the top, and then blue one, and this orange one is at the top. Basically we use this stack order to create different objects and different graphic items and different designs. Sometimes we merge or blend these two layers, top on bottom layers. Sometimes we subtract them, sometime we add them. Let me come to this layers panel. These are different blending options. This is normal. If I switch to this darkened one, you can see it is basically blending with the layer below it. The layer below it is basically blue. We have different options over here like multiply. It is multiplying with the layers below, color burn and all these different options. Basically it is adding or subtracting colors or multiplying them, or bonding colors, and these are different multiplication or you can say blending options. Now these are basically blending options. We normally use multiply, color burn, maybe screen, or overlay most of the time. We don't use others. Maybe color sometime. But I will use them intensively in my next course. For this course, only the introduction that it's blending options is enough. Now coming to this opacity, opacity is basically the transparency of any layer so if I make it, the first one transparent, you can see it is semi-transparent now. This is basically transparency. Now coming to this fill, fill is basically the color filled in this eclipse or layer. To better understand it, I'm going to apply some stroke effect to it, so you can see that what is happening. Now, you can see this fill option is only applied to the color or fill inside this eclipse. It is not getting or doing any effect to the border or stroke effect around it. If I change the opacity, it will reduce everything including any layer styles or styles applied to this particular layer. You can see the difference between opacity, it makes all the object transparent including its all the styles. But the fill only makes the inside content to be transparent. This is the difference between fill and opacity. Now coming to this lock options. This is basically to lock the movement, so now we can not change the position of this layer. It will remain static over here. Now the benefit of locking this position is that we can apply different layer styles or different options and different other elements to this eclipse, but we cannot move it. Now, if we switch to this lock tool, if we lock this, then you cannot do anything with it. You cannot even apply layer styles. You can see all the layer styles have been disabled. This is the difference between this lock icon and this lock position icon. Now, there are few more options over here. You can see if I try to turn this on. This is basically the filtering of this layers, so maybe if we have like 100 layers and we just need to find the, let me create a text layer, I am some text over here, and then I'm going to create some smart object. Just remember that smart object was orange in color like that. I'm going to create a small object. I saw it, where did it go. The smart object is here, this one. Now I have one text layer, few eclipse or shape layers, and then I have one smart layer or smart object. Now if I want to search quickly the smart objects, I'm going to click this one and you can see it is showing me the smart object. Or if your document have five or six smart objects, they will be listed over here. Basically this is a quick filter to locate your layers. If I click this shape tool, it will show me the shape layers. If I click both of them, it will show me shape layers plus the smart objects. This is basically to filter out your layers. This is a text and I can see all my text layers and then I have these other options. We normally use these three. This is all about the layers panel and how all these layers work with each other and how their stack order takes place and how we use them to display or may create different objects and affects. If I delete a portion of this one, I'm going to let us try it first. Now you can see, I can see through the other layers from this one because it has a hole inside it. This is how this layer works. I hope you have learned some basic steps of how this layer and layer panels basically work and hope to see you in my next lecture. 19. Text Panel in Photsohop: In this lesson, I'm going to show how we are going to use our text tool for designing our UI design, and how we are going to use different options of paragraph and character sets. Let's get started and go to this T-icon symbol in this tools panel or you can press T for the shortcut key. I'm going to click and drag over here to draw a paragraph bound and I'm going to paste some Loren Ipsum text over here. Now, I'm going to increase its font size so you can see it a bit better. Now, some of the options of this text panel is over here. We have selected this font face which was Open Sans. I can switch to any other font if I want to, like this one. Then this is basically its settings. For example, font weight, we have bold and bold italic right now in it. Then this is the font size. We are going to use it in pixels. This is basically font rendering option. We will be using normally sharp, crisp, and smooth. Or maybe Windows LCD. If you are on LED screen, you might see this. Even on a Mac, you can see Mac LED over here or something like that. Now, these are basically alignment options; center align, right align, or left align. These are paragraph settings. This is basically the color of the text. If I want to change it to something like this, I can change it from here. This is basically wrapping text, but we might not be using it in our UI design process. Now, clicking this will open up more options in this corrector panel. That's why in our previous lecture, I included this character and paragraph settings over here. Now, coming to this character panel, this is basically the font size, and this is basically the line height between these two lines. If I try to increase it, you can see the text lines vertically, they expand. Then this is basically the space between two letters. You can see the letters are getting more space here and having more space in them, like that. Normally, we use most of the time something, maybe 25. Now then, we have these different other options over here for font and typography like bold, italic, and then all caps, and subscript, superscript; these are different options. We might not be using them most of the time over here, but maybe they can come handy sometime. Now, I'm going to explain something about this paragraph settings. Now, in the paragraph settings, we have these more options of alignment of text. This is justified for justified settings and these are normal three settings: left line, middle line, and right-align. Now, these three are indentation options. If we want to indent our paragraph from left, like 50 pixel, we might be using this. You can see that this paragraph moves 50 pixel from the left. If I just want the first line indention, then I can use this one. Now, you can see the first line is starting from 100 pixels from the left. Now, these are basically top and bottom padding of our paragraph. If I enter 500 over here, you can see my paragraph moved down. These are all for the paragraph settings, but most of the time, we might not be using these indentation options or these spacing options because we will be moving different paragraphs with our keyboard, like shift and arrows using our shortcut keys. This is all about paragraph and paragraph settings.s Let's move on to the next lecture. 20. Shape Tool in Photohsop: In this lesson, we will be using our shape tool to create new shapes and combine different shapes and subtract few shapes. I will be focusing only on the things we will be doing mostly in UI design. Let's get started. Click on this shape icon, tool icon or you can press U from your keyboard. Click and drag to create. You can see this width and height is coming along, width this 537 and something like that, I'm using this one. As soon as I draw this one, you can see live shape properties pop up. Here is our width and this one is height. If I want to set the height in 330 pixels, you can lock the height if you want to squeeze this box into proportion like this. Then we have its x-axis position, how far it is from left side and how far it is from top, which is y-axis. This is its background color and this is its outline or stroke color. You can see over here, if I increase this, you can see how it is outlined it. No, we will not be using this so I'm not going to discuss these few settings from outline, we will be using it in with our less times. One more, which is very important thing is this border radius. You can click or drag over here if you want to set it to some radius of the border, or you can type in your own choice of value over here. Also, if you click on this lock icon, you can set custom values for each corner. If I just drag it over here like this, it will create this kind of shape, and these kind of shapes are possible in CSS design and new CSS3 specifications. One thing is this, we will be using most of the time these rectangular shapes for our buttons and a lot of other things. Now let's create a new shape by combining two shapes. Sometimes you have seen this kind of information dialog box or pop up. I'm going to use another custom shape from our shapes toolbar. Here I'm going to load all the shapes over here, replace them, and remove one more setting, large thumbnail. I'll set it to large thumbnail. Now let's find out where this rectangle is. We can use this one or maybe this one, or this one. I'm going to draw a rectangle over here. It's not basically a rectangle. Now you can see I have made a balloon pop up or tool tip styled of box. Now, if you focus on your layer panel, this shape is separate from this one. If I want to change its colors, the other will stay as it is. Now how I can combine these two, it's very simple. You can select both these by pressing control and click, and then you can press control and E. It's a shortcut for combining two shapes, they're now merged now. You can see they are basically merged now. If I want to change its color, I can change it and control T If I want to scale it, they are going to scale proportionally. This is how you create shapes in your UI design. Sometimes we had to create shapes like this. Now, if you want to subtract a shape from it, mostly we don't need to use it most of the time, but still it's something you can learn. You can see now, as I have selected this subtract from front shape, my cursor is changed to this negative or minus sign. Now, if I draw a circle over here, I'm pressing Shift with it, you can see it just subtracted this shape. One more thing, if I need to move it, I cannot move it with this move tool. You can see I can move the shape, but if I want to move this circular circle inside my shape, which I just subtracted, I need to press this path selection tool or direct selection tool. If I click on this, you can see now this oval shape inside this other shape is highlighted. If I want to select all its sides or all the shape, I'm going to click this black cursor over here "Path Selection Tool." Now I can move it around, now it's in the middle. If I want to change its size or shape, I can scale it down or scale it up. Then I'm going to again select move tool, and that's it. We have created a shape with combining two shapes and then we subtracted this area from over this combined shape. This is it, and I think that's it for our shape tool. I hope you have learned something and enjoyed. Let's move on to the next lecture. 21. Basics of Pen Tool: In this lesson, I'm going to show you quickly how we are going to use our pen tool in our UI design. We are not going to create icons over here. Let's just make it quick and easy. You might have seen something like that. Let me just create to explain it. This is my hero area of my website. Like that. I'm going to change its color, background color, so you can view it properly. Also, I'm going to expand its size a bit more. You might have seen variation of this shape. Most of the time some few designers, they don't use this totally squared shape. We will add some variety over here, select your pen tool and click on this line of this rectangular tool over here like that. Click over here and click over here. Basically what we are doing, we are adding few more anchor points to alter our shape. Now move on to this Direct Selection Tool. Select it and then select the middle one and move it with using arrow and shift key, shift, arrow, shift, arrow, shift, arrow. I'm pressing shift and clicking arrow. This shape has been created. If you want the arrows to be a bit not curvy and a bit pointy, you can go to this convert point tool and click once over here. You can see we have basic shape of a arrow head hero header area. You might have seen showing arrow or content next over here, arrows pointing downwards over here. This is one use. I have altered this shape using my pen tool and changed it to create some more aesthetic value. There are also some other things we can use over here. You can see that was our basic shape. If you select this Direct Selection Tool, you can select over here and move your shape like that. You can see we have created different variety of shapes over here. To start with our this header as header area or hero area. These are different uses of pen tool and we use them in combination with our shape tool. Keep this in mind and hope you have enjoyed this lecture. Let's move on to the next lesson. 22. More on using Pen Tool: Today one of my students asked me to create some more detailed lecture on Pen tools. Today we are going to explore more about Pen tool and in the end we are going to create something like this eye shape. You can see on the screen. I think that I will show you few of the techniques how to create curves and how to create different shapes using your Pen tool. Let's gets started. First we're going to select our Pen tool press "P" on the keyboard, so your Pen tool is selected. You can see at the top that you have two options; Shape and Path. If you select the Shape, whenever you try to create a path in a shape mode, you can see it is going to be a full shape like this one and closed shape. What I'm doing is I am just clicking, and then I am clicking back at the first point where I started and it is going to be enclosed shape. This is an enclosed shape. If you want something like this, enclosed shape, you are going to select this first option Shape. If you just want a path, then you should not select this Shape. If you just want some lines or maybe some arrows we don't need it. I'm going to press on the Pen tool and the path and I'm going to draw a path over here like this. Click and drag in the direction where you want the path to go next. In this direction it means I'm going to go in this direction. You can see how it calculates my curve according to my direction. On this side I haven't given it any direction, so it will be very sharp. It is not rounded. If you want it to be rounded, you go to this Convert Point Tool, click over here and drag outside. You will see two handles at the both sides and you can drag them like this. If you want it to be aligned, you should press the Shift key, like that. I have created this curved path. I don't see any path once I click somewhere else. What I'm going to do is I'm going to enable my paths over here like this and you can see, is it inside this layer? Yes. It's inside this layer. Let's delete this one. I have this path. Let's create a new one because it has merged with my last path. I'm going to create a new one over here. Just a quick path like this. Just a wave. If I want a stroked path like this, first I'm going to create a new layer then press A , right-click and you can see you have Fill Path and Stroke Path. Click the "Stroke Path" and if you want to simulate pressure, I will tell later what does it mean. Actually, it simulates how the brush pressure works. If we click on it, you can see over here. It is a brushstroke with the less pressure on the start and at the end. It really shows you just like a brush. If you don't want a brush stroke, you can click over here, first select this layer and you can right-click and Stroke Path, and you can turn off this. You can see I have a consistent line or you can say path. It is not showing me any angles or you can say I don't have a pressure applied, so it is just a consistent line. This is how you create a wave. The main point over here is that when you are using Pen tool, this is the first click. When you are going to do the second click, you need to tell Photoshop where you want to go. You want to go in this direction or in this direction. If I click here, you can see how it calculates that I'm going to go in this direction. If I tell it that I am going to go in this direction, then it is going to calculate like this. You can see this is a bit upward and this is a bit more slanted. At this point, if I don't tell it that we are going to go this way or this way, it will be very steep. If you want a very steep curve like this, just an angle, 90 degree angle or 80 degree, you should not tell Photoshop that you are going to go in this direction. Don't give directions and it will be steep. That is how we build shapes. One is curved, one is not curved. This is how we create shapes and paths. Let's create that iPath. I think it is more than enough. Let me explain one more over here. One more example. I am going to create one more example over here, like this over here, like this over here, and like this. You can see I have no curves over here. If I want the curves, I should go to this Convert Point Tool and click over here and drag. It will have handles over here and it can create curves. Now, what I'm going to do is if you can click "A" and you can click on this Direct Selection Tool. You can select any of these anchor point and it have two handles. If you try to drag one handle like this, you can do it independently. We have selected just this one and we can have whatever we like. Also you can adjust this angle over here, like that. Also, you can move this up or down. You can see this anchor point. I'm using shift and arrow keys to move it up and down. You can also drag it up and down where you want. This is how you control these anchor points and these are their handles. If you want the handle, you can control them like this, may be like this. This is how you control these pen tool shapes and paths. This is the path selection tool. If you select on this, it will select all the anchor points on this path. You can move it round maybe like this, or over here or over here. Also, you select this one and right-click and you will see these make selection. If you select on this, it will select the whole shape rather than just the line. Make sure that when you are selecting, trying to have some brushstroke on this layer, you must have a layer in this art board. Create a new layer first, then right-click on it, and you will see a stroke subpath or whatever it is. It is going to stroke it. Now, if we want to create something like this, we just need eye shape over here like that. I'm going to create a new document over here, and let's create this eye shape. It is very easy exercise. I'm going to click over here. Next, I'm going to click over here, drag. We are going in this direction. Press Shift if you want to align it like that, then I'm going to click over here, then over here, like that and then over here. You can see this top and the bottom one are not aligned. What I'm going to do is I'm going to select this selection tool, and I am going to select this one and move it like this with my arrow keys, and maybe I need a bit of smaller eye, it is very opened or maybe big eye. I need something like this. Maybe I need to convert it to the shapes. I'm going to press Shape. I don't know what happened. Maybe we should go ahead and try it again because we had selected. There is another way if you want to fill this layer, you can select A and press Okay and make selection like that, and you can press G, Shift G for ground color. I can select this color, maybe this one. It's what is happening over here, I have inverted selection. What I'm going to do is I'm going to invert it. Just selecting this eye is okay. I pressed Control Shift I to invert the selection and I'm clicking over here. My eye section is complete. I'm going to give it some layer style. Not the drop shadow, I'm going to give it an inner shadow. Fifty percent multiply distance you want, and then something like this. Then we are going to create some eclipses in the middle like that. Change the color to whatever you like, maybe this one, and then you can Control G and duplicate this layer. We are going to duplicate it like that. Let's just create two more like this. I think this is more than enough. If you want more layers, you can create them as many as you like, like this. Maybe you can have some other color inside the eye. This is how you create shapes, how you tell Photoshop that in which direction you are going. You can select custom handles and custom areas even if you want to start with a shape. If you just draw eclipse over here, you can see I have drawn an eclipse. If you press A, you can see all the anchor points. If you want to delete anyone, if you want to change anyone, like I want to drag it over here like this. I am going to click "Yes", and if you move it like that, press Shift A to go to the next tool, I'm going to like this. You can see it is the start of the icon. Or you can see, the icon we create of a user profile, it is the head of the user profile. If you want more like this, you can go ahead and press A and we can make it a bit more like that, rather than just an oval-shape [inaudible] 100 header at the top. Then, we can draw another shape from here. We need a shape, so I'm going to click over here like this. I am not using any grid, so that is why it is happening. I don't have any calculation how it is going to go. Normally when you design some icons, you turn on your grid like that. It is Control and quote sign on your board. Single quote and double quote is just the next key from your semicolon. You turn on your grid, and when you draw, you draw according to your grid. I'm going to delete this whole shape, and we are going to draw according to this grid. Let's start from here. I'm going to go to this point like that, and I'm going to go over here. Then this is going to be 1, 2, 3, 4, 5, 6, 7, I guess. 1 ,2, 3, 4, 5, 6, 7. I think maybe we need to go over here like that, and the same place over here, like this, and back over here. Now you can see it is the same shape, but it has more accuracy. I need to close this shape like this. You can see, I can go ahead and change the color of the head like that, and make it above this shape. You can see how I have created these two icons. If you want to move it above a bit more like that or like this. This is all about how to use your pen tool to create icons. I have created two icons. One is this eye, and the other one is this profile, or I call it the alien guy. I don't know what it is. Let's go to the next lesson. 23. Aligningment in Photoshop: In this lesson, I'm going to talk about alignments and how we are going to use them in our UI design process. Let's get started. I have already populated my canvas with three shapes. Let me show you how we are going to align them and how to use alignment tool. Now, first of all, sometimes we have to align them horizontally and sometimes vertically, or sometimes we use groups to align all these objects. For the alignment tool to work, we need basically at least two objects or two layers. Sometimes we only have one layer so let me show you how to align it. If I want to align it in the middle of our canvas, I'm going to select this layer from over here, the layer panel and then I'm going to press Control+A. You can see my whole canvas is selected. Now I have two objects. One is my canvas and one is this layer. Now I'm going to align them using my shortcut key, which I used in our last lecture, which was custom shortcuts. We are going to align it horizontally first, Control, Alt, and H. Now you can see it is positioned horizontally in the selection, this canvas selection. Now I'm going to align it vertically, so I'm going to press Alt, Control, and V. Now you can see it has aligned vertically inside this canvas and horizontally too, so it is in the perfect middle. Now, if I have two objects like this. Now, if I want to align them both, I am going to select both of them and then I'm going to press, so I need to be on the move tool. Press V or move tool from here. Now you can see these align options at the top, they are enabled. You can align them horizontally like this and vertically like this. They are positioned with respect to each other. I already told you that we need two objects to align them. They are positioning with respect to each other. If I want to align them with respect to canvas, I have to select the canvas too. Right now I'm just explaining how this tool work. Let me show you. Now I'm going to select both of them and if I press this align top, they are going to align at the top position. Align bottom will do the same. Now, one more thing. This is align left and align right. Align right. Now, coming to these other alignment options which are hidden right now, they need basically three objects. If I click all of them like this, first I need to align them like that. They should be in one line. For example, they are like that. Now, if I want all these objects or layers to have the same space in between them, I am going to press this distribute horizontal centers and you can see now they're aligned perfectly and they have same spaces between them. What if I want to align them in the middle, in the same way with respect to the canvas? I'm going to first create a group of all these three layers. Let me name it layers group. I'm going to select this background layer. I can press Alt, Control, and H and then V. Now you can see, all of them they are aligned with respect to the canvas in the perfect center. These are some of the techniques we normally use in our UI design like selecting the canvas, or selecting this background layer to align all these. Sometimes we have guidelines over here, for example, like this and I want to align this in the middle of these guides. What I'm going to do is I'm going to select this layer and then I'm going to press M or Rectangular Marquee Tool and I'm going to drag over here and then I'm going to align it horizontally. Now you can see, and this is most of the time we use them in our grids when we have different alignment grids. Make sure you know all these tricks to align with this selection, to align according to this canvas. Two methods then align all of these three objects with respect to each other. These are three alignments we normally do. Keep in mind all these three alignments and we will be using them time to time in the next classes and maybe in my next course. I think this is all about aligning layers and distributing them. I hope you have learned something new. Let's move on to the next lecture. 24. Selections in Photohsop: In this lesson, we're going to see how selections take part in our UI design process. Let get started. The first thing you might want to do here is, sometimes, we need to Select Whole our canvas or Select selection around whole drawing area. For that, I'm going to press Control A. As soon as I press Control A, the selection around all this our canvas area. This is the first scenario. Sometimes, we need to make a selection around some layer or around some shape. For that, let me just de-select it, press M, and click once on the canvas, and your selection will be gone. Now, to select this shape, select it first from this layer panel and then Control, and click on this layer thumbnail. As soon as you click on this layer thumbnail, you can see a selection around this layer. This is another way where we need a selection around some layer or some shape. Now, if I want to add another selection or add in this selection some more ideas, I can go up here at the top area where I have to select this Add to Selection option. Then I can drag over here and select anything within the section. You can see now the selection has increased. If I want to move the selection, I can go to this first option first and then I can move it. Now, you can see I have moved this selection. In another layer, I have created a new layer, and I can fill it with some other color like this one. I am going to select some other color. Now, you can see I have used that selection and created a new layer, and filled it with another color. This is how we add to selections or create complex selections like that. Now, if I want to subtract a selection or area from a selection, let me show you how to do that. First, you need to make a selection like this. Now, I want to only the 70 percent top area of this shape. I'm going to press Subtract from Shape over here, select that one, and you can drag the area where you don't want it to be selected, and release. You can see this is how we make or subtract from selection. This is another way. Let me show you this last option, which is intersection. Let me show you what it will do. It will basically intersect both the selections and leave the area which was common in between them. This is how this intersection works. Most of the time, we don't need this interaction. Interaction, we only use this add or subtract selection. There is also some shortcut keys you can use to add or subtract some selection from this one. I have this selection. If I want to add, I can press and hold Shift on the keyboard, and keep adding on this selection like that. Now, if I want to subtract, I can press Alt or Option key on your keyboard and you can remove areas from your selection. Shift for adding selection and Alt or Option key for deleting a selection or removing parts of your selection. Sometimes we also need some of the irregular selections, so we use this Lasso tool. If you select this polygon or Lasso tool, you can see how this basically works. It is like this. You just click and combine the starting and ending points, and it makes a selection. If I want to delete, for example, the right-bottom corner of this shape, I'm going to first right-click and rasterize this layer. Because it's a shape layer, it cannot be subtracted like this with selection. Then I'm going to select my polygon Lasso tool. I'm going to remove this area and press "Delete". Make sure you have selected the correct layer, otherwise it will not work. I have removed this portion of this layer or this shape. You can see how it is looking now. These are different ways in which we use selections and use them to subtract, or add, or make different selections like that. Sometimes we need selection to draw guidelines. If I make selection like this and I can drag a guideline from here, it will snap automatically to its border. I'm going to leave it like that, like this and like that. This is another way in which our selections come very handy in UI design. I guess that's all about selections and its usage in UI design. I think I have almost discussed all the scenarios in which we need these selections. Let's move on to the next lecture. 25. Common Shortcuts in Photoshop: In this lesson I'm going to share with you guys some of the Photoshop shortcuts we will be using a lot of time. I've already populated my canvas basically, as this is a text layer and these are shape tools. One common shortcut is this V tool, which is move tool. You can see over here. Whenever I want to move some of the layer, I am going to press this V. The layer which will be moving will be the one that I have selected from this layers panel. Make sure you have selected the correct layer over here. To select the layer you can Control Click on it, or you can set up this auto select. If you have this auto select setup, you can just click on the layer and it will be selected like this. You can see in the layers panel as soon as I select any other layer, it just moves to that one. You can use both of the options. You can use auto select or you can deselect it and use Control Plus selection, which is more precise in my opinion. Now, one is that we want to move these around. Second is that, if I want to duplicate or replicate one of the layers, so I'm going to replicate this layer and I'm going to press Control J on my keyboard. You can see it is converted and replicated into another rectangular layer of the same size. Second one is that,