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, if I want to group all these which we will be using a lot of time grouping elements. Take control and click all these, so these will be selected. Press Control G to group them. Now they are in one group and if I try to move them around, they will be moving together. Second problem is that, if you have auto select, select it over here and reset to layer. Then if your group is selected and you click here to move it, you can see what is the problem. You are basically auto selecting this layer inside this group. This is another problem. If something happens like this, you have to make sure that you have selected group from here. Then you can move around it like that. Sometimes it is better to check off this auto select. In the same way as we duplicate it or replicated our layers, we can also replicate a group. You can see now group is highlighted. I can press Control G, which is the same command as replicating a layer. I have replicated the group. There are two groups. This is one of the very common shortcuts we will be using a lot of time. Now if I want to make a selection around any of the element or any layer. For this to happen, we're going to press Control on my keyboard and if I hover my mouse on any on the layers, it is turning to this marching ants cursor. If I click on it, you can see this Eclipse tool has been selected, this shape has been selected. Now if I want to move the selection around, I have to press M key on the keyboard or this is basically the shortcut for rectangular marquee tool. If you have marquee tool selected, make sure you have this first option, the second and third options are combining and subtracting the selection. First option selected and you can move it around like that. Sometimes we might need to draw guidelines around it like this. I need this selection to draw some guidelines. Then I'm going to deselect it by clicking once like that. These are a few shortcuts, then some of the shortcuts which are related to aligning few of the layers, which are very necessary. We have to use them a lot. Let me just move some layers around and change the shape. Now you can see I've just scaled it down. What I actually pressed is, I pressed Control T to scale it, which is a shortcut key for scaling or rotating objects. I pressed Control T and I grab one of the handles and I just squeezed it like that. If you want to scale them in proportion, then you can select Shift on your keyboard. If I select one of these handles, you can see I am pressing Shift so it is moving in proportion. It is scaling in proportion. If you select Alt and Shift and then you scale it or scale it upwards or down you can see the effect. It has changed the scaling from one side to a central location. Right now it is scaling from all around the shape, from all sides equally. This is pressing Alt and Shift on the keyboard and then dragging it like that. These are the shortcuts for scaling. If you want to enable more shortcuts or need to do something more, you can right-click on it while these handles are active. You can use these flip horizontal, flip vertical, rotate 180, or skew, distort, and something like these more options. But most of the time we might not be using them. Now I have two layers like that and I want to align them from the top, I am going to select both of them. This layer, and this layer, you can select them from here by pressing Control. I'm going to use this top one to align them. Basically we don't use this top line most of the time, but we use the shortcut keys if you remember, I set up in my custom shortcuts tutorial, which is a bit earlier in this lesson series. Now both of them unselected I am going to select one of them and I am going to move it around. Now if I select both of them and I want them to be in the center or horizontally aligned, I'm going to press "Control", "Alt", and "H". Now you can see they are both aligned in the center of this canvas or art board. Now if I want to move one of them, I'm going to select the layer from here, and I can move it around. If you want them to move in one line, you can press "Shift" and you can see now it is keeping its spot. It is not moving in a random position. Press "Shift" while dragging up or down, so it will keep its current location or if it is in the middle, it will remain in the middle of your canvas. This is one option. Now you can see if I want them to be in the vertical centers, I am going to group them. Now you can see I don't have any background layer over here. All these alignments work with two objects. I must have one other object. What I'm going to do is I'm going to press "Control A" to select the whole canvas, and now I'm going to align this group. You can see as soon as I selected this, the top alignment options are enabled. I'm going to press "Control", "Alt", and "V". Now you can see they are vertically aligned. I'm going to hide these, so you can see them clearly. Both of them are vertically aligned in the middle of this art board. Now I'm going to de-select it by pressing M and clicking once over here. These are the common shortcuts we're going to use most of the time. Now some of the shortcuts you can learn them from here, you can just click on it here and you can see Lasso Tool. This is also used for selection. You can see we are going to use some of these like this Pen tool, Text tool, and then this Path Selection Tool, which is a shortcut key, these Shape Tools which we are going to use them a lot, Rectangular tool for you. These are all the shortcuts. V for this Move Tool, coming back to this cursor. These are the shortcuts we will be using a lot of time. Now one more shortcut. We set it up in our custom Photoshop shortcut lesson. Now we're going to use it. For example, if I want to convert these two layers into a smart object. I will discuss the smart object later on, so don't get confused or worried about it. They're basically a bit opposite colors and they're vibrating. Now they are good to go. Now these are the two layers which I'm going to make a smart object with both of them. I'm going to select both of them. I'm going to press "Alt F5" for smart object. It was our shortcut key. Now you can see its icon has been changed over here, this thumbnail icon. You can increase the thumbnail size from here by going to Panel Options and you can increase the size like this. Now you can see I have increased the size, but when we design UI designs, we have a lot of layers, maybe more than 100 layers. We don't use too much bigger thumbnail size. We might use this one or maybe this one. Now some of the extra options you can get them from here, right-clicking on any of the layers like these; Quick Export as PNG, Export As, Convert to Smart Object. But I prefer using some of the keyboard shortcuts which are very handy and we use them a lot. One more remaining which we set up in our custom shortcuts, which was Tile All Vertically. Now how we are going to use it? We must have one or two files open up for Photoshop. I'm going to open a new file, a new art board over here. Basically now I am working in two art boards. If I shift from here to here, I cannot see what I had in this one. Now to see them clearly or drag one object from one canvas to another one, I'm going to use Alt, Control, and F10, and you can see how the Photoshop has tiled them vertically. Now if I click on this art board, you can see this layer or this smart object has been selected. If I want to drag it over here, I can drag it and paste it. Now you can see it has been copied over on the next art board. But the problem is that it has lost its current location, and this art board is where it was. That location was a bit above. Now if I want to keep the same location, I'm going to press "Shift" while dragging it. Press "Shift" while dragging it and release it. Now you can see it has attained its current position. Now this is how we work in multiple canvases, and if I want to drag some images or something from one canvas or one art board to another one. Now I guess I have almost finished up these shortcut keys. One more, press Control plus for zooming in and press Control minus for zooming out. For example, I have zoomed in my design and I want to drag it a bit on the right or left. If I try to drag with my mouse cursor, it is going to move this layer or smart object round. I don't want this, I want to get over here, get this area visible. I'm going to press space bar and keep pressing it and then I'm going to drag it like this. Now you can see I have moved to the top left corner of my art board. This is sometimes how we move around when we have zoomed in our design. This is also very common zoom-in, zoom-out, and then move your canvas around. Now I guess most of these shortcuts have been discussed. I guess we are ready to move on to the next lecture. 26. Using Layer Masks in Photoshop: In this lesson, I'm going to talk about Layer Mask. Layer mask is another technique to hide different portions of your UI design elements, or sometimes hero areas or images used in hero areas of websites. Let's start learning it, okay? I have already opened up an image over here in Photoshop. Now I'm going to Double-Click on the "Background Layer" to make it Simple Layer. I'm going to click on this little icon over here it's "Add," if you hover over it it reads as Add Layer Mask. What it does is that as soon as you activate this Layer Mask make sure you have clicked on it. So this one is active, not this one. You can see there's rectangular sidebars overhead. So it should be active over here like this. Then you can grab your Brush tool or any other tool and you can start painting over here. You can see my primary color is set to "Black" and my background color foreground color is "Black" and background color is "White". Right now I'm painting with black. Whatever area I will paint with black, basically, just keep in mind that black will hide everything. So darkness hide everything and white shows everything. I'm going to set my brush size a bit more. I'm pressing "Bracket Keys" on the keyboard. It's a shortcut for increasing and decreasing size of brush tool. Okay, now, one more thing you have to see that this opacity is set to "70 Percent". So if you want to hide totally, then you have to set it to a "100 Percent". So whenever I brushed over here, it will hide everything out. Now one more thing, if I want to see what brush tip I'm using, I have to click over here. You can see it's not a hard brush, it's a soft brush having feathered corners. So we are going to "Select" any of this hard one. So you can see now the difference. Okay, let's wipe out all this area over here, chair too. Okay, I'm not going to go in detail of getting an image totally ready for your hero area or image editing and cleaning out it backgrounds. But this is the basic technique. You can Zoom In and see different areas and you can Increase or Decrease your brush size for more accuracy like this. One more thing is that in using layer mask it is non-destructive. For example, if I just accidentally click over here and remove this area and want it back, then I am just going to switch these colors and I will paint it with white. So you can see now my chair is back. I can clear out image like this. You can press "X" to shift the colors. You can see over here while I'm pressing "X", they are switching with each other. So I'm going to again click on the "Black Color" and selecting it and painting it like this. This is a very basic technique to clean up images like that. This is called basically layer mask. You can see your image by Disabling layer mask and you can see the whole image like this and you can Enable it back. This really helps us some times when we have to clean up images or hide few portion of the images. We can also do something like this like I'm going to Select this area, for example, this one up to here. I can Select my "Paint Bucket Tool" and I just click over here and hide everything out. So basically I just dropped the black color over here. So sometimes we might need to do something like this to hide the rectangular area or subtract some area from some image or something like that. Then we use quick technique. We don't grab our brush tool and keep on painting and painting. We make a selection and pick up our Paint Bucket Tool and drop the black color over here. So I guess this is all about Layer Mask and hope to see you in the next lecture. 27. Using Clipping Mask: In this lesson, I'm going to talk about Clipping Mask. Let's see what Clipping Mask is and how we use it in our UI Design workload process. So basically, Clipping Mask works just like a Layer Mask. So its purpose is basically to hide some portions of layer or an image. Let me show you how it works by an example. I have taken this Eclipse tool, press "U", and I have drawn this eclipse by pressing Shift to keep it in proportion. I'm going to center-line it like that. Now, I'm going to bring in some free stock image just for the demonstration. For example, this image, I'm going to just drag it into Photoshop like this. Basically, it's a smart object now, so I'm going to resize it, press "Enter". Now, this image is at the top of the eclipse, the eclipse is behind this layer. So what basically Clipping Mask do, it will contain this image into this eclipse. How we are going to do it? Press "Alt" on your keyboard and move your cursor over here in between these two layers. So the bottom one is basically the container and the top one is basically the part we want to show. So in between the container and base layer, we're going to hold "Alt" and click once. Now you can see it is showing only the portion of that image, which is basically inside this eclipse. So I can easily move, drag and move this around, and this is how we create different avatar images and different profile images on our web sites in our UI design. So basically Eclipse tool, we can use any shape over here. We can use this tool in this technique of Clipping Mask in many ways. I hope you have enjoyed my lesson and learned something new. Let's move on to the next lecture. 28. Challange Exercise → Clipping Mask: Hello everyone and welcome to my new challenge. It is basically a practice challenge for clipping mask. I have only used clipping mask in this example, so try to create same effect with clipping mask. Let me give you some hints. This is basically an image inside a clipping mask, and this black color you can see, it's another shape behind it. Now this is Open Sans font and this is a button and this area is also clipped. Try to produce something like this with clipping mask, and I will post the solution in the next lecture. See you soon. 29. Using Smart Objects in Photoshop: In this lecture, I'm going to show you the use of smart objects, and how we're going to use it in our UI design, and what benefits can it provide us with UI design. Let me just start with creating the symbol button first. If I make a button like this, let me change its color to blue so it is easily visible. Now, I'm going to press Shift. Now, this is simple button. I'm going to select both of them to align. Now, one ways to group it, we are going to press Control G to group it and move it around. We can also duplicate it by pressing Alt key and move it around. We have two duplicate groups, and they are basically same. What if I want both of them to change simultaneously? If I have three or four buttons and I want to change their color, I have to go to each layer and change its color again and again. To avoid this in our UI design, where we might have simply one primary controller or one primary button which will be duplicated all round our UI interface, to ease it up, we can convert this group, right-click over here in the Layers panel and Convert to Smart Object or use Alt F5, which was our custom shortcut key. Basically, now, it has been turned into a smart object. Now, how we are going to use it in our UI design? First, we are going to duplicate it three or four times. You get the idea when I change anything. If I want to change all these four buttons, which are in my, for example, web design or web app at different locations, I will click on anyone, select anyone, double-click on this Layer Panel, and now you can see I have both the layers over here. Now, if I want to change anything, for example, I change its color to maybe yellow or orange, or dark blue, dull blue color, I'm going to press "OK", and I'm going to close it and save it, "Yes". Now, all the copied or duplicated smart objects have the same color of the button. This is one way to manage our buttons where we have four or five, or maybe different same buttons levels. If the buttons are same, we can use this smart object to easily manage them. One other example or use of these smart objects is, for example, we have content box like this one and we have text written in it, for example, "I am a content box", something like that. Let me add something more to it, like this. Now, you can see it's becoming a content box. I'm going to group them and I'm going to create a smart object by pressing Alt and five. Now, it's a smart object. Now, if I duplicate it, maybe three times like this, let me just delete all the other ones so we don't get confused. Now, I have duplicated it into three different content boxes. You might have seen this pattern in a lot of websites where we have three featured boxes or three features of our product or something like that. Most of the time, they have just one element like icon changing in all of them and the pattern is almost the same. The colors and the font sizes, everything is same. Just to illustrate example: if I want to change the content of this one or color of this one, I'm going to select this and just change its color to yellow, or maybe gray, or light gray. I'm going to press "OK", and "Yes", save it. There we go. This is another use of smart objects. Normally, it is not used maybe because of the problem that we can't have different content in the smart objects. I advise you that do not use text or other content, which is going to be changed in the smart objects. If you need to create a smart object, just keep the background layers and styles, and delete the text so content can be changed in all of them. Now, they are good to go. I guess you understand the idea that don't use any element or layer which is going to be different in other objects. One use is this. One other thing is that you can also create a copy of this object by pressing right-click and "New Smart Object via Copy". When you create a new smart object via copy, they are not attached to each other. They are is irrelative. If you change color over here, like this one, it will be changed only in this one. All the three, they are linked, but this one is different because it was created by this New Smart Object via Copy. We created another copy and it was a new smart object, so they're not linked. This is all about smart objects and how we use them in our UI design. Never, ever put your content which is editable, or change, or going to be changed in all the other smart objects. Just keep the backgrounds, and background colors and styles or shadows in this smart objects. They're useful and you can use them in your UI design projects. This is all about smart objects. I hope you have learned something new. Let's move on to the next lecture. 30. Linked Smart Objects in Photoshop: In this lesson, I'm going to talk about Linked Smart Objects and where they are useful. Normally, when we use Linked Smart Objects, they are basically for the apps or websites where we have to design four or five different pages of the same app or same website. What we are going to basically use them for is, for example, I have this website and I am designing the main page of it. For example, I just create a header quickly over here. I have this header file and I have different links over here about us. Let me just kill this layer. Now, I'm going to use my text tool, press Shift so it doesn't follow this layer around. It is independent of this layer. Click once and here we have, about us, then contact us, and then products. It's just a dummy website so don't worry about layout or any other thing. It just to give you the concept how we are going to use Linked Smart Objects in our projects. These are three links. Let me just place one dummy logo over here. This is our logo. Now, first what we're going to do is that we are going to save this header, all these links, and this background into a Smart Object. First, you need to convert it into a Smart Object, then you need to convert it to Linked Smart Objects. You'll see the option convert to linked. When you click on it, it will give you an option to save this file. Basically, what we are doing is we are saving this portion of our design into another file so we can embed it in all the files we're designing. If we make changes in one of them, it will be changed in all of them. Let me show you just by an example. I have saved it with the name Ellipse 1. Now I'm going to save this Photoshop file. For example, I am going to save it on the desktop right now. My desktop is very messy, but you have to bear with me. We name it just mainpage. Mainpage is okay. Now, just give me a title over here so we know that it's mainpage. Mainpage over here. We're going to color it black. So main page or maing page, it doesn't matter. Now, I'm going to open up a new file of the same dimensions and I'm going to place linked over here. I want to place the same header over here. Now this is the file which I saved Ellipse 1, which was basically the header. Now you can see it has been placed over here. I can move it at the top because it was on the top, and I'm going to press "Enter". Now, you can see it has been imported over here. If I am going to save this as our products page, okay, now this is basically products page. Let me fix that r. Now, this is our products page, and these are some product images. This is a bit ugly page, but I think it's okay to get what it is going to do now. Now I'm going to save it as our products page. During my design, I thought that I should have changed this color to maybe green. My logo has been changed. I'm going to save it, press "OK". Now you can see it has already automatically been changed in the other file. But what if I'm using only or I have opened only one file? I'm working on the main page and the other file is, right now, not opening the Photoshop. I click on this, and I change the background color to blue or maybe yellow, or maybe gray, or maybe gray dark, a bit of gray. I'm going to change the ellipse color to this one, maybe this one. Now I'm going to save it and click "Yes". You can see it has been changed in this file which has already been opened, it's mainpage.psd file. If I close it and then I open my products page, let me open my products page. Now you can see here we have the old design, it has not been upgraded. But you can see a yellow icon over here in your Ellipse Linked Smart Object. Right-click on it, not on the thumbnail, but on the layer and you can see the options: Update Modified Content or Update All Modified Content. Click on it and you are good to go. Now, this is a very pretty neat feature of Photoshop. You can use it in your header design or in your footer design of your websites because they normally stay the same on all the pages. Or even if you are designing an app, you have almost the same header or footer backgrounds, or some of the layers of all of them. This is basically the use of Linked Smart Objects. Let's move on to the next lecture. 31. Using Layer Comps in Photoshop: Today, we are going to learn about layer comps. In this course, I just forgot to include this lesson. So let's learn what layer comps are and how we are going to use them in UI design. Let's get started. What layer comps is, basically, they are different layer compositions and we can switch from one to another. If you don't see any Layer Comps window, go to Window and click Layer Comps over here. This is basically Layer Comps window panel over here. Now, what we're going to do is we are going to create a single button with different states. Like when you hover a button on a website, it changes its color. So each button, when you design any UI data at different states like disabled button, and hover, and pressed button, we are going to create three states. One is simple button, then, hover, and then disable. I have used a rounded rectangle. Use this color, any color you like. Then, we are going to use just some text over it, Button Normal. Like that, and then, we are going to align them. Let's align them like that. Just move it in the middle. You group them so they are easy to align, like that. Now, this is our Button Normal, btn-normal. Then, duplicate this group, Control G. Then, we have hover state. Now, in the hover state, select this layer and we are going to change its brightness a bit up, 100 percent, like this. You can see here's the normal, here is the hover button. Then, we are going to use disabled button. Some use the semi-colons like that. Hover button state like that, and normal button state like that. Now, we are going to use layer comps. I think I forgot to style this disabled button. We are going to use this gray color for disabled button, and I think everything is looking fine. This is disabled and this is hover and this is normal. Just, I guess we should make the normal button a bit more darker because it is not looking very different from our hover state. Now, we have three buttons. Now, we are going to create a layer comp like this one. We can include visibility, position, and appearance, three properties of layers. If I change the position, it will show it in another layer comp. Right now, I think for visibility and appearance are more than enough. We are going to use this is normal state. Then, we are going to create another one with the hover state. Then we are going to, hover state has something like this, so we are going to refresh it like that. This is our hover state. Then, we are going to use a disabled one and this is going to be disabled state. So this is disabled, this is hover, and this is normal. You can see whenever I switch from one layer comp to another, it changes or hides the other two layers. So I do not need to hide them from here, one another. This is how we'll use layer comps in UI design. We can have a drop-down menu like that. If someone clicks on our menu like this and then we show the drop-down. This is normal, and then, this is drop-down, something like that. Now, if you want to export your layer comps to different files, you can also go to this file and export. Then, you can click this Layer Comps to Files. Now, you can select the destination where you want to export them. I can export them on the desktop and press "OK". Then, I'm going to name it buttons and file type will be PSD, and press "Run". All of the three states have been converted to PSD files. You can see over here Button 000 normal, Button 0001 hover state, and Button 0002 disabled state. So if I open this, you can see it has just the disabled state. One more thing is that Photoshop saves all the other layers with it too. So just make sure that this is not what you want. I think they are unnecessary, but still, I don't know what is the logic behind it. So this is how this layer comps work and how you export different layer comps to different PSD files. This is all about layer comps today and I hope you have enjoyed this lecture. Let's move on to the next lesson. 32. Mastering Drop Shadow Layer Effects: In this lesson, I'm going to show you how to use your Drop Shadow layer effects and how to create buttons with it. So I'm going to create a rounded rectangle with four pixel corner radius. I'm going to draw a big one so you can easily see the effects. I'm going to select this green color. Now, I have selected this layer. I'm going to go to Layer, and then Layer Effects, or you can click this layer and then you can see the fx icon over here, click on it and click on "Drop Shadow". Now you can see I have set my drop shadow like this. It's a very subtle drop shadow. Now, basically, this is the blend mode of your drop shadow. We don't use other than normal. It is better because we have to convert our layers to CSS. Then we have Global Light, which is basically the Photoshop Global Light, where the light is coming at the top 90 degree. So if I change it over here and I have another layer, all the shadows will be adjusted to this global light. So if you want to create a custom button, turn this off, and you can move the shadow where you want. I'm going to highlight the shadow so you can see how it is moving around. Now, if I change the distance of the shadow, you can see how far it is going from the top of this layer because the light is over here. So if I change the light direction, the shadow will also change. Also, this is spread, which is basically how much it is going to spread. So our size is 25 and spread is 100 percent. So it's an opaque shadow. So we don't normally use this spread option. We adjust only the distance, size, and the angle. Most importantly, this opacity to create different shadow effects. So I'm going to change the size. So you can see now it is a bit more blurred. I'm going to move it up and opacity a bit more, and I'm going to change the angle to 85. Now, you can see how only this drop shadow effect creates a lot of depth in your buttons and different graphic design elements. Now, one more thing in Photoshop CC 2015, you can apply more drop shadows like I have applied another one right now. I'm going to make it a bit more darker. I'm going to change the angle to 90. Something like this. Now you can see I have multiple shadows and they're creating a very distinct effect, and light is coming from the top. Okay, this is all about drop shadows and I guess you have learned something new. Let's move on to the next lecture. 33. Using Inner Shadow Layer Effect: Hello guys. In this lesson, I'm going to tell you something about inner shadows. Let's see how these inner shadows work with our buttons at different UI elements. Now, I'm going to start from the last lecture. I am going to apply a new effect which is inner shadow. Now, basically it's inner shadow, but we use it in different ways. Now you can see here we have blend mode set to screen, but you can use normal if you want to. You can change the opacity. You can see I have selected the white color. So it is basically coming inside from 145 angle. I'm going to change the angle to 90, which is mostly what we use in our UI design, almost 99.99 percent. So let me reduce the opacity and the size to 2 pixels. Now you can see it has a bit edgy effect, it is a bit elevated over here. So this is how we use our inner shadow. I have to reduce the size to zero too, because the size is basically the blur, you can see the blur in our inner shadow. So I am basically using 1 pixel or less than that, and I am using white color. This is how I have applied my inner shadow. All other things are basically the same as I told you about in my previous lecture, which is drop shadow. So opacity angle and everything else is the same. The differences that inner shadow it is going to come from inside the shape. It is not going to drop from the shape. Okay, this is all about inner shadow. Let's move on to the next lecture. 34. Using Stroke Layer Effect: Hello everyone. Now I am going to discuss right now about the stroke layer effect. In our UI design we commonly use inner shadow, drop shadow, and stroke effects in combination to create different buttons and different UI elements of effects. Now we are going to add another effect which is basically stroke. So stroke have actually three different kinds, outside and inside and then we have in the center. Normally we use outside and some time inside. So you can use whatever effect you want. You can select a color which is a bit lighter or darker than your original button color. So right now I'm going to select a bit darker color over here. I have reduced the brightness of the color basically. First it was like 65 percent, and now I have reduced it to almost 60 percent. If you reduce it to 55 percent, it will be a much clearer representation of the stroke effect. So if I increase the size, you can see the size is increasing inside the button. These are different blending modes and we are not going to use most of them. So we might be using this opacity, but I guess you should not mess with this blend mode and opacity. Now, some people use this gradient over in this stroke effect. I don't recommend it because I guess we cannot represent this gradient effect in our CSS or HTML coding. So it will be very difficult for the coders to develop purely CSS or coded button like that. So avoid using gradients just use color and set it to two or four pixels and I guess it will be very nice effect if I move inner shadow a bit more inside, like that. Now you can see how it is turning out. That's all about stroke of effects, now I'll move on to the next lecture. 35. Re-using Layer Styles: Let's talk about reusing layer styles. So I have applied some layer styles to this box. So if I want to reuse them or apply to any other layer or in any other projects, I might still need to produce this shadow effect again and again. I need to save this layer style. So how I can do that? Go to this layer panel, select the layer I have applied the layer styles. Double-click on this effects. Now, you might see there is a button over here, "New Style". So if you click on it, I can name it like Soft Shadow, and I can just click on it "OK", and it is added to my styles. So how I can access it, I should go to the Styles. In the last one, if you hover over it, you can see this is the one soft shadow I just saved. So if I want to apply it to any other layer, I'm going to just draw any other layer just to show you how to apply it to this one. I'm going to click on this and you can see how this soft shadow has been applied to this layer. So this is very important if you want to save your styles which you are going to use again and again like these shadows and inner shadows. So use this. One tip, keep in mind that always use black and white in your color styles to save. So they can be applied to any layer. If you use colors like blue, gray or orange or something like that, you cannot apply to any layer. Now, you have learned to reuse the layer styles, let's move on to the next lecture. 36. What are Gradients?: First let's talk about some gradients. So what our gradients? Gradients are simply the blend of two colors or maybe more than two colors. So here I have opened a website just to explain you the concept. Now we have blue color on the left side and another darkish gray color on the right side. So let me blend them. Now this is the gradient. I have created a gradient using these two colors. This is basically gradient stop where how much use of the left or the right side color. So if I drag it over here, you can see the right grayish color is dominant and getting dominant. If I try to drag it over here, then the left lighter color of blue is a bit dominant. So you can try out this website. I will include the link in resources. So basically, you can try out different color schemes like these. One sharp and one dull color, I am mixing right now. Don't mix two opposite colors or two very different colors. Like I have mixed this greens with each other. You can go from blue to grays, and even like this dull, and one is orange color. You can see it's very odd combination. So if I mix like the two colors, they will make a very pretty good combination like this one. So I have seen this usage on a lot of websites. So let's discuss in the next lesson, where a lot of UI and professional web designers and UI designers use this blending or gradients in their designs. 37. Use of Gradients in UI Design: Now, let's look at some of the examples of using gradients in web design and learning page designs. So this is basically Stripe website and you can see they have blended these two orange and purple colors and it looks awesome. So this is one usage and let me show you some more examples. Now, here we have this button "Get started for free." Now the designer has used this gradient from this sharp blue color to a bit darker blue color. So it looks very unique. I have a few more examples like this, QuickBooks Online website. So if you click on this overall, this "Try It Free", there is also a usage of gradient over here in these buttons. Then this button also have gradient. Even this white button have gradient from white to gray. So this is how designers use gradients and they look very nice in designs and they attract user eyes. So here we have another very unique usage of gradients. You can see on this Sprout Video website, they have used gradients in a very creative manner and it really gets into the design. So this is one usage on the buttons. Then you can see in this content area, they have used this gradient from this direction, from this angle. So we have some sharp color over here and some a bit dull color over here. This is the same technique I told you in the previous lesson. That if you want to mix two colors, don't go in a lot of variety of colors, just mix the colors that are already closer to each other. In this website, they have used two greens. One is a bit yellowish green, and one is a bit dull green. So you can see how dramatic and how beautiful affect it can create. So for starters, just keep in mind that don't mix a lot of colors or go wild with your gradients. Just keep in mind simple tip that you need to use only the colors that are correlated and very close to each other. We have seen some examples like this one. Now, what is the trick over here? They have used very sharp two colors, very sharp orange over here and very sharp purple over here. So it's not completely orange, it is basically reddish orange. So they are closer to each other. But for starters, I think you can use these techniques like this one. They have used both blue colors over here, and in these, they have used both shades of orange and then darker orange, sharp orange and darker orange, sharp purplish blue and then light purplish blue, dull purplish blue. So this is basically just a starter tip. So keep this in mind, and in the next lesson, let's create, dig into the methods of creating gradients in Photoshop. So let's move on to the next lesson. 38. 3 ways to create Gradients in Photoshop: In Photoshop, there are many ways you can create gradients. But in UI design, we will only use the methods that we can easily control and manipulate. Let's see how many ways there are. I am going to discuss the first method which is selecting this "Gradient tool", I will not go into the options of the gradient right now, so make sure you have selected some gradient from here. I have only one background layer over here, I have opened just a new document. Just drag it from left to right or any direction, and it will create a gradient. I am going to press "Control Z". If I drag from this direction like that, you can see that gradient is coming in this direction. This is basically controlling the angle of gradient. This was the first method to create gradients, which was using this Gradient tool from this toolbar menu. So this one is difficult to control, we are not going to use it for gradients in our UI design, so let's talk about other two methods. Let me just create some layers over here, and under Rectangle tool I'm going to create a layer, rounded rectangle over here, change it's color to this blue one. Okay, now, the second method which is most popular and we are going to use it a lot, is using this Layer Style. So go to Layer Styles, and then we're going to use this Gradient Overlay effect. You can see as soon as I selected this, I have already selected a gradient over here, you can change it if you want to. This is how we apply Layer Style gradients, and what is the benefit? Why we're going to switch to this method or another? The problem is this control effect. So we can easily control it, turn it off over here, and turn it on over here. We can double-click and easily change it to any other gradient. This is basically the ease of control. In UI design, if we have Layer Styles or anything that are easy to control, then go with them. This is another method. Now the third method is creating an adjustment gradient layer, so for that we will go to this icon over here in the layers panel, small icon. You can see "Create new field adjustment layer" click on it, and then we're going to select this gradient from here, and you can see the gradient which is selected right now is from this transparent to white. Let me select any other one like this one. Now you can see this gradient fill, just filled the whole canvas with this color. Now in our UI design, mostly we don't need such things, so we're going to clip this gradient into this pattern R shape. For that, we are going to click "Add" and click between these two layers, and now you can see this gradient fill has been applied. Now gradient fill is applied to this layer, so this is another way we can easily click over here, double-click on this "Gradient style" icon over here, and we can easily change it from this. They are very easy to control, so that is why we might be using this Gradient Fill technique and this Gradient effect Overlay. Just keep in mind that these two methods will be used again and again. But I just thought that you should know all the methods of creating gradients in Photoshop. That's all about creating gradients in Photoshop. In the next lecture, we will be looking at the options and the different options of Gradient Editor and this Gradient Overlay Layer style. Just keep in touch and let's move on to the next lecture. 39. Using Gradient Editor in Photoshop: In this lecture, we're going to discuss this Gradient Editor. If you want to change the colors and create a new gradient, you can double-click on it, and you can see here we have Gradient Overlay window. We have some blue presets over here, but right now we are going to create a custom new gradient over here. Now let me just discuss few of the options presented over here. We will be using most of the time solid gradient and smoothness will be in the 100 percent, so don't mess with these settings. Now these are basically color stops. You can see this color is on the location is zero percent, which is at the top left and the most left side. If I drag it over here, you can see its location is changing. The bottom two options are basically the location, where the colors will be located. This can change the direction of our gradient. These two are stops, if I click on it, you can see the location is set to 100 percent for this color. If I try to move it over here, this is the same effect I mentioned in my first lecture of gradients, where I was changing the span of gradients. If I move it over here, you can see the blue color is sharp. Blue color is very less dominant than this one is dominant. I'm going to reverse it back. You can see a very small rectangle shape arrow over here. This is basically specifying where the span of this color is. If I try to move it over here, you can see the span of dark blue color is decreasing and you can see the shift of this color is increasing into the gradient. You can also change the span location too. You can set it to 50 percent right now. You can change it to 70 percent or something like that. This icon is basically showing the span, how much this color will be, and for how long this color will be in the gradient. These are all the things I have discussed over here, if you want to add more colors, you can click on this and click once over here. You can see I have added the same color over here. I can change its color like that, maybe some grayish purple color or maybe some more light color like that. Just to explain the gradients, we can add as many colors as we like over here. You can see this color has the span like that. If I try to drag it over here and you can see now how this color is basically adding up into this gradient. Now if we have mastered the lower side of this gradient bar, let's talk about the top bar. Now we have some stops type icons over here like this one and this one. You can add this over here too. What is basically the top, these bars are doing over here. These are basically the opacity, how opaque your gradient will be. If sometimes we might need to produce a gradient which is transparent at one side and opaque at one side. If I want to make this white color transparent, I'm going to reduce its opacity to zero percent. Now you can see these check marks are appearing, which are basically the transparency. These top bars basically control the transparency of the colors below. If I want to change the opacity of this one, I can use it to 50 percent. You can see the colors and the transparency has changed. Also you can see the icons over here, they have changed too. Light gray means its opaque, 50 percent or 40 percent opaque not totally opaque. It's a bit transparent. White means it is totally transparent, black means it is totally opaque. These are all the options over here. Now to save your gradient, if I want to save it, I can name it over here transparent to blue, and I can click on this New over here, and you can see I have saved this gradient over here. This is how we create gradients, but for starters, I'm not going to use a lot of colors. I'm going to delete this color and we will be using some more dark blue color over here and setting the opacity to 100 percent. Remove this transparency stop, Delete. Now we can maybe change its saturation a bit, make it a more sharp blue color. I'm going to change its span too and then I'm going to create this color to blue button. Now create it like that, Save, New. If you want to save this whole gradient set, you can click on this Save button, and you can use this gradient save it. You can see I name it like maybe flat UI gradients, something like that. If you create a lot of gradients and you just want to save them, you can save them like that. If you want to load them later on, you can load them from here, so this means that you don't lose your gradients. This is all about Gradient Editor and creating new gradients and how to use them. If you have any questions or anything in your mind, ask me in the discussion. I thought this gradient portion is very, very important in UI design because it has a great usage in buttons, backgrounds, even the hero area. That's all about gradients. I will be uploading next few exercises of using gradients and few challenges. Just stay tuned and see you in the next lecture. 40. Using Gradient Overlay Layer Style: I'm going to first discuss this gradient overlay effect options. Double-click over here on this effect and this layer style window will pop up. First of all, we have this blending mode which is set to normal right now. What it's basically doing is that only we can see the gradients but we cannot see the background color of this layer. I set the shape background color to this dark where you can see it in the thumbnail which is not shown right now. If I try to blend it like multiply it with the background, you can see now the blue colors are multiplied or added to that grayish background. In this gradient overlay blend mode, we might not be using all of them, we will be using only this maybe darken or this multiply, color burn and maybe screen, and maybe overlay. These are basically only few effects we will be using most of the time. Don't worry about all of them, just try to switch to anyone you like or keep on switching until you get the best effect. Don't worry about learning all these blending effects, these are basically just mixing of colors. How the gradient colors are going to be mixed with the background color. Are they going to burn like that? You can change the opacity over here, you can see. Let me just switch it to normal light now. For Web design and CSS, I don't recommend using this blend mode, so just keep it to normal. This is another tip. Now, for this opacity, you can change it if you like but make sure it is all set to 100. We don't need the background color of this layer. Now, I'm going to only discuss the options here. I will discuss the gradient editor afterwards. If I double-click over here, you can see gradient editor is opened up. Right now I'm going to discuss only these options of this layer style gradient overlay. Now, this is basically the direction, I'm going to reverse the direction. If we have this gradient from, you can see dark blue to a sharp blue color, you can reverse it like that if you want to reverse the direction. Then this is always checked so don't mess this with the option align with layer, this is basically how the alignment of this gradient is going to be. It is going to align with the layer. Now, these are basically styles, how the gradient will work. Is it going to be in the linear mode from, you can see in one line from top to bottom. Right now we have this angle of 90. Right now, this gradient is working in this direction in a linear mode in align. If we switch to radial mode, you can see how this has changed and now it's in the radial mode like this in a circular mode. We might not be using these angles and this reflected or maybe diamond, but I guess we will be mostly using linear and radial. Just keep in mind that just don't mess with all of them. We will be using only linear and radial because in CSS and Web design, we might not be able to produce these effects I guess. These are easier to produce linear and radial effects. We might be able to generate this one, but it's up to you if you want to use it. Next is the angle. If I change the angle, you can see how the gradients are going to change. It is just the direction of the gradient coming from left to right or the angle I specify. Just keep in mind, this is only the angle. Then the scale is basically how wide and you can see how narrow the colors will be. You can see as I'm switching to less in the scale section and gradients are getting narrower. If I go to more than 100 percent, you can see gradients are getting thicker and they have more span of colors. The span is increasing. This is all the options about layer styles of gradient overlay. In the next lecture, we will discuss this gradient editor. Let's move on to the next lecture. 41. What are Patterns and how we use them in Web Design?: In this lesson, we're going to see how patterns are basically used in UI and web design. So let's start with what are patterns. So patterns are basically repeated backgrounds. You can see over here, these are simple images that are repeated again and again. This is a website, subtlepatterns.com. You can visit this website and see a lot of patterns, you can download them too. So these are some of the very good patterns. We can use them in our UI design and web design. Let's see some of the examples online to see how patterns are being used by web designers. So let me show you some of the examples. We already saw this website, sproutvideo.com. But if you look at the left and right side portion over here, you can see there are some polygons styled pattern applied over here on the background. Then we have, if we move to this creative market, they have shown this bundle, but in the background, you can see they are using a pattern for the autumn season or whatever this is. Then we have, let me show you one more example. You can look at it. It's just seamless pattern of a wood. So it is not a very big image. It is just a small image, may be 100 by 100 pixel wide and 100 pixel tall. So they have applied it to create this wooden background. So you can see how these patterns really count in your web design and UI design. The problem is, always use them wisely, don't use a very big file pattern like 500 by 500 pixel or maybe sometimes I have seen people using 1,000 pixels by 1,000 pixel images for their patterns. So it is not advisable. Always use patterns which are seamless and have very small file size. So that's it about the patterns. In the next lesson, we will be looking at how to download and install new patterns in Photoshop to be used in your UI design. So let's move on to the next lecture. 42. 2 Methods of applying patterns: In this lesson, I'm going to discuss how we can apply patterns in Photoshop. Actually, there are two ways to apply Photoshop patterns. Let's discuss them one by one. I have already drawn this rectangle over here. First method is to apply layer styles. Go to Layer, Layer Styles and Pattern Overlay. As soon as you see this window, you will see that there are patterns already applied to your design. First of all, you need to see some of the options. You already know these blending options and opacity control. Let's discuss this pattern library. This is the libraries right now loaded over here. I have a lot of custom patterns loaded over here. So if I try to apply them like that, they are applied to my background-color, whatever it is like that. Now, the problem is, if I want to show my background color and the pattern should be overlayed on it. You can do that with controlling this opacity control. Move this around. You can see now our pattern is not opaque or transparent. So if you want very subtle effect, you can use the opacity control to use it. If you want to just use this one and switch to some other effect like multiply, you can see how this really affects the background color. It is just adding up in the background. These are different options you can use over here, you can use normal multiply or even colored burn, something like that. Even sometimes we just choose color or hue. Mostly we use normal, multiply or maybe overlay. These are the three effects we use most of the time. So keep in mind that you use this effect with these blending options, overlay, normal, multiply. That's it about layer styles. Now let's discuss the second method. It is very easy to control, you can just turn off and turn on like that. Now, coming to the next method, we are going to delete this effect over here. Now, the second method is to apply patterns using your adjustment layers. There are the adjustment layers, they are just in the bottom corner of your Layers panel. Click on this icon and go to this pattern. Click on it, and you can see how this pattern fill dialogue box has appeared. Here we have very less options like opacity and other things. We cannot control them over here. We're just going to select any of the pattern, like maybe this one, polka dots. I'm going to press ''Okay''. Now the pattern is, whenever you use an adjustment layer, it is applied to the whole canvas. So just keep in mind that you need to clip it if you want the effect to be on a specific area. We already had this rectangle over here at the right side in our Layers panel. So we are going to clip this pattern inside this layer like that, and that's it. If you want to control its opacity, you can control it from here, the Layers panel opacity like that. If you want to use a blend mode, you can use these layer blend modes over here, like this. Now we have full range. We can easily expand this layer and you can see the pattern is expanding with it. These are basically the two ways to apply patterns in Photoshop. Just a recap. First one is to use Layer Styles in the Layer and Pattern Overlay. The second one is that you are going to use an adjustment layer. So both methods are good to use. You can use any of them. That's it about how to apply patterns in Photoshop using two different methods. So let's move on to the next lecture. 43. Creating Patterns from an image file: Let's discuss how we can create patterns from images or how we can use patterns or download them from Internet and use them in Photoshop. So let's start this tutorial. First of all, I'm going to show you this site subtlepatterns.com. It is very popular one. They have a plugin which is premium plugin, you need to buy it. So now what we're going to do is first we are going to download a pattern from here, and let's see how we are going to create a pattern from an image file. So just download this pattern over here. Okay, pink_rice, it's downloaded, and let me get the file. Here's the file, I'm going to extract it. So let's see what's inside. We have one PNG image file inside this. Let's just drag it in our Photoshop, like that. Now you can see it's just a PNG file. We're going to create our pattern in Photoshop from this PNG file. So we are going to press Control A to select the whole Canvas, go to Edit and define pattern. So I'm going to rename it to pink_rice, press Okay, and that's it. Our pattern has been created. Let's apply it on something. I'm going to use Eclipse tool like there. Now I'm going to apply it with our Layer Style method, okay, where is it? Pattern Overlay. Now, go to this pattern library, move to the end and you will see the latest one or the last one you created at the end of this pattern liability. So whenever you create a pattern from an image file, it will be at the bottom and the last one. So click over here and you can see I have already applied it, but we are going to use normal mode. So you can see how this is working. Now we have applied our pattern over here and that's it. This is the way, how to create your pattern from an image file. So let's move on to the next lecture where we will see how to install new patterns with.pat files for Photoshop. 44. Installing and using .pat files: Now, let's discuss the second way of using patterns in Photoshop and installing them. We are going to use.PAT file in it in this lecture. So basically.PAT file is the collection of different patterns for Photoshop. Now, we are going to use this premiumpixels.com/freebies, which is a patterns, very nice patterns. Just download them from here. I am clicking on the "Download" and let's download these. These will be just pattern files and we are going to install them first. So we are going to move to the Photoshop installation folder first. We have already downloaded it. Let's move on to the Photoshop installation folder. I have opened up a lot of files over here. Now, right-click on the Photoshop and go to Properties and Open File Location, and we are going to use this Presets folder. Go to this Presets folder and here you will find me to find the Patterns folder like that. For Mac users, I guess the path is from application and Adobe Photoshop and Presets. I will post the actual path in the comments or in the discussion, or maybe in some other lecture, but right now this is for PC. You can Google it that what is the path of your Photoshop installation folder on Mac. Now, click on this Patterns folder and you will see all the patterns over here. These are the pre-made or default patterns from Photoshop. Now, if I want to install a pattern over here, I just need to copy and paste the pattern file over here. That's not a very difficult thing, so let's do that. We are going to use the same subtle patterns over here, I'm going to extract them, so we are going to use this Patterns file. Copy and we are going to paste it in our Patterns folder over here, Continue. Now, for this to happen, you have to shut down Photoshop ones and close it and run it again. Now, just let it start a bit. It's take some time to get loaded in my RAM. So it will take some time. Come on. Yeah, I'm going to use the newly installed Patterns file. So we are going to draw something over here like that, and we are going to apply a pattern over here, Pattern Overlay. Now we are already seeing our old pattern library, so to access the new one, click on this, and click on any of the pattern that were over here. This is the pattern we just installed, click on it. It will say, ''Replace current pattern with a pattern from patterns.'' So if you want to replace all your library, you can click Okay, or you can click Append. So if you click on Append, it will be added at the last, like that. You can see over here. For clarity, let's just replace the patterns so we don't have anything else. I don't know what is happening, maybe it was subtle patterns. You can click on any of the pattern over here. These were the patterns, I was clicking on the wrong filename, so just click on them. You can see these are different patterns, very nice subtle patterns, just like paper texture. So I am going to expand it so you can view the texture easily. This is basically the method we use to download and install.PAT Photoshop pattern files. They are very easy to install if you want to use the same pattern for Internet or maybe, sorry, for development or website development, you can use these patterns over here. These are for using in web development because the PNG file, you can easily repeat them, and for Photoshop you can easily apply this in the Photoshop. That's it about applying and using Photoshop pattern files. Let's move on to the next lecture. 45. How Light and Shadow works in UI Design: Hello everyone. In this lecture, I am going to show you basically the secret behind or the concept behind all the UI designs. You can create any kind of UI element with this concept, or at least 80 percent of them. So what is this concept? It is the concept of light and shadow. Now, I have seen almost all UI designs where the light is always falling from this angle which is 90 degrees. Assume first just for a second, that the light is coming from the top, like this. When the light is at the top, the shadow should be at the bottom. Light is here and shadow is here. If we move the light somewhere else, like that. Let me show you an example. This one. Now you can see the light is on the left side and the shadow is on the right side. So shadow moves with the light as we move the light. This is the basic concept. Now when something is elevated in the UI design or have some beaver effect or something like that. They have light at the top and you can see light, it will be falling on this area. Basically what we designers do, we create light over here and a bit darkness over here, and then shadow over here and voila. Our elevated button is here. Google material design, there's a lot of uses of this concept, the shadows. Coming to this best effect, now what is happening over here? If we press a button or press something, the shadow will be on the inner side. So always keep in mind that we need shadows over here to make it pressed and one more thing, there is one very little detail, you just don't need to miss this out. Let me zoom it for you, now, if you look closely over here, we have shadows over here and if something is pressed, the light will fall on this area. Because this area is pressed inside, so it will skip all the light. Light will fall from here and down here. If I click this layer, you can see I have used a very light drop shadow. If I increase it's size, you can see over here now. You can see the drop shadow over here, it's a white shadow, which is basically a white shine, but I will call it a shadow right now. Let me change the background color for you so you can see it clearly. Now you can see it clearly. There is a white shadow over here or shine over here. This is basically this light falling over here on this area to make it shine. This is the two basic things we need in everything that we need to show as a pressed object or pressed inside. Let me show you another example, here I have used the same concept on a typography or you can see on a text, you can see how it is pressed over here. This is the pressed effect, it was very popular, UI designers still use it in all the buttons. Almost all these have these two sticks, one is elevated and one is pressed. Just keep in mind, very basic concept, that UI design, all of the UI elements they revolve around this light and shadow effect. 46. Examples of Light and Shadow usage: In this lesson, I'm going to show you some of the examples of dribblers who are using light and shadow the best. This is one example you can see over here. This button is elevated and they have used light over here and shadow over here, then they have shadow over here and a bit of light over here. This is for the pressed effect and this is for the elevated effect. Now, even in this elevation effect, they have used the pressed effect for this tick mark. Still this is again pressed and then pressed inside the pressed one. So this is very unique effect, but it looks very good. Now, one more example. This is also another example. This is by just the light and dark they have used two very great UIs and they have used the light and shadow at the pressed level. You can see light over here and shadow over here. Then you can see also light over here, shadow over here. Then in the pressed effect, you can see light over here at the bottom. You can see the color of this button varies from the last two. So the color of this button is darker than the left and the right buttons. Now coming to another example. Now this is called basically the dark UI themes, I don't like them much. You can see over here the same effect of light and shadow. Now, light is over here. You can see very dull light over here. Then we have shadow, which is a bit diffused shadow over here. Then we have this pressed button and guess what, the pressed button is darker. That is the main concept. So you can see that these buttons have a bit lighter shade of gray and this button has darker shade of gray. So here we have darker gray and lighter gray. This is again the concept of light and shadow. In the next few lectures, I will discuss how to choose typography colors, and few other tips for beginners. So stay tuned and see you in the next lecture. 47. Color Schemes for Beginners: Let's talk about color schemes. Color schemes are very essential part of UI design, whether you are designing a website or an app or anything else. So how we are going to design these color schemes or how to create these for beginners, I will explain it in a simple manner. So first of all, the rule of thumb. Never use more than two colors other than these gray shades. So use maximum two colors for beginners. Otherwise, it will be difficult to control or to manipulate these colors. Just stick to two colors and use as many shades of black or gray over here. You can see in the first color scheme, I have used just two flat colors, green and orange. Then I have used two shades of gray. In the second one, I have used again two main colors for my color scheme. Then all three are basically the gray shades. This is basically very popular. The gray shades are becoming very popular. Most of the UIs, they are dominant with these gray shades. To get most of the attention of the user towards your UI and if you have to design different portions, you need to use these two main colors. These colors will be mostly used for text. I have seen it mostly in most of the UIs, even on Dribbble they use most of the gray shades for texts. Don't use pitch black color, it will ruin your UI design. So just keep in mind, get some gray shades and get two colors and start designing your UI. 48. Using Hue Saturation and Brightness for Color Schemes: There is one other method to get the colors, which is from your logos. If you already have logo, you can see this color scheme, I got it from this logo over here and how I did that, I just click on the layer and sample the color from here. The color picker, sample it from here and then I sample this color from here. How I generated this red color, it's very easy method. Just click on any color you need, like this one and just move this hue slider towards the top, like I have to this red color. This is staying in the same saturation and brightness and the hue is different. This is very easy method. Sometimes I used to apply it like that. You can see these three colors go very well together because they share same brightness and saturation of color. This is very easy method. I use it most of the time. If you want to try it, you can try it. This is how I got this third color. I don't recommend using too many colors but sometimes in dashboard design, you need a lot of colors, maybe more than five colors. This is how you get more colors. 49. Online Tools to create Color Schemes: Now, let me show you quickly how many tools or which tools are used for color scheme generation in UI design. First tool is the 0to255.com. It is very handy tool. It generates different shades of any color. For example, if I pick this gray color and copy its hexadecimal value, I need to paste its hexadecimal value in this Pick Color, paste over here, and press this Pick Color, and you can see it has generated all the different shades of this color, from white to black. It's a very handy tool to generate different shades quickly. You can use them from here. If you want to choose any other color, you can pick another color, and put it over here, and generate its shades too. This is one tool. Then if you want to use flat colors, you can go to these two websites, flatUIpicker.com and flatUIcolor. In this website, choose this hexidecimal value over here, maybe this one, and just click on any of the colors. This is a very good website, but we have very limited colors. In this website, we have a lot of colors, like pink. If you click on pink, you will see different shades of pink as our flat UI design colors. It has a lot of varieties. If you go to gray, you can see there are a lot of gray shades. It's a very good tool. Now, if you want to browse already-made color schemes then go to this website, color.adobe.com, and start from here. If you can search from blue and orange, I can go to specific colors like that. This is very handy when I know that I need to chose from these two colors. You can get all the different shades and color scheme for these two colors. This is one very basic tool I use. One similar tool to this Adobe Color is this coolors.co, and go to this browser, and start browsing these. But the problem here is the search. Here, we have a very good search option, and I think you should stick to this Adobe Color CC tool. It is very good. Then the third part, if you want to quickly generate color schemes on your own, then go to this paletton.com or use this Adobe CC Color Create, click on it and choose some base color over here. If I select this color as my base color, this green color, double-click on it, copy its hexadecimal value, and paste it over here in Adobe color scheme generator. You can see how it has generated color scheme. Go to this color rule option bar and click on Analogous, you can see it is creating different color schemes. I don't want to go into different technicalities, but you can get as many colors as you want from here; monochromatic triad, complimentary. If you like any color, just copy its hexadecimal value and use it in Photoshop. Go to this, click over here, paste the color scheme like that, and go to the swatches, click on the new swatch, and this is how I'm going to add a green sharp color to my swatches. You can see now it is added to the last color. First, place your color over here and then add it from here. This is how you create color schemes and bring them in Photoshop. Another good tool to create color scheme is this one, Paletton, and it works in the same way as Photoshop Creation tool, Adobe color scheme. You need to paste your base color over here. It's a weird box. It just lets me select any color over here. I have to press backspace. If I select this color, this red one, copy its code and paste it over here, and press "OK". You can see it has generated different shades over here. This is tetrad. Then we have few others; three colors, two colors. You can select different color schemes from here. These are few tools I use a lot of time. Sometimes I keep on collecting different color schemes and use colors from different color schemes which get together well. But for beginners and starters, I don't recommend this method. Use few colors, and get good shades of gray from this website, and start designing some good UIs. 50. Selecting Fonts and Typography: In this lecture, we are going to talk about font pairing, and how to choose topography and fonts for your web or mobile app design. Font pairing or finding the perfect topography is basically a very difficult skill to learn. It take years to master the skill. For starters, or even for me, I use these websites to pair points. Let me show you some of the websites and online resources I use. First one is this typegenius.com. If you want to choose any font you can select from here. You can type many font like, if I select this Open Sans, I select this one, and then click on "View Matches". You can see here a few matches with the Open Sans, Futura PT Condensed. This is the link. This is a Typekit font. Then we have this Open Sans and Minion Pro. This one is also a Typekit font. Then we have this Open Sans and Museo. Museo is a very great font, and it can be purchased, or even you can use it from Typekit. Then we have this Open Sans and Source Sans Pro. These are both Google fonts. This is one website, then we should move on to this one Font Pair. It is also very nice website, and we can find a lot of font combinations from here. You can see like this, Sans-Serif and Serif fonts. You can see here we have Cabin for heading and Old Standard TT for body text. You can see there are a lot of different pairing. You can see these are both Google fonts Lato and Merriweather and Montseratt and Cardo. Here you can see Cursive and Serif. Cursive fonts are basically like this, some of bit stylish fonts like these, and Serif is basically the font with a little bit of ending or lines at the end of each letter. These are basically Serif fonts and Sans-Serif means without ending. If we go to this Sans-Serif you can see there are plain fonts like these one. These are Sans-Serif fonts. You can use these guides to pair the fonts. Then we can go to this typ.io/libraries/google, and you can see here a lot of great combinations and inspiration for Google. font combination for pairing. You can see here it is used, Raleway. Then in the next example it's Proxima Nova and Libre Baskerville and whatever. It's a Google font and it's a very popular font from Typekit. Then we have few other combinations like this. You can see them and get inspiration and even you can use these combinations in your designs. Then moving on to the next tool. It's a very handy tool, Web Font Blender. Now, what its purpose is you can select any of these headings, lines or anything, and you can choose font for it. Like I can use Lato over here. I'm going to use Lato 900 for this one. Then I'm going to use Lato regular, maybe for this one and 300, and I'm going to use Open Sans for this area. Open Sans regular. Now you can see this is very good tool. It can also give you a code for this blend, or options you have set up, and also the sizes in ems and other stuff, which is purely towards the programming side. Now, you can see here we have combined Lato and Open Sans, and they are looking very nice together. This is the combination you can use, one headline, then subtitle, and then the paragraph. Mostly, you need only three styles most of the time. Even you can combine only two of these like, heading and the paragraph text. Now, this is also a very handy tool which is typewonder.com. What it does is that you give the URL of any website, like I'm going to give my own website, learnuxid.com, and click on "Go". Then you can select any font you want to apply on this site, Live site. I want my website to be in this Arvo. I'm going to use it. It is going to show my website preview using this font. Look at it. Look and see, here it is and it is not looking very good. I can change the font if I want to, like this one. There are a lot of other fonts if you go below this line. I'm going to choose this Vollkorn, and I'm going to use it. Let's see what it does. I think it has applied already. We have another few articles, and a few helping tools and different combinations which a lot of designers have already made, so you can find them. I will include the links in the resources for all these tools and articles I have shown. These are few Google combinations. If you hover over them, you can see the link to that font style. This is basically Raleway. If you look at the left bottom corner of my screen, you can see the link is coming up. This is also two fonts, which is basically Playfair plus display Google font. This is also another Google font, Quando. This is another third form. This is Signika. It is very difficult to combine three different fonts, even for people who are using, and trying to pair typographic even from years. I would say let's stick to two. If you can find a very good combination, that is suitable to your project, you can find them from here, and you can use them. You can see here we have another Sans Source Pro. This is all Sans Source Pro single font, and with a large family. These are all the helping tools you can get from online. There's 100daysoffonts.com and it is also showing a lot of great typography experiments. Most of them are Google fonts. You can see Lora and Roboto, and they are getting very well together. These are combinations from very professional topography masters. I think it's a very, very unique skill and very difficult to learn skill. It takes years to master this typography combination skill. Then we have another article which I like a lot. This is The Ultimate Guide Font Peering from canva.com. I will include all of these links, in the resources. You can download the PDF and see these articles, and these tools. You can see here, it has some introduction to topography like Cap-Height, X-Height, Terminal, Baseline. Then they have different types of typography classes like Script Serif, Sans Serif, Slab Serif, Alignment, Hierarchy. Then it had a lot of different great combinations. You can see even it is showing the sizes over here, like this, 57 PT Uppercase, 27 PT Italic. You can use all these different combinations and keep on reading this article. This is very great article for beginners. That's it about font pairing. Hope to see you guys getting better in designing and applying these typographic skills to your designs. 51. Using Grids in Web Design: Let's talk about grids and how we design according to grids. Grids are basically different columns of specific width and they have a bit of space in between them. You can see in this example I'm showing you over here, this is a web design, learning, design I did for some company. You can see how I have laid out everything. Let me show you how to use them and the basics of grid system. Normally in web design or when you are designing a mobile app, you really need to know grid system. It helps you align and lay out your page very nicely and it helps in design a lot. Let's see how we are going to design according to grids and how to create them. First step is, what are grids and what are the spaces at everything? These are columns, I am showing them in gray. They are 12 columns. Grids have different columns; 12, 16, 24. Most popular are 12 and 16. The spaces between each column, starting from here, note these two at the both corners. These are basically gutters. We call them gutters. These are spaces. We can have some separation between content and layout portions. Let me show you an example where I have used this. If you focus on this area, you can see that this video and this bullet points, they are separated by this gutter. You can see over here I have left this gutter. This portion is taking up one, two, three, four, five, six columns. This portion is also taking six columns. When a developer try to turn your design into some coding stuff, it is very very easy for them to follow this column or system in the development and coding process. They will use six columns for this one and six columns for this one. Most popular grids you might have known as Bootstrap and Foundation, all these. This is the basic of grid systems. If you look over here, this logo of this web page design, it is contained into one, two, three columns, but it is also touching this fourth column and it is inside the gutter of the fourth column. It will take four columns basically. We cannot say that it is just taking three columns. If some design element is taking up any gutter portion, it will include the next column in it. This is basically, if you look at this phone number, you can see it is taking two columns, but it is actually taking three columns. Because this icon is in the gutter of the next column, the coders will code it like they will take up three columns for this phone number. This is how we use grids. Now, these guides at the end, they are smaller. They are basically margins. They are normally used in programming. While designing, we are not going to be concerned about margins, but we are not going to get anything in these. We will be touching only the left and right side of columns or in between them. Now, if I hide this, you can see the actual design. Let me hide the guides. That was the actual design. Now you can see it can really look well with the help of guides. If I turn them on, you can see this portion. I have used one, two, three, four, five, six, seven, eight columns for this area, and one, two, three, four columns for this area. Here I have used this one column to get more space over here. This is a trick. Don't limit yourself if you see column over here, grid column and don't try to always use it. You might leave it here for more space. You can see there is a lot of space in between this content area and this content area. This is the basics of grid system. These are gutters between them. They are, I guess 30 pixels. You can see in the title over here, 15-pixel margin and gutter is 30 pixels. This is all about grids and how to use them. What are the basics of grids that we have columns, gutters, and margins in the grid at both sides, right and leftmost sides. Let's move on to the next lecture where I will show you how to create these grids in Photoshop and using some extensions. Let's move on to the next lecture. 52. Creating Grids in Photoshop: In the last lecture, we learned about grids and how to design using grids, like we lay out different things using different column sizes. In this lesson, I'm going to show you how to create different types and different grids using Photoshop, let me first use Photoshop default grid system. Now, what we are going to use is we are going to use a custom document size 1280, which is common in web design, and height is 1000, 72, don't color manage this document, press ''Okay''. Now here we have our art board. Now, we are going to use Photoshop's default guide system to create the grid. New Guide Layout, and we are going to use 12 columns with the gutters of 20 pixels, margins if we really need them, you can use margins over here or you can leave them out. So I'm going to use zero top margin, zero bottom margin, and left 10 and right 10, press ''Okay'', now your grid system is ready. If you want to really improve it, you can add different rectangles over here like that and copy them and duplicate them in the alt key because this can really help your design. In the end, you are going to clear out these guides, blue guides. What is going to remain in the end will be these green lines, these columns. Copy them like that one, I'm going to select all of them and merge them into one grid system, and here we have our grid system, you can now clear out your guides, "Clear Guides". This is how we design a grid, it is 12 columns and with 20 pixel gutter and 10 pixel margin. So now, if we try to design something, we will be designing like logo is going to be here. Let me just change the color, and for our example, navigation will be over here like that. So this is how we layout things, I'm using two columns for this logo and 10 columns for this navigation, and same goes for other elements of your web page. This is one way of creating grids, then we have this GuideGuide plugin, first it was free now I got it for just $5, and I really like it, it is very nice one. You can save the grids, different grids, and you can create them, and you can save their sets. So this is GuideGuide plugin extension, and I am going to use only just this 12 columns, these are number of columns you can see, they have different fields, margins, top, bottom, different margins, then columns, rows. I'm not going to go into details of grid system, I will get into detail in my next course, which is on very advanced web design and different techniques of web design. In that course, I will talk more deeply about grids and vertical and column are both grids. So right now we are going to stick with 12 columns, and as we are not going to use this width, we don't know the width, so we just use 12 columns. Let's make 16 columns this time. I'm going to get the space of 15 pixel over here, and I'm going to press "Add Guides". Now, we have 16 column grid system with these 15 pixel gap, and I guess we can save it, "Save Grid". We are going to save it 16 column, 15 pixel gutter, "Save Grid". You can see over here in my Saved guide you can see 16 column, 15 pixel gutter, so this is a very handy tool you can create and save a lot of different grid systems. Now, you can see I have saved a lot of different guides I have created, so you can create any type of guide and save it over here. There are few other uses of this plugin which are left border, midpoint, right border, clear guides, you can easily clear the guides with this button over here. Let me show you the other things we can do with this plugin, let me just select this rectangle and get the selection around it, then we can easily have guides: midpoint, left, right, top, midpoint, bottom, so this is another use of this plugin, and it is a very nice plugin, GuideGuide. These are two ways in which you can create guides and grids in Photoshop using Photoshop default, new guide, and new guide layout system, and you can also use this GuideGuide plugin. That was all about how to create guides and grids in Photoshop, and let's move on to some new awesome lectures. 53. Soft Shadow Button Creation Challange: Hello everyone. This is my first challenge for all my students. Basically you need to create a button similar to this one and I'm going to give you some hints, which is basically I used two drop shadows and one stroke. So one stroke effect and two drop shadows. Now, let the challenge begin. 54. Soft Shadow Button Design Solution: This is the solution for the challenge. I'm going to make this button again in front of you so you can learn how I used double drop shadows, and this stroke effect, and how I did this button. Let's get started. First we are going to use a shape tool rounded rectangle. We can use the radius to something like eight maybe, and just draw a rectangle over here, this is enough. Now, I'm going to choose a bit of grayish color or something closer to blueish-grey, like this one. Now, our base layer is completed. I have clipped something over here, so this is basically a rectangle. Get a rectangle over here, and we are going to create rectangle like this, and we are going to change its color to something. These are basically hue, saturation, and brightness. I normally use these to get different shades of colors, so I'm going to reduce the brightness which is the light part of our color, or maybe we can go from, yeah, like that. Now, I'm going to use clipping mask, alt and click between these two layers. Now we have our clipping mask like that. This button was in some other color, I'm creating this in a bit obsidian and medical. You might have seen this color in medicine and medical companies. Now, basically our base is complete, now I'm going to add few styles. This was our container, for container base we can name it. You can click over here the small Fx icon and add drop, starting drop shadows. This first drop shadow is basically opacity is 20 percent. If I try to increase the opacity you can see that our shadow is getting darker. So we will have something like this, 24 or maybe 20 is okay. Then the distance is 21 pixels. If I reduce the distance, you can see we have shadows on the top of this layer which we don't really want. We want only the shadow at the bottom. I will increase this distance till the time I get a feeling that it is looking good, 15 will be good. Now, I'm going to add another shadow, click over here. Basically what I did here is I added another shadow which was a bit closer to the layer, and a bit more opaque rather than transparent. I'm going to increase it's opacity a bit. We can increase the distance too. If I hide this layer you can just see what happens to our shadow. Now it's gone, and now it's turned on. This is basically the effect we are looking for. We are basically adding two drop shadows here. One is a bit darker and closer to the layer, one is a bit lighter and it has a good span around the shape layer, so it is basically a wide shadow. You can see the size is 25 and distance is 15 percent. This is how we have added this shadows, and let's reduce it's opacity to 25, reduce distance a bit more. Now it's a bit soft. Maybe five because we're getting shadow at the top, and we're going to reduce this. Let's make it 10. Now it's looking almost the same. You can also change this color over here for the shadow. We can have a light gray, you can see it just changes it's effect. If you don't want very hard shadow, you can use some other color like that. Basically, it is all about controlling this opacity, this distance and size. If we use this spread, you can see it is basically making this shadow a bit solid, so which we really don't want. We're not going to use the spread right now. Press ''Okay'' and now we're left with only one thing which is basically the stroke. I'm going to click on this effects and I'm going to add a stroke. I'm going to pick the color of the stroke from this color, or I can get a bit darker color by reducing the brightness to 85 percent, maybe 90 percent is good enough. 90 percent is looking good. Now I have created this soft shadow effect, now we are going to add text over here. Basically what I did is I used this font awesome plugin to get this icon over here. We can use any icon like maybe this ambulance icon will do the trick. Now you can see as soon as I added this in between these two layers, our clipping mask has gone, so that is why this is happening. I'm going to drag this icon over at the top, I'm going to create the clipping mask again. I'm going to "Control D" to transform, and I'm going to press ''Shift" and "Alt'' to increase the size, I'm holding Shift and Alt key. I guess this is good enough. I'm going to move it in the center. Now we can also choose a bit of a dull color because it is getting very sharp to our eyes, 50 percent like that. I just pick this color and I reduce the brightness to 50 percent or maybe more, we can go to 30 percent like that or maybe 25 percent. I guess 30 percent was good enough. Now the icon part is done, I'm going to now add some text over here. I'm using this open sans regular, regular font style, and I'm using this 36 pixel font size. You can press ''Shift'' so it is just inside this box. Press ''Shift" and click, and we're going to call an ambulance, ambulance is good. Basically our text is a bit longer so we can increase the size of this base container, "Control D" and I'm going to just drag this corner over here like that. I'm going to click this one, "Call an ambulance." Now here our basic problem is alignment. Let's use some guides to align these. I'm going to click ''Control and colon'' to bring out my guides, I'm going to delete this. I'm going to click on this one, ''Control'' click. I'm not using auto select, so I'm control clicking on any layer to select them. I'm going to control click on this, and I'm going to drag the layer like that. Now, we are going to basically put some guides to basically align our icon and our text in the middle of this button. I have put one over here, and one I need over here, like that. Let's use our plug-in over here which was QuickGuide, and I'm going to create the guides all around this button quickly. Now it is basically getting to the shadow also, so lets turn off this effects and create these. Now, these are good. I'm turning on this effects. We have these two portions over here, I'm going to press "M" or basically this marquee tool. I'm going to select this rectangular marquee tool, and we're going to make a selection between this. We have one selection and then we are going to click on this Call an ambulance. Now we have two basically objects to align. We are going to align this Call an ambulance according to this selection. I'm going to press "V" and click on this middle icon, now it is align, also this one. We are going to create another selection over here, and we're going to select this fa-ambulance icon and we are going to align it in the middle. I guess it's almost in the middle, I'm going to see. No, it's not in the middle. I guess we have one guideline which is not accurate, which is this one, I guess. Now we're good to go. I can select like this and press "V" and align in the middle. Sometimes even if you align it according to your mathematics, it doesn't look centralized to your eyes or human eyes. To make it visually centered, you can adjust it like, I guess I have to move it one pixel or maybe two pixel over here because this shape is basically different. Now I guess it looks in the middle, almost in the middle, and we have completed this soft shadow exercise. I hope you guys might have learned something new from here. Let's move on to the next lecture. 55. 3D Button Design Challange: Okay guys, here's another challenge for you. It is also a button but it's a 3D button. Try to create something similar to this. I'm going to give you some hints over here. This one is shadow and you can see a very light and subtle shadow over here. I have used two shadows. There's also a very thin layer of stroke inside stroke and this is just a line that you can use from here, Line Tool. Just a line with the color, which is a bit darker than this background. These are all the hints and I hope you can create something similar to this. I will post us a solution soon in another video. So you can easily create such kind of patterns. I hope you have enjoyed this challenge and let me see what you guys can achieve and show me your links and discussion and I guess that's it about this challenge. 56. Pressed Effect in Photoshop: Hello everyone. Today we are going to create this pressed effect. It is very important in all the UI designs to show there are pressed states of buttons, and it is used in a lot of places. You should always master this technique. Let's create this quickly. Open up a new file. I'm going to open this one, Alt, delete to fill the canvas with the foreground color. We're going to use this rounded rectangle tool to draw a rounded rectangle like that. I'm going to create a bit bigger one so you can see it easily. I have created this one. Let's change the background color. I'm using a solid color field for the background. Change it to something like this one. Now we have created this rounded rectangle. Let's create some guides around it like that. Now, draw another rounded rectangle from the middle to this section. This is going to be pressed. In the properties, uncheck this one, and we are going to remove the left to roundless for this one. We are good to go. Let's change this button to something like this, maybe a sharper blue look will look good. Now, our base structure is ready. Let's create some effects around it and put some layer styles on it. Let's first put some text over it. Text should be something. I'm going to show another technique. I am going, selecting the bold text and changing their size simultaneously like that. This is another technique, a lot of designers don't know it. We are going to align them again with our guides like that. Alt Control H, there is something strange. Now, here this one, sorry. Select this and we're going to again align it in the middle. That's it. Now we are going to change this pressed to white color just to make sure it looks good. Remove the guides, hide the guides. First we are going to apply styles to this inner layer. This is the layer inside, we are going to apply layer styles in a shadow. Now in the inner shadow, make sure that you have selected multiply and color is black. Don't use any other color. You can also use darker shade for this blue, but I guess black is better. Then use this opacity. If you want more darker effect, you can go from here like that. Maybe we should set it to 50 percent. Distance, it is up to you, you can choose whatever distance, but don't go too further because it will change your effect. It will not sometimes look pressed. Keep it short like five or three pixels is more than enough. The blurred size should be a bit higher from this size. Make it nine or 10 or something like that closer to this one. We don't need any other things, light should be from the 90-degree angle. Press ''OK'', and this is almost halfway of our pressed effect. Now, let's create another thing. Now when the light falls from here, it should have some shine on this area. To create this, we are going to select this layer, the other one which was the container actually, and we are going to apply a few styles on it. First we are going to apply stroke. Keep in mind that stroke should be darker than this background. I am going to select this background, and I am going to reduce the brightness to 65 percent. Now our stroke is done. Now let us go to the drop shadow. Now we don't need this global light because we are going to use it for on the other side. Ninety degrees, yes, we are going to use it at the top, and we're going to use white color, and remove this multiply, we're going to use it normal. Now you can see how it is getting the shine over here on this area. Then we are going to reduce it because it is getting a very big shine. One for this one and two for this one. I guess this is good enough. One for the distance and two for the blurred size. This is basically how we are going to create this pressed light over here. This stuff looked really pressed. Now we are almost finished with this effect. Let me show you by zooming in, you can see how this is working. We are showing a very slim stroke line around it and then we are showing shine over here, and in a shadow over here. If you want to reduce the inner shadow, you can reduce it to three pixels. I'm going to zoom out. You can see how this pressed effect works. This is all about creating these pressed effects and pressed buttons and pressed states for different objects. It has a lot of use UI. See you in the next lecture. 57. Modern Header Design Part 1: Today we are going to design these modern-looking headers. Let's get started. I'm going to open up a new file, or you can open up a new art board. I'm going to set the width and height to maximum, 1920, and set the height to something like 700 pixels. Here is our art board. Now I'm going to use a free file, which I have downloaded from this site, unsplash.com. You can also download a lot of free images from here. Now, let me show you the images I already have downloaded. The image is this one, 6H. Now I'm going to drag it inside my canvas, like that. Now to contain this image I need some containers, so we are going to use some container over here. Let's draw our container with this rectangle tool. Single click on this art board over here, enter the width 1920 and height 700. We are going to use the full size container, like that. Press "V" and move this container over here like that. Name it container in the Layers panel. Now move this image above this container because we are going to clip it inside this container. Let me change its color so it's visible. Now select the above layers, which is basically the image layer and try to resize it like that. That's it. Now we're going to clip this image so we can move it around inside this container. Click "Alt" or "Option" key if you are on a Mac. If you're on a PC, click "Alt" and press in-between these, click once. Now this one is clipped. I can move it around over here like that. If we really need to adjust it, we might move it like that, up or down. Now, the second step is we are going to use our gradient overlay to create some dark or white area so our text displays easily and is readable on our modern header. Let's do that. Click on the container and click on the fx icon. We are going to use gradient overlay. Keep in mind, we're going to multiply the gradient. So it will add some of its colors in the previous background, which is already here. Now set the blend mode to multiply. Coming to the gradient, click on it. Now what I'm using is basically a gray or dark-gray color near to black, and I'm using its opacity to 100 percent. On the other side I'm using white color and opacity is zero. Basically it's a black to transparent gradient. That's what I really needed to show you. Now what this basically doing is, it is going to create some areas over here to easily write the text over here. Now, these are the settings. Keep the angle to 90 and style to linear. That's it. We are going to apply this layer style, which is gradient overlay. Now, this gradient overlay is very popular. A lot of designers use it most of the time. This is very handy technique when you have to create some portions or the header where you want to write the text. Sometimes the text might not be visible or cannot be visible or readable because of the background color. So we use gradient overlays to accomplish this task. Let's choose typography. I'm using Montserrat bold font and Source Sans Pro for this exercise. Now lets select Mons type over here. M-O-N, lets see where it is. Here it is, Montserrat bold. Now I'm going to drag over here. That's another problem. Press "Shift" and click over here so we get out of this problem of Photoshop and typing inside the layer bounds. Let's move to the road of success. You cannot see the text because the layer is behind the image. Let's move it up the image and change its color to a darker black, somewhat like that. Let me see the texts I really used on my exercise file, which was fly on the road of success. It was fly on the road of success. Please pardon my memory, I'm very short-memoried person. I really forget a lot of things. Fly on the road of success. Now let's make it regular and we're going to use middle align. Now, move it in the center of the image. Control A and Control Alt and H for horizontal, this was our custom shortcut key, so keep it in mind. Now we are going to set some of the sizes. This is dummy layer. Double-clicking and see what size is going to help us over here. I think 48 pixels is more than enough. If we need to change the line height, we can change it over here like that. I guess 78 is looking perfect. Now create a bounding box around it like we have in our exercise file, create something like that. Just a rectangle over here. Now we are going to apply few styles, which is basically stroke to this rectangle. Just leave the stroke to something like five or maybe eight pixels. Position should be outside, no inside, because if we set the outside it shows somewhat rounded rectangle. We don't need right now rounded rectangle, we need a perfect rectangle with edges. Now we have set this up. Now we are going to go to this fill and reduce it to zero. Now we have our transparent bordered rectangle over here. 58. Modern Header Design Part 2: That's it, and now we are going to use one more basic color. You can see our main call to action button. Let me draw some button over here like that. We're going to set its color to yellow. Let's make this yellow a bit more lighter in color, moving to this area over here. Somewhat like that. That's about it. Now, let's add some shadow to this pattern, Drop Shadow, and use these settings. Multiply, 35 percent opacity, distance three, and size seven percent. Our shadow blur is spread to seven pixels around the bottom and distance is three pixels. If you want to reduce it, you can reduce it like five or something like that. Now that shadow is done, let's type something on it. Get successful now. We are going to reduce that font size. We are going to reduce it using our font over here, which is easier and more quicker I guess than using the shortcut key. I have set its size to 24 pixel, and we are good to go now. Maybe we can make it more darker, pitch black. Now, select these two layers and Control G, group them, and create a button. We name all the layers. Rename it to border, something like that. That's it for this part. Now I'll move on to the next part which was around here and here. This is basically, we are going to use white color over here. Maybe full white or something like that in a grayish-white color. I'm going to use the font which is Source Sans Pro Regular, I guess, maybe Light. Join the success of 14,532 other idiots just like you. That's a good line to join the community. Now, one thing we missed in the start, which is basically getting our margins, are space around our design. I'm going to quickly draw that. For that, click "Control". Click on the container and click over here, "QuickGuide", click in the middle, to create guides around it. Then we are going to use Griddify and go to Spacing. I'm going to use 60 pixels around my design like that. I'm going to change the direction to top and bottom like that. This is basically to get your design in line. Now I'm going to move my text according to these. You can see how I've used this Griddify and these two plug-ins to my design, Control J and copy the same texts over here and move it over here, like that. Now we are going to add a picture over here which was someone like that, read latest story of John's success. Let's first rephrase it. Let's read John's success story on our platform. Now that looks good. For the image, we are going to use a website which is called UI Faces. I guess there's the name, uifaces.com. Go to this website and use an image from here. Let's use this one. I have used this one. You can use any other one. Can you go back and drag this image into Photoshop like that. We're going to move it over here. Now to contain this image, we also need an Eclipse Tool or Eclipse container. Drag it like that and we are going to keep this inside this eclipse. Nothing else. We just need to adjust our eclipse a bit bigger. Adjust this image. One more tip. Create some smart object from this image like that. I have pressed Control Alt F5 to convert this image into a smart object. Let's make it a little bit shorter or smaller. Not shorter, maybe this person might get angry, to get shorter. Maybe like that, I'm pressing Shift and Alt with it, like that. Now we are going to align it in the middle, so group them together and create an image group. I'm going to align it in the middle like that. Let's hide the layers Control Colon. Now, here we have the problem that our image have less space in these areas. Let's get to that point. Reduce this a bit. Move your button a bit up, like that. Also, reduce your stroke to five pixels and color to a bit darker gray rather than bluish-gray. Reduce this button height, which is looking a bit odd to me. Make it 85 like that. Also, we are going to see if the edges need to be rounded like that. Yeah, four pixel roundness in your properties. Set this for the button. I guess that's more like what we designed. If you really need to see how our design is looking, you can see I have left same or similar spaces around my design, which is called margins. This is 60 pixels, 60 pixels, 60 pixels, and 60 pixels. Let's just move this border and the button a bit inside our 60 pixel area like that. I guess still it feels a bit broader to me. Let's make it more short and move the button a bit up like that. In the next lesson, we will be making the next variation of this modern design. See you in the next lecture. 59. Modern Header Design variation: Now let's create a variation of this header with rounded button over here. Let's start with removing this border first. We're going to delete it. So press "Delete" on your keyboard by selecting this layer and select this one, and we are going to make it rounded button. Use some menu like 30 pixel over here. Now, maybe more than 30, drag it like that. Fifty pixels will be enough. It is set to 42.5 and it is rounded right now. Now first work on this button. We are going to apply some styles like this one, inner shadow. We can accomplish the 3D button look with inner shadow and drop shadow. I'm going to use inner shadow right now. Uncheck this global light. Move the light to the bottom minus 90 and size to zero. You can see it is already shaping into 3D button, so the distance to five like that. Now we are going to use some color, maybe in the orange shade, maybe over here, a bit darker. I guess that's good. Move it to 40 percent. Now you can see how I have used inner shadow to create a 3D looking button. This is very handy technique, keep in mind. Now I'm going to align the text inside the middle. Now if you see I have aligned the text in the middle horizontally and vertically, but the problem is our 3D effects. We are going to move the text up it above, like that, and maybe change it's color to a bit grayish, like that. Maybe we can increase the size of the button, press "Shift" and add like that. It's looking better now. We can also change the spacing between the letters to zero, make it a bit less wider. This is basically the spacing between the letters. You can see if I drag it over here and drag it back to zero. That's it. Now we are going to move this text layer. Let's turn on our guides again. Move this mean text over here at the top, like that, or maybe a bit lower than this. Let's change this leading or basically the line height. It is looking good, 62 may be good enough. No, 66 was better. Now I'm going to add a text line over here that, we help people to shape their carriers. Let's remove this for now and create a text paragraph layer by dragging it like that. That would be easier to control. We shape people fates by altering their DNA and other related stuff. Now change its size to 18. No, 18 is a bit more smaller, 24 will be okay, I guess. Now we have to change its color to a bit lower gray, so it looks a bit more engaging and a bit less important. We can also use white text over here, I guess no. We cannot use white text it's looking horrible. First just let's change the line height. We need something similar to this, 32 pixel is looking good. Move it a bit more in the middle, like that. Change its font to Source Sans Pro Regular, like that, and we shift your career upwards. That's a two-line intro off your site. Now you can manage colors from here, like that, or maybe from here, or here. You can see how I'm using the picture to get some color tones to use in my design. They look really nice if you use something from this background. This is another trick, maybe this color is looking good. Let's center it inside our Canvas. Press "Control A", "Control, Alt, H", and that's it. Press "Control D." Now I see a bit of issues in my spacing. Let's move it a bit up, 52 and make it all bold. I pressed "Control, Alt, Z" to step back. I need it to be like that. Now reduce it to 62, and move it a bit down. Remove your borders, and we have almost accomplished our task. Just move the button a bit down. Also move this a bit down like that. Let's see how many pixels we are away from this top, almost 1, 2, 3, 4, 5. They are good enough, 1, 2, 3, 4 and 5. We have almost even space, and if we really need to move this a bit down, we should move everything down like that. Move this text a bit down like that. I think it's looking good like that. Now we have created our second modern header, and we have discussed some new techniques like getting color from your background image and using the inner shadow to create this 3D button, I guess. I guess you might have really enjoyed this lecture. A lot of students were waiting for this one. I will be making a lot in the future. Let's move on to the next lectures. 60. Color Overlay Effects for Hero Area: In this lesson, we are going to create this awesome looking modern header. Another one, but this is going to be with another technique which is basically color overlay. We are going to use color overlay adjustment layer to create this awesome effect. Let's start creating this header. Open a new file. I'm going to use this artboard Web Most Common used. I'm going to use size of 700 for it. Press "Okay". Now we have the art board. Now we are going to create another layer, the size of our artboard for our container for the image and the header background. We created this one. Let's make it the size of our canvas like that. Now I have used this website called picjumbo.com for the free images. You can use it and download any free image from here to use in this exercise. I have already downloaded one of them, which is this one. So I'm going to drag it over here in my Photoshop, like that. I'm going to expand it a bit to like that. I am going to drag it down and we are going to clip it inside our container. Let's see, name it container and make its color to white. What we're going to do is we are going to overlay another color on this background to create this effect. So we are going to use color overlay on this container. You can use it from here. Go to these adjustment layers and select Solid Color. Press "Okay". We are going to use some effect like maybe Multiply, Normal and change the opacity to 90 percent. It's your own choice. You can use any one, any opacity over here. Click on any dark color like that. This is how we create this effect. We can lower more. Eighty percent is good enough. We can also change the color from here to a bit darker, blue shade. Now our background is done. We can now go on and get a logo file over here and few other things. I have used two fonts typography. One is Work Sans Regular, there is also Google Font, another is Montserrat Bold. We are going to write our title over here. Let's write the title over here. Let me see what I wrote on the original design, Learn to create Paper Prototypes. Let me rephrase it, Learn to create, and then in the next, I'm going to duplicate it, Paper Prototypes. On the paper prototypes, I use Montserrat Bold. Let's make it's size to 64 and maybe 48. Forty eight is good enough and let's just upgrade this size to 32 and 48. I'm going to align them with each other, going to select both of them, moving them around. One more thing I need to get some margins on the left and right side. So I'm going to use Griddify 130 pixels on the both sides like that. Now Control D to deselect, and I'm going to align these with this line. I'm going to copy the same text over here, which I used in the original image. Now I am going to again select text and I'm going to drag it like this and paste it over here. So this is Montserrat Regular, 16 pixel font, just to keep in mind, and this is 32 or you can increase it to 36 too like that. It was not regular but light font. We have created our text. Let's create our call to action button over here. So we are going to use a ghost button or just a white button over here, just to have good focus on this area. So let's use our, again, Work Sans Regular 20 pixel and we are going to start learning. Just change its color to some sharp color like this orange. I'm going to use it, align it, select the both layers, align it with Alt Control H and Alt Control V, just move it a bit down, one step down. Select both layers and align it with this left margin line. Also, it looks a bit less space here. Just let the background and expand this width like that. Now our button is ready. Let's drag some logo over here. I'm going to use my Alt Control F10. So now I am using all the three screens. Let's just close it. I'm going to drag my logo from this file over here. Our logo is over here. Let's make it a bit shorter. This is good enough. Let's move it over here. I'm going to use color overlay effect over here. You can go to effects and color overlay and you can use some grayish color over here, because we don't want more to make it prominent. So use gray color over here. Our logo is done. We need one login button at the right side. So just use a text login or we can use these two layers. We can group them into btn and then Control J, copy it, and then move it round over here like that. But we are going to change the style. This is going to be white and the background is going to have a stroke of white, one pixel and we're going to reduce the fill to zero. Now if we have made our login button, but we need to make it short. You name it to login. Log-in, login, login. Now, there is a bit of problem. Our login button has also almost the same height and width. So we are going to reduce it because we don't want much attention over here like that and also if we can reduce the font size to 18 pixel, that is good enough. Now, let's rename it to Login btn for login button, move it with this line, our margin line. We are going to align this login button with this logo. Select both of them and center line like that. I guess they are already center lined. Now we have almost created all of our header. There is one more thing you can add over here. You can draw another rectangle like that over here. You might have seen this in a lot of websites. Change it's color to nearly black and change its opacity to 70 percent or whatever you like, like 50 percent. For me it's 50 percent. So you can see this technique is used a lot of time on a lot of websites. So we can also reduce its size and move the login button and our logo a bit up like that. Now it is looking more balanced. Now, this is the way we create color overlay header effects. So if we try to hide it, we can use any color fill over here, like I'm going to use this orange or this color or this one or maybe this one or we can use a darker color like that, darker grayish color. You might have seen such effect on a lot of websites, a very dull grayish color overlay. So this is very popular technique. You can use it with any color. You can select any color from here, and it will look really nice. So that's it about using color overlays and color overlay fill to create awesome looking header designs. If you have any questions or any other requests, just start a discussion. I think I am creating a lot of lectures these days, so stay tuned and keep me updated. 61. Transparent Masking Effect Header Exercise: From the past few days, I am seeing this Bluehost ad on Facebook, so I thought that I should share this effect with you. When I started designing for a lot of years, I didn't know how this effect is possible. They have gradient coming from one side and it is making your background image a bit opaque and on some places, it is gradually opaque and transparent at the same time. Let me show you in this lesson how we are going to design this. In this lesson, we are actually going to design this design. It is a bit different, but I think it's better than them. Let's get started and see you inside this exercise, if you have any questions, ask me anytime. Let's get started. First we are going to open up a new file. Click on "New" and the size we are going to use is 1280 by 650. Press "Okay," and this is our canvas size, and then we're going to lay out some grids on it. Go to View, New Guide Layout and we are going to use 12 columns, gutter size will be 20 pixels and margins will be 20, 20, 20 and 20. Press "Okay," so our canvas is ready. Next thing I'm going to do is I'm going to show you some of the resources I have used. Let's go to this window. These are the fonts I'm using added on by TipoType. It is one of my favorites fonts, you can get it for free, just press "Zero" in it and Add To Cart, and buy these, just free. Then there is one font, this Archive, free font. This is also one font I have used. These are two fonts I have used, both of them are free. The third is the image I have used, which is this one. I don't remember where I found it, but if you want to, I think it was free and workplace-1245776. If you try to search online with the same name over here, I think you can find it. You can use any image you like, let me show you one website. Go to this picture, picjumbo.com and search here, workplace and you will see a lot of great images like these. This one, you can use this one also. Also this one, or maybe this one. I think this one is also perfect. Use any image from here, these are all free images. First thing we are going to do is we are going to drag our background image, this one into Photoshop and just leave it like that. Then we are going to size it accordingly, like this. Now we have our background image. Now coming to the effect of that gradient opacity and gradient mask. We are going to apply this mask over here, Add Layer Mask. Now select this "Mask" on the right side, and we are going to grab this gradient tool. Press "G," paint bucket tool or gradient tool. Make sure that gradient is set to this black-to-white. Now what is going to happen? That black is going to wipe out, so you can see over here. What is happening here is this gradient is from black-to-white, so black-to-white mask is basically making some of the portions of our image transparent. Basically this white background is showing at the back. If you want another background, you can fill up any color you like, like I'm going to show you right now. Now my background is a bit cyan color, it is filled with this. If you want a black color, you can click a black color like that. Blue, black, whatever color you like, you can put it over here. Right now I'm going to use this white. Also, keep on dragging this line of your gradient. You can see if I try to move it too long, it will also make transparent some of this portion. If you want a lot of text or a lot of text readability, you can apply this effect. Now, first thing is we are going to use the font "R," this one, Archive Regular, and I'm going to choose this color, I think it was this color, 31414D. Make sure your font size is 72. I'm going to write over here, "Empower." In the next line I am going to use, "Your Startup Now." Don't worry, we are going to change the font afterwards. These are the words. It is better if you move them on the separate layer, so I'm going to remove this "Empower" into it, and also I am going to remove the lower text from this area. Now we have two different layers with this text and this one. The next one is going to be this red color. This is CA4930. It's a flat color. Basically these two are, I think, flat colors, and one of them is my brand color too, run UXID. It is used in My Run UXID Logo. Now we are going to use Aileron, I'm going to select right now this "Regular." Let me see, I think, your start up, y was not capital. Now for this I am going to use 48 size and I'm going to use light. Like that, and for this I'm going to use semi-bold, italic, and I'm also going to use 48, like that. I think here we also had 48 semi-bold. Let's make it more white over here because we had more white in the last exercise. This is how we achieve this effect. You can see I keep on experimenting also. The direction of this gradient also works if you want something in linear plus shift like that, this will be linear on the whole image. If you want something directional like this, in this direction you can use something like this. In the ad I have shown you, Bluehost have used this direction from the left top to the bottom right. Now we are going to use a button over here like this. I think this size is good, and we are going to use just two pixels around radius over here in the properties panel of this shape. Change it, and we are going to use white, and we are going to add some shadows over here. Drop shadow 1. This is a new technique. You can call them glow shadows and they are very popular these days. One is a black shadow with multiply effect, very low opacity, so you can make it 20 or maybe 16, something like this, very low opacity. Then we have distance of 10, also the size is 18. This is the spread size. Then we have drop shadow, which is this red color, or you can choose this color from here. It also has a very low opacity, normal, it is not multiplying and distance is 10 and 20. Almost 10 to 20 pixels of A. Now we have selected this. Then we are going to use a rectangle over here and place it over here like that. We are going to color it red the same color of this text, and we're going to clip it, clipping mask, this is how we use clipping mask and they are used a lot of time in user experience design and UI design and designing all this stuff. Now I'm going to use over here press "Shift," so we are easy to click over here. I'm going to use "Join UXID. LearnUXID." I'm going to use the size 24 and I'm going to use Aileron. I'm going to use light. You can use any font you like, but I'm using light regular. Let's use regular, and there is one more trick. I am going to switch to Arial font just for now. "Arial," and now we are going to use Alt or Option key and press "26." So "R 26" and this is going to show you an arrow. I love this arrow, it is very easy to get this effect. Make sure you choose a font which supports this value. These are basically ASCII value, A-S-C-I-I values. These are arrows. You can also do them in HTML. If you want to make it a bit more spacious, try to change this tracking value on this character panel. Maybe 25 or 30 like that, so it is more open. Let's see how our design is looking. It is looking great. Now, coming to this grid, I'm using basically these four columns; 1, 2, 3, 4. Let's center align all these in this column. What is happening over here? Let's deselect it, Control D or Command D. We are going to move all of them together, maybe a bit down over here. Our button and everything is on the place. We are going to add some navigation over here, and for that we are going to use the line tool. I am going to use line tool. Make sure the weight off your line tool is two or three pixels because one pixel is very slim, so it might not be visible. So make it two pixels like that. I'm going to color this the same color over here and then we're going to duplicate them like that, 1 and 2. If you want something like this, it is good. Just move it around in this column. I'm talking about this column, so this is basically a column, this is scatter. If you want, you can align it like that, but I have seen some of the designs where they have something like this and then they have something like this. Let's change just the width. Go to this width and we are going to use 32 pixels over here, and we are going to align all of these to the left, like that. This is how we completed this design. I'm going to share my PST resource file for this design. If you have any questions or didn't understand any shortcut, or anything during this lesson, ask me questions. I hope you have enjoyed this lesson. Let's move on to the next lesson. 62. Designing Tabs in Photsohop: Now in this lesson we are going to create something similar to this. These are basically tabs. So tabbed navigation, you have seen it on many websites. One of my students, he requested this lecture that I need to create some UI design elements like tabs or drop downs. This is what we are going to create in this lesson. There is another version for this one, which is box version. You can see over here. This is basically box version or filled version and this is basically another one is naked version. These are two versions we are going to design in this lesson. You can see over here there are subtle shadows on these two areas. Also there are subtle shadows behind these three images. Let's get started and see what we can come up with in the next lesson. 63. Designing Tabs theme 1: Few days ago, one of my students asked me that he need to create these kind of tabs. So in this lesson, we are going to create the fastest naked version. Let's get started. I'm going to open up a new file, new document and I'm going to use that medium, 1440 by 900, create. We are going to first create the red line. We are going to grab this rectangular tool and we're going to click once on this canvas. You can see it pops up about how to create this rectangle. We are going to give it a width of 1065 and the height of 2 pixels. Like that. It's a very slim line. Let's create another layer over here. So layer one, and I'm going to go to layer and create a background layer so I can easily align everything according to that art. Command option H. Now it's in the middle. Now we are going to create our buttons. So first change this color to this red, ca4930 is the color I'm using over here. Now we're going to grab this rounded rectangle tool and we are going to click once again and the width will be 165 and the height of this button will be 55. We should use the radius to be four, i guess four, four, four, and four. Press Okay. So we have this button over here. Now you can see that the bottom two rounded corners should not be rounded because they are going to attach to this line. So we are going to remove this and use zero, zero at the bottom. Like that. Now you can see we have one tab button over here. Let's put some text on it. We're going to use Open Sans or you can use Clear Sans. These are both free fonts from Google. Now text size I'm going to use 20 points or 20 pixels and Shift and click over here. We are going to use movies over here. Now white color, and we're going to align them with each other like that. Now let's add shadows to this one. So we are going to go to layer styles, first grab this layer and go to layer styles and drop shadow. Now the drop shadow we are going to use should be on the right side and on the left side, so we don't need the drop shadow be at the bottom. First we're going to use a bit of grayish color over here. Choose any grayish color along this side. Then we are going to use very low opacity like 30 percent, and the distance should be 9 and this pixel value will be 12. We have one shadow, but we need it to be on the right side so we are going to change the angle to the left, so 180. If the light is coming from here, the shadow will be on this side. This is the concept we studied in the previous lecture. So this is how we have created one shadow. We're going to click this plus button and we're going to add another shadow. This time the shadow will be on the other side, which will be zero. Make sure you uncheck this global light because it is going to mess your lights over here. We are going to use two lights. One is going to be on zero and the other is going to be, make sure this one is unchecked, 180. So we have a subtle shadow on both sides. so this is done. Now let's create other tabs. Maybe we can duplicate this Control G and active, name it active tab. This is our separator. Name them properly, active tab and we are going to Control J or Command J to create another layer. We are going to move it on this side. Make sure that this layer is at the bottom of this one because it is not going to be active. It is passive or inactive state. So inactive state is this one. Now let's move it a bit behind this. Now we are going to change its color to white, like that and second thing we are going to remove all the shadows from it. We are going to use some of the stroke. So we're going to use two pixels stroke on it and it's color should be a bit of grayish, like that. It must be inside, set the stroke to inside. Press Okay. We are going to move it this state. We need the separator to be at the top. That is why it is going to hide it behind. One other thing we need to do over here is we need to reduce its size. I am going to reduce its height to 50 pixels, five pixels below this and we're going to move it a bit down, like that. Okay like this. Now it's almost perfect. Second thing is that we need to move it a bit far from here, like this. You can move it like that or like this, it's up to you. You can separate it or you can keep it behind this active tab. Now we are going to duplicate this movies. So we need to change the color of this text. It is going to be a bit dark grayish like that. We're going to name it Dramas, and we need to move it a bit down like this. Maybe i need a crisp over here. So Dramas. These are few settings, my display's rendering options have some problems so my text is not really crisp. So this is one option. Then we are going to move this one, duplicate this one, and we are going to move it over here. So it is going to be anime. Now we have one active tab and two passive tabs or inactive tabs. You can see how this subtle shadow is dropping on these tabs. There are many variations you can do, like you can remove the shadow and you can use a bit of light gray color to color these. You might have seen this style in Google, so you can do something like this, like that. Grab the color from here. They are looking really cool, really nice. Shadows are looking very subtle and you can see over here on both sides. There is one more effect we can add to this, which is gradient overlay and I'm going to use a gradient overlay over here on this button. What we're going to do is we're going to use a very dull gradient, so it is basically black to white transparent gradient. It should be white on the one side. You can use something like this, and also you can use multiply or other effects like this one, and you can reverse it or something like this. Let's use it like that, so change the angle of light to 90 degree, and you can see over here how this is affecting our design. You can see maybe we can shift it to some grayish color and we can move the slider back a bit just to get just a subtle effects. You can see how the difference is, this is really nice effect. You can just create a very subtle gradient overlay on this one and this is how we do it. Now we are going to fill this area, it is up to you. Otherwise, I shouldn't have included it in this exercise. You can do it on your own. But if you want me to show a few areas over here, what we are going to do is we are going to create some guides around this. We are going to wrap this separator. What I did is I created 50 pixels space from here on the both sides, and I'm going to place my content inside. Now we're going to create another rectangle 285 width and height will be 350. We are going to use a bit more rounded corner over here, press "Okay", and we have this really nice layer over here and you can see we can put any image into it. Now we're going to add some drop shadow first. Drop shadow is going to be the first. We can use a drop shadow 90 degree, and it should be very subtle, like 9, 12, it's looking good. Press "Okay" and make sure it is some color of gray. I'm going to color it gray over here like this. Now, move it outside this area. We are going to replicate this with another one, Control+G, and it will be our active over here, active image or thumbnail. Let's color it a bit darker like that. Its shadow will be also highlighted or more intense like 60 percent. Also I'm going to move it a bit more wide, maybe 70 percent is good. We can also increase the distance a bit down. This is how we are going to use this active state. Also, we are going to add some stroke around it. So three pixels or two pixels stroke inside this shape. The size of all the three shapes are similar. Press "Okay", and let's duplicate this one again at the end over here, like this and stick it with right side. Now, I'm going to grab all three and I'm going to horizontally space them out. Very nice, looking great. Now you can add any image over here, I'm going to do it very quickly. I'm going to drag and drop images and I'm going to clip them inside these boxes. These are basically containers, we're going to use our option or Alt key to clip all the image inside this. We are done with these shadows, now we're going to add some text over here. I'm going to use a heading with the Open Sans bold. I'm going to select Open Sans bold and size will be 48 pixels. Let's add some text over here, like movies or active movies. I'm going to use a bit of darker color over here like that, align it with this line over here, like this. Also you can add some titles around these images just to make sure that these are good looking titles, and I'm going to add some titles over here, like broken window. I'm going to use 20 or 24 pixels, 20 points over here and make sure the font is Semibold Italic, like that. Align them all with these. I'm going to do it very quickly. Don't worry, I think you already know how to do this, align it with these shapes at the bottom, so containers. I'm going to grab this container and I'm going to grab the text layer and I'm going to align it in the header like that. Basically I'm aligning every texts with this, this, and this. Now I have aligned all the texts, you can see over here it is looking really cool, really nice, really open, very open designed, very good use of white space. This is the end of this lesson. We have created very nice, very subtle tab bar, and this is the information inside this tab bar. Make sure that you use some active and passive states, like you can see over here we have very inactive button. They should not mix. Active buttons should be clearly visible and the user should know that this color is matching with this one, that I'm inside an active window. This ends this lecture. In the next lesson, we are going to create another version of this which is filled one, we are going to use a box over here. Let's move on to the next lesson. 64. Designing Tabs theme 2: Now in this lesson, we are going to create this box version of these tabs. There will be few differences like you can see a very thin line over here, also you can see there is a elevated effect over here, 3D effect, and also you can see few icons added over here. The only thing is that we reverse the color scheme, now the background is very bright with matching with these tabs and I think it really clearly shows that this one is active. Let's just get started and we're going to start from the previous version where we left, so I added few movies titles over here just to make it more dramatic and look nice. Now, few things we are going to do, number one that we are going to remove few of the effects like you can see over here, this white border looks very odd in this situation, so we are going to remove it like that. Also, we are going to remove the shadows, drop shadows, from both of these, so I'm going to remove the drop shadows. You can see now this one clearly looks like it is elevated and it is basically selected, so there is a shadow around it. Then we are going to remove this line over here, so hide this line and the few more things we are going to do, number one, to these inactive tabs, now we are going to add stroke of gray, you can see over here, gray stroke and we are going to make their color white, so it is blending with the background. So the same color as the background, you can see over here and we have added a stroke of, I think, two pixels, let's see how many pixels, yes, two pixels inside 100 percent and it's a gray color cb, cb, cb. We have almost achieved what we want. Now, the thing is that we are going to create a rectangle over here and it is going to be like this, maybe like that. Now we have this rounded rectangle and it is going to be at the top. Not at the top, I think it should be in front of these. Now let's change its color to this one, so we have changed the color, so this one was active one, we are going to remove the gradient overlay we put in the last exercise, so gradient, we don't need gradient and also if you want, you can also remove these drop shadows, so it really looks a bit flat and very nice over here. Now we are going to shift the colors of these texts, so I'm going to select all the text. There is a trick I'm going to show you in just few seconds, go to Character panel and select the color over here, so move it to white and ta-da, we have all the colors text in white right now. So instead of changing every color one by one, we just change the color at one place and everything is changed. Also, we need to make it a bit bigger and move this content. This is our heading and this is our content over here, so this is our movies content, so name it Movies Content, like that. Now move it a few pixels down, maybe 10, 20 like that. Now we are going to add few icons over here, but before that we are going to need a line over here, separator line, so it shows that we have a separator over here and we have something like title and something like that. I have just drew a line like that, make the colors same and then we are going to reduce the brightness to make it a bit darker, 75 like that and reduce its size control T or command T and we are going to use two pixels like this and make sure it is the same size as your this background, so it was 1,115 and it is going to be the same size as this bar over here so it is going to be 1,115. Make sure your sizes are the same, you need to match them like that, just adjust the spacing. I'm going to select this separator, now it is looking good. You can see the space above this title and below this title is the same, so I'm trying to centralize this area. Now we have almost done with this, there is one more subtle change like this dramas, its colors should be a bit more dull so like this, gray. Don't make it too dull so it doesn't look like an inactive, so make it a bit like this so it shows that you can click over here. It should not convey the message that you are unable to click over here. This is good. Now there are few more things we can add, we can add icons over here now. Very simple trick how I made these icons, just a simple calculation, 12 by 12 pixel width and height rectangle, but I think it's a square, it's not rectangle and what I did is just move it at the top. I duplicated these like this and then we are going to duplicate these and move them at the bottom like this. One icon is ready, I'm going to select all, control or command E to create one shape, so now it's a one icon. Let's move it over here. Now the second icon is going to be the same, just we need a smaller size rectangles at the left side, so it is going to be six pixels by six pixels square like this and then we are left with six and 26 was total so we are left with 20 pixels and 20 pixels. Sorry, it was not 20 by 20, it should be 20 by six like this. Now we are going to move it over here and get some distance like this. You can adjust the distance later on. Now we are going to merge these layers and we are going to duplicate them one, two, so we have two icons created in just few minutes and this is just group them as icons. Now we are going to align them with this margin over here, margin line or guideline over here, so this is how we align it like this. We have completed both the tabs and they are looking great. One is the naked tab and this one is the tab with very active state and mixing the content and the tab the same color. This is all for this exercise. I hope you have enjoyed this exercise. Now, let's move on to the next lesson. 65. Gathering Resources for IOS App Design: Now in this lesson of series, we are going to create this awesome looking iPhone app. This is a daily deal for our food and especially for foods. First of all, in this lesson, I'm going to show you what are the different resources I have used, the images, these forks, and colors, everything else. Let me show you. For the images I have subscribed to this very nice people who are Death to Stock Photos, and they deliver me very stunning photos and high-quality images for free almost every week. So this is very nice. If you can subscribe to them, you will get a lot of create images over here. Let me show you some of them over here. This is one of them, they're series. So I have a lot of images from these guys. You can also use some other free websites like, I guess here I have some of the links. Splash is very popular, this one on splash, you can search online, picjumbo, Pixabay. So you can use any site you like, and then the font I am using, I am using this Martina Regular font, which is I guess free, fontzone.net. You can search online for Martina Regular, download this font and install it. Then I'm using this Google Font Lato which is very popular. Another Google font which is Maven Pro, which I have used in this button if I set the text over here, Maven Pro regular. So this is for the button only. Then I am using this marker styled font which is basically Martina, and Lato is everywhere else. So this is Lato, Chicken Biryani, and in this price. So overall they look very well and nice together. These are all the resources. So let's get started. The colors I'm using are basically these two colors, which is this purple color and green color. So this is 211637 purple. This is basically green, which is 22a372. I guess mostly I pick these colors from this image basically. So let me show you how I pick these colors. There is a gradient mask over them. This is basically the image. I picked the colors from the image like for example, this green. It is closer to this green. Let's reduce the saturation to 70 percent. So it is almost closer to this one. You can also try to sample other colors from over here, like this one or this one. So basically, I picked it from here. This one 030f66. So this is basically how you sample color from your image. Then the purple color I picked from over here. That is why they are going very well together with this overall design. Now, let's get started. Here I have the image which was this one. 66. Lets start the IOS App Design: Let's create a new file and choose iPhone 6 or iPhone 5. First, you need to select Mobile App Design over here and then go to the submenu, which is iPhone 5, 6 or iPhone 6 Plus. Lets choose this iPhone 6 right now. "Don't Color Manage This Document", make sure this is selected and press "Okay". Now, this is our art board. Let's create this as a background layer. I have selected this one, and layer from background, I have created a background layer. Let's create a background color, which will be this one. A bit grayish, f4f4f4 color. This is how I use basically, backgrounds. Now, let's import our file over here, which was this one. Let's drag it over here in the Photoshop, like that. It is almost perfectly fit over here. Now, this is basically iPhone 6 screen, so we have a lot of space under it. If we want, we can increase the size of this image, if we really need to. We can select Control T and try to increase the size like that. Drag it down a bit. Let's increase the size again. I'm pressing and holding Shift and Alt keys while increasing the size of this. Basically, it is getting outside. I think it was Photoshop bugs. As soon as I started resizing it, they were trying to adjust the size around it. Let's create some overlay over this image. Basically, in this design, you can see over here, if I click over here, I created this and purple-ish overlay so we can see the text easily. First of all, we are going to create a gradient overlay on this so we can see the text over here very easily. This is basically what I have done here. First of all, what we are going to do is, we are going to select this area and we are going to create another layer. This one, and we are going to press G and fill it with this purple color. G and press like this. Now, what we're going to do is we're going to create a mask on this image and we are going to use gradient overlay. You know that the white will show everything and black will hide everything. When we try to use gradient overlay over this image like this, you can see the image behind it will be shown because now, the white is removing all this purple color over here. Keep on doing like this until you get a nice touch like that, maybe like this. This looks a bit nice. If you really want to adjust it, you can select this layer, Control T, and you can transform and adjust according to your taste. Now, this is the trick how I did this overlay color effect. I used gradient and masking effect for this one. The rest of the lecture, we will be doing in the next lesson. Let's move on to the next lesson. 67. Adding menu items to IOS App: Let's add a few more images over here. This is basically our background, so Control G and group them in background. Now let's add images over here. For that I am going to use a rounded rectangle to contain that image, like this, maybe a bit squarish. Let's create a square image of 200 pixels by 200 pixels, and four pixel radius, like that. We can make sure we have a space of 1, 2, and 1, 2, 3, 4, 24 pixels away from this top area. Let's get images of foods. These are all the free images I have collected. We can use any of it like this one. It's still good. This one is looking good. Let's press enter. I'm going to clip it inside this small box. Let's drag it a bit, scale it a bit so it looks a bit nicer. Let's focus on this one like this. Now, Control G and duplicate this group. Let's call it small thumbs copy. I'm going to drag it over here like this. Sorry, I pressed basically art with it and it created a lot of copies. We only need four. Maybe I guess this one is extra. Let's move this one too over here like this, and the first one over here like that. Let's move this 100 pixels inside this. We know that from the both sides they are equally spaced, 1, 2, 3 ,4, 5, 6, 7, 8, 9,10. This is a bit much so let's move on to this height. I am going to space them like this. This is how I created this image thumbnails selection portion. Let's create a guide in the middle of this so we know where the center of this image is. I'm going to use quick guide like that. Now we know where the center is, so I'm going to align it quickly like that. Yes, it is almost in the center. Let's select the first one and the last one, and all of them and let's space them out again. Now it is aligned properly. Yes, alignment is a key to success in your design. Your everything and every image should be aligned properly. The image viewer then images like this one. We are almost done with this area. Now we are going to group all this into thumbnails like this. We can have a good space over here. This one also don't look very bad, but the gap between these images over here is looking a bit more spacious. Space here. Let me check what was the height over here 1, 2, 3 ,4, 5, 6, 7, 8, 9,10, 11, 12. Now it's 32 pixels away. Let's align the top of these images. It is looking good now. Let's move on to the next lecture where I will be adding the text on this image or this art board. Let's move on to the next lesson. 68. Adding text to IOS App Screen: Let's add some text to this design in this lesson. Let's select this one and first I'm going to save it because I haven't saved it yet. Let's save it on the desktop right now. Now first we are going to select this Martina font, regular, and I'm going to use the size of 52 points or 52 pixels and color will be white. Click over here somewhere and it was sandwich cafe. Now, I'm going to say send cafe over here and let's move it a bit down like this. Let us move it at the top and adjust the background overlay because I can't read it. This one is looking good better. Let's move to this collector panel and remove this underline. Then I'm going to select our other font which was Lato, regular. This one is bad. Let's duplicate it and select the font Lato. I had selected the font so it switched to another font. This sometimes happen with me. Now we are going to use 28 or maybe 32 for the location of this cafe. For this, I'm going to use Lahore. Like that. Let's move them around a bit. Like this it is looking better now. I guess let's make it 20, 1, 2, 3, 4 or 24 pixels and this one is going to be one and two. Twenty pixels away from it, this is looking good. Let's make it a bit smaller, I have shifted this to 30 pixels, now this portion where we had special deal for today. Again we need to select this font. Click over here once, you click on this font, select like this one, and then select this text and you can see this size and everything is selected already. Click over here and the text was special deal for today. Double-click go here and special deal for today. Now I'm going to select the color of this font to this purple color, which was our base color for this design. Let's move it around and 1, 2, 3, 4, 5, and 6, 60 pixels away from this. The next line, which is chicken biryani and the price. Let's add that the font is Lato. I am going to first select this layer and then press ''D'' and Lato is selected. I am going to write chicken biryani and the price was $2.99 only. This is the text. You cannot see the texts because I'm doing some black voodoo magic. The white text. Let's make it Grey for this color, I guess. Now, let us move it in the middle. We will deal with these alignments. Neutron, but if you want to quickly align it control A, Control Alt H and it is already horizontally in the middle. Now, for this chicken biryani, I think it is a bit very dim. What I'm going to do is I'm going to select this purple color and I'm going to move in this area over here like that. This one was a bit good color. It is bit grayish and a bit purplish. 63, this is sometimes I do, so I combine this both colors to get the Grey color like that and then I'm going to select this, and I'm going to select this green color over here. We are going to increase the font size for this green color. Let's make it 36, like this, and looking perfect till now. 69. Adding Buttons to IOS App Design: Then we have a phone number, which is my phone number. Let's write it over here. First, we are going to select rounded rectangle, and radius should be 10 or maybe 12, I guess 12 will be okay. Let's create a button over here like this, and colors should be purple, and roundness should be 20 pixels. This is looking good. Now for the icon of that phone, I'm going to use my Font Awesome PS extension over here, so let's add an icon phone. This one looks perfect, a little over here. So let's color it white, make it a bit bigger. This is basically 42 pixels is good enough. Over here, let's move it 1, 2, and 330 pixels away from the left. Then I'm going to write my phone number over here. You can also make it a bit green. If you want to make a color more sharper, you can increase the saturation over here. I'm going to increase it to almost 86, like this. Now I am going to use let's call it the pattern phone. Here I'm going to add my phone number over here, which will be in lateral. Let's change color to white. Closer to white, which is basically a bit grayish color. Let's move it 1-330 pixels from the right and 40 pixels. Now what basically I am going to do is I'm going to separate these two by one and 220 pixels and group this phone number and align it in the middle of this button like that. Now what I did is, I grouped this inner content and then I moved it in the middle of this. Now I guess we can also color this screen or maybe a bit grayish. I think highlighting it too much is not good enough. I use this word good enough a lot. Now what we are going to do, we are going to use a very big book now button over here, and that was basically the button. Let's create a rectangle over here. This big and color it this one. If you like the flat look, you can use this button like this. But if you like a bit elevated look, you can use inner shadow. What we are going to do is we are going to select this color, then we are going to reduce the brightness to get a bit of darker color over here like that. You can already see the elevation over here. I am going to use 16 pixel elevation over here and zero pixel size. Angle is minus 90. So basically it is inner shadow from this direction from bottom to top. Click "Okay." If you really want, you can also add a bit of gradient overlay on this button. If you really want to. I am using this transparent white to black. You can select like this and you can also multiply it like that. Now, I'm going to use a bit of gray color over here because it was looking very sharp, a bit more darker. I guess it is looking good without this gradient overlay. Let's remove this gradient overlay. I'm going to use again this Font Awesome PS to get some calendar over here. DA is good for a calendar, so I am going to select this one. This is the icon for calendar. We need to move this out of this phone number. Where is this calendar? Let's increase the size and move it over here. Color it white. Then we are going to use our last font, which was Maven Pro. It was Maven Pro not Maven. I'm going to use this Maven Pro Regular and I'm going to use it over here and book now. What I did is, I used this character panel to space it out. So it is 36 points, so 36 pixels basically. You can set the tracking over here. I have used this to increase the size of 225 pixels. Let's move this over here like that. Select this calendar, I'm going to reduce its size. It is basically 55 by 59 pixels. Let's move it to 50, like that, and move it in the middle of this area book now. We are also going to underline this text, book now. So people know that this is basically a button. Even if you want to remove it, you can remove it like that. So don't worry about it. I can increase also the size of this, and we should also increase the size to 40, I guess, because it should look a bit bigger than this area. Let's make this phone number a bit smaller. Let's make it 30 pixels and also reduce. I guess 32 pixels looks good enough and also reduce this phone size of this icon to 36 pixels. Make it closer to this one and two, and also make it a bit shorter like that. I am going to use my shortcut key to align it properly. Then I am going to group all this into phone pattern and align it in the middle of this app area, which is our art board. I think it is looking almost perfect. Let's get a bit of spacing accurately. This is our phone button. Let's see how much it is further from this 1, 2, 3, 4, 5. Five is good enough. Here we have chicken biryani. Special deals. Let's make it in the middle of this,a bit down like that. It is looking perfect, and I guess align this with this calendar. It is almost aligned but I feel a bit. One and two, 1, 2, 3, 4. Twenty four pixels over here. Let's group it, content of book now button. This is our background of book now. Let's group them into button, book now button. Let's align this content with this in the middle, like that. Let's align everything in the middle of this Canvas. Our Pakistan's special deals sandwich, and let's align it in the middle. Everything is in the middle. I think we can increase the size of this text, because it is looking almost closer to this special deals. I have increased the size to 64 points, Martina regular. I guess this makes the end of this lesson series. What I'm going to do is just a last effect. I'm going to increase the size of this $ sign. Let's make it 40 pixels or maybe 38, a bit bigger than the other text. It is perfect and I'm going to save it now. Our iPhone 6 app screen is complete. In the next lesson, we will create the marker for the screen, so let's move on to the next lesson. 70. Using App Mockups to show your designs: Now let's create beautiful mockup of this design. What we are going to do is we're going to press "Control A" and "Control C" for copy or "Control Shift C" if you want to copy everything, and I am using this iPhone 6 mockups from Pixeden. If you want, you can see over here. iPhone 6 Pixeden mockups. These are basically mockups from Pixeden for iPhone 6, and I am using them. What I am going to do is when I open this file, there were basically three more other iPhones, so I selected this one, white one. This is basically the front view. You need to just double-click over here and you need to paste your design over here. Let me just hide this one. "Control V" over here and status bar, I'm using basically this Color Overlay effect. I have added this Color Overlay on this. If I try to hide it, you can see it is already white. But if you want any other color, like if I want purple color at this bar, I can use it or even if I want this green color, I can use it. I can use any color over here. This is easier to control this way. I'm using white right now. Now, just you need to "Control S" save, and you can see here we have our mockup. It is looking very nice, and then there were two other mockups which were this quarter's view. It is a bit aside view. I have selected this black one and this is where our design is looking very neat in this side view. I have chosen this black one and I have hidden the other two, which were these two. Let's just select this one double-click, click ''Okay'', "Control B". Move the status bar up above this layer. I guess it is already white color. If you want to, you can use Layer Styles and apply Color Overlay over it, which is white. This is basically, we can easy to control the color. "Control S", save it, and you can see over here, this is how we use these mockups. These really help our clients and other people to show case your design and it is a good practice to show, always show your designs like that. This is the final version where I wanted to show you how to use this mockups. Let's add over here too. Move this status bar up. Or let's just leave it over here. See how this is going to look. I'm going to close this PSP files. This is how our design looks, and here I guess we also need status bar. Why it is black, we need a white status bar over here. Let's make it white Color Overlay white and that's it. Now, it is looking nice, and this ends the final of this iPhone design. I will be creating more iPhone app for the Android I guess. Stay tuned and take care, and see you soon in other lectures. 71. Simple Trick to remove white backgrounds: Hello, everyone. We are going to do some image editing stuff in this section. The first lecture is about removing the white background with a simple trick. This is the end result I got. A lot of you, when you are designing in Photoshop, you might have some images. They have a white background like this one. There is a very simple trick to remove this background, and I'm going to tell you the secret. Now, let's get started. What we are going to do, is we're going to quickly remove this white background with blending options. I'm going to click New, 1440 by 900 Transparent, OK. Alt Delete to fill up the layer. I'm going to pick up this Rectangle tool and draw a rectangle over here like this. Let's change its color to very dull blue like this one. This trick only works with very light-colored backgrounds. If you try to use a darker backgrounds then we are going to see the next lecture about it, we are going to remove this white background. Let's drag my image over here, I have downloaded from Dreamstime. It was image when I used it for a client of mine. Let's move it around here. Let's make this background rectangle a bit bigger because it has less space around it. Move it downwards, and let's align it in the middle, I'll Alt Control H. What I'm going to do is now I am going to quickly remove the white background, so let's move on to this layer. In the Layers panel, make sure you have selected this image layer, and go to this Blending Options and chose this Darken. This is a very neat magic trick. You can see this white background just disappeared, and you can also use this Darker Color, both works very well in removing white backgrounds on lighter colors. If I try to change the color from something like this, light background, it will work very well. This is a very neat trick. You can easily remove backgrounds like this and you can merge white backgrounds into any white or very light-color background. If you are designing, try to find out images who have white backgrounds. They are very easy to adjust and very easy to remove. This is the trick I wanted to share with you guys. Let's move on to the next lesson, where we will be removing the white background quickly with another method. So stay tuned and ask me questions. Let's move on to the next lesson. 72. Removing small objects from image with Spot Healing: Hello everyone. In this lesson we are going to do some more Photoshop work with some images. In this lesson, what I'm going to do is I'm going to clean this image. You can see the image below, it is the image from one of my clients. You can see the wires around it over here, over here, one over here, and then there is a tree branch over here. So what we are going to do in this lesson, this is the first step, we are going to remove all these details, and in the next lesson we are going to give it some dramatic effect like this clouds and some color adjustments. I'm not a master of color adjustments, but I will give you some bits of a guide so you can easily manipulate some of your images because when you are designing UIs, there are a lot of times when you have to edit images. First, I'm going to start with this image, so let's move to Consolidate All to Tabs. This is our final image, this is the image we are going to work with. Now what we're going to do is we are going to use this Spot Healing Brush Tool. The shortcut key is J. If you don't see Spot Healing Brush Tool over here, you can go to this three dots bar and you can edit your tool bar. This is the new feature in Photoshop's latest version. Try to click on this edit and drag the tools you want over here. So this is how this custom toolbar works. I'm going to select the Spot Healing Brush Tool. As soon as I like this, you can see we have one brush over here, this is the size of the brush, hardness, make sure it is 100 percent. We don't want a very soft brush. Then we have mode Normal, let it be like this. Now the main thing is this type. You should select the Content-Aware. Don't select this Proximity Match or Create Texture. Select this Content-Aware and start brushing on the objects you want to go away. First, what we are going to do is we are going to duplicate this layer so we don't lose our main image. I'm going to just brush on it like that. Like this. If you want a lot of perfection, you should zoom in. So this is how we work over here. Like this. One wire has been removed magically and just brush over it like that. I'll also brush over this tree branch, and last we are going to brush on this two wires over here like that. You can see all the wires are gone. There's one more thing you can see over here, is it a light or sprinkler? Some kind of thing like that. Increase your brush size by pressing bracket keys on your keyboard and just press once. On this click once, and you can see all the extra things we wanted to remove here we have removed them. Even if you want to go further, you can remove this little building over here, but I think it is giving us some problems, so let's make our brush smaller. You can see I have removed this building over here too. This is how this Content-Aware Spot Healing Brush Tool works. In the next lecture, we will adjust some of the colors and brightness and vibrance of this image. So let's move on to the next lecture. 73. Making Colors pop in images: In this lesson, we are going to convert this image to closer to this one, a bit of dramatic clouds, different colors, and a bit more adjustments over here. So lets get started. What we're going to do is we're going to use our Curves over here. So these Curves are basically going to compress or uncompress your tones of your image. So what we are going to do is we are going to use one point over here, just click over this line, one point over here and one point over here. Now what I'm going to do is I'm going to drag this point a bit up, this one a bit down, like this, like that. Also this one. Let's move this one a bit closer to this, like that. Move the top one a bit on the left, and you can see we have achieved almost the same effect we wanted on these clouds. Now what I'm going to do is I'm going to convert this duplicated image. Let's duplicate it and I'm going to convert it to black and white, go to Adjustments and Desaturate. I'm going to desaturate it and I am going to use linear soft light like this. You can also decrease the opacity of the soft light to 50 percent. Even without curves, this soft light works really well. You can see the difference over here. You can do it with any image, just duplicate it and desaturate it with this adjustment and move these blending options to soft light and use the opacity to control the soft light. This is the effect we can easily get in any image. If you want to change different tones, you can use these Curves, and on the top of that, we can also use these Vibrance. This is basically the colors. You can see sometimes we say that I need some pop in this image, colors should be popped out, so if you move this slider to the right maximum value, you can see the colors are really popping. So what I do is I usually decrease this saturation to 5 minus 5. Saturation is also how intense the color are and vibrance is also related to this. This is how I change the image over here. Now you might see some bluish shade in the sky. This is very simple, just click this Background layer, and I have used some adjustment layer, which is basically we can use solid color, some kind of blue color over here like that, and we are going to reduce its opacity to 20 percent and keep it to this, like that. You can see the effect of this blue color fill. If I want to change it, I can change it over here like this. Now it is giving a bit of bluish effect on the whole image. So this is Color Fill, even if I remove the Curves, you can still see this Color Fill and even this soft light effect with this desaturated layer, we have a very good effect over here. If I turn these curves on, okay now, if you want to reduce the opacity, you can also reduce the opacity of this curves channel, or curves layer. So I'm going to reduce it to 40 percent and Vibrance, I'm going to select this Vibrance and also going to reduce it to 80 percent. Okay, now this is the final effect for this lecture, so just to recap, what we did is we duplicated this same image to another layer and we use this Image, Adjustments and Desaturate. Command is Control Shift and U, and option command U for max. So I have used this, and then just forget about all these, and then I selected this top black and white layer and used this soft light blending option and reduced the opacity to 50 percent. Then I have used adjustment layer from here, which is solid color. You can also use gradient if you want two colors in this image, different colors from top to bottom. Now I have used this Color Fill, make sure I'm clipping this with this layer, so Alt, click between these two layers to clip them, and this blue is only applied to this layer, and then I've used few of the Curves. I have adjusted these Curves, just played around them so I can get the desired effect. Then with the Vibrance, I just used Vibrance to make the images more popped up or whatever you said. Now this is the end. I have told you two or three techniques to alter your images. You can use them on portrait images, your face, or whatever image you have. I guess this covers the basics of image editing for all the UI designers, and if I come up with anything else, I will create new lectures, so stay tuned and take care and just move on to the next lecture. 74. Removing Background with Magnetic Lasso tool: Today, we are going to remove the background from this guy. Actually, the background he had was something like this and we removed it in very little time. This techniques basically involve using Lasso tool, which is this magnetic Lasso tool, Photoshop tool. Let's get started and remove the background from this guy and use any other background we like. This selection basically, we also have hair part and a few other areas like this, this, this, so we are going to use this Lasso tool to remove all this. Let's get started. I'm going to import the image I have. This is a free image. I don't remember where I got this image from, but I will surely look for it and it is already open. I'm going to start again. I'm going to delete these layers. This is basically the image we had. Now, first, I'm going to do is duplicate this layer and then we are going to select this Lasso tool, Magnetic Lasso tool from tools of Photoshop tools. As soon as you select this Lasso tool, and you can see there are different options over here, so this is feeding options. Feeder means it is going to blur the corners a bit, so I think we don't need it right now, so keep it at zero. Make sure that anti-alias is checked. This width is basically the width of the selection tool, so if the width is very smaller, you can guess that it is basically the accuracy of this Magnetic Lasso tool. Basically it is clipping onto the contrast of the bare ground and this guy over here. You can see how it is working like this. I am right now using very rough selection just to make sure that you know how it is going to work. Let's remove this selection. Width is basically how much accuracy you want in the selection. If you want very accurate selection, then you can reduce it and then the contrast. It is the contrast between this bare ground and this guy's arm, you can see over here. Also here we have a lot of contrast, but here we have very less contrast. These colors are almost similar, so I am going to reduce the contrast to five or 10 percent, five percent. Frequency is basically how many dots this Photoshop is going to put for your Magnetic Lasso tool. As you can see here, we have 10 or 15 dots, so frequency, if you want to set it high, you can set it high. If your object is very edgy and have a lot of [inaudible] of edges, then I think frequency should be set to high. Other than that, I think all the settings are good enough. Now, this is for pen pressure. We are not using tablet or any other device, so I'm using my little mouse, so we are not going to use this just to simulate. Now, let's use this Magnetic Lasso tool to actually make the selection. I am going to click over here and just let the Photoshop do it's trick. Whenever I feel that there's something I need to make accurate, I can manually add another anchor point by clicking over here like that, so it is more accurate like this. Here we have the hand of this guy, then the ear and you can see how I'm clicking and how I'm using this manual anchor point for my own usage or advantage. Don't worry about the areas which are getting out of this selection. We will adjust it with another technique which is Refine Edge. Our selection is almost done. Now we have the selection. When we come to the first point, it is going to show this oval shape. Just click on it and you can see the selection is made. Now, the second part, we need to subtract these areas from the selection, so we are going to select this subtract from selection and we are going to select these areas over here, which we don't need in our selection. Like that. Also this one. If you have some mistake and you want to go back, just press backspace two or three times and this is how it goes back. Now, the selection is made too, then we have this inner selections in this hand. I think we need to increase the contrast a bit and also this width because it has a lot of contrast over in these areas. I'm increasing the contrast. You can zoom in if you want to. You can press Control plus and zoom in. If you want more zoom, you can go like this. If you want to move your image while you have selected this Lasso tool, you can press Space bar and you can move around like this and release the Space bar. You can closely see how these selections are working magically. These are a few of our last selections and then we are going to leave this. There is one more very small selection over here. It is better to zoom in if you have very small areas you need to select. Now, I'm going to zoom out and we are going to use this refine and you can see over here, press this. Now, there are different modes. Matching ants. Okay, overlay. I like it better because I can see it on a red background and I can see where are the edges and stuff I want to make accurate. Some people like something like this, something like on white, but I like this one. This is how you see or present while you are using this refiner's technique. Now, what you are going to do, the next step you are going to select the Smart Radius and you can see over here, I have something with a brush style plus sign over here. If you want to reduce its size, you can press these brackets on your keyboard like that. Make it a bit smaller for more accurate results. What I'm going to do, I am going to give Photoshop my outline or edge of this image I'm editing, so I'm going to just press and drag and paint at the edge of this image like this and we are going to just give Photoshop the edge of this image. Don't worry about it, we can fix it afterwards with our masking techniques. You can already see that it has made our image a lot better. Now, these areas, we need to fix them too, one and then this one, two. Here, we have a small problem. It has wiped up our problem. We are going to deal with this white small dot with another technique, so don't worry about it right now. So now, we have a bit of problem with this hair. Let's make our selection a bit inside this hair. Now, this white behind this hair here have been removed. Now, coming to these options. We are done with this edge detection smart radius, so the next step is how to adjust the edge. We can smooth it out if we want to, if it feels very distorted. We are not going to use it. Feather, if I turn on this feather, you can see there is a blurry field all around this selection. Sometimes, we have not a very accurate selection, and we want a feather so we can easily adjust it. Right now, we are not going to use the feather. Maybe two pixels is good enough. Now, if you try to increase the contrast, you can see this edge contrast is basically improving. You can see over here, the hand and everything, so let's make it to five pixels. I think we don't need too much contrast, maybe 10. Shift edge means if I show you the radius, this is the radius we draw for our smart radius to give Photoshop the edges of this photo. Now, if I try to shift the edge, it will actually shift the edge of this smart radius we draw over here. So if I try to switch it outwards, you can see it is selecting outer pixels. So maybe, we can select something like this plus five because our hand was actually moving inside this. Now, the last output. So what we're going to do is we are going to use a new layer with layer mask to output this selection. So basically, what we are doing was we were refining our selection. Now, we are going to press "Okay", and here, we have our new image with this selection and this mask. Now, I am going to create a new layer and fill it with any color I like, like this dark one. You can see, still we have some problems over here. It is basically the problem with our last masking where we moved the edge to outside of his hair. Now, we have these layer masks, so go to this layer mask and select the black color x. You can see here, we have black. Press the "B", brush. Press the white. Basically, we need to select the white as the foreground color and we want this to show up his hand because it is hidden in the original one like this. Here, we also have some problem here. The hand, we need it to be visible. If you want to make the brush smaller, you can press the keys I told you about, the bracket keys. Now, we can also select this brush. Reverse the selection. If you want to hide something, select black like this. You can see I'm using black right now. We can remove the hair if you want, so don't worry about the hairstyle of this guy. Removing few hairs will not harm this wow person. We are almost done. We need to remove this outer blurred area, this here, and some here. What I'm using is I am just using a brush tool to refine this mask a bit more, and I think we are almost done with it. Let's select another color for this background. Let's select yellow because this guy was a bit on the yellowish shade background, so this is working great. So this is the end result we got with this image, and I hope that you have understood the working of this magnetic lasso tool. This is how I normally remove the background of most of the images. You can also use this pen tool, but I think it's very time-consuming to select everything manually and every curve and everything over here like this. So most of the expert guys or the guys who do image editing a lot and image retouching, they are very expert with this pen tool, and I think they normally use this. It is very precise. But for the hair part, I guess this magnetic lasso tool and refine edge works very well. This is all about today's lecture. If you don't understand anything, ask me questions, and I guess, let's move on to some new lectures. 75. Using Select and Mask tool to clean up background: Today, we are going to explore a new feature of Photoshop CC 2015.5, which is this Select and Mask. It has a lot of new features. I think they basically converted this Refine Edge into this new tool. So today we are going to discuss this one. Now the background we will be removing is this background from this child. You can see over here this background. You can see this child have a lot of hair and it is difficult to extract all the details in the hair easily. Let's get started. Now I'm going to delete this previous selection. First of all, what we're going to do is we are going to go to this Lasso tool, so I have seen that it works really well with this normal Lasso tool. What we're going to do is we're going to keep pressing our left mouse key and keep dragging like that. I'm going to get a selection and make sure the selection is not too wide from the hair. You can see I am leaving out some hair outside like that. Keep your selection inside. Don't take too much outside area into this. This is very rough selection. You can see over here, press Shift to make a straight line. I'm going to combine it with this one. One more thing, if your image is too big, there is a trick that you should keep on pressing the Lasso key and press Space bar and move the image up or down. In the meanwhile, keep pressing your mouse key. If you release your mouse key, it is going to close the path. While you are in this Lasso tool, don't release your mouse key, whatever you do. Now we are going to press this Select and Mask. Here we have, there are different preview modes. You can see over here there is a new one which is called Onion Skin. It basically shows the background with some transparency if you can see. This is what we have right now, you can see over here. Also other options are almost the same as the Refine Edge. You can see over here Shift, Edge, Contrast Feeder, Smooth. Make sure you click this deep contaminate colors. Make sure it is checked and output should always be new layer with layer mask. Now, I don't like this Onion Skin. I normally like this red background so I can easily see what I have on this selection. Here are few tools. You can see over here, the top one is basically Quick Selection tool, it is the same we used previously. Then we have this Refine Edge. It is the same Refine Edge brush we used before. Then this is the Brush tool. So what it does is you can see if I click over here, it is basically changing my Layer Mask. I have already masked this area, but if I want to show some area, I can always use this. Like that. You can see on here, here we have something left and I'm going to use this Brush tool to get the clothes back like that. If you want to remove some portion, you are going to press Alt or Option key and it is going to remove that portion from your selection. You can see over here, if I want to remove this and also this area, and also this area, I am pressing right now, Alt Option key along with this Brush tool. You can see over here, here's the size and hardness of brush, always make sure it is 100 percent hard. The second thing is now we are going to go to this Refine Edge brush tool. Also, we have Lasso tool over here. This is basically Quick Selection and Lasso tool. These are the same tools Photoshop already have, but they included in this Select and Mask view. We don't have to switch back. This is our Hand tool and this is Magnifier zoom tool. You can use Control or Command plus to zoom in and zoom out. Command plus and minus or Control plus minus. Now we are going to go to this Refine Edge brush tool, which is our main tool. I'm going to increase the size of the brush like that. Now I'm going to brush around the edges of this child. Now, make sure you can see how I'm brushing right now. The plus sign is almost at the edge of this kid. Here I am brushing inside the hair. You can see how it is magically removing all the hair and all the background behind those thin hairs. I think I'm almost really loving this new tool and new technique. You can see magically, it has removed the most difficult part which is hair, and the background behind those hair. It has removed all of them in just an instant. Now, if you want to increase the contrast, you can increase over here like that. Also you can see over here, now, I'm going to switch to brush tool. I'm going to brush over here. I'm going to zoom in a bit. I can see a bit of red background in this jacket, so I'm going to brush over here like that. Also in this area. I'm going to brush over here, just to fix two things over here. If you see anything else leaking out or having some problem, you can brush on that too. You can see over here, I'm brushing right now at the edges. I think they are almost fixed. Now you can see how it is so easy with this new Select and Mask tool to replace the background or clear out the background. Make sure you know what all these tools too, this is Quick Selection, this is Lasso tool. These are basically tools for selections and this one is Refine Edge. You are always going to move it along your edges of your image. This is basically the brush tool to hide and show your masked areas, masked areas or here now. Let me output to new layer with Layer Mask and press "Okay." Now you can see over here it is very clear and clean background. I have all easily removed the hair and the background, separated them easily. Here are a few more uses. You can see over here, I extracted this girl from the background. Let me show you. This was the actual background. I use the same technique and extracted it. You can see over here, I also produced this fake shadow over here. You can see also this girl, the actual image is this one. What I did is I removed the background and added cityscape at the background. Now, this tool is really cool. You can easily control and easily remove the areas. One thing is that if your image area is very blurred, like you can see over here, it have some problems over here. Make sure that your image is a bit sharp and you can see over here, everything is crisp, there is nothing blurred much. It can easily remove it. Now, if you want to learn this fake shadow technique, it is very simple. I just added a shadow, drop shadow with layer over here. I added this shadow, you can see over here, distance 20,111 size and multiply 13. It is basically going to add a shadow, a drop shadow. I'm going to hide this one so you can see what it is like. Like that. Let's move the distance and the spread a bit more. Now what I'm going to do is while this layer is selected, I'm going to go to Layer, and I'm going to Layer Styles. I am going to go to this Create Layer. Basically it was create layer from layer styles, but I don't know why they renamed it Create Layer. You can see over here that press "Okay." You can see that this drop shadow is separated from my layer. This is how you separate the drop shadow. Now I'm going to Command+D or Control+D my drop shadow. I am going to right-click and distort it. I'm going to move it around like this. Now my shadow is over here. If you want to further distort it, you can distort it at your will. You can move the legs closer to the subject, the girl, and also this area like that. You can see this is a very perfect fake shadow. It was just a very handy technique. I thought I should share it with you guys. This is all about using this new Select and Mask tool. It is really lovely and it is really fast to remove very difficult backgrounds and separate heavy or very difficult images from their background. If you have any questions, let me know. Let's move on to the next lesson. 76. What are wireframes?: Today we are going to talk about wireframes, what our wireframes, and what part they play in UI design. Every UI design starts with a wireframe. What is wireframe? Wireframe is basically the blueprint of your digital design. If you have an app or a webpage or some learning page, first you need to create a wireframe, so first step is a wireframe. Wireframe can be created by your client. Just give them pen and paper and let them sketch their ideas on that paper. Also, you can use Photoshop for designing wireframes. You can also use a lot of other tools. I'm going to show you just within few minutes. First let me show you some of the examples of wireframes. You can see this is the wireframe of a game and it was a betting game. I designed it using Photoshop. You can see this is how it looks. It has a lot of screens, but this is one of the screen. This is another wireframe and I designed it with another software, which is called XOR BR. It is very costly. Anyhow, I designed it, I think a few years back. This is one other example of a shopping cart website. This is another example of a mobile app wireframe. It is given to me by a client. This is how it looks. This is one of the screen. Then this is another one which was also given to me by a client. I think it was also designed in Photoshop. Everything is in gray. Most of the time these wireframes are gray scale, they only have black and gray and white. The designer has full authority in the end and full creative power that he can use any color over here. If I try to specify any color in the wireframe, then the designer might think that this is the primary colors and he should use it in his designs. This is one of the wireframe I got from client. This is another wireframe I designed for my own website. You can see over here, these are the few sections. I think you have seen my website. It is a bit different now, but it is the first wireframe I did for my website, it is designed in another software called Balsamiq Mockups. This is all about wireframes. The things you need to keep in mind are don't use too many colors, only emphasize, which is like this is button. I have used green over here. Also you can comment on the side, like I have commented in, let me show you. This is the one wireframe I did for a client. You can see here I have commented why I am using this technique or why this UI element is here. You can see over here also these sections, all the sections, they have comments like this. You can also use comments even in Photoshop and draw a box over here with red background or yellow background and put some quince over there. This is all about wireframes. In the next lesson, we are going to review a few of the tools we use for wireframes. What are the online tools and what are the other software and apps. Let's move on to the next lesson. 77. Tools used to create wireframes: Now, we are going to talk about some of the tools we use for wireframing. You already know what wireframes are. Let's go to the webpage where I have all the links. This is one of the tools I have used, Axure RP and it is a bit of a very advanced tool. It also creates prototypes. Prototypes are working wireframes where you click the links and they go to the next page. It can also export your prototypes in HTML, so this is good for big projects like e-commerce a project, or something very big. So you can use this one. It is a bit pricey. I think, maybe 3, 400, I don't remember. I think it is 495 per user and Team have 895. I think it is good for big software companies or firms. I wanted to show you that you know that this is one of them Axure RP 8. Then we have another tool which is very famous among different UI designers. I really loved this one, Balsamiq Mockups. It is very easy. Its wireframes are very sketchy, so don't have very specific corners or something like this. Let me show you some of the examples. Where are the examples? This is one. You can see how this website has laid out and this mock-up has been built. I really liked this software, Balsamiq Mockups. I think it costs around $90. I think it is a bit in the range. But if you already have Photoshop, this is the best option. You can use Photoshop to create your wireframes, and this is the next topic I am going to cover. If you have Photoshop, you can download a lot of free mock-up kits. So type over here, "Free mock-up kits," and you will be amazed to find a lot of wireframing kits. You can see this is one of them Material Mockups and 15 eCommerce screens. Although they are for mobile screens, I think you can use these components in your webpages too. This is very nice. You can see over here there are these other components. You can use them in your webpage design too. This is one of them, it is in Photoshop, Sketch, and everything. One other wireframe kit which I really love is by this guy Rafal Tomal, I think you need to subscribe to his site to download this, but it is a very good wireframe for websites. Such boxes, a lot of great elements; heading, subheading, paragraphs, lists. It has a lot of stuff. You can see over here you get free access. You need to subscribe to download it. Another wireframe kit is by this Pixeden, free by website. I will include the link, so don't worry. You can see it has a lot of elements, video controls, tooltips, icons, calendars, and a lot of UI elements. The online tool I really like is this one Moqups. I am going to share this mock-up with you in the next lesson because it will be your ultimate web design challenge so you know what skills you have acquired in this course. If you are a UI designer, a web designer, you will get a wireframe from your client or your customer that I need this website design. If it is a very good firm, they have done some user experience research. The end product of every user experience research is going to be this wireframe. Ultimate web design challenge. I use this Moqups tool, moqups.com. Create a free account over here. You can see you have a lot of stencils over here like this, button, links, checkboxes, single link, label, nodes, and avatars, grids, icons. This is the one I used over here. You can see this icon. If I click over here, you can see. If I click once, it selects it and if I click twice, it shows me the options. This is a very good tool. You can see some of the options over here, like bring forward, bring to the front, backward. This is layering options. Then we have these alignment options. You can select two elements and align them. This is one of the elements I have used from here. You can change the fill colors over here if you want, maybe like this. This is a very nice tool. First step in all UI designs in every web design project, in every mobile app project, you need to first figure out what you are going to design, so first step is your wireframe. This is a wireframe I have designed for you guys. I will share the link with you, and I should say that challenge word in the next lesson, or should I say it right now? Okay. Here is the ultimate challenge for you. You have to design a very nice website using this wireframe. I am going to give you a few tips how you are going to approach this design. Number 1 is, first choose a color scheme. Use any logo or just place some texts over here like logo. Keep in mind that one color you are going to use for links and these buttons. Maybe you need to change few colors over here like the sizes of different text. Keep in mind that if we have this section, this is the first section, the space between two sections like this one and this one should be good, and should be equal. If you have section 1, section 2, section 3, this one is section 3, the space between all these sections should be same. So top margin and bottom margins should be same. One other thing is, whenever you get a mock-up from a client. Wireframe or mock-up basically it is a lo-fi mock-up. We call it low-fidelity mock-up. Low-fidelity mock-up is when you get a wireframe from your client like this one, what you are going to do first step is that you should have the content. If they don't have the content, it is going to be a bit of pain. The second thing is that don't always follow everything you see in the mock-up. You are a designer, you can think in other ways like you might need to move this over here. Even the mock-up says that it should be here. You can use them over here or maybe at the right side and then move this call over here. Also, you can shift these if you want the video on the right, you can use it. Or even if you want the video in the center, you can place it. This wireframe is not basically the ultimate design guideline for you, this is just showing you that these elements should be present in this section. These should be over here. These services should be like this, and we need a button below them. Our recent projects will have these three categories. If we click over here or click on this one, it is going to move to the next one and the third one. Let's change the color of the text. It's just going to be gray and this is going to be white. It is the same pattern I used in this top navigation bar. This is basically a tab bar. So switching creates new tabs over here or it rearranges these images. Also, make sure that if you are using some images in your profile or your portfolio or this design, mentioned their name and titles over here so the user can know what this is all about. Now at the bottom, you can see you are free to move them around or use any style you like. This is how we use wireframes in different situations. If you had a very big website or you need an interactive prototype, you can use this one. Also, you can use webpage wireframe stencils, I showed you guys. This is the software Balsamiq Mockups. If you design a lot of mock-ups or wireframes, you should purchase this one. Other than that, I think you are good with these free options. You cannot export this. Also, you can see in these settings, we have 960 grid. I showed you the grid. If you are a coder or designer, you can design your wireframe using a grid even from the start. You can switch to this one or no grid. Also you can see the width is 960, you can increase it's height also. This is the project title. Keep exploring. This is how you undo and redo things. These are all the elements, stencils you can use. You can also import images over here and drag them over here. These other pages, if you want multiple pages of same website, maybe learning page, contact us page, blog page. You can add a new page over here like that and keep designing over here. You can also group elements over here if you want. This is a group control G or lock their position. Keep exploring this tool. I think you'll really love this wireframing thing. It is always the first step in all the UI designs. Keep in mind this is the challenge; I want you to design this website for me so I can judge what you have learned in my course. Share with me a link posted in the questions or message mean separately. I will try to give you tips on how to improve if you show me the design, otherwise, I don't know how you can improve. Always show your work to your instructors or teachers or your fellow designers that do you think this is looking great? Or do I need to improve something? Let's get started. Try to design this wireframe. I need a very good website. You are open to use any free images or icons from any source, any free source. Let's see what you can come up with. Let's move on to the next lesson. 78. Exercise →Redesign Dribbble Shot Part 1: Today, I got a really interesting question from one of my students, and what he asked is that how to create these glowing portions on these buttons and how to get these glowing lights over here. There are many techniques to do this. Basically it's a dribble short. Let me show you what he shared with me. Actually, he shared this document with me. This is the design from our dribbler, and it's a very nice pressed and elevated buttons states. From last night, I was trying to create and replicate this effect, and I created these two files you can see over here. This one is light version and this one is dark version. I'm going to share both the PSTs with you guys, so don't forget to download. Now in this series, I am going to create only this dark version. This is going to be a challenge for you. You need to create something like this. So I'm going to create justice dark one. Let's get started. Now, during this lecture, my ultimate goal is not to create this awesome effect, but to make you understand how the designer achieve this effect and how he used different effects to get this whole awesome best and elevated states. Now first, I'm going to open up a file with the 1440 by 900 pixels. Now, the first step is going to be your solid color. We need a background color, which is going to be our 3-2, 3-2, 3-2, which is basically brightness is 20 percent, and zero saturation, zero hue. It's a dark gray color. Then we are going to create a rounded rectangle. Select a rounded rectangle, click once over here, and we are going to create it to be 620 pixels width and 100 pixels height, and radius could be eight or 10 or five, it's up to you. So I'm going to set it right now, like that. Now the color for this one is going to be 18, something like this. Or maybe 16. It's up to you. I think 18 is good. Whenever you try to replicate something, you need to watch very carefully what is inside this design. Let's zoom in and we are going to dissect this design. First, you can see there is one outer layer, you can see this is a container which is looking like best effect over here. Now what we have in here is a dark to white gradient over here at the background. You can see over here in this, then there is one more layer at the top. You can see over here, this is basically the layer inside this background container. So there are basically two containers, and on top of those two containers, these are the three buttons. So basically, we have five layers on top of each other. Now, let me create another one. We are going to create another one inside this, and this time, it is going to be 604 pixels wide and it is going to be 84 pixels in height. Make sure you can use eight pixels or whatever. This is going to be inside that and its color is going to be a bit more darker. So I'm going to press 14 right here, and we are going to align these two inside each other. Now to get the best effect, this outer layer, the background outer VG, I'm going to name it, and it is going to be inner VG for inner background. Now in the outer background, we are going to use gradient overlay. This is the gradient I am going to use, and it is basically from dark, black color, which is going to be this black color to this white. It is in reverse and make sure it is on multiply, or you can set it to normal, I guess. What we are doing is, we are creating this black to white curve effect using this. So maybe we can adjust it more like that. So you can see here we have white areas and here we have dark areas. We have created our two base layers. Now we are going to create our buttons. So click again, and we need our button to be 200 pixels wide with a height of 80 pixels. Now this is our main button. This is our button, btn, and let's move it over here on top of here. You just align it in this like that. You can see how I created all these three layers. This one is basically two pixels wide from each sides. This is the buttons. We are not using any stroke effect to cover this. This is our base layer which is covering these buttons to create this rounded affect all around these buttons. Now we are going to get some elevation and few more effects to this button. Now, the trick is that we can achieve this with a lot of facts. We can use this inner bevel, and we can use a 100 percent depth or maybe less than that, maybe 20 percent, and we can reduce the size, and maybe this, like that. We can reduce this size over here, and also we can increase this size. There is one technique which involves this bivalent emboss. The same thing we can achieve with this gradient overlay. Now in the gradient overlay, I'm going to use this, which is our blending mode. Normal and opacity is 15 percent. Now, what I'm doing here is that we are using three colors stops. So you can see how this curved effect has gone over here, which is these two colors. So whenever you click some colors, you can see this is basically the stop that controls how wide this is going to span. Make it close to the other color and you will see this bump in your buttons or whatever you are designing. If you make it far from here, it is visible less and less. This is how we create this elevated or push button effect using gradients. This is very tricky part. If you can learn it, I think it is going to give you a lot of benefit. I'm going to reduce this effect to like 23 or 20 percent. Like that. Now you can see how this effect has gone. You can use bevel and emboss. You can reduce it maybe like that. I've used 40-degree over here and you can reduce the depth to 15 or maybe something like that, or you can use this gradient overlay. There are many ways you can create these effects. Now with gradient overlay, I am going to give some inner shadow because you can see over here we don't have any elevated light over here. This is our inner shadow and I am going to use whitish color over here for inner shadow. It should be at the top, so distance will be two or one. We are going to reduce this size. We are not going to multiply it, so we're going to use normal. We are going to reduce the opacity to get the effect like that. This is very minimal effect. You can increase the size if you want to. It's up to you whatever you're liking is. You can also reduce the size and softness. We can change the softness like this one. Maybe three is good. You can see we have some elevated button over here. Maybe we can add some drop shadow with it. We can add some drop shadow, 90-degree, multiply distance should be two and size should be four, five, or maybe eight is good. Let's see how this shadow is coming from here. Let's increase the distance and also this. I'm going to use 20 over here. It looks good. We have some shadow. If you want to add multiple shadows, it's up to you. You can add multiple shadows over here. Maybe we can add some light gray shadow and expand it or more. Maybe like that. We can set it to multiply, to have multiple shadows and it will look more cool and more better. We have this button. We can use the color over here maybe like that. Gradient overlay, maybe we can use multiply. This is getting great, looking good and maybe we can increase the multiplier effect over here. We are going to add some text over here. Let's add some text, one. I'm going to use one. Let's color it white or maybe grayish white like that. Maybe moving it in the middle like this. Now we have almost completed the normal elevated effect. Now let's move to the effect where we need a glow over here. There are many ways to create that glow, but I'm going to create a nondestructive method. Duplicate this button, button Layer. Duplicate it, Control J. What I'm going to do is I'm going to remove all the effects. Then we are going to remove the field, so we don't need its color. We don't need the middle color. We are going to blend two colors, two methods, or two layer styles. The top one, the top button, I'm going to give a stroke. I'm going to give us color stroke of this grayish color CACA, two pixels wide. We have this effect. Basically our Base button and at the top we have just the stroke with an empty button. It's basically an empty button with just a stroke. Now the next step is right-click and we are going to convert it to Smart Object via Smart Object because we need to remove some portions of it. After converting to this Smart Object, we are going to use our masking tool. Create a mask over this layer and get this Brush tool. Press "B" on your keyboard and "Right-click" and make sure you have this tip, this blurry tip. Don't use hard brush. Set the opacity to 50 or 60 percent and start removing these areas. We are going to remove this area. You can see how we are going to create this effect. Basically, we are going to brush out some of the portions like that. For this light over here, brush in this direction. Give some strokes of the brush like that. Very light gentle strokes. Now, you can see we have this light over here. A very nice light. You can always go back or you can paint with white color if you want to get more light over here like that. This is very cool, very easy, and non-destructive way of creating this light. Now we have created the light. You can adjust it with arrow keys if you want it to be at the bottom, maybe a bit below, or at the top, it's up to you. I'm going to shift it over here and I'm going to use a bit less opacity like 50 percent or maybe 75 percent. This light is looking good and this is very nice effect we have over here, and if you want to add some more shadow or more depth into it, we can use this bevel and emboss color effect. Maybe we can use multiply over here, increase this darkness over here and, maybe reduce this white area or opacity. It is looking great, very nice elevated button. This button and the third one, they are the same. I'm going to get them into one layer. This is our layer group, this is basically our light, and this is one button. I'm going to Control J and I'm going to move it over here at the end. We have completed two buttons. One is the first button and this last button is three. In the next lesson we are going to create this pressed button. The Insert button which is pressed and it's glowing effects. Otherwise this lecture will be too long. Let's move on to the next lesson. 79. Exercise →Redesign Dribbble Shot Part 2 : Now we are going to create the glowing effect and the best button in this lesson. Let's get started. What we're going to do is we're going to copy this same button and we're going to move it in between these buttons. It's in these buttons and what we are going to do is first, we are going to remove this glow, here at the top. We don't need that glow. Then the next step is going to be our gradient. We need to reverse the gradient, so it is basically pressed. We are also going to change this gradient a bit because it is looking very sharp at the top. Maybe we can move it like that or maybe like this. It should be darker because it is pressed. Then we're going to remove this inner shadow and we're going to convert it to some dark inner shadow like that. Like this. Or you can also totally remove it, or maybe we move the distance to zero and use this to four, and we are going to increase the size to be 100. Basically we are giving some dark shadow all around it, all around this button. I think we have some space issues, so let's fix them first. It is our second button. Let's move the third button a bit over here, maybe one more pixels. Then this one too, let's move it over here, like this. We will adjust the background and things after some time. Right now we are more concerned about this pressed button over here. Maybe we can remove this bevel effect, and also we are going to move it around. Let's change its text to two. Now you can see it is already looking a bit pressed. Now there must be one thing we need to change and we are going to add one more inner shadow. This inner shadow, where you give some more depth. We are going to get some distance over here, its size should be zero. We are creating two inner shadows. Let's change the color to a bit darker, maybe like that. Like this, and let's make it a bit softer. Now we are good. Now at the bottom we need a drop shadow. It is going to be remove all the drop shadows, and we need a white drop shadow over here. This is basically pressed, so its light should be reflected over here. It will be darker from the top, this top area, and it will be lighter from this area. We are going to add a drop shadow which will be a bit whitish drop shadow, and we are going to reduce its size. We are going to change its blend mode to overlay. You can see a little bit of shadow over here. Let's reduce the size to 12, and distance should be eight pixels, I guess is good. We can increase the effect by moving this slider up and down. It's up to your liking, whatever light you want over here. I think I like it to be at 75 percent, it's good. Maybe I need to change the inner shadow a bit more. Right now it is looking a bit dull to me. Maybe I need more inner shadow, which is going to be like that. I'm going to give some more dark shadow over here, and maybe I can increase the size. Let's move it a bit up like this. It is looking very nice pressed effect. If you want you can also reduce this top dark area over here. These are fine adjustments, you can do them all night. I'm going to quickly create this button right now for you. Let's change the color to this blue, and then we are going to give it Outer Glow effect. Outer Glow effect, make sure that the color you use is very sharp. You can see over here saturation is 100 percent, brightness is a 100 percent. Make sure these two are 100 percent and use any color you like. It is going to really shine and adjust these values. This is basically spread. I think two or three percent spread is good. Then we have the size, 10 pixel size. Outer Glow is like that. This is how we are going to use, also make sure it is a bit opaque and a bit transparent. It will be in the middle. This is how we are going to give this glow effect. Now coming to the other glow effects, over here and over here. These are very old techniques, but I'm going to show you over here. There are many ways to create those glowing effects. We are going to select this area over here, and we can use brush. This is the oldest technique, light brush. Now, what we're going to do is we are going to select our brush tool, and increase its size a bit. Select the color we like to brush with, like this one. Make sure it is a bit sharp color. Hold your brush again, and we are going to use brush like that. You can see over here it is giving us a glow light and we're going to use overlay, or maybe we can use lighten like that. Now, what we're going to do is we're going to remove the rest of the light. We just need it to be over here in this area. We are going to Control click or Command click this button, and we need to remove everything from this button. Hold your eraser, or maybe select this light brush and press "Delete". What is happening? Maybe I need to use eraser over here. Oops. Now I got my eraser. Let's remove this like that and press M and we have done this work over here. Now we are going to select this area and control shift I or command shift i to invert the selection, and then again we are going to grab our eraser tool and we are going to erase this extra light over here. Press M or control or command D to deselect. You can see over here we have a very sharp light. If you want to reduce the light, you can use the opacity or maybe again, you can use this masking and we can again brush the areas we don't need over here. This is all the game of hiding and removing our effects over here. You can see how we can do that easily like this, maybe we can reduce the effect over here like that, and we can multiply it control JS to enhance the effect. If you want to reduce the effect you can use something like that. Same technique is going to be used at the bottom over here, or the second technique I'm going to show you is this. We are going to use a rounded bar over here maybe few pixels wide. Control D make sure it is in the height it is going to be 2-4 pixels don't make it too much big, like that. We have this line bar over here and we are going to use some really nice technique which is going to be blur, Gaussian blur. Before that we're going to convert this to smart object like that, so I'm going to use the blur like this. You can see there are too many techniques to create the same effect, so maybe I can use another blur which is motion blur. I want it to be in this direction, so I can use something like that. You can see how cool this effect is going to be. It is like light emitting from this bottom of this button. You can adjust the light wherever you want it to be, and you can use opacity like 50 percent or 20 percent or 30 percent or maybe I think 450 percent was good otherwise it is looking very dull. You can use overlay effect or maybe you can use color burn it's up to you or maybe normal. I think normal is looking good and I need to increase the effect to 75 percent like this, it's looking good. If you want to reduce the size, you can also transform this and use the height and reduce the height to three pixels. You can see now it is a bit slim and more sleek. In the same way we are going to give the glow on these two sides, so if you look at this over here you can see there are lights over here on this area and this area. This is the same way we are going to use this. Maybe we can again use the same rectangle or maybe we can duplicate this, control T and we can rotate it like that, reduce its size like this and we zoom in, use the handles over here, reduce its size to something like this maybe more. Now, we need to change the motion blur direction, so it is going to be in this direction. It should be 90 like that, so maybe we need to reduce the size more or maybe we can reduce the size of the motion blur like this. Now you can move it over here. You can see how the slide is looking great. If you want to hide the portions, you can clip this inside that or you can use again the masking and brush it out like that. I'm going to brush it out right now. You can see how this effect is looking great and cool and very geeky. I'm duplicating it and putting it on the left side. Now, I think our best effect is almost done. Maybe we can darken it a bit more from this area and also this area. This is how you create different light effects or growing effects around the buttons or on the edges of the buttons, or you can create glowing lights with brushes and hide the parts of those brushes. Masking is our key technique and we mostly have used the smart objects. You need to know that how I created all this, we used gradients, then we use bevel and emboss, we use these lights. I have created these lights with three techniques. One was brush, one was with layers stroke effect, and one was just by using a smart object layer with, so one effect was this motion blur. I'm forgetting a lot of things. This is how we create this cool effect. Now, your challenge is that you are going to give me something like this. Now, the tip is that whenever you try to create or replicate something, you need to zoom in and see all the pixels and little details over here like you can see over here, there is a border of black, a line over here then we have this inner shadow and at the top we have glow. Same is over here, the same thing has done over here. The only difference is that they have soft shadows over here and the colors are a bit more bright and light. This is the end of this awesome lesson to create this dribble effect. I'm going to create a lot of new lecture soon, so stay tuned and if you have any questions ask me. Let's move on to the next lesson. 80. Converting PSD to Coding Tips: A lot of you might be wondering how to convert any layer or how to copy its CSS properties if you want to convert it to some HTML or some web page element. Let me show you a very simple trick. It is just a Photoshop and default CSS copy command I have applied to pixel stroke to this layer, this rounded rectangle and then some drop shadow. So just right-click on this layer and click this Copy CSS. I have made a sample file over here, so let's test it. We are going to paste this as a test class. So test. If you are not from a programming background, don't worry, just I'm going to show you that how we are going to use this CSS values. Basically, this is the CSS values. Most of the time we might not need this position absolute left-hand top thing over here, also this z-index. I'm going to comment this out. Let's open up our file in a browser and see, okay, where is our styles? Okay. The problem was this display setting. I have started to display block. Here is our block. Let's see how it is going to look when I'm going to use absolute. It is moving around due to this HTML page and with respect to this HTML page. This is how we are going to convert our CSS and PST files to CSS. So just copy this over here like that. Now I'm going to copy this text over here. I'm going to right-click Copy CSS and I'm going to paste the styles to my heading 2 style, h2. Don't worry if you are not a coder, if your coder or developers want HTML, just give them this code and that will be good enough for them. So don't worry about if you don't know much of the coding. Make sure you remove this z-indexes and this absolute positioning from here. Absolute position left and top, always remove them because we don't need them. This is how I'm going to show you. This is our text, "Hello, I'm some text here." Same font, same color, everything. Basically what we really need from our CSS is this font size, font family, color, line-height and the width and height, we don't need for font sizes, so let's remove it. What is this? Okay. This is one way and second way is this plugin which is called CSS Hat. I have purchased. It's a premium plug-in. It converts your styles to CSS Less and Sass and Stylus. Concrete is having some problem showing my drop shadow over here. You can see if I switch to this layer, it is not showing any drop shadow. But for the CSS part it is showing very good like border two pixels, solid and color, background color in hexadecimal values. We can set its options over here. This is a very good plug-in and if you are a developer, I think it's a must have plug-in. Now there is one more tool that is very recent and it is this Avocode. I'm just using its trial version and I guess it's very good app. But the problem is, it is a bit pricey for my taste. You can see over here if I select this upgrade over here. Now it has online integration with these desktop apps. If you upload any file from here like Open Design and load your PST file over here, it will show you sizes. You can select tools over here like measure and click on any layer. It will show you the size of this box. Now it is showing it is a text file and these are the settings. Also it is showing the distances from all the corners. It is very awesome. Along with this, it is showing all the code over on the right side, some export options. Then I have the font I'm using, which is Oblik Bold over here and if I go to this Layers panel, I can see all the layers used like these. This is very great. I'm really liking it, but I would really purchase it if they had some plan like I can buy it for a year. They have it for a month, like one month usage like Garage, you have unlimited designs business enterprise. If you are working in a very big team or in a team, I guess this is very good option. You can go ahead and purchase this Avocode and I think it is really good in converting your PST files to CSS. But for now on I'm going to stick to this Photoshop default Copy CSS command. This is the tip I really wanted to show you guys today. One of my students asked the question to convert something to CSS and this is the answer. This is a request video. Stay tuned and I will be updating you very soon. Let's move on to some new lectures. 81. Exporting Images for Web Design Tips: Let's talk about saving images for a Web and UI design. So when you try to export or save your image for Web design, or you might get into a lot of problems, like you might see different colors on export. There is a very simple workaround around this. So let me show you the process and the things you need to keep in mind while exporting your images for Web design and UI design. This is an image. If you want to export it, first of all, you are going to use this Export Command. Don't use Save As or Save as a JPEG file. We're going to use Export and Save For Web Legacy. Click on this and the shortcut is Alt Control Shift and S. Now on this panel, make sure you have PNG selected or even JPEG selected. Both of them are good. You can reduce the quality of JPEG file to get the size you want. You can see very tiny size JPEG file size coming over here. It is 151.5 kilobytes. So if you want very small image, you can reduce it like 70 percent. Now it is 124.8 KB. While you are designing websites you are very much concerned about the sizes of images to speed up your website and reduce the loading time. Now, this is how we save a JPEG image. You can also click this progressive. What it will do is it will load your image in different sessions. Like first, it will be a blurred image, then it will start appearing slowly and slowly if you want this option. Make sure this Optimize is clicked. The very, very important is this convert to sRGB. Always make sure that this is not checked. Most of the time It will create a lot of color profile problems. So make sure it is unchecked and preview is set to monitor color. You can also use this Internet standard RGB. No color management. I am going to set this one and then hit "Save". If you want to change this image size, you can change it over here, like I wanted to 1024. So the height will be this, and width will be this. This lock means that they are leveled relative to each other. So it will increase and decrease in proportion. Most of the time we don't need to uncheck this. So for example, if I try to use height 900 and you can see it is distorted. This is how we use this panel. Most of the time for Web, I recommend this PNG 8 or PNG 24, transparent image. Mostly we use PNG 24. So if you have very low level of colors, it is not a very colorful image, then you can go to this PNG 8 file. You can see the preview over here. Let's make this again proportional. Now you can see here we have a color table. It is showing 256 colors and I think they are enough to show my image and everything accurately. So I am using this, make sure this transparency. If your image have some transparency, check this one. Sometimes the PNG 8 format might not display transparency very nice. So you need to switch to PNG 24. It is the best option to show transparency. So if we go to PNG 8 file, don't worry about these settings, just make sure that this one is perpetual and this is set to diffusion. Diffusion gets better results. You can reduce the colors if you want to reduce the file size. You can see over here it is 31 K. If I try to reduce the colors to 64 the file size is 24 K, but you can see my image is a bit distorted. Let me zoom it. Click over here. You can see I have some pixelated face over here. So if I switch to 128 and then back to 256, it is showing very nice. So these are different settings over here. You can also save your presets over here. If you have selected some options, you can save settings and name them like UI design, PNG 8, UI design, PNG 24 something like that. So that is all about saving your images and making sure that their colors are the same as you have designed them. The other thing is make sure that your color is set to this RGB 8. In your view, your proof setup is set to monitor the RGB and your proof colors are unchecked. So this is another thing you need to keep in mind. So if you have your proof color set to, for example, CMYK, then this can cause a lot of problems when you try to export it. Also, it should not be on the Internet start and standard RGB or sRGB. Make sure it is Monitor RGB, Proof colors is unchecked and then you always use this Export Save For Web. You can also use this Quick Export, but make sure that your export preferences are set to where you have unchecked. Here we have export. Make sure it is set to PNG transparency and Convert to sRGB is unchecked. So these are the things I really needed to tell you guys and most of the Web developers and Web designers, when they tend to export their images and slices, they need to keep in mind all these things. This was a request video and one of my students was having problem in this matter. I will be uploading a lot of new tips and tricks. So stay tuned and let's move on to some awesome designing. 82. Tips on using Grids in Photoshop: I'm going to show you a very simple trick on how to use your grids while designing, so this is a tip, let me show you. If you have a grid like this, like I showed you in my previous lectures. While you are designing, sometimes you need to hide it and show it again if you have it in full opacity like this. So this looks really bad when you are designing. What I do is I color them or color overlay them, like this dark gray shade, and I reduce the opacity to 10 percent like this. Then I try to lock it over here. You can see this little lock in the Layers panel. I lock it so I don't accidentally move it around. While you are designing, you can easily show your grids and align things better and do it very nicely. The other thing I do is I move this grid at the top. So move it all above all your layers and keep it there and keep it in very low opacity like five percent or 10 percent and keep designing. So this is a very neat and simple trick. So stay tuned for such more tricks. I will be sharing them a lot. Let's move on to some new awesome lectures. 83. Font Match → New features in Photoshop CC2017: There is another new feature in Photoshop CC 2015.5, and which is basically match font. Where you are going to find it? Over here in the type, you can see Match Font. It is a very new and very cool feature. You can easily match fonts. This is a Dribbble shot from someone else UI designer. It is work off someone else so I don't know who is responsible for this kind of work anyhow. Now what I'm going to do is I just open up a random Dribbble shot from Dribbble. I'm going to match fonts if I can see that I have same fonts like this one. First, I'm going to do is I'm going to select some portion, make sure it is very small, don't use too much or too wide. Maybe you can go to these four letters, and go to type and match fonts. Now, it is going to search for some fonts. Also it is going to sync fonts from Typekit. If you have subscribed to Typekit, it is going to get some fonts from there. It has found 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 fonts, which are almost similar. Now the best phone I like over here is this Tw Cen MT Regular. If I click over it and press "OK", now it is selected. Now I'm going to go to my Type tool. If I try to type over here, the same words, payment, you can see how closely it has matched my font. I think they are identical. This designer used the same font I am using right now, it is Tw Cen MT. It is basically geometric font. You can find more about fonts in my other typographic course. This is another feature which is very cool. You can easily match type, faces, and fonts. You can find if you have already installed any font that is closer or close match to the font used in this any image. So rather than going to websites, what font or whatever to find the font used, you can use this Photoshop tool and very nice add on, you can use it and find the closer fonts you want to use. This is a new feature in Photoshop CC 2015.5. If you have any questions, let me know. Few of my students requested these new features in Photoshop in the latest version, so I'm creating this lecture and one other. Let's move on to the next lesson.