Identify Design
100% Giraffe Approved
Tutorial Preview Avatar

Quick 3D Transformations without Photoshop

Avatar of Woody

by

Sunday May 13th, 2012 in General Web Tutorials

In this tutorial we're going to show you how to use one of Mozilla Firefox's built in features to take quick and effective 3D shots of images and webpages. Normally this requires Photoshop but using this trick you just need Firefox.

Manipulating images in Photoshop with the transform features can be a little time consuming depending on the subject. Using Firefox's Inspect Element feature we can take quick and easy 3D screenshots with minimal hassle. To do this first you need to obtain a screenshot of your webpage or save the image you want to adjust so you can place it on a webpage.

When you right click on an element in Photoshop you get given the option to inspect it:

The Inspect Element in the Firefox Menu
When you right click on an element in Firefox you can 'Inspect' it.

In the bar that appears at the bottom there is a 3D View button. Clicking this will transform the contents of the webpage into a 3D view that outlines all the boxes and wrappers of your page:

A 3D View of a Web Page
The 3D view stacks all the boxes on top of each other as they appear in the source.

Holding down the left mouse button and moving your mouse will rotate your view. You can play with it to get a good 3D view of your page, like those you will get when transforming the image in Photoshop:

A 3D View of a Web Page
You can rotate the view of the 3D view...

So you've probably gathered this is how we're going to take a 3D shot of our image, but how do we do that without all the boxes and elevation? We're going to use a little trick to do this. Take a screenshot of the webpage or image you want to have a 3D view of and save it. Make sure this image is flat like an ordinary screenshot. Then we create a new file and display just the image in the webpage. It has to be in a webpage as you can't inspect image files:

<img src="image.jpg" alt="My Soon to be 3D Image">

Then open the webpage where you put this image in the source in Firefox. On this page open the menu, click Inspect Element, then click 3D view. You should see your image in the 3D view and it should be completely flat:

2D screenshot of a web page
Your image should be flat in 3D view.

So all that's left is to click outside of your image to deselect it, rotate the 3D view to your liking and then simply screenshot the results. This process takes about two minutes and sometimes it's a lot more tricky to get a realistic transformation in Photoshop. Of course let's not forget the convenience of not needing Photoshop with this method! You can rotate in all dimensions which makes finding the right view easy... As well as the not so good views:

A Very flat view of a 3D Webpage
Not the best view... But it was easy!

Leave a reply

You must be logged in to post a comment.