DirectSmile Designer. User Guide

Transcription

1 DirectSmile Designer User Guide

2 1 Welcome to DirectSmile DSM Designer: Quick Access The DSM Designer Range of Functions Background, Pictures, Masks and Personalisation Background, Pictures, Masks and Personalisation Getting the Personalisation on to the Background: The Drawing Methods Draw Normally (with Picture and Mask) Apply Opacity Apply FillColour Apply with Picture Apply Directly The Console in Detail Loading and Saving Sets The Work Palettes The Dock Stage Direction Palette Editing Modes Tools Palette The Layers Palette The Layer Effects Palette The Toolbar and the Typesetting Palette The Outer Frame Palette The Grid Transformation Palette The Frame Styles Palette Palettes with Special Functions Fixed Background Colour Replacing Characters (Frame-Based) Creating Your Own Sets: Step by Step Creating New Sets Saving Sets The Background Picture Background Picture (for one-line texts) Alternative Background Picture (for two-line texts) Working with ClipFonts Selecting a Clip Set and Font The Suitable Font More about Clips Generating Your Own Clip Sets Formatting Clips Correctly Clip Filters Clip Tracks

3 5.4.8 Closing Images for Clips Clip Perspective Clip Balance Clip Overlay and Single-Clip Overlay Clips: Settings for Experts The Clip-Font Editor The ClipFont Editor Commands Editing the Rulers Creating and Editing Letters Script Fonts: Docking and Turning Points Working with PicFonts Creating PicFonts Replacing Characters with the Replacement Table Personalising Sets with PicFonts Picture-in-Picture Personalisation Creating Sets with Picture-in-Picture Personalisations Positioning and Scaling Rotating Using Picture Frames Masking Pictures Fine-Tuning: Effects, Filters, Actions For Single Frames Filters Memory Actions for Manipulating Masks Surface Effects For the Entire Set Actions for Background Pictures Background Information Preferences Defining the Grating for Personalisation Frames Generating Templates for RGB < = > CMYK Look-Up-Tables The Image Cache Sets from Previous Versions Exporting Sets Scaling Sets Saving Single Pictures Working with CMYK Image Data What Can DirectSmile Animation do? What is NOT in this manual Three Tips before Starting

4 How DirectSmile Animation Works Working with DirectSmile Animation Interface The Príncipes of Animation Frame-for-Frame Adding Keyframes Tweening Settings for Tweening Acceleration and Slowing Down Tweening before Running Timing Animation Channels Generating New Channels Managing Animation Channels Onion Skins Text Frame with Fixed Contents Exporting GIF Files and single files Exportable Formats Settings for GIF Export Creating and Using a Movie Background Channel Tips and Tricks Using Effects and Actions Transformations Rotating Objects Animating Frame Objects using Picture in Picture Multi-Line Text Drawing Part of a Clip-Font Personalisation DirectSmile Hardware and Software Guide Introduction System for VDP Studio System for DSM Integration/Image Server, Cross Media or Card & Gift Shop Installing on Virtual Machines Acknowledgements Welcome to DirectSmile Congratulations on deciding to use the leading software for personalising pictures! This means for you: It was never so easy to design and print personalised images. And there were never so many possibilities to achieve sophisticated design tasks for variable data printing, cost-effectively and efficiently. Please accept our invitation! Discover the DirectSmile s possibilities and delight your customers with unique print products. 4

5 I. Design Layouts for Personalised Images on Your Own: From A as in Action Settings to Z as in Zigzag Filter Let your ideas become reality. The DirectSmile Designer (DSM Designer) is your instrument for unlimited design flexibility. You can use practically any picture element to generate impressive fonts, optimise your fonts for every background image and refine your Layouts using a broad palette of design settings. Your DSM Designer is oriented 100% to the user, offering fast, direct and simple access to all commands and immediate previews always including the personalisation. II. Creating Documents for Variable Data Printing and Production on Your Digital Printing Equipment The DirectSmile document solution for Adobe InDesign opens up boundless flexibility for variable contents. Not only for personalised images, but also for all other elements like texts, pictures, colours, graphics, font styles, prices At the same time you receive numerous practical commands to allow your personalised picture for fast and smooth production of the personalised images you design: imposition schemes, job ticketing, output options for PPML, JLYT, PDF and more DirectSmile offers you regular software updates. See also the customer area of our web site: You can reach the DirectSmile Support team at: DirectSmile GmbH Alt-Moabit Berlin, Germany DirectSmile GmbH. All rights reserved. The information contained herein is subject to change without notice. The only warranties for DirectSmile products are set farth in the individual product descriptions. DirectSmile shall not be liable for technical or editorial errors or omissions contained herein. All trademarks and registered trademarks are property of their respective owners. All use of this manual is subject to the DirectSmile licence agreement. 5

6 DSM Designer: Quick Access Now let s get started. We will create a DirectSmile Set together, step by step. Have you already started the program? No? Well, then, look for the Start icon of the DirectSmile software on your desktop. Please double-click on the icon. Once the software has started, the left side of the window will show a quick-start display. Move the mouse to this area. The first button on the right opens the Picture Editor. Edit Personalized Picture A Wizard assists you in creating your DSM Set. In our example we will create a new Set. For this we click the button in the middle. I would like to create a new Set folder. Automatically you will be sent to the working directory of the Generator. Enter the name of your DSM Set in the Set Name field. Now we need a background image. To keep the search from taking too long, we have prepared an image for you here. If it looks familiar, it should. We have already used this image in a DSM Set included in your software package (DSM DaisyMeadow). You guessed right: we are going to reproduce this DSM Set. You will find this picture in the TutorialImages -folder within the DirectSmile Software folder. It is called Meadow.jpg. 6

7 Meadow.jpg Ready to move on? The next step is to load the copied image and select it as a background image. That takes care of the first phase. We created a folder and copied our background image to this folder. All done! 7

8 Now your desktop should look something like this. What s next? One thing we always need for a personalisation is a Text Frame. After all, the text has to be positioned somewhere! A toolbox is displayed at the left. The very first field in this box is the one for opening up a new Text Frame. You can see in the background image that some space has been left empty. We want to use this space for our Text Frame. Keep the left mouse button held down and move the mouse. Create a new Text Frame. Initially, the DSM Designer will always select the system font by default. Since our result is not supposed to look like this, we switch to another kind of personalisation right away: ClipFonts. 8

9 The menu bar at the top of the screen includes a button with a large A on it. Click this button once and select ClipFonts. Almost done. That looks pretty reasonable already. Save the Set (File Menu/Save Set). We re not so easily satisfied. We could add some additional Clips around the personalisation so that it doesn t look quite so empty. How does that work? Take a look at the section on Tool for Inserting Individual Clips to find out. 9

10 The DSM Designer Range of Functions Anyone familiar with the first version of the DSM Designer will be pleased to learn that the new user interface can be operated even more easily and intuitively. Transformations like those in leading graphics software, clearly arranged palettes, easier handling and faster image rendering are the advantages of the new version. All those new to the program will be astonished how simple it is to produce genuine and realistic picture personalisation s. Working with the DSM Designer will be easier if you understand the principle behind picture personalisation in DirectSmile and the mode of its operation. While we can leave all of the technical processes in the background to the programmers, it is important that you have some understanding of the basics so that you will be able to use the entire range of functions available in the DSM Designer correctly. Like any other specialized software, it has a few quirks you should be told about because they are hard to discover intuitively. To those of you who would like to see something first, we recommend starting with the next chapter. For all of the rest of you, I promise to keep this explanation as short as possible. Background, Pictures, Masks and Personalisation Pretty much everybody finds some kind of personalised mailings in the mailbox these days. The address label shows your name and address and, often as not, your name is printed in the salutation on the cover letter. What you don t find so often is a postcard showing a beautiful young lady lying on a green meadow, surrounded by daisies that happen to be growing in a pattern that spells your first name. Fig. Unfortunately, this is not your home mailbox; the first name printed here is correct only if you happen to be named Julia 10

11 Well, actually it s not a coincidence. Maybe 20,000 other recipients took the same postcard out of their mailboxes on the same day, and each of them read their own first name on the meadow. It would be far too expensive and time-consuming to prepare each of these first names in an image editing program individually. So there must be another way to do this. The magic word is picture personalisation, and it works more or less like a mail merge that uses images instead of text. On the one side we have a database, containing a quantity of names. The DSM Designer comes in the middle, to make sure that the daisies are arranged in the correct sequence. On the other side we have a stack of postcards on which all of the names in the database are printed. The basic principle is quite simple. For the background picture we use a meadow with daisies. But we make sure that no daisies are growing in the middle of the background, for that is where we want to display our daisies in various arrangements that is first names. Fig. Background picture without any name The DSM Designer plots the name at the precise position where you have placed a text frame. In this example flowers are used to plot the name. Fig. Detail of the image with the name 11

12 But we do not need the entire rendered image to personalise the picture, just the individual daisies that make up the name. There is no need to re-render the meadow surrounding it. To exclude the meadow from our personalised picture, DSM Designer generates not only a new image, but also a mask to be laid over the rest of the picture. Fig. The mask for the individual names If you have never encountered masks for image editing, try imagining them as the masks people wear at Halloween. Most of the masks have holes for the eyes, the nose and the mouth. Where these holes are you can see what s behind, but the rest is concealed. The black areas on the masks illustrated here are the holes. In these areas you can see what the picture below looks like. Here is where you will see the personalised daisies. Where the mask is white, you cannot see through it, that is, everything other than the daisies is concealed in the new rendered images. And what about the mask itself? Why can t we see the mask on the picture at all? Because it has an inestimable advantage for us: it is invisible. This might put a damper on the fun at a Halloween party, but it is extremely practical for image editing. After all of this we have managed to place two names on the meadow successfully and with a suitable database we could place as many as we like: Fig. The final pictures 12

13 Fig. The way DirectSmile works You can view this principle in the DSM Designer as well, to check pictures and masks. Do this by going to the menu bar under Window => Workplace and selecting the Progression (Picture/Mask) command. Fig. Progression from picture and mask to visible motif Background, Pictures, Masks and Personalisation Flowers on a meadow are not the only thing the DSM Designer can write with. The program distinguishes between different possibilities With a Standard Font The simplest possibility, of course, is to write directly on a background using a font installed on your computer. That would be a picture personalisation with a normal font. In some cases this option is appropriate, but often it does not look terribly attractive. Fig. The meadow personalised without flowers, using the Arial font 13

14 Using a ClipFont Our daisies on the meadow are what we call a ClipFont. This means that the letters are made up of small pictures (Clips). A single daisy is a Clip. A ClipFont may contain several of these Clips, however. If we look more closely, we recognize that the daisies are not all identical. Fig. Daisy Clips with masks In our motif there are two different daisies. These are enough to ensure that the final image looks quite natural, keeping in mind that each individual Clip may also be rotated slightly by a random number of degrees. Each Clip has a corresponding mask. It is there to conceal the parts of the individual Clips that we do not want to see. We already explained above that the black areas under the mask are visible and the white are invisible. This can be illustrated well by means of our Pigeons Clip Set. Fig. Pigeons Clip Set: picture mask shadow This Set consists of eight different Clips. The pigeons are displayed on a slightly reddish background, which may or may not match the background you want to use. Let s get rid of the pigeons background just in case. We can do this using masks shaped like each of the pigeons to ensure that only the pigeon will be visible, but not the background. Such masks are necessary because pictures for the computer are generally rectangular. This means we need a mask to define the area we actually want to use. To the right of the mask you can also see the drop-shadow associated with each of the pigeons. We ll come back to this later. For now it is enough to know that a drop-shadow can also be saved as part of a Clip Set. But how do the Clips know how to arrange themselves in order to form a letter? That s easy. Every letter has a certain shape. This shape is defined by what is known as a path. The DSM Designer simply places Clips along this path at certain intervals. 14

15 Fig. This is what a path for Clip fonts looks like. The paths can be edited in the ClipFont Editor Using a PicFont (PictureFont) In a ClipFont the individual letters are put together using nothing but small pictures (Clips). In a PicFont each letter is displayed using a single picture. The noodles in alphabet soup are a classic example of this, or letters glued on a door, like the clowns below. Fig. The Clowns PicFont. Each letter is a picture Picture-in-Picture Personalisation Personalising pictures using pictures means only that we write not only the recipient s name on our cards, but also insert a single picture. This option presents itself, for instance, when we have photographs of our recipients available. 15

16 Fig. A card for Harry Fig. And one for James 16

17 Getting the Personalisation on to the Background: The Drawing Methods The principle of a background image, a Clip and a mask over it is only one of the ways in which our personalisation ultimately can be placed on the background. There are other ways of doing this, too. Later you can define for each frame individually which method is to be used for personalisation. This definition is made using the Drawing Method menu in the toolbar. Fig. Drawing Methods Use the drop-down menu to select the method directly. Next to each selection there is also a small palette button. Small examples for the various alternatives are presented in the overview for drawing settings. Fig. Settings for the drawing methods 17

18 3.3.1 Draw Normally (with Picture and Mask) This setting corresponds to the principle we discussed above. The small pictures (the daisy Clip, in our example) were placed under a mask and then plotted on to the background. Before the final step other filters and features can be applied to the personalisation, such as a drop-shadow Apply Opacity As it is easy to misunderstand this concept, we will go into it in greater detail below. Fig. Apply opacity To apply opacity we use the mask we already became acquainted with in our basic example. This mask is our guarantee that we will still be able to see the letters. At the left of the figure is the mask displaying SUSI. But this time there is no Clip or mask under the picture (and thus no daisies!), but rather a coloured area, which is either black, white, or entirely transparent. If you push the slide control to the left, it is a white area; to the right, a black one. This has nothing to do with opacity, but then again, we don t really need a slide control to set black, white and transparent. When the slide control is located at a central position (a value of 100), our coloured area is transparent. The further it is pushed to the left, the greater the opacity of the white area. At the extreme left, the area is then completely white. As long as the area is still half-transparent, we can still see the background through the area. This is precisely the effect desired. Fig. Drawn with opacity - brightened We can see the shape of the daisies as a brightened (or darkened) background and can also apply additional operations or effects to the personalisation (the ever-popular drop-shadow, for instance). Fig. Drawn with opacity - darkened 18

19 3.3.3 Apply FillColour Is the same principle as applying opacity. The rendered mask is used for personalisation automatically and a coloured area is placed behind it. Fig. Settings for applying FillColour Only compact colours can be used with this feature, however. Half-transparent colours are not possible. Click on the small coloured area at the left to open the colour selection dialog Apply with Picture This operation works using the same principle as applying FillColour. Instead of a FillColour, however, you select a picture, as illustrated in the figure below. The picture must be located in the folder of the Set you are working on and must be in TIFF or JPEG format. Note: The picture should be in the same format and resolution as your background picture! Fig. Applying with picture Apply Directly When you apply directly, no mask is used. Instead, the rendered personalisation is applied directly to the background directly. Fig. Apply directly The advantage of this method is the significantly reduced rendering time for picture personalisation, especially for large print-runs that involve rendering many pictures. However, the filters and effects mentioned so often above, like drop-shadows, cannot be applied to such motifs. These settings will be lost when this command is used. What you learned in this chapter should be a sufficient basis for working with the DSM Designer. Now we can dive right in to our work. 19

20 The Console in Detail Start the DSM Designer by starting the DirectSmile application and then clicking Generate Picture Personalisation. If you only purchased a DSM Designer licence, the apllication will start directly. Fig. Starting the DSM Designer Loading and Saving Sets When you start the application, the DSM Wizard is opened. Select what you would like to do and click Next or Finish, as appropriate. We will explain how to create your own Sets later. Since you several Sets are supplied with the software during installation, first we want to see what we can do with the ones we have already. Fig. The DSM Wizard 20

21 Once you have clicked I would like to open and edit and existing Set, the Set browser opens. It displays all of the Sets included in the Sets folder of the DirectSmile program directory. Fig. The Set browser If you do not see the expected Set displayed when you open one of the folders, this may be because the Set you are looking for is an older version of the Set. Try again using the command Load Version 2.0. The latest version of a Set is designated with the file ending dset. Select the desired Set (for instance, the daisies on the meadow: DSM_DaisyMeadow ) and open the corresponding file with the dset ending. As a rule we recommend saving every Set right away under a new name, especially if you would like to make major changes. The corresponding command is also located in the File menu. To make sure that the DSM Designer can find your Set quickly the next time you would like to open it, it is a good idea always to save the Set in the Set folder of the DirectSmile folder. You can also save the Set to any other folder, or course, or even specify a network drive, so that the Set can be accessed by other computers as well. Note: Of course, the DSM Designer is downward compatible. If you would like to open and edit a Set that was created with a previous version, exit the Wizard by selecting Cancel and use the Load Version 2.0 Set command from the File menu. 21

22 Fig. The DSM_DaisyMeadow Set 22

23 The Work Palettes Now we want to see what all we can do with our daisies. The first step here is to look at the tools we have to work with. Click once on the Window menu. Fig. The Window menu 23

24 You know the drill: When a checkmark is placed before a name, that palette is displayed; if no checkmark is set, it is not shown. For an initial overview let s open up all of the palettes we would like to work with right away. The Typesetting palette may not be active yet. Activate the text frame on your picture. Now the palettes will be displayed. Fig. The DSM Designer window in its full glory You can handle and move the palettes as you like. Most of them show all functions at a glance and cannot be enlarged. However, a small, chequered, triangle is displayed at the lower right-hand corner of the Layers palette. All palettes with this icon can be scaled as well. 24

25 4.2.1 The Dock In no time at all you will realize that the Dock is an extremely practical feature. The DSM Designer is bursting with so many possibilities that we could pave the entire console with palettes. But this would hardly simplify your work with the software. Whenever you drag a palette to the upper area of the Dock, like the Typesetting palette just opened here, it locks into position in this window. Fig. Dragging the Typesetting palette to the header area of the Dock Once the palette is locked in to the header area, you need only click a button to switch back and forth between the various palettes in the Dock. Use the blue arrow pointing downward at the lower edge of the Dock to release the active palette from the Dock. Fig. Releasing a palette from the Dock 25

26 However, you will need some palettes so frequently that it does not make any sense to store them in the Dock. It will soon become clear which palettes cannot be sent to the Dock for this reason Stage Direction Palette In this palette you can see where the Smile in our text frame comes from. The Stage Direction palette is available so that you can test your Set under real conditions. Fig. Stage Direction Palette Click once on the scroll bar of the middle entry field. We have prepared several names and set phrases for you so that you can check whether or not your Set works the way you want it to, or whether it needs a bit more work. Fig. Test objects in the Stage Direction palette The entries include quite short names and long ones, names with special characters and examples in Hebrew, Cyrillic and Arabic. Select the Friedrich-Wilhelm entry first and then click the large Go button. Fig. The name Friedrich-Wilhelm as an example The DSM Designer rendered how the name Friedrich-Wilhelm fits into the text frame and shows you the result right away. You can see immediately: the daisies that comprise the name have become awfully small and don t look very real any more. But even so: the DSM Designer does the work to make sure that the size of the name is adjusted to the text frame automatically. The result would not be very attractive if the size were maintained, but the name had to be cut off to do so, would it? Try testing the preview with a few other examples. Often it will strike you that there are mistakes in the result here, or things that just don t look right and could be improved. We intentionally selected examples for the palette so that you could find out how your Set would look when applied to a few extreme cases. Friedrich-Wilhelm is truly an extraordinarily long German name, but it does exist and, naturally, we would like the result of our picture personalisation to look as perfect as possible in every case, so that we can link our postcard to a database and send thousands of recipients cards with their own first names written as daisies on a meadow. 26

27 Later we will discuss in greater detail the tricks you can apply to cover even these extreme situations, or at least to attain an acceptable result. For our example here it we will be content with simply widening the text frame so that Friedrich-Wilhelm fits inside a little better. Do this by grabbing the white square at the centre of the right edge of the text frame and pulling it right up to the edge of the picture frame. Fig. Widening the text frame When you release the frame, the DSM Designer automatically re-renders the image. Now the picture looks just fine. Click and hold the mouse button anywhere within the text frame to move the position of the text frame. Let s move it a little closer to the head, so that we have more room. Like this: Fig. Much better! After this short excursion, back to the Stage Direction palette. You can use the entry field in the middle to try out all kinds of names that might be used later to personalise the picture from a database. The fields to the left and right of this field can be used to simulate a static text, that is, one that always remains the same on either side of the personalisation. Let s leave Friedrich-Wilhelm alone for a while and turn to more simple, that is, shorter names. 27

28 Fig. With static text before and after the personalisation Do not forget to enter a space after the Hello otherwise the text preceding the name will not be separated from the name. And keep in mind that it is better not to write too much. In most cases this is not conducive to effective personalisation. The best way to attract attention is still seeing one s own first and/or last name. After all, the other DirectSmile tools offer sufficient opportunity to perform other kinds of personalisation elsewhere. Fig. Another example The Go! Button While you work with the DSM Designer, the screen will be refreshed every time you make changes so that you can view the latest results. Most of the changes are applied automatically when the screen is refreshed, but not all of them. None of the changes made on the Action palette are applied automatically. When the Go! button is clicked, the visible picture is rendered again in its entirety. This means that all filter functions you set, all transformations and any other parameters will be applied. If any changes you make are not immediately visible, try viewing them by clicking the Go! button. Over the course of the manual we will indicate which of the commands have effects that are not visible when the screen is refreshed automatically. <Incoming Text> You can try out even more realistic scenarios by working with results rendered by formulas and by defining conditions. Click Incoming Text, to open the Assignment window. 28

29 Fig. The Assignment window How to proceed from here is beyond the scope of this manual, as it concerns how to work with databases. Our task is to explain how to personalise pictures. Therefore at this juncture I refer the interested reader to the manual on the DirectSmile Documents solution, and to the Job Editor manual. The Assignment window is of quite central importance for these applications and is discussed in detail in their documentation. 29

30 4.2.3 Editing Modes The left edge of the toolbar displays the various editing modes. Fig. Editing modes The various modes are initially assigned the colours red, yellow and blue, but you can replace these with any other colours desired by clicking on the small coloured areas and selecting a new one. Fig. Selecting a colour Changing the colours can be helpful when a certain frame colour is difficult to recognize because of the colours in the background image. A blue frame is not as easy to see on an ocean as, for instance, a white one. Use the small eye icons above the coloured areas to toggle the display between the active frame and the grid of the given mode. The editing modes are closely related to the commands in the tool palette, which we will introduce in the next section. Therefore we will limit our discussion here to the names of the individual modes and a rough overview of what to expect. You can switch between the various editing modes either by clicking the desired mode in the toolbar, or by using the tabulator (TAB) key. Each time the TAB key is pressed the display jumps to the next editing mode. 30

31 Fig. Normal mode Every frame that is created appears for the first time in Normal mode. The solid frame in the interior defines the area on which your personalisation will be shown. Use the white squares on the corners to scale the frame. Click and hold the mouse button within the frame to move it to a different position. The larger, dotted frame shows what is known as the outer frame (known as the security frame in previous versions). Entire letters or parts of letters that are already located outside the inner frame, but still within the outer one, still will be output on your printing equipment. However, any parts that extend beyond this dotted frame will be cut off, and neither displayed nor printed. The DSM Designer automatically generates an outer frame for each new frame created. This outer frame is defined automatically, but in a few special cases you can specify its size yourself. For more information on this, see the Outer Frame Palette section ClipFont Transformation (yellow by default) Fig. ClipFont Transformation mode This mode can be activated only when you are working with a ClipFont; otherwise it is greyed out. Initially the frame is identical to the frame in Normal mode. Using grip points on the frame, various transformations can be performed that affect the vectors (paths) upon which the individual Clips are located (see also the next section). The picture itself is not distorted but such operations. 31

32 Picture Transformation Mode (blue by default) In this mode you can apply additional transformations that affect the pixels of your picture. In contrast to ClipFont transformations, the distortion here affects the picture itself rather than the vectors. The way the frame looks will vary slightly depending on the tool you are working with. Fig. Picture Transformation (tool for single grid-point transformation active) Fig. Picture Transformation ( Liquefy tool active) 32

33 4.2.4 Tools Palette Fig. Tools palette, with the Editing modes above Handling the text frames has been especially simplified in the new version of DirectSmile. Most of the transformations now can be performed directly on the object, without entering any numerical parameters in fields or opening any additional palettes. Many of the individual tools are connected directly with the various editing modes provided by the DSM Designer. Let us take a closer look at these connections Frame Tool Use the Frame tool to open a new frame in Normal mode. Fig. Icon for the Frame tool Fig. Opening a new frame 33

34 Selection Tool Fig. Selection tool With the Selection tool the frames created can be moved and changed in size. Fig. Frame in Normal mode When you click and hold the Selection tool in the frame, the frame can be moved to a new position. Hold down the SHIFT key to select multiple frames at the same time. Use the white squares on the corners and edges to make the frame larger or smaller. You can also define a rectangular selection area. This selects all frames that are located entirely within the rectangle so that they can be moved together. A frame can be deselected by simply clicking on any free area on the console. Press the TAB key. The display of the frame changes (to yellow, unless you selected a different colour) and the mode display at the upper edge jumps to the next field, ClipFont Transformation mode. However, this mode will be activated only if you are currently working with a ClipFont. Fig. ClipFont Transformation mode for distorting, rotating and scaling ClipFonts The white grip points on the edges and corners are still visible and apparently have the same function: the frame can be scaled using these points. A word of caution: In Normal mode the scaling is applied to the frame itself, while in ClipFont Transformation mode the scaling is applied to the vectors within the frame and is only effective when you are working with a ClipFont. What does this mean? Each individual letter is based on a vector path. The Clips are placed along this path and as a result we see the letter comprised of in our case daisies. In ClipFont Transformation mode you can transform the path upon which the Clips are placed, but not the Clips themselves. This may become clearer when you make the frame for the ClipFont transformation narrower. The paths of the letters are condensed together and become illegible. However, the Clips on the path are just as round and large as they were before the frame size was changed. Fig. A condensed frame 34

35 To remove a ClipFont transformation, switch to ClipFont Transformation mode and press the Remove key. The transformation frame is then restored to its original state (without transformation). In the Normal mode the Delete key would have deleted the frame, but in the other two modes it merely deletes the changes and transformations performed on the contents of the frame. In the ClipFont transformation mode you can not only scale the contents, but also rotate or distort it by adding perspective. To rotate a frame, just switch to ClipFont Transformation mode and click and hold the mouse button anywhere outside the frame. Move the mouse cursor up or down to indicate the direction of rotation. Fig. Rotating in ClipFont Transformation mode The four corners of the grid display additional grip points. Here the contents of the frame can be distorted in terms of perspective. Fig. Distortion in terms of perspective Let us go back to the initial condition now and try out some more drastic distortions. After undoing the transformation by pressing the Delete key, double-click with the selection tool within the frame. The colour changes again this time to blue and suddenly there are a whole slew of grip points that can be manipulated. 35

36 Picture Transformation (Rotating, Scaling, Distorting) Fig. Tools for transforming text frames The picture transformation mode works in exactly the same way as the transformation mode for working with ClipFonts we just looked at above. Both icons become active in the tools palette at the same time; they cannot be selected separately. As with the ClipFont transformation tool, you can rotate and distort your text frame, but because the transformation here is based on pixels rather than vectors, the picture transformation function is applied to all kinds of personalisations. In the example shown below you can see that the Clips themselves are transformed and take on a new appearance. Fig. Rotated and squashed text frame in transformation mode Picture Transformation Mode (Warping, Bending, Liquefying) The next two tools allow you to perform transformations nearly free of limitations, and even to liquefy the contents of the frame as the perspective changes (known in other programs as Liquefy ). Fig. Tool for transforming individual grid points Fig. Display of the Picture Transformation mode Each of the individual grid points can be manipulated separately. The changes you make here affect only the range extending to the surrounding grid points. Fig. The grid points for free transformation 36

37 In this mode it is easy to adjust the contents of the frame to any background, for instance, if your personalised text is to appear against a wavy background or stretched across a spherical object. Fig. An individually distorted grid point However, it would be quite impractical if each point always had to be shifted individually. First of all, we probably would not be able to shift each point to an equal degree, and secondly, it makes for a lot of extra work. If you click on any of the points in the grid while holding down the SHIFT key, you can then select as many other grid points as you like, so that your transformation can be performed on multiple points at the same time. Fig. Three points are selected at the same time by holding down the SHIFT key. The selected points are designated by the dark-blue colour. In this manner you can move as many points as you like at the same time. The same is true for the Liquefy tool: Here the operation does not affect individual points, but you can determine whether your transformation is applied to only a small area of the frame contents, or to a larger range. Fig. The Liquefy grid The grid is considerably finer here (we will see later how you can configure the grid according to your needs) and no longer shows any individual gripping points. Think of the tool as a paintbrush. You can select how thick this brush should be. This is why there is a small slide control underneath the tool icon. 37

38 Fig. Liquefy tool with slide control The further you slide the control to the left, the smaller the point of the brush becomes. When you move the control all the way to the right, the brush is so thick that it affects almost the entire contents of the frame. Let s start with a small brush. Fig. Liquefying with a fine paintbrush The centre of the brush is located where you clicked the mouse cursor in the frame. Hold down the mouse button and drag the cursor to the desired location. With a fine-pointed brush you will soon find that the liquification affects only a small portion of the contents of the frame. The edges of the frame remain where they are. And now with a large brush: The complete frame bends and warps until the contents become completely illegible. There s no need to exaggerate. Fig. With a coarse paintbrush Naturally, the results of your transformations also depend on the size of the grid you are using. That is why you can also specify the density of the grid. We will discuss this feature in section (The Grid Transformation Palette) Tool for Inserting Individual Clips This icon is only active when you are working with a ClipFont. On occasion during your work it may occur that you are not entirely satisfied with the result provided by your picture personalisation. Perhaps you have too many short names, but plenty of space on the background picture. In this case it is possible to add individual Clips by hand, without having to change the background picture at all. Fig. Tool for adding individual Clips 38

39 Individual Clips can be added is any of the three operation modes (that is, if you are working with a ClipFont). However, it is also a good idea to perform this operation in Normal mode, because in this mode the new Clips are assigned their own frame. This makes it easy to recognize which Clips were added manually and which belong to the background just incase the Clips have to be deleted later. Simply click anywhere inside or outside the frame. Clips from the active ClipFont are added automatically. Click again on an inserted Clip to remove it. Fig. Frame with single Clips inserted manually If possible, the new Clips should not be added until toward the end of your work on the personalisation. This is because they are linked to the visible frame in order to adjust their size to the Clips inside the frame. This also means that when the frame is moved, the new Clips will move with it. Note: By the way, this is the first of the functions whose effects are not entirely visible on your console. If you have added individual Clips and then move or scale your frame, the Clips will disappear at first. Then click the Go! button to render the current position and size of the Clips The Pipette You know this feature from other image editing software. During your work with the DSM Designer you will notice that the pipette is only active when the drawing method (see also section 3.3.3) Apply Fill Colour is selected. Fig. The Pipette Once you have clicked the Pipette tool, you can click anywhere in your image to select the desired colour value the colour at which the point of the Pipette is located will be drawn in to the tool. This colour value is automatically the colour that will be used to draw your personalisation. Fig. The Pipette the yellow value comes from the daisies 39

40 Fig. The selected colour value in the toolbar The Real-Time Preview Usually the DSM Designer refreshes the screen from time to time so that your display always shows the latest status of your picture motif. Fig. Turn off Real-Time Preview This can get a bit tiresome when it slows the system down, for instance, when you are entering text in the Stage Direction palette. That is why you have the option of switching off the preview function temporarily (using the F12 works as well). A red frame around your console indicates that the preview function has been switched off. Fig. The red frame indicates that the preview function is turned off 40

41 4.2.5 The Layers Palette This feature is also completely new to the DSM Designer. Thanks to this palette you can handle your text frames in a manner that is probably already familiar from other software. When you move the mouse cursor over the individual icons, wait one moment to view the associated tool tips. Fig. Layers palette Overview of the Functions 1. Toggles on/off the display of the number of layers on the console 2. Enables the cap-height adjustment for all layers 3. Enables the distribution of individual letters for the frame defined 4. Toggles on/off the display of the layer 5. Deletes the selected layer 6. Adds a new layer 7. Reduces the number of lines in the selected layer to two 8. Reduces the number of lines in the selected layer to one 9. Shifts the layer one step higher on the palette 10. Shifts the layer one step lower on the palette 11. Links the layer with the one currently selected 12. Sets the selected layer to transparent 13. Blur setting for the selected layer 14. Opens the layer options 15. Enables this layer for the distribution of individual letters 16. Enables this layer for the cap-height adjustment on all layers 17. Opens the Layer-Effects palette 41

42 Two-Line Text There is no limit to the number of layers you can create, but each layer can hold no more than three frames. There is good reason for this. We already discussed that it generally does not make sense to work with too much text when personalising a picture. This is why the DSM Designer is restricted to text no longer than two lines in length. That is why three frames are allowed: The first contains one line of text, and the two others contain the first and second lines of a two-line text. If this explanation is putting lines, uh, furrows, on your brow, it s probably because the in truth quite simple matter sounds complicated in words. Let s look at an example instead. We will stick with our daisies and the text Smile. But this time we will place a Hello before it. Fig. One-line text This is no problem using the Stage Direction palette. Enter Hello in the Text before field; Smile is already displayed in the scroll-box in the middle. This is our one-line text. We would like to make two lines out of it, however, so that we can use a slightly larger font. 42

43 Click either the third button from left at the bottom of the palette, or select the command Extend row count to 2 in the layer options. Fig. Increasing the number of lines This command automatically creates two new sub-layers within our existing layer, but these sub-layers do not have any text frames yet. Fig. Layer with two sub-layers for multiple lines of text 43

44 Now the DSM Designer expects us to create two new text frames. Select the first sub-layer first and create a new frame. Then do the same thing for the second line. Fig. The new text frames Press the GO! button to view what we have managed so far. Click the individual text frames and compare which settings the Stage Direction palette displays for which frame. The settings are identical for each frame. The text frame in the first sub-layer shows only our Text before, the word Hello. So far so good. But the frame in the second sub-layer shows the Text before and the word Smile. So we have to remove the Hello for this frame. To do this, simply click it and then delete the Text before in the Stage Direction palette. Perhaps you would like to add an exclamation point as a Text after. The settings in the Stage Direction palette are valid only for the frame that is currently active. The other two frames are not affected. Fig. Now the picture is right 44

45 What will be printed? Click the Go! button again to answer this question. The line in the middle is automatically not displayed, and the other two remain. That s what we wanted. Fig. What it looks like now Automatically Adjust Caps Height In the figure above we see that the words Hello and Smile! are not the same size. This is because the text frames created were not the same size, either, and the Generator Editor always tries to use as much of the available space as possible. When personalising a picture with several text frames, you might like to have the letters the same size in all of the frames to produce a more uniform effect. You can achieve this effect by first clicking the button for Automatically Adjust Caps Height on this layer. Fig. Defining Automatic Cap Height Adjustment for this layer 45

46 Of course, the text in the larger frame will be reduced in size, rather than enlarging the smaller text. After all, the DSM Designer cannot just change text sizes after you have defined them. Now both text lines have the same height. Fig. With adjusted cap heights If you would like to automatically adjust the size of text in frames on other layers as well, enable the Adjust Caps Height on All Layers option. This button is located on the upper left of the layers palette. This adjustment on all layers will only be applied to the layers on which the Adjust Caps Height command has already been applied. We can see this in the next picture. Fig. Enabling Adjust Caps Height on All Layers The Adjust Caps Height on All Layers option has just been activated on this palette. Further, the adjustment has already been enabled for layers 1 and 2. Layer 3 is not affected by this operation. The result shows: Although the text frame in Level 2 is clearly the largest, the size of its letters is linked to Layer 1 (because it is smaller). The text in Layer 3, however, can take advantage of the complete text frame, because the Adjust Caps Height command is not enabled for this layer. This allows you to except certain frames from automatic cap height adjustment. 46

47 Fig. Adjusting Caps Height on All Layers Distributing Letters Automatically The automatic distribution of letters can be set according to the same principle. It only works for layers with a one-line text. Let s take a look. Fig. Distributing letters 47

48 Seven text frames are displayed here, and something different is in every one, although the Incoming Text defined for each frame is Smile. Apparently DSM Designer distributed the word Smile across the first five text frames. The sixth text frame remains empty, because Smile only has five letters. And why does the whole word Smile appear again in Layer 7? The illustration of the Layers palette and their settings will help us answer these questions. Fig. Settings for Letter Distribution Letter Distribution is enabled for the layers 1 through 6 and for all layers. This tells the Generator Editor that it should divide up the text and distribute it among the frames in Layers 1 through 6. Letter Distribution is not enabled for Layer 7, so for this text frame it s business as usual. And what if we had used a word more than six letters long? No problem: The DSM Designer distributes the word among the text frames as evenly as possible. A good example for using Letter Distribution is presented in section (Outer Frame with Own Background). 48

49 Using Groups This command allows you to divide layers into groups. At first glance it may not be clear why we need such a function, as we are already able to distribute letters among different frames. However, it can be useful in some cases as the only means of distinguishing between the first name and the last name. Let s look at an example. We would like to construct a DSM Set that resembles a crossword puzzle, with the first and last names of our customers placed in separate lines. Just distributing the letters could lead to suboptimal results for names of certain lengths, as we see in the illustration below: Fig. Tom Smith does not cut a good figure We can avoid this by combining any number of frames into groups. Before doing this, it is imperative that we activate the Distribute Letters Automatically option; otherwise the grouping will not work. Then we can click the button for the layer options to define a text group. 49

50 Fig. Assigning a text group Of course, all of this only makes sense if we have created multiple layers. In this example 16 layers are used. The first eight layers are left without any grouping. These layers are then automatically assigned to group 0. The remaining eight layers are assigned to group 1 (blue). Now the DSM Designer will re-distribute the text entry Smile for each group. Fig. Two text groups with eight frames (layers) each What we need now is an assignment to groups. We must specify which text should be placed in which group. Do this using a certain function command understood by the DSM Designer, which we already encountered above. Enter the following in the Stage Direction palette: Tom\#Smith 50

51 Recall that we have already used the \# character to generate a line break from one text frame to the next. Now it works in exactly the same way with the groups, and produces a satisfactory result. Fig. Tom Smith the way we want to see him Settings for Layers In the new version of the Generator Editor you can make settings for transparency and blurring right in the layer palette. Even though these settings are located at the top of the palette, they are applied only to the selected layer Transparency With the slide control above you can define transparency for the layer. You can also press the number keys. 1 stands for 10%, 2 for 20%, and so on. A value of 0 restores the layer to its default setting of 100% opacity. Fig. Layer with transparency set to 35 percent 51

52 Blurring The lower slide control is responsible for blurring. Fig. Gaussian blurring with a radius of 15 pixels The Layer Effects Palette In the new version of the DSM Designer, for the first time you have the opportunity to apply a wide range of effects directly to individual text frames without having to use the Actions palette. Users of the previous version certainly will be able to appreciate this convenience. In fact, although the Actions palette has been retained in its familiar form to guarantee 100% downward compatibility, it has become largely superfluous. Whenever you create or edit Sets, we advise using the software s new Layer Effects. Resort to the Actions palette only if you would like to achieve an effect that is simply not possible using the Layer Effects. The main advantage of the new Layer Effects is that they are scaled automatically to adjust to your personalisation frame. To a graphics designer, the tools in the palette for Layer Effects will certainly look familiar. We have seen many of them elsewhere in this manual; others will be encountered again in later sections. The most important thing for you to know is that the Layer Effects are applied only to the masks that the DSM Designer uses to render images (see also section 3.3). Above all, this means that some effects will not be very intense in cases where you work with a ClipFont, and even less so with a PicFont. You will have to experiment with the effects in each concrete case. In order to show how the available effects work, I would like to use the example of a simple personalisation with a system font on a white background. This should provide the best illustration of the effects that can be achieved. 52

53 Fig. The Layer Effects palette in the Dock Note The effects set here are applied only to the layer selected at the current time. It is not possible to define effects for more than one layer at the same time General Settings The settings for opacity and blur are also available on the Layers palette and thus identical. However, here you have the possibility of transforming a simple blur into a motion-blur by clicking the small checkbox. Fig. Simple personalisation on a white background. No effects yet 53

54 Motion-blur This option can only take effect if you have specified a value for the layer blur. Fig. Vertical motion-blur with full range of motion Fig. Same motion-blur with no range of motion. The motion-blur has no effect. Use the control knob to define the angle of the motion-blur (this handling must seem kind of familiar to you, doesn t it?). You can also regulate the range of motion in the rendering of the blur. By default only the motionblur has an effect. The further you reduce the range of motion, the more the motion-blur is combined with a Gaussian diffuser and thus reduced. If you set the range of motion to 0, only the pure blur will be implemented and the motion-blur disappears. 54

55 Mirroring Obviously, this effect applies not only to the mask of the personalisation frame, but to its contents as well. The two variants Horizontal and Vertical can be switched on individually or combined. Fig. Blurred frame mirrored horizontally Antialiasing and Post-Exposing the Edges Perhaps you have had experience dealing with the phenomenon that Windows systems forgo antialiasing for very large and very small font sizes. Especially for large personalisation, we could do without the pixel stairs. This is why the DSM Designer offers the possibility of applying artificial antialiasing to the personalisation. This is particularly effective when you have transformed your personalisation frame, for instance, by rotating or distorting it. Fig. Transformed E. Left without antialiasing, right with. The edges become softer. The same is true for the post-exposure of edges, which can also be applied independently of antialiasing. In the graphics above you can see that there are some bright extra pixels on the edge of the letter. They came about because we also applied an interior shadow to the letter. Later these light pixels on the edges will stick out as flashing edges. Post-exposure of the edges, which can be set in four separate steps, darkens these parts again to compensate for the flashing edges. Note Flashing edges occur especially when you work with additional layer effects that are applied within the personalisation (e.g. interior shadow, emboss, etc.). Post-exposure of the edges is designed especially for these cases. 55

56 Fig. Right with post-exposed edges. The flashing effect is almost completely compensated for Applying Patterns to the Mask Another way to achieve smart effects is through applying patterns to your personalisation. The DirectSmile software has several available, located in the Patterns folder of the installation directory. However, you can also create your own patterns and save them directly in the Set folder. The file formats JPEG and TIFF are allowed (as always, without layers or alpha channels). The files may not exceed one megabyte in size; otherwise the DSM Designer will not recognise the graphic as a possible pattern. Ideally you should use a square picture format and greyscales only. It is possible to use a colour picture, but the DSM Designer will interpret it as a greyscales image. Fig. Settings for a pattern Let s take a look at what you can do with patterns and which settings we can configure. For our example we will use the Stripes pattern, shown as a thumbnail in the figure above. When you open the pull-down menu, it will show all patterns available in the Patterns folder mentioned above and in the current Set folder. 56

57 Opacity Settings The higher the value set, the more strongly the pattern will affect your personalisation. With a setting of 0% no effects are visible. Fig. Stripes pattern with 40% opacity Fig. This time with 90% opacity: The personalisation is getting hard to see Element Size Since you can use patterns with elements of any size, this value is also specified, in percent. The Stripes pattern we are using, for instance, has a size of 341x341 pixels. At a size of 100%, the elements will be displayed in exactly this size. We can scale the elements up or down from this value. 57

58 Fig. Element size 30%: A finer pattern Fig. Elemente size 150%: A coarser pattern As long as you work with the slide control, the size of the pattern will always have an absolute value. You can see this in the illustration below. Here we have simply extended the length of the personalisation text yet the size of the elements has remained the same, as you can see by comparing the thickness of the stripes with those in the figure above. Fig. The thickness of the stripes remains the same even when the text is longer. This setting is particularly suitable if you would like to adjust the pattern to the background. In this case it does not matter whether and how you change the size of your text frame. The pattern will always appear in the same, fixed size. The effect is different when you activate the checkbox Adjust element size to caps-height. The caps-height diminishes when more text is contained in the personalisation frame. Whenever this checkbox is activated, the size of the element is automatically scaled with the text, so that every text has a similar pattern. The slide control for element size remains active, but now it is coupled to the caps-height. The figures below illustrate this effect. 58

59 Fig. This time element size is linked to the caps-height Fig. Despite otherwise identical settings, the elements are scaled Here the pattern simply diminished in size along with the text so that it had the same appearance on the smaller letters. This would not be a good idea if the size of the pattern was supposed to match a certain background. Even so, we can continue to use the Element Size slide control to fine-tune the size of the pattern. 59

60 Element Orientation The principle is simple if we stick with our striped pattern. With this setting you define how the elements are supposed to be arranged with regard to each other. In the default setting they are simply laid next to each other. Fig. Default element scheme all elements are oriented in the same direction Click on the individual elements in the palette to change their orientation and generate different patterns. Fig. The elements are arranged to mirror each other horizontally, producing a herring-bone pattern 60

61 Fig. This time a diamond-shaped arrangement The pattern orientation set here will be applied to your personalisation frame. Fig. The diamond pattern 61

62 Inverting Patterns The last item on the palette we have to discuss is the checkbox on the right with the cryptic icon next to it. With this checkbox you can invert your pattern, so that black becomes white and vice versa. Fig. The same pattern as above, but inverted Drop-Shadow We probably do not have to tell you about the central importance of the drop-shadow for text personalisations. This feature is pretty much standard equipment for every graphic artist and is one of the most popular effects. Fig. View of the Drop-Shadow palette We also presume that you are well-acquainted with using this feature, and thus will keep our discussion of the individual operating elements brief. Use the Distance slide control to define how far away from the personalised text the drop-shadow should be cast. A value of 100% corresponds to half the height of your text frame. Make sure not to cross the outer security frame (see section 4.2.8). Parts of the image that extend beyond this frame ultimately will be neither displayed nor printed. 62

63 Fig. A simple drop-shadow The drop-shadow is usually a copy of the personalisation. However, using the two Blur and Overflow slide controls, you can change its appearance radically. Overflowing has the effect of enlarging the drop-shadow, while blurring applies a soft-focus to the shadow. You can also define opacity, colour and the angle of the drop-shadow, as well as the method to be used to render it on the image (under Mode ). Fig. Selecting a colour for the drop-shadow Among all of these familiar items, there is one little feature that deserves closer attention: the checkbox Incorporate general effects at the lower left. Fig. General effects This checkbox refers to the settings we defined for our layer under General and the corresponding Pattern. Let s assume you blurred your layer as displayed in the figure below. 63

64 Fig. Layer with blur If you now apply a simple drop-shadow to this layer, the shadow will be rendered on the basis of the original layer, that is, without the blur. The result is then a hard drop-shadow with sharp edges. Fig. Blurred layer, but a hard drop-shadow with sharp edges By activating the Incorporate general effects checkbox you can specify that these settings should be applied to the drop-shadow as well. On occasion you may achieve attractive effects by adding a drop-shadow without the general effects. 64

65 Fig. This time the drop-shadow is blurred, too This function can be turned on and off separately for nearly all effects, always with the same result: the general settings for the layer are incorporated to render the effect. One small problem you cannot resolve by using the Incorporate general effects checkbox arises when you apply a drop-shadow to a layer in which a pattern has already been applied. As we explained above, the pattern affects the opacity, meaning that the drop-shadow will be visible through the pattern generally not the desired effect. Let s look at the result. The figure below shows the word Smile against a white background, with a striped pattern applied to the text. Fig. Smile with pattern Now we apply a drop-shadow to this image. To emphasise the effect, let us assign this shadow a red colour. The result is clearly not what we were hoping for: 65

66 Fig. The red drop-shadow shows through the text We will have to use a small workaround solution here. First we remove the drop-shadow and copy our layer again. The easiest way to do this is by pressing first CTRL+C and then CTRL+Shift+V. CTRL+Shift+V ensures that the inserted copy is placed at exactly the same position as the original. So now we have two identical layers located directly on top of each other. Select white as the fill colour for the lower layer so that it will remain invisible against the white background, and remove the pattern from this layer (this pattern was, of course, copied here from the original layer). Fig. The font on the lower layer is white and thus invisible So now we can apply the drop-shadow to the lower, white layer. This way our pattern remains intact on the layer above it and the drop-shadow looks the way we want it to. Fig. That s more like it 66

67 Inner Shadow The settings you can make here correspond to those for the drop-shadow. The difference, of course, is in the result, which is shown only within the personalisation and not on its exterior. The general effects can be incorporated here, too. Fig. A simple Inner shadow 67

68 Outer Glow This effect makes it possible to have your personalisation glow outward. Obviously, this generally looks better with light colours in front of a dark background than for the inverse. To illustrate the effect we will use a picture with a black background. Fig. Smile with Outer Glow Here, too, the settings on the palette are similar to the ones familiar from other effects: You define the opacity, the blur, the size and the colour. Fig. Settings for Outer Glow One thing we have neglected to mention so far: of course it is possible to combine multiple effects or even all of them. Fig. Just like the last picture, but this time with Outward Lights, Inward Lights and Relief 68

69 Inner Glow Now it s dèjá-vu all over again with the settings we already know so well. Fig. Inner Glow The only difference being that the result, like for Inner Shadow, only affects the interior of the personalisation, leaving the background alone. In this case the effect is a light shining inward, as shown in the figure below. Fig. Example for InnerLights 69

70 Relief Now things get a bit more interesting. The settings for the Relief feature offer several more possibilities for taking charge. Particularly enjoyable is the large X at the lower left, whose appearance changes to show how our settings will affect the personalisation. Fig. Settings for the Relief Layer Effect First we can select the kind of style we would like to use. Let us take a look at a few individual letters to see what the different effects look like and how they work. Fig. Barely visible: grey on grey 70

71 First the point of departure: A grey Smile on a grey background. Not exactly easy to recognise, but that will change right away. Inner Bevel The outline of the letter remains sharp and the effect is applied only to the interior. Depending on the angle of light set, the Inner Bevel looks as if the letters are embossed or engraved (here the embossed view). Outer Bevel Here, too, the letters retain their original size and sharp edges. The letters themselves, however, keep their flat appearance. The bevelling makes it look as if the letters are engraved into the background or embossed out of it. Emboss The Emboss effect works from the edges of the letters, both outward and inward, and automatically renders the edges somewhat softer. The centre line of the letters remains unchanged. Here, too, it looks as if the letters are raised or sunken. Pillow Emboss The effect here is as if the background and the letter surface were on the same level. Only the edges (again, depending on the angle of light), are punched into or raised out of the background. At this juncture the Invert checkbox has the function of rotating the angle of light by 180 degrees. The colours you have selected for the lights or for the shadows will not be inverted when this checkbox is activated. With this option you can switch easily between the effects of punch out upward and punch in downward. 71

72 Fig. The checkbox changes the lighting angle by 180 degrees It probably has not escaped your attention that the slide control in this palette is considerably thicker than for the preceding effects. This is because it has a double function here. In addition to changing the direction, you can use the slide control to define the angle of incident light. Think of the angle in terms of the position of the sun: At 12 noon the sun shines on your text frame from directly overhead, at an angle of 90 degrees thus discarding all light/shadow effects. The effects are most intensive right before it disappears behind the horizon at an angle of 0 degrees. Fig. Setting the Orientation and Angle of Light Both settings also can be made by entering numeric values in the fields, or by means of the arrow keys. Any colours can be selected for light and shadow and the opacity defined for these areas. Of course, these settings only have an effect when appropriate colours are selected. For instance, the colour selected for the light must be lighter than the fill colour of the text frame. You may be shaking your head and wondering why we bother to make such trite remarks, but often we field questions like why yellow light is not visible on white text. Because there is no way to make white whiter. This is a little different in the case of shadows. Since the colour values of fill and shadow colour can be multiplied, you can indeed select a shadow colour that is lighter than the fill colour of the text frame. It usually doesn t look very good, but it does work. In the lower section of the palette you can set additional trivialities, such as whether the effect should be blurred or overflowed. Fig. Settings for mapping 72

73 We do not want to bore you with the mathematical intricacies of mapping. Instead we suggest that you try out the available settings to see which you like best. Linear The light and shadow areas blend gradually into the fill colour. Spherical The light and shadow effects are hardly visible except at the edges. Sinus The light and shadow effects are clearly emphasised, i.e., the light and dark areas are demarcated sharply. 73

74 Relief with Pattern Patterns can be used on the Relief effect just as they are on the contents of the layer itself (see section ). In this case the pattern serves only as a mask for the Relief effect. The figure below presents a good illustration of what this means. Fig. Relief with pattern Here the stripes are used again as the pattern for the Relief, and the opacity of the pattern is set to 100 percent to provide a clear illustration of the mask principle. Everywhere the pattern is pure black, the Relief effect is completely visible in the personalisation; where the pattern is pure white, it is not visible at all. Through the pattern the DSM Designer has generated new edges upon which the effect of the Relief is shown. 74

75 Stroke We can finish up the Layer Effects by introducing another simple function. You can trace the contour of your personalisation. You could do the same thing working with the Outer Glow effect, but with this feature you can combine the two effects. Specify the colour to be used to stroke, how wide the contour should be and in which mode it should be rendered. Fig. A traced contour The Toolbar and the Typesetting Palette You are probably familiar with most of the following functions from the common layout and text processing software. As most of them are self-explanatory, we do not want to spend too much time discussing them here, but we will present an overview. There are several functions you will probably only need in certain situations. Where relevant, we will return to these in other parts of the manual and offer a more detailed discussion. The basic commands are included in the upper toolbar, which is always displayed whenever a frame with text is selected. Fig. The toolbar 75

76 Fig. The Typesetting palette, stored in the Dock You have already seen that many settings options in the toolbar are also included in the Text palette (actually, the palette is called Typesetting, but we will abbreviate it as Text palette here). It is up to you how you would prefer to work. The left part of the toolbar is reserved for basic settings that define the kind of personalisation and the font to be used. This part of the toolbar changes depending on the personalisation you are using for your picture. Fig. Configuring basic settings At the far left of the toolbar one of our daisies is displayed. This is the icon indicating that we are using a ClipFont. Click the daisy to select the desired personalisation method. Select the desired font from the wide scroll-box. We are currently using a capital font designed especially for the daisies, which we created as a ClipFont. This font is included in the font list. 76

77 Fig. Selecting a font (also for ClipFonts) However, there is no reason not to align the flowers along the paths of the Courier font if you so desire. The daisies remain, but the font path they follow can be changed at any time. Fig. Flowers arranged along the paths of WildFlowerCapitals Fig. The same flowers using the CourierNew font We will return to this later, when we discuss how to create your own pictures by presenting examples of ClipFonts, PicFonts and system fonts Justifying Text The basic alignment of the text in the frame is controlled using the buttons in the middle of the toolbar. The upper buttons define how the text should be aligned horizontally; the lower ones define the vertical alignment. Fig. Buttons for text alignment As mentioned above, the DSM Designer makes an effort to use as much of the available frame height as possible. 77

78 This can mean that vertical alignment of a text has hardly any effect for short words, as the letters are automatically stretched so high that they fill up the complete height of the frame. The next two graphics illustrate this. In the upper figure it is hardly noticeable that the text is aligned to the upper edge of the frame, while this is quite obvious is the second one. Fig. Both texts are aligned to the upper edge of the frame The reverse is true for horizontal alignment. It will have hardly any effect on long words that take up the entire width of the frame, but a very strong influence on short ones. Fig. Both texts are left-justified Take these subtleties into consideration when creating your picture. Keep trying out different word lengths by changing the pre-configured values in the Stage Direction palette. This is the best way to determine where your design might need more work. 78

79 Text Alignment to a Horizon Imagine you would like to create a Set in which the personalisation always runs along the same line. The figure below shows such a Set. We put together a PickFont using different pictures of furniture, and placed the characters in front of a wall. Fig. Furniture in front of a wall This motif looks fine, but what happens if we place a longer text in our text frame? Fig. Without the Horizon setting 79

80 Now the letters are lower in the picture than we wanted them. This is especially noticeable when you look at the L (the typical IKEA allen key), because this letter throws a shadow on the floor and the wall. No wonder: the individual pictures in the PicFont have been scaled to a smaller size so that Friedrich-Wilhelm fits in the frame. This means we have to find a way to align our letters on the Horizon visible in our background picture (the edge between the wall and the floor). Fig. Defining the Horizon As soon as you click the Horizon button the settings for positioning the text vertically are switched off and replaced by the Horizon setting. So how do we proceed? First we pick a word and position our frame on the Horizon so that we are satisfied with the result (as in our picture with the word Smile ). We have no way of knowing whether the individual pictures in our PicFont are displayed here in their original size or whether they have been scaled down or up. What we can find out, however, is how much of the letter is located above the Horizon and how much is located below. Fig. Defining the shares above and below the Horizon 80

81 The figure shows what we mean here. Eighty percent of the picture of our letter is located above the Horizon, and the remaining 20 percent below. It does not matter how much the letters are enlarged or reduced; the percentages are valid for every size. What we enter in our input field for the Horizon setting is the percentage value for the share above the Horizon. Fig. What it should look like Fig. That s more like it! Fine-Tuning the Text Formatting In the next section of the toolbar you define the spacing permitted between the individual letters and how wide the individual letters may be. Fig. Defining character spacing and character pitch You can enter these definitions either as numbers or by using the slide control. The controls are opened by clicking the small triangles next to the entry fields. The DSM Designer also allows you to enter a value range. The left input field designates the minimum value, the right one the maximum value. The grey characters to the right indicate the values used to render the current image. Keep in mind that these numerical values reflect how the DSM Designer always tries to use as much of the frame height as possible. Let s look at a few examples: 81

82 Fig. Generous space We specified character spacing between a minimum of 50% and a maximum of 200%. Our frame is generous in width, so the short Smile fits just fine. That is why the DSM Designer uses the maximum value of 200%; the spacing between the characters is quite large. Fig. Getting tighter The name Christoph is somewhat longer. Our settings remained the same, but Christoph would not fit into the frame if 200% spacing were applied. That is why the DSM Designer automatically adjusted the character spacing to a value of 109% for this picture. Fig. The minimum value For Friedrich-Wilhelm the DSM Designer has no choice but to resort to the minimum value of 50%. This is the only way to fit the name in the frame and still achieve an acceptable caps height. By way of comparison, take a look at Friedrich-Wilhelm written with 100% spacing: 82

83 Fig. 100% character spacing In this case the DSM Designer has to reduce the size of the letters to maintain the minimum value of 100%. Note: The larger the range between minimum and maximum values, the better the DSM Designer can ensure that the letters remain more or less the same size even for words of very different lengths. In setting this range it is important to guarantee legibility. The Friedrich-Wilhelm with 50% spacing looked pretty squeezed and was no longer easy to read. A little more spacing would be advisable for a case like this one. You also have the possibility of entering fixed character spacing for all words, no matter how long they are. Select the Fixed Character Spacing checkbox for this option. Fig. Fixed character spacing 83

84 The settings for character pitch are very similar. Here, too, you can define the two values between which the DSM Designer may manoeuvre. This gives you more possibilities to ensure visual balance in your personalisation. Let s change the character pitch a little in our example to see what happens: Our maximum values are so generous that even the short Smile now fills up the complete frame. The DSM Designer did not even need to use the maximum value for character spacing. If you compare the values the DSM Designer rendered for the individual names, a certain preference becomes apparent: Note: The DSM Designer places a higher priority on character pitch than character spacing! For Christoph the spacing was automatically set to the minimum value so that the highest possible character pitch could be used. 84

85 In general, we exaggerated quite a bit with our entries. The Friedrich-Wilhelm can no longer be read at all, the letters in Smile hardly seem to belong to the same word, and only Christoph makes a good impression. So let us tweak a bit until we achieve a result that is satisfactory in all three cases. That looks fine now. We will have to resign ourselves to the fact that Friedrich-Wilhelm has to be a bit smaller, but it is an awfully long name Random Formatting Random formatting can look quite realistic, especially for a motif like daisies. After all, the picture should not look as if we placed the little flowers using a ruler and spirit level. Looking a little more natural is certainly a good idea. Fig. More formatting options 85

86 Rotating Our letters can be rotated to a random degree. Either enter a value in the upper field or set an angle using the slide control. Fig. With a random rotation of 15 degrees The individual letters are rotated independently of each other. The value you entered is a maximum. In the example shown above the letters are rotated a maximum of 15 degrees, clockwise or counter-clockwise. You can see that the rotation is random when you click the Go! button in the Stage Direction palette again to generate a new picture. Fig. New random rotation using the same settings The DSM Designer thought out some new numbers. As a consequence the result will look a little different each time. When you activate the small checkbox to the right of the entry field, all letters are rotated by the angle you specified. This turns off the random effect. Fig. All letters rotated by the same angle of 25 degrees Setting higher and lower The lower entry field works exactly the same way. There you define that the letters are set a random amount higher or lower. The value entered here is a percentage of the letter height. Note: Use this feature with caution. If you enter too high a value, it can happen that most of a letter is pushed outside the red frame. The parts of the letter that extend beyond the dotted outer frame will not be displayed and cannot be printed later either. 86

87 Fig. Settings for random rotation and setting a random amount higher/lower Fig. Random results Reducing Letter Size Manually This function is so specific that I would not like to make any bets with you about whether you will ever have occasion to use it. But the DSM Designer is prepared for all eventualities. Manual letter-size reduction can be used when you are personalising a picture using a system font. There are several fonts which feature such characteristics as extended upper crests or long tails at the bottom. Let us assume that you configured your text frame for letters with random rotation and letters set a random amount higher or lower. As chance would have it, under unfortunate conditions this can lead to parts of the letters extending beyond the frame, often even outside the outer frame so that the letters are cut off in the final output. Fig. Cut off letters The figure above shows such an admittedly rare example. So that it is apparent on first glance that the outer frame is not sufficient, the DSM Designer cuts the letters off early, at the edge of the interior frame. You can resolve the problem by instructing the DSM Designer to reduce the size of the letters artificially. Do this using the slide control. Fig. Setting manual reduction of letter size 87

88 88

89 Now it fits. Fig. Letters manually reduced in size Note: You can also enlarge the outer frame manually, of course (see also section 4.2.8), but several motifs may not have enough room available for this. For such cases manual letter-size reduction is helpful Transforming Text into Capitals The meaning of this small checkbox in the toolbar has probably struck you by now. However, we have not paid attention to capitalization in the Stage Direction palette so far, for our daisies have always appeared in capitals. Fig. Automatic transformation into capitals This setting is applied only to the main portion of the text (that is, the Incoming Text ). If you are using the Text before and Text after in the Stage Direction palette, these entries will be displayed just as you entered them Additional Functions for Text Formatting The lower section of the Typesetting palette offers functions that are not available in the toolbar, which can be used to perform additional fine formatting. Fig. The Typesetting palette 89

90 Defining Word Spacing Above we used a minimum and maximum value to manipulate the spacing between individual letters. The spacing between entire words can be manipulated in the same manner. However, in this case you must define a single value for the DSM Designer to use as a reference point for rendering. When the value is set to 100%, the DSM Designer uses a normal space between the individual words. The size of this space can be changed either by moving he slide control or by entering a number. Fig. Defining word spacing Filling with Spaces For some pictures you may want to use a script font and design the motif so that this script covers the entire picture from the left to the right edge. Fig. Script motif cut off If your database includes short names it can occur that the script does begins and ends somewhere in the middle of the picture rather than at the edges. Fig. Filling with spaces This doesn t look very good, so this feature lets you automatically fill such a text with spaces so that the script extends from the left to the right edge of the picture. Fig. Footprints on the beach filled with spaces that s more like it! 90

91 Kerning Settings As a rule, the kerning settings for each text frame are based on the given default font matrix. This means that the DSM Designer distributes the letters according to the kerning data provided by the font itself. In most cases this method produces the best result, so this setting is configured by default. Fig. Setting DSM Kerning explicitly However, font matrixes are not designed to deal with such eventualities as rotated letters. In this case the DSM Designer has to take over the kerning instead. The checkbox is enabled automatically in this case and cannot be disabled until the font is able to handle the demands of the kerning process. If you would like the DSM Designer to take care of kerning as a rule, just select this option. The visible differences are insignificant in most cases. The rest is a matter of taste Fixed Letter Spacing You may have already tried selecting this checkbox to see what effect it has on your personalisation. If so, you probably were not able to recognize any difference before and after. In most cases there is no difference, but under certain circumstance you will be glad that there is such a function. Let s look at an example: We would like to write our usual Smile from top to bottom. This is no problem at all. We simply rotate our letters 270 degrees and then select the checkbox with the small lock, so that all letters are rotated by exactly the same angle. Fig. Rotating letters Now we switch to Picture Transformation mode and simply rotate the frame 90 degrees. Take a look at the result. Unfortunately, that s not what we had in mind. 91

92 Fig. Rotated The letters slide into each other. This may be a slick effect on occasion, but we don t want it here. That is why we insert the little checkmark to ensure proper spacing between the letters. Fig. With fixed letter spacing That looks much better! 92

93 4.2.8 The Outer Frame Palette The outer frame surrounds the text frame you created. It is dotted and demarcates the area that will be used to render the personalisation. It is somewhat larger than the text frame, because there are always cases where parts of Clips can extend beyond the text frame. Thus the outer frame serves as a small buffer zone. Fig. Text frame with outer frame Enlarging/Shrinking the Outer Frame Manually When you create a new Set, an outer frame is created along with every frame you open in that Set. The outer frame is enlarged automatically during ClipFont transformations to ensure that your personalisation remains visible in its entirety. Therefore we recommend leaving the automatic setting for the outer frame unchanged. Pixel transformations (in Picture Transformation mode) can sometimes produce results that explode the outer frame. However, these transformations are insignificant for the outer frame and they will be displayed in full even when they extend beyond the outer frame. In special cases in which various Clip transformations strongly distort personalisation s, it can occur that small parts of the picture extend beyond the outer frame and thus cannot be output. In such cases you should enlarge the outer frame slightly using this manual setting. Open the setting by selecting the Outer Frame palette from the Window menu. Fig. Outer Frame palette As soon as you enable the upper checkbox, the outer frame will no longer be managed and sized automatically by the DSM Designer, but instead set to the values you enter here. The entry is in pixels and designates the distance from the given edge to the inner frame. 93

94 Fig. Enlarging the outer frame manually Note: Once more for good measure: It is best to let the DSM Designer take care of the outer frame. The main purpose of this function is to allow the editing of outer frame definitions originating from older versions of DirectSmile. In previous versions the outer frame played a more important role Outer Frame with its Own Background With this command you can achieve an elegant effect with some Sets. Imagine the following: You would like to personalise GO stones on a GO board. We happen to have a Set like this here, so let s see how it could look. If you prefer SCRABBLE, it takes just a little fantasy to alter the Set accordingly. Fig. A GO board with personalised stones Each frame holds only one single letter we achieved this using the Distribute Text command in the Layers palette (see also section 4.2.5), but because there is no way to know how many stones we need, we would like to prepare a stock of stones so that we will be able to display longer names correctly as well. Two further squares are visible after the word Smile, each of which stands for a text frame. However, there are no GO stones at these positions. 94

95 This is because we only want to display stones if they have content. How can we do this? By assigning a background picture to the outer frame of each text frame. Then the frame will be hidden if it does not contain a letter and its background picture will be hidden along with it. First we must prepare a background picture for the frame: in this case, an empty GO stone (as a TIFF or JPEG). If the background picture for the frame requires a mask, and it usually does, we must create this, too (for more information, see section 5.2 Working with ClipFonts ) and save both in the Set folder. Fig. GO stone Now we can select the picture in the drop-down menu of the palette along with its corresponding mask. Fig. Selecting the background picture for the outer frame That s all there is to it. The frame and background are displayed only if the frame contains text. Fig. The example with Smile. Empty frames and their background are invisible 95

96 Fig. All frames have contents here Note: You can also create a different picture for each text frame The Grid Transformation Palette The grid for transformations can be configured according to your preferences, of course. Some transformations require some fine tuning, while others only involve repositioning a single point of the grid. Fig. Grid for ClipFont transformation with the corresponding palette Fig. Grid for picture transformation with the corresponding palette the colour mode was set to white (to improve visibility) 96

97 The settings for Grid Transformation can be changed only when you are working in either ClipFont Transformation mode or the Picture Transformation mode. The settings are defined separately for these two modes, just as you can apply both a ClipFont transformation and a picture transformation to the same frame (as long as you are working with a ClipFont, of course). The same palette is used for both grids, however, with only one difference: The grid for picture transformation includes a checkbox for perspective distortion at the lower right. The grid palette for ClipFont Transformation mode does not require this checkbox. We will discuss the palette along with the picture transformation mode Configuring the Grid The two slide controls at the top are for configuring the horizontal and vertical subdivisions of the grid. The more subdivisions the grid has, the more the DSM Designerhas to render. This means increased calculation times. Fig. Configuring a finer grid You will discover that many distortions, warped texts, look just fine even with a relatively coarse grid. We will take a closer look at this in a later section. Usually an intermediate grid setting is quite sufficient Transformation Filters The drop-down menu shows a series of filters that are used so frequently that we have prepared them for you in the DSM Designer. For each filter there are corresponding settings; these are presented briefly below. Fig. Preset filters 97

98 Zigzag The top slide control, Intensity, defines the size of the amplitude; the lower one, Interval, specifies how often it changes direction. This Interval setting is, of course, linked to your grid resolution. The figure shows that there are only seven zigzag segments, despite an interval setting of 9. After all, our grid is configured with only seven subdivisions. If required, you can configure a finer grid setting so that a higher interval can be applied. Fig. Zigzag filter Wave To generate a nice, round wave you should select a lower interval and perhaps a higher grid resolution. Fig. Wave filter Flag Here you can see that a higher grid resolution is not necessary at all. Even though the e of Smile straddles a sharp turn, the letter still does not look too pointed. This is because the visible grid is surrounded by soft curves along which the transformation is guided. The visible grid points are merely points of reference. Fig. Flag filter 98

99 Bending This filter involves an additional parameter. Intensity continues to define the degree of curvature. The two interval parameters define how high each part of the curve is to be lifted. Fig. Bending filter Warping and Inverting With the slide control at the bottom left you can warp the contents of the frame. This setting is located outside of the drop-down menu for filters, because it can be combined with the various filters. Fig. Warping Fig. Zigzag filter with warping Mirroring the Transformation Horizontally The small checkbox bottom centre inverts the filter settings, that is, it mirrors the transformation settings horizontally, but, of course, not the contents of the frame. Take a look at the two figures below. The upper one shows the normal setting, the lower one the inverted transformation. In the picture above the wave proceeds upward from the centre before turning downward. In the lower figure it first moves downward, and so on. This setting can be applied to all filters and, as mentioned, does not affect the contents of the frame ( Smile is not mirrored horizontally), but only the transformation scheme. 99

100 Fig. Normal wave Fig. Inverted wave Perspective distortion As soon as perspective distortion is activated, all other filters and transformation settings on the palette are disabled. The distortion is rendered using only the corner points and a fictitious vanishing point, and cannot be combined with any other transformation. Move the grip points at the corners. Where two grip points are closest, the text appears to recede into the distance. Fig. Perspective distortion 100

101 The Frame Styles Palette The DSM Designeroffers you standard functions familiar from other software as a matter of course. For instance, you can simply duplicate a frame by selecting it, copying it with the keyboard shortcut CTRL+C and then inserting it with CTRL+V (or CTRL+SHIFT+V for pasting in place ). This operation produces an exact copy. But wouldn t it be practical if you could transfer just individual parts of one frame s formatting to another? And if individual settings could even be used to generate a style sheet for a frame, just as if you were working with a (Cascading Style Sheet) for a website. It certainly would! The Frame Styles palette is located in the Window menu of the DSM Designer. If you would like, you can store it in the Dock. Fig. The Frame Styles palette 101

102 Transmitting Individual Formats The lower figure shows two frames that have significantly different formatting. Fig. Two frames with different formatting The upper frame is personalised using a simple system font, output in white. The lower one, by contrast, uses the daisies from our Flower Capitals font. Besides this we also performed a picture transformation and finally, a drop-shadow-action was added to the layer (we ll explain how to do this in Chapter 6). The picture transformation took a lot of effort and we want the upper frame to look just the same. If we try to produce the transformation in the same way for the upper frame, we will probably fail and have to make due with a result that is similar, but not exactly what we wanted. Of course, we could simply copy the lower frame and then change the other formatting such as the kind of personalisation and font, colour, etc. back to our wishes, but we can save the time this would take by using our Frame Styles palette. Fig. The context menu of the right mouse button in the Frame Styles palette Select the frame with the daisies from the interface and then switch to our Style palette. Click with the right mouse button on the Pixel Grid command, for this is the setting we would like to transmit from one frame to the other. At the very top you will find the command Load to Magic Wand. Select this command. You will see right away how the tip of the tool changes. When you move the mouse back over the upper frame a few more stars appear, indicating that you can use the magic wand here. Do this using the left mouse button. 102

103 Fig. Transmitting a style with the magic wand With this we transmitted the picture transformation to the upper frame, and nothing else has changed. Quite practical, don t you think? By the way, the transmission takes place only at this particular moment and does not link the frames. This means you can make changes to a frame after the fact without affecting the other frames. Let s take another look at the palette to see what else we can do. Fig. When you hold down the CTRL key you can copy multiple formats at the same time Clicking with the right mouse button is not the only way to open the magic wand. You can also select a style and then press the button at the lower left. By holding down the CTRL key you can load multiple formats to the magic wand (think of the Clipboard) at the same time. Hold down SHIFT to select a range of styles. Click 103

104 on a style first, then hold down the SHIFT button and click on another to select all styles listed between these two selections. If you copy the styles to the Clipboard you can access them from there at any time. Note: The first line of the palette is crucial. In combination with the styles displayed in bold type in the palette, it indicates which formats are currently located in the Clipboard or the magic wand. Take a look at the next figure: Fig. Frame two is selected, but the palette indicates that Frame 1 is active At the moment, Frame 2 is active in the console. The top line of the Style palette contains Frame 1, however. Further, the styles Picture Grid and Actions are listed in bold type. This means: At the moment the style specifications for Picture Grid and Actions of Frame 1 are the contents of the Clipboard or the magic wand, respectively. 104

105 Creating and Applying Style Templates The various styles you use within a Set can also be saved separately, so that they can be used again for other Sets in the future. Select the formats you would like to include in your style template and then click with the right mouse button on one of the selected styles. Fig. Creating a Style template The last line of the menu that opens reads Create Style Template. A small, new palette opens, in which you can assign a name and manage your templates. 105

106 Fig. Managing Style templates From this moment on the template is available at any time, no matter which Set you are currently working with. To apply a template to a frame, click on it with the right mouse button. The menu command Apply Style Template lists all of the templates saved and lets you select the one desired, or open the window for managing styles. Fig. Applying a Style template to a frame 106

107 Palettes with Special Functions We have already discussed most of what you will encounter in your daily work, but, of course, far from everything. The Window menu of the DSM Designeralso contains a number of palettes that are used less often, but are nevertheless important. These will be discussed in the next sections. After this section you will be quite competent as regards palettes, and you will be lacking only the commands and filters to be discussed in Chapter Fixed Background Colour We dealt with masks briefly already, and they are responsible for the existence of the miniature palette entitled Fixed Background Colour in the Window menu. Fig. Fixed Background Colour palette with colour selection dialog Without masks there would be no half-transparency, and without half-transparency we would not need any fixed background colours. The preceding sentence will not seem quite so mysterious if we recall the basic principle of personalisation with the DSM Designer. First a Clip or picture is placed on the background (depending on whether we are working with a ClipFont or a PictureFont) and then upon this a mask to ensure that the edges of the Clip or picture are a little softer and the background can shine through. In the case of the daisies this was easy to see, and it s even more apparent when we look at the following example. We have written Smile on a white background using the PictureFont called Chrome. Fig. The Chrome PictureFont against a white background 107

108 Take a look at the letter S and its mask. Fig. The S and its mask The mask is slightly larger than the letter and fades from black to white as it extends outward. These grey areas are the half-transparent areas through which the background can be seen (usually a picture). Because the background is white, this is not visible here. But if we define a fixed background colour for the personalisation, it immediately becomes apparent what effects we can achieve. Open the small palette, click on a field to select ist colour and then activate the small checkbox to apply the function. Fig. With a fixed background colour applied Now the background picture no longer shines through the half-transparent areas (that is, the white) but the colour we selected instead. 108

109 4.3.2 Replacing Characters (Frame-Based) From time to time it may occur that you cannot or do not want to display certain characters. Perhaps you have created your own ClipFont, but did not have the time to fashion a lot of special characters. In such a case you may not be able to display a certain character because it is not available. Alternatively, you may wish to replace some characters with others because they simply look better. Like here, for example: Fig. Ute & Karl You don t like the & character much, but are afraid that it may occur frequently in the database you will be using for personalisations. You decide to make a + out of it instead, and open the palette for character replacement in the Window menu. Keep in mind that this character replacement applies only to the frame that is currently active. There is also a palette for PicFonts in the File menu called Character Replacement ; we will introduce this one later. Fig. Character Replacement palette As soon as you click the New Rule button, the input fields on the right side become active. Enter the character to be replaced in the top box; the character to replace it the lower one. The options under these boxes are easy enough to understand. Select the lower radio button if you are not sure whether the selected font has a certain character, but you want to ensure that a character with the same meaning is displayed. Note: If a specific character is not available to the DSM Designer and no replacement was defined for the character, no character will be output. 109

110 This is especially important for ClipFonts you create yourself. If you work for foreign customers, their languages may use special characters you have not thought to create. You can cover such cases in a replacement table so that, for instance, the character Ļ is replaced by L. The result of our replacement for Ute & Karl looks as expected. Fig. The & is replaced by + If you would like to delete a rule from the replacement table, simply select it and press the Delete key. Note: Activating the Case-Sensitivity checkbox can lead to unexpected results, especially if you have also activated the Transform into Capitals command for the given frame. The characters will be replaced before the transformation into capitals, that is, always using the data presented in the Stage Direction palette. 110

111 Creating Your Own Sets: Step by Step You will continue to encounter what we have discussed so far in the coming sections, but at this time we presume that we no longer will have to spend much time discussing text formatting. First we will work through a number of points that apply to all kinds of personalisation in general. Then we will look more closely at the details of motifs using ClipFonts, PictureFonts and Picture-in-Picture personalisation. Creating New Sets Let s start by returning to the Wizard you encountered at the very start, which simplifies our start by offering a number of options. Fig. The Wizard We have already become acquainted with the third option, so let us turn now to the first two variations. If you have already created a folder for your new Set, this folder must be located in the Set folder of the working directory of the DirectSmile software. If you try to select a folder outside this folder the DSM Designer will complain. 111

112 Fig. Selecting a folder Once you select a folder the display will show its complete contents, that is, the background picture you have copied there. Use the button at the lower right to copy additional pictures to the folder, for instance, an alternative background picture for two-line texts. 112

113 Fig. The contents of your Set folder If you have not yet created a folder with a background picture, use the Wizard s second option to create a new folder and then copy a background picture into this folder. This is quite simple, and afterward a console containing your background window will open. 113

114 Saving Sets When you select the Save Set as command, by default the DSM Designer goes to the folder in which the open file is located. You can either save the Set under a new name in the same folder or select a new location within the Set folder. Use the button at the upper right to create new sub-folders. Fig. The contents of the Set folder The Set is saved at the selected location in the.dset format, but separately from any of the background pictures or other files with which it may be associated. That is why the DSM Designer will output a warning message. Fig. Warning during saving If you would like to save the files that belong to the Set along with the Set at its new location, use the Export Set option instead. With this command all components that belong to the Set are stored together. 114

115 The Background Picture Our personalisation is realised on the background picture. For a good print result we recommend a resolution of at least 200 dpi. The DirectSmile software requires that any background picture must be available as a TIFF or JPEG, and ideally it should use the RGB colour space. No additional Alpha channels or layers may be included in the picture. Until recently the RGB colour space was a requirement for personalising pictures, but with the new version of the DSM Designer it is possible to load and use CMYK background pictures as well. For the work within the DSM Designer the data are converted to RGB, and afterward they are converted back. Although it may sound as if the print result emerging from this double conversion would have to be a catastrophe, rest assured: this is not the case. In Chapter 7 (Background Knowledge) we explain how exactly this separation works and how you can influence the process yourself. Fig. The Select Background Picture menu command 115

116 5.3.1 Background Picture (for one-line texts) Select File from the menu bar and then Select Background Picture. Fig. Select background picture and copy the Set folder Use the file browser to go to the desired picture. If the picture is not located in the same folder as your Set, the DSM Designer will ask whether it should be copied there. This is advisable, as it means that all data will be stored together in one location. If the desired picture is already in your Set older, you can select it using the scroll box. Fig. The background picture for the daisies 116

117 5.3.2 Alternative Background Picture (for two-line texts) There is not much room for text in our daisies picture, just a narrow strip in the middle. If you would like to write two lines on this picture, we will need a meadow with fewer daisies in the middle. That is what the alternative background picture is for. Fig. This time with a bit more room for two-lines of text Fig. Selecting the alternative background picture Later the default background picture or the alternative background will be displayed automatically depending on the length of the text. 117

118 Fig. That fits on one line Fig. Two lines are better here 118

119 Working with ClipFonts You have become familiar with personalisation using ClipFonts or Clips already thanks to the examples in the previous sections. This kind of personalisation is so popular because relatively little effort is required to achieve attractive results. Three elements are required to create a Set with ClipFonts: background picture Clip with its associated mask (known as a Clip Set ) font used as the basis for the arrangement of the clips We have already dealt with the background picture. As we know, fonts are (hopefully!) installed on every computer you work with, so you do not necessarily have to create one yourself in order to personalise using Clips. Imagine for a moment that you had not heard anything about one-line and two-line texts in the previous section, and return to the point in time when you selected the two background pictures. Fig. Our background picture Selecting a Clip Set and Font DirectSmile provides a number of Clip Sets with the DSM Designer, like, for instance, the daisies. Once you have selected the background picture and opened the first Text Frame, the next step is to go to the toolbar to select the kind of personalisation desired, here a ClipFont. Fig. Selecting the kind of personalisation 119

120 Because the daisies are a default value for the DSM Designer, they will automatically be displayed first. If you do not want to use the daisies, select a different ClipFont either by clicking on the name of the Clip in the toolbar, or by clicking to the right of the displayed Clip. Fig. Selecting a Clip The Clip browser opens to show you which Clips it has at its disposal. The Clips are located in the Clips folder in the program directory of the DSM Designer (see also section 5.4.4, Generating Your Own Clip Sets ). Fig. The Clip Browser On the right side of the browser you see how many individual Clips are included in each Clip Set. The daisy Set has two different Clips with the corresponding masks. You can combine as many Clips in a Set as you like. If you have just created a Clip yourself and cannot find it in the overview, click the Refresh List button. Then all of the Clip Sets in the Clips folder will be reloaded into the window. Select a Clip for the personalisation and confirm by clicking OK. 120

121 Fig. Background and Clip are selected the font used is dsm_flowercapitals Now we can select a font suitable for our selected Clips. The way the Clips are arranged is always a function of the font you have chosen. The figure above shows the dsm_flowercapitals font. This font (or one with a similar name) is one of the ones provided with delivery of the DSM Designer software. It is an upper-case font, and was designed especially for personalisation using our daisy Clip Set. You will soon discover that some fonts are more suitable for use with certain ClipFonts than others. For the daisies, for instance, a script font like the one illustrated below produces less than optimal results: Fig. The font used is dsm_easyhandwriting Open the drop-down menu in the toolbar to view all of the fonts installed on your computer (and which thus can serve as the basis for arranging the Clips) as well as all of the ClipFonts delivered with the software or created by users since delivery. The last of these are shown at the very top of the list and designated as ClipFonts. 121

122 Fig. The Font List in the DSM Designer That concludes the basic configuration for the personalised result. However, there are many other possibilities for working with ClipFonts and refining the settings, as we will see in the next sections. 122

123 5.4.2 The Suitable Font When selecting the right ClipFont for a certain Clip Set there are many fine points to consider, some of which may not be apparent upon first glance. When we compare the two pictures below, they seem quite similar, although not identical. However, they use two different ClipFonts. Fig.: The dsm_standardcapitals ClipFont Fig.: The dsm_flowercapitals ClipFont The next figure shows exactly where the fonts are different and what we would like to emphasize: In the dsm_standardcapitals ClipFont the individual daisy Clips overlap. This does not happen when the dsm_flowercapitals ClipFont is used. Fig.: dsm_standardcapitals with overlapping Fig.: The dsm_flowercapitals ClipFont. No overlapping Why not? When working with fonts we must differentiate between two basic variants: Open fonts and closed fonts. It becomes clear what this means immediately when we look at both ClipFonts in the ClipFont Editor, which we will get to know in detail in a later section. The Editor is where the paths are defined along which the Clips are placed for the personalisation. 123

124 Fig.: The closed font dsm_standardcapitals Fig.: The open font dsm_flowercapitals Open fonts leave spaces between the individual paths; this ensures that even larger Clips like the daisies will not overlap in personalisations. Note: The larger the individual Clips (e.g. the daisies or the pigeons), the more probable that an open ClipFont will produce a better result. Smaller Clips generally are more attractive in closed ClipFonts More about Clips The main purpose of this chapter is to show you how diverse and flexible ClipFonts are and how they can be implemented. There are so many possibilities that we cannot present them all here (otherwise you would never get around to creating a Set of your own!). Rather, examples will be presented in order to give you at least an idea of all of the things you can do with Clips Clip Sets without a Clip: Personalising with Masks Almost the most important part of a Clip Set is the masks for the individual Clips. First of all, the masks and their half-transparencies ensure that the Clips can be adjusted to any background; second, they can be implemented separately in certain situations. If you have a mask available, in some cases you will not need any Clips at all to personalise the mask will be perfectly sufficient. As an example, let s look at the DSM_Snowman Set. This Set personalises by writing with snowflakes on a dark-blue background. 124

125 Fig. The DSM_Snowman Set Fig. The snowflakes are generated using only a mask 125

126 Select one of the Text Frames using the selection tool so that we can take a look at the settings. Then open the Clip Browser. The Clip Set dsm_snowflake is used for the snowman motif. When you click this Set and look on the right side of the window to see which Clips belong to the Set, you will discover that only a single mask is used Clip Sets with Shadow Besides the possibility of using just a mask or a mask and a Clip, there is a third variation as well: We can assign a shadow to the Clips in our Clip Set. The Clip Set called Pigeons, for instance, includes such shadows and is used in the DSM_Pigeons Set. Fig. The DSM_Pigeons Set It looks quite unnatural if the pigeons do not throw any shadow on the sunny square at noon. This is obvious in the figure below. 126

127 Fig. The Pigeons Clip Set without any shadows So let s stick to the version with shadows and take a look at the display in the Clip Browser. The Pigeons Clip Set contains seven Clips, seven masks and seven shadows. Fig. The Pigeons Clip Set 127

128 5.4.4 Generating Your Own Clip Sets How can you create individual Clips, masks and additional shadows yourself? We need an image processing program and a motif that we would like to use as a Clip. Here we see the motif for our Set: a pigeon. This picture is our Clip. The background does not matter to us here. Ultimately we will use a mask to make the background invisible, so that we will be able to place the pigeon onto any background picture. With the path tool of your image processing software, follow along the outline of the pigeon. It is important that the cropping path lies within the pigeon, so that parts of the background will not be visible in the Clip later. Create a new layer and fill the outlined area with black. The rest of the image must be white. This will be our mask. The shadow was part of our original picture, too. Proceed just as you did to create the mask. Follow along the outline of the shadow, fill it in with black and make the rest of the picture white. Now we have all of the elements that belong to a Clip Set. Of course, you can use additional pigeons as additional Clips. This is entirely up to you. The DSM Designer cannot work with the Clip Set until we save it at the correct location, in the correct format and with the correct name. Collect all Clips, masks and shadows that belong to a Clip Set in a separate folder. This folder must be located within the Clips folder in the program directory of the DSM Designer. The name of the sub-folder is also the name of the Clip Set and should be selected so that you can recognise it later. Clips, masks and shadows must be saved in the TIFF format and in RGB mode. The image files may not contain any alpha channels or additional layers. All Clips, masks and shadows within a Clip Set must have the same size (in pixels). Always name the Clips, masks and shadows according to the same pattern: clip1.tif, mask1.tif and shadow1.tif ; additional Clips clip2.tif, mask2.tif, shadow2.tif, correspondingly, and so on. This is the only way for the DSM Designer to detect which file contains which information it needs. 128

129 Fig. The Clips folder in the working directory of the DSM Designer. All of the Clip Sets are located here. 129

130 Now you can work with your new Clip Set. If the new Clip Set is not listed in the Clip Browser, click the Refresh List button. Then all of the Clip Sets available are reloaded and displayed by the Generator Editor. If the new Set still does not appear, make sure that it was saved in the correct directory and that the individual files were named appropriately. Fig. The pigeons in the Clip Browser Formatting Clips Correctly Let us return now to our first motif, the daisies. We already saw how a font can be formatted using the Text palette, but there are additional settings that relate only to Clips rather than to the paths of the font used to place them. The settings for Clip size and Clip spacing are located in the top toolbar. Fig. Clip size and Clip spacing Both values are set to 100% by default. This value does not designate an absolute size or spacing, but rather the ratio of the space available (Frame size) and the number of Clips required (word length) to the Clip size. Although this sounds complicated, it is actually quite simple. For a short word the individual Clips may be larger than for a longer word in the same frame, although the setting remains unchanged at 100%. 130

131 Fig. Different Clip sizes in spite of a setting of 100% for size But if we change the size of the Clips using the slide control, this certainly has an effect. The DSM Designer renders with fewer, but larger Clips when we increase the Clip size. Fig. Both settings at 150% Fig. There are fewer Clips but these are larger. Through the increased Clip spacing there is almost now overlapping. So that the Clips do not overlap in spite of their size, the Clip spacing is adjusted automatically to a larger value as well. The top slide control moves the bottom one along with it. However, the setting can be improved manually as the bottom slide control can be operated independently. Fig. The Clip spacing changed manually Fig. Through the reduced Clip spacing strong overlapping occurs. There are hardly any general recommendations we can give you for working with Clip sizes and spacing; these settings depend far too much on the kind of picture you are using, the Clips and your preferences. Just keep trying out different settings until you are pleased with the result. 131

132 5.4.6 Clip Filters In a later section you will become acquainted with filters and actions that can be applied to a Text Frame as a whole. The Clip filters are somewhat more specialised and can be applied only to pictures that are personalised using Clips. If you are familiar with image processing software, you will recognise many of the features you know from such programs. Perhaps the great number of possibilities for influencing the Clips may seem exaggerated. But it is especially important for picture personalisations that they look as realistic as possible. That is what makes them surprise people so much, what astonishes them when they look at the picture. The Clip filters are located under the Window menu command in the menu bar. Fig. Opening the Clip filters First let s see what our Clips look like before we apply filters. Fig. The point of departure 132

133 Fig. The Filter palette for Clips For our examples we will exaggerate the settings in a few places. While this may not make the Clips look terribly realistic, it illustrates the desired effect clearly Position The individual Clips are shifted randomly in the horizontal and/or vertical directions up to the maximum values you specified. With this setting you can prevent the Clips from running along an artificially straight line. This makes our daisies look much more natural. Fig. Settings Fig. Result 133

134 Scaling The Fixed Scaling setting specifies the size of the Clips the DSM Designer should use. Because it is not advisable to enlarge the Clips, the default setting is the maximum value of 100%. The DSM Designer applies the Fixed Scaling setting to each Clip. The frequency of the random scaling defines how many Clips (of 10) should be scaled randomly. A setting of 10 means that every Clip will be scaled according to its own random value. You can define a minimum value below which a scaled Clip may not be scaled. If you enter 100% here, the Clips will not be scaled at all; otherwise the DSM Designer selects a value between 100% and the specified minimum value. The Quill Effect designates a more strict arrangement of scaling, as if you were writing with a quill on paper. This scaling is identical for all Clips located on a stroke. The scaling changes along with the direction of the writing stroke. Fig. Setting Fig. Result Rotation You know this setting in a slightly different form from the Text palette. The Clips are rotated randomly, no more than the angle you specify. Fig. Random rotation 134

135 Fig. The Clips with the beetles are rotated randomly The object angle ensures that your Clips run cleanly along the path of the individual letters, as if in a conga line. Fig. Using the object angle Fig. Turning in sequence You can also use the random rotation when the Clips are oriented along the object angle. 135

136 Mirror With this setting some of the Clips are mirrored horizontally, and some are mirrored vertically. Use the random checkbox to restrict the mirror effect to the horizontal direction. Fig. Setting Fig. Result Opacity Here, too, we can specify our desired minimum and maximum values. However, the DSM Designer takes offence when it is challenged by meaningless entries. A minimum setting of 80% for a maximum value of 20% will be ignored completely. The Adjust to Scaling setting takes effect only when the Scaling filter is applied to your Clips as well. Clips with smaller scaling have softer edges and appear to have less opacity because of their smaller size. The checkbox compensates for this effect. Fig. Setting 136

137 Fig. Result Blur The frequency setting here has the same meaning as for the Scaling filter. A value of 10 means that all Clips will be rendered blurred. The maximum value entered here specifies the degree of blurring. Here, too, you can use the checkbox to automatically adjust the blurring to the scaling. The higher the scaling applied to a Clip, the less it has to be blurred. Fig. Setting Fig. Result Drop-Shadow Because this filter is especially popular, it has somewhat more comprehensive settings and even its own window. The distance specifies how many pixels away from the Clip the drop-shadow should be located (in the horizontal and vertical directions). The intensity is specified in percent and thus cannot exceed 100. If you have selected black as the colour for your drop-shadow, with a value of 100% it will be truly black. The opacity reduces when lower values are specified for intensity. You can select any other colour desired, however. Just click in the small colour field to select a different colour. In most cases it looks better if the drop-shadow does not have a sharp edge. For this you can apply a blur setting. 137

138 Fig. Settings for the drop-shadow Fig. Drop-shadow Motion Blur With this filter you can define a motion blur for your Clips. Here you have many different settings options. The Active option must be clicked in order to apply the filter. 138

139 A With the setting Every Xth time you define how many Clips per character the filter is applied to. B You can define the direction of motion in which a Clip should be blurred and the furthest distance between two Clips. Here you have the following options: Enter the maximum ( Max ) distance in the appropriate field. The distance can be defined as a horizontal distance ("X-Max") or a vertical one ("Y-Max"). X-Max: A plus sign in front of the value (or just the value) defines a movement to the left. A minus sign in front defines a movement to the right. 139

140 Y-Max: A plus sign in front (or just the value) defines a movement upward. A minus sign before the value defines a downward movement. You can enter both plus and minus values for both directions. C The value in the "B-Bright" field defines the basic brightness of the Clip. The Clips are rendered in decreasing brightness proceeding from a value of 100. For instance, when a value of 10 is entered, the first Clip will be rendered very bright, and the brightness of the next clip is determined by the value in the "M-Bright" field. The movement in all directions is then rendered by chance according to the given maximum values. The random movement will be applied in one direction to each separate Clip. The example picture shows a "B-Bright" value of 80%. The "M-Bright" is specified as 75%. The values for "B-Bright", "M-Bright" and the number of "Steps" are crucial here. The first Clip calculated is the first Clip rendered (displayed in green). The brightness is calculated as follows: 1. A B-Bright value of 80% of the original Clip is specified. 2. The opacity of 80% is then set equal to 100%. 3. The "M-Bright" value of 75% is applied % of 80% opacity makes 60% opacity. D The value in the "Steps" field defines the number of Clips to be rendered. In the Blur field you can specify how soft the edges of a Clip should be drawn. E When you select this option, the Clip is drawn once more after applying the filter. This presents even more possibilities for processing the image. F Click this button to restore the default settings. 140

141 Emboss Use the Emboss filter to give your Clips additional plasticity. It is particularly appropriate for larger Clips with clear shapes. Let s take a closer look. Fig. Settings for the Emboss filter The Emboss filter searches for edges it can intensify with light/shadow effects. This feature can make an object seem three-dimensional, as if a piece had been punched out by a cutting press. To give you an idea of how this filter works, we installed a small preview in the settings window. Every setting you configure is illustrated as applied to the square at the top of the window. The checkboxes on the left define the edges to which the Emboss is to be applied. In effect, it simulates the effect of light striking an object. One side of the edge is lit up and the other throws a shadow. Use the first two slide controls to define how far the light or shadow edge may be removed from the edge of the object. The greater the value, the stronger the effect, as if a setting sun were shining upon the object and throwing long shadows. The light and shadow edges can be blurred as for a drop-shadow. Of course, the Emboss effect does not necessarily have to have a white edge and a black shadow. You may select any colours you like. Use the button above the entry fields to reverse the colour selection. The picture then looks as if the light were shining from the opposite direction. The best way to find the ideal settings is to play around with the options until you get a satisfactory result. Fig. Without the Emboss filter the bubbles can hardly been seen; with Emboss they are quite visible 141

142 D-Effect Shadow This filter is seldom used and can only be applied when you use a ClipFont with what is known as shadow turning points. The TraceScript font, for instance, features these shadow turning points. More on this in the section on the ClipFont Editor. Fig. The 3D-Effect Shadow in action The 3D shadow lets you cast a realistic drop-shadow from a personalised text to the background behind it. We recommend that you not spend too much time analysing the individual values, but instead try out variations of the default values until you obtain a satisfactory result. Fig. Settings for the 3D shadow 142

143 Let us take a look at the settings options to convey an idea of what values make sense. Here you can set the brightness of the shadow. Values between 0.1 and 1.2 are normal. The lower the value, the darker the shadow. We call this value the fixed toggle-difference. Enter the length of the shadow in pixels. The scaling factor is the slope of the shadow per pixel, calculated from the specified shadow turning point. The number of pixels is specified in the Fixed Toggle-Difference field. The values should lie between 0.1 and 0.5. The X offset and Y offset of the shadow (also referred to as the Base Shadow ). With this value you define how far the shadow should extend from the actual Clip in the X or Y direction, respectively. Values can range from -5 to Gradient The gradient mask allows you to place a uniform colour gradient on all visible Clips. Let s assume that you are working with a Clip Set whose individual Clips contain sources of light and shadow. If the Clips are to be rotated in your personalisation, it would look as if the sun were shining on every Clip from a different position. Not very realistic, as we can see in the illustration below. Fig. Each tennis ball has light and shadow from a different angle The gradient filter can compensate for this somewhat. 143

144 First we select a colour. Our gradient starts from transparency and ends up at this colour. Fig. First we select the colour at which the gradient is to end Use the Set button to define the first and last points of the gradient. In contrast to many image processing programs, our colour will be visible where we select white, not where we see black. Fig. Defining the direction of the gradient 144

145 After this the result looks fairly good and we have at least reduced the problem with the light sources. Fig. Much better: the tennis balls with a colour gradient Clip Tracks Although the picture shown here shows tracks in the sand, these are not the kind of tracks we mean for these settings. What we mean by tracks when we work with ClipFonts is more like lanes on a three-lane highway: right, middle and left. Fig. Beach motif with woman walking on the sand Open the settings for the Clip tracks from the Window menu. 145

146 Fig. The Window Menu In the settings for our beach picture only the right and left tracks are used, with the main track left blank. Besides these settings a value is set for Track Width and the checkbox Toggle Tracks is checked. Fig. Settings for tracks Let s explain the tracks first. This setting pretty much explains itself once we take another look at the ClipFont Editor, which we will investigate in more detail later. So first we open the ClipFont Editor with the ClipFont we are currently using. Its name is HandwritingSinglepoint. 146

147 Fig. The B of the HandwritingSinglepoint font in the ClipFont Editor We already mentioned several times that all Clips in a ClipSet are oriented along paths that describe the letters. This window shows such a path and we also see that this path is not narrow, consisting of only one line, but rather comprises lots of small triangles (they show the direction in which the letter is drawn). In addition, lines run along the edges and through the middle. These lines are our tracks, and are quite practical for drawing a text with footprints. After all, we don t walk along a narrow line (or at least not often), but alternately place our feet slightly to the left and right of such an imagined line. To make sure that the right and left footprints are placed in the correct position, rather than distributing the Clips randomly, we can define which Clip is to be used along which track. Click on the small palette symbol to configure this definition. 147

148 Fig. Clip 1 (the left foot) is selected for the left track The window that opens shows you the individual Clips available in your Clip Set. In our case the only Clips available are masks. The left footprint is assigned to the left track. When you double-click the on option All Clips, both Clips will be used in random sequence. The track width defines the distance between the right, middle and left tracks. Our setting 6px thus means that the right and left tracks are a total of 12 pixels away from each other. After all, the main track continues to exist, even though we are not using it. The Toggle Tracks checkbox specifies whether Clips should be drawn on the left and right tracks at the same time, or on just one track at a time. For our example this means asking whether the woman is hopping down the beach like a kangaroo or whether putting one foot in front of the other. Fig. Left without toggled tracks, right with 148

149 5.4.8 Closing Images for Clips A closing image can fine-tune your personalisation even further. Such an image is placed at the end of the path that describes the personalisation with a ClipFont. In the lower figure you see our beach motif again, but this time without a closing image in this case, our woman walking on the beach. Fig. The beach motif without a closing image If you would like to use a closing image, it must be located in the folder of the Set you are working with. It must always be saved in TIFF format, without additional layers and alpha channels. As for the Clips, you can use a separate file here, too, to be utilized as the mask for the closing image. Open the settings for the closing image in the Window menu. Fig. Inserting a closing image The first time the closing image is loaded you will establish that it is probably placed in the wrong position. This is because the left, upper corner of your closing image will be placed at the end point of your path. 149

150 Fig. Incorrectly positioned closing image Use the blue and green arrows to move the image to the correct position. The blue arrows move the image in steps of ten pixels, the green ones just one pixel at a time. Because the Generator Editor takes note of how the closing image has to be moved relative to the end point of the path, it does not matter which word you use to position the closing image. Once it is positioned correctly once, it will be at the right position for all names and words. Fig. The closing image positioned correctly Clip Perspective These settings are also located in the Window menu. The perspective settings make it possible to lend more spatial depth to your pictures so that they look more realistic. The DSM Designer provides for three variants, as displayed in the illustration below. Fig. The Perspective palette 150

151 Fig. Schematic diagram of the perspective filters a) Shows the direction of the path b) Along the Path : The final point of the path is located in the foreground; the first one in the background. c) From Back to Front : Creates the impression that the Clips on the lower edge of the picture are closer than on the upper edge. The lower Clips overlap the upper ones and are larger. d) From Bottom to Top Along the Path This setting is configured as the default for all new pictures you create. This filter places the Clips at regular intervals along the prescribed path of the letters. This filter lets you create motifs in which perspective does not play any role (for instance, our meadow of daisies this picture is viewed from above without any impression of depth) From Back to Front Imagine looking from your balcony out along the street and taking a picture. If any pedestrians are on the street, the further away they are, the smaller they appear. Pedestrians further away will also be positioned higher up on the photograph than others located closer to the balcony. Of course, it is also possible that a passer-by standing further away may not be completely visible in the photograph because another, closer figure is standing in front of him. This is the effect achieved with the From back to front arrangement. Fig. The way the perspective setting From back to front works Minimum Clip Size This value specifies how much the objects in the background of the personalisation should be reduced in size. The smaller the value, the greater the depth of the picture. 151

152 Flight-Factor The DSM Designer defines the sizes of the intermediate Clips automatically and also adjusts the distances between the Clips in accordance with their sizes. This creates a balanced impression, as the distances between Clips becomes smaller as the Clips become smaller. The "flight-factor" counteracts this effect. If you enter positive numbers from 1 to 6 here, the distances between the Clips will be adjusted correspondingly less, and the original distances maintained. Fig. DSM Set Balloons The effect that results can be described particularly well using the example of balloons. The balloons further away are smaller than those in the foreground. At the same time, the distance between the individual balloons increases, creating the impression that they are flying away. If you enter negative values for the "flight-factor", this will completely suppress the scaling of the Clips. Only the distances between the Clips will become larger as the Clips approach the upper edge of the frame. This means that the percentage value for the "minimum Clip size" continues to control the increase in distance, but no longer the scaling of the Clips Ground-Shadow We can create a separate shadow for our perspective settings. This file must be located in the folder of our Set. 152

153 Fig. How the shadow, Clip and mask are combined First the shadow is applied to the background image, taking consideration of all of the objects already rendered, and THEN the Clip is drawn. This procedure ensures that the shadow never lies over the Clip. Fig. Clips with their own ground-shadow Once the picture "Shadow1.Tif" has been saved in the Set folder along with the "Mask1.Tif" and "Clip1.Tif" files, the setting for ground shadow can be configured. In our example we defined black as the colour of the shadow. But you do not necessarily have to define a colour; the shadow can also be filled with an image. The simplest example of this is filling a shadow with the Clip itself. This means that your original Clip will be visible on the surface of the shadow mask. Fig. The shadow is filled with the Clip This principle is easy to illustrate using the example of the water lilies: The shadow channel we introduced above is added to the mask. The ground-shadow applied is then the Clip. 153

154 Fig. The result: The water lilies are reflected in the water However, you do not have to use the same Clip as the shadow; any other image in the Clip folder can do the job either. The only requirement is that the picture complies with our naming conventions, that is, it must always be named 'picture name' + number + '.TIF'. The name of the picture could be 'Reflection', for instance. Fig. The eyes are from the Reflection1.tif file From Bottom to Top There are no further settings in the palette for this perspective. The values from random scaling are used instead. Without this scaling the perspective would have no effect. Fig. The values of random scaling are used Fig. The filter in action 154

155 In this perspective bottom designates the smallest Clip, and top the largest one. These different Clip sizes arise because the Random Scaling Clip filter is applied. The From Bottom to Top perspective gets interesting when it is combined with the various Clip filters: Fig. The upper motif was achieved with the following settings By activating the checkboxes "Adjust to Scaling" in the filter dialogs "Random-blur" and "Random opacity" in combination with Random Scaling, the following effect can be achieved. The smallest Clip is located in the background, is blurred most strongly and has the least opacity. This combination corresponds very closely to the way people see perspective. Objects in the foreground are large, clear, and highly opaque, while objects in the background are blurry and become smaller. The perspective setting "From Bottom to Top" ensures that a small, blurry object is never positioned in front of a large, clear object Clip Balance Every Clip Set can consist of any number of individual Clips. But perhaps you like some of the Clips better than others. Normally, the Generator Editor utilises all available Clips with the same frequency. With the Clip Balance setting, however, you can define that some Clips in a Clip Set are used more often in the personalisation than others. 155

156 Fig. The pigeons are used with equal frequency 100% is the maximum value for each Clip. Reduce the values for those you would like to use less often. Fig. The first Clip is used more frequently in this version Clip Overlay and Single-Clip Overlay It is no problem if daisies on a meadow overlap each other a little and are positioned at various angles to each other. But if your picture shows parked cars, it would create a quite dubious impression if the cars overlapped each other. This is similar for our pigeons. In a few places our picture looks unrealistic because some of the pigeons are overlaid. Fig. The pigeons are in each other s way You can prevent such collisions by activating the Avoid Clip overlay option. For cars I presume that Never overlay would be the correct setting (hopefully). Otherwise you can define a threshold value. The greater the percentage entered here, the more probable it is that individual Clips will occasionally overlap or at least touch each other. For the pigeons this looks just fine. 156

157 Fig. A high threshold: even so, the Clips overlap quite rarely Single-Clip Overlay In some cases, additional single Clips placed with the Single-Clip tool can make the picture look more natural. Fig. Single Clips But it is possible that these Clips could end up in the territory where the personalisation is placed. This could result in a personalisation that is difficult to read. Fig. The single Clips make some letters look frayed Undesired overlapping can be prevented using the settings for Single-Clip overlay. Use the buttons + and - to define the minimum size of the free area around any individual Clip. 157

158 Fig. Most of the additional Clips are made invisible 158

159 Clips: Settings for Experts As a rule, we recommend leaving these settings alone whenever possible. But you may encounter cases for which they provide solutions. Fig. Settings for Experts The possibility of rendering single points with extra Clips makes sense in cases like our beach walker, to see that our letter i gets dotted. When you select this option, your Set folder must contain a file entitled Dotpic.tif and its corresponding Dotmask.tif. The Dotpic is then used to render a single point. When the picture is rendered with masks, the Clips themselves are not displayed, only the corresponding masks of the Clips. In many Sets this produces an invisible result, but for others (especially our beach picture mentioned above) it can look great. The option One object per segment also has to do with the ClipFont Editor, which we will finally deal with in the next chapter now that we have mentioned it so often. When this option is selected, only one Clip will be positioned in each individual segment of a letter. The visual effect depends on the Clips you are using and how many anchor points (and thus segments) your ClipFont contains. Fig. ClipFont with few anchor points This option would make no sense for our daisies. 159

160 Fig. Daisies with only one object per segment The example would look very different if you were using matches to draw letters on a table. This looks much better when only one match is used for each segment. Automatic Clip Scaling ensures that the Clips automatically increase in size whenever there is more room available in the frame. A factor of 10 is pre-set as the default value for scaling. If you reduce this value (the minimum permitted is 5), the Clips will generally be rendered larger; if you increase it (to a maximum of 20) they will be correspondingly smaller. High-precision calculation is not important for most Clip Sets and ClipFonts. The result will look fine even when the lowest value is used. If the result for a Set leaves you with the suspicion that the single Clips are not positioned properly on the path, increase this value to improve the appearance. The Clip-Font Editor Now that we have mentioned it so often in the preceding chapters, it is finally time to acquaint you with the ClipFont Editor. You can open it from the Font menu, either with the font you are currently using, or without any specific font at all. Fig. Opening the ClipFont Editor As we explained, when you work with Clips and Clip Sets, the individual Clips are placed along paths in order to form a letter. These paths can originate from system fonts installed on your computer. Alternatively, you can create the paths yourself by designing your own fonts using the ClipFont Editor. The DSM Designer also includes a selection of its own ClipFonts. These are designed to make your work easier, as these fonts have already been optimized for working with the DSM Designer. Let us address a general question first: Why should you work with ClipFonts at all, and not just stick with your system fonts? The answer is simple: because your system fonts are not suitable for certain tasks and you will not be able to fulfil all of the wishes you have for personalising texts. 160

161 An example: Fig. The beach picture where does the stroke at the beginning come from? In our beach picture the footprints come in from the left edge of the picture, and we see a long stroke upward after the last letter. How did we render these characters that do not actually exist in our alphabet? Using the ClipFont Editor. Fig. The data entered for the beach picture In figure above you see that a Text before and a Text after were specified for the beach picture, namely the pointed brackets. When we open the ClipFont Editor and look at these two characters, you understand why the Editor is so valuable for our work. You can make these characters look however you like. 161

162 Fig. What the pointed bracket looks like in the ClipFont Editor: the stroke upward That should answer our first question. One more thing should be mentioned before we start: all ClipFonts are saved in the ClipFonts folder of the program folder of the DSM Designer. Fig. The folder contains all ClipFonts 162

163 5.5.1 The ClipFont Editor Commands If you open the ClipFont Editor without a font, it looks awfully empty at the start. Fig. The Editor upon starting Still, the first step is to save our new ClipFont under a new name. Then click the Add Character button. Keep all of the other settings for the moment. The DSM Designer s own character table opens in a new window. In our case the Arial font will be displayed; this is set by default because it contains so many characters and is installed on almost every computer. If you prefer to work with Windows keyboard shortcuts or the table of Windows characters, you can open both using buttons in the upper section. Otherwise we will start by selecting the capital A and confirming our selection with OK. 163

164 Fig. The character table of the ClipFont Editor Now we have our first letter ready in the Editor. The only way to edit characters is to select them from the character table one at a time. If you want to design an entire font, you ll be busy for quite a while. Fig. The capital A 164

165 The letter A now appears as the first letter in the left column, preceded by the Unicode for this character, which the Generator Editor extracted from the character table. This ensures that the letter can be identified clearly as the character A. However, it is up to you what the A ends up looking like. Let s take a closer look at the toolbar: Fig. Toolbar of the ClipFont Editor Character You can enter letters yourself in the field at the upper left, where they will always be displayed in the Arial font. The field to the immediate right shows what the letter looks like in the selected font. Because we have selected Arial here, too, the characters are identical. However, you can select any other font installed from the scrollbox to the right of the display. The small show checkbox defines whether the original letter should be displayed in grey in the Editor window. You can see this in our A example: The letter is displayed behind the path. The small pull-down menu with the 0 indicates that the font displayed in the Editor has not been increased in size. You can enlarge the font here in several steps if you prefer massive fonts Display Use the slide control to define the width of the display of the small triangle segments. It is easier to trace finer fonts with narrow triangles, but a wider display is preferable for bolder fonts. Note: This specification has no effect at all on the ultimate appearance of the font; it refers only to the display in the window of the ClipFont Editor. Fig. Narrow and wide grid settings 165

166 When you activate the small checkbox next to this control, the intersections on the grid are magnetised. This may assist you in working with precision and docking points at the correct location, as we will see below. Fig. Font families There are no restrictions on the selection of family names. You can simply enter a new name in the scroll box. What is the idea behind the concept of family names? Perhaps you will want to create several fonts containing only capitals, like we did for our meadow of daisies. You could group these fonts together, for instance, in a family called Caps. If the DSM Designer establishes during its work that a character is missing for a text, it will try first to find this character in another font of the same family. Only if the character is not included in the entire family will it return an error message. Therefore, for the DSM Designer to use your families in a productive way, they should be oriented around similarities among fonts (for instance, one family for script fonts, one for san-serif capitals, and so on). Conversion The conversion settings define how precisely the letters of the font you selected will be loaded. Click the Load button to repeat the procedure using the current settings. Fig. Settings for conversion You can set the precision to a maximum of 200%. The higher the value, the more exactly the curves of the font to be converted will be traced. In general the default setting of 50% is more than sufficient, but for generous, sweeping fonts a higher setting may produce more satisfactory results. The point density defines how many anchor points are created when the font is converted. The more anchor points you use, the finer you can tune the font to your wishes. However, a relatively straight letter font like Arial can be loaded satisfactorily with just a few points. The fewer points you need, the easier your work will be. 166

167 Fig. The A of the Arial font converted with a point density of 15 The right edge also contains the MinMax setting, which refers to the thicknesses of the lines in the character. When this value is set to 0, all lines of the font to be loaded will be traced. The higher the value you set, the thicker a stroke of the corresponding font must be in order to be loaded to your ClipFont. This setting is particularly interesting for script fonts. It allows you to exclude extremely fine strokes, which probably could not be represented well with Clips, from being included in the ClipFont. 167

168 An example: Fig. Capital G of the Edwardian Script font In the figure above we loaded a G from the Edwardian Script using a MinMax setting of 0 and a very small grid. These settings ensure that every line of the font is converted. Now let s define a MinMax value of 3. Now only the thicker lines of the font will be converted. The finer strokes disappear. 168

169 Fig. The same G converted with different settings Editing the Rulers The two pink lines show you where the upper and lower strokes of the font begin. They serve as points of orientation, allowing you to ensure that all letters of your ClipFont are positioned at the right height. However, you can change these rulers according to your needs and insert additional lines for orientation. Do this by selecting the Edit Rulers command in the Edit menu. Fig. Editing rulers Your lines must not necessarily run horizontally or vertically. Diagonal lines are also permitted at any angle. Once you have created a new rule, use the parameters on the right side of the dialog to set the course of the line. The grid shows boxes 40x40 pixels in size. The origin is located at the upper left. 169

170 Fig. Creating a new ruler Fig. The new ruler as a diagonal Creating and Editing Letters Now let us focus our attention on the individual letters displayed in the workspace. This window also includes many elements probably familiar from other graphics programs. If you need details about the meaning of any command during your work in this window, you can open a small Help window for assistance at any time. Access the Help either from the Edit window or by clicking the small button at the top of the letter column. 170

171 Fig. The Help window The solid red dots are called nodes, but you may be familiar with them from other programs as anchor points. They define the starting and ending points of each letter path, as well as points of reference in between. When we begin with an empty workspace, we insert the first node using the right mouse button. Fig. The first node 171

172 There is still no path here, as it is defined as the stretch between two nodes. So let us use the right mouse button to add another node. The path between these points is created automatically. Fig. The first part of the path The single nodes can be moved at any time. Simply move the mouse across the desired point and hold down the left mouse button to change a point s position. We can create curves by placing many nodes close to each other to create a rounded path. But this is fairly complicated. An easier alternative is to use the tangent points, displayed as red circles with a white centre. All of you graphic designers are probably experts at working with tangents. For the rest of you, suffice it to say that it is not difficult at all to use tangent points to create well-formed curves. Move the tangent points by holding down the left mouse button to see what happens and how the curves emerge. 172

173 Fig. Curve paths are created using the tangent points It is difficult and sometimes impossible to draw some letters in one stroke. Such letters are put together from multiple paths. As long as you keep the right mouse button pressed, every new node will be connected automatically with the preceding path. To set a new starting point, hold down the Shift key and click with the right mouse button. Fig. New starting point inserted with Shift + right mouse button Now you know enough to put together a complete print alphabet. We will continue with the fine-tuning in the next section. 173

174 Note: Nodes can also be added and deleted later. To add a node to an already existing path, click with the left mouse button on the position along the path where the point is to be inserted while holding down the Shift key Script Fonts: Docking and Turning Points By their very nature, script fonts are not as linear as print fonts. Here we have the further problem that the individual letters must fit together seamlessly and be drawn in one stroke. For us this means that it may be necessary to create multiple variants of a letter, as we will see below. Fig. You need a script font for a picture like this Note: The DSM Designer package includes a number of ClipFonts designed especially for these applications. You can find tips to resolve your special problems by opening the fonts included with the package to see how they were created. Let us look at the letters we used to make the picture above. It was created with the DirectSmile font TraceScript. 174

175 Fig. The small m in TraceScript Here we see why the rulers are so useful. We have placed the docking points on these lines. The docking points are, in the first place, nodes, which we learned about in the previous section. But here we also define where the previous letter has to end and where the next one must begin. Each letter can offer only one right and one left docking point. This does not mean that the docking points must necessarily be located on the right and left edges, but they should be the outermost points of the letter. Every node that is either a starting or end point of a path can be transformed into a docking point by clicking on it with the right mouse button and selecting the corresponding option for docking. Fig. Turning a node into a docking point What is most important here is that the docking points are placed on the Y-axis at the correct height to connect with the previous and successive letters. This is why the letter column on the right side lists the heights at which the left and right docking points are located. For the m in our example above, both docking points cross the Y-axis at a height of

176 But what if the letter r precedes the m? In a script font we would not draw a stroke to the bottom of the line to continue with an m, but rather begin the m at the height of the r, as illustrated in the figure below. Fig. This time the m looks different And in fact, our TraceScript font does have another m that looks somewhat different, with a docking point at the correct position to be connected with the r. Fig. Two different m characters The DSM Designer decides which letter is right for each case on the basis of the previous letter. If a letter cannot be docked on the preceding character, it returns an error message reporting that the docking points have been shifted. 176

177 Fig. The second m with its docking point When you compare the two m characters you will establish that it does not matter at all where the letter begins on the X-axis. In fact, the two variants are quite different at this position. Shadow Points (Shadow Turning Points) The main purpose of these points, too, is to serve as nodes, but the right mouse button was used to define an additional shadow characteristic for them. Fig. Setting a shadow point You only need shadow points if you would like to work with the 3D-Effect Shadow Clip filter. Otherwise your shadow points will have no effect. 177

178 Fig. Applying the 3D-Effect shadow The small triangles indicating the path of the letter show the direction of the shadow. Define the shadow turning point to specify when the shadow should switch from the right side of the path to the left. Note: You can also redefine docking points as shadow points. They will still continue to serve as docking points as well. 178

179 Working with PicFonts Now you are completely up to date on the subject of ClipFonts. That means you should find PicFonts a walk in the park, as they pick up on several concepts of the ClipFonts but are, on the whole, even easier to handle. ClipFonts are put together by combining many single Clips to compose a single letter by placing the Clips on the paths of characters. In the PicFonts there is one picture for every single letter. This means all we have to do is place the individual letters in order to write words and names. Working with these fonts is very similar to working with Clips: There is the picture of the letter and its associated mask. Fig. Example for a PicFont: DirectSmile Easter eggs 179

180 5.6.1 Creating PicFonts What we need, then, is an alphabet composed of pictures with which we can generate personalised images. This takes a lot of work, but the great results make it all worthwhile. picture mask result picture mask result Fig. Examples for components of a PicFont The first step is to prepare the individual pictures and masks in an image processing program and then save them to a shared folder. The same rules apply here as for Clips: graphics format: TIFF no layers, no alpha channels RGB data format all pictures in a single PicFont should be the same size (in pixels) For the DSM Designer to be able to find the right pictures for the individual letters, you must also strictly comply with the conventions for naming pictures and masks Convention for Naming PicFont Pictures There are two ways you can name the single pictures in your PicFonts, and you can even combine these two variants: Hexadecimal codes With the hex codes provided by Unicode each letter (capital or lower-case) and every special character has a unique identification. That is why this variant is the best way to exclude the potential for incorrect names. For pictures, the four-digit code receives the prefix Hx : For example, Hx0041.tif (an A ), Hx0061.tif (an a ), Hx003F.tif (a? ) and so on. The corresponding mask names are appended with an m : For example, Hx0041m.tif, Hx0061m.tif, Hx003Fm.tif and so on. At the very latest, you will need the Hex code when you try to add a special character like a question mark to a PicFont, since the Windows file system will not allow you to name a file?.tif. The Hex code can be found either in the Windows character table or in the PicFonts supplied with the DSM Designer. Go to the Font menu and select the PicFonts Character Tables command. 180

181 Fig. Opening character tables for the PicFonts Fig. The PicFont character table. The Hex codes are outlined Simplified Naming Capital letters are named after themselves: For example, A.tif, B.tif, and so on (these names are not case-sensitive) The corresponding masks receive the suffix m appended to the letter: For example, Am.tif, Bm.tif, and so on. Lower-case letters are named after the letter, preceded by an s_ for small : For instance, s_a.tif, s_b.tif, and so on. The corresponding masks, again, receive a suffix of m : For example, s_am.tif, s_bm.tif, and so on. 181

182 All pictures with their corresponding masks are saved in their own sub-folder of the PicFonts folder in the DirectSmile working directory. The next time the DSM Designer is started, it will automatically search through the folders, register the new PicFont and create a kerning table for it. Fig. The working directory of the DSM Designer Replacing Characters with the Replacement Table We have already discussed how to replace characters for single frames, but this method, of course, affects only one frame at a time. In addition, we have a global replacement table especially for the PicFonts, in which you can define which character should be used as a replacement for another whenever a character needed for your personalisation is not available in your PicFont. As the great number of special characters and letters that are only used in single countries makes it highly probable that a character you need will be missing from your PicFont at some stage, it is a good idea to keep your Replacement Table up to date. This is the best way to prevent disappointing results. The Replacement Table can be opened from the File menu. 182

183 Fig. Opening the Replacement Table Use the New Rule button to specify additional replacements. In the fields on the right, enter the character or combination of characters to be replaced by another character. Note: The replacements from the table are used only when a character needed for the current personalisation is not available in the PicFont you are using. Thus it is better to enter too many replacement rules than too few. 183

184 Fig. The PicFont Replacement Table Personalising Sets with PicFonts Personalising with PicFonts works just the way we would expect. First open a new frame on your background picture. Then select the personalisation method Picture Font from the tool bar. Fig. Selecting personalisation with a PicFont Next, open the pull-down menu to the right to specify which PicFont should be used for the personalisation. 184

185 Fig. Selecting a PicFont That s all there is to it! Now you can format and transform the text just as we demonstrated saw in the previous chapters. Fig. A finished motif using a PicFont 185

186 Scaling PicFonts In most cases the single pictures of your PicFont will have to be scaled to a smaller size for your personalisation to work. In any case, scaling in this direction is preferable, as enlarging them would produce poorer results. Because scaling takes time, the DSM Designer offers an extra command called Scale PicFont. With this command you can create a reduced-size copy of your PicFont whenever you establish that your font will have to be scaled way down in size. Fig. Scaling percentage Next to the selected PicFont in the toolbar a percentage is displayed, indicating the size of the PicFont s current scaling in the personalised image. When you click on this percentage, an input window opens in which you can define the size (in percent) at which your PicFont should be scaled in general. Don t worry instead of overwriting your existing font, the DSM Designer will create a copy. This newly scaled PicFont subsequently appears in your font list. Fig. Percentage for scaling the PicFont DSM_EASTEREGGS 186

187 Picture-in-Picture Personalisation With Picture-in-Picture personalisations you can really impress your customers. The only problem with using this kind of personalisation is that, ideally, you need a picture of each individual customer. For the time being we will content ourselves with learning how to deal with all of those pictures once they are available. Fig. Picture-in-Picture: The DSM Wanted motif Creating Sets with Picture-in-Picture Personalisations Ultimately the pictures we would like to use for personalisation come from a database, of course. Yet only a single example is needed to create the Set. We proceed as we have in the past: We create a new Set, select a background picture and open up the first frame. Select the personalisation method Picture in Picture. Fig. Picture-in-Picture personalisation Next to the personalisation method is the small palette icon. Click this icon to open the palette for Picture-in- Picture personalisation. 187

188 Fig. Settings for Picture-in-Picture personalisation First we define which picture we would like to use for the personalisation. In our case any test image will suffice, ideally one that is already located in your Set folder. In the field at the bottom you see the Test Picture scroll box. This box shows all of the pictures located in the folder of the Set. Use the button to its right to open the file browser if you would like to select a picture located elsewhere. The DSM Designer expects either a JPEG, a TIFF or a PNG file. No other file formats can be read. Obviously, the better the quality of the image, the more convincing the result. Important! This feature is an exception, in that pictures that include an alpha channel can be used. The alpha channel can be used as a mask. Once we have defined the test image and created a text frame, we can take a look at the configuration options available. 188

189 Fig. The test image has been loaded Positioning and Scaling The loaded test picture is automatically scaled to the created frame and centred within it, while maintaining the proportions of the image. Depending on what the frame looks like, there might be some space above and below, or to the right and left of the image. The red point on the palette indicates where the picture is to be positioned. The default setting is centred. In the example illustrated above, obviously the right-left positioning makes no difference, as the entire width of the frame has been filled. However, we could define that the picture should be flush with the upper or the lower edge of the frame. 189

190 Fig. Picture aligned to the upper edge of the frame The button below the positioning fields serves to scale the picture proportionally so that it fills the entire frame. In our example the picture has to be higher. Thus using this setting would mean that the right and left sides of the picture would have to be cut off, as the figure below demonstrates. Here, too, we can also define whether the image should be centred, or aligned to the right or left. Fig. Picture scaled to the size of the frame 190

191 5.7.3 Rotating There is no need to explain the commands for rotating an image manually. Simply check the box and set the angle by which the picture should be rotated. Fig. Picture rotated 90 degrees The automatic option only makes sense if you are procuring your pictures directly from a digital camera that saves information about the angle at which the pictures were taken. In this case the DSM Designer can detect the angle by which the pictures were rotated so that they can be displayed right side up. You will have to try out your digital camera to see whether it saves the required information with the image data Using Picture Frames With the Picture Frame slide control you can generate a frame around the loaded picture. The picture will not be covered by the frame, but shrunk within the picture frame. To remove a picture frame that has been added, just push the slide control back to zero percent. Use the small coloured field to the right to define the colour of the frame. 191

192 Fig. Picture with picture frame Masking Pictures Now we want to deal with the lower section of the Picture-in-Picture palette, which is what makes it possible to create motifs like the one illustrated below. In order to be able to this, namely, we must clip the picture of each individual out of the background behind it. Fig. Only possible with masking 192

193 There are various ways to do this, but ultimately all of them use a mask on our picture within a picture. Let s take a closer look. Fig. Defining the kind of mask Using a Mask from an External File So far we have only used our picture without a mask. But our gentleman in front of the green background might not look so good in the Set we would like to personalise. Ideally, the entire background should disappear, or at least have its edges softened, so that we have a chance of integrating our picture smoothly into a different background. Whenever we use an external image file as a mask, the same rules apply as for all other masks. Part of the picture is black, that s where the mask remains transparent, and other parts are white or grey where the mask is opaque or translucent, respectively. Fig. Mask and resulting picture the mask automatically adjusted to the format of the picture So if you would like to use a mask from an external file, select the Image file option and then assign the corresponding mask in the scroll box below. The scroll box shows not only all pictures located in the folder of your Set, but also ready-made masks saved in the EffectMasks folder of the DirectSmile software. The mask from the picture above is one of these, for instance, and is called CrayonEdges_Small.jpg. If you would like to use a certain mask over and over again in different Sets, it is a good idea to save it to this folder so that it will always be easy to access. 193

194 Fig. Selecting the mask file Important! Masks from an external file are scaled automatically to adjust them to the visible area of your photograph. This means that the masks may not necessarily be scaled proportionally, for instance, when you select the Fill picture frame option. As we saw above, part of the loaded picture could be cut off. But because the mask is oriented to the visible area, in this case it will be adjusted to the proportions of the picture frame so that the mask file can have the desired effect. This is worth mentioning because, while this is preferable as long as you use masks more like picture frames than as a means of clipping out the picture. However, it can lead to strange results when you use an external mask file to clip out the person in the photograph. In such cases your mask will be scaled differently than the picture. The lower figure shows what happens then. Fig. Here the external mask is scaled disproportionately, and the picture proportionally 194

195 This is no problem with the frame mask. But the result is less satisfactory in the next example: Fig. The mask and picture fit perfectly Fig. Unfortunately, they are scaled differently when this setting is applied. 195

196 Mask from an Alpha Channel In the new version of the DSM Designer you can also use pictures that contain an alpha channel. The alpha channel can also serve as a mask for Picture-in-Picture personalisation if desired. If you would like to use an alpha channel as a mask, the Fill entire frame option will be deactivated. This prevents the phenomenon we saw in the previous section and guarantees the same proportional scaling of picture and mask. Fig. A picture with an alpha channel used as a mask Masking with the Blue Box or Green Box It may have occurred to you already that there is probably a reason why our example picture has a green background and indeed there is. The DSM Designer can do something that is used quite often in the film industry, especially: remove a background using chroma keying. This process involves analysing the image and then removing a certain hue. Usually a bright blue or green background is used for this, first of all because these colours are easy to recognise; and secondly, because they are quite rare in articles of clothing. Keying works best when the photographs to be used are shot in front of specially certified backgrounds, ideally by an experienced photographer. The DSM designer identifies the keying colour on its own, i.e., this colour cannot be selected manually. Let s take a look at the settings you can configure in the window. 196

197 Fig. Settings window for keying The value displayed at the lower left indicates the colour the DSM Designer has identified for keying. On the right you can use the colour knob to select between various backgrounds to check the keying result. Use the buttons to zoom in and out of the picture display or reset it to 100%. 197

198 Fig. Preview on a white background The radio buttons below the preview section have no influence on the ultimate keying result; they only affect the preview. When you activate the upper option, Display key colour, only the pixels with the exact value of the identified keying colour will be removed from the preview. Any blur you may have set will not be shown. The lower radio button then shows the actual keying result as it will appear in your personalised motif. The Settings We can influence only two factors in the keying process: how large a deviation from the identified key value should be permitted and how strongly the result should be blurred. The best way to proceed with this is to try out different settings until you achieve the desired result. Since these settings ultimately may be valid for thousands of pictures, which will be personalised blindly from a database, it is worth investing time and effort here to achieve the best possible results. At first glance everything looks fine in the figure below. However, upon closer scrutiny in front of a background changed to red, it becomes clear that too high a value was set for colour deviation. The background is visible at the positions where the picture has been marked. 198

199 Fig. The value set for deviation is too high 199

200 Fine-Tuning: Effects, Filters, Actions Even after personalisation, formatting and applying filters for layers you still have the chance to perform more fine-tuning, namely using the Actions palette located in the Window menu. This palette includes many of the actions that have since been implemented in the Layer Effects. They are still available in the Actions palette as well, primarily to ease the transition for users of previous versions, and because without it difficulties could arise in opening and editing older Sets. We recommend using the Layer Effects whenever possible, as they are generally easier to handle. However, many effects can only be realised using the commands in the Actions palette, so you will probably have to spend some time dealing with it in greater detail. Fig. Opening the Actions palette 200

201 For Single Frames The Actions window changes its appearance depending on whether or not a frame is currently selected. If a frame is open, the contents of this window display the actions that can be applied to single frames or backgrounds; otherwise it shows actions that are applied to a whole Set. Let s look first at the actions for a single frame. Select a frame to open the corresponding Actions window. The Actions palette should look like the figure below. Fig. The Actions palette for single frames 201

202 Filters Right away you see that the selection is extensive. One of the most important options is displayed on the right side of the window: Apply. Selecting this action ensures that all of the selected filters will be applied. Or, more accurately, all of the filters listed above the Apply action. None of the actions listed after Apply will have any effect on the visible result. Fig. Settings for the Apply action Double-click on the action to open its corresponding settings window and specify parameters. This is true for all of the filters available in the Actions window. The individual filters can be dragged from the left of the screen and dropped into the list on the right, and ordered from top to bottom in the desired sequence. If you would like to deactivate a filter or an action to test the effects, just remove the checkmark in front of the checkbox. To completely remove an action from the list, select the action and press the Delete key. By dropping an action into the list more than once, you can apply it multiple times to amplify its effect. 202

203 Drop-Shadow We already encountered the Drop-shadow in our discussion of the Clip filters. With this action you can also apply it to pictures that have been personalised using a PicFont, system font or the Picture-in-Picture method. Fig. Settings for the drop-shadow in the DSM_EASTEREGGS motif Inward Shadow The settings window is identical to the one for the drop-shadow. In this case the shadow is case not onto the background by the personalisation, but onto the personalisation itself. Fig. Just as in the Drop-shadow dialog, the offset, intensity, blur and colour can be configured 203

204 Fig. Without drop-shadow and inward shadow Fig. With drop-shadow, without inward shadow Fig. With drop-shadow and inward shadow Emboss Filter The settings for the Emboss filter are also similar to those for the Clip filter, but are somewhat more extensive. Fig. Settings for the Emboss filter We recommend starting with the Standard emboss and Standard relief settings and proceeding from there to fine-tune your results by tweaking the various parameters. Whenever you are not satisfied with the results, try different settings or return to the standard settings. Examples for standard settings. Standard Emboss Emboss +1 Relief Relief

205 An example: Fig. Left with, right without the Emboss filter practice makes perfect Fig. The associated settings for the Emboss filter Mask-Brightness and Blur This action is applied to the mask placed on our personalisation. The settings configured here define whether the mask is to be rendered with a blur and influence its intensity (transparency). For the following example we render the personalisation with a picture of a shaved head. The Apply with picture setting is selected. Fig. The Apply with picture setting Next come the settings for the filters. These settings take some getting used to. When you increase the value for darkening, the mask is rendered darker. The value for brightness must be reduced to brighten the mask. A value of 100 leaves the mask in its original state; a value of -100 brightens it so far that it becomes transparent. 205

206 Fig. The settings for our first attempt Fig. The lettering appears quite clearly 206

207 Let s change the settings slightly to get a softer and more convincing result. Fig. Brightened and with a slight blur Fig. More subtle and more realistic 207

208 Changing Colour Values If you find the colours in your pictures too boring, for instance, the white and yellow daisies, you can use these settings to colour your personalisation. Fig. Daisies with the normal colour settings Fig. More red and green make the daisies look yellower Of course, colouring only affects the areas that are visible under the mask. 208

209 Fig. The result Motion-Blur For the motion-blur you can define how strongly the picture should be blurred and in which direction. Fig. Settings for the motion-blur 209

210 Fig. The result Flipping the Image and the Mask This filter is pretty much self-explanatory. Fig. These two options can be combined The result looks the way we would expect. Fig. Smile flipped horizontally 210

211 WarpTransform Image This filter is ideal for placing a personalisation on a 3D surface like a sphere. Fig. Settings for WarpTransformation Rather than working through all of the single parameters, we advise leaving the Advanced Settings button alone, unless you happen to be a mathematical genius or have an advanced degree in mathematics. The most important settings can be configured using the fields on the left. The percentage values refer to the entire frame you are currently working with. The values in the upper two fields define where the centre of the radial distortion should be located within the frame. A value of 50 / 50 designates the exact centre of each frame. The fields below define how far the radius should extend in the X and Y directions. The entries 50 / 50 will generate a round warping effect only if your frame is square. Fig. WarpTransform applied to Smile HueChanges In contrast to the Change colour values filter, with this action it is possible to actually influence the hue, luminance and saturation of your final personalisation. The best way to start is to click the active blue button that switches the schematic display off and the preview on. 211

212 Fig. Left the original motif, right the preview of the changes Fig. And this is how the result looks Now you can configure your settings and evaluate them right away in preview mode. These functions are probably quite familiar to you already from common image processing software. 212

213 6.2.1 Memory Fig. Overview of the Clipboard actions Working with Clipboard actions (Mem. for memory) allows you to keep working on the mask used for the personalisation while preserving the actual mask unchanged. In this way you can apply various actions to the copied mask before placing the mask back on the workspace. You can copy the mask as often as you want, generating a new instance of your personalisation mask each time. The Clipboard operations are an exception in that they are executed after the Apply actions that render the personalised image. This allows you to influence whether the copied mask is inserted over or under the personalisation. Fig. Personalisation with three additional masks 213

214 Copy the Mask to Mem (Clipboard) This first action is crucial, as it generates the copy of the mask and saves it to the Clipboard. No parameters may be specified for this action. Even before you start thinking about how to adjust your mask using transformations, be sure to perform this initial step. Fig. An example the dark shadows cast on the locomotive by the steam were generated using a copied mask Fig. Looks pretty complicated 214

215 Squeeze and Scale Mem With these settings you can enlarge or shrink the size of your mask on the Clipboard. Fig. Squeezing and scaling The percentage you enter here is the size of your copy as related to the original mask. At a value of 100% the dimensions of the original are maintained; for smaller values the copy is scaled to the corresponding value. Values may not exceed 100%. Fig. Squeezed Mem mask 215

216 Blur Mem Working with this setting should be no problem. Fig. Blur setting Fig. Left with blur, right without. The difference is obvious. Brighten, Darken Mem Brightening values between 100 (mask remains unchanged) and -100 (mask completely bright) are possible; darkening can be performed a maximum of 10 times (the more often darkening is applied, the darker the mask). Fig. Left brightened, right darkened 216

217 Apply Mem This action is the reason why the Clipboard actions can be applied even after the command to render the personalised image. The action Apply Mem stipulates that our copied masks will be rendered. This action must be inserted in the Action List at the end of our Clipboard actions and is thus the closing counterpart to our first Clipboard command, Copy Mask to Mem. The settings for this command define the colour used to fill the copied mask and where it should be placed in your Set. Fig. The Apply Mem dialog In our example the mask is positioned ten pixels to the left and 200 pixels below the original. Fig. The result of our settings 217

218 6.2.2 Actions for Manipulating Masks Fig. Actions for manipulating masks Fill Mask with Alpha Channel Filter This action allows you to apply an alpha channel to your personalization. The alpha channel is a TIFF file containing black and white elements. Our example will illustrate what this means. We select a screenshot from our Task Manager on our Windows operating system as the background picture and create a Text Frame. Our personalization uses a system font. Fig. DirectSmile Set with personalization using a system font Now we need the alpha channel. This channel is identical to the green-black grid of the background picture, except that we use black and white. The file is saved in the Set folder of the open DSM Set. 218

219 Fig. Our alpha channel, saved as the picture Alpha.tif. (Zoomed view) Since we would like to use the alpha channel we just created, we need the action Fill mask with alpha channel filter. As for all other actions, we activate it by dragging and dropping it into the Action List. Make sure that this action is carried out before rendering. Fig. Activated: The Fill mask with alpha channel filter action Double-click on the action so that we can select our alpha channel. 219

220 Fig. Selected file You must click the Go button to display the action. Your result should look similar. By the way, we used the Arial font in our example. Fig. Our DSM Set Task Manager 220

221 Add Texture With this action you can apply a Texture mask to your personalisation. Copy a mask in TIFF format to the Set folder and assign it as a Texture mask. Fig. Example for a Texture mask And this is what it looks like when we apply the above Texture mask to our daisies. Fig. Texture mask applied 221

222 Squeeze and Scale Masks In contrast to the Clipboard version of the function we introduced above, this action scales the personalisation mask itself rather than a copy. Fig. Settings for scaling In opposition to the mask, the personalisation remains in its original size. This means that parts of the personalisation may remain invisible because the mask does not cover the entire area upon which the personalisation is displayed. This action can be used to achieve interesting effects. Fig. Because the mask was reduced in size, not all of the personalisation is visible Copy Mask to Picture No additional settings can be configured for this action. It simply defines our current mask as the picture for personalisation. Copy Picture to Mask & Transform Mask into Greyscales With this action you can turn your personalisation into a mask. This action works best when followed immediately by the Transform Mask into Greyscales action. This allows you to turn a photograph into a mask. Elegant effects can be achieved, especially for Picture-in- Picture personalisations, as we see in our example below. 222

223 Fig. A Picture-in-Picture personalisation Now we transform the picture into a mask and convert the mask into greyscales. Fig. The result 223

224 Masking a Mask And we can even apply another mask to our mask to refine our result even further. Fig. Our mask Fig. Applied to our personalisation 224

225 6.2.3 Surface Effects With surface effects you can manipulate large sections of your picture and parts of your personalisation. Fig. Surface effects Redraw Foreground This action lets you hide part of your personalisation behind an image. For this you can use either the background picture already available, or any other background desired. What is important is the mask, which displays where the foreground should be redrawn. This mask must be saved in the Set folder as a TIFF file. Fig. Left the personalised image, right the foreground mask In the above example the statue already exists in the background picture. The mask tells the DSM Designer which part of the picture it should redraw in the foreground after personalisation. But we can also direct the DSM Designer to draw any other picture in the foreground. Use the lower radio button to ensure that the desired image is included in the Set folder. Then you can select it from the pull-down menu. 225

226 Fig. Settings for the foreground Fig. The foreground is placed over the personalisation 226

227 Fig. How it would look without the foreground mask Note: The Redraw Foreground action should come after the Apply action in the Action List. This ensures that the personalisation will be rendered first and then the foreground drawn on top of it. Mask-Based Shadow For this command, too, the mask is the key component. Again, it must be saved as a TIFF file in the Set folder. Because the shadow is cast on the image after it is personalised, it is important that this action also be added to the Action List after the Apply command. The difference between this action and Redraw Foreground is that the colour or the picture behind the mask fills up the personalisation rather than covering it up. What s more, only the personalisation is affected by this action. The shadow is not drawn on top of the other sections of the picture. A simple example will illustrate what happens. Again, we turn to our daisies. Fig. Left the personalised picture, right the mask for the shadow Once you have selected the mask, specify whether a colour or a picture should be used to cast the shadow. 227

228 Fig. Settings for the mask-based shadow In the result we see that the shadow is cast on the personalisation where the mask was displayed in black. Yet the parts of the picture around the personalisation are not affected. Fig. The mask-based shadow 228

229 Mask-Based Blur The Mask-based blur is based on the same principle. Select a mask, save it in the Set folder and place the action after the Apply command in the Action List. Here you have the additional possibility of applying the blur not just to the personalisation, but to the personalised image as a whole. In our example we use the same mask as in the previous section. Fig. Settings for the Mask-based blur 229

230 Fig. In this example the blur is applied only to the personalisation Fig. In this example the blur is applied to the entire personalised image 230

231 For the Entire Set These actions are displayed whenever no frame is currently active. Fig. Actions for the entire Set We already encountered the first operation for the whole set above, Redraw Foreground. It is identical to the action of the same name for individual frames Actions for Background Pictures Scale Background This action is very useful when you want to output your Set on various media. What is special about this action is that it scales not just the background, but also your personalisation(s) without affecting the original data. If you would like to return to your default size, just delete the action or remove the checkmark from the checkbox preceding it. In the entry window you can specify the size to which the image should be scaled as a percentage of the original size. An entry of 100% means that the image will not be scaled, 50% will produce an image half as high and half as wide that is, one quarter the original size. 231

232 Fig. Scaling the background Rotate Background This action rotates the background picture while maintaining its original size. Rotation does enlarge the size of the workspace. The personalisation rotates along with the background. Fig. Rotating the background picture 232

233 Fig. A rotated background picture 233

234 Background Information By this time you have become acquainted with pretty much the entire range of functions in the DSM Designer. Now it is up to you to decide how to use the countless possibilities. In conclusion we would like to return to more general points and provide some additional information about the meaning of a number of the menu commands we have not discussed. These menu commands are located in the File menu of the DSM Designer. Preferences The File menu of the DSM Designer includes the Preferences command. At present only a few items are available here, but a several more will be added in the future Defining the Grating for Personalisation Frames Here you can define how many grid lines should be created in a newly created text frame. Fig. Presettings for the grating Generating Templates for RGB < = > CMYK Look-Up-Tables If you would like to work with CMYK image data (as a background picture, for instance) or generate CMYK data when you save pictures, the DSM Designer needs what are known as Look-Up-Tables to separate the colours. We will discuss this again in greater detail in section 7.7 (Working with CMYK Data). 234

235 Fig. Generating Look-Up-Tables The template images generated are automatically saved in the Luts folder of the DirectSmile software. 235

236 The Image Cache In the File menu you can configure settings for the internal image cache of the Generator Editor. The way the Image Cache works is very similar to a browser. The more memory you allot to the Image Cache, the faster the Generator can render graphics. Fig. Settings for the Image Cache Sets from Previous Versions If you are updating to the new version of the DirectSmile software from one of the preceding versions, the DSM Designer will ask automatically whether it should convert the Sets it finds on the hard drive to the new version. Do not hesitate to do so, as no information will be lost during conversion. If you would like to open an older Set manually, two options are available in the File menu. 236

237 Fig. Loading a Set from the previous version When you select the Load Version 2.0 Set command, the DSM Designer will display all of the Sets it can find in its Set database. Find the desired Set and open it. When the Set is opened, conversion to the new version will take place automatically. If you exported a version 2.0 Set, thus saving it in a separate folder, use the Load Version 2.0 Set (from File) command. The DSM Designer then analyses all of the components that belong to this Set and converts them if necessary. This includes such components as exported ClipFonts, and PicFonts. Exporting Sets When a Set is exported, all relevant data are saved in a single folder. This includes, of course, background pictures, the masks, the Clips and/or PicFont, and so on. For one thing this makes it much easier to transport the Set data; it also simplifies backups. You can export several Sets at the same time by selecting the desired Sets from the Set Browser. 237

238 Fig. Settings for exporting Sets Scaling Sets To use this function, you must have purchased a corresponding licence from DirectSmile. Otherwise it is not available. Set scaling provides you with a simple way to change any Set to a desirable width, or adjust it to various sizes, so that it can be used later in a mailing or campaign. With this function there is no need to worry about what happens to the original data: the scaling is saved as a copy in the same folder as the original Set. The original data remain complete in their entirety. After scaling you will have a.dset file and, of course, the scaled background picture of the Set. By the way, the original data are ALWAYS used for scaling, even if you rescale a copy that has already been scaled. This ensures the highest possible graphic quality. It is not possible to scale a Set larger than its original and certainly not advisable for good results. 238

239 Fig. Settings for Set scaling The scaling dialog is pretty much self-explanatory. In the upper section, the original size of the Set is displayed at the left (this is only relevant when you are rescaling a Set that has already been scaled); next to this, the current size of the Set to be scaled; displayed at the far right is the size after scaling. A number of default settings can be selected directly by clicking a button; otherwise you must enter your own value in the relevant field. Percentage values always refer to the original size of the Set. The preset values generally provide for the best results. The lower line shows you the name of the scaled version of the background picture. Note In principle, all filters, settings and actions you applied to your Set will be scaled along with it. Nevertheless, we recommend checking the result so that any necessary corrections can be made manually. The Only update copies of picture Option The idea behind this is that you should work with your original data whenever possible and then generate various scaled copies from this original. This option is only available when you want to save a Set with scaling settings that have already been saved. For instance, if you have made a change to the background picture in your original Set, then just open the already scaled version of the Set again. Now the Only update copies of picture option will be active. 239

240 Fig. The option to update only pictures that have already been scaled Your altered background picture is then scaled and added to the Set (which was already scaled). This saves you the trouble of changing your background picture every time you use different scaling. You just make the changes to the original and then click to update the Sets that have already been scaled. Fig. Original and scaled copies in the Set folder Saving Single Pictures Obviously, you must have the opportunity to view your designs in their full glory. This is why there is a way to test-export single pictures that look just as if they had been sent to the printer. It is not possible to link this function to a database. The command is located in the File menu. 240

241 Fig. Saving a single picture The way the next dialog looks depends on whether you are working with a full DirectSmile licence or with a non-commercial DSM Designer version. If the latter is the case, you can export a maximum of 30 single pictures daily. The first thing to do in the Save dialog is select the file format to be exported. The available formats are JPEG, TIFF and PNG. For JPEGs and TIFFs you must also specify whether the RGB or the CMYK colour space should be used (please see the following section on this). For JPEGs you can also define the quality of the saved picture. Fig. Saving a single picture as a JPEG Afterward the program will inform you if applicable how many more individual pictures you are allowed to save on this day. 241

242 Fig. Today the whole contingent is still available Working with CMYK Image Data At many junctures of this manual you have read remarks stating that you must use RGB image data so that DirectSmile can promise a high-quality print result. Indeed, it is still advisable to use RGB data whenever possible, but since the new version of the DSM Designer it is not imperative, although picture personalisation continues to be performed based on RGB. We do not want to get into the subject of colour separation in too much detail; for that we would need a manual at least as long as the one you are reading now. Nevertheless, at the least we want to explain what is possible with the DirectSmile software and what is not. It is perfectly clear that there are critical differences between the RGB and CMYK colour spaces, and also that printouts on paper do not look the same as the images you see on the monitor screen. The first time you attempt to load a background picture saved in CMYK mode, you will probably be alarmed by the following messages: Fig. We don t yet know what a LUT is 242

243 Fig. The DSM Designer cannot read the CMYK picture A similar result occurs the first time you attempt to save a single picture in CMYK mode. In this case the error message looks like the following: Fig. Saving a single picture as CMYK doesn t seem to work What is going on here? For the DSM Designer to be able to work with CMYK data, it needs what are known as Look Up Tables (LUTs), on the basis of which it can determine which RBG colour to convert to which CMYK colour and vice versa. Templates for such Look Up Tables are generated automatically by the DSM Designer whenever you attempt either to load a CMYK background picture or save a single picture (TIFF or JPEG) in CMYK mode. They are then located in the Luts folder of the program folder of the DSM Designer and assigned the names LutCMYK.tif and LutRGB.tif, respectively. 243

244 Fig. RGB Look Up Table template Fig. CMYK Look Up Table template 244

245 What we need now are two Look Up Tables with the following names: LutRGB2CMYK.tif This table converts RGB colours into CMYK colours (needed for exporting single pictures in CMYK mode). LutCMYK2RGB.tif This one converts CMYK colours into RGB colours (needed to use a CMYK background picture). There are two ways to get these files. 1. Load the ready-made separation tables from the DirectSmile web site and install them. Proceed as follows. Go to the Help menu and click to open the DownloadCenter (also accessible using the F1 key). Fig. Opening the DownloadCenter At the upper right of the DownloadCenter the navigation bar includes the Updates item, where the separation tables are available. 245

246 Fig. Loading separation tables from the DownloadCenter After downloading the files, open the root directory of your DSM Designer. There you will find the Downloads folder, and within it the Updates folder. Here are the separation tables as a.dzip file. Fig. The downloaded files Double-click on the zip archives to automatically unzip them and save the separation tables to the right place in the Luts folder. Now you can use any CMYK background picture and save single pictures in CMYK mode. 2. Separate the colours yourself. To do this, use the two templates already contained in your Luts folder. When you open the LutRGB.tif file, for instance, you see that it is saved in RGB mode. The file is a simple compilation of RGB colours. This file now can be converted into CMYK mode using any graphics program that can separate colours. Depending on the circumstances for printing later (the device used, the paper used), apply the corresponding settings (Euroskala, U.S. Sheetfed, etc.) to the file and then save it as CMYK, of course under the name LutRGB2CMYK.tif. If desired, it is no problem to use LZW compression to keep the file small. 246

247 Inversely you can also determine the separation table for CMYK to RGB by opening the LutCMYK.tif file. It is saved as CMYK and, once you have converted to RGB with the desired settings, must be saved in the Luts folder as LUTCMYK2RGB.tif. The solution is actually quite simple: Conversion is required mainly for the process of working in the DSM Designer, and that we definitely need to do. But why shouldn t we resort to the already existing CMYK data for printing? In the final image rendering, the program ensures that the original CMYK data are preserved. Personalisations are separated to CMYK using the LUT. 247

248 DirectSmile Animation What Can DirectSmile Animation do? The DirectSmile Animation tool is part of the DirectSmile Designer, a tool you already know well. Although many of the job steps are already familiar, you will need to prepare yourself for something completely new: Moving images, or more precisely, moving personalized images. What the DirectSmile software previously offered only for print is now possible for the screen as well. Now e- mail messages and entire Web sites can be personalised, not ony with static images, but also with animations. What Web site visitors always found irritating namely the advertising banners suddenly becomes a tremendously eye-catching highlight. After all, who can resist reading his own name? What is NOT in this manual In the course of the manual I would like to restrict my discussion to the functions which are specific to DirectSmile Animation. Therefore I will be dealing almost exclusively with the Animation palette and its operation. Effects, filters and the like will be used in the examples without any further explanation. Their use is described in detail in the DirectSmile Designer manual and valid for DirectSmile Animation as well. So should any questions on such features arise, please consult the corresponding sections of the DSM Designer manual. Otherwise the only assumption I make is that you have already become well acquainted with the possibilities of personalisation and the DirectSmile software and I m sure that s the case. 248

249 Three Tips before Starting As I said: the procedures used in the DirectSmile Animation are considerably different from the usual ways of proceeding with the DSM Designer. If you have any experience with Web design and advertising banners in the Internet, you can certainly appreciate the fact that little effort is spent on steps like fair drafting, imposition, proofing, press proofs, printing exporting GIF animations for and the Internet is straightforward and managed without much ado. But you will need the energy you save here: Good creation and animation are the decisive criteria for successful work, and this takes significantly more time than the graphic design of a postcard. Before starting I would like make three heartfelt recommendations: 1. Decide in advance how the final animation should look. Go ahead and prepare all of the graphic elements and save them as a Set in the DirectSmile Designer, but before you begin with the animation itself, make a storyboard or at least pencil drawings as drafts, especially if you are not a truly experienced animator. This will save you a great deal of pushing graphics around, and a lot of cursing; there is enough fine-tuning at the end as it as, so it s better to know from the start more or less where you want to end up. 2. Do not take on too much. Seriously: 3D-views of Spiderman, swinging through urban canyons, spinning your name with his web while in pursuit of two bank robbers: the idea is OK, as long as you own the attendant patent rights to Spiderman, and will make a mighty impression. Yet the crux of the matter is that you will go insane trying to implement it, so that the animation will not be finished before the ski slopes open in hell (at the earliest). This is not because you lack creativity or skill, but a simple function of DirectSmile Animation s (as yet) limited possiblities. The first version of our animation tool is not up to the task of churning out big-time animation excitement. Start gradually, relying more on the power of the personalisation the excitement will come soon, we promise. 3. Forget the Layers palette. Here is where all of the keyframes (the explanation of this term follows in the next chapters) used in your animation are saved. It looks pretty unmanageable all the more so when more elaborate animations are created. But there is good news: You do not need to use this palate at all in your work with DirectSmile Animation. How DirectSmile Animation Works Anyone who knows his way around animations for the Internet can read this short summary of what is behind DirectSmile Animation and then skip the rest of this section: The interface and procedures are a combination of Adobe ImageReady and Macromedia Flash admittedly, with less powerful tools. However, in the end exclusively GIF animations or single images are exported. And now the whole story in more detail: In contrast to print data, for animations it is best to use 72 dpi. Therefore you should not create an animation on the basis of a Set you already used to print postcards. You can use the same motif, of course, but save it with a lower resolution, otherwise the exported GIF will be simply too large to work with. GIF (Compuserve Graphics Interchange Format) is a very common graphics format, especially in the Internet. It can be displayed by all Web browsers (excluding pure text browsers, of course) and offers the wonderful advantage that it can be animated at a relatively small file size. The main way this file size is kept small is through the reduction of colours to a maximum of 256. The animation is produced by displaying a sequence of individual pictures, although not necessarily at a constant speed. We can define how long each individual picture should be displayed. Now on to the procedures for animating. 249

250 Working with DirectSmile Animation The procedures start in the familiar way. Start the DirectSmile Designer and create a new Set with a new background image. The example I will work with to illustrate the procedure has a standard full-banner format of 468x60 pixels. You will run into this format everywhere in the Internet, even though many other special formats have been created in the meantime. For your background image you are welcome to use a TIFF, as is standard for print motifs ultimately, this will have no effect on the animated GIFs, although it is a relatively large file format (in terms of KB). Fig Opening the DirectSmile Designer Because the very nature of animations makes it difficult to show live examples in a printed manual, I will occasionally insert entire sequences of images to give you a better idea of what the individual steps of the animation process look like. Open the Animation palette by pressing CTRL + Shift + A or the Animation Timebar in the Window menu. Fig. Opening DirectSmile Animation 250

251 Interface As you see: This is the work environment you are so familiar with, but with one additional palette. Therefore it is sufficient for us to address only the settings options in the Animation palette: In the following sections we go into detail about what the individual functions mean, and, above all, what they can do. 1. Opens the Settings palette for GIF Export 2. Saves an animated GIF 3. Displays a preview of your animation 4. Name of the layer whose progress is displayed at right 5. The frame that is currently selected and displayed is marked in red 6. Inserts a new empty frame behind the selected one 7. Copies the selected frame and inserts it behind the selected one. This is the function for copying keyframes 8. Deletes the selected frame 9. Switches the onion skin effect on/off 10. Moves the selected frame to the left or right in the animation 11. The key icon indicates that this image is a keyframe 12. Frames without an icon cannot be edited directly. They are the rendered animation steps between two keyframes 13. Indicates how long the frame will be displayed during the animation You probably understood most of this already; only the concepts of keyframe and onion skin effect are probably not so familiar if you have never worked with animations before. But that will become clear presently. There is one other thing I would like to bring to your attention, which you have never seen before in your work with DirectSmile software. It is a new trifle in the Direction palette: 251

252 Fig. When the lock is open the text frame is personalised as always Fig. When the lock is closed, the personalisation has been converted to a fixed text For animation, too, you wiill want to personalise as much as possible to impress your customers. However, it can look pretty absurd and artificial if you integrate the first name into absolutely every text sequence of an animation. This is why you will also need non-personalised text. The Direction palette in its previous form did not allow this, but thanks to the small lock, it does now. As soon as you close the lock, the text in the corresponding frame will not be personalised, but displayed to every user as a fixed text element. The Príncipes of Animation As I said above, in principle an animation is nothing more than a sequence of pictures. One is shown after the other, creating the impression that something is moving. I prepared a miniature sequence in which a personalised text frame moves through the picture from left to right: Fig. Smile from left to right 252

253 We distinguish two different kinds of pictures: there are keyframes and tweens, and the difference is easily explained: keyframes can be edited and configured as we wish, and tweens cannot. For the animation above I created just two keyframes, the first and the last. The other four are tweens, which were rendered automatically by the software. If you compare the two figures below, this becomes very clear. In the keyframe you see the text frame as usual. You can transform it, apply effects, etc. In the figure below, by contrast, the text frame is not displayed at all, only its contents. This is a tween. Fig. A keyframe on the workspace Fig. An automatically rendered tween 253

254 9.2.1 Frame-for-Frame Classic cartoons or flip-books (are they still around? oh yes, DirectSmile Software is also a great tool for this) are the best examples of frame-for-frame animation. This means simply that every picture is drawn separately and completely.the very nature of frame-for-frame animation means that, on the one hand, it offers the greatest creative freedom; on the other, it also entails the most work to create every single frame of an animation by hand and leave nothing up to the software. In our case a frame-for-frame animation would mean simply stringing a series of keyframes together. As soon as you open the Animation palette your first text frame is displayed in the first frame of the upper channel of the Animation palette. This is your first keyframe; at least two are required for every animation otherwise nothing can be animated. Keyframe means that the software takes note of all coordinates and settings of the text frame at this position. Fig. First keyframe Every text frame here has its own keyframe, i.e. when you create two text frames and then open the Animation palette, under the key icon in Channel 0 a further key icon appears in Channel 1, which is then generated automatically Adding Keyframes Like I said: We need at least two keyframes to generate an animation. Fig. Copying a keyframe A click on the second button from left on the very bottom of the palette copies the keyframe for you and inserts this new frame directly after the selected one. If you click the same button on a tween, a further tween will be inserted. The button thus has a dual function: Insert Frame, and Copy Frame If Keyframe. You can also copy keyframes by holding down the Control key (CTRL) and clicking the key icon, and then either dragging it into the empty channel below or onto an empty frame in the same channel. The small plus sign next to the mouse cursor indicates that the frame is being copied. Move the point of the mouse cursor directly onto the channel line until a yellow marking appears; then the keyframe is copied into this frame. If you do not press the control key (CTRL), the frame will be moved rather than copied. 254

255 Fig. The first keyframe Fig. The second keyframe an exact copy Fig. The first keyframe from Channel 0 is copied to the yellow marking in Channel 1 while holding down the CTRL key And because this is so simple, we add another, third keyframe using the same button. Now these keyframes are absolutely independent of each other, meaning that we can move the text frame in each individual frame without affecting the other two frames. So let us play around a little. In the first frame we push the text frame to the far left, in the middle one we leave it where it is, and in the third frame we push it to the far right. 255

256 Fig. At the far left in the first frame Fig. Then in the middle Fig. And at the far right in the final frame That was simple: Our first frame-for-frame animation is finished. When you click on the Preview, the single frames are displayed over and over at high speed, one after the other. The position of a text frame is only one factor we can change from one keyframe to the next, of course. We can also change the color, scale the frame, and reduce opacity anything we want. But clearly: The animation we created here is not going to wow anybody. The leap from one frame to the next is so great that anyone can recognize the individual frames and would barely perceive the sequence as an animation. Therefore we need more frames to generate a smoother sequence and the illusion of movement. So we mark the third frame again and copy it. Then we shift the text frame in the original frame slightly to the left, and the text frame in the new one slightly to the right. 256

257 This should give you a good idea of the difficulties involved in frame-for-frame animation: Suddenly the text frame no longer moves smoothly from left to right. You have to look at each of the frames over and over, shifting one text frame slightly to the left or right no, not that much and then a bit back in the other direction, until everything fits. Time for the software to take over part of the work and render frames for us automatically Tweening Tweening is the term for rendering frames between two keyframes. For the moment let us stick with our example of four frames and the Smile wandering from left to right. We just saw that it gets somewhat more difficult if we decide to determine every intermediate step ourselves. Ultimately the only thing we care about is that the Smile moves from left to right and that this looks more or less smooth. To make a long story short, we do not need the two keyframes between the first and the last frame. It is sufficient to define the first and last frames as the start and end positions, respectively. We can have the rest rendered for us automatically. Fig. Keyframe It is easy to transform keyframes into tweens: all we have to do is delete the text frame in the corresponding frame. Either click on it directly in the corresponding frame, or click the key icon. Then press the Delete key. Fig. The keyframes have been transformed into tweens The last step is to specify that we would like to perform tweening between the two keyframes; otherwise the frame would simply remain empty. Click with the right mouse button on either the previous or the subsequent key icon and select the Tweening option. 257

258 Fig. Configuring tweening Three things are important to keep in mind about tweening: 1. When you configure Tweening, this setting is valid for the complete channel no matter how many keyframes are located in this channel. DirectSmile Animation then renders each tween from one keyframe to the next. 2. Tweening is only possible when there is at least one frame between a keyframe and the next (otherwise the animation is frame-for-frame). The more tweens inserted between keyframes, the smoother the animation will look. 3. If you insert a new keyframe or move frames within a tweening, you must configure the Tweening option again for the changes to be displayed correctly. If you click the Preview button now, DirectSmile will first render the tweens and then show the animation. Fig. The sequence in the overview, beginning and ending with a keyframe In this example the software divided the text frame s path from left to right into a series of equal steps. Obviously, the movement from frame to frame depends on the number of tweens we inserted. 258

259 Fig. The same keyframes, this time with four tweens The more frames there are, the smaller the changes from one to the next, and the better the animation usually looks but this also makes animations larger (in KB). Settings for Tweening The even distribution of tweens is not a necessity. We may want to create an animation that looks as if the text frame takes off and then gradually hits the brakes before reaching its end position, or, vice versa, start off slowly and then accelerate to top speed. Instead of showing you this in another sequence, I have compressed it into a single figure. You can take a look yourself by clicking several frames at the same time. Hold down the SHIFT key while clicking one frame after the other the selected frames will then be marked in yellow. And that is pretty much the whole secret of the onion skin effect, which we will discuss in more detail in section 2.6. For the example I moved the text frames slightly outward in the keyframes and inserted three tweens. Fig. This is five frames in one. It is good to see that the animation runs evenly 259

260 9.3.1 Acceleration and Slowing Down To make it look as if our text frame accelerates or slows down, the DirectSmile software simply renders the distribution of the tweens slightly differently. Fig. Acceleration When you click on one of the key icons with the right mouse button here again, it does not matter which one, because the settings for acceleration and braking are also valid for the entire channel you can specify how strong the effect should be. The settings of 3 and -3 are the most intensive. For braking, the concentration of text frames becomes greater toward the end of the movement. In a running animation this then looks as if the text frame starts moving fast and then reduces its speed. Fig. Slowing down (value: -1) Fig. Slowing down (value: -3) Inversely, acceleration is represented by a movement that is slow at first and then picks up speed. 260

261 9.3.2 Tweening before Running When you configure settings for features like acceleration/braking and then start the animation by clicking the Run button, the animation will be re-rendered first, as long as this option is enabled (which it is by default). The computer has a little bit more to do in this case, of course, and needs a certain amount of time before all frames are re-rendered, but as a reward you can see in advance exactly how your animation will be stored later. Fig. Tween before Running If you have worked with DirectSmile Designer for a while now, you may be familiar with the Suppress Realtime Preview option. Disabling the Tween before Running option has more or less the same effect for the Animation palette. Timing Regardless of whether it is a tween or a keyframe: You have the possibility of defining exactly how long every single frame will be displayed. You probably discovered this setting already. Fig. Determining how long a frame should be shown Just click on the time value under the corresponding frame. In the popup menu we have predefined a number of standard values, but it also possible to enter a value of your own. 261

262 A value of 0.0 seconds does not really exist. It means that the animation will show this frame at the fastest speed possible before proceeding to the next one. The frame is not forgotten. How long or short the frame is actually shown depends on the computer on which the animation is running. Often you may want to have single frames displayed for two, three seconds or even longer, for instance, if you have integrated a long sentence or longer texts into your animation. Then you have to give your audience enough time to read the text. Correct timing is something you have to practice if you use Adobe Image Ready, you probably have this down already until the animation looks snappy. It ia good idea to leave texts on the screen somewhat longer. If you have been working on your design for hours, obviously you know the text so well that you never have to read it. This is why there is a tendency toward having text sequences disappear a little too soon. Animation Channels Up to this point we have restricted our discussion to a single text frame in a single channel. Now we would like to take a look at what happens when we animate multiple objects, one after the other or simultaneously. As soon as we create a second text frame, an additional channel appears with a new keyframe. This new channel is completely independent from the first. You can move, transform and animate its contents without affecting the first channel at all. This means it is not possible to perform tweening across multiple channels. Tweening is valid for only one single channel. Fig. A new channel Generating New Channels In principle, the channels are managed automatically by the DirectSmile software. As soon as a new channel is added, it is displayed in the channel overview; nevertheless the channel below it remains empty and unused. There are several ways to generate a new channel. The easiest is the one we just described: We simply pull open a new text frame, and we have a new layer. Alternatively, there are two other possibilities: Either moving a keyframe from one channel into the empty one below, or copying it there. To move the frame, just click the key icon of the desired frame and keep the mouse button pressed to drag it to the empty (or, of course, any other) channel. To copy a frame, just keep the Control (CTRL) key pressed the whole time. Please note: When you move a frame you may damage your animation in the channel from which you have removed the keyframe. This frame is missing there now, and, as mentioned above, tweenings are only possible within a single channel. 262

263 9.5.2 Managing Animation Channels The more channels you use, the more important it is to keep track of everything. Working on elaborate animations with many moving objects can get very complicated in no time at all. So it is best to keep your work organized from the very beginning so that you can pick up an animation days or even weeks later, with its channels numbered neatly from 1 through 20. ;-) Fig. Editing a channel name Click on the channel name to open a small menu that is pretty much self-explanatory. Only the option Generate Movie Background Channel requires any more detailed explanation. We will turn to this in the next section but one. The order of the channels can also be changed here; the top channel is the one that will be shown on top in the animation, too. This is important if you would like to animate texts and objects that overlap each other. Onion Skins I encountered onion skinning for the first time in Macromedia Flash, and at that time there were around fifteen billion forum entries in the Internet dealing with this topic. The problem was that the idea of a function like this was relatively new back then, and hardly anyone really understood how it could be used and what for (including myself). To top it all off, Flash was not terribly reliable about executing what the user wanted. From the next version one, however, it turned out that working with onion skins was tremendously practical, and since then nobody can live without it. But perhaps it is time to get to the point and explain what these onion skins are after all, it s not all that spectacular. 263

264 Fig. The mess could hardly get worse: All onion skins visible Editing in onion-skin mode is enabled by clicking the yellow button in the lower bar of the Animation palette. Use the button to the right to disable it again. As long as this mode is enabled, all of the frames in the animation bar are marked in yellow. The trick with the onion skin goes like this: We see all frames of the animation at the same time in one view, and can use it to edit one, several, or all keyframes. This is very practical, for example, if we just want to move an entire animation slightly to the right. With onion-skin mode enabled, we can click all of the keyframes involved, one after the other, while holding down the SHIFT key. Now we can move all frames at the same time. Fig. All keyframes selected on all channels I doubt there is any need to explain why it is so enormously practical to be able to see and edit everything in one view 264

265 Text Frame with Fixed Contents Text frames are usually filled dynamically with values from our Job database; after all, that is the whole point of automating personalisation. Using the Direction palette we can also enter a fixed text to be shown somewhere outside of the personalisation (usually right before or after). For print media like postcards this is completely sufficient. Fig. The Directions palette: personalised text Of course, this looks somewhat different for animations. Here we can integrate multiple text frames, which we can show one after the other in various sequences of the animation as many as we wish. For a fixed text, just open a new frame and click on the small lock in the Directions palette. Fig. Fixed text, as soon as the lock has been closed Now the text frame is completely independent in terms of its contents. If you would like to create additional text frames and fill these with other fixed texts, this will have no effect on the already existing fixed-text frames. Fig. Example with one fixed and one personalised text frame Fig. This time fo Mike 265

266 Exporting GIF Files and single files Now you know almost all of the functions that DirectSmile Animation has to offer. The only thing we still need to know is how to export the animation so that every user can see it on his own screen. Then we will turn to one more little extra we built into the software, and finally we will take a look at how to achieve some interesting effects Exportable Formats The animated GIF is the format you will probably use most often. After all, this is what we created our animation for. But it is also possible to export a series of TIFF frames or JPEGs, in case you wish to continue working on individual images. Fig. The graphics formats available for export After the Save button is clicked, the usual dialog appears. In the lower pull-down menu you can select which graphics format should be used for the export. You probably know yourself what you would like to do with the exported files. If you would like to see your animation right away, select the animated GIF. As mentioned above, animated GIFs can represent a maximum of 256 colours. For this reason there is also the possibility of exporting a series in JPEG or TIFF format. These graphics formats are not restricted in terms of colours and may be suitable in situations in which you would like to render a photo-realistic motif with many colours in high quality. In this case you could load the individual JPEGs or TIFFs into a different graphics program and export from there (e.g. in Windows Media format or as a Quicktime film). Then you would end up with a proper personalised film. We will deal with the subject more in the next chapter. Fig. Setting the frame width Once you have decided on a format, the software queries how large (in pixels) the animation s export file should be. The default value here is 0, meaning that the exported data will have exactly the frame size you defined with your background image. If you would like to reduce the size of your frame (enlargement is not generally recommended; depending on the scaling the image quality can suffer tremendously!), enter in pixels how wide the export format should be. The height is re-rendered automatically, so that the proportions of your animation are maintained in any case. 266

267 9.8.2 Settings for GIF Export For export as an animated GIF there are two further settings you can enable by clicking the Settings button in the Animation palette. Fig. Opening the Settings You can restrict the maximum number of colours in a GIF to even fewer than 256. This has the effect of further reducing the size of the exported files. Fig. A frame with 25 colours Take a look at the figure above. This shows 25 different strips of colour. If you would like, you could try to have the same frame rendered in a GIF with only 16 colours. Of course, some quality will be lost in this case, but sometimes it can reduce the file size so considerably that it is worth the trade-off. Fig. The same motif using only 16 colours Here we see what happens when the frame is exported with only 16 colours: The software attempts to achieve a result that at least approaches the original. Sixteen of the 25 colours are selected, and the strips that cannot be rendered in full colour are represented using dithering, which means that points of different colours are displayed together in the same area. The further you move away from the screen, the less visible the single points become and the greater the impression of areas with uniform colour. You will have to play around a bit with the colour settings until you find the ideal one for your motif. Fig. Settings for export as an animated GIF 267

268 The Lossy factor is used for a very similar purpose: it can be used to reduce the file size at the cost of quality. Lossy comes from the word loss, and amounts to more or less the same thing as inaccuracy. Normally a GIF notices the position in every image line where a colour begins and ends. The higher the lossy factor, the sloppier and, of course, smaller the GIF becomes. Here, too, it is up to you to play: How much lossy can your motif handle without looking bad? That is the question. Fig. High lossy factor Creating and Using a Movie Background Channel This is the final funciton you have not encountered yet, and I saved it for last because what we learned in the previous sections will be useful here. For it is not only possible to export an animation as single frames, but also to import these frames before creating the animation. Thus if you already have a completed Quicktime film, you can divide it into single frames, import it to DirectSmile Animation, personalise it, re-export it as single frames, and then put these frames back together in Quicktime. In short: Personalised moving pictures in very high quality, like the ones we know from television (where they are not personalised, however). So how do we do this? The prerequisite is a film divided into single frames. The frames of the film must be located in your Set folder and numbered after the file name. When you create a new Set, simply select the first frame of your film sequence as the background image. Fig. Numbered single frames of a film in the Set folder No other frames should be located in your Set folder; otherwise the software may not be able to determine which should be imported as background material. As soon as the new Set is opened and the Animation palette is active, click on the channel name of the first channel and select the Create Movie Background channel option. DirectSmile Animation automatically searches in the Set folder for frames that are suitable and loads the ones it finds. 268

269 Fig. Creating a Movie Background channel What results from this is an extra channel, which is easy to recognize by its filmstrip icons. Fig. The Movie Background channel with the imported single frames Now you can work as usual against the background of the imported film, keeping one thing in mind: It is a good idea not to create any empty keyframes or tweens. If your animation suddenly has one frame more than your loaded film, you suddenly face the question of how to fill this additional frame. In such a case DirectSmile Animation elects to place the first frame of your film sequence once more at the end. This means your background film starts again behind the final frames and that is almost certainly not the effect you are aiming for. 269

270 Tips and Tricks As you saw in the previous sections: I really did limit my discussion to the most rudimentary examples. On the one hand, in the scope of this manual I cannot explain what good animation should look like (especially since at some point this becomes a matter of taste); on the other, my first priority was to acquaint you with the functions of the Animation palette. In this section I will focus on a number of minor details you may run across in your work, and show you a number of examples of how to implement DirectSmile Animation most effectively. Usually what is most complicated is to comprehend and apply all of the possibilities the Designer offers in combination with the Animation palette. That is one of the main purposes of this chapter, along with tips about things you are better off not trying to do with DirectSmile Animation. Using Effects and Actions You already know the two palettes Effects and Actions from your work with the DirectSmile Designer. For work with DirectSmile Animation one difference between these two is especially important. Effects can be tweened, actions cannot. Further, you should keep in mind that applied actions are not visible in the preview; the first time they can be viewed is in the exported version of your animation. Fig. Left the Actions palette, right the Effects palette Now let us take a look at what this really means. Take a simple example: You want to fade in a layer, i.e. at the start of tweening this layer has an opacity of 0% and at the end one of 100%. Fig. First keyframe Fig. A tween Fig. Final keyframe opacity = 0% opacity = 40 % opacity = 100% 270

271 In this description the most important rule for the successful tweening of effects becomes apparent: The software must know both the start condition and the end condition of the tweening. For an effect to be tweened correctly, the desired effect must be at least enabled in both the first and the final keyframes of the tweening. This may not be relevant for opacity, as this is one of the General Effects that are always enabled, but it is important for many other effects. Take the much-beloved drop-shadow. How do we configure a drop-shadow to grow in one of our layers? Fig. This is how the end of our tweening should look To do this, we enable the drop-shadow in the final keyframe and configure the settings to achieve the desired effect. Usually we would presume that our work here is complete: We have no drop-shadow in our first keyframe, and now we have one in the final frame. It has to grow, right? No, it doesn t. In the first keyframe we have to define that we would like to have a drop-shadow, but make it invisible there. 271

272 Fig. The correct settings for the drop-shadow in the first keyframe And now our animation looks right: Fig. The increasing drop-shadow And that is pretty much everything you need to know about the use of effects and their tweening. By the way, all of the effects you know from the Designer can be applied in the usual way. The same is true for working with actions, but here you must keep in mind that the settings really only have an effect on the keyframe for which they have been defined. It is not possible to tween actions. Transformations Work with the transformation grids is subject to exactly the same rules as working with effects: The start position and the end position must be specificied expressly. Only changes in the size of the (red) text frame are like the general effects tweened automatically. If you would like to use the (yellow) Clip Transformation grid or the (blue) Pixel Transformation grid for a tweening, you must perform a minimal transformation in the first keyframe so that the software can render the intermediate steps up to the end keyframe. Fig. In the first keyframe the transformation is so minimal that it cannot be detected. 272

273 Fig. Nicely tweened intermediate frames up to the final keyframe Rotating Objects Even though a rotation is one of the transformations, just like warping or twisting, this topic deserves a little section of its own. There is a special peculiarity to heed for rotation. The DirectSmile-Software searches for the shortest path between two keyframes and follows this in the intermediate frames. And what is the shortest path when a text frame is rotated 360 degrees around its own centre? Obviously, there is no path at all, because the frame looks exactly the same after rotation as it did before. So the DirectSmile software does absolutely nothing. In order to configure a rotation the way we want it to look, we have to fool the software, by inserting keyframes to force it to do as we wish. In principle, what was true in the two previous sections is valid here as well: the beginning condition must be defined such that the tweening is performed correctly up to the end condition. To rotate a frame, start in by rotating the transformation grid slightly the first keyframe. Halfhalf or even ae quarter of a degree is sufficient. Fig. Minimally rotated frame in the first keyframe The first important point is the 90-degree rotation. As soon as we have crossed this threshold, the transformation through the centre is shorter than the rotation, so the software would choose this path, too. So we have no choice but to restrict ourselves to the 90-degree angle in the next frame. 273

274 Fig. The next keyframe; not quite 90 degrees Try out what happens if you move beyond 90 degrees. From this point on we will work our way forward in almost-90-degree steps. The figure below shows the next keyframe, and you can figure out what the one after it must look like. Fig. Third keyframe: almost 180 degrees Ultimately there is no other way: For a complete 360-degree rotation we need at least five keyframes, the first and last of which look the same. Animating Frame Objects using Picture in Picture Up to now we have restricted ourselves to frames that contain only text, sometimes personalised, sometimes not. But what about graphic objects, for instance, if you want to have a car drive through the picture? No problem: we simply work as if we wanted to personalise using the Picture-in-Picture method. Fig. The graphic object we would like to use I prepared a little picture we would like to use in an animation now. It is a section of an ellipse in front of a transparent background. First we create a new frame and then set the personalisation to Picture-in-Picture. Now we open the Picture-in-Picture work palette the rest you already know. 274

275 Fig. Opening the Picture-in Picture palette We select a test graphic and a mask file, if needed in our case this is a TIFF with one alpha channel and our object is ready. Of course, we can treat this text frame (which is actually a picture frame now) just like any other frame. Fig. The Picture-in-Picture work palette By the way, there is no need to worry about the assignment later. For picture-in-picture personalisations the test graphic is output automatically until a different assignment is made. The two figures below show how the integrated graphic object in the animation slides underneath the personalised text. 275

276 Fig. The graphic object in the animation Multi-Line Text You know this function from working with the DirectSmile Designer. This tool allows you to break a text into two lines if it gets too long. To keep this brief: Please avoid multi-line texts when working with DirectSmile Animation! The text frame management becomes so complex with multi-line texts that the result will not fulfil your expectations. Please be patient and wait for the next version of DirectSmile Animation. Drawing Part of a Clip-Font Personalisation In our final section we will look at yet another little function we did our best to hide. On the other hand, I have to say that this function really does belong where we put it, namely in the Advanced Settings for Clips palette. Fig. Opening the Advanced Clip Settings Of course, this also means that this function is only available when you are personalising using a Clip font. 276

277 Fig. Set partial drawing Partial drawing means that only a certain percent of the Clips is drawn, in the direction of writing from front to back. Fig. Partial drawing of 40 percent A classic application of partial drawing would be a hand writing a name as it moves across the paper. In the upper drawing I stuck with the daisies, because you are so well acquainted with them already. Summa summarum, I hope these final sections gave you a few ideas of all of the things you can do with DirectSmile Animation. I can only recommend that you keep trying out new ideas and tweak the settings until you are satisfied. Your clientele will certainly appreciate it! 277