Layar
Part of the Blippar Group

Blog: how to

New in the Creator: Color Palettes, Transparent Videos & More

Chris Cameron November 12, 2014

Users of the Layar Creator may have noticed a pair of features we’ve just released today. One is a more advanced technical ability that we’ve be working on for a while, while the other is a simple but powerful feature that we were able to quickly implement and roll out.

Automatic Color Palettes for Buttons

Let’s go over the simple one first before diving into the more technical feature. Here at Layar, the Creator team is constantly thinking of ways to make the creative process easier for Creator users; we want it to be easy to make high-quality Interactive Print content. And that’s the driving force behind one simple new feature: automatic button color palettes.

Previously in the Creator, our standard buttons were all the same default shade of blue, but you could change it to any color you like. Despite the ability to customize button colors, we noticed that the majority of buttons in the Creator have that default color. Now, the default buttons automatically adjust to match the color scheme we detect from your reference image.

This makes it much easier to create more immersive experiences as the default buttons will feel more natural among similar colors. You can still use any color you want, but now when you edit that button you’ll see a suggested color palette to choose from. Like we said, it’s a small change, but we think it goes a long way to creating more immersive and high-quality content.

Videos with Transparency

The advanced capability (and the more exciting feature of the two) is support for alpha channel transparency in videos. If you don’t know what this means, here’s a quick explainer.

Until today, only standard videos could be used in the Creator to make AR videos. These are restricted to a normal rectangular frame common to most forms of video, but there are cases where you may want to use video elements in a more immersive way. Now with alpha channel transparency support, videos in the Creator can use masks to isolate items and create transparency, eliminating the rectangular frame. Think of it as the video equivalent of transparent PNGs, while JPGs always have a rectangular shape.

Take, for instance, the example below. Our original video asset of a tiger walking on a green screen can now be modified to make the green background disappear, making for a more immersive video when viewed in AR with Interactive Print. In the top left is the original video, below that is the alpha matte we created, and on the right is how the video would appear in Interactive Print.

But you don’t need green screen footage in order to use transparency in videos. You can either create masks on-the-fly with video effects software (like rotoscoping, which can be very difficult), or you can just use animated digital assets created with video effects or 3D modeling software (like animated text, characters or logos) that are already isolated on a transparent background.

Because the process of creating a compatible alpha channel video is a bit technical, we’ve put together a step-by-step video tutorial that walks you through the process.

Some video editing and/or video effects software is needed, and our tutorial uses Adobe After Effects. Similar programs (Premiere, Apple Motion, Final Cut) will have similar features and abilities to make alpha channel videos, so the tutorial should give you an idea of what you need to do.

Alpha Channel Video support is only available for Premium Account subscribers. To upload your own you can find the Alpha Channel Video button in the Advanced button category.

One More Thing: Campaign Extension

We’ve also released a small upgrade that makes it easier to extend campaigns for an extra 12 months beyond their original 12 months of publication. Previously you needed to wait until the campaign expired to extend the campaign, but now you can choose to extend for an extra year at any time.

Permalink: www.layar.com/news/blog/555

Email this article
 

New in the Layar App: Discover Content and Take Photos!

Chris Cameron November 18, 2013

We recently released an update to the Layar App that introduces a few new features that help make the user experience even better than before. We’ve also produced a new video going over the basics of the Layar App, which you can see above.

Firstly, we’ve made it easy for users to discover and interact with your campaigns. Users are eager to scan content around them with the Layar App. The new What Can I Scan? section in the side menu provides a dynamic list of campaigns that are available in the user’s region. It also directs them to four basic uses of interactive print: items with the Layar logo and call-to-action, QR codes, paper currency and movie posters.

See how you can discover new content in the video below.

And secondly, we’ve added a fun new feature that allows users to capture a screenshot or photo of the interactive experience they are viewing. Tapping the campaign icon in the upper right corner reveals a Take Photo button which they can use to capture, share and save their experience! If they like what they see, now they can save it and share it!

Take a look at how this works in the video below.

You can check out the new features now in the latest version of Layar for iOS and Android.

Download Layar!

Permalink: www.layar.com/news/blog/520

Email this article
 

Add Fun Interactivity with Clickable Image Carousels

Chris Cameron May 6, 2013

Not long ago we added a new dynamic widget to the Layar Creator: the Clickable Carousel. Basically, it works just like the existing Image Carousel widget, but offers the ability to add links to each image so users can tap them to visit various links.

There are several cases in which this widget is very useful and fun for the user, including the example in the video tutorial above which we created. We added various dresses and hats to a model that you can swipe through to mix and match styles, and clicking on the images takes you to the mobile shopping pages for those items. You can try it by scanning the image below.

Other great examples have emerged from the community already! One user added the various body systems (muscles, organs, nerves, etc.) as slides on top of a skeleton image. Click here to view this example and scan with Layar!

This gift guide shows users different colors and styles for a bag by letting users slide through and click the one they like! Scan them with Layar to see how Clickable Carousels can add interactivity to your print content.

To make your own Clickable Carousel, just follow these steps:

  1. Drag the widget onto your page
  2. Click “+” to upload the first image
  3. Add the URL it should link to
  4. Repeat steps 2 and 3 until all images are added, then click “Apply Changes”
  5. Resize and reposition the widget
  6. Test and publish!

Check out the video above or scan the image below to see how it works, and log in to the Layar Creator today to get started making your own! 

Permalink: www.layar.com/news/blog/488

Email this article
 

New Best Practices Guide & HTML Tutorial

Chris Cameron April 17, 2013

It’s been a few months since we first published our Best Practices Guide for the Layar Creator, and a lot has changed since then! So here we are with a completely refreshed and updated guide filled with loads of new insights from successful interactive print campaigns.

In our new guide, titled Steps to Effective Campaign Creation, you can find lots of great tips to make your next interactive print campaign your best one yet. In the guide you’ll find:

  • Getting started with interactive print
  • Best practices for the Layar Creator
  • Concepting your campaign
  • “Dos and Don’ts” for instruction pages, calls-to-action and more
  • Testing your campaign
  • Integrating interactive print into your workflow
  • And more!

We’ve worked very hard to create a friendly guide that should help improve your interactive print campaigns, but let us know if you think anything’s missing or if you have any questions. Just mail georgia@layar.com to get in touch.

Click here to download the all new Best Practices Guide.

Not long ago on the blog we featured HTML Week and the all new HTML-infused LAYARED Magazine. Now we’ve got a great HTML Widget tutorial that shows some of the capabilities of the HTML Widget.

One way to offer readers more content in a single space is to create an HTML Widget with expandable and collapsible content areas. It’s great for adding an FAQ, images or extra product information to your printed pages in a way that’s friendly to users and easy to build.

Follow this link to check out the tutorial and download our example template to build your own!

Permalink: www.layar.com/news/blog/482

Email this article
 

HTML Week - Walkthrough Tutorial

Chris Cameron March 15, 2013

Catch up with HTML Week!

Welcome to HTML Week here on the Layar blog where we’ll be taking a look at some of the great ways you can bring print alive with HTML widgets in the Layar Creator. We’ll provide a closer look at how each example was built, and provide you with some resources to add similar techniques to your own projects. Each example we feature can be found in the completely refreshed and updated LAYARED Magazine! Get yours today and see how interactive print is creating more engaging reader experiences!

It’s the final day of HTML Week here on the Layar blog, and we saved a really great example for last!

In the very middle of LAYARED Magazine – pages 16 and 17 – a two page spread advertises the Layar Creator, including the quick steps to making interactive print. The illustrated spread provides a great overview of what it takes to use the Layar Creator, but scanning the page takes this to a whole new level.

Using some of the same basic HTML tricks we’ve been featuring throughout HTML Week, we created an engaging, animated walkthrough of using the Creator. Readers are directed to tap through the various steps of uploading pages, adding augments and publishing a campaign. Just follow along and tap the “Tap Here” buttons and you’ll be a pro at the Layar Creator in no time.

It’s a great example of how the HTML Widget in the Creator can be used to provide an immersive experience for readers. Here’s more about this widget:

  • Uses similar jQuery techniques from other HTML Week examples.
  • Uses the FlexSlider plugin for the slideshow at the beginning.
  • The steps are a series of screenshots from the Layar Creator.
  • Includes a “View in Fullscreen” button so users can follow the tutorial without needing to hold their device over the page for an extended period of time.

Again, this example seems more complex than it actually is. Using the FlexSlider plugin mentioned above, we created a few basic slides to introduce the walkthrough widget. When a user taps on a step to enter the tutorial, the slider fades away.

The green “Tap Here” buttons are very simple as well. It’s essentially three different elements that fade in and out on top of one another to produce a nice effect that encourages the user to tap the icon. Using timing and opacity options, the inner circle first fades in, followed by the outer rings. Then the inner circle fades out leaving the rings to guide the user.

The rest of the widget is simply fading from one screenshot to another, triggered by the user tapping the icons. It’s a very simple implementation but in this case it goes a long way toward educating readers of LAYARED Magazine about how the Layar Creator actually works.

After running through the 6 steps, readers are then familiar with how to create interactive print and are ready to hit the ground running when they use the Creator on the Web for the first time. This same widget could be used for any of a variety of purposes, from an app tutorial to instructions on constructing your new furniture. As with all HTML widgets, the possibilities are only limited by your imagination.

And that wraps it up for this example and HTML Week. Follow the links above to review all of our widget breakdowns from this week!

Permalink: www.layar.com/news/blog/469

Email this article
 
We use cookies to improve our services. Don’t worry, they don’t store personal or sensitive information and you can disable them at any time in your browser settings.