In recent weeks, I have dabbled in the creation of icon glyphs in Photoshop. Glyphs are basically small icons used to represent a task, like sharing or bookmarking something. I decided that after some practice over the past few weeks, why not share my knowledge? So today I am going to be sharing a quick tutorial for creative a paint brush icon glyph. It is a very short tutorial, but can give you some unique insights for making all kinds of glyphs.
Be sure to keep your eyes on our Tips/Tricks/Tutorials Section in the coming weeks for more amazing Photoshop Tutorials.
1. Begin by making a new Photoshop document with a width of 620 px and a height of 300 px.
2. Next go ahead a grab the pen tool and create a basic shape that looks like the one pictured below. This is quite easy to create. Start by clicking once anywhere on the canvas, the click again about 15-20 pixels lower but hold the click and slightly curve it. Finally click again to connect the clicks and make it a shape layer.
3. Now that you have the basic shape down. It is time to make it more realistic and shaped like an actual paintbrush. To start we must click the direct selection tool to edit the paths.
After choosing the direct selection tool we need to edit the paths. First click the shape layer in the layer panel to show the path. Then click on the points.
Now that you have them selected it is time to start moving them around to the desired location. Try to work with them til they get to about this angle and look.
4. Ok, so now we have the basic shape. Before we add the actual brush tip, we will add one last minute detail to the brush handle. A little stripe to add some realism. To do this, select the pen tool and make sure you have the subtract button clicked at the top panel.
Now that you’ve got it ready, go ahead and make a little selection in the shape of a rectangle to subtract from the brush handle, like so.
5. Now comes the hard part of the brush icon. The actual brush tip. This is challenging because the tip of the brush has to look realistic like brush bristles would in real life. Fear not, it only takes some work with the pen tool and direct selection tool before it looks epic!
First start by selecting the pen tool, and then select the add to shape area button, if you want this to all be on one shape layer.
Now make a basic shape, just to get started with the basic brush tip type shape.
As you can see, it is a pretty rough first draft, but it will look better soon, don’t worry. Before we move on, notice that it looks a bit too big for the brush. A quick little trick I discovered is to use the direct selection tool to select the select path. Then you can actually free-transform this path to scale it down and make it fit perfectly. This makes for a pixel perfect icon, without having to start over.
6. Time for the detailing. Now that we have scaled it down. Let’s get down to business and make this look like a real paint brush icon! First we have to go back and re-edit the brush handle. It still needs a little work. Just look at the image below and work with the direct selection tool to achieve this look.
Awesome, now that the brush handle is handled (pun intended), we can move onto the hardest, but best part, the actual brush tip. This is tricky, but just remember, all icon glyphs take a bit of adjustment with the pen tool to get good. Start by working with the direct selection tool to sharpen up the middle of the brush.
Ok, I know it still looks a little bit rough, but we are at the final step at last! Now it is easy, we just have to sharpen up the outer edge of the brush and make the bottom look like a real brush tip. Again, we will use the direct selection tool to edit the points on the path.
7. And, voila! There you have it. The completed paint brush icon glyph. After some final touches, it is colored, re-sized, and sharpened up to look beautiful and ready for production!