Text floating on clouds

13/02/2009

A 3D text is floating on realistic clouds. Combine the power of Photoshop and CorelDRAW to achieve this awesome effect in your web-to-print templates.

Web-to-print text floating on clouds

Before you start

Web-to-print before you start

/

  • Add a page frame (Layout/Page Setup/Add Page Frame). This will create a rectangular shape with the exact same size as the paper size of your template and place it as a bottom layer.
  • Input the dummy text and turn it into a variable web-to-print field called Text.

In a nutshell, we’ll create two sets of realistic clouds in Photoshop and save them as two seperate images. One with the sky background and another transparent image containing only the second set of clouds. After that, we’ll import the images in our web-to-print template and sandwich an extruded 3D dummy text between them.

Inside Photoshop

To draw clouds you’ll need to create a custom brush in Photoshop. Watch this video tutorial at photoshopvids.com to learn how to create the brush and draw the clouds. Or you can download the Photoshop brush that we used.

Background clouds

Web-to-print sky gradient/

Create a new document in Adobe Photoshop with the same page size as in your CorelDRAW template file and flood it with a Linear two color gradient (We used #0c4ca0 and #95b1c9 as the gradient colors).

/

Web-to-print paint clouds/

/

/
Create a new layer, set the Foreground color to White and use the brush tool to draw the clouds.

/

/

Next, we need to add some shadows on the clouds to make them look darker at the bottom.

Create a new layer and go to Layer/Create Clipping Mask (Alt+Ctrl+G). Change the brush opacity to 50% and the foreground color to Black.

Web-to-print cloud shadows/

/

/

Paint the bottom side of the cloud with this brush.

/

/

/

/

Repeat this step at least one more time to crate another cloud on top of the first one. This gives the illusion like there are a few separate clouds in the sky.

Web-to-print background/

/

/

We are done with the background. Save the image as a .TIFF file because we need to retain the transparency.

/

/

/

/

Foreground clouds

We need one more set of clouds that will go in front of the text. Turn of the visibility of the clouds you’ve made so far.

Web-to-print foreground clouds/

/

Use the same method to create the new set of clouds only this time we need them to be smaller since these will only cover the bottom of the dummy text.

/

/

Web-to-print transparent foreground/

/

Turn off the visibility to the bottom gradient layer.
The result should be similar to this. Save it as a TIFF file with the Transparency information.

Download the PSD file we made for this example.

Inside CorelDRAW

Import the background and place it as the bottom layer.

Web-to-print interactive extrude tool/

/

Select the dummy text and activate the Extrude tool from the toolbox menu on the left.

/

Web-to-print extrude text/

/

/
Click and drag over the dummy text frame to add an extrusion.

/

/
You can use these extrusion settings as reference.

Web-to-print extrusion settings

Web-to-print color shading/

/

With the text frame selected, click on the Color icon to add a color shading to the extrusion. We used 40% Black as the “From” color and White as the “To” color.

/

/

Web-to-print extruded text/

/

The result should be similar to this.

/

/

Web-to-print gradient text fillDuplicate the dummy text, remove the extrusion to the copy and add a two color Linear Fountain Fill to it with the same “From” and “To” colors that we used for the extrusion shading.

/

Web-to-print object manager/

/

As a final step, import the transparent clouds TIFF image that you made in Photoshop and place it on top of all the objects. At the end, your Object Manager should look like this.

/

/

Web-to-print 3D text on clouds/

/

/

The result should be similar to this.

All done!

Our web-to-print software can handle this effect easily! Upload the template into your catalog and test it.

Web-to-print text floating on clouds

/

/

Try this web-to-print template.

/

Download the FREE CorelDRAW template file.

/

/

/

/

See also: