Release 0.10.26. Fixes and improvements

It's been a while since the last release announcement. We worked hard with customization projects, but haven't forgotten about updates to the base version of LiveArt. Since 0.10.0 we are in full swing with the responsive layout, which adapts to your screen regardless of resolution, whether you are using tablet or laptop, Android or iOS.

Major improvements addressed common comments and feedback we've been receiving from our valued customers.Graphic and product search list was improved to deliver results faster and in a predictable manner.

Graphic and product search list was improved to deliver results faster and in a predictable manner. If you have several thousands of items, it is crucial your users will access these easily without any hassle. Our product designer now features faster loading times for both product and gallery catalog.

All current raster effects were converted to vector text effects - crisp and clear! Previously we relied heavily on raster text effects, provided by a supplementary script for ImageMagick, a powerful free software for image processing. Due to a number of installation issues with various platforms and output inconsistency in different versions, we have converted all text effects to use completely vector output, allowing best output quality and visual crispness. Additionally, the text effects now feature an icon revealing what the effect looks like, and the default text effect distortion value has been increased to make effect visible when selected.

The following additions were introduced in API.

  1. config.options.showSuitableProductColorize - enable product color panel to show only those colorizable elements' list that pertains to selected side. Setting this value to true is usable if your product contains many colorable panels across multiple printing locations (front, back, sleeve, pocket etc).
  2. GET variables configuration changes
    1. added possibility to set up default product size
    2. added possibility to set up default quantities
    3. added possibility to set up main config URL

To simplify the experience and address major security issues, the following features were deprecated, please make sure you check against our migration guide before upgrading:

  1. Upload image by URL has been removed;
  2. Raster effects were disabled by default, you can still enable them back by using older versions config and configuring ImageMagick properly.

Minor fixes include the following improvements:

  • The snap guides fix was applied which prevented from objects being aligned slightly to the left.
  • Fixed \<svg\> element id loosing in MS Edge browser.

We hope you enjoy the release - stay tuned for more features in the coming releases of both 0.10.X branch and the completely new one 1.0.0 featuring faster text engine!

Meet Renewed LiveArt HTML5 Product Designer. Release 0.10.19

We proudly present the next major release of LiveArt HTML5, version 0.10 that features more sophisticated responsive layout, add images from social networks feature and tons of small improvements you would be pleased at.

General Improvements

Our team took a moment to step back and process numerous feedbacks from our customers and users. We are now seeking for more clean and streamlined experience, while maintaining general robustness of the tool. The icons and layout were changed for both desktop and mobile performance.

The mobile mode looks a bit different of course, yet provides same level of experience.

Let us have a look at the particular features improvements for end user:

  1. Snap guides. Any object can now be "snapped" to the vertical or horizontal center line, next to an object, edge of working area or at certain angles. This was a long awaited feature, which now users can enjoy to make their designs even more sharp and neat.
  2. Social networks upload. Add Facebook, Instagram, Google or Flicks images to your design. This feature is customizable, so you can turn it on only if required.
  3. More resize handles. Additional handles added to stretch or shrink image or added text.
  4. Pantone color palette. Along with ability to set color wheel or limited set of colors, we have added configurable Pantone Palette of colors. More to come!

Developer Features

Developers would be pleased with additional API extensions as well as minor improvements.

  1. .NET Samples Available.
  2. GitHub Trial. The trial package is now available and regularly updated at our github repository - https://github.com/liveart/liveartjs
  3. Translation API. All important labels and messages are now contained in a single file to facilitate localisation of LiveArt to various languages.

As always, please welcome to share the features you'd like most to be released soon in our Voting Portal - https://liveart.uservoice.com/ 

Using Product Designer for Fundraising and Campaign Web-to-Print Stores

Running campaigns and fundraising became a popular way to get money for your startup or a noble cause. Projects like IndieGogo feature thousands of projects in various industries including art and technology. Buying an apparel to support certain cause is also a great way of self-actualisation and expression. Professional marketers can easily turn any idea into the form of attractive design one would desire to wear.

This also frequently means you get something of a limited edition, which is itself is another incentive to pull the trigger and spend some $20 for a tee with unique design.

Campaign-making is also an easy way to start getting money rather fast and with extremely low start costs. What you normally need is simply design your personalized merchandise (it could be t-shirt, tank, hoodie, mug or any other customizable promotional product). With the help of online designer tool you can create unique printed product featuring own typeface, styling and artwork. If needed, it can be even customizable further by users.

Then just describe your goal, announce support of a crowdfunding cause, set quantity and pricing goals and off you go! Effective supportive marketing would help you to get to your target audience attention and motivate them to join the campaign and support the cause. From here SEO of your microsite or respective sharing among popular social networks would also play well.

Campaign based sites normally handle everything on the back-office including manufacturing process, packaging, handling the payments and delivery. Nonetheless, the center of such solution is online product designer that creates a unique selling point to your design, idea and cause.

Using LiveArt designer tool as campaign designer makes the whole process easy, clear and fun. A number of sites including https://www.teegear.com/ and https://www.rockettees.com/ have already successfully using LiveArt HTML5 designer for their campaigns. Their success is now just a matter of time.

Plans for 2016 LiveArt HTML5 Development

Yes, it’s 2016 down the road and we thought we might share some plans of how LiveArt will improve. Some of you might already know about the Voting Portal, where everyone can leave a feature request to implement or give their votes for existing ones. These features are reviewed by our technical team and prioritised for the development. Normally, we make patch releases twice a month and minor ones each season. In addition to the ongoing list of small features and tweaks, there is a number of game changers that we plan long term.

Responsive version
The mobile version of LiveArt HTML5 is currently released as beta version where anyone can either try it or purchase as component or part of a complete Magento or WooCommerce solution. We continue working on it to deliver best experience on any mobile devices. Releases are available for standalone version and for the incoming Magento 2 integration.

Moving to a faster core engine
We started with Raphael back in 2013. It’s one of the best libraries, written by former Adobe employee and it served us will to certain extent. However, lack of flexibility and performance our users require led us to the point where we are migrating to the next generation core, which will be releasing under 1.X.X branch. The new Core is also supplied in customization projects, where it proved to be more effective and faster than Raphael.

Fluent support of legacy SVG graphics
Having plenty of graphics from your old solution or gallery of EPS you’d like to add? LiveArt’s implementation of native SVG coloring support will allow you to use multicolor images easier than ever. Integration with native or cloud conversion services like CloudConvert allow much more formats for upload and processing.

More configurability, more web2print support!
Technologies and number of web2print industries change almost daily, so at LiveArt we do all best to keep up with the pace. By gathering up feedback and developing new features we bring printers and their customers closer for better customization and ordering process.

Stay tuned for release notes and share your ideas on Voting Portal!

7 Great Events You Could Open Your Custom Printed Apparel Shop For

Opening up a web2print shop for occasion could be a good start for your business, if done right and in time. Many existing businesses cater specific events that always have a stable demand of personalized apparel or other promotional products like mugs or can holders.

Here are some ideas for you, maybe another event comes close to your area and it’s an opportunity you’ve been always waiting for!

Special local events.
Any concert, competition or gathering always involves promotional products including personalized trophies. Maybe you live just across the road where Oshkosh Fly-In would happen? You can create own apparel then with sponsors logos and name of the event. Everyone would know such t-shirts would be one of a kind, so they would like to have one!

 

Company team building.
Such events became very popular, especially among companies where people are sitting inside cubicles 9 to 5 without much communicating. Giving out t-shirts with embroidered company logo, person name and custom design on the back could really drive fun and spirit into large teams.

Corporate gifts.
Getting a salary and friday pizza is not the only incentive for the company workers. Doing nice personalized gifts like custom hand-stamped jewellery could include company name and a thank you message for being part of it.

Family reunions.
Designing shirts for everyone who visited reunion with a family name and personalized design could not only connect people, but also leave them with something to remember when they get back to home. It’s fun and uniting, so make sure you don’t miss such event to print them a bunch of t-shirts.

 

Birthday parties.
If you’re helping with child’s birthday party, why not making it memorable. You can print a t-shirt for each visiting kid, do a table cover with wishes and photos of birthday boy or girl, and leave everyone with a souvenir at the end. Finally, you can even print out a cake topping with a beloved comics heroes of a child and his personal wishes.

Stag and Hens parties.
Buying same tank tops for everyone, decorated in bright and brutal sayings - what could be more fun to celebrate such an occasion. What’s more, each apparel piece can be imprinted with a person name, so that they are completely personalized! This leads us to the final event you can really get a fortune from.

Weddings!
Another occasion where personalized gift boxes, save the date custom postcards and even apparel (sometimes) are ordered before the show takes place. The table cards are normally decorated with your name and the gift box always contains a magnet you can put on your fridge as a trophy.

That’s it, gather up your designs and templates, and make it attractive for everyone that comes into your site or store to get special products printed for their very special event.

New Year, New LiveArt

Hey everyone! It's being a great year start and our team is doing its best to provide constant improvements to our online product design tool. Let us have a look at what LiveArt will be in the coming versions.

Support of social networks. Adding own images from Instagram or Facebook has already become a must for most personalized products: phone wraps, custom canvases, cases, pillows and apparel as well. Allowing people access their Instagram feed with a click is another priority we are going to hit.

Responsive online designer. Yes, after a number of UX research tasks, our team is about to release a responsive version of LiveArt HTML5, allowing users design their beloved customized products on smartphones including Android, iOS, or Windows-based devices. More specifically, this would be also another step towards a complete design revamp of the tool scheduled to take place later this year.

Designer = Configurator. In addition to being an online product designer, LiveArt HTML5 became widely used as universal product configurator, where users can create their own product with parts or by modifying the existing options.

More integrations coming. For hosted platform of Shopify and another integration for well-known .NET platform - nopCommerce.

As we have launched a Vote For Feature portal at http://liveart.uservoice.com/ you are more than welcome to check in regularly as well as subscribe to our Facebook and Twitter for updates.

Have a Happy Coming Christmas!

It was a great year for our customers!

Many enjoyed having LiveArt for their websites and we enjoyed working with a new market challenges. Our product designer has been used in many industries, surviving numerous customizations and integrations and improved with a lot of the feedback. We look forward to YEAR 2015 in building even more sophisticated product designers and configurators! 

Take a moment to relax and design own Christmas card :) Yes, using LiveArt Designer!

So it's time to prepare Christmas presents! Mention us the "Rudy the Reindeer" keyword and get an unprecedented 25% discount on any LiveArt license (including source and OEM ones) or any custom work.

Hurry up! The special will be available till Jan 10, 2015 purchase requests only.

Best Tools for Working With LiveArt HTML5 Output Files

In LiveArt HTML5 Product Designer, we heavily rely on the SVG format that becomes an industry standard for web applications including responsive applications for tablets and smartphones. SVG represents clean vector format, which means it always looks crisp and nice regardless of your resolution, monitor or device. Whether it’s Retina-based or plain old LCD, vector would render without any artifacts.

However, on the back office of the decoration industry, there is always state-of-the-art software that requires specific format the output should be. In some cases this is 300 dpi PNG or TIFF, in other - EPS or PDF vector formats. Since these may not relate to web, one need to be able to produce proper production output out of the LiveArt HTML5 one.

If you are using LiveArt Shop solution like Magento, Shopify or WooCommerce, the proper output technology could be already built-in. If you are integrating LiveArt yourself, there are multiple tools you can use to convert the output LiveArt Design SVG into appropriate format for your production purposes.

Inkscape
Inkscape is a tool that was developed originally for authoring and editing SVG files. Due to it’s open source nature, it’s freely distributed and also included as port for major server platforms including Ubuntu. By using Inkscape from command-line, you can convert the vector into EPS or rasterize with given DPI setting into hires PNG.
Pros: all-in-one application, easy to install;
Cons: requires lots of resources, slow on bulk converts;

PhantomJS
PhantomJS is an extension to NodeJS and can be used to accomplish PNG previews of the web pages. By utilizing this feature, one can also prepare screenshots out of the designs, produced by users. PhantomJS might be a good choice if you are NodeJS fan or need simple and quick conversion of SVG into PNG formats of various dimensions.
Pros: integrated into NodeJS platform, easy to run;
Cons: no implementations for other platforms, supports raster only;

CloudConvert
This is a new hosted service that also features API to upload and convert images in numerous formats. Among others, it can export SVG into a number of formats like EPS, PNG, TIFF and so on.
Pros: no need to install server software, quick and robust;
Cons: requires API development, does not have font embedding option;

ImageMagick
Last but not least, is the choice of millions developers around the world, the magnificent ImageMagick image library and command-line tool. This is an extremely powerful tool that can identify, convert and edit images using vast options and opportunities. While it focuses on bitmap processing as its main purpose, ImageMagick’s convert command-line tool can be used to produce large bitmap images from SVG. Best results achievable with rsvg delegate, which is installed as separate application.
Pros: a swiss knife of the image processing, easy to install, already included into number of shared hosting servers, fast;
Cons: no vector to vector conversion support, lower quality comparing to other tools;

Regardless of the solution you would choose, LiveArt team would always be glad to assist and consult on obtaining a production-ready output for your particular integration or project.

 

Upgrade guide to LiveArt HTML5 0.9.5 <= 0.9.3

This post briefly describes the new attributes that became available with 0.9.5 version of LiveArt.

config.json

New attributes can be used as optional unless they start to throw exceptions in console.

{ 
    ... 
    "defaultProductSize": [ 32, 16 ], 
    ... 
}

defaultProductSize attribute can be set for arbitrary size products (e.g. signs) and is non-mandatory.

{ 
    ... 
    "options": {
        "includeProductInDesign": true,
        "includePrintingAreaInDesign": true, 
        "includeMaskInDesign": true,
    }
    ... 
}

include* attributes allow including/excluding certain working elements from the designer SVG output. These will be hidden, if false.

Some other options section attributes include, with examples:

  • "checkeredBackground": true, - allows putting a checkered background in empty area;
  • "unit": "in", - specifies main units symbol;
  • "unit2": "ft", - specifies 2nd units symbol that will be automatically recalculated if necessary;
  • "unitConversionMult": 12, - conversion rate between specified units;
  • "showProductSelector": true, - whether to show 1st tab, i.e. ability to select product;
  • "checkTextFXThrottle": 400 - delay to wait for the text effect

textEffects block introduced to define the raster text effects generator;

product.json

Additional definitions for products allow for more flexible product setup, including newly introduced signs.

"namesNumbersEnabled": true, - enable names/numbers for specific product;

"clipRect": [170, 75, 410, 485] - clips everything beyond this area, can be same as printable area definition;

    "colorizableElements": [
        {
            "name": "Color",
            "id": ".bg.fill",
            "colors": [
                {
                    "name": "White",
                    "value": "#FFF"
                },
                {
                    "name": "Black",
                    "value": "#000"
                },
                {
                    "name": "Steel Blue",
                    "value": "#4682B4"
                },

With colorizableElements you can now use single multicolor SVG with multiple colorizable areas.

"multicolor": true, should be strictly used with colorizableElements to ensure colorizing.

"resizable": true, indicates that the product can be resized. Should be used with sign type of products.

"showRuler": true, shows ruler for resizable products.

"editableAreaUnitsRange": [
    [10, 100],
    [10, 100]
]

You can indicate validation range for the sign dimensions using the above attribute inside locations block. Used with sign-based products only.

"editableAreaSizes": [
    {"label":"3x10in", "width":3, "height":10},
    {"label":"4x4in", "width":4, "height":4}
],

Use the above construction if you need to define set of strict sizes, which can be selected.

"hideEditableAreaBorder": true, can be used to hide the printable area frame for specific product.

"locations": [
                        {
                            "name": "Back",
                            "image": "products/iPhone/bg.svg",
                            "mask": "products/iPhone/iPhone.png"
                        }
                    ],

Use mask reference in location to specify a mask that should be an overlay per certain product location.

fonts.json

boldAllowed, italicAllowed allows disabling the bold, italic for certain fonts if they are not available.

ascent quite specific attribute that is required to calculate real height of letters for sign products. It's representation should indicate font height in pixels for 32pt font size.

vector this reference is required if you plan to use the vector effects.

All in all, we highly recommend looking into the sample config files you receive with upgraded package to learn the practical usage of new attributes.