TUTORIAL: How to Create an Incredible Typographic Illustration

Final Product What You’ll Be Creating

All work and no play makes Jack a dull boy. In this two-part tutorial, we’re going to learn how to bring a simple proverb into a complex typographic illustration that achieves a level of realism without actually using any photos. Yes, we’re going to build this idea from the bottom up. In the first part, learn how to model your own objects in Cinema 4D and prepare them for isolation in Photoshop.

 


Introduction

A random sighting of the famous proverb “All work and no play makes Jack a dull boy” is what sparked off this idea. Rather than seeing work and play as two separate activities, I sought to reconcile the idea in a single typographic treatment, while still exposing their peculiarities. Eventually, I settled on creating a work environment in a very playful way. To do this, I used a variety of contrasts. For instance, the rather plain perspective and frontal camera position makes this a very plain, static environment. This however is broken by the two words that float around the scene and add a sense of motion. There is also a contrast of light. The work side is somewhat dark, while the play side is well lighted. All in all, this is typically organized working environment that has somehow lost control of itself, in a good, entertaining way.


Step 1

The program we’re going to start in is Cinema 4D. The first thing we’re going to tackle is the word ‘play’. If you feel you need a reference for the letters, it’s a good idea to open Illustrator and trace the basic paths over an existing script font. In this case, I made a few basic lines that will become the base of the word. To create your own, enter the front view in C4D and trace the letters with the Bezier Tool.


Step 2

In order to turn this into a paint-like material, we’re going to use Metaballs. You can find it under Objects > Modeling > Metaball. To activate it, just drag all the paths you make on top of it in your objects menu. At first it will look rather odd, because we haven’t edited the paths with a Metaballs tag. You can use this tag to fine tune your results. Firstly though, click on the Metaballs object in the Object menu. Now click on the Object tab and change the Editor Subdivision to 3m and Render Subdivision to 0.2. The lower the number, the more precise result, and the longer it will take your computer to process the information. Also, as we add more paths and spheres to the metaballs object it will get harder and harder to update. Make sure you turn it off when creating new paths for it by clicking the tick mark in the Objects menu.


Step 3

Now we’ll add a Metaballs tag to the paths. For any paths you create, drag one of these over it.


Step 4

For each path, specify a strength of somewhere in between 1 and 4. You’ll have to be very specific though, as sometimes you may need a 1.1 or 1.2 value.


Step 5

Start adding extra paths to the letter P.


Step 6

A few extra ones should mimic a splash. Remember to edit the points of each of these paths so that it doesn’t end up looking flat. You can drag this in three-dimensional space to achieve that look.


Step 7

Move on to the letter ‘y’ and repeat the process.


Step 8

Now we’re going to switch over to spheres. Create a few spheres that intersect the paths. There’s no need to create tags for these. Just make them smaller or larger, as needed.


Step 9

Repeat this process and add some more across the word.


Step 10

These next few spheres shouldn’t be within the Metaball object. These are spheres that appear to have detached from the main word. Place these near the ends.


Step 11

It’s time to add a material to the word. You’ll need to download this free material. Open the C4D file you’ve got and make the following changes. First of all, change the Diffuse Color to a bright red: R:244 G:13 B:13.

NOTE: You can find the final material in the download folder.


Step 12

Now change the Specular to a simple white.


Step 13

Specular 2 should be yellow: R:255 G:255 B:98.


Step 14

Specular 3 should be a slightly darker yellow: R:247 G:206 B:43.


Step 15

Change the Reflection color to white and the Reflection Edge color to pink: R:250, G:209, B:209.


Step 16

All you need to do now is copy the material and paste it into the scene. Note that your cursor needs to be over the material in the Material Menu for this to work. Then just drag it over the Metaball Object and over the other spheres.


Step 17

Now add a Sky Object. There’s no need to give it a material. It’s normal white will do just fine, as we don’t want it to be too bright.


Step 18

Our paint material has a double coat. The inner coat is not visible, because we need to activate it with proximity lighting. Add a first light to the scene, and use the second screenshot to edit it. Don’t forget to enable Falloff – this limits the range of the light to a specified amount.


Step 19

Add a second light in the same technique. I’ve numbered it here, as it gets a bit confusing.


Step 20

Add a third light near the last two letters.


Step 21

Add a smaller one to the same side now.


Step 22

And one last light should do it.


Step 23

We now need a background. In the side view, create a rounded L shape spline.


Step 24

Go back to the Perspective view and Extrude it with the Extrude NURBS object. Once you created one, just drag the spline on top of it inside the Object Menu. Use the settings shown below.


Step 25

Find an angle you like, and create a camera. Don’t forget to edit its settings as shown in the second screenshot.


Step 26

That’s it for this word. It’s time to edit the render settings (Render > Render Settings) and render this thing! Use the following settings.


Step 27

The Output is where you decide the size of the final image. This one should be 1688 x 1050 px.


Step 28

Next, choose the format you want. I always save the in psd format, and tick Alpha Channel so I don’t forget it when I actually need it. But since we have a backdrop that’s also an object, the Alpha Channel is redundant here. You’ll need it later though!


Step 29

I’m always obsessed about anti-aliasing, and so I use 2×2 over 4×4, though 1×1 over 4×4 will do fine as well.


Step 30

Enable Global Illumination and change to these settings. This part will affect your render time the most. If you want a quick render, changing the diffuse depth to 2, minimum Resolution to 5 and Maximum to… say 45 should cut back quite a bit.


Step 31

And finally, uncheck Auto Light from the Options menu. Don’t render just yet, as we need to create one more element.


Step 32

I usually create the more complex paths in Illustrator just because I’m more familiar with it. You can create this in C4D or Photoshop as well. What matters most is that you have a vector path file that you can merge in C4D.

Here, we’re going to create a paint can. Create this shape that we’ll revolve in C4D.

Here’s a close up on the top.


Step 33

When you’re done, save it as an Illustrator 3 file somewhere. Go back to an empty new scene in C4D and go to File > Merge. Place the path into your scene.


Step 34

Add a Lathe NURBS object and drag the path in the Object Menu over it.


Step 35

Add a Circle Spline and position it as seen below.


Step 36

Add an Extrude NURBS and drag the circle path over it. Add a large Fillet Cap as seen in the second screenshot.


Step 37

Copy the first knob and make it larger. Push it into the bucket, and change the Cap to a very small one.


Step 38

Copy these two, rotate them by 180 degrees and place them on the other side as well.


Step 39

To create the handle, draw a Bezier Spline in the top view.


Step 40

Use a Sweep NURBS and a small circle spline to give it thickness.


Step 41

This is what your Object Menu should look like. Select them all and Group them.


Step 42

We’ll now create a simple material for the bucket. Use the following options. In Color, select Noise by clicking on the Small arrow button in the Texture field.

Click on the Noise Tab to bring up these settings.


Step 43

Splendid. Now just copy the bucket into the first scene and scale / rotate it in place.


Step 44

In order to render the scene, we need to transform the Metaballs object into a Polygon Object. This is basically like when you rasterize a vector shape in Photoshop. By doing this, C4D no longer needs to calculate the Metaballs process during rendering. First of all, copy the Metaball into a separate blank scene and delete everything except the letter P. In the Object Menu, Shift + Select all the layers and Right-click > Current state to object. This will take a while, so hang on while C4D kills all your RAM for a few minutes.


Step 45

Once you’ve done that with the rest of the word, paste it back into the scene and render it. Your results will vary but my configuration took about 11 hours to render. That material is an absolute pain.


Step 46

Let’s move on to the second word now. As a guide for the screws, I created a mold, if you will. You can create one yourself by creating a Text Spline, applying an Extrude NURBS, and knocking off the Caps in the Caps tab. Create all this in a new blank scene.


Step 47

Download these free nuts and bolts. This whole part is simple in concept, but very laborious. Resize and rotate several bolts into the first letter.


Step 48

Add more into the mold, but try not to make them touch or intersect.


Step 49

Here is the first letter, all done. Add smaller bits and pieces to fill in the blanks.


Step 50

Repeat the process for the rest of the word.


Step 51

We’ll now move on to creating the ventilation shafts. Nothing fancy, just a couple of multiplied objects. The first one is a Tube Object.


Step 52

Apply the following settings to the ventilation shafts.


Step 53

Now go to MoGraph and add a Cloner Object. Drag the two objects on top.


Step 54

Let’s create a frame now. Create a very long Cylinder.


Step 55

Let’s create a second frame now. Create a very long Cylinder and Multiply it in the same way.


Step 56

Copy the frame Cloner Object, resize the tube and place it as seen below.


Step 57

For this part, I used a few objects from Greyscalegorilla’s Light Kit Pro. You can model all these things yourself, but this one’s a real time saver. If you have it, drag a StudioL object into the shaft scene.


Step 58

Make it large. Very, very large :)


Step 59

Also from the Light Kit, open WindowLightStudio and copy the white backdrop.


Step 60

Paste it in our scene, and delete a few endpoints to turn it into a straight, white plane, rather than an L shape.


Step 61

Make it smaller and place it in the scene.


Step 62

Make a second copy and position it as seen below.


Step 63

One final thing we’ll use from the Light Kit is the blue softbox. Copy it into our scene.


Step 64

Turn it into the mother of all softboxes!


Step 65

In order to darken the left side, I created a black ceiling and wall. Create two similar planes and apply a new material that only has 0% Luminance.


Step 66

Time to add a Sky Object. Add a light Gray material to it, as seen in the second screenshot.


Step 67

All done! Here’s a final render of the scene. Still, we’re going to have to make changes to these objects in Photoshop. To do that, hide everything, except the backdrops, uncheck Global Illumination to get a much faster render, and save the render as a psd file with Alpha Channel included.

When you’re done with that, repeat the process to isolate just the shafts and make an Alpha Channel file.


Step 68

Still, you’re probably wondering what happened to the first word (work+). We’re going to use this exact scene, but alter it slightly. First of all, paste the word into the scene and find a proper place for it. Copy some of the bolts and paste them around the scene. Hide the backdrops, ventilation shafts and giant L shape backdrop. Leave the black walls, sky object, and softbox in place. Below you also have two images that show the final render and its alpha channel render.


Final Image Preview

With a bit of stitching together, here’s what you’ll get.


Part 2

Step 69

Alright, let’s jump into Photoshop and get this thing started! Open the render you made of the backdrop and ventilation shafts.


Step 70

Go to Layer > New Adjustment Layer > Gradient Map. Create a Gradient Map similar to the one below. The color sequence from left to right is: #350606; #752136; #ef5054; f5f7c3; eff0dd.

Set the Layer Blending Mode to Multiply and Opacity to 70%.


Step 71

Add another Gradient Map with the following colors: #000000; #781212, #d86651; eda5aa.


Step 72

Now we’ll start to include objects into our scene, by isolating them with an Alpha Channel. I’ll demonstrate this process with the first word. First of all, open the render you’ve made.


Step 73

Now, also open the render you made that contains only the object, and no backdrop. If we would render the word with the backdrop, then the backdrop itself would show up in the Alpha Channel, leaving a selection of the entire canvas, instead of the word itself. Now open the Channels Tab and Command + Click on the Alpha 1 Channel to make a selection of its contents.


Step 74

The problem with isolating objects like this is that you get a very thin over exposed outline. To cut this out, we’re going to shrink the selection by 1 px. Go to Select > Modify > Contract. When the dialog appears, make sure the field says 1 px, then click OK.


Step 75

We’ll now save this selection, so we can load it up in the final ‘work+’ render. Go to Select > Save Selection.


Step 76

In the Destination Menu, select the final render that you have of the ‘work+’ word. Then name it something, like alpha channel and click OK.


Step 77

Head over to the final render, go to Select > Load Selection, and under the Channel Menu, find the one you saved. Press OK.


Step 78

Before I turn this into a mask, I need to fix something I didn’t notice in the render. I’ve left a part of the black ceiling in the view, so grab the Marquee Tool, hold down Alt and drag over that area to make sure it’s not selected. That area will be completely dark later on and you probably wouldn’t even be able to notice it, but it’s a worthy precaution.


Step 79

In the Layers menu, press the Add Layer Mask button to isolate the object quickly.


Step 80

Drag this into the project and find a spot for it.


Step 81

To simulate a Depth of Field, we’re going to blur some of the bolts that are floating around. Make a wide selection (leave room for the blur to spread) and go to Filter > Blur > Gaussian Blur. I’m not using Lens Blur in this case, because that will lighten the edges of the render significantly. Since this is a dark area, we don want that. I would advise to use Lens Blur over Gaussian in most cases though.

After you applied the Blur, you may notice that the edges of the bolts aren’t blurred. That’s because you may be blurring only the contents of the image, and not its mask. After applying, don’t deselect. Go to your layers menu, find the layer you’re working on and click on the layer mask box to the right. Blur again.


Step 82

Repeat this process and cut out a version of the backdrops. Over these though, add a Gradient Map Adjustment Layer (make it a mask so it only affects the backdrops and no the background) with these colors: #222c48, #b6bac1.


Step 83

Just like in the previous two steps, isolate the vents. I find the left side a bit too bright, so I’m going to darken it with a black-to-transparent gradient. Make it a mask so it’s only seen within the ventilation shaft render. I’ve highlighted the gradient with red in the second image.


Step 84

Add the final render to the document; the word ‘play’. Isolate it the same way you did with the rest.


Step 85

Make a selection of the layer, and while holding alt, remove most of the selection with the Polygonal Marquee Tool so you only have the bucket selected. Right-click inside the canvas and hit Layer Via Copy. Move this layer underneath, and don’t forget to remove the bucket from the original layer as well.


Step 86

On the ‘play’ text layer, Create a Gradient Map Adjustment Layer as a Clipping Mask and change the colors to these: #1c1b1b; #ffffff.

Set the Layer Blending Mode to Hard Light. This will increase the contrast of the type and bring out those lovely reflections.


Step 87

There’s one last adjustment that needs to be done to this text. Because of the pure white backdrop that we rendered this over, there’s a white reflection that’s too strong on the bottom and left side. Since we’ve isolated this from the bucket, we can just add a red soft bevel on that side, that will eliminate that white reflection. Just add a Bevel and Emboss Layer Style with these settings:


Step 88

Add a new layer as a Clipping Mask for the ‘play’ layer, and Create a few soft, white strokes that brighten the right side just a bit. They’re highlighted with blue in the second screenshot.


Step 89

We now need to add a few paint blobs around the scene. With the Elliptical Marquee tool, make a selection of a round blob from within the render.


Step 90

Copy and Paste it into a new layer. Put it on the far, right side.


Step 91

You may notice that it’s considerably darker than the rest. That’s because the right side should be much brighter than the left. Create a New Blank Layer and make it a Clipping Mask. Fill it with white and turn down the layer Opacity to 30%.


Step 92

Add a few more around the scene, and remember to blur some of these out.


Step 93

Add a couple of smaller ones on the left side.


Step 94

Making a black layer here on top won’t be enough for a realistic look. We also need to keep the highlight in place in order for it to look realistically darkened. Use a Curves Adjustment Layer as a Mask.


Step 95

The trouble with curves is that it also affects the colors. To tone down the color intensity, create a Black and White Gradient Map Adjustment Layer as a Layer Mask and turn down the Opacity to 40%.


Step 96

Another issue we need to fix are those tiny little highlights on the backdrop. From boosting up the contrast, they’ve all but disappeared. Use the Pen Tool in Path Mode, and on a new blank layer, trace a path over an existing highlight.


Step 97

Grab the Brush Tool (B) and change it to a soft, 6 px diameter round brush.


Step 98

Add these highlights all over the scene, where needed. As usual, I’ve highlighted them with blue for easy spotting.


Step 99

Don’t forget the right side. You may need to make these stronger, since this is the well-lighted side.


Step 100

The bucket felt a bit lonely, so I re-rendered it in a different position and darkened it a lot.


Step 101

We’ll now darken the background just a bit, so right above the first render of the scene, create a New Blank Layer and fill it with White. Go to Filter > Distort > Lens Correction.


Step 102

Create a vignette effect by using similar settings.


Step 103

Change the Layer Blending Mode to Color Burn and Opacity to 60%.


Step 104

For this step, we’re going to make a quick hop into Illustrator to create a pattern of Squares. Just create one, duplicate it as many times as needed to get this pattern. You can do this Photoshop as well of course.


Step 105

Paste the boxes in Photoshop as a raster image, but make it really big before you flatten it.


Step 106

Free Transform it until you match the perspective of the floor.


Step 107

After you’ve positioned it, change the Layer Blending Mode to Screen and Opacity to 10%. Add the following Layer Effects.


Step 108

Add another one over the back of the scene. No need to change the perspective for this one.


Step 109

And in order to finally finish this off, we’ll add a Selective Color Adjustment Layer on top of all the layers. With this, we’re going to change the colors up a bit. In the Reds menu, change Magenta to 6%, Yellow to -4% and Black to -3%.


Step 110

Switch over to the Neutrals tab and Use these settings: Cyan: +2%; Yellow -21%; Black -11%.


Step 111

And the final one for the day is Blacks: Cyan: +5%; Yellow: -10%; Black: -2%;


Final Image

That’s it, finally, I know! I hope it’s been a good read, that is if you’ve read a single word of it of course!

About shandybt

an ordinary man work as pharmacist who loved to shared....

Posted on October 25, 2010, in Repost, Tutorial Photoshop and tagged . Bookmark the permalink. 1 Comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: