After watching my old Minecraft Block icon tutorial, a few of you requested that I create a Minecraft iOS style icon, as well. So in today’s tutorial, I’ll walk you through the process of doing just that, using some of the same techniques that were used in the last tutorial, as well as a few new ones.
As always, the size of the document comes down to personal preference, but as an iOS icon has a square aspect ratio, 1024 x 1024 will do the trick. I’m also going to start with a black background, but feel free to use the color of your preference.
If you’ve even used an iOS device like an iPhone or iPad, you probably know that the corners of the icons are rounded. Photoshop’s Rounded Rectangle Tool will be perfect for this task. With the document at 1024 x 1024, a Radius of 120px will give us a pretty accurate curve on the icon. Make sure to hold down your Shift key to maintain a square aspect ratio for the shape.
Now we come to the fun part. Creating the Minecraft texture. Many people would simply grab the Pencil Tool and manually add each block. Not me! I’ve come up with a multi-filter process which will leave you with a great looking texture!
Start off my creating a new layer, and fill that layer with a light brown color: #a5744d.
Once the layer has been filled, it’s a good idea to convert it into a Smart Object. This will give you the ability to edit your filters, even after they’ve been added. Right-clicking on the layer in your Layer’s panel will allow you to convert.
Now that it’s been converted, we can start adding filters. The first filter we’re going to add, will be Stained Glass, which can be found in the Filter Gallery (Filter > Filter Gallery). Before you add the filter, make sure your foreground color is set to black and your background color is set to the light brown (#a5744d)!
The next filter that will be added, is the Mosaic filter, which can be found under Filter > Pixelate > Mosaic. Adjust the Cell Size to fit your preference.
Finally, let’s add an Unsharp Mask filter in order to sharpen up the blocks a touch. Filter > Sharpen > Unsharp Mask.
Now that the base texture is complete, you’ll want to clip it to the icon’s shape layer. This can easily be done by right-clicking on the texture layer, and choosing the Create Clipping Mask option.
Once it’s been clipped, you can position it so that the blocks line up nicely.
Now that the ‘dirt’ texture is complete, the grass needs to be added. This step requires a bit of manual work, but not too much. We’re going to start by creating a Hue/Saturation adjustment layer to get the color nailed down. Adjustment Layers can be added using the black/white icon at the bottom of your Layers panel.
Once added, you’ll want to clip the Adjustment Layer and adjust the properties in order to achieve a green result. Turning on the Colorize option may help, as well.
Once you have your desired ‘grass’ color, we’re going to take advantage of the Adjustment Layer’s Layer Mask in order to hide/show the bits that should/shouldn’t be visible. You can start one of two ways; the grass hidden, or the grass visible. If you’d like to start with the grass hidden, fill the Layer Mask (the box beside the Adjustment Layer) completely black.
Once the grass has been hidden, you’ll need to paint in the blocks that you want visible, with a white pencil brush. You can find the Pencil Tool grouped up with the Brush Tool on the Tools Bar.
To get the best results, you’ll want to load in the Square Brushes to use with the Pencil Tool. These brushes can be loaded in under the Brush Picker’s menu.
Once the brushes have been loaded in, to start the editing off simple, you may want to fill the top few rows of blocks in with a large white brush first.
Now, using a square brush that’s the same size as the Mosaic’s Cell Size, use a white brush to add grass, and a black brush to remove grass.
To give the icon a bit more style, let’s add a few Layer Styles to our layers. First, we’ll add a Drop Shadow to the Hue/Saturation Adjustment Layer.
Next, to give the full icon a bit more shape, let’s apply a Bevel & Emboss + Contour Layer Style to the base shape (rounded rectangle).
Finally, you can add a final Hue/Saturation Adjustment Layer to add a few blue blocks around the icon.
If you’re not too concerned about adding text, you can stop the tutorial here. Otherwise, let’s move on!
In terms of the font, any ‘blocky’ font will work, but the Block font, found on DaFont.com, is a nice one to go with. Type out your word of choice on the icon.
Once the text is in place, let’s add two simple Layer Styles. A Gradient Overlay and an Inner Shadow.
Next, you’re going to want to add a bit of depth to the text. This can be done with a duplicate of the type layer we just worked on. You can quickly create a duplicate by holding down your Alt/Option key, and dragging the layer down. Once it’s been duplicated, clear the Layer Styles of that layer, and place it behind the original text layer.
Now let’s apply a few Layer Styles to this duplicated type layer to finish it off.
That should leave you with our final design: