Getting the most out of Creative Cloud in Dreamweaver (Part III)

We explored the collaborative features, sync feature, Creative Cloud for desktop app, and Creative Cloud add-ons in the first and second part of the series. In this third and last part, let’s take a closer look at design tools and services on Creative Cloud that are tightly integrated with Dreamweaver to help you design web sites and apps for the modern web.

Design and development:

 Photoshop: One of the earliest tools to have been integrated with Dreamweaver, Photoshop is undoubtedly the most sought after tool for designing web comps. Creative Cloud provides more ways than one to convert these comps into web sites:

  • Extract: Extract is a Creative Cloud service that is integrated with Photoshop and Dreamweaver to make Photoshop design to code workflow easier and faster.
    • Workflow 1: Photoshop -> Creative Cloud -> Dreamweaver. You can extract assets using the Extract Assets option in Photoshop and upload the extracted assets to Creative Cloud. When you share the assets folder with web developers, they can open the shared link in a web browser and use the Extract panel to copy CSS, text, images, fonts, colors, and measurements from the comp and paste them in Dreamweaver. For detailed information, read this article.

ps_extract

  • Workflow 2: Extract panel in Dreamweaver: A tighter integration of Extract with Dreamweaver lets you upload and/or open Photoshop files directly from within Dreamweaver using the Extract panel. You can then drag the required assets directly onto Live View or get the assets and other code information as code hints in Code View. For detailed information, read this article.

dw_extract

  • Copy CSS: Want to get an image layer or a text layer on to your web page? Do it in a blink of your eye using the Copy CSS option. Right-click the layer, click Copy CSS, and then paste the code into your Dreamweaver code. For more information, read this article.
  • Round-tripping with Photoshop in Dreamweaver: Directly insert PSD files in Dreamweaver and during inserting, choose a web-compatible format (JPEG, PNG etc). Dreamweaver maintains the link between the inserted file and the original PSD file. When the original file is modified, Dreamweaver displays a visual indication that the image is out-of-sync with its original. You can then choose to sync it up or leave it as is based on your requirement.

Illustrator: Another tool that designers commonly use for designing web comps, Illustrator, too provides a very easy way to generate CSS for artworks. You can then copy a part of the generated CSS or the complete CSS and paste into Dreamweaver. If you prefer exporting CSS to a folder and then link to the folder from within Dreamweaver, you can do so too. For detailed information, read this article.

Edge Brackets Edge Brackets is an open source, lightweight code editor for web developers and designers working with HTML, CSS, and  JavaScript. The biggest advantage of using Edge Brackets is its super-fast code editing features that speeds up development time significantly. For example, if you want to edit a color value, the color palette is shown right on the screen for you to select the required color. You can read more about Edge Brackets here.

Animations and fonts:

Edge Animate Edge Animate is a lightweight, motion graphics tools that lets you create animations using native HTML5, CSS, and JavaScript. You can create animations and build interactivity in Edge Animate, and then import these animations into Dreamweaver with a couple of clicks. For detailed information, read this article.

Edge Web Fonts Edge Web Fonts is a free service that provides access to a large library of fonts for your web site. This service is tightly integrated with Dreamweaver – you can directly choose and load an Edge Web Font from the Manage Fonts dialog box. To know more, read this article.

ewf

Preview:

Edge Inspect When you build web sites for multiple devices, it makes sense that you preview the pages on the targeted devices before publishing the site. Edge Inspect is an excellent tool to preview work-in-progress web projects on devices. Edge Inspect is a Chrome extension that you can install on your computer and then wirelessly pair iOS and/or Android devices. You can browse the pages on your devices in-sync with your computer. You can also perform remote debugging to see the changes instantly on the connected devices. Click here to see how you can use Edge Inspect with Dreamweaver.

Hosting and packaging:

Business Catalyst Business Catalyst is a platform to build, manage, and host web sites. Being a hosted solution, Business Catalyst takes away the regular hassles of updating and maintaining a publishing server for your web sites. You simply need to design or update your web sites in Dreamweaver and use Business Catalyst add-on to publish them.

PhoneGap Build Want to package your web pages as a native mobile app? Try Adobe PhoneGap Build, a standards-based, open-source development framework for building cross-platform mobile apps with HTML, CSS and JavaScript for iOS, Android and Windows Phone 8. Log in to the Adobe PhoneGap Build service on Creative Cloud, upload your web assets (ZIP file containing all HTML, CSS, and JavaScript files), and that’s it! Your mobile app will be packaged in minutes and you will receive the download links right in your inbox.

More resources

Creative Cloud Learn & Support

Dreamweaver help