PHOTOSHOP.COM BLOG

See what's possible.

Apple’s Aperture News

Today, Apple announced they will no longer be developing Aperture in light of their new photography app for OS X. If you are an Aperture or iPhoto customer looking for change, check out our new Creative Cloud Photography plan announced last week, or our standalone Lightroom app for your desktop as alternatives.

The all new Creative Cloud Photography Plan gives you Photoshop (Mac / Win) and Lightroom (Mac / Win / iPhone / iPad / Web). This new offer not only addresses traditional desktop photo requirements but extends these workflows to the web and your mobile devices. Today, Lightroom mobile provides seamless access from desktop, tablet, phone and web.

Put simply we’re doubling down on our investments in Lightroom and the new Creative Cloud Photography plan and you can expect to see a rich roadmap of rapid innovation for desktop, web and device workflows in the coming weeks, months and years. We also continue to invest actively on the iOS and OSX platforms, and are committed to helping interested iPhoto and Aperture customers migrate to our rich solution across desktop, device and web workflows.

To learn more about our offer for Photographers click here. To learn more about the announcements we made last week click here.

Crank it up to 15: Introducing Adobe Photoshop CC 2014

Today, we are launching a new Creative Cloud Photography plan for $9.99 a month. In response to overwhelmingly positive feedback from you about our $9.99 per month promotional bundle of Photoshop and Lightroom, today we make the plan a Creative Cloud offering open to any customer. You asked for it. We listened.

In addition, we are delighted to announce a full refresh of our digital imaging line of products, plus a few exciting new treats. With today’s announcements we move forward on our promise to unite mobile, social and desktop — connecting the planet’s best photography tools to the iPhone and iPad, enabling you to do serious work anywhere – on the PC, Mac and mobile devices – and share it seamlessly among them. The best news of the day…this is just the beginning.

Let’s start with the new treats


READ MORE

New Design Features in Photoshop CC, Including Typekit, Smarter Smart Guides, and More

Today we launched a major update to Photoshop CC – the fourth version of Photoshop CC with new features since its launch in June 2013. These features build on many other features released in past versions of Photoshop CC, like Generator and Linked Smart Objects. In fact, if you do the math, there are 45% more new features in Photoshop CC in total than in Photoshop CS6!

Today’s launch is a big release for designers. Designers, including those who work on web design and mobile apps, are an important segment for the Photoshop team. We’ve been focusing more and more on the needs our designer customers, and you are going to see even more design-focused features in the future. Here’s what we’re delivering to you today:


READ MORE

Custom workflows with Adobe Generator in Photoshop CC

Adobe Generator, part of Photoshop CC, is a platform for accessing Photoshop in powerful new ways. Generator allows plug-ins to access rich information about open documents in real-time. Most people know that you can export web assets through Generator, but it can be used for so much more. Check out the custom Generator plug-in that Adobe employee CJ Gammon built to help automate the creation of an online comic strip for PBS:

In some companies, developers and designers attempt to automate workflows as much as possible, sometimes creating custom tools to streamline the process. But what if developers could tap into the tools their designers are already using? This is where Adobe Generator for Photoshop CC comes in. Generator allows you to access and automate commands and respond to changes in Photoshop.

Word Girl from PBS - Generator in Photoshop CC

We recently tried out Generator in an experiment with PBS Kids to bring one of their children’s comics to the web. They provided us with Word Girl, a comic that follows a child with super powers and a super vocabulary. Our job was to convert it into a web experience incorporating animation.

Because we were given flat artwork, we knew that we would have to break up the frames into separate layers in order to add animation, likely more than one layer for each cell. Ultimately there were over 200 individual images.

Wordgirl for PBS frames - Using Generator in Photoshop CC

As you can imagine, this would be a pretty labor-intensive task with a number of challenges. We knew one challenge would be saving out all of these layers as optimized files with a consistent naming convention. We also knew it would be important to know the position and structure of each layer so that we could lay out the images correctly without manually positioning them. Because we wanted to animate the content within their cell frame, we would also need to mask layers so they would get clipped if they moved outside of the frame. Pulling this data from Photoshop and using it directly in our site would save us the trouble of creating these masks by hand.

The pain points we encountered can be categorized into two basic categories: asset generation and document structure.

  • Asset generation is the ability to turn each layer into an optimized image with naming conventions to fit our needs.
  • Document structure is obtaining key data like position and masks out of the document to use in building the animation.

Using Generator in Photoshop CC

Asset Generation

For asset generation, a lot of the work was done for us already. Photoshop CC ships with the ‘Image Assets’ Generator plug-in which allows you to use your layer name to automate the process of saving out all your layers as optimized web images. This plug-in is published on Github for anyone to tweak or improve.

Using Generator in Photoshop CC

Document Structure

To collect the document structure, we decided to create our own Generator plug-in using the ‘Image Assets’ plug-in as a starting point. Fortunately collecting the document structure is relatively easy. Since Generator runs on node.js, all the code is written in JavaScript and the Generator API provides access to the core PSD structure in JSON.

We were then able to create a method within our plug-in that saves this out to a .json file to be loaded into our website. This file contained not only the layer structure and names, allowing us to easily iterate through them and load the necessary images, but also the position of the layer’s bounds. This gave us the exact position our images needed to be placed at to reflect their position in the PSD.

Using Generator in Photoshop CC

The next step was to collect the clip path, so that images moving outside of their frame would be clipped appropriately. To do this we set up our Photoshop document with all the layers of each cell in groups. Then we created a vector mask on that group to be used as the clip path for the images. The vertices of a vector mask are not available in the document info JSON, but a recently added method in Generator allowed us to query the vector mask of a given layer. We used this to collect the vector mask data and include it with the document info.

Using Generator in Photoshop CC

Simply by running this script we automatically produced the images and a JSON file with the information we needed to reassemble the PSD in HTML. We were then able to go into the website and animate the layers manually (Yes, there are some things we still need to do manually, but maybe one day this will be solved too).

Building this custom solution likely saved weeks of time and frustration. This project is just one small example of how designers and developers can build custom workflows to speed up and simplify the tedious aspects of their job using Adobe Generator in Photoshop CC.

Generator in Photoshop CC

 

 

Behind IN MOTION with Aaron Grimes

You may not yet have heard of talented young photographer Aaron Grimes, but you’re about to. Though he’s traveled and worked with our very own Russell Brown, most notably on their short film Bodie – from the Sky, there’s no doubt that Aaron has a talent all his own. On a recent trip to Tokyo, Japan, Aaron captured numerous shots in the Shibuya District and meticulously stacked them together using Photoshop CC to create a unique video inspired by traditional time-lapses.

In Motion from Aaron Grimes on Vimeo.

His talent is a frequent topic of conversation here in the halls of Adobe, so I wanted to sit down and chat with Aaron to give you all a behind-the-scenes look at the process he used and the story behind the video IN MOTION.


READ MORE