Shape Tool for UI Design (Combine and Subtract Shapes)

Muhammad Ahsan Pervaiz
A free video tutorial from Muhammad Ahsan Pervaiz
UI UX Designer + Freelancer + Web Developer
4.4 instructor rating • 16 courses • 74,737 students

Lecture description

Learn the powerful shape tool, we will cover how to combine different shapes to create new ones and how to subtract one shape from another

Learn more from the full course

UI Design with Photoshop from Beginner to Expert in 15 days

Ultimate guide for Beginners to learn Photoshop & User Interface Design for Web Design & Mobile App Design in two week

11:33:04 of on-demand video • Updated March 2019

  • Start your Career as UI Designer
  • Learn the settings necessary for UI Design Process
  • Learn all the Basic tools of Photoshop for UI Design
  • Start using Photoshop with solid foundation in UI Design
  • Learn all the Photoshop Shortcuts for UI Design
  • How to use Photoshop Extensions to speed up UI Desing Process
  • Tips and Techniques for Efficient usage of Photoshop for UI Design
  • Learn how to use Custom Scripts in Photoshop for UI Design
  • Learn about Color schemes and Typography Online tools
  • Learn how to use Gradients and Patterns in UI Design
  • Create Wireframes and learn the tools needed to create them
  • Learn how to design MODERN DASHBOARD graphs and elements
  • Learn how to design MODERN HERO/HEADERS of Websites
English [Auto] In this lesson we are going to learn about shapes Photoshop shapes and how we can create custom shapes my combining and subject in them we are going to use just simple shapes in our design and we don't need to create icons in Photoshop because I don't like men fresh off or I can design. So let's get started now. To access your shampoo you can press you on your keyboard shortcut key all you can go to this toolbar and you can select this rectangle over here OK and just drag and leave it any way you like. You can see here we have written Heike showing along with it. OK. So let's track it like that. Let's change the color to something good. Blue is looking nice. OK. Now as soon as I leave this ship you can see here we have live ship properties. We have very tight x x and y axis position of the ship. Then we have the color which is we have selected currently selected over here for the color. And this is basically the stroke. If you keep your mouse over for some time you are going to see what this box is doing OK. So if you want the stroke you can set the stroke. And this is the stroke size. You can increase the stroke and decrease the stroke. Normally I don't recommend that you should use stronger or any effect here OK. So we are going to use not lower here and this is our stroke rather it should be in the sand or outside or inside the shape. OK. Then we have the standard Cornall options. OK. So if you want rounded corners for this rectangle you can set it like 20 Biggs's and you can see it is going to round off everything. This lock is basically for proportion. If you want to have one corner one corner custom Romanes For example I got more on this corner the left top corner to be round. I'm going to press 0 and you can see it is not wrong. I know it is. It has edge. OK. So this is the basic use of this rounded corner and this shape to look in CSSA and webdesign everything every shape like this like few rounded corners and one edge edge to corner. This is possible so you can use it in your web design. OK. Also here we have this lock which is basically for proportional return height. So if I increase it to 800 You can see it is going to increase in proportion. So this is the main function of this live shape properties window. Now let's go to the shapes again and again if we have this shape. There are more shapes available like rounded rectangle corner and elipse tall polygon line tool and custom shape. OK. Now if you select any of them like this on the corner you can see here we have our rounded downness radius. OK. Also you can select the radius from here and it is similar to the rectangle. Then we have this ellipse and you can hold shift if you want. A circle in proportion like that. I'm holding Shift right now. You can also hold alt option key. So it is going to be expanding from its center where you can see we're here like that. Now I'm living my option key like this. OK. Now we have a perfect ellipse or circle over here. Then we can also use polygon tool and we can have set size two like size 15. So if I have 15 sites let's select any other color. Looks like some color from here like this one. OK. And I'm going to draw a shape. You can see over here. Here we have the shape. Maybe we can colored red. OK. So it is just like a badge. Now if you want to draw a line which is this line shape line tool you can go ahead and draw a line but before that you need to set X mood and if you want to five is a line you can certify because a line shift and it will be a straight line like that. OK then we have custom tools over here. Custom shape tool you can select any tool from here. There are a lot of shapes over here like you can see. This is the badge I'm trying to create. Well here plussing shift. You can see this is the badge. And then there are many custom shapes over here. You can load and download different custom ships from internet or googling around. OK. Right now these are the default shapes. You can select all. If you don't see all the ships over here. OK. So this is all about different ships and ship tools available in Photoshop. Let's start combining them and and subtracting them to create new shapes. OK. So I'm going to delete all these ships right now. OK. Now let's select our rectangle or maybe ellipse tool. And I'm going to draw an ellipse now. There's a shortcut key to combine different ships. Either I can press shift. OK so you can see I have press shift and now the cursor is set to plus. Now if I draw another ship it is going to be combined with the previous shape. Now this is Vonne shape which is combined. OK. Now if I again press my you key and again I press the shift and go I can combine more like this one. And also like this one. Now you can see I almost have a cloud. If I rotate it you can see now this is how we combine shapes. OK. So I have placed shift key and draw another shape to combine them. And then there is another way like if you can select any shape over here. OK. So I have selected for example the Sanjeeda angle. And then you can select anything from here and get a combined shape on maybe subtract from shape. OK. So you can see this shape was selected so it was subtracted from what. Here again let's go back and let's de-selected and then we are going to so subtract and I'm going to draw another ship like that. Now you can see this one is subtracted from the previous shape OK. And if we again go to this one and we select intersect you can see it is going to show me the common between these two shapes. Then if we exclude overlapping shapes it is going to exclude the overlapping here. OK. This is how we create different shapes in Photoshop. OK so let's delete this one. And let me show you an example we're going to create a pop up bubble over here so I'm going to create a rounded rectangle maybe this size. OK. So I am going to color it a big gray like that. OK. Now I am going to combine a custom shape which is going to be mine. There it is. OK. So I can combine any shape which has some edges at the bottom so I can draw something like that. So next adjust it a bit up like this. There is another shortcut to combine both these ships. OK so I'm going to select both of them and we are going to press control e or come on E. And you can see on the right side it is now one ship. Ok so I can change its color like this and I can add some text over here. Don't worry about the things you don't know. So this is all you need to know about ship tool. Let's move on to the next lesson.