Rockstar Icon Designer - Kate McInnes [26]
Go to the Tools menu and select the Eraser tool, in the menu at the top of the program window, change the settings to Pencil with a 1px size. Erase the lines on the inside of the main diamonds we marked out for the first shape and the cross-over shape on the bottom part. You should have a shape with three diamonds at the top and a W shape at the bottom.
Merge the two layers and erase unnecessary lines.
Take a line from each corner of the W shape to make the sides and corners of the cubes and erase the extra lines that remain inside.
The cubes take shape with the addition of vertical lines.
Duplicate the layer and drag the duplicate into the Add Layer Mask button (the icon of a circle on a square) at the bottom of the layers pallet. Using the layer mask we will color in some of the outline to create a softer look on the bottom lines of the diamonds. This is a good method for re-coloring pixels with a large brush as the layer mask will keep the shape intact and lets you “wash” the background with whatever color, gradient or texture you like. First we will plan the main colors and return to this layer later.
Color and Tone
A really handy feature in Photoshop is the ability to draw and select objects with or without anti-aliasing. Select the Paint Bucket tool (G). If you look at the menu at the top of the Application Window, you will see a checkbox with anti-alias next to it. Uncheck this box and select the layer with the main body of the cubes. We will now use the paint bucket to color the cubes.
Go to Window > Color and in the fly out menu set the color mode to HSB. Select the first color you want to use for the top box - for this tutorial keep the Brightness Slider at 100% - and then use the Paint Bucket tool to flood the space with color.
You will notice that the filled space is nice and sharp. If you left anti-alias on, there's a chance that the fill color would have some semi-transparent pixels around the outside. When working with the Selection, Drawing and Color tools to create pixel style icons it's always best to change the settings for each tool to anti-alias, this way everything you create will be in a sharp pixel style.
Chose the color for the top of the box on the left hand side from the HSB sliders by changing the H (hue) slider, this will keep the tone of the top of the box uniform. Then, choose another hue and fill the top of the right hand box.
Use the paint bucket to fill the top shapes with color from the HSB sliders.
Select the Eyedropper tool and sample the top of the left box you colored. Go back to the HSB color slider and change the saturation (S slider) to create a lighter color variation of the side. Fill the side with this color.
Adjust the HSB colors to make a highlight shade for the left side of the bottom diamonds.
HSB ColorMode
Sometimes called HSL or HSV, HSB is a color blending tool commonly used with RGB graphics. You can use HSB in the Adobe suite to blend colors by controlling three sliders. H for Hue, S for saturation and B for brightness. Creating colors in this way is particularly useful for icons as the Hue and Saturation of a color can be retained while the brightness can be altered to create different shades. Using HSB will result in a more uniform range of tones compared to using the color picker or RGB color sliders.
Select the top color once more and change the brightness (B) to be slightly darker and fill the right side of the shape. Remember the brightness percentage and select the top of the cube on the right. Enter the percentage for the brightness and fill the left side of the cube. Reduce the brightness some more and fill the right side of the cube. You will have something that represents three cubes put together with light coming from the top left hand side of the image.
We will now go back to the layer with the outlines. Using the mask to make this step a bit quicker and easier, take the darker shade of color from the two front cubes and fill