Follow us

Photoshop & Reflow

By Jacob Surber on September 9, 2013 in Update
15

Being a web designer these days probably means you use Photoshop at some point in your design process.  Photoshop is, undoubtedly, the most powerful tool available for expressing creativity.  However, web designers need to express more than just creativity.  Being able to communicate a website’s responsive intent and designing with the power of web technologies are Reflow’s core purposes.  A few months back, at Adobe MAX, we showed a proof-of-concept of how Reflow can work together with Photoshop.  The demo was met with an overwhelming response!  Today, we are thrilled to announce that we’ve reimagined the Photoshop import process. With a few simple clicks, you can now bring your design assets into Edge Reflow.

Reflow Photoshop panel_top

So, how does all this work?

First, you’ll need to install the latest version of Photoshop CC and Edge Reflow.  Once you’ve done so, open a PSD in Photoshop and begin naming layers, layer groups and smart objects with image file extensions like ‘.png’, ‘.jpg’ and ‘.gif’.  As you define image assets, you will be able to create a Reflow project from within Photoshop.  Simply go to File > Generate and select “Edge Reflow Project.”  Doing so will create a Reflow project folder next to your PSD.  This project will not only contain the images that you’ve defined, but also the text and shape layers you used in your PSD.  In addition, both the text and shapes will be imported as editable HTML and CSS.

This file becomes a starting point for your responsive design process.

This is no ‘magic bullet’

There is still a lot of work that goes into creating a responsive comp.  As Reflow processes all of the information from Photoshop, the first thing that you’ll need to do is to map the desktop-based fonts in your PSD to web fonts.  We then translate all of the pixel widths and absolutely positioned elements to percent based and make them relative to each other.  Your design may look like it did in Photoshop, but it will behave very differently.

The next step is to define hierarchy in your design.  By using Ctrl/Cmd R, you can wrap the selected elements in a Box (or DIV).  After you’ve created this hierarchy, the responsive fun begins!  You can begin to resize the design surface and add breakpoints whenever you feel that your design starts to stress.

This is AWESOME! But what else?

In our previous update, we introduced the ability to create multi-page designs in Reflow.  Let’s say you’ve created the second page of your website in a different PSD.  You’ll notice a PS icon to the right of Reflow’s design surface.  That is the ‘Photoshop Connection” panel.  By clicking on “Create New Page” Reflow will connect with Photoshop, grab all of the defined assets, shapes and text (just like from the Photoshop export) and create a brand new page in your Reflow project.  Check out the pages panel in Reflow and you will also notice that even the name of that PSD is transferred to that new page!

You may have UI assets or style guides already created in Photoshop.  You now have the ability to import directly to the Reflow library. This may come in handy if you want to create a brand new Reflow comp, but want to leverage existing assets from a different design.  By simply clicking “Import to Library,” you can start using these elements in your Reflow project.

We are absolutely thrilled about this update, it removes many of the manual production steps, and let’s be honest, who likes those?   This is only our first pass at this workflow. We encourage you to give this a shot and let us know what you think.  We’re going to continue partnering with the Photoshop team to bring more stability and functionality to this cutting edge feature.  To learn more, we have a page dedicated to helping you understand the capabilities and current limitations of the Photoshop connection.  We have both sample files and an in-depth tutorial to help get you started.  If you have any thoughts, we’re listening via Twitter (@Reflow) or the in-app feedback panel.

About the Author

Jacob SurberView all posts by Jacob Surber >