Adobe Photoshop to Edge Reflow Tips and Tricks

In this article we look at the process of using Adobe Photoshop and Edge Reflowwith the Generator plugin. Note that this is designed for both Photoshop and Reflow within the Creative Cloud.

In the previous article we looked at the process of connecting the programs. In this article we’ll create a simple layout in Photoshop which will be imported into Edge Reflow.

Here’s a simple layout in Photoshop CC.

Here is the organization of the layers.

Using the Generator plugin to create the layout went smoothly; until I opened the project in Reflow. As you can see, the layout is a mess and it’s clear that something went wrong in the translation.

After contacting technical support, it turns out that there was additional text, not appearing on the page that caused part of the problem. I deleted that extra text and output the project again.

This is the result. As you can see, it’s not perfect but better than the previous layout. Technical support didn’t have an answer for me as to why I was having these issues. I also noticed I wasn’t the only one having Generator output difficulties, as you can see by this thread.

In an attempt to resolve the problem I decided to selectively turn off layer groups in Photoshop then output those to Reflow and see if I could figure out what went wrong.

For the first step, I turned off the navigation and the paragraph text. As you can see the header and text rendered perfectly. Unfortunately, when I used Generator on the text and navigation, the same output problem remained. Thinking that it might be a design issue, I went back to my original layout and rebuilt the paragraph text and the navigation, using guidelines and hoping that would resolve the problem.

When I rebuilt the navigation boxes and links, this is what it looked like in Photoshop.

This is what it looked like in Reflow. It’s an improvement over the earlier version but it’s still not as good as I had hoped.

 

Note: One thing that happened during the translation is that the font I used in Photoshop wasn’t supported in Reflow. That might have been part of the problem.

Next, I changed the positioning and font of the text in Photoshop. I also reduced the amount of text in an attempt to resolve the problem. I also made sure to use Helvetica, in an attempt to improve the translation.

Unfortunately, it made little difference to Edge Reflow, as you can see; meaning that if you do a layout you’ll have to do some tweaking in Reflow after the fact.

One way of refining the design process is to make use of the template files that Adobe has provided and study them, by breaking them down into sections and seeing if it’s possible to rebuild either the entire file or portions of the file and test the output process to see if you can get the same results. During that process, it would be wise to make notes so you can quickly recall what you did for future projects.

One way of dealing with this problem is not to use Generator to import the complete layout. Instead, an alternative is to write down all the measurements and placements of elements in Photoshop, then use the Generator plugin to render the image assets for Reflow. After that, one could take all the image assets and reassemble the design within Reflow. That strategy by itself would be a time saver.

Creating Additional File Types for Reflow within Photoshop

When working with the Generator plugin you can create additional file types and scaling of images within Photoshop by using the following settings:

Go to File: Generate: Image Assets. Next, you’ll need to rename the layers or layer groups you want to export. Here are some supported tags:

.png (Default value: png32 with semi-transparent alpha), .png8, .png24, .png32

.jpg (Default value: 9), .jpg(1-10), .jpg(1-100%)

.gif

1-n%, (Number) px x (Number) px for scaling

Here are examples of tags in action:

“200% logo-retina.png, logo.png” produces both a 2x and a 1x asset

“heroImage.jpg10” produces a 1x asset with max quality

“400% tuningfork.png, 250×250 tuningfork.jpg40%” produces a 4x PNG asset and a custom-scaled JPEG asset

The above information gives you some quick and easy options for building other image assets for your layouts.

Conclusion

The Adobe Generator is an important step forward, but it’s not perfect, as you can see by my results, even with a simple layout. One thing that would really help is some sort of design guide when building Photoshop layouts that are to be converted into Reflow. As far as I know, nothing like that exists – yet. As with any new technology advances will come over time. It remains to be seen if one will be able to build layouts that will translate perfectly into Reflow without tweaking.

Resources

Photoshop CC Workflow

Reflow Photoshop plugin tutorial (Youtube video)

Import Photoshop Assets into Reflow and use them for responsive design

Edge Reflow Preview forums

How to use Photoshop CC to Automatically Generate Web Graphics