PHOTOSHOP.COM BLOG

See what's possible.

Writing Generator Plug-ins: Making Photoshop Yours

As a designer, my relationship with Photoshop had always been a one-way street. I’d spend hours pouring my heart into a design, but then I’d always run into the question of, “Now what?”. Extracting my design intent from PSDs felt tedious and repetitive. I conceived of Adobe Generator as a means to empower people to quickly and easily access the design data within PSDs. With Generator, anyone who knows JavaScript can create their own way of working with Photoshop.

While developing Generator in Photoshop CC, our team spoke with many designers and developers to understand their workflows. We learned from each other and worked together to make the Generator APIs super fast, lightweight, and powerful. Along the way we met Kat Bobbitt and Asa Miller from Stand In. Over just a few days, Kat & Asa were able to get Stand In up and running using Generator’s real-time APIs.

Stand In – Realistic Interactive Prototypes, Straight from Photoshop

Much more than image extraction, Stand In takes positioning, styling, state, even motion data, from PSDs and creates prototypes that feel like real apps which you can view on your iPhone. This capability, to fluidly create in Photoshop and seamlessly output designs to any context, is at the heart of the Generator technology. To get more info on this awesome mobile UI prototyping tool, check out standin.io.

Your First Generator Plug-In
If you’re interested in creating your own plug-in (Yay! I’m really excited that you’re interested), take a look at Tom Krcha’s quick start guide, then peek at the Image Assets code on github. You’ll find everything you need to get started.

Oh, and if you’ve got any comments or thoughts on Generator, send ‘em to me @timriot on Twitter.

TAGGED AS: , , , ,

:D wow.. gonna love this one

holy sh** thats rad!!!!

I think, i could love it!

I can’t really think of anything else at the moment, so can I ask the question; ‘Are you responsible for the horrendous overnight changes to Adobe Photoshop Express’? No one wants to hold their hand up and surprise surprise, we can’t get hold of anybody!

    No.The PS Express team is a separate team. The PS Express team can answer questions about the update here

“As a designer, my relationship with Photoshop had always been a one-way street. I’d spend hours pouring my heart into a design, but then I’d always run into the question of, “Now what?”.”

Now, you press Ctrl+F12 (Or F12 for viewing current page), if you used the button symbol for all your interactive elements, and put the right links for each interactive element, you will get your designed pages as working prototype (in HTML and optionally CSS), the prototype will includes all your pages, states and other interactive elements, you can use extensions to show it on mobile devices or check responsiveness of your GUI…
Oops, sorry you wrote ‘Photoshop’,well spend some time to re-prepare your prototype from files (you created for each screen) and layer comp (you created for each screen or element state), or maybe just print it, and create a paper prototype, after all the software you use intended to create prints…
The above description involving pressing the F12, is a native Adobe Fireworks workflow, that Fireworks user favor and use for many years.
I think it a shame that the industry standard, is to use a PATCHED image manipulation software intended for print to create screen production, starting with image ready, continuing with the horror called ‘save for web’, and now the new patch, a rip off of John Dunning Fireworks extension from few month ago (http://johndunning.com/fireworks/about/GenerateWebAssets).
Fireworks users, are just the one who know to choose the right tool for each task (and most tasks can actually made inside fireworks), we never really needed adobe, Fireworks developed for the task of designing for screen, adobe added some features that make our software almost complete, then they hide it form you, and fix some bugs for us.
Fireworks was always cheap compare to Adobe native software (Photoshop and Illustrator) and always been (and still are) a fresh modern design tool (compare to your ancient patched zombies, that are forced to do stuff they suffer from).
Lately adobe deliver a happy message for us, they will not mess with our software anymore, that is good news – we got a free software (or one can buy it for a reasonable price for the last time), we get upgrades and new features few times a mouth, so it always keep before the rest of adobe software. the features you get soon in your patched software, are probably used by us for few month or years.
You want to be ahead of the industry? Use one software to create your wireframes, mock ups, and prototypes in half the time you used to? Export it to almost any format you need? (and with better result)
Leave the print industry, join the digital design age…
Try Fireworks!

Hi

Will this also work with Photoshop CS6?

    No. It’s a new version in Photoshop CC (14.1).

Whoa wait so if I know Javascript I can write my own PS plugins? How great is that? Is PS generator available in the new Creative Suite?

Wonderful!!!

Great Article.I think it a shame that the industry standard, is to use a PATCHED image manipulation software intended for print to create screen production, starting with image ready, continuing with the horror called ‘save for web’, and now the new patch, a rip off of John Dunning Fireworks extension from few month ago.

A very good article for me.
I´m a noob in photoshop and take evry article about photoshop i can get.
THX

COMMENTS

(required)

(required)


8 + four =