Create mile-high type art


Fantasy images don’t need to include cheesy damsels, dragons and generously proportioned elves. What they do need, however, is carefully considered, painterly colours, moody lighting and detailed texturing.

In this tutorial, Fabio Sasso shows you how to achieve that glossy, detailed fantasy look through careful compositing, and control of layers and blending modes. You’ll extrude type in Illustrator and then composite on textures and other details in Photoshop.

Finally, you’ll add the stranded princess figure and a couple of details so that she fits seamlessly into the image.

Step 1
Open a new document in Illustrator and type ‘DA’. Helvetica Black is a good font to use. Go to Effect > 3D > Extrude & Bevel. Set the axis to 23º, 25º, and -45º respectively, set the perspective to 145º and the extrusion to 865 points.

Play with the lights until the sides of the extrusion have good clear light and dark areas.

Step 2
Copy the 3D text from Illustrator and paste it into a new Photoshop document. Position it so that the DA is in the middle of the document. Next, import a brick texture; this one is from Shutterstock (tinyurl.com/fabiosbricks), but you can download free versions from tinyurl.com/bricktextures and tinyurl.com/bricktextures1. You’ll need to duplicate it to make it tileable and fit the height of the 3D.

Step 3
Go to Edit > Transform > Distort, and move the points to fit the perspective of the 3D object. Change the opacity of the texture so you can see the 3D object and use it as reference for the perspective. Use the same process on all the straight sides – we’ll tackle the curved edges in step 4.

Step 4
Sorting out the curved sides is very simple: first match the perspective with the Distort transformation (Edit > Transform > Distort), then go to Edit > Transform > Warp. You can make the curved sides by moving the mesh. Add textures to all the sides that are visible.

Step 5
Duplicate the 3D object with the textures and go to Layer > Merge Layers. Next, select Filter > Other > High Pass. Set the radius to five pixels. Change the blending mode to Hard Light, and change the colour of the DA to white.

Step 6
Duplicate just the 3D object and place it at the top of the layer stack. Now change the blending mode to Multiply. Select the brick texture layer and go to Image > Adjustments > Hue and Saturation.

Reduce the Saturation to -40 and the Lightness to -2. We want to increase the contrast between the light areas and the shadows.

Step 7
Select all the layers used to create the 3D with bricks and go to Layer > Merge Layers. Now create a new layer on top of the merged layer and go to Layer > Create Clipping Mask. Next go to Filter > Render > Clouds, making sure that your background and foreground colours are set to black and white respectively. Finally, go to Filter > Blur > Gaussian Blur, setting the radius to 10 pixels. Change the blending mode to Multiply.

Step 8
Select the DA and duplicate the layer. Fill it with a radial gradient, from dark grey to light grey in the middle. Duplicate the layer again and fill it with a Pattern Overlay by using the Paint Bucket (G) with the source set to Pattern. Use an asphalt or concrete texture with the blending mode set to Multiply. I used one from Shutterstock (tinyurl.com/concretetexture); free ones are at tinyurl.com/concretetextures and tinyurl.com/asphalttexture.

Duplicate the DA again and go to Layer > Layer Styles > Stroke. Set the size to five pixels, and fill type to Gradient, selecting black and white for colours. Set the angle to -85º. Also select Pattern Overlay and use an asphalt pattern. This layer will be beneath the other DA layers.

Step 9
Now add an image of a sky with clouds. (This one is included on the cover CD and in the Zip file attached, named Clouds.jpg.) Once you’ve placed the picture, go to Image > Adjustments > Hue and Saturation. Change the values to -8 for the hue, -50 for the saturation, and 10 for the lightness. Then go to Image > Adjustments > Photo Filter. Set the colour to orange and the density to 50%.

Step 10
Go to Layer > New Fill Layer > Gradient Fill, setting the colours to dark grey and black, and setting the style to Radial. Change the blending mode to Color Dodge, then double-click on the thumbnail of the Gradient Fill layer so you can edit again. We need to move the centre of the gradient to create a sunset effect.

Step 11
Go to Layer > New Adjustment Layer > Gradient Map. Set the colour to black and white, and tick the Dither box. Now change the blending mode to Soft Light.

Step 12
To create more clouds we need to modify a brush. Go to Window > Brushes and choose a regular brush. Apply the following presets: in Shape Dynamics, set pen pressure to 100%; minimum diameter to 21%, roundness jitter to 30%, and minimum roundness to 34%. Tick Flip X Jitter and Flip Y Jitter.

In Scattering, tick Both Axes, set the scatter to 67%, and count jitter to 20%.

In Texture, tick Invert, set the scale to 677%, tick Texture Each Tip, set the mode to Multiply, and depth and minimum depth to 100%.

In Other Dynamics, turn opacity jitter and flow jitter to 100%, with control set to Off.

Now you can start painting the clouds, using white, with some grey at the bottom of the clouds to add depth.

Step 13
Now it’s time to place a photo of a waiting girl. This one is from Shutterstock (tinyurl.com/waitingprincess), but you can get a free one from tinyurl.com/waitingprincess1. Extract the background of the photo, and place the girl in your image. Add another layer beneath the girl image, grab a black brush (B), and start painting on this new layer to create a shadow beneath the girl.

Step 14
Now add details, such as the birds, and select all layers and duplicate them (Cmd/Ctrl + Alt/Opt + Shift + E). With the duplicated layer selected, go to Filter > Blur > Gaussian Blur, setting the radius to 20 pixels. Change the blending mode to Screen and reduce the opacity to 80%. This will give the image a nice glow, and make the effect more realistic.

Fabio Sasso – abduzeedo.com

Advertisements

One response to “Create mile-high type art

  1. In the File Section of http://aries-films.net you can download everything you need to create your videos and go even further. Only direct ftp links. Just google for Aries-Films, its like goldmine for video editors…

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