logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
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


g features
Creative Cloud Classroom with Mike McHugh

Adobe KnowHow Learning Center

Silhouette Studio New PixScan Feature

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor