Foil print preview

29/07/2009

Foil is commonly used in print finishing. It gives a product a distinct and often expensive look. Simulating foil in a web-to-print templates may be difficult, but not impossible.

Lets say you have a simple, two-text fields template of a brochure cover intended for foil print on a special kind of paper. The file the printer needs is far from a descent preview for the user since it’s just two text frames and no background. Making a separate Preview we-to-print template is a must in this case to show the real product to a web-to-print user.

Duchamp brochure design by Four IV/

/

We’re going to use this brochure design by Four IV as an example.

View more cool brochure designs at smashingmagazine.com.

Before you start

Take a photo of the final product. Clean up your image using Adobe Photoshop or some other image editing application. The goal is to remove the original text from the image and end up with a blank page that we can use as a background.

Photoshop Stamp tool/

/

We used Photoshop’s Clone Stamp tool (S).

Note. Alt+Left click to select a cloning source area.

/

Web-to-print before you start

/

  • Once you have the image cleaned up, import it into CorelDRAW and place it as the bottom layer in your web-to-print template.
  • Type in the dummy texts, set their horizontal font alignment and turn them into variable web-to-print fields.

/

/

In a nutshell, we’re going to add a perspective effect to the dummy text frames and make them look like they are foil-printed on the page by PowerClip-ing a gradient image inside them to simulate a reflecting surface.

Perspective

Select the variable text frame and go to Effects/Add Perspective in the top CorelDRAW menu.

Web-to-print add perspective/

/

Drag the corner nodes to desired positions. You can temporarily import the original photo at this stage and use the original text as reference.

Foil

The original foil print looks like a two color gradient with some texture most visible at the transition area. We’re going to use Photoshop to make a “foil” gradient resembling the original one.

Use Photoshop’s Rectangular tool (U) to draw a square that overflows the document and duplicate it (Ctrl+J). Assign the lighter color of the original gradient (#bfb2c2) to the bottom layer and the darker color (#0c0a0f) to the top one.

Photoshop rasterize layers/

/

/

/

/

Select both layers and rasterize them (Right click/Rasterize).

/

/

/

/

/

/

/


Select the top (black) layer, press Q to activate the Edit in Quick Mask Mode option and activate Photoshop’s Gradient tool (G) with a simple linear black-to-white fill.

Photoshop quick mask mode gradient/

/

Drag a small horizontal gradient to achieve something similar to this.

/

/

/

Photoshop masked selection/

/

Press Q again to exit Quick Mask mode. You should see a selection formed on the opposite side, press Delete to remove that part of the layer.

/

/

Photoshop foil gradient base/

/

/

The result should be similar to this.

/

/

Photoshop noise settings/

/

/

/

/

Merge both layers together (Ctrl+E), go to Filter/Noise/Add Noise and use these settings.

/

/

/

/

/

/

Photoshop motion blur settings/

/

/

/

Go to Filter/Blur/Motion Blur and use the following settings.

/

/

/

/

/

/

photoshop_blured_foil_gradient/

/

The result should be similar to this.

Sharpen the layer (Filter/Sharpen/Sharpen) and duplicate it (Ctrl+J).

/

/

/

Photoshop transition area/

Select the top copy and press Ctrl+F (repeat the last used filter – Sharpen). Use the same Quick Mask Mode approach from earlier to delete everything but the transition area of the layer. The goal is to have that part of the gradient sharpened more than the rest of the image.

/

/

Photoshop foil gradient image/

/

The result should be similar to this.

Save the image as a .jpg file and import it in your template document in CorelDRAW.

PowerClip

Web-to-print PowerClip gradient inside text frames/

/

PowerClip the gradient image inside the dummy text frames. The result should be similar to this.

/

Next we need to simulate the edges of the type. Since in most cases foil printing also adds a small emboss to the surface, the edges of the print reflect the light differently. To simulate this we’ll just place a slightly misaligned copy of the dummy text underneath the original ones.

/

/

Web-to-print misalign copied text frame/

/

/

Copy the dummy texts and move the bottom copies slightly towards the top-left corner.

/

/

/

/

The next step is to invert the dark/light sides of the gradient. Go inside the PowerClips (Right click on the object/Edit Contents) and mirror the gradient image horizontally.

Web-to-print text edges/

The result should be similar to this. Repeat this step to make another edge in the opposite corner.

Note. You can add a “fade out” transparency to the gradient image inside the bottom text frame to make the edge invisible on the other side.

All done!

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

Download the FREE CorelDRAW template file.

/

/

See also: