A quick introduction: The author of this blog is Bhavani who is one of our outstanding UX & UI designing students. She’s pursuing UX Design Standard course. She has expressed her views on her most favorite tools and options in Adobe Photoshop i.e. Pen Tool that she always use for UI designing. She has also given the important features and settings which make it useful for UI designers. So, let’s see the use of pen tool in UI designing in Adobe Photoshop and what does it useful for UI designers.
So, let’s see what Bhavani wants to share with us.
Pen Tool
One of the best tools I have come across in Photoshop is Pen tool. As per me, it is one of the best tools given in the toolbar for designing purposes. It lets you create whatever you want. Just think, draw and trace. Working with it is really very simple and a kind of fun task.
Here are some of its best features and settings:
Key Features:
- We can create any kind of path which is a line without any thickness and shape (a path with thickness) using pen tool.
- It creates anchor points and handles to form shapes and lines which further construct a complete vector drawing or design.
- We can add, delete and convert anchor points into handles.
- It’s a vector tool; unlike raster as it gives hard edges even at large pixilation.
- Using pen tool, we can draw point to point and can control precisely over edges and lines.
- There is an option called stroke which works amazingly, unlike marquee tool it comes along with thickness (0-200 pixel). There are various patterns, colors, and gradient fills which can be filled in the stroke, and we can use the eye dropper tool to pick the color from color picker.
Although there are some other sub tools in the family of Pen but using the single pen tool and short keys, we can use them all without even selecting them.
Important Settings:
- By selecting pen tool, we can switch either to path or shape, according to the need.
- While using this tool, we have two options to work with given in the option bar. First one is path and other one is shape. When you select path, it lets you create a line having no thickness with anchor points on it. In order to add thickness or fill color in the path, we need to select shape instead of path.
- To edit the existing path, hold the Ctrl key which is a short way to use direct path selection tool that is a kind of path modifier. Using Ctrl key we can select single anchor point as well as multiple points in path.
- Apart from the Ctrl key, you can also work with Alt key which is a short command to use convert point tool. This command does multiple works; it adds new handles on an anchor point, breaks the handles and also removes the handles. Usually this can be used when we want to form the curves or bend the shape.
- We can create a copy of the shape by selecting move tool and holding Alt key. Just drag the mouse while holding the Alt key.
- By holding the Shift key, we can form the straight lines with desired angle.
Use of pen tool in UI designing
For creating wire frames and mock ups
At the time of creating wireframes and mock ups for the website, pen tool helps a lot to a UI designer. There are n numbers of stretches when a UI designer has to use this tool. Some of them are given below:
- While creating boxes and rectangles in representation of some images and content.
- While creating symbol to specify certain parts of the template.
- To draw lines wherever it is needed.
- In creating header and footer blocks and in segregation of categories present in the template.
From logo designing to poster
Pen tool is also a useful tool in creating logos. You can trace your hand drawn logo with all curves and bends. It will perfectly trace every part of your drawing and converts it into a live colorful piece. I’m pretty sure that no tool can help you except this for designing a creative logo.
- It’s of a great use when we have to use a part square or a rectangle or a part of circle.
- When we want to clip an image in a random shape, just we need to draw the required shape using pen tool and fit the image in it using short-key of clipping mask i.e. Alt + Ctrl + G on Windows or Option + Command + G on iMac.
- Even the created paths and shapes can be multiplied in number using Alt key. Copying of a shape or a path is easy using Alt key, just hold the key and drag the shape using mouse. You’ll find a new layer of copy will be created in the layer panel.
Shape tool
I added shape tool in my list as it helped me a lot during my project. It’s my first choice to create polygons, ellipse, stars, custom shapes, etc. Using this shape tool I added many custom graphics in a comfy way.
Key Features:
No need to create any layer: Shape tool is a vector tool which has most of the features of pen tool. Again, unlike Marquee tools you don’t need to create any layer for the selection. It creates its own layer with a different icon on it.
Fill properties: All of its shapes come up with fill properties in which you can choose between solid color, pattern, and gradient fill.
Stroke fill: Unlike the marquee tool it comes along with the outline mainly known as stroke which looks like a border. Again, you can fill different kinds of patterns, colors and gradients in it. You can also control the weight of the stroke. Even null option is given to select, in case you want to add any stroke to the shape.
Different types of shapes are available: Rectangle, ellipse, rounded rectangle, polygon, line and custom shapes are the tools which we find in shape family. While selecting custom shapes, we find a shape library which consists of many custom graphics (mainly icons). Even we can import different types of new shapes into Photoshop from the internet.
I used most of the icons from the library and it reduced my efforts by providing me useful pre-defined shapes with are completely editable.
Important Settings:
- Its property options changes according to the selected shape.
- While using the custom shape tool hold the Shift key to get the shape properly. By holding the Shift key, we can form a square, a circle, a rounded square using rectangle, ellipse and rounded rectangle respectively.
- In line, we can add ending and starting aero and indenting of both the ends can be changed.
- In polygon, we can add any number of sides to create the different kinds of polygons. Sides can become smooth as well as spiky star using settings given in the gear like icon.
- In rounded rectangle, we can add radius value to control the roundness of the sides.
- Alt key + drag will create a copy and place it on any place as you need.
- Click on the canvas while selecting any shape tool, it will bring a property panel in front of you which will ask you to add width and height of the figure you want to create. As soon as you click by entering the values, your figure will be ready in front of you.
- We can work with the path arrangement settings to send to back or bring forward any selected figure layer.
- Similar to path arrangement, we can also select path operation settings for a new layer, combining shapes, subtracting front shape, intersecting areas, and excluding overlapping areas.
- We can also work with the alignment and distribution properties.
- We can decide whether we want to create a pixel based shape or a path based shape in the options bar.
How it helps a UI designer?
Being a UI designer, we can get most of this implement for creating geometric forms filled with patterns, colors, gradients along with the stroke. Since it creates vector shapes; you can scale them up to any extent; they are not going to mislay their quality.
So, this is how we can use shape and pen tool in UI designing using Photoshop.
Interested in learning Photoshop for UI designing?
Go for our one of the best Photoshop courses to learn how to use it for creating stunning web GUIs. We as one of the best UI design training institutes offer professional UX & UI design courses in Delhi for beginners as well as experts.
Pick up your favorite program from the list of our courses in UX and UI design and contact us today to attend a demo session with our expert.
Stay tuned with us!
