Software Spotlight: Adobe Creative Cloud Workflow – August 2015

With all the new items that have come to Adobe Creative Cloud in 2015, you now have even better ways to improve your workflow. By mocking up your applications using Comp CC and with the addition of the new Artboards in Adobe Photoshop, you can really streamline your work before you hand it off to a developer. The same thing can be done with websites as well, allowing you to provide a responsive site that works well on mobile.

The first workflow is one that will allow you to create application and web layouts quickly and easily. You begin by working with the new Adobe Comp CC, an application designed for use on the iPad. It lets you work like you would on a sketchpad, but unlike the sketchpad lets you instantly convert your designs to live implementations.

It allows you to get your design going quickly and provides you with the flexibility to scratch things out, yet when you finally have something that you want to work with, unlike with a sketchpad you can directly convert it into something that can be used in Photoshop as real objects. You also have the ability to use real assets right in the development process so you don’t waste time as you would on a whiteboard or sketchpad.

Your Comp layout is essentially a template for multiple screens. This way you can have consistency within your mobile app while still having multiple pages. When you send it off to Photoshop, it can open automatically since it is already a Photoshop document. This also means that everything, all of your objects and other assets, are already there and set up for use. By using Photoshop’s Artboards, which were introduced in Photoshop CC 2015, you can work with many designs of different shapes and sizes within Photoshop. To learn more check out the Preview your App Video.

The second workflow is about building responsive websites. It is similar in that you once again begin with Adobe Comp CC to layout your site. Here you begin by adding text and objects to your site and putting the layout together.

Once that is all in order, once again you send it off to Photoshop. You use your Comp as a layout to start your project. Again, all of the assets that you used in your mock-up are still there in the Comp PSD file and so Photoshop will open it up automatically and it’s ready to use. By using Artboards you can see all the screen layouts at once.

From there you can generate a layer comp for each artboard which can then be sent to Dreamweaver for the building of your site. Using Dreamweaver 2015 you can easily build websites that are very responsive. You can use the various layouts you created and make your site much more responsive using the components that come with Dreamweaver. For more information on using this workflow check out the Building Responsive Websites tutorial.

Once again, if you have a subscription to Adobe Creative Cloud, then you already have everything you need to implement these workflows.

[amazon template=iframe image&asin=B009W8YQ6K][amazon template=iframe image&asin=1118646118][amazon template=iframe image&asin=1118639995]