Minecraft Block iOS Icon

Minecraft Block iOS Icon Tutorial

19,458
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.

MinecraftiOS document 1024x630 Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS shape Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS brown Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS smartobject 1024x678 Minecraft Block iOS Icon Tutorial

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

MinecraftiOS StainedGlass 1024x583 Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS Mosaic Minecraft Block iOS Icon Tutorial

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

MinecraftiOS Sharpen Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS clippingmask 1024x612 Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS huesat Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS greenhue 1024x725 Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS layermask 1024x615 Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS PencilTool 1024x620 Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS squarebrushes 1024x749 Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS greenrows Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS grasscomplete1 Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS grassshadow 1024x580 Minecraft Block iOS Icon Tutorial

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

MinecraftiOS iconbevelemboss 1024x463 Minecraft Block iOS Icon Tutorial

MinecraftiOS withbevel Minecraft Block iOS Icon Tutorial

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

MinecraftiOS blueblocks 1024x714 Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS type Minecraft Block iOS Icon Tutorial

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

MinecraftiOS typegradient 1024x835 Minecraft Block iOS Icon Tutorial

MinecraftiOS typeinnershadow 1024x835 Minecraft Block iOS Icon Tutorial

MinecraftiOS typestyles Minecraft Block iOS Icon Tutorial

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.

MinecraftiOS typeduplicate Minecraft Block iOS Icon Tutorial

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

MinecraftiOS typegradient2 1024x835 Minecraft Block iOS Icon Tutorial

MinecraftiOS typeshadow 1024x835 Minecraft Block iOS Icon Tutorial

That should leave you with our final design:

MinecraftiOS final Minecraft Block iOS Icon Tutorial

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