Rockstar Icon Designer - Kate McInnes [31]
Setting the Canvas Space
Set the width and height of the art board in pixels and make sure that the color space is set to be RGB. If you're working in Photoshop, it's also handy to have the background set to transparent so you can see exactly where the art space begins and ends.
Once you have made the canvas for your icon, set the document grid to represent pixels. You can do this by setting the gridline to every 10 pixels with a sub division of 10. This will show you where the pixel boundaries are and help you to make shapes that will clearly render along these lines.
The Shape Tools
Let's make something from just a few straight lines to begin with. A notepad is perfect for this. Make sure your color is set to something dark, I'm using black, then take the Rectangle tool and add in the main shape of the notepad.
Use the Rectangle tool to create the main shape of the notepad.
You will notice that the shape you have made is a bit different from vector shapes you may have used in vector editing software such as Adobe Illustrator or Inkscape. The way Photoshop makes vector shapes is to use the vector as a mask for a colored background. There are a few cool things you can do with this that I will show you later on in the tutorial.
Let's make the rings at the top of the notepad. Take the Rectangle tool and draw the first ring at the top of the notepad, you will notice that this makes a new shape layer. Every time you add a vector shape directly to the canvas it will make a new shape layer. There are a few tricks that you can use to combine vector shapes. One is to hold the shift button down as you draw the image onto the canvas. You only need to hold shift as you begin, continuing to hold shift will constrain the proportions of the shape and you will end up drawing a square. The other way is to direct select any shapes you want to combine with the Direct Selection tool (A) and copy > paste them into the vector mask you want to combine them with. Make sure that you select the vector mask and not the layer.
Add the first ring of the notepad with the Rectangle tool.
The next tip is to select the first loop with the Direct Selection tool and copy + drag the next few into place by holding down the Option key. When you get to the last loop you may need to tweak the body of the notepad. When you design miniature icons there's sometimes a bit of tweaking that needs to happen as you work. Because there are a limited number of pixels you will often find that balancing the designs will require constant tweaks to the shape. This is another reason that while the Pen tool can give you similar results, it's not as editable as vector shapes.
Add the rest of the rings by copying the first ring.
Let's tweak the design a bit. Take the Direct Selection tool (the white arrow) and select the points you want to move. If you have the Snap to Grid tool on, this will help the shape align with the pixel grid. You can select more than one point at the same time by holding down shift as you click the points with the Direct Selection tool.
Tweak the design using the Direct Selection tool.
Here's a little trick I like to use when I'm creating small scale icons in Photoshop. Go to Preferences > Interface and select “None” from the border drop down menu next to Standard Screen Menu. This will take the drop shadow away from the canvas you're working on. Then, go back to your artwork and sample the grey background from around the canvas and color the background layer with it. You can now turn the background on and off when you want to preview how the icon will look on a plain background. Then, go to Window > Arrange and navigate to the option “New Window” this will open a new window with the same artwork as the one you're working on. Set the view to Actual Size and move it to your second screen if you're using one, or tile the windows of Photoshop so you can work on the icon and look at a real size preview as you work.
Note: If you're using shapes or vectors, select