UI Design in Photoshop - Get Started with UI Design Career | Muhammad Ahsan | Skillshare

UI Design in Photoshop - Get Started with UI Design Career

Muhammad Ahsan, UI UX Visual Designer 10+ Years

UI Design in Photoshop - Get Started with UI Design Career

Muhammad Ahsan, UI UX Visual Designer 10+ Years

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
83 Lessons (8h 35m)
    • 1. What this course is all about?

      4:04
    • 2. Lets setup Photoshop CC2017 Preferences for UI Design

      6:19
    • 3. Setting Up Custom Keyboard Shortcuts in Photoshop

      4:19
    • 4. Installing Scripts in Photoshop

      5:40
    • 5. Installing Photoshop Scripts on MAC

      2:15
    • 6. Photoshop Extensions for UI Designers

      7:09
    • 7. Power of Photoshop extensions

      9:28
    • 8. How to Install Photoshop Extensions

      5:46
    • 9. Installing Extensions using ZXP Installer Photoshop CC2017

      6:29
    • 10. Installing Photoshop extensions on MAC

      5:07
    • 11. Setup Panels and Workspace for UI Design

      7:16
    • 12. What is Color Calibration?

      8:24
    • 13. Best Monitors (LED) for Designers

      2:21
    • 14. Operating System Based Color Calibration

      7:29
    • 15. How Photoshop's Interface Works

      5:03
    • 16. Photohsop New Document

      4:12
    • 17. What are Artboards?

      6:22
    • 18. How layers works in Photoshop

      7:53
    • 19. Text Panel in Photsohop

      4:38
    • 20. Shape Tool in Photohsop

      6:34
    • 21. Basics of Pen Tool

      2:53
    • 22. More on using Pen Tool

      15:52
    • 23. Aligningment in Photoshop

      6:02
    • 24. Selections in Photohsop

      6:21
    • 25. Common Shortcuts in Photoshop

      14:35
    • 26. Using Layer Masks in Photoshop

      5:26
    • 27. Using Clipping Mask

      2:48
    • 28. Challange Exercise → Clipping Mask

      0:50
    • 29. Using Smart Objects in Photoshop

      7:40
    • 30. Linked Smart Objects in Photoshop

      7:00
    • 31. Using Layer Comps in Photoshop

      6:27
    • 32. Mastering Drop Shadow Layer Effects

      3:40
    • 33. Using Inner Shadow Layer Effect

      2:17
    • 34. Using Stroke Layer Effect

      2:43
    • 35. Re-using Layer Styles

      2:03
    • 36. What are Gradients?

      2:03
    • 37. Use of Gradients in UI Design

      3:41
    • 38. 3 ways to create Gradients in Photoshop

      4:49
    • 39. Using Gradient Editor in Photoshop

      7:30
    • 40. Using Gradient Overlay Layer Style

      5:34
    • 41. What are Patterns and how we use them in Web Design?

      2:28
    • 42. 2 Methods of applying patterns

      4:59
    • 43. Creating Patterns from an image file

      2:35
    • 44. Installing and using .pat files

      5:11
    • 45. How Light and Shadow works in UI Design

      4:01
    • 46. Examples of Light and Shadow usage

      2:22
    • 47. Color Schemes for Beginners

      1:54
    • 48. Using Hue Saturation and Brightness for Color Schemes

      1:28
    • 49. Online Tools to create Color Schemes

      5:29
    • 50. Selecting Fonts and Typography

      8:55
    • 51. Using Grids in Web Design

      5:51
    • 52. Creating Grids in Photoshop

      6:14
    • 53. Soft Shadow Button Creation Challange

      0:25
    • 54. Soft Shadow Button Design Solution

      12:47
    • 55. 3D Button Design Challange

      1:12
    • 56. Pressed Effect in Photoshop

      7:09
    • 57. Modern Header Design Part 1

      8:46
    • 58. Modern Header Design Part 2

      8:49
    • 59. Modern Header Design variation

      9:02
    • 60. Color Overlay Effects for Hero Area

      11:25
    • 61. Transparent Masking Effect Header Exercise

      13:15
    • 62. Designing Tabs in Photsohop

      0:58
    • 63. Designing Tabs theme 1

      14:14
    • 64. Designing Tabs theme 2

      8:08
    • 65. Gathering Resources for IOS App Design

      4:00
    • 66. Lets start the IOS App Design

      4:35
    • 67. Adding menu items to IOS App

      5:47
    • 68. Adding text to IOS App Screen

      5:30
    • 69. Adding Buttons to IOS App Design

      11:51
    • 70. Using App Mockups to show your designs

      4:12
    • 71. Simple Trick to remove white backgrounds

      3:20
    • 72. Removing small objects from image with Spot Healing

      4:26
    • 73. Making Colors pop in images

      6:48
    • 74. Removing Background with Magnetic Lasso tool

      15:53
    • 75. Using Select and Mask tool to clean up background

      10:20
    • 76. What are wireframes?

      3:45
    • 77. Tools used to create wireframes

      11:59
    • 78. Exercise →Redesign Dribbble Shot Part 1

      15:11
    • 79. Exercise →Redesign Dribbble Shot Part 2

      14:43
    • 80. Converting PSD to Coding Tips

      6:18
    • 81. Exporting Images for Web Design Tips

      6:59
    • 82. Tips on using Grids in Photoshop

      1:30
    • 83. Font Match → New features in Photoshop CC2017

      2:46
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

1,085

Students

2

Projects

About This Class

BEST SELLING Course (ALL IN ONE Adobe Photoshop Course)

Do you think that UI Designers use Photoshop in the same way as other Designers?

Do you know what are the basic concepts, settings and tools UI Designers know and you don’t?

So if you want to learn UI Design with Photoshop and upgrade your confidence and Skill levels in Photoshop; this course is for YOU. This course is equally good for Beginners and Experts so don’t worry if you haven’t used Photoshop before.

Most of us don’t know the basic settings, shortcuts, tools and extension we need in Photoshop to become a UI Designer, we make same mistakes and keep on wasting time online searching for different settings and answers to common UI Design issues and problems.

What will you learn?

  • Master basic tools of Photoshop specific to UI Design.
  • Apply your knowledge to Landing Page design, Web App or Mobile App Design
  • Use Common Shortcuts, tools and Secret Extensions to speed up your web design workflow
  • Learn about basics of Light and Shadow concepts in UI Design
  • How to use patterns and Gradients to improve your designs
  • Learn how User Interface Designers use Photoshop in their daily routines
  • Using & Creating Guides and Grids with Photoshop Extensions
  • Installing and using Photoshop Extensions for UI Design purpose
  • Using Gradients and Color overlays to create Modern Designs
  • Know about all the plugins and extensions used by UI Designers use all the time
  • Learn how to create and use GRIDS in Web Design
  • Designing Mobile app in Photoshop (Step by Step Exercise)
  • Image Editing techniques in Photoshop for removing background
  • Image color adjustment basics for UI Designers
  • What are Wireframes, how to create wireframes & tools to design wireframes?
  • Dribbble Shot re-design step by step exercises

Course Structure

  • More than 20 Practice Examples and design Challenges to get you better at UI Designing
  • Quizzes to test your knowledge of Photoshop regarding UI Design

Student Request Lecture Series

A lot of lectures are added on weekly basis on the request of my current students so join in and request any design problem or anything new you want to learn

  • How to Install Photoshop ZXP extensions in CC2017 (Student Request Lecture)

Take This Course Now and Start your career as UI Designer

44c88ead

Meet Your Teacher

Teacher Profile Image

Muhammad Ahsan

UI UX Visual Designer 10+ Years

Teacher

I started my Freelancing Career 10+ years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 2 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects

What my students are saying about my Classes?

 

AWARDS & WINS

I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

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 s