Charles Williams is an award-winning illustrator. He produces type and illustration for clients such as Volkswagen, the BBC, Nike and Adobe. He also spends as much time as possible on experimental work. Charles has exhibited recently in London and elsewhere in Europe, and has been featured in several type and illustration books, magazines and type/illustration/design blogs. Resident in London, he works under the moniker Made Up.

Intro

Here, illustrator Charles Williams shows you how to create an elegant logotype with a 3D finish. You’ll then learn how to integrate it successfully into a photograph to give a naturalistic result.

Rather than using a 3D application such as Maya, you’ll discover how to apply your Illustrator and Photoshop skills to create a photorealistic artwork with depth and a unique character.

If you don’t have Illustrator, you can still follow most of this tutorial; you’ll need to import Charles’s vector logotype, which can be found in our project files.

Time to complete

Software

Project Files

Step 2

It’s incredibly important that you start a piece like this in the sketchbook. That way you can quickly establish what works – and what doesn’t. Look at ways in which the letterforms relate to each other, and make the shapes nice and thick so that you’ll have lots of surface area to work with later.

Step 3

When you’re satisfied, trace the result in Illustrator. I work using the grid, with Snap to Grid (Cmd/Ctrl + Shift + “) enabled – this means you can ensure consistency in size and that everything is exact. What works on paper doesn’t always work on screen, so feel free to modify and improve. Note that I’ve fused the tops of the ‘d’ and ‘i’ and sort of twisted them together.

Step 4

Open your background photo in Photoshop. I’ve used a shot of a salt pan in Tunisia, which you can find on the Download Zone. Crop the canvas size to 420mm square at 300dpi, and name the photo layer ‘desert’. Paste the type as a vector Smart Object and name it ‘type_vector’. Position it in the centre of the image.

Step 5

Making sure the ‘type_vector’ layer is selected, create a new layer (Cmd/Ctrl + Shift + N). Ensure the Use Previous Layer to Create Clipping Mask option is checked, and hit OK. Rename this new layer ‘shadows_main’.

Draw a path around an area in which you want to create shadow. Cmd/Ctrl + click on the path and then use a soft black brush to add the shadows, remembering to position them to match the light in the photo, which is coming from the top right. Apply this process to all of the type. Set the ‘shadows_main’ layer’s blending mode to Multiply.

Step 6

Some of the shadows will be tricky to add, so use the Pen tool (P) carefully to draw the curves correctly. You can use the original Illustrator vector shapes to help make the selection by adding a temporary stroke to the vector Smart Object to highlight the borders of the individual letterforms. Once all the shadows are done, set the ‘type_vector’ layer’s blending mode to Overlay.

Step 7

Double-click the vector Smart Object to edit it in Illustrator. Change the colour to C0, M0, Y0 and K20. Save and close it.

Back in Photoshop, double-click the ‘type_vector’ layer and add a soft bevel (Layer > Layer Style > Bevel and Emboss) using the values shown. The effect should be subtle.

Select the ‘shadows_main’ layer and create a new layer (again, make it a clipping mask), named ‘shadows_more’.

Step 8

Set the blending mode of ‘shadows_more’ to Multiply. Using a large soft brush, add shading to accentuate depth. Focus on the left of the image as the light source in the photo is in the top right. Reduce the opacity until it looks realistic.

Add a new layer as a clipping mask called ‘shadows_hard’. Set this layer’s blending mode to Multiply.

We still need to make the logo look less synthetic, so add noise (Filter > Noise > Add Noise, with the Amount at 20%) to the Smart Object.

Step 9

Select the type (Cmd/Ctrl + click on the layer icon). Now, using the Marquee tool (M), shift the selection down and left, as pictured. Carefully brush in hard-edged shadows on the ‘shadows_hard’ layer. These should be on areas where the type would cast shadows on itself. Set the layer’s blending mode to Multiply, at 50% opacity.

Step 10

Now create two clipping mask layers above the shadow layers and call them ‘light_overlay’ (blending mode set to Overlay) and ‘dark_overlay’ (set to Multiply). Use these layers to add light and dark shading to relevant areas.

Add another layer, making sure it’s not a clipping mask. Call it ‘highlights_dodge’ and set its blending mode to Color Dodge. Add light using a soft white brush to make the light areas glow softly.

Step 11

Add a 30% Gaussian Blur (Filter > Blur > Gaussian Blur) to the ‘type_vector’ layer. Using a soft black brush, mask out the blur, leaving just a few select edges blurred. This technique gives the type a more natural feel; I think it works better than having everything in sharp focus.

Step 12

To integrate the type into the photo better, we need to add some reflection from the photo to the type. Use the Marquee tool again to select a rectangle the size of the type from the area underneath the type. Go to the ‘desert’ layer and copy the selection. Paste this into a new clipping mask layer directly above the type in the layer stack.

Add a layer mask using the button on the bottom of the Layers panel. Create a gradient in this to fade it out upwards. Set the layer’s blending mode to Multiply.

Step 13

Select all of your layers, copy a merged version (Cmd/Ctrl + Shift + C) and paste it at the top of the layer stack. Apply a Gaussian Blur at 60% and set the layer’s blending mode to Soft Light at 60% opacity. If you want a more washed-out, retro feel, duplicate this layer.

Step 14

One very important element that will help integrate the type into the scenes is to add a shadow to the ground. Select the type, then create a layer above the ‘desert’ layer set to Multiply and 60% opacity.

Fill in the selection with black, and flip the shape vertically. Now Free Transform it so it is long and thin. Add a Gaussian Blur of 30%. Apply a mask and use a black brush to fade the shadow out on the right.

Step 15

Adding a twist to the bottom of the ‘v’ reflects the twist at the tops of the ‘d’ and ‘i’ nicely. To do this, copy the tip from the ‘d’ and ‘i’, flip it vertically and paste it behind the tip of the ‘v’. Change the colour of the tip to brown to match it with the image.

Step 16

Create a layer and drag it above all other layers. Fill it with white and set its blending mode to multiply. Add Noise at 20% and desaturate the layer (Cmd/Ctrl + Shift + U). Add some soft Satin to the ‘type_vector’ layer by selecting Layer > Layer Style > Satin, using the values in the screenshot.

Step 17

To complete the work, add some colour adjustment layers to bring out the yellows and the reds.