LiveArt Blog

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 apparel to support a specific purpose is also a great way of self-actualization and expression. Professional marketers can quickly turn any idea into the form of attractive design one would desire to wear.

Man sitting in front of the laptop and looking at designed bird

Read more

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

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

Then just describe your goal, announce the 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's 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 frequently handle everything on the back-office, including the manufacturing process, packaging, managing the payments, and delivery. Nonetheless, the center of such a solution is the online product designer that creates a unique selling point to your design, idea, and cause.

Using the LiveArt designer tool as a campaign designer makes the whole process smooth, clear, and fun. Several 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 prioritized for 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.

Woman holding tablet with LiveArt Html5 designer and designing hoodie

Read more

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

Man holding smartphone with LiveArt Html5 designer and designing hoodie

Moving to a faster core engine
We started with Raphael back in 2013. It’s one of the best libraries, written by former Adobe employees and it served us well to a 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 the 1.X.X branch. The new Core is also supplied in customization projects, where it proved to be more effective and faster than Raphael.

Snap.svg logo

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 allows much more formats for upload and processing.

More configurability, more web2print support!
Technologies and the 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 the occasion could be a good start for your business if done right and on time. Many existing companies cater to specific events that always have a stable demand for 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 always been waiting for!

Read more

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 your apparel than 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!

football ball icon 

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 drive fun and spirit into large teams.

gift box icon

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

grill icon

Family reunions.
Designing shirts for everyone who visited a 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 home. It’s fun and uniting, so make sure you don’t miss such an event to print them a bunch of t-shirts.

cake icon 

Birthday parties.
If you’re helping with the 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 a birthday boy or girl, and leave everyone with a souvenir at the end. Finally, you can even print out a cake topping with the heroes of a beloved comic of a child and his wishes.

two glasses icon

Stag and Hens parties.
Buying the 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's name, so that they are completely personalized! This leads us to the final event you can really get a fortune from.

two weeding rings icon

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 usually are 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 unique products printed for their extraordinary event.

New Year, New LiveArt

Hey everyone! It's 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 future 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 to access their Instagram feed with a click is another priority we are going to hit.

Responsive online designer. Yes, after several UX research tasks, our team is about to release a responsive version of LiveArt HTML5, allowing users to design their beloved customized products on smartphones, including Android, iOS, or Windows-based devices. More specifically, this would also be 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 a universal product configurator, where users can create their product with parts or by modifying the existing options.

More integrations are coming. For a hosted platform of Shopify and another integration for a 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 an excellent year for our customers!

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

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

Happy Holiday card form LiveArt in 2015

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 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. Check out our practical guide to SVG to get to know more about how to work with this format for a web to print.

 

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 in LiveArt HTML5 designer

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 in LiveArt HTML5 designer

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 in LiveArt HTML5 designer

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 in LiveArt HTML5 designer

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 in LiveArt HTML5 designer

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.