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.
Yesterday, in Los Angeles, during the Adobe MAX 2014 launch keynote we announced the best versions yet of our Creative Cloud desktop apps and services and new mobile apps… making your creative workflow across apps and devices easier than ever.
We also introduced Creative Cloud Libraries, a design system that provides seamless access to your creative assets across Creative Cloud’s desktop tools and its companion mobile apps and services (such as Creative Cloud Market).
Creative Cloud Libraries uses your Creative Profile to connect your favorite desktop tools, mobile apps and services to each other. Unlocked by your Adobe ID, your Creative Profile is a personalized hub that connects your favorite tools and content in one fluid creative experience.
Great content that moves and inspires is built on a foundation of creative ingredients (assets like colors, text styles, logos, icons, patterns, brushes and images) that you reuse and remix. Today, these ingredients are stored all over the place: on a laptop, on a file server, in cloud storage, or scribbled on a notepad or whiteboard. Finding them when you need them is always more difficult than it should be.
There’s something we learned from a professional chef’s kitchen—where all the ingredients necessary to prepare menu items are laid out and ready to use. In a pro kitchen, chefs prepare dishes quickly and efficiently without pausing to seek out an important ingredient right in the middle of the preparation. This setup even has a fancy name, “mise en place.’
Creative Cloud Libraries is like managing your own professional kitchen, helping you organize and prepare creative ingredients (assets) so that they are where you need them when you need them—in your apps, on the desktop, on your mobile devices, and on the web.
What can you put in your library? Lots of things!
- Colors and Color Themes: Use Adobe Photoshop CC and Illustrator CC, or the Adobe Color CC app on your iPhone to capture your favorite colors. With Color CC you can even capture a set of five colors as a theme.
- Text Styles: In Photoshop and Illustrator CC collect and use all the text settings, from the basics (font size and font family) to the more advanced (OpenType discretionary ligatures). It’s a great way to use consistent text styling across applications which has, for some time, been a frequently requested feature from designers.
- Layer Styles: In Photoshop CC, you can use layer styles to define graphic effects such as drop shadows, glows, bevels, strokes, and fills. And now they can be stored in your Creative Cloud Libraries and reused in other documents.
- Brushes: With the new Adobe Brush CC app we make it incredibly easy to create new brushes right on your iPhone, which you can then use in Photoshop CC, Illustrator CC or on a tablet with Adobe Illustrator Draw. You can also find some beautiful brushes created by members of the Behance community. A part of your Creative Cloud membership, we’ve made a few available in Creative Cloud Market.
- Graphics: There are all sorts of graphic elements you can store in your Creative Cloud Libraries—icons, logos, photos, textures, patterns. Some may be bitmaps, others vector-based; regardless of their original format, you can use them anywhere you can use graphics, and they will be automatically translated to the right format as needed.
Stay in sync
Creative Cloud Libraries are stored on your local device and automatically sync (the power of your Creative Profile) whenever you’re online. While you’re offline you can continue to use, add, remove or modify assets, and the next time you’re connected all of your changes will get synchronized automatically and any necessary updates merged to your local version.
There are many ways to use Creative Cloud Libraries, and you can create as many Creative Cloud Libraries as you’d like. Some suggestions:
- Collect the “go to” assets that you like to reuse across projects
- Make a separate library for each project you’re working on, and group all related assets
- Keep all of your branded assets in one library—like having your own brand guidelines with ready-to-use assets
- Create a “kit” of user interface elements to quickly whip out screen prototypes
- Keep a set of ingredients in a library to use for a campaign you’re working on
- Gather a set of inspirational assets to build a virtual “mood board” for your next project
We’re sure you’ll come up with more ways to use them. Let us know in the comments below how you plan to use Libraries.
Inspiration can strike anytime, anywhere. It doesn’t wait until you are conveniently sitting at your desk. With our new mobile apps, Adobe Brush CC, Adobe Shape CC and Adobe Color CC you can grab inspiration with your mobile device no matter where you are. Using your device’s camera, turn what you see around you into color themes with Adobe Color CC, create shapes and vector objects with Adobe Shape CC, and unique brushes with Adobe Brush CC.
Once stored in one of your Creative Cloud Libraries, you can use these assets in other mobile apps—such as Adobe Illustrator Draw or Adobe Photoshop Sketch, and you can use in your desktop apps, such as Photoshop CC or Illustrator CC.
To jump start your creativity, we have curated thousands of high-quality assets in Creative Cloud Market. These were created by members of the Behance community, and include useful icons and vector shapes, beautiful patterns, brushes and more. Available from the Creative Cloud desktop app, select any asset as well as the library you want it in, and the asset will appear right where you need it, through your Creative Profile, whether on a desktop or mobile.
Now it’s easy to start a project with your iPhone, continue on your tablet and finish on the desktop. Your creation process is moving effortlessly and fluidly between applications and locations. This is truly connected creativity.
To get started with Creative Cloud Libraries, download our new mobile apps for iOS today from the iTunes App Store. They’re free. Use them on their own or with our completely new Photoshop CC and Illustrator CC, available today as part of your Creative Cloud membership.
And don’t forget, if you’re attending Adobe MAX join us in our session How Creative Ingredients Fuel Creativity and Productivity to learn more about Creative Cloud Libraries.
We’ve done it again (and again, and again, and again)… continued to fulfill our promise for ongoing innovation to Creative Cloud.
Read on to catch up on the latest and greatest Creative Cloud updates to services and apps that will help you get your creative on.
The new Creative Cloud Market, just released in July, is a royalty-free repository that gives paid Creative Cloud members* access to a curated collection of Behance-sourced vector graphics, icons, patterns, UI kits, and layered PSD files. Creative Cloud Market has been a huge hit because it gives members a jump-start on their designs. Find the Market under the Assets tab of the Creative Cloud desktop app.
And stay tuned: Creative Cloud Market is also coming to your browser, and Adobe’s mobile apps, starting with Adobe Sketch (read the update below).
Just a few months after releasing Adobe Photoshop CC with 3D printing capability, we’re now providing expanded support for new 3D printers (MakerBot Replicator 5th Generation), and print services (check our current list of print service providers), and we’ve added a broader range of supported file formats including VRML, U3D, PLY, and IGES. Plus there’s now streamlined 3D painting and the ability to combine multiple jobs into a single print bed. So even if your 3D printer is slow, setting up your design will be quick.
Adobe Muse CC, the app that enables designers, who don’t want to learn code, to build and publish beautiful websites, continues to evolve and gather fans.
Adobe Muse now supports self-hosted web fonts, and the new Bullet Styles and Glyphs panels facilitate one-click addition of bulleted or numbered lists and special characters (such as © or ᵝ). We’ve also partnered with Google to include reCAPTCHA, a free service that uses text and number distortion to distinguish humans from bots. Now you can more easily create better-looking web pages and put the brakes on spam.
Finally, Adobe Sketch (now in version 1.1) keeps getting better.
The mobile drawing app, with the capability to express and connect with the broader creative community now includes free, in-app access to Creative Cloud Market so you can add high-quality assets to compositions on the go, and faster file syncing for easier sharing with Photoshop CC and Illustrator CC. There’s also finer precision when drawing shapes with more finished, chamfered corners with
Adobe Slide or Touch Slide (a built-in feature for drawing straight lines and curves without hardware).
Keep an eye on this blog for our monthly roundup of the new additions to Creative Cloud.
* With the exception of the Creative Cloud Photography and Photoshop Photography plans.
Creative Cloud Learn has hundreds of tutorials that help members get started, grasp essentials, learn how to use new applications, and take full advantage of a Creative Cloud membership.
Switch to Premiere Pro CC
Switch from Final Cut Pro. In this 20-minute tutorial, learn the simple XML workflow for exporting projects from Final Cut Pro and importing them into Premiere Pro CC.
Latest tips for quick video editing. Learn the latest workflow shortcuts, file performance enhancements, scrubbing tricks, and dozens of tips that improve and quicken the video editing experience in Premiere Pro CC.
Export a Digital Cinema Package. Learn how to export a Digital Cinema Package (DCP), an industry-standard collection of digital files, directly from the timeline in Premiere Pro CC.
Work with text in Adobe Muse
Add self-hosted web fonts. Because no one can ever have too many typefaces, Adobe Muse CC just made it easier to use the fonts you already own: In this five-minute video, learn to add web fonts, licensed and downloaded from font foundries or services, to your Adobe Muse font menu.
Bullets and number lists. In this four-minute video, learn how to use the new Bullet, Bullet Styles, and Glyphs panels to easily add great-looking customized bulleted and numbered lists to website designs.
And a couple of extras
Access Creative Cloud Market design assets. Learn how to access and use Creative Cloud Market’s treasure trove of vector graphics, icons, patterns, UI kits, and for-placement images in design and web development projects.
Make selections based on focus. A three-minute how-to about making selections based on depth-of-field using Photoshop CC’s time-saving Focus Mask feature.
Prestige Group, India’s leading real estate developer, delivers superior quality design content using Adobe Creative Cloud for teams.
One of the leading real estate developers in the southern states of India The Prestige Group (Prestige) works across the residential, commercial, retail, leisure, and hospitality sectors. Since its inception in 1986, Prestige has completed 177 projects which include apartment enclaves, shopping malls, and corporate structures.
A long-time Adobe customer, Prestige has used Adobe Photoshop and Illustrator for various stages of project execution; during the initial stages of idea creation and project conceptualization, the design team creates concept presentations: “It’s a collage of various photos and ideas to depict the overall project,” says Aditya Muley, business development and design manager at Morph Design Co., part of the Prestige Group. “In this stage, we use Photoshop extensively to edit multiple photos from the inventory and also from the Internet; Illustrator is useful when there is a requirement to create wallpaper and other designs of interior items,” says Muley.
Once the concept is approved, the property floor plan and the layout is developed using AutoCAD or 3ds Max software. At this stage of concept development, the Prestige design team would once again use Photoshop extensively. “We use Photoshop to import or edit photos, provide multiple textures to the layout, add special effects, and finally to design different views, such as a top view or side view,” says Muley.
Version consistency and license management
Although the firm has been using Adobe creative tools rigorously, there were multiple challenges in terms of using the latest versions of these tools and managing the licenses. “Our traditional approach was to install new versions one, two, or three seats at a time. As a result, we might have designers using one version and the architect team using another, which could cause IT administration issues associated with maintaining multiple software versions,” says Venkat Rao, general manager, IT, Prestige. “We wanted our employees to uniformly use the latest and leading-edge solutions.” The use of the latest versions of the creative tools was vital for Prestige also from a compliance point of view.
Prestige decided to adopt Adobe Create Cloud for teams. “For a rapidly growing firm like ours, the biggest challenge is giving everyone access to the latest software and then tracking application allocations,” says Rao. “That’s why we were excited when we heard about the automated administration in Adobe Creative Cloud for teams.” Prestige also realized that the latest versions of Adobe’s creative tools offer incredible integration, more features, and a greatly advanced—yet familiar—user interface with which its designers can work with higher efficiency. “The incompatibility issue was automatically resolved,” says Rao.
A streamlined migration process
The migration to Creative Cloud for teams went smoothly; post-implementation, Adobe held multiple training sessions on using the tools in Creative Cloud.
Now with simplified access to all of the components in Adobe Creative Cloud for teams and no lag time between versions or upgrades, the designers are always updated. Adobe Creative Cloud for teams gives Prestige upgrades of the software upon release of new versions, plus exclusive features between releases, enabling them to stay up to date on the creative tools integral to their daily workflow.
Multiple new features of Adobe Creative Cloud tools are of great value to Prestige. Adobe Photoshop CC features include effects such as sun glare or artificial light, the ability to edit background and insert images, and ease of obtaining multiple views, which are extensively used by Prestige. “With Photoshop CC, one can directly edit and import textures into AutoCAD or 3ds Max,” says Muley. With Adobe Illustrator CC, Prestige can create new images from scratch, which can then be enlarged and sent out for printing. “We are thrilled with the newly added features of Photoshop CC and Illustrator CC,” says Muley. “In fact, with access to the latest versions of the software, we are empowered to experiment and invent new ideas in project design and execution.”
Maintaining design integrity with Adobe Acrobat CC
During various stages of the project; from conceptualization and design to execution, multiple project designs are required to be shared with internal and external groups of users for review and acceptance. Ensuring the security and integrity of these designs is vital. Also, sharing AutoCAD or 3ds Max design files with a wide group of users created issues. “We wanted the final output to be secured and optimized in its size in order to share it with the internal or external users,” says Muley. Prestige effectively addressed these challenges by standardizing on Adobe Acrobat Pro.
Prestige collaborates on projects across teams and with clients more easily. “We have never faced compatibility issues and the overall workflow has greatly improved with Acrobat,” says Muley.
Simplified management, big savings
The streamlined deployment and administration in Creative Cloud for teams has greatly helped the IT team at Prestige to eliminate many time-consuming manual processes, such as installing packaged software or maintaining version consistency. “We no longer need to perform updates one-by-one on machines as we now have the flexibility to install software onto computers on demand and activate new subscriptions as needed,” says Rao. Creative Cloud for teams has helped Prestige raise the productivity of the IT team by simplifying software administration with license management, automatic tracking, and version upgrades.
Creative Cloud for teams eliminates the need to manage software upgrades. Every employee has automatic access to the latest versions of Adobe products, which not only supports compatibility between workers but enables the company to take advantage of new features without worrying about the cost of upgrades.
For Prestige, Creative Cloud for teams has significantly reduced the total cost of ownership for Adobe solutions by creating a standardized model for purchasing and deploying the most current versions of Creative Cloud tools. “We like paying annually for Adobe Creative Cloud for teams. It’s a much more effective approach to budgeting as it eliminates lump-sum software purchases,” says Rao.
Scalable for future expansion
With better control and higher visibility on license utilization Creative Cloud for teams is a scalable solution. “As our design and architect teams expand, Creative Cloud for teams readily supports us as licenses can be added on-the-fly without major cost implications,” says Rao.
It supports the company’s rapid growth and its ability to efficiently manage the workflow of large and complex real estate projects. “Adobe Creative Cloud for teams helps us become more productive by simplifying software administration with license management and automatic tracking,” says Rao. “The predictable, easily managed model in Creative Cloud for teams allows us to budget for software purchases accordingly and grow as our team grows.”
Read the Prestige Group case study.