: How to achieve this 3D "Card" effect How do I create this type of effect with an image? I'm wondering how to get the thick edges and the tilted look. Is there an online tool that will convert

@Berumen635

To do this I would use illustrators revolve and extrude tool. The benefit it offers over other methods described here is it accurately warps the card to appear at an angle.

First create the contents of the card straight on. The background should be off white so you can see what's going on.

Select card and contents, expand and group them together. (If you don't expand the text will still be editable. However, when you ungroup to edit text you'll lose the rotation, and they need to be grouped to properly rotate together. Save it before expanding so you can come back and edit text later)

Go effect/3D/extrude and bevel. These settings produced this in 1 minute. With some careful control of stroke and shadow you can make it very realistic.

Vote Up Vote Down

@Cody3331749

Many designers have already created PSD files using Smart Objects that you can use to accomplish this "isometric 3D" style (thanks to Tom here).

All you need to do is replace/add your image or design to the Smart Object layer and that's it.

Here's how.

1. Download a PSD File To Use As A Starting Point

There are plenty out there, here's a list of the ones I tried:


Perspective Screen MockUp - (http://techandall.com) (recommended)
Isometric Perspective MockUp - (http://graphicburger.com/) (recommended)
Perspective App Screens Mockup PSD - (http://graphicsfuel.com/)
Perspective App Screens Mock-Up - (http://graphicburger.com/)
App Screens Perspective MockUp - (http://graphicburger.com/)


Pixeden has good resources too and for a minute thought about purchasing one of their PSD (which are very well built and designed), but once I found the above free resources... you know the rest.

2. Create Your Own Isometric 3D

In this example I'll be using the Perspective Screen MockUp PSD file I recommended above in item #1 .


Open the TechAndAll_Perspective_Screen_MockUp.psd file.
Hide all folders except the "TechAndAll- 3D Screen 1" folder.
Expand it and inside you'll see a Smart Object layer named "TechAndALL DOUBLE CLICK ME":

Double click it and a separate file with the extension .psb is opened:

Delete all layers:

Using your file manager, just drag and drop your design in it, in this case I used a drawing of The Crow I made.

Trim all empty/unnecessary space around your image:

Once the canvas is trimmed and fits your image, save the .psb file. Don't worry, you won't be overriding the source PSD file.

Switch back to the original .psd file and voilá. You have created an isometric 3D to show off your designs... or drawings :)

Here's a closeup:

Repeat the same steps with any of the free PSD files I referenced above.


After that is up to you to add your own style to the isometric.

Here's a video that shows you how to create your own isometric for business cards using Smart Objects. Amazingly simple:

Vote Up Vote Down

@Nimeshi706

I would recommend using the Illustrator perspective grid because it allows you to easily maintain and edit things on a plane.

Here's a very quick example I put together:



I recently answered a question dealing with the perspective grid that also included some further reading links at the bottoms. It's a great tool to read up on if you're serious about doing vector-based perspective work.

Vote Up Vote Down

@Murray976

If you want to recreate the image using Photoshop, you could do something like the following (please excuse my very quick and poor example!).


Create a rectangle
Use Transform > Skew to transform the rectangle in a way that imitates the desired perspective
Duplicate the layer and place it behind the original one, complete the corners by drawing more shapes
Apply your portfolio image to the first shape, and draw or cut and skew the side (there is no 'automatic' way of doing this)
Use lights and shadows to recreate the photographic effect

Vote Up Vote Down