Many digital artists create web page layouts in Photoshop® 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.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.