Recently, while experimenting on creative design themes for a project; I stumbled upon a really useful technique to create 3D typography using Magic Mirror and isometric grids.
Magic Mirror is a popular Sketch extension (or plugin) that adds Perspective Transformation to Sketch, so designers can create perspective mockups and other distorted effects to their UI design.
This tool helps you make components, images, logos, icons, text, etc. formed into perspectives. But designers rarely use Magic Mirror to create 3D typographies.
I was able to create a 3D typography by utilizing an isometric grid, which is a projection method for visually representing 3D objects in two dimensions.
So, I thought I’d share with you how to create 3D typographies using Magic Mirror and isometric grids, like the image below:
To create your own 3D typography, you need to have access to both Sketch and the extension Magic Mirror 3.
You can download a free trial of Sketch from here.
You can download Magic Mirror from here.
1. Download an isometric grid
To apply a perspective transformation to your artwork, you will need an isometric grid. You can choose and download any isometric grid template available online for free.
Download an isometric grid template from here.
2. Merge Layers
Once you morphed the isometric grid as per your preference; you can add your artwork layers on top of it.
For this particular tutorial on 3D typography design; I used 4 artboards: 1 was a background and 3 artboards featured the same text with different colors.
I added the 3 text artboards on top of the grid to create the transformed perspective into a 3D typography.
3. Copy to Background
Once the perspective transformation is completed, simply copy the image on the isometric grid and paste it on top of the background artboard.
… and you are done! The process is simple and the results are awesome.
This technique will enable you to make a perfect perspective transformations on your typography based on the isometric grid while ensuring all the desired angles are in place.
Check out the video below for a tutorial demo of how to re-create the 3D typography example in the image above:
I hope you enjoyed my first attempt at creating a tutorial, I hope to benefit from you as much as I hope that this tutorial will be beneficial to your design efforts.
If you have any tips of your own on how to create cool 3D typography designs on Sketch or any other software, please leave a comment below.