Prisma: Extending Photoshop's Color Management With Meteor
But today’s story is about Meteor turning up in a truly unexpected place: inside a Photoshop extension.
Read on to learn how Dominik Guzei managed to bridge the gap between one of the web’s most cutting-edge frameworks and a 24-year old desktop app with Prisma, a color-management extension for Photoshop.
You’ll find out:
- How Dominik got the idea for Prisma.
- How he knew he was solving a real need.
- Why he chose Meteor to build Prisma.
- The reasons behind the recent Photoshop extension boom.
- The best tools to use to develop your own extensions.
- What’s next for Prisma.
Designer + Developer: A Powerful Combination
Sacha: Can you introduce yourself? What’s your background?
Dominik: I’m a 25 years old graphic designer and software developer living and working in Vienna, Austria. I studied both disciplines at the University of Applied Sciences Salzburg in Austria, where I had the chance to join many interdisciplinary teams building awesome projects.
During that time I became more and more fascinated by the art of software architecture and lean product development, which helped me finish my Bachelor in Multi Media Technology.
I started my own company Code Adventure in early 2013 with the goal to simplify workflows for designers. The beta test for my first product Prisma launched in May 2014 and I hope to become profitable until end of 2014.
Can you briefly describe what Prisma does?
Prisma is a Photoshop extension that simplifies the management of colors for design projects by introducing truly global color swatches.
You create color swatches and connect them with any number of Photoshop text or shape layers. From then on, all changes to the color swatches are immediately applied to the connected layers. It’s especially useful if your design involves multiple documents since all changes are also synchronized between documents in real-time.
A Note For Non-Designers
At this point, I expect some of you are going “huh”. If you’re not a designer yourself, it’s not immediately apparent why Prisma is such a great extension.
Out of the box, Photoshop has no way of knowing that the shade of red you use for your buttons should be the same red you also used for your links. That can become a problem when you decide you want to change your button color: now you have to go through every single link in your mockup and manually change their color as well.
This is where Prisma comes in. By defining “global” colors and linking them to specific elements, you can easily change the color of a whole group of elements at once.
Solving Your Own Problem
How did you get the idea for the extension? Did you build it to solve a problem you’ve had yourself?
I got the idea for Prisma while working on a big website re-design project which involved around 30 Photoshop documents. We were a team of four designers working on different parts of the design, synchronizing the documents via Dropbox.
The project was quite complex and in the end we had decided on about 20 main colors and around 10 shades of grey that were used extensively throughout most of the documents.
During that process I realized the huge efforts we had to make to keep all the colors in sync. Any changes to the hues resulted in cumbersome hide-and-seek sessions to locate the affected layers.
Eventually we tried to keep the changes as small as possible to avoid this pain. This really irritated me because playing with different color combinations and themes is one of the most important parts of the whole design process.
I still remember when I said to the others that I would try to find an extension that helps us with that problem, but there was none. The only thing I found were many posts of other people facing the same problem and asking for any proper solution. At that moment I realized that I had found a great idea for a niche product.
At that moment I realized that I had found a great idea for a niche product
What made you decide to build a Photoshop extension? Was this your first experience building an extension for a desktop app?
Photoshop is my favorite graphic application. I also use Illustrator and InDesign for special tasks, but I really love the smooth hardware accelerated scrolling and panning of Photoshop.
Unfortunately there are many other important core features missing. So I wanted to find out if it was technically possible to build something like global color swatches in Photoshop only by extending it.
It was my first time building any kind of extension and I can tell you, with Photoshop it’s not an easy process. The tools from Adobe are fragmented and the documentation is scarce at best. I remember when I tried to programmatically find a way to get all selected layers and needed a whole day (!) to find a performant solution in one of the community Photoshop scripting forums.
But Prisma is actually not so much about being a Photoshop extension. My vision is a cross-application color management workflow where the support for applications like Photoshop is just one feature of many. The core of the extension already works in any Adobe application – and soon Prisma will also support Illustrator and InDesign.
In theory, Prisma could support any desktop application that allows plugins using an embedded browser. It already works in any browser.
The Extension Explosion
It seems like we’re in the middle of a Photoshop extension explosion, with new extensions dropping on a weekly basis. Do you have any theories on the origins of this new trend?
My theory is that this trend has several reasons:
1) Many people use Photoshop. It’s not the best tool for every task, but I think it has something that makes people choose it over other applications like Illustrator or Sketch.
2) Adobe doesn’t really focus on improving the basic workflows of Photoshop but steadily comes up with esoteric features and other new applications that only a small subset of users really needs.
My vision is a cross-application color management workflow where the support for applications like Photoshop is just one feature of many.
3) Adobe introduced HTML 5 extensions that run in an embedded Chrome instead of Flash / Flex. They also released new APIs like the Node.js based generator Plugin system. These steps have definitely led to more attention about possibilities to extend Photoshop.
4) The market is still very young with only a handfull of serious companies building extensions. But it has high commercial potential since most Adobe customers already pay for their professional graphic application of choice. I like to think about it as a small premium market where users might be more willing to pay for simplified workflows than in other areas like the web.
5) Someone had to find out and document how to build Photoshop extensions for the most common versions, using mostly web technologies. Flash/Flex is too verbose and exhausting to develop extensions with, especially the UI part. My personal break-through with Prisma came when I gave up my first prototype written in Flex and found a way to build it with Meteor and HTML 5.
Adobe doesn’t really focus on improving the basic workflows of Photoshop but steadily comes up with esoteric features and other new applications that only a small subset of users really needs.
In my eyes the company Creative Market did an immensely important step for the whole extension development community by blogging about how they built their extension with Backbone and then open-sourcing their Node.js based build tool CSXS on Github. It makes building and releasing extensions so much easier and more reliable than the tools provided by Adobe.
A Successful Launch
What kind of feedback have you gotten since launch? Can you share stats or usage numbers? Have you heard from the Photoshop team about the extension?
Altogether the feedback was mostly positive and several individuals and companies sent me very grateful mails. Within the first 3 days there was a huge response with over 500 downloads and installs because a few people put the link up on designer news platforms. At some places big discussions sprouted with praises for and criticism against Prisma.
For me this was really unexpected. I actually launched the beta version pretty silently and hoped that there would be 10 people trying it so that I can get feedback from other people than my friends. So when the hype started on Twitter I was really busy answering support mails and fixing the biggest issues that became obvious when hundreds of people registered.
After one week I had about 700 registered users, a more stable system and slowly the curve flattened to 10+ registrations per day. At the time of this writing there are around 950 users that have installed the extension and registered an account.
Within the first 3 days there was a huge response with over 500 downloads and installs.
Not all registered users however are using the extension on a daily basis. I think many just tried it out because they saw some tweet or blog post about it. From the usage patterns I see there are around 100 users actively using Prisma at least once a day. Of course there are also some power users that already created 20+ projects and over a hundred color swatches.
I don’t think that Adobe would notice Prisma unless I’m directly contacting them. At the moment I see no benefits in doing so.
How did you first start using Meteor? What made you decide to use it for Prisma?
I actually started with Meteor because I wanted real-time synchronization of colors between multiple Photoshop documents and (later) between multiple graphic applications. I knew that this feature would make Prisma really exceptional – not just a glorified color picker extension.
I also considered other frameworks like Derby.js or Ruby on Rails + Ember / Angular. However Meteor looked by far the most promising, with real-time synchronization built in, awesome accounts packages and an amazing core development team that pushes the limits.
I wanted real-time synchronization of colors between multiple Photoshop documents and (later) between multiple graphic applications. I knew that this feature would make Prisma really exceptional – not just a glorified color picker extension.
Can you talk about the role Meteor plays in Prisma? How does the extension communicate with the Meteor server?
Prisma is actually a complete Meteor application. You can run it in any browser by visiting the app. Only the communication with the host application (Photoshop, Illustrator, etc.) is written in Adobe Air 1.5 and Adobe ExtendScript.
The extension panel running in Photoshop is nothing but a very small Flex application that displays a full screen HTML component that polyfills important HTML 5 APIs like localStorage with Adobe Air features. The Flex HTML component uses a very old WebKit version to display the Meteor app – but apart from some minor issues it works quite well (it even supports websockets).
The Flex application provides a small API to the Meteor client to call into the ExtendScript running in Photoshop (or other applications). This makes it possible to have all business logic running in the Meteor app that is testable in any browser. ExtendScript is only used to get some information from Photoshop or to change the colors of layers etc.
How do you handle cases where the user doesn’t have an active internet connection while using Prisma?
Currently it is not handled at all. If the extension is opened while not having an Internet connection on, it simply won’t load. If the user disconnects while working with Prisma, the Meteor defaults apply – it applies all changes locally and syncs them when the connection is established again. However if the users closes the extension panel while not being connected, all local changes will be lost.
I might add better offline support later; however there haven’t been many requests for that feature yet.
Did you encounter any specific stumbling blocks while building the Meteor part of Prisma? Were there any features that you felt were missing from the framework?
The biggest stumbling blocks while building Prisma were the template system and missing dependency injection. Meteor templates are really great if you build a simple website but lack any advanced features like extendable components, animation etc.
Additionally the template system is really global variable centric. It took quite some effort to build a package that allows me to re-use templates and view logic for multiple components within Prisma.
I developed several Meteor packages while building Prisma to help me with dependency injection and in building more loosely coupled modules. Since Prisma should be completely configurable depending on the surrounding context (Browser, Photoshop, Illustrator etc.) it was crucial to have zero global variables in the code.
Another big issue with Meteor is the testing story. I still don’t have a satisfying testing environment like the one I know from Ruby on Rails.
Another big issue with Meteor is the testing story. I still don’t have a satisfying testing environment like the one I know from Ruby on Rails. Currently there are multiple options with their respective drawbacks. I hope this will soon settle on some tightly integrated package that makes acceptance and unit testing the application as well as packages a breeze.
What are the next steps for you? Keep working on Prisma? Or come up with new Photoshop extensions?
Actually I already started working on another extension before I released Prisma. It’s a collaboration with iconmonstr, and it will simplify the import of their commercially free icons in Photoshop, Illustrator and InDesign.
However, Prisma remains my main project and I won’t start additional extension projects until most of my vision for it is realized.
In the future it will be possible to share your projects with your team and have all colors synchronized throughout the company. This will finally bring an end to the boring exchange of Adobe color palettes, which burdens many companies around the world.
Another great feature will come in form of an integrated color-picker, which allows changing the colors in real-time. Illustrator and InDesign support is on the roadmap for 2014 and I am pretty excited about web-related features like a 3rd party API and an improved web-interface where developers don’t need to open Photoshop to access the hex colors for a project.
Thanks to Dominik for answering my questions! Prisma already looks promising, but from Dominik’s answers it seems like it’s bound to be much more than a simple Photoshop extension. So I for one will definitely keep a close eye on the project.