Minecraft Block iOS Icon

Minecraft Block iOS Icon Tutorial

22,134
views
Skill level
Beginner

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.

Download the PSD!

Subscribe on YouTube!  Contribute on Patreon!

The Document

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.

Minecraft Block Icon Document

The Shape

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.

Minecraft Block Shape

Minecraft Texture

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.

Minecraft Block color

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.

Minecraft Block Smart Object

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)!

Minecraft Block Stained Glass

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.

Minecraft Block Mosaic

Finally, let’s add an Unsharp Mask filter in order to sharpen up the blocks a touch. Filter > Sharpen > Unsharp Mask.

Minecraft Block Sharpen

Clip It!

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.

Minecraft Block Clipping Mask

Once it’s been clipped, you can position it so that the blocks line up nicely.

The Grass

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.

Minecraft Block Hue Saturation

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.

Minecraft Block Grass

Masking

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.

Minecraft Block Layer Mask

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.

Minecraft Block Pencil Tool

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.

Minecraft Block Square Brushes

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.

Minecraft Block grass

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.

Minecraft Block Grass

Layer Styles

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.

Minecraft Block Grass Shadow

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).

Minecraft Block Bevel

Minecraft Block

Finally, you can add a final Hue/Saturation Adjustment Layer to add a few blue blocks around the icon.

Minecraft Block Blue Blocks

Text

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.

Minecraft Block Type

Once the text is in place, let’s add two simple Layer Styles. A Gradient Overlay and an Inner Shadow.

Minecraft Block Gradient

Minecraft Block Shadow

Minecraft Block Font

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.

Minecraft Block Type

Now let’s apply a few Layer Styles to this duplicated type layer to finish it off.

Minecraft Block Gradient

Minecraft Block Shadow

That should leave you with our final design:

Minecraft Block Icon

  • Mard Monazere

    too much icult! bye

  • Foorooz Rezaei

    Neda Azadipour

  • Mae Cacanindin

    Thats my game

  • Epejun-Alvin Ongque Datoy

    coming soon pa d i?

  • Zeru Mekkaz

    i alwyas like this game…

  • PrinceKyle Carino

    pa try^^

  • Ramon Elias Lopez

    COOLIO

  • VLad Simone

    hahhha

  • VLad Simone

    daghan na adik bata anah!!!!!!!!!!!!!!!!!!!!!!!!!!

  • Billjoseph Tan

    maganda yan

  • Joshua Yauder Soriano

    Cool tong laruin xD :D

  • waterworthr

    This should be the real one!

  • samihawes1997

    I used the font “Minecrafter 2.0″ again from Dafont.com

  • syeer

    im very noob…can u make a video for this…i cannot make it..

  • TCar

    Awesome Tut Howard! Thanks, my son will love this!