g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Family Travel
Southwest USA
Irish Culture
Home Finance
Comedy Movies
Romance Novels

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Edge Reflow CC and Adobe Generator

Many digital artists create web page layouts in PhotoshopR as comps for client or as a visual representation of a web page design. The next step is to convert the Photoshop layout into a standards compliant HTML5/CSS3 file.

Previously, the digital artist accomplished this via hand coding, using a WYSIWYG software or by using a third party service such as psd2html.com or xhtmlchop.com that perform this task for the digital artist. Now, with the new Adobe Generator technology, the digital artist has a new resource that will simplify the design and development workflow. We can easily convert the Photoshop CC layout to responsive layouts in Edge Reflow CC.

In the File menu of Photoshop CC, there is a new option for this task (File - Generate - Edge Reflow Project). The command will tell Generator to determine the position of each graphic in the Photoshop layout and convert that image assets information into HTML5 divs using CSS3 relative positioning. It even converts the font used in the Photoshop image file into web font information. If there is no corresponding web font, you are asked to choose a replacement font.

With this new command in the File menu, you will tell Generator to create a new project folder containing the standards compliant web project file and the image assets. If you have several Photoshop .psd files that contain layouts for several web pages, you can convert each .psd into a web page. When you open the new project file into Edge Reflow, you will see that the new HTML5/CSS code will display the image assets according to your Photoshop layout. From this point, you can customize your project further with CSS and media query breakpoints in Edge Reflow for the different screen requirements for web browsers, tables and mobile phones.

You can start this same process from within Edge Reflow by clicking the Photoshop icon on the right side of the Reflow workspace. Depending on what image is active in Photoshop (which tab is selected if several images are open in the workspace), you will be asked if you wish to create a new page from the active .psd document.

This is a great step up for the design and development workflow. Because Generator maintains a connection between Photoshop CC and Edge Reflow CC, any changes made in either app will be reflected in the corresponding asset folders.

Disclosure: I was not financially compensated for this article. Adobe supplied a Creative Cloud membership for the purpose of this review. The opinions are completely my own based on my experience.

Join us in the Animation forum. | Join us in the Digital Art forum.


Add Edge+Reflow+CC+and+Adobe+Generator to Twitter Add Edge+Reflow+CC+and+Adobe+Generator to Facebook Add Edge+Reflow+CC+and+Adobe+Generator to MySpace Add Edge+Reflow+CC+and+Adobe+Generator to Del.icio.us Digg Edge+Reflow+CC+and+Adobe+Generator Add Edge+Reflow+CC+and+Adobe+Generator to Yahoo My Web Add Edge+Reflow+CC+and+Adobe+Generator to Google Bookmarks Add Edge+Reflow+CC+and+Adobe+Generator to Stumbleupon Add Edge+Reflow+CC+and+Adobe+Generator to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Santos Cage Doll SVG Cut File - First Steps

SVG Cut File Design of Top Hat

Offset Path in Illustrator

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor