NOTE: This document does not describe the process of creating artwork in general. It is beyond the scope of this document. Use of the image templating system implies that you have the ability to create custom artwork already and this is simply an extension to those abilities.
Contents |
The new system utilizes SVG images as its template image format. SVG images are XML files with a structure defined by the World Wide Web Consortium. The official documentation for the SVG specifications can be found at http://www.w3.org/TR/SVG/
Although most SVG editors will allow you to embed and use GIF images in SVGs this is not strictly complaint with the SVG specification. The current implementation of the system only supports features that are strictly compliant with the SVG specification. Due to this, any images embedded into SVGs must be embedded as a PNG, Jpeg, or TIFF file. PNG and Jpeg are the prefered formats. jpegs should be used for photos or any other images where a small loss of quality is acceptable. PNG images should be used for things such as logos or other artwork where quality loss is not acceptable, but ONLY if the artwork is not available as an SVG or as another vector drawing format which can be converted to SVG!
SVG stands for Scalable Vector Graphics. Because the images are based on shapes, lines and other simple mathmatical formulas, images can be scaled (resized), rotated, transformed (aspect ratio changed) and manipulated in other ways without reducing the original quality of the image. SVG are very similure to Adobe Flash, with the exception that the SVG standard does not include native support for audio. Most other functionality of Flash can however be duplicated in SVG. SVG has native support for animation and scripting.
The image processing sub-system used in the LetterMark.NET system is powered by the Digital Graphics Server ( Refered to as DGS from now on ), a image repurposing server we have developed internally to replace the Macromedia Generator and Adobe Graphics Server products currently used for the existing LetterMark system.
The Macromedia Generator software has been discontinued and as such it can no longer be purchased. This means that unless someone already owns a copy of the Macromedia Generator software, they can not use Flash to create images for the existing system. Also, the extension that is required to create Generator compatible templates for the Flash editors does not work with the current release of the Flash editors, meaning that it is also impossible to purchase the editting software required to create Flash based images.
Likewise, the Adobe Graphics Server ( AGS ) product is appearently no longer in development by Adobe [1]. This product depends on propritary image formats from Adobe. Adobe has not publically stated that they are discontinuing the product, however many users have asked if they are continuing to support the software on the Adobe forums, to which Adobe has not responded. AGS has not been updated to be compatible with the latest editors from Adobe such as Photoshop, Illustrator, or Acrobat. Since it has not been updated to support software that was released 3 years ago, it seems that AGS is not the best product to use for our purposes as it may disappear at any time.
The image processing sub-system of LetterMark.NET uses the DGS server software to convert SVG image templates into a format compatible with typical email clients. Unfortunately at this time, only a few email clients natively support SVG images, so the system turns the SVG template into a static rasterized image file that most appropriately fits for the template image. That means that most images on the system will be sent to the client in the form of PNG images, however the system may also output the image as a JPEG or as a GIF. The output format is controlled automatically by the image processing subsystem and is not something that the designer needs to be concerned with. When the templating subsystem creates the template to be used for sending messages, it automatically substitutes the proper image url, including file type, into the template and the designer does not have to be concerned with the format used.
The DGS currently supports almost the entire SVG 1.1 standard, as well as portions of the SVG 1.2 standard with the important features noted below. Currently the DGS system uses Batik 1.7 to handle SVG rasterization, and as such supports its feature set. For a more complete feature status, please visit: http://xmlgraphics.apache.org/batik/#spec
Since the output image is always a rasterized image, some features which are part of the SVG format are not supported. These features include:
In most cases, the DGS server will have a copy of the font used in your image template so rendering will go generally as expected. However there will be cases where a font is used that does not exist on the server. When the server encounters a block of text which uses a font that is unknown to it, it will perform a font substitution for the closest match the server can come up with. This substitution will almost always be wrong.
Also, due to the fact that font rendering is somewhat system dependant, and varies across not only operating systems but also based on some difference in the computer hardware itself the font may render differently even if the same font is available on the server.
SVG has the capability to embed fonts in the SVG file itself. These embedded fonts are not dependent on the server in any way and should always render the same regardless of the software or hardware involved. Software such as Adobe Illustrator is capable of embedding fonts into the SVG file when saving to an SVG, it also properly handles checking to see if the font is allowed to be embedded into the image, to ensure you create a file that does not violate the font creators wishs.
When embedding fonts it is important that you embed ALL glyphs (characters) included in the font. If you only embed the glyphs used, it is likely when the server processes the image that it will come across characters in a users profile which are not used in the template image itself. By embedded all glyphs associated with the font, you ensure that the server has the ability to render the text properly regardless of what is found in a given user profile.
An unfortunate side effect of embedding fonts is that image processing takes considerably longer for documents with fonts embedded directly in them. The more fonts used, the worse the problem gets as each font contains possibly thousands of glyphs. In order to work around this problem, when the image template is uploaded, the LetterMark.NET system in conjunction with DGS will scan the fonts embedded in the template image and remove those that are already on the system and are an exact match, glyph for glyph.
The end result of this is that there is very little reason not to embed the fonts in the image. So, always embed your fonts, its just easier and safer all around to do so.
Template images may be created with most tools that will output a standard compliant SVG document. The following tools are known to work with the LetterMark.NET system:
Wikipedia contains a more widely referenced list of SVG Software and SVG Editors that may be useful.
Keep in mind that the SVG format is a vector format. You should avoid placing bitmap images into the template image at all costs. Bitmap style images (png, jpg, bmp and tif) do not scale, rotate or resize well. They also put a considerably higher load on the server than vector shapes. Most logos are simple to create using standard shapes such as rectagles, triangles, circles and ellipses. In many cases company logos start out in this format and should remain in that format. When creating a new image, always try to use the original vector graphics to maintain the highest quality output. This is extremely important as in the future other features may require higher quality rasterized images than currently used and vector based graphics can have their output resolution changed without any quality loss. One feature that has not yet been implemented but will likely be in the future is the ability to obtain a PDF of a template. This will allow our customers to download a copy of a template which can be provided to a printer to be used as the companies or users LetterHead, or a copy of the users card graphic may be downloaded as a pdf to provide to a printer for business cards. Adding this functionality will provide smaller businesses without their own design teams a way to obtain consistent high quality marketing materials with little extra effort and may be a valuable selling point to some organizations. If bitmap images are used in the template images, the resulting PDF output will be considerably lower in quality and likely not acceptable for print work.
For example, the graphics currently in the new system for RTS are composed entirely of vector graphics except for the use of photos. This includes all of the tabs on the card image, all of the text in all of the images, and the logos used for both LetterMark and RTS in all images. Because of this, it is very easy to generate a set of PDFs which can be sent to a printer when business cards are needed, and we do not need to make custom business cards for each person in the company, the LetterMark.NET system can do it for us!
The most important feature of the template image is the variable replacement system. When the LetterMark.NET system prepares an image for viewing, one of the steps it takes is to replace variables in the template image with the data represented by that variable for the user the image is being generated for. For instance the variable User:DisplayName gets replaced with the Display Name field in the users profile.
To use a variable in a template image, simply place the variable name between curly brackets. To use the Display Name field, you would place {User:DisplayName} in the image as text. When the image is presented to the viewer, it will display the users Display Name field in place of the variable.
The variables available to a template and to image templates are identical. These variables can be viewed by visiting the LetterMark Template Variables page The page displayed will contain a list of the variables provided by the system, as well as the values for those variables in relation to your own LetterMark.NET account. From this page you can also download a DGS Package which contains all of the information required to preview image templates in the DGS Previewer software, as noted in the section below labeled: Testing SVG image templates
Once I have worked out the most userfriendly way to link this page into the rest of the management website I'll do so, but at the moment I'm unable to find a fitting place for it. It should also be noted that in the future you will be able to download DGS packages for other users on the system that you have access to. Generally this means users within your own company, however RTS employees which have global administrator or designer rights will be able to view the variables for any user on the system to facilitate design.
Using custom fields in template images
Another useful feature is the ability to place external images into the template image. This is done by inserting an image into the image template and giving it an 'id' matching the image you want to substitute for it. There are 3 values currently that will work for the 'id' attribute: User:Image, Location:Image, and Company:Image. Any image in the template image which has an 'id' matching one of those will be replaced with the image from the users profile. If the users profile does not have an image, the placeholder image in the template will be removed.
Some fields should only be displayed if there is data in them. For instance, displaying a cell phone label for a user with no cell phone may not be the most visually appealing experience. When the system is processing the image, it will remove any SVG elements which have a name attribute matching the empty field. For our cell phone example this means if you create have a text field that contains the following text:
{User:MobilePhone} cell phone
When the user has a cell phone field value of: 919-555-1212 it will appear in the image as:
919-555-1212 cell phone
If the user does not have a value for their Mobile Phone field, the text would show up as:
cell phone
By setting the 'name' attribute of the text element to 'User:MobilePhone', the system will remove the entire object before displaying the image to the user, so the entire line of text will not show up at all.
example SVG code: <text name="User:MobilePhone">{User:MobilePhone}</text>
By itself, this can still result in less then optimal result, as other lines of text below the now missing line will not automatically slide into place. This can be overcome by putting the text into a 'flowText' element, and each line of text in the flow should be stored in a 'flowPara' rather than a 'text' element. If the 'flowPara' containing the mobile phone variable is named 'User:MobilePhone' and the user does not have one, the entire flowPara tag will be removed, and the text after it will slide into place giving a much more pleasing result.
At this time, because Adobe Illustrator does not directly allow for editting of SVG attributes, image templates containing advanced features such as hidden fields or image substitutions require editting in a text editor, and this can be a tidious process. Inkscape allows editing of the id and label (inkscape:label) attributes of objects and supports text alignments of left, right and center properly, however flowing text is not currently implemented correctly. Inkscape will properly edit files with flowing text as long as the text is not modified.
There are two ways to test images to ensure they will be viewed as expected when in production. The first method is to simply upload the image to the LetterMark.NET system and see how it looks using an active user by viewing the users templates. Unfortunately this can be a slow process since you have to navigate the management website and do several different steps to see the final result. This also means that you must create an extra set of templates and template images in the system in order to preview the result without interfering with normal operation. You wouldn't want to upload a broken or malfunctioning image into the production templates so that all of your users now show a broken or improperly formatted image.
Rather than do all of that, we've written a previewer app which you can run locally in order to preview images before they are uploaded to the server. The previewer app is capable of using 'DGS Package' files downloaded from the server which contain all of a particular user's variables and image substitutions. The image preview can use this file combined with your new/modified SVG image template to provide you with an example of how the image will look when processed on the server. For the most part this image will look identical to what will be produced on the server. However, some items may appear differently. Fonts are a prime example, when the SVG is rendered, the fonts used will be a reflection of what is installed on the system running the DGS Previewer, not what is available on the server. If you have embedded the fonts into the SVG directly as meantioned above ( The Font Solution ) the font will be rendered properly.
Typically you can work with the original image template in your favorite editor and save/export it often, then switch to the DGS Previewer app and reload the new copy of the image to see the changes. This provides a rapid way to develop template images and know they will look properly when uploaded. The DGS Previewer will in the future allow you to export the image as a rasterized file such as a PNG or JPG to allow it to be submitted for approval to management if needed without putting it into production first.
To use the DGS Previewer, download and install the latest version from http://support.rtsz.com/downloads/dgs/DGSUtils_Setup.exe and install it. The DGS Utilities require a Java runtime installed on your computer, the installer will attempt to download and install the proper version of the Java runtime from Sun Microsystems. Should you have problems with the Java installation for any reason, you can download and install it manually from the following url: http://javadl.sun.com/webapps/download/AutoDL?BundleId=20288&/jre-6u6-windows-i586-p.exe.
After the DGS Utilities have been installed, you will have a start menu item for the DGS Previewer and its example images. The DGS Previewer also includes a set of example variables generated by the LetterMark.NET system to allow you to test images as if there were being generated on the LetterMark.NET system. This variable file is located in the 'examples' directory of the DGS Utilities installation. If you load the rts_card example from the DGS start menu items, it will automatically load this example DGS package file. Once loaded, the DGS Package file will be used for all future images until you select another one, so you do not have to continually select it.
NOTE: You may download a DGS Previewer Package file from the LetterMark server for any user. You do so by selecting the user you wish to view as the 'demo seat' in the design area, then downloading the DGS Previewer Package for the user by clicking the link next to one of the graphics in the Cards section. The graphic must be a SVG graphic for the Preview Package link to show up so it may require uploading at least one SVG image to a particular company before you can download a DGS Preview Package.
The rts_card example also serves as a full featured example of what can be done with SVG files and the LetterMark system. You may wish to open the file in a text editor to see exactly what the file contains, or open it with a SVG editor such as Adobe Illustrator, Sketsa or Inkscape however these editors do not provide complete support for the features used in the card and will remove these features when saving.
After you have tested the image template and are comfortable with the results, the image can be uploaded to the server as a new image under the 'cards' section of the LetterMark Design area. An SVG can be uploaded over an existing static file or flash file to replace it, however this is a one way trip and you can not return to flash or static files afterwords.
After you have tested the image template and are comfortable with the results, the image can be uploaded to the server as a new image by following the 'Add' link on the Template Images page. Likewise, if you wish to update an existing image, clicking the 'Edit' link for the image you wish to replace on the Template Images page will allow you to upload the replacement image.
NOTE: The following applies only to the LetterMark 6.0 system.
One of the more powerful features of the LetterMark service is image mapping. This allows an image to be linked to multiple targets rather than a single location. The LetterMark.NET system is capable of dealing with server side image maps, client side image maps, and VML for Outlook 2007 clients. Editting image maps can be done on any image in the system by clicking on the 'Map' link for the image you wish to modify on the Template Images page.
The image map editor will allow you to create shapes based on rectangles, circles, or polygons with 3 or more sides, however the server side processor currently only supports rectangles and circles at this time. Support for other polygons will be added in the future.
NOTE: The following applies only to the LetterMark 6.0 system.
The current package used to provide online image map editting does not work very well with Internet Explorer due to several bugs within Internet Explorer. As such, you should use Mozilla Firefox to edit image maps at this time. This may or may not change in the future, but for the time being Firefox is the best solution to online image map editting.
Alternatively, you may use any external tool to create a client side image map and paste it into the field provided in the online editor. The system will check the new map for validity when saving and if it appears to be valid it will replace the existing map. The system only checks the syntax of the mappings, and as such it is possible to upload image maps which contain links outside of the image area. Caution should be used when using an external editor and the maps should be checked after uploaded to ensure they work as expected.
A rudimentary process for creating a template in the LetterMark 5.x system can be found here Making a LetterMark 5.x Template
This tutorial briefly describes how to create a basic card using Inkscape.
This tutorial briefly describes how to create a basic header using Inkscape.