When we began building Flite Design Studio, our goal was to make it a perfect extension point for designers who live in creative tools, such as Adobe Photoshop and Illustrator. One of the key features of  Design Studio is that it’s web-based, but we’ve always felt it important to make it feel familiar as installed desktop software. And thinking of creative ways to help designers transition from their static Photoshop comps to layered, interactive Flite ads that made use of our live components has been something we’ve been keen on from the beginning. So we asked ourselves how we could best integrate our designers’ creative work and workflows in Adobe Photoshop and translate them over to Flite Design Studio.

Flite Design Studio keyboard shortcuts should be familiar to power users of Photoshop's shortcuts.
Flite Design Studio keyboard shortcuts should be familiar to power users of Photoshop's shortcuts.

First we looked at the overall user experience and efficiencies that designers would have picked up over time with their hours in Photoshop. The panel-driven contextual workflow that we’ve implemented into Design Studio should allow users to feel right at home. And Design Studio’s Layers panel follows the same layer group and layer conventions as Photoshop. We also have similar Rulers and Guides. Lastly, we offer keyboard shortcuts that map very closely to the default shortcuts found in Photoshop and other popular Adobe tools. That way you can take full advantage of the years of muscle memory you’ve developed for using Photoshop keyboard shortcuts.

While keyboard shortcuts and familiar utilities were a start, we set out to go further by integrating Photoshop workflows with Design Studio. Namely, enabling Photoshop importing in Design Studio. Now, in the HTML5 mode of Design Studio, you can select, “Import Photoshop (.psd)” from the main Commands menu (gear icon) or from the Make New Ad dialog. Choose a Photoshop file to import and Design Studio will import individual layers and layer groups, just as they were structured in your Photoshop file. Once the import is complete, you can continue to assemble your Flite ad.

Here’s a built out Photoshop comp that’s good for trying out the Photoshop Importing feature within the Design Studio HTML5: FIAT 500 Creative RW.psd

Photoshop importing is a great feature and once you try it, we hope you agree. But we didn’t want to stop there. We’ve made it so that if you name your layers a certain way, that, on import we intelligently swap the layer bounds out with a live component that sets up for further customization. For example, name a layer in Photoshop “$twitter@flite” and on import, that layer gets swapped out for our Twitter component with the username already configured with the Flite username. Here’s a list of the layer naming conventions we implemented:

$twitter@{username} —> replaces with Twitter component with the username defined.

$youtube@{videoID} —> replaces with YouTube component with the video ID defined.

$shape —> replaces with a Shape component (rectangles only and no background fill).

$button@{label} —> replaces with Button component with the label defined.

layername@60 —> imports as an Image component with lossy (JPEG) compression set to 60 (1-100 in compression weight).

More information on this, can be found here: Photoshop (.psd) Import.

Here’s a simple example Photoshop file that demonstrates how the Layer Naming Import works and a video tutorial to go along with it: Layer Naming Import.psd

We hope you find our Photoshop integrations helpful in extending your creative work and seamlessly  assembling your ads in Flite. Take full advantage of working directly on the Web. Bring in the best from the Web by dragging and dropping live components into your ad comps and adding in interactions via our new advanced actions and animations. Design for the Web, on the Web.

If you have any questions  or suggestions on how we can make Design Studio work even better for you, please don’t hesitate to drop us a line.