When you think of graphic design you think of type, layouts, logos, business cards etc. But what if you are required (or get inspired) to create a 3D logo, a 3D illustration or even a 3D interactive model? Although this style of design may not be common it is great to step out of your comfort zone and show clients a different approach to the conventional techniques.

Clients will have a better understanding of your designs if you showcase them on a product. For example, a logo placed on an appropriate product maximises your design more than just a plain logo (think coffee shop logo on a paper cup). Learning how to create 3D designs in Photoshop will allow you to create that particular 3D product. Here is a simple and not painfully comprehensive guide to creating 3D designs using Adobe Photoshop.

Step one - Importing the object

Let's get started. Open Photoshop. Create a new document - think about the canvas size and how the object is going to be placed. Drag and drop, link or embed the 3D files. Our sample 3D file is used to design a baseball bat. You can find alternative 3D files free or paid for here.

Our sample file includes:

• OBJS - which are the mesh of the object
• PNGS - which are textures maps
• MTL file - material files

Drag and drop, link or embed the 3D files (3D > New 3D Layer from File). You will be presented with an import dialog. Click 'OK'.

If you do not have the 3D panel out already, Photoshop will prompt you about loading a 3D layout. Click "Yes". Your 3D design should be loaded. If you click and drag around the model, your perspective changes. Notice the shadow and lighting, whilst you drag.

The model just has one issue: it looks awfully grey doesn't it?

Step 2 - Setting up the materials

We need to add the textures to the material. For this specific model there are two basic types of textures: color and attribute.

• Color - describes the surface texture
• Attribute - black and white version of the color map, allows you to define how bumpy, rough and shiny the surface is in different areas.

Since this isn't a complex model, we have four images. Two for the top and two for the bottom. Other models will break these up into more specific, individual maps.

In the 3D Panel you'll find a dropdown under the (objMesh).

This is where you find all the materials. Click on Top and you'll see it's materials open up in the properties panel. Each setting here can be controlled directly for the whole model or with precision through an image.

Click on each folder icon next to each attribute. You can load in a new texture. For example, click on the folder icon next to diffuse and load the material from the file you have downloaded. This will get the bad some color.

Drag and adjust the sliders; shine, reflection, roughness and bump slots. This will make the object more realistic.

Repeat steps for other shapes of the object - in this case the middle has no texture. If you're feeling adventurous you can even create a logo to put on the piece at the center of the bat.

Step three - Composition

Just like a real set, we now have to setup our 'set'. If you click on the bat, you can get a 3D axis to load. This will let you move, scale, and rotate the bat on the three principle XYZ axis. Just mouse over one of the arrows and highlights will flash up, showing each action. Position the bat however you like, just try to keep the scaling even.

At the bottom of the 3D panel you'll also find lights and built in models. You can add, adjust, and position these to fill out the space and light up your object. As you progress in your designs, you'll want to acquire some stock models or other assets to help you create 3D sets. These could be anything from meaningless background elements to full on models of tables and backdrops.

Step four - Render

In a nutshell, that's the basic of your 3D setup. If you want to take it further and make the object look even more realistic, it's time to render. Click on render (3D > Render). Rendering will make the image look more crisp. Depending on how large and detailed your object is, you will have to wait until it finishes rendering. The poof wheel or hourglass will continue and continue (it's worth it in the end). Distract yourself go for a walk, go on the internet, read more of our articles.

If you click on layers, you'll notice something important.

The rest of Photoshop sees the bat as nothing more than a regular layer. You can design around it just like any images you'd have imported. You can design, tweak, and finally export, without any hassle. It's all a smooth workflow. To do this otherwise, you would have to setup everything in a 3D program, render with a more complex engine, and spend a week or two studying render settings and shaders. And then face the possibility of having to re-render over and over until you had the image you needed.

Limitations

Creating quick and easy 3D models is best for Photoshop. If you have a complicated model or a broken mesh, Photoshop is not the tool to use. You'll also encounter some issues with file formats. Photoshop can only open the following 3D files (Adobe Help Site):

• 3D Studio (import only)
• DAE (Collada)
• Flash 3D* (export only)
• JPS * (Jpeg Stereo)
• KMZ (Google Earth 4)
• MPO* (Multi-Picture format)
• U3D
• Wavefront|OBJ

To cap off the flaws, Adobe is playing catch up. Other products offer more advanced rendering and materials. For a fast and simple method with designs Photoshop will get the job done.

Web Design

How is 3D Design useful for even web designers? Well, we'll very briefly cover two approaches available for 3D integration and the internet: faking it and embedding it.

You can either create a pre-rendered sequence and precisely play it back, like Apple does for their Mac Pro page or you can create a web based renderer like Thingiverse uses. The key details are going to come down to your audience and exact needs. Embedding images will be faster and lighter than loading and rendering a 3D model, but you sacrifice the views available.

There are a few hundred ways to 'fake it'. These range from freeware to payware, and cover a wide range of features. They all do just about the same thing: take a series of images and play them back with javascript. One of the fairly popular options out there is Sprite Spin. The basic premise is that you get your 3D object rendered as individual frames doing a rotation, then feed that to jQuery. The frames are then looped continuously, creating the rotation.

That's not the only way to use this particular library. It provides control to Javascript. A single animation could be played in response to the scroll position, a user controlled gui, or anything really. Sprite Spin was intended to provide a controllable video for looping purposes, but ther's more than one way to use any piece of code.

For a more custom solution, there's also the option of using HTML 5's video API. There's so much this new API enables in a site, without adding significantly to the code itself. It's possible to set a video as loopable, autoplaying, change its current time and more. In some cases, this can be done right with the embed. The only difference is going to be the asset file used. Instead of using a series of PNG's, this solution simply uses a video of the 3D content. With the right code, this could be used to provide an entire site with 3D graphics from a base set of assets.

The assets are the caveat to this approach. It probably won't be very ideal to use Photoshop to render out image sequences like this. That's where programs like Blender, Maya, and Element 3D come in. These tools are designed to make complex animations, creating turntables is not a problem for them. It's even possible to automate the process and handle models in bulk.

This leaves the option of live 3D in the browser. As computers have gotten faster, it has become possible to create 3D experiences entirely online. Just like the faking it approach, there are many programs that can render a 3D model live on a website. The key to this is WebGL.

The Web Graphics Language is in a sense the HTML and Javascript equivalent of OpenGL. It runs across browsers and platforms, enabling 3D content on just about any end user device. There are paid and free ways to implement this on any site.

Now, live 3D rendering has some downsides of its own. Whatever device is viewing the page has to do all the rendering. This means that the models have to be simple enough for the worst computer to handle them or some code will have to swap out the live 3D view for some alternative. At the same time, rendering like this means certain features aren't available. Where all the content is pre-rendered, the sky is the limit. Advanced shaders and composites can be used, but here, everything has to cater to the WebGL engine. The benefit is that any detail or angle of an object can be displayed and emphasized.

These drawbacks have restricted the usage of live 3D in web pages. The most prominent site I can think of using the technology is Thingverse. You can find their "Thingview" feature available for most models on the site. In my experience, it has considerable loading times and can involve a significant draw on memory. I attempted to view a Windup Bunny presented on the front page of the Thingverse site when I visited and couldn't get it to load at all. This approach isn"t yet as robust as it should be.

The possibilities are limitless

That was a lot of content to cover in a short period of time. 3D technology has been around for a long time. There's just too much to summarize in a single article.

Our goal was to get enough information out to get you started. If you have any questions or observations, be sure to let us know in the comments below.

Helpful links and resources

Adobe Downloadable 3D Content

Adobe 3D Panel Settings

Adobe 3D Fundamentals

Adobe 3D Texture Painting

Photoshop Cafe: 3D Building City Tutorial

Tom's Guide: Photoshop 3D Printing Tools Tested

Looking for more tutorials, try this one or visit blog.designcrowd.com/tag/tutorial for more helpful hints and tips to boost your designer skills

Looking to earn from your graphic design skills?
Check out the design jobs board and start earning today!

Written by Sam Costa on Tuesday, July 19, 2016

Sam is a freelance 3D generalist and video editor. His work has lead him to experiences with the cutting edge of production technology with tools like Avid, Maya, and Renderman. When he’s not working on a new effect, he’s researching game design or enjoying a good documentary.