With the release of the Creative Cloud Extract, Adobe has made it easier to go from Adobe Photoshop CC design to code. In the past, this workflow often included a tedious process of creating a specification, style guide or red lines for a design so that a developer could more easily translate it into code. Extract provides solutions for getting the style information out of a design in just a few clicks. This information includes positioning of elements, sizes, colors, fonts and gradients. We have also streamlined the process of exporting assets out of Photoshop CC.
What’s new for designers and developers:
Extract Assets in Photoshop CC
With the October update of Photoshop CC comes a new feature called “Extract Assets” that allows designers to quickly extract image assets from layers for multiple screens. You might be familiar with using slices to get images out from Photoshop CC, or repetitively having to “Save for Web” for each image you need. With Extract, you can manage all assets for web and mobile designs, in one dialog. It will save you so much time: Just select all the layers you want to export and choose the “Extract Assets” menu item.
From the Extract Assets dialog where you specify formats to output (PNG, JPG, GIF or SVG), you can also view a preview of the image to be created, setup 1x, 2x or more versions of all image assets, and add or remove layers from which to extract assets. For more information on Extract Assets in Photoshop, visit this CC Learn tutorial.
Extract in Creative Cloud Assets
If you store PSDs in Creative Cloud, you get access to so much more useful web information. The Extract view of your PSD in Creative Cloud gives you access to the following information:
- The layer hierarchy along with the ability to toggle layers on and off
- CSS styles for layers
- A style guide of colors and fonts used in the design
- Position and size of elements in the design
- The ability to extract assets to PNG, JPG or SVG
From Creative Cloud Assets, this PSD can also be shared with anyone. Using the public URL, the recipient can use Extract in Creative Cloud Assets in their browser to get all of the same useful information to translate this design into code.
Extract in Dreamweaver
You can now browse and view your Photoshop CC documents stored in Creative Cloud directly within Adobe Dreamweaver CC, letting you rapidly take your designs to code. Yes, that’s right, you can open a fully-layered PSD in Dreamweaver CC. When a PSD is loaded, you can extract CSS, colors, gradients, fonts, measurements and web-optimized images from your Photoshop layers when building your web projects. This will let you preserve the integrity of the design when bringing it to code, and takes the guesswork out of how that PSD will translate to web.
When a PSD is loaded in Dreamweaver CC, you can fully inspect the CSS pulled from Photoshop CC layers. When you select a layer, you’ll see all the CSS associated with that selection. This is useful for grabbing colors, gradients, border-radius, font styles and more when building the front-end of your website—it’s kind of like Web Inspector for a PSD.
You can also code hint directly into a PSD for full control as you write styles. When writing CSS, contextual code hints are pulled right from your Photoshop CC layers, expediting the time it takes to go from comp to code. For more information on Extract in Dreamweaver CC, visit this CC Learn article.
One of the best things about Creative Cloud is that members have access to new product features as soon as they’re developed. Adobe’s Creative Cloud Learn team makes sure Creative Cloud members have the knowledge they need to use them.
The team recently published a host of new hands-on tutorials and videos aimed at helping both novice and experienced web designers get the most out of the recently-released features in Adobe Dreamweaver CC. So there’s no reason not to start using the new features in Dreamweaver CC:
How to use CSS in Dreamweaver
In this hands-on tutorial, learn the basics of Cascading Style Sheets (CSS), and what tools are available in Dreamweaver CC for applying CSS to add style to web pages.
Edit CSS properties visually
Use the visual CSS Designer panel in Dreamweaver CC to control the appearance of your HTML content.
Use Live Highlight and modernized Live View
Learn about Dreamweaver CC’s Live Highlight, CSS Designer, and how to edit and preview web pages with new Live View features.
Learn the user interface
Learn about the different panels, menu options, and editing views for creating web pages in Dreamweaver CC.
Learn how to develop responsive and mobile sites
Take the next step in web design by developing fully responsive sites and mobile apps with Dreamweaver CC.
Use Code View to edit web designs
Design web pages using the tools in Dreamweaver CC to write and manage code.
Create HTML5-compliant pages
Learn how to add HTML content with the visual tools in Dreamweaver CC.
Preview web designs
Learn about the different ways to test and preview web design projects.
Publish and manage websites
Learn how to publish and manage the websites you build.
And those are just a start. Check out the full list of Dreamweaver CC tutorials.
On June 18 2014, at a Creative Cloud launch event, Adobe introduced exciting new features to the applications in Creative Cloud, a newly reimagined Adobe.com, and hundreds of new Creative Cloud tutorials.
I want to share with you the new design for Adobe.com and its integration with Creative Cloud’s Learn, Help and Support content, which is now accessible from any of the product pages, or from the Learn and Support landing page.
Hundreds of tutorials
A big focus of this redesign was to make it much easier for everyone to find and access learn content. Another important focus was to provide richer content. The larger variety of learn content now includes single video overviews, multi-video step-by-step processes and longer project-based articles.
As much as possible, the Creative Cloud Learn team worked to provide content aimed at encouraging Creative Cloud members to get their hands on the products and try the new features and workflows themselves; the ability to download project files makes it easy to jump in quickly and start building solutions of your own.
From the home page
The menu sandwich icon appears on every page of Adobe.com and provides links to all of the Creative Cloud products as well as Learn & Support.
All product home pages can be accessed from the main page by clicking on the icon for any of the featured products or the All Products button. Learning opportunities are widely integrated throughout Adobe.com and some, such as the updated Live Design feature for Adobe Dreamweaver CC, have a feature preview that can be viewed from the main product page.
Anywhere you see a See How It Works link, you can click it to get a new or updated tutorial to begin working with that feature. The See How It Works link on the Dreamweaver CC product page marquee image takes you to an in-depth, hands-on tutorial from which you can download the project files and begin working with the new feature.
Scrolling down from the marquee image reveals links to the next four new/popular product features from the current release and access to corresponding tutorials. Below each image is a See How It Works link.
From the product pages
Click Learn and Support from any of the pages on Adobe.com. Dig deeper by going to the Learn and Support landing page to get access to all of the Learning, help and support content for the Creative Cloud products.
Content tiles across the top provide access to the primary learning content for each of the learn categories as well as direct access to that product’s online help. Click the Show All tutorials link to reveal the navigation section to access all of the learn tutorials and click Hide All Tutorials to save space.
A variety of Learn content types
Creative Cloud Learn content now comes in a wider variety of content types:
We’ve added a lot more in the way of project-based videos with downloadable project files so members can try the steps on their own. For example, the tutorials for Dreamweaver’s new and updated Live View, CSS Designer, Element Quick View, Modern Platform Support, Integration with Edge Animate, all now have project-based tutorials with project files. (Downloadable project files are accessible by clicking the Get Files button in the What do I need? section at the top of the tutorial.)
Single-video tutorials, such as What Is Dreamweaver, demonstrate specific concepts or features. Just click the Play button directly in the marquee image.
Multiple-video tutorials, such as How to Make and Style A Web Page in Dreamweaver, break a project down into logical steps. Many of these have project files that you can download and follow along with the presenter.
Learn content is also available within the products themselves. Each product has an in-app feature tour and new feature videos—available from the Welcome screen and Help menus. In-app feature tours provide an animated overview of the new features along with videos introducing the new features and how they work.
Project Hello in Adobe Illustrator CC and Adobe Muse CC
Whether it’s something you like or some way we can improve our Learn content, we want to know… Each product tutorial has a feedback link at the bottom. Let us know what you think.
I’m very excited about the new Learn offering available in conjunction with the Creative Cloud 2014 launch: Not only do the designs of the marquee images and tutorial assets, by our talented design team, really show the potential of what can be done with the Creative Cloud products but the content is richer than ever before, and the variety of tutorials will definitely appeal to a range of learning styles.