A Turnkey AJAX Vector Objects Solution

If you decide to build your own print designer for a web-to-print site, you may know that it is not a trivial task. Such a solution requires rich design capabilities, managing product templates, exporting results to PDF or raster image formats, and very specific image processing matters, like color management or the processing of large-scale graphics.

Frameworks for building online editors, libraries for handling PDF files, image processing SDKs and so on - which are available on the Internet - work on different platforms and have APIs that are incompatible with each other. Also, not all of them are properly supported, or may even have been abandoned by authors long ago. Even if you put all these things together, to make something practical, you need enormous hours of planning, coding, and testing.

Customer's Canvas

As an alternative, you can consider a ready-to-use, high-level solution based on AJAX Vector Objects, Customer's Canvas. The Customer's Canvas designer works in a browser but offers the same level of simplicity as desktop programs. It is an HTML5 solution that doesn't need any browser extension, unlike Flash or Silverlight, and works in any browser on any platform. This solution is being actively developed, and you can always contact a support team.

The Customer's Canvas Designer

Let us look at the basic functionality of Customer's Canvas, which is divided into the following three groups:

  • Managing product templates. You can create, share, and edit the templates. Your users can create custom templates or start ordering a print product from pre-designed templates.
  • WYSIWYG designer for print products. It works on pure HTML5/JavaScript and it runs on mobile devices as well as on desktops.
  • Image rendering. It provides a server-side image engine for rendering.

Templates

Great customers are not always great graphics designers. If you run a web-to-print business, you should provide pre-designed templates for your customers so that they can save their time by ordering a print product from a prepared template.

With Customer's Canvas, your designers can create templates in Adobe Photoshop, the software which they have been familiar with for a decade. You can import multi-layer PSD files containing texts, images, shapes, and smart layers. Either CMYK, RGB, or Grayscale color spaces are supported.

The Customer's Canvas Template

Another way to prepare templates is to use Customer's Canvas itself. Your employees can select a product type from an administrative panel of your site, create a template from scratch in the designer, and then save the template into a server file system.

The main reasons to use templates:

  • You can define positions of design elements.
  • You can embed as many design elements as you want: images, texts, placeholders, and vector elements.
  • You can lock the elements or define special permissions for them.
  • You can predefine styles for text elements.
  • You can set up text and image placeholders so that the users can customize product content.

The Web-to-Print Designer

The user starts working with a blank designer or from a pre-designed template. Since the products are saved on the back end, you can allow your users to return to work with previously saved products whenever they want.

The User Interface

There are two components of the web-to-print designer - a working area and an object inspector. In the working area, users can move, rotate, or resize elements. For more accurate positioning, users can toggle a grid, snap and safety lines. The object inspector shows a list of the design elements, where users can arrange them, change their content, and add/clone/delete items.

You can configure the user interface for your needs. The Customer's Canvas designer supports customizable widgets and menus that you can define for either a product, the whole designer, or even a separate page of your product. By customizing widgets, you specify what your users are allowed to change in a product template. You even can restrict them by using the Simple editing mode so that they can only change the content of available design elements. This web-to-print designer supports themes and user interface localization.

To add design elements to a product, click an element type on the Customer's Canvas menu:

The Customer's Canvas Menu

Texts

Customer's Canvas allows you to add two types of text layers to a product: point or rich text. If you import text elements from a PSD template, you can make them vertically oriented or as a text placeholder.

The Customer's Canvas Rich Text Editor

Images

To create products, your users can upload their own images or import from Facebook and Instagram accounts. You can share a bank of prepared images: photos, decorations, shapes, and themed backgrounds.

The Customer's Canvas Image Gallery

Your users can crop and adjust images that they added to a product.

Hi-Res Print Output Files

Customer's Canvas is not just about image editing; it's also about rendering output image files. It provides a server-side image rendering engine that generates hi-res print-ready files as well as web previews for users' designs. When a user finishes personalizing a print product design, you may want to get a proof image before a customer proceeds to checkout. A proof image is a low-res copy of the result file, or it may be applied to an image depicting the product - a mug, a t-shirt, a book cover.

This web-to-print solution can render designs in raster and vector formats. The PDF, JPEG, TIFF, and PNG file formats are available for hi-res outputs. You can configure a color space (RGB, CMYK, or Grayscale) and a resolution. So you obtain hi-res print output files that are:

  • Printer-friendly: you can control spot colors and color management with your color profile.
  • Large-sized if you need it. You can generate any image size, from business cards to billboard banners.
  • Multiple pages if you need them. You get each page as a separate PDF file or the entire multipage product in a single multipage PDF file.
  • Configurable. You set an output resolution, a color space, and an output file format.

Integration with E-commerce Systems

Customer's Canvas is a print product personalization tool that can be embedded into any web application - a website, CMS, or your favorite e-commerce system. There are three ways to integrate:

  • You can deploy Customer's Canvas to the same server, where your e-commerce system is deployed.
  • You can deploy it to any other ASP.NET hosting server.
  • Even if you don't have an ASP.NET server, you can still get the hosted version of Customer's Canvas.

After you have successfully deployed Customer's Canvas, you can easily embed it into any HTML code with the <iframe> tag. No matter if you use ASP.NET, PHP, Ruby-on-rails, or even a hosted CMS or e-commerce, you can integrate Customer's Canvas with your website with minimal coding.

If you face any difficulties with the integration, the Customer's Canvas support team will assist you in this process. Also, there are ready-to-use plugins for NopCommerce and Shopify e-commerce systems.

See Also