Rockstar Icon Designer - Kate McInnes [32]
Now we need to cut out the middle part to show the background. By using the shape settings this is pretty easy to do. Select the Exclude Overlapping Shape Area button from the top of the program window (the shape tool must be selected for this to show up), and draw a rectangle the size of the cutout area, you will notice that this setting will change the rectangle into a cut out area.
The icon design with a grey background and a preview window set to actual size.
You can also make cut out shapes by drawing a shape into the layer while holding down the Option key. Cut out shapes can be duplicated in the same way as regular shapes by selecting them with the Direct Selection key and holding down Shift as you drag the duplicates into place. I've done this with the cut out shapes on the top section of the design. To add the lines to represent text I selected the Add To Shape Area (+) option and drew them in as I would with a normal shape. The icon design is now completed.
One final step is to tidy up the shape. Take the Direct Selection tool and Shift + Click the outline shapes that you want to join together. In this case, I will join the top lines with the main body of the notepad. Once they're selected, click the Combine button at the top of the application window. Note that you can only combine shapes that share a layer. Once the shapes are combined you will see that the shape is much cleaner, but isn't as easy to edit as it was before. This step should only be done when the icon is complete.
Cut out the ring shapes and add lines.
Select the entire shape by dragging a selection area with the Direct Selection tool around the icon and using the Delete Anchor Point tool, delete any stray points. You should only have points that define the shape of the icon, any additional points can slightly warp the lines and cause the icon to render blurry.
Pixel Style Angled Lines
If you're making a pixel style icon with angled edges, you will need to place squares along the jagged edge and then combine it with the main shape that you're creating. Save this for the very last step – using the antialiasing to hold the place of the pixel cubes – any angle changes you will need to make to the line will be easier with a single line.
Saving and Scaling
There's a fun trick to scaling this style of icon in Photoshop. Because the only data that needs to be re-interpreted is the sharp edges and lines, when you save the icon in the Save For Web dialogue, at the right side of the window you will see some scaling options. In here you can change the scale you want the icon to be when you save it. With detailed pixel images, such as video game style sprites and isometric pixel drawings, using a percentage to scale the icons is the best method. Sometimes scaling these images with exactly the size you want will change the thickness of some pixel lines a little bit differently from others. So, if your icon is complex, scale it using even number percentages.
Saving different scales using the export for web dialogue.
In the case of this icon, because it's fairly bold and all of the lines run horizontal and vertical, you can input any pixel size you wish to save the icon in. Just be sure to lock the proportions, and also ensure that the lines of the shape are perfectly lined up with the pixel grid, as even a small error in the shape which you may not be able to see at a small scale, will turn into a block of color when Photoshop tries to render the shape on a larger scale.
End Result
Finally, you can add all types of special finishes and layer effects to your icon to finish it off. I've used a subtle gradient from light grey to dark grey with an angle of 135 degrees. Small scale icons, like the 16px icon will only be able to have very subtle effects added because of the tiny viewing space, but if you have some larger icons, you can add effects such as an outline,