Adobe Systems Incorporated

Creative Cloud for Desktop: Powerful Design Using Fonts from Typekit

Typography can make or break a design. While many apps provide precise typographic controls, it’s important to start with the perfect font. Adobe Typekit opens the door to thousands of fonts for use on the web or in desktop applications.

SyncFonts_1

Every paid Creative Cloud complete membership includes the Typekit Portfolio plan, which provides access to the full library of web and desktop fonts. (If you have a free Creative Cloud subscription, you still get a selection of fonts as part of the Typekit trial plan.)

To access Typekit fonts, you just need to sign in to your Typekit account with the same Adobe ID and password you use for your Creative Cloud membership.


SyncFonts_2

Quick syncing

The Creative Cloud for desktop app syncs desktop fonts to your computer effortlessly. If the Creative Cloud for desktop app is not installed, you will be prompted to download it when you sync fonts using the Typekit account.

In the Creative Cloud app, navigate to the Assets tab and select the Fonts tab to see your current synced fonts and search for new fonts to add. While browsing the fonts library, you can narrow down the fonts for desktop use by enabling the Desktop Use filter in the filtering panel. You can then sync fonts and use them in any application installed on your computer. For more information, see Browse and add fonts from Typekit.

For information about how to use synced fonts in various Creative Cloud applications, see Work with fonts from Typekit in Adobe Photoshop CC, Adobe Illustrator CC, Adobe InDesign CC, Adobe Premiere Pro CC, and Adobe After Effects CC.


SyncFonts_3

Offline use

Synced desktop fonts are available for use even when you’re offline, as long as the Creative Cloud for desktop app is running and you’re signed in. If you quit the Creative Cloud app, synced fonts become temporarily unavailable; signing out from the Creative Cloud app removes synced fonts from your computer. When you sign in again, the fonts are automatically re-synced from Typekit.


SyncFonts_4

Easy font management

You can view synced desktop fonts in the Fonts panel of the Creative Cloud for desktop app, or manage them through your Typekit account. You can also turn font sync on or off from the Preferences panel of the Creative Cloud for desktop app. For more information, see Manage synced fonts.


Go ahead, sync some fonts, and let us know how it goes. For additional help with Typekit and syncing Creative Cloud fonts, you might find the following helpful:

11:23 AM Comments (0) Permalink

E-publishing Evolved

An update on EPUB and DPS, Single Edition

When Adobe first created DPS, Single Edition, in 2011, it was our best available option for individuals who wanted to create books, portfolios, and one-off publications in iPad application format. But in the intervening years, we’ve made two important discoveries: The ongoing evolution of e-publishing technologies has inspired many more of our individual design customers to export interactive e-books (EPUBs), a format that DPS, Single Edition was not intended to support; and that most customers requiring the end-to-end functionality of dynamic app creation and measurement were typically organizations looking to develop enterprise-class apps, or subscription-based publications like magazines.

To help our customers connect to the publication channels best suited for them, we’ve made some shifts to our product offerings.

The Digital Publishing Suite, Single Edition, service will be available for use until May 1, 2015. Customers can redeem previously purchased serial numbers and create or edit apps in the meantime, but beyond that date the service will no longer be available.

Please also note that on December 4, 2014, Single Edition will be removed as a purchasable product from the Adobe.com store. Instead, the 2014 release of Adobe InDesign CC includes a fixed layout EPUB feature that makes it easier for individuals to publish graphic-heavy documents in e-book format. Customers with DPS Pro or Enterprise editions are unaffected by this change and will still be able to create single-issue and multi-issue applications for publication to app stores.DPS provides a custom branded experience for publishers, businesses and universities to produce, distribute and market rich digital publications to apps on phones and tablets.

The new Fixed-layout EPUB export capability announced in the 2014 release of InDesign CC is our powerful, simplified solution for individual designers who want to create interactive, image-rich content intended for publication to channels like the iBooks Store or for ad hoc distribution. By exporting a fixed-layout file into EPUB3 standard format, individuals now have an expanded opportunity to publish across a wider range of tablets. Read more about it in this previous post, Publishing for Everyone: Adobe InDesign CC’s Fixed Layout EPUB Format.

We’re eager to see how individual designers will use Fixed Layout EPUB to engage readers in new and exciting ways and to continue to be impressed by the apps created by DPS for the enterprise.

11:00 AM Comments (8) Permalink

Moleskine + Creative Cloud: Create without Confinement

The Moleskine Smart Notebook and Creative Cloud connected Moleskine app: The raw beginning of putting pencil to paper. The precision of digital composition. From paper to vector in an instant.

Moleskine_1_MCCIcon_1

Sure, Adobe has a bunch of mobile, digital drawing apps for people to capture and create whenever they’re away from their desks. However, we also know there are people who love the tactility of drawing on paper… It’s why we’re so jazzed that paper heavyweight Moleskine has taken advantage of our Creative SDK to make it easier to move creative ideas from paper to screen.

From an analog start in the Moleskine Smart Notebook, to a digital transformation by the magic of the Creative Cloud connected Moleskine app (powered by Adobe’s Creative SDK), comes a condensed creative process that turns hand-drawn sketches into workable digital files—accessible from Adobe Photoshop CC and Adobe Illustrator CC.

Here’s how it works:

Draw: Creative journeys start with a line

Sure, it could happen at a desk, but inspiration and creativity usually spark when creative thinkers are distracted from the task at hand. The Smart Notebook provides the blank space to capture the flickers of inspiration, wherever and whenever they spark. How the pages get filled depends on the person.

So draw. Sketch. Jot. Take notes. Preferably with broad strokes (as opposed to shading) on any page. Using any tool (black ink and markers work best).

Moleskine_2_Desk

Capture: From paper to screen

If Moleskine’s Smart Notebook is the place to collect the flares of inspiration then its Creative Cloud connected app is the bridge to move them into the digital realm.

Download the Moleskine app for iPhone then use the phone’s camera to capture what’s been put on paper. Page markers in the Smart Notebook detect the orientation of the image as well as help correct perspective and alignment distortion before saving JPGs as SVGs. Filter settings help correct poor lighting or too-light drawing lines.

Not satisfied with the result of the JPG file, before converting it to SVG? Simple. Change the settings or reshoot.

Sync & Refine: Expand the ideas

Sync with Creative Cloud to store both files (JPG and SVG) in the Creative Cloud Assets folder. Then open and edit in Photoshop or Illustrator CC (or refine and use the JPG files in other CC desktop and mobile apps). When the work is complete, step back and see how far the idea has traveled. (Give Illustrator and Photoshop CC a try. Free.)

Start drawing outside the box

Ideas are born at all times of day. In the most unexpected places. Capture them before they’re lost:
Moleskine_3_BookApp

  • Order and carry a Moleskine Smart Notebook, to capture ideas when inspiration strikes.
  • Use the Creative Cloud connected Moleskine app to photograph the concepts on paper and transform them to digital files.
  • Then, sync to Creative Cloud, and import them into Illustrator or Photoshop CC to refine them and bring them to life.

Creating without boundaries. It’s that easy.

12:10 PM Comments (9) Permalink

Adobe Ideas: A New Name, A New Look, A New App

IdeasToDraw_1

Recently, Adobe Ideas, our popular vector drawing app for iPad and iPhone, that’s been downloaded over 2.2 million times since May 2013, grew up and got better. Adobe Illustrator Draw is a transformation that means a newer, more modern version of the full-featured drawing app that people have come to rely on.

 

Not just an update; a complete reinterpretation

Instead of settling for just another update, we’ve created an entirely new version of Adobe Ideas. Based on Adobe’s new Creative SDK, the redesigned version of Ideas (Adobe Draw) matches the look and the connection to creative assets and community found in Adobe Photoshop Sketch and Adobe Illustrator Line. But it’s not just creating consistency across our mobile apps that has us so excited, it’s also the new features… which include new, completely rewritten, robust file syncing, and the ability to effortlessly bring files into Adobe Illustrator CC.

Still free. And with the features designers and illustrators love

For everyone who loves Adobe Ideas, don’t worry: Not only have we kept the core drawing elements and everyone’s favorite controls and preferences, but the app is still free.

What we’ve added is Adobe Ink & Slide support, as well as a software version of Slide (called Touch Slide) for drawing straight-lines, geometric shapes and French curves—without hardware. (No longer will it be necessary to create workarounds for drawing perfect circles.) We’ve also added Behance integration, including the ability to post works in progress to Behance and receive in-app feedback; the ability to view a gallery of content inside the app; and effortless Creative Cloud back-up and file syncing.

IdeasToDraw_2

IdeasToDraw_3

Sign-up, sign-in and sync

What can you do to get going with Adobe Draw? Take the time to create an Adobe ID, sign in with it, and sync your Adobe Ideas files to Creative Cloud… because our new drawing app is here. And now that it is, existing Ideas files that are synced to Creative Cloud will be automatically migrated to Adobe Draw. (Files synced to Creative Cloud can be grouped together in folders that will be imported as projects in Draw.)

Brian Yap talked about Adobe Illustrator Draw at Adobe MAX in a session titled What’s New in Adobe Ideas. Give it a watch. Then go get Adobe Draw for iPad in the iTunes App Store. Sync those Adobe Ideas files. Then keep an ongoing listen to Adobe Drawing’s Facebook and Twitter.

11:28 AM Permalink

Introducing… Brackets 1.0 and Extract for Brackets (Preview)

The Brackets team is celebrating a huge milestone today—reaching the 1.0 version of its popular open source text editors, and releasing a preview version of Extract for Brackets, the new Creative Cloud comp-to-code service that speeds up the process of pulling design information like colors, fonts and measurement info out of a PSD and turning it into clean, minimal CSS.

Both are immediately available today as free downloads.

brackets_logo_flat

What is Brackets?

Brackets is a modern, open source text editor that understands web design. It was built for web designers and front-end developers working with HTML, CSS, and JavaScript. Adobe not only created Brackets, but we’re also a key contributor to the project. When we first started Brackets we wanted to release early and often. We’ve done both. This will mark the 45th release of Brackets in 3 years; it’s a pace of innovation that our teams are able to maintain now that we’ve moved to Creative Cloud.

ExtractBrackets_2

Introducing Extract for Brackets (preview)

This release also includes a preview of Extract for Brackets, a new Creative Cloud service that lets you view and get information and assets out of a PSD right from your text editor. Extract for Brackets lets you pull things like colors, fonts, measurement, gradients, and more from a PSD in the form of contextual code hints in CSS and HTML files. You can also extract layers as images, use information from the PSD to define preprocessor variables, and easily get dimensions between objects. We’re really excited about how it will improve the process of moving from design to development and speed workflows.

ExtractBrackets_3

If you haven’t looked at Brackets in a while or are brand new to it, now is a great time to see the awesome stuff we’ve been working on.

Brackets blends visual tools right into the editor so you get the right amount of help when you want it. In more recent releases, we’ve added multiple cursors, split view, theme support, and many more fixes and enhancements.

Extract for Brackets (preview) can be downloaded as a standalone extension from the Brackets Extension Registry or included with Brackets 1.0 in a bundle that’s immediately available as a free download from brackets.io.

Join us!

10:22 AM Permalink

Typekit: New Fonts from Hamilton Wood Type Foundry

HWT_5_TypekitLogo

Good news for your desktop (and your websites): We’ve added a boatload of new typefaces from Hamilton Wood Type Foundry to the Typekit library.

Hamilton Wood Type (HWT) is a partnership between the P22 type foundry and the Hamilton Wood Type & Printing Museum, bringing 19th-century wood type designs into modern font formats. We’ve long been supporters of this cause at Adobe Type, conducting fundraisers and making donations, and helping with the digitization effort. Three of the designs in the HWT collection were digitized by members of our team: Gothic Round by me, Tuscan Extended by Frank Greißhammer, and Bulletin Script by Paul Hunt.

The bulk of the HWT Collection is comprised of digital revivals, but it also includes two original designs made by Erik Spiekermann (HWT Artz) and Matthew Carter (HWT Van Lanen).

We included just a couple of HWT fonts in our library prior to this release, but now we’re all caught up: All of the font families of the current HWT collection are now available at Typekit, and you can use any of them on your desktop (and, in most cases, on the web) with a Portfolio plan or higher.

This initiative not only helps the dissemination of fonts that were previously only available as wood type, but it also helps the preservation of wood type history since a portion of proceeds from all sales of the HWT digital fonts goes toward supporting the mission and operation of the The Hamilton Wood Type & Printing Museum.

With over twenty fonts new to the Typekit library from HWT, we’d be here all day if we profiled each one. Here’s a handful to give you a sample (be sure to check out the full list.)

HWT American

HWT_1_American

HWT American Chromatic was the first design in the collection to be digitized (the term chromatic means that it’s made up of fonts that act as layers, to which different colors can be applied—resulting in rich, attention-grabbing headlines. The family has a total of eight styles that can be arranged in multiple combinations for an almost endless number of variations. Try layering the styles on a web page using CSS, or create interesting hues in print by letting the colors overprint. The Behance gallery from Hamilton Wood Type goes into more detail about the work that went into digitizing this one-of-a-kind font family.

HWT Gothic Round

HWT_2_GothicRound

It’s hard to believe the contemporary-looking HWT Gothic Round was originally designed almost two centuries ago, in 1838. The round edges of this Gothic (or sans-serif) face give the design an undeniable warmth and bubbly quality—particularly noticeable in the lowercase letters. The design’s heavy weight provides plenty of impact in applications that demand a reader’s heightened attention, such as a magazine masthead or a store sign. This typeface was a 2013 Typographica favorite; see more about the work that went into digitizing it.

HWT Unit Gothic

HWT_3_Unit

First shown in a magazine advertisement in 1907, the HWT Unit Gothic series includes a breadth of weight and width styles rarely seen in wood type designs. Seamlessly organized as a system of fonts, this family is believed to have been the predecessor of the neo-grotesque collections—Helvetica and Univers—released around 50 years later. Besides supporting extended Latin, HWT Unit Gothic also includes Greek and Cyrillic, thus providing broad language coverage for a wide range of applications, from newspaper headlines to logos. Read more about the digitization process for this typeface on the Hamilton Wood Type Behance page.

HWT Van Lanen

HWT_4_VanLanen

In 2002, the Hamilton Wood Type & Printing Museum commissioned typeface designer Matthew Carter to develop a new wood type design as a way to help promote the newly established facility. Part of the project included the fabrication of actual wood blocks. Named after Jim Van Lanen, the museum’s founder, this bold wedge-shape serifed design of HWT Van Lanen is reminiscent of the Latin Extended style popularized in the late 19th century. Included in the family is a reversed font style, called Streamer, that can be used on its own or in combination with the default style to create interesting chromatic effects. See the Hamilton Wood Type Behance page for more details about the making of Van Lanen.

Let us know what you make with these new fonts; we love seeing cool type in action. And if you’ve never tried Typekit, sign up for a free trial and take a look around… then upgrade to a paid plan when you’re ready.

Reposted from the Typekit blog.

12:59 PM Permalink

From Adobe Ideas to Adobe Illustrator Draw: Making The Switch

For quite some time, designer/illustrator Brian Yap has integrated mobile art applications into his professional creative workflow… His mobile app of choice? Adobe Ideas. He’s used the full-featured vector app to capture illustrative concepts, develop them, and later move them to Adobe Illustrator CC for fine-tuning. It’s led to a successful creative process and an identifiable Ideas-to-Illustrator illustration style.

Like many Adobe Ideas users, Brian recently made the switch to Adobe Illustrator Draw. After Brian’s Adobe MAX sessions (What’s New in Adobe Ideas and Designing a Poster Using Adobe Mobile Creative Apps), we asked him to share some of his initial thoughts about making the move. Here’s what he had to say:

By Brian Yap—using Photoshop Mix, Adobe Sketch, Adobe Draw, and Illustrator CC—for his Adobe MAX session Designing a Poster Using Adobe Mobile Creative Apps.

By Brian Yap—using Photoshop Mix, Adobe Sketch, Adobe Draw, and Illustrator CC—for his Adobe MAX session Designing a Poster Using Adobe Mobile Creative Apps.

Adobe Ideas was the most powerful vector drawing tool for the iPad, and it changed the way I thought about the device as a professional tool. Adobe Illustrator Draw is a continuing evolution of Ideas, and proves that the development team is listening and reacting to the community in way unheard of when it comes to graphics applications. Use it. Love it. Become part of its future development.

Of course I always have the immediate reaction, “Why does this thing I love need to change?” But it didn’t take long to fall in love again; besides some amazing enhancements to the drawing engine that I’ve grown to love, the UI has been totally designed with a lot of user feedback taken into account.

Overall, pretty much every time I panicked a bit because a feature I depended on seemed to be taken out, I not only found it a few seconds later, but quickly realized the thinking that went into the redesign. A few thoughts:

While the tools are generally the same, the icons are way more descriptive of what the tools actually do (something I always wondered about with Ideas). As an example, I always thought it was a bit confusing to have a pencil icon for a tool that didn’t have a pencil texture.

There were some cuts made to the tools but with a little trial it’s easy to see why: The “long press” while using a tool was always the same as the paint bucket so the paint bucket tool itself was somewhat unnecessary. Although I was always in the camp of the “long press” I imagine people who relied heavily on the paint bucket will find that change a bit tricky at first.

I like that the Gallery interface is in line with the other new apps that take more advantage of the connection to Behance and the Creative Cloud.

By far the biggest change is in the layers options; Draw is much more focused on the options for each layer. In Ideas, I was constantly merging layers I didn’t mean to merge. Now that the options are reached through touching the layer options icon on each layer, it’s always clear which layer is being affected. One tip: The merge down button is now under the icon that covers flipping the layer.

Finally, based on what I’ve heard, there is some concern about the lack of PDF export… I’ve been told that the option will be added back in a future update.

 

We’ve asked Brian to keep us updated about his Draw discoveries, so stay tuned to Adobe Drawing on Twitter and Facebook. And for a few tips about syncing Adobe Ideas files to Creative Cloud, Adobe Ideas: A Transformation is a quick read.

10:22 AM Permalink

Introducing Adobe Premiere Clip

Ever felt intimidated by the prospect of putting together a video project? With Premiere Clip, Adobe wants to make video accessible to all creative professionals.

Adobe Premiere Clip is our brand new (and free!) app that lets you, in a few quick steps, turn clips and images from your iPhone or iPad into polished videos, and then share them with friends, family, clients, and the world at large. It’s a powerful tool for creative pros; and for established video pros, the app makes it easy to create edits on-the-go and draft a project for further refining in Adobe Premiere Pro CC.

Watch the Premiere Clip demo from the mobile apps keynote at Adobe MAX:
IntroducingClip_2

With its simple editing workflow, it’s easy to work with assets  already on your device or those you have stored on Adobe Creative Cloud. You can also shoot new video from within Premiere Clip: Just grab clips and still images, drop them into the order you like, trim out the bits you don’t want. Set the mood by using one of the included music themes or by adding your own audio file.  Add cinema-quality color treatments to your video with a single tap. Adjust lighting or add slow motion effects and other finishing touches like fades or transitions.

Dave Werner’s Made With Clip video of Adobe MAX:

You can even work on your project across devices (starting on your your iPhone and then switching to your iPad, for example) thanks to automatic syncing of projects and media through your Creative Cloud Creative Profile.

Once you’ve completed a video, share it with your audience through social media, your website, or any number of other platforms.

Want to take a project further? Sending it to Premiere Pro CC is easy too. Through the app’s Edit in Premiere Pro sharing feature, send everything in your project as a group of files to the Creative Cloud Assets folder on your desktop. Once the files have been synced to your desktop, simply open the XML file with Adobe Premiere Pro, and open the sequence with the project name.

IntroducingClip_1

Still not sure where to begin? Try one of our Reviewer’s Guides to help you get started. These guides breakdown some of the conventions of different types of videos and can kickstart your pre-production with pointers on creating a narrative and suggestions for shot composition. All you need to do is fill in your content.

What will you create with Premiere Clip? We can’t wait to see!  Include #MadeWithClip when sharing on social media. Check out the Community Videos page in the app for inspiration and publish your projects as “Public” for a chance to be featured. And, make sure to follow the Premiere Clip Twitter feed and blog for news, highlights, tips, and tricks.

Premiere Clip is available now in the iTunes App Store for most iPad, iPhone, and iPod touch devices with iOS 7 or later, including iPad 2 or later (mini and retina), iPhones 4S and later, and iPod Touch 5th generation and later. (Unsure of your device model? Check the model number on the back and consult Apple’s guide for iPads, iPhones, and iPods.)


Learn more about Premiere Clip
Download Premiere Clip from the App Store
Follow Premiere Clip on Twitter
Watch Meagan Keane’s demo and see what all the buzz is about

11:15 AM Permalink

Creative Cloud for Desktop: The Smart Tool for New Creatives

CCDesktop_1

Bring the goodness of Creative Cloud right to your desktop.

Creative Cloud for desktop is a lightweight, configurable app that lets you manage Creative Cloud apps, sync assets, receive notifications, and connect to powerful Cloud functionality and services—all from the comfort of your desktop.

Creative Cloud for desktop enables your Creative Profile. An effective way of managing your creative assets across apps and devices, Creative Profile connects you to everything you need for your creative work—files, pictures, colors, brushes, shapes, fonts, text styles, graphics, and any other creative assets you care about—and puts it all at your fingertips, by simply signing into Creative Cloud for desktop.

Let’s take a closer look at the feature-rich technologies and powerful Cloud services that Creative Cloud for desktop offers:

Apps

Creative Cloud for desktop makes it easy to discover, download, and install the newest Creative Cloud desktop apps to your computer. In addition to the latest versions, you can also find previous versions of apps, and receive notifications about updates as soon as they’re available.

CCDesktop_2

Creative Cloud for desktop is also now a one-stop shop to launch apps, manage updates, and even uninstall older apps that you no longer need.

Assets, libraries, and more

Creative Cloud comes with online storage that lets you access your work from anywhere and share your work with others in any location. Creative Cloud for desktop connects your Creative Cloud online storage to your computer, keeping all your files in sync, across all your computers.

CCDesktop_3

With Creative Cloud for desktop, you’ll never run into a “missing font” scenario. Use the Creative Cloud for desktop app to sync fonts from Typekit on your desktop; synced fonts continue to be available on your computer, as long as the Creative Cloud for desktop app is running. Use the synced fonts in your favorite Adobe apps, as well as any other apps installed on your computer.

Your creativity can reach greater heights with Creative Cloud Market, a collection of high-quality assets, created and curated by professionals like you. You can build on these assets, modify them, and use them without worrying about attribution, licensing, usage tracking, or royalty payments. Simply use the Creative Cloud for desktop app to browse through the assets, add to a Library, and download the assets to your computer.

During the Adobe MAX 2014 launch keynote, we announced availability of Creative Cloud Libraries which provide seamless access to your creative assets across Creative Cloud’s desktop tools and all-new connected mobile apps. Creative Cloud for desktop helps to keep your Creative Cloud Libraries in sync, so that any brushes, shapes, colors, graphics, or assets you save to a Library, are instantly available on your desktop from within Adobe Photoshop CC and Illustrator CC.

Community

How can a creative experience be complete without a community? Use the Creative Cloud for desktop app to dig in to the vast collective of creative talent on Behance. Remain inspired and keep ahead of the curve by following other creative people. You can browse through projects, share and seek feedback about your work, and take a closer look at a project that piques your interest all from within the Creative Cloud for desktop app.

CCDesktop_4

Get started with Creative Cloud for desktop

Creative Cloud for desktop is your interface to Creative Cloud on the desktop!

Always stay up to date with what’s happening in your creative world by using notifications in Creative Cloud for desktop. If you don’t have it running already, download Creative Cloud for desktop now and get the most out of your Creative Cloud experience.

While Creative Cloud for desktop works behind the scenes to bring your Creative Cloud Profile to your computer, you can also use it actively to access Creative Cloud products and services. To learn more about what you can do with Creative Cloud for desktop, read through these resources:

10:31 AM Permalink

From Design to Code, in A Snap, with Creative Cloud Extract

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.

ExtractAssets_1

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.

ExtractAssets_2

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.

ExtractAssets_3

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.

ExtractAssets_4

10:19 AM Permalink