Create an Isometric Action and Apply It to an Icon in Adobe Photoshop

Final product image

One of the simplest 3D presentations you can do is using isometric perspective, with 120° between each axis. This perspective is often used in technical and engineering drawings. In this tutorial, I am going to show you an easier way of creating an isometric icon using Photoshop actions.
First, we need to create an isometric grid which will help us in placing the object accurately.
Start by making a new file (Control-N) in Photoshop. Set its canvas size to 600 px × 600 px.
New file dialog box
First, we will create an isometric grid made of line vectors. Activate the Line Tool with Weight: 1 px. Hold Shift and then drag to draw a vertical line.
Draw a line using Line Tool
Select the line using the Path Selection Tool. Hold Control and then drag the line to duplicate it.
Duplicate the line
Repeat this process a few times until we have enough vertical lines on the canvas. Still using the Path Selection Tool, select all the vertical lines and then clickDistribute Widths from the Option Bar.
Distribute the lines
Now, the distance between each line should be distributed evenly.
Distributed lines
While the lines are selected, hit Control-J to duplicate them.
Duplicate the lines
Hit Control-T to transform the selected lines. Rotate them 60°.
Rotate the lines
Once again, duplicate the vertical lines and then rotate them, this time -60°.
Rotate the lines
Move the lines until they are aligned perfectly and give us a perfect triangular pattern.
Align the lines
Put all the layers into a group layer for easier layer management.
Layer management into group layer
To turn a flat object into isometric perspective, you will need to apply some transformations. To speed up our workflow, we will record them as Photoshop actions.
Let's move to preparing the action for isometric transformation. For this purpose, we will use text to help us see the exact result of the transformation. Start by making a simple piece of text on the stage.
Add text on stage
Open up the Actions panel. Click the Create new set icon.
Add new action set
Create a new action by clicking Create new action in the Actions panel. We are going to name it right, because this action is going to align the object along the y axis on the isometric perspective. Click Record.
Create new action
Starting now, everything you do is going to be recorded in the action. So, make sure to do everything as cleanly and effectively as possible. First, hit Control-T to perform a transformation. Set the Width (W) percentage to 86.6025%. Hit Control-Enter to apply the transformation.
Transform object
Perform another transformation (Control-T) and then skew the selected object vertically -30°. Hit Control-Enter to apply the transformation.
Skew object
Click the Stop icon in the Actions panel to stop the recording. Just to make it clear, change the text to right. This is the result, before and after the action is applied.
Stop the recording
Let's add another action, this time to align the object along the x axis on the isometric perspective. As with the previous one, we will use text for the transformation object. Click the Create new action icon and name it left.
Create another action
Start by applying a transformation (Control-T). Resize its width to 86.6025%. Hit Control-Enter to get the result.
Resize objects width
Apply another transformation (Control-T), this time skewing it vertically 30°. Stop the recording.
Skew object
Here is the result with the isometric grid in the background.
The result
We need another action this time to lay down the object on the floor. Click Create new action icon in the Actions panel.
Create new action
Hit Control-T and resize its width to 86.6025%.
Resize objects width
Apply another skew transformation. Skew vertically 30°.
Skew object
Add another transformation. Rotate the object 120°. Stop the recording.
Rotate the object
We need one more action to transform the object to stand parallel to the z axis. Make another new action.
Create new action
Hit Control-T and then resize the object's width to 86.6025%.
Resize objects width
Apply another transformation, this time skewing vertically -30°.
Skew the object
Add another transformation. This time rotate it 60°. Stop the recording by clicking the Stop icon in the Actions panel.
Rotate the object
We have finished creating all the actions needed for object transformation into isometric perspective. I suggest that you leave the text for handy reference while building the icon. Sometimes, it's hard to determine which action is needed. These pieces of text will help you to choose the right action.
Handy reference for actions
If you want to use the actions faster, you can add shortcuts. Double click the action name and then add a Function Key in the Action Options dialog box.
Adding function key to action
Our isometric icon is built from the front view of each element and then transformed to isometric perspective using actions. We will cover the first phase now.
We can begin building the base shape for our isometric icon. In the Layers panel, make a new group of layers for our laptop icon. We will start by drawing its main body, keyboard, and trackpad.
Preparing group layers
We will draw every element from the front view—everything from its screen to its trackpad, and even its screen thickness. Activate the Rectangle Tool, and then click and drag to draw a rectangle on the canvas.
Draw rectangular shape for the screen
Draw another rectangular smaller than the previous one. Its size should be proportional to the previous one.
Draw smaller rectangular shape
We also need to draw another rectangle with the same height as the screen. This is going to be its thickness.
Draw screen thickness
Our next job is drawing the laptop's main body. Draw another rectangular shape. It should have the same size as the screen.
Draw another rectangular shape
Don't forget to draw its thickness.
Draw main body thickness
Draw the keyboard layout, made from a simple rectangular vector shape.
Draw the keyboard layout
On top of the shape, draw smaller rectangles for the keyboard buttons. Set the color to black.
Draw smaller rectangles for the keyboard buttons
Keyboard buttons
Let's draw half a CD that is going to be inside the laptop. Start by drawing a simple circle. Hold Shift and then click and drag to draw a circle.
Draw a circle for CD
Add a rectangle path covering half of the previous shape. From the Option Bar, set its mode to Subtract Front Shape.
Subtract with a rectangular shape
Add another circle. Make sure its center is in the same place as the big circle. Set its mode to Subtract Front Shape.
Subtract with smaller circle
Select all the paths and then click Merge Shape Components to simplify the path. After this step, all the paths are now combined into one simple path.
Merge all paths
Result of merging paths
Use the same steps as earlier to draw a smaller half-donut shape for the inner part of the CD.
Draw smaller half donut
Put the CD on the right side of the keyboard. So far, here's what we have.
Put CD next to the keyboard
We have finished drawing the basic shapes. Now it's time to transform them to isometric perspective using our actions.
We will start transforming into isometric view using actions. Select the screen vector shape using the Path Selection Tool.
Select screen vector shape
While the screen vector shape selected, select the right action and then click the Play icon.
Play right action
Here's the result. The screen is now transformed and parallel along the x axis.
Result from action
You might be confused in selecting the right action. If you do, make sure to take a look at the handy reference we made earlier. If by accident you play the wrong action, hit Control-Z a few times until the object returns to its original condition.
Hit Ctrl-Z to undo
Select the keyboard and CD vector shapes. In the Actions panel, play the top-rightaction we made earlier.
Play top-right action
Both objects, CD and keyboard, will be transformed and laid down along the y axis. But there's a small problem: they are upside-down. We need to fix them.
Fixing keyboard orientation
While they are selected, hit Control-T. Rotate them 180°.
Rotate keyboard 180 degree
Activate the Path Selection Tool and carefully move the CD and keyboard until they are attached to the screen.
Fixing keyboard position
Fixing keyboard position
Select the keyboard thickness and play action right. If you are not sure which action is suitable here, refer to the handy guide.
Transform keyboard thickness
Transform keyboard thickness
Move it until it attaches to the keyboard side.
Move keyboard thickness
Repeat the same process to the other thickness.
Transforming keyboard thickness
Transforming keyboard thickness
Transforming keyboard thickness
This is what we have so far.
Result so far
Let's work on its detail. Select the CD layer and then move it down 1 px. This simple step will give the illusion that the CD is inside the main body.
Icon details
Zoom closer using the Zoom Tool. Activate the Direct Selection Tool. Select the vector shape point and move it until it snaps onto the pixel grid. This process will give you the sharpest detail and prevent blurriness on the vector edge.
Fix each vector point to pixel grid
Fix each vector point to pixel grid
Hold Control and then click the keyboard thumbnail layer. We will have a new selection based on its shape.
Adding shadow
Add a new layer and place it underneath the keyboard. Fill the selection with black. Remove the selection by pressing Control-D and then apply Gaussian Blur to soften the shadow, Filter > Blur > Gaussian Blur.
Adding shadow
Activate the Eraser Tool and erase the unneeded shadow under the laptop.
Adding shadow
Of course, we also need to add a shadow under the CD. Add a new layer under the CD and then Control-click the CD layer to make a new selection based on its shape. Fill the selection with black.
Adding shadow
Remove the selection by pressing Control-D. Blur the shadow by applying Gaussian Blur, Filter > Blur > Gaussian Blur. Reduce the shadow's layer Opacity to make it softer. It has to be softer than the keyboard's shadow since its position is higher, not directly on the surface.
Adding shadow
Activate the Brush Tool and then draw the screen's shadow on the surface manually.
Adding shadow
Now, select the screen vector shape and select Inner Shadow from the Add Layer Styles icon.
Add Layer Styles
Use the following settings for Inner Shadow.
Inner Shadow settings
Add a Gradient Overlay with the following settings.
Gradient Overlay settings
Notice that the CD is just plain flat. We can add a nice color gradient similar to what we have added to the screen.
CD appears flat
Add Inner Shadow and Gradient Overlay to the CD using the following settings.
Adding Layer Styles
Inner Shadow settings
Gradient Overlay settings
Finally, this is what we have in the end. I also add a nice touch of text on the floor, and reveal the isometric grid layer with low Opacity in the background. I hope you enjoyed the making of isometric icon using an action and are prepared to build your own icon. Show me your result while following this tutorial in the comment section. I'd love to see it. Thanks!
Final Result


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.


Copyright @ 2013 KrobKnea.

Designed by Next Learn | My partner