From image to web-to-print template

24/02/2008

Just an image, no matter how cool or beautiful it is, has very limited application and mainly as part of some other design. This article explains how to convert an image into a useful web to print template.
Note: it takes longer to read the instructions here than to do the actual conversion.

Define the purpose

beware_by_acelogix.jpgWe use an image used by AceLogix as an illustration to this article.
Ask yourself: Where would I use this image? What sort of real-life application can it have?
AceLogix chose to use it in a gaming poster web to print template.

Wrap it into a design container

getting closer to web to printA poster needs to have a bit more information than a single background image to be of any practical use.
You need to design the container and step through all elements of the design and explain their intent.
Download the original CDR file before it was converted into a web to print template.

Top header

The top header is split in 2 parts by the big X. Read here how to split headers for web to print.
web

Limited space – unlimited length

web to print - url trancationThe website URL text frame should be able to accommodate long URLs, but it will run over the dark part of the image and become unreadable. Web to print users may enter texts that are shorter or longer than the one in the template.

Convert the frame into paragraph frame, place the cursor at the end of the line and press SHIFT+ENTER. See the overflow symbol (a small triangle in the frame handle underneath)? The text in the frame will show in smaller font to fit whatever URL the user enters.
web to print - URL resize
Watch a detailed demo or read more.

Composite text block

web to print - composite text“Time to play game!” is essentially a composite text consisting of multi-line “Time to play” and yellow “GAME!”. Split it into separate frames. Composite text blocks article explains how.

Image quality

Image quality requirements differ depending on the purpose of the web to print design. Any design for print would normally require 300dpi. This image insert has only 105dpi resolution and needs to be replaced with a better quality one. Read more on when image quality matters for web to print.
web to print - image quality

Background image selection

web to print - backgroundIt may be a good idea to give a choice of web to print backgrounds and reduce the file size as well.

  1. Replace the b/g image with a solid fill rectangular
  2. Convert it into a bitmap with required parameters
  3. Name it Background for clarity
  4. Place the newly created b/g image into a power clip of the same size to prevent other b/g images from breaking the layout

The template doesn’t look attractive any more. It is more like looking at a wireframe design. Don’t worry. You can replace the default preview image after uploading the template and it will look great again.

Field order

Check if the elements in the object browser appear in the same order as you would want them to appear in the form for user input.
In this example Game name appears first, when it should appear after Time to play slogan. Click on Game name in the Object Browser and drag it to the right place.
web to print - background

Save and extract fonts

You need to extract and upload fonts used with the template to the server, except for some common Windows fonts.

Upload and test

Upload the CDR file (download the file we produced), click on Fonts in the template menu on the site, upload fonts and click on Test order to test the template.

See also: