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 apps for tablets and smartphones. SVG represents a 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, the vector would render without any artifacts.

However, in the back office of the decoration industry, there is always state-of-the-art software that requires a 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 the web, one needs to be able to produce proper production output out of the LiveArt HTML5 one.

If you are using LiveArt Shop solutions 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 the appropriate format for your production purposes.

Read more

Inkscape
Inkscape is a tool that was developed originally for authoring and editing SVG files. Due to its open-source nature, it’s freely distributed and also included as a port for major server platforms, including Ubuntu. By using Inkscape from the 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 the right choice if you are a NodeJS fan or need quick and straightforward 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 several 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 of developers around the world, the magnificent ImageMagick image library, and the 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 a 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 compared 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 the 0.9.5 version of LiveArt.

Read more

config.json

New attributes can be used as optional unless they start to throw exceptions in the 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 the 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 the 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 a set of strict sizes, which can be selected.

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

"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 the real height of letters for sign products. Its 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 an upgraded package to learn the practical usage of new attributes.

What’s New in LiveArt HTML5 Product Designer Version 0.9.5.

Our team proudly presents the next version of its product designer component, written in pure HTML. We have gathered up tons of feedbacks, wishes, and requests to make LiveArt HTML5 even more sophisticated yet straightforward for technical implementation. For more technical insights, developers are more than welcome to review our updated documentation.

Clippable printable area

Read more

Clippable printable area. Each product may now have a rectangle clippable area, which will clip anything you drag beyond it. The area is defined using the coordinates; no extra product artwork would be required. The clipped design area is a basic function for apparel decoration and design software for standard promotional products like mugs and pens. This would also enable beautiful design opportunities such as overprinting patterns and combining design elements.

Resizable products with ruler

Resizable products with a ruler. Producers of signs, stickers, banners, wall decals, paper stationery, custom stamps, and other similar products can now easily configure resizable products instead of populating catalog with standard sizes or using alternative software for these types of products.

Custom masked products

Custom masked products. Specially crafted and printed products that have irregular shapes can now be easily prepared and published into LiveArt using masks. The new version contains samples of phone covers and decals that allow users to preview the designed product precisely as it would look, having design cropped or faded as it should.

Multiple new features appeared for text decoration. Let your customers be more creative with text effects and more precise adjustments for them.

Multiline Advanced

Multiline Advanced. LiveArt HTML5 has been powered up with native support of multiple lines of text with several common adjustments. Professional controls include letter spacing, line spacing, and precision adjustment (using the size fields). Still, all UI/UX parts are open, so you can always disable the controls you desire to be hidden for the user.

Text Effects

Text Effects. LiveArt HTML5 is finally powering itself with a gateway to powerful effect engine producing text effects for the chosen fonts, including arc, arch, inflate, perspective, and lots more. Allow your customers to build truly unique designs and yourself to please them with bespoke templates for products.

We haven’t forgotten about the developers, so there is some smaller features and fixes made especially for our beloved audience to facilitate integration and front-end modifications: additional configuration attributes, more versatile product configuration, more static samples, and such. Let us just mention a few:

Bootstrap 3 Styles

Bootstrap 3 Styles. The whole UI now uses base bootstrap CSS of version 3. Even though we would encourage using iframe during the integration, one can embed the LiveArt into the bootstrap three websites without having to request LiveArt CSS upgrades.

Canvas API Calls

Canvas API Calls. Developers can use a single API call (userInteract) for accomplishing a number of automated actions throughout the LiveArt without requesting modifications of the LiveArt core. These include selecting a product, adjusting the product size, selecting a printable location, selecting product layer color, control quantities as well as names and numbers, add graphics or text, and much more!

Of course, the new build also includes lots of minor updates, bug fixes, and overall improvements. We would love to hear the feedback and enjoy the latest build.

Mention us the keyword CRABWISE to get a straight 10% discount on the license until Nov 30, 2014.

The Importance of Cross Platform Development for Web Applications

In a 2012 study, Google found that 90% of today's media consumption is screen-based, and noted that consumers regularly bounce from PCs, tablets, and smartphones. With multi-screen behavior becoming the new normal, it's critical for businesses to adapt and focus on cross-platform development to meet consumer needs better. Additionally, a 2013 report from Statista found that in today's BYOD (Bring Your Own Device) world, 49% of respondents said they used their devices for work as well as play. With so many different tools in the workplace, apps need to perform seamlessly across multiple platforms.

Man sitting in a front of the computer and coding
(Image Courtesy of Shutterstock)

Read more

Businesses may worry about the challenges associated with cross-platform development, like available resources, time, and cost. Luckily there are tools and resources available to help companies better manage the process. These tools can help developers more quickly create apps at a lower cost, with the bonus that many of these tools are simple to use. For example, LiveArt's HTML5 Mobile-Ready Online Product Designer and it's plugins for platforms like Magento, WooCommerce, or Shopify are available for phones, tablets, desktops, and other devices that don't support Flash. They also work with multiple browsers, and the Online Product Designer can be added to any existing website or e-commerce platform as a simple web component.

The days of an app that only performs on a single platform or browser are gone.

Cross-platform development not only allows developers to maintain just a single code base, but it also gives them the capability to fix bugs or other issues immediately on any platform. Having one code base will also reduce cost because it involves less testing.

Users on cross-platform apps also benefit because even those with limited experience can be taught to maintain platforms with a custom content management system. This further reduces the business's cost because it allows an in-house team member to maintain the content and make changes when necessary. Instead of hiring separate developers to create apps specifically for a single platform, businesses can leverage in-house teams and individual employees to maintain operations through the content management system. Changes made by that employee will be reflected across all platforms, rather than having to engage multiple developers to make changes on one single platform.

 
(Image Courtesy of Shutterstock)

Cross-platform development also offers the following advantages:

Reusable code
A developer can use code multiple times rather than rewriting sequences. Once something is coded, it can be re-used in other platforms.

Cloud access
Many cross-platform development tools and frameworks are designed to easily integrate with cloud services, allowing businesses to take advantage of their current enterprise solutions, such as Salesforce.

Plugins
Plugins and other modules can quickly and simply be plugged into available frameworks, tools, and services. These components make it easy to add specific new features to the app.

Ease of deployment
Cross-platform development makes it easier and faster to deploy changes and updates across multiple platforms. Developers can focus on one app and one code base rather than dealing with various programs, which saves the developer time and the company money.

Cross-platform development is a smart decision in today's world of ever-evolving technology. Businesses should take advantage of the tools and resources available to them, as it will save both time and money in the long run, which will allow companies to generate higher profitability overall.

Nick Rojas is a journalist based in Chicago, IL. His work often covers content creation and technology. You can follow him on Twitter @NickARojas.

 

 

Your Online Product Designer as Marketing Tool to Promote Your Business

This post was inspired by a business meeting I have conducted recently. Among the obvious common talks on business objectives to be met and requirements for a personalization tool, several concepts were talked about. Most of these will sound familiar or even trivial, yet they clearly show how the design tool may bring your business in the world of tomorrow, where having product customization would become a must.

LiveArt as marketing tool

Read more

Today it’s not just about personalization. It’s about someone expressing their own identity by means of having their own unique product, whether it’s a t-shirt, mug, wristband, or a postcard sent to a friend. Respectively, they do it from your website with an online design tool. Your product designer is not just a designing tool, but a whole identity builder. As a marketing tool, it can be central for many activities across your eCommerce site that will continuously drive your business forward.

First off, you can enable customization for pre-made products. Typically, customers would ask you to amend a label or replace an image with their own logo. Making such products “designable” will ease you upon accepting and streamlining the orders. A whole new automated sales channel will be open to scaling up your overall sales.

By having more and more of designed products, you will be knowing what your audience is up to and, thus, understanding the communities you are catering to. Is it a stag/hen party guys, students, brotherhoods, universities, family reunions, politics, or such? Those kinds of ideas would allow you building up a gallery of pre-made designs people can look over, engage, open up in designer, and make an order of the amended or same design.

Finally, what may hold users from sharing their ideas across social networks and their friends? Incentivize your customers to share their orders. With the modern social rebate systems, they can win discounts or free products once they gathered up lots of likes for something you have printed for them. Not to mention that such social users would bring you more customers to have personalized apparel of their own.

When catering to communities or organizations, you can always put design tools as a central point of sale. Projects like Teespring allow for launching campaigns where one’s idea may bring individual profit and bonuses. Why not promote your own business and product in the same way. Building a fundraising micro-sites around your customizable product would open a whole new scaled channel of sales!

All of the above is not a limited list; you are always limited by just your imagination. Social projects, fundraising, charities, crowdfunding all of that is only one LiveArt away to let it happen to your business.

Think Big. Do Big. Enterprise Solutions for Web to Print and Decoration Businesses

For decoration industries that cover large markets and require the complex web to print solutions, our development team offers an open and collaboration-rich process to achieve specific business goals of your market.

Our team is capable of handling complex projects that may involve online product design tools and complex processes - from initial inception to final deployment. Respectively, we don’t end it up on last sign off and provide continuous support and updates.

Lot’s of SKUs? Complex pricing? Specific requirements for output? Our expertise here covers several decoration markets, from custom apparel printing to classic web2print. Having average experience of the team to 10+ years in active web applications development, we carefully do:

  • Initial evaluation and planning;
  • Requirements development;
  • Custom workflows implementation;
  • Integration with third-party APIs and hardware;
  • SaaS and PaaS deployments;
  • Team coordination and maintenance;
  • Continuous updates coordination;

Oh, and did we mention that we always embrace the challenge and push the limits of the mobile web? Yes, we always look for something new and never stop.

Are you planning to go big? Share your plans with us!

Multiple sides in LiveArt HTML5

If you own a product personalization business you can get benefit from an online designer. To begin with, you should look for a solution based on the type of product. Designer with one-side support works well for decals, signs, or banners. What if you want to offer to personalize 4 sides of a uniform (i.e. front, back, left, right)? Or what if you offer to customize all 6 sides of a gift box? With a one-side designer, you would have to show different sides of your product as separate items. That would be confusing and frustrating for the user to work with the designer. In such case support of multi-sided products becomes one of the key criteria of your choice. Simple switching between sides and instant preview of any changes will help customers not losing their design of front while working on the back design of some product.

Read more

LiveArt HTML5 Product Designer allows users to personalize multi-sided products. The number of sides is optimized for up to 6, but more are available with slight customization. You can use it for custom printed gift cards, uniforms, business cards, and a wide variety of products that need multi-sides support.

Add/edit feature in LiveArt Html5 designer

With LiveArt HTML5 Product Designer you can make a set of different products with the different numbers of sides each. You can have in your designer t-shirt with 4 parts for user customization (front, back, left sleeve, right sleeve), a bag with 1 side to customize, and tank top with 2 sides at the same time.

Select different products feature in LiveArt Html5 designer

If you want to offer to your customer's customization of more than one side of the product you face the problem of multi-sided support of your online designer tool. LiveArt HTML5 Product Designer easily solves this problem allowing multiple sides for various products. The clear and intuitive interface helps your potential customers proceed with online designing up to final order making the creation process of unique items clear, simple, and pleasant. 

Multiple sides design feature in LiveArt Html5 designer

Planning an Enterprise Custom Product Designer Implementation

For small shop owners introducing the online product, the design feature is a simple step by choosing among the appropriate tools on the market. You just walk into sites, talk with people, try the software, and agree on signing up if it matches your expectations and the printing technology.

For large companies, it does not work like that. Large portals implement various types of non-standard user stories like choosing between various decoration types, having a preliminary registration, offer a large number of products and their variations, and lots more. Implementing an online design solution for such companies requires a tailored approach and a proper guidance process.

Having over ten years of experience in working with decoration industry companies, we have adopted an easy process, coined by Spotify once - Think It, Build It, Ship It, Tweak It. The four phases of the project allow us to align it with the agile process we use and allow the customer to join our team and work out the solution with the best cost-effectiveness. This article would give a brief look at the above phases and how they work.

 Project phases repsresentation

Read more

Think It. From the very first contacts with our clients, we thrive on understanding what their business is and what problem they are trying to solve with our tool. This comes in the form of company background, desired user stories, problem descriptions, and business goals. Once we have defined a set of initial scope that has to be covered, our team comes up with initial demos and prototypes.

Build It. Once signed up, the team now works more closely with the client team to compile a set of custom user stories, test cases for them, and respective performance requirements. Each set of this scope is estimated by the team, so that client is always aware of scope and related cost of the project. The team then plans the sprints accordingly and delivers demos regularly to ensure the project is on track and aligned to customer expectations.

Ship It. Closely to project finish, when around 90% of the scope complete, we encourage the client to commence internal acceptance testing and alpha test for the users. At this time, both our team and client decide when exactly the product should be released and published to the broad audience.

Tweak It. The project itself isn’t finished with the final release. During the support period, the team stays focused on any performance issues, scope gaps, and common fixes to be brushed up for the post-release period. At the same time, both client and team continue to work on further updates, dictated by business needs, thus contributing to overall online product designer value for end-user.

The above approach, put into the Agile/Scrum methodology we use, provides firm results and is always controllable. For a large company to implement the online design and jump into the market, what could be better?

It’s a Smartphone Revolution! Are You In?

(Guest post by Nick Rojas)

Mobile computing is taking over the world the way few technologies ever have. Not only is it a safe estimate that more than 95% of the people you see every day have a mobile device on them, but we are about to cross the threshold where there are more smartphones than there are people on Earth.

One of the strongest factors in the growth of smartphones is the power every app gives users. With them, users are able to transform their device into a multitasking wonder with a tap and a swipe to complete. Virtually every company benefits from being on board with this philosophy, translating as much of their service as possible into a mobile app for convenience.

In the following graphic, we’ll provide some numbers that may surprise you about what makes the smartphone such a necessary platform for businesses to develop for, and how you should tailor your app to make sure it gets downloaded and used as frequently as possible. Whether it’s to pay bills, communicate, collaborate, or scan barcodes, many people can’t leave the house without their phone on them, and so it’s more crucial than ever to tap into this hungry, captive audience with your own mobile app.

Read more

Infographic about importance of mobile versions in business Infographic Provided by SmartVirtualPhoneNumber.com

Working With Quote Services In LiveArt HTML5

Unlike many other plugins, LiveArt HTML5 provides a flexible way to build your own quoting in an online product designer. Any option or design element that is added to the working area will affect the quote if it is required by the business rules of your solution. This article describes in brief how quote services work and provide insight for integration teams.

Read more

The quote service is located in the main config.json file. Open the file and locate the line, which designates the endpoint that will handle the quote

"getQuoteUrl": "http://localhost/services/getQuote.php",

Since you would prefer to obtain a quote dynamically, based on selections of the user, you would place some sort of dynamic script into getting Quote service. Referring to a static file, for example, would always return the same price and totals no matter what the selections are and you would not want that.

Once the endpoint is set, use the Fiddler tool, Inspector, or Firebug to see what is being sent to the endpoint when the quote is requested. You would typically get the following JSON structure in the POST request as a “data” variable.

{
  "product":{ "id":"11", "color":"#FFF", "colorName":"White" },
  "locations":[
    {
      "name":"Front",
      "colors":2,
      "colorsList":["#4682b4","#000"],
      "designedArea": 384.60,
      "designedAreaRect": 480.50,
      "objects":[
        {
          "type":"txt",
          "designedArea":126.97,
          "colors":1,
          "colorsList":[
            "#4682b4"
          ]
        },
        {
          "type":"svg",
          "designedArea":258.63,
          "colors":1,
          "colorsList":["#000"]
        }
      ],
      "objectCount":2,
      "letterings":1,
      "images":1
    }
  ],
  "quantities":[{"size":"XS","quantity":1}],
  "namesNumbers":[]
}

While the product ID, color, or location name would be an obvious variable, some of them require explanation, as below:

  • colors - the number of colors used in design; this value is very usable for screen printing quotes. A “-1” value would mean the design contains a photo or too many colors;
  • colorsList - is a list of hex values for each used colors;
  • designedArea - area in units (inches, feet, any kind you designate as part of Product JSON), occupied by design. The designArea is a sum of designAreas for each of the elements.
  • designedAreaRect - an area of a rectangle, in units, occupied by all design elements;

Now once you obtain all these variables, LiveArt HTML5 would expect the following reply from you, the example goes below:

{
  "prices":[
    {"label":"Item Price", "price":"$29"},
    {"label":"Decoration", "price":"$15"},
    {"label":"Discount 0.25%", "price":"-$0.11"},
    {"label":"Total", "price":"$43.89", "isTotal":true}
  ]
}

All in all, you have just got little into Get Quote request, it’s structure, and the way it’s expected to work with LiveArt HTML5. Make sure to check our PHP sample code including reading variables and calculating color-based decoration fees.