adobe-photoshop / generator-assets

Generator Plug-in for Adobe Photoshop CC that helps users export image assets
MIT License
496 stars 86 forks source link

Support for generating Xcode Asset Catalogs #319

Open Kingside opened 9 years ago

Kingside commented 9 years ago

Full disclosure, this is definitely a feature request and not a current issue.

Any mobile developers or designers here are likely super familiar with what has been the standard pattern the last several years for creating native mobile app icons and splash screens.

The simple gist of it

Apple as of late is purposing a new standard that is both more designer and developer friendly called Asset Catalogs. With a pre-existing asset catalog, you simply use the main menu in Xcode to say "add a file to project...", select the asset catalog, and drop it anywhere in the project. Xcode does two extremely convenient things during this process as it saves a reference to the asset catalog globally across the project. First, it makes the catalog accessible across the UI in a large number of places. Specify a launch image? Just select the correct asset catalog from the drop down, and you're done. The second thing it does, as it adds this reference to the project, it's just that, a reference only. When adding an asset catalog, Xcode creates unix file links to the original asset leaving it where it came from, and honoring all changes made outside of Xcode to the original asset catalog live.

To create an asset catalog manually, all you have to do is create a folder with the desired catalog name and add .xcassets on to the end of it. To add images to the catalog, you just create new folders inside the catalog folder with the desired image names and tack on .imageset to the end.

The benefit of the asset catalog, is that neither designers or developers have to remember the complex file names that Xcode requires any longer, or even where in the project to save these images. Inside the catalog, you place all your @1x, @2x, & @3x etc versions of the same asset into the same image set. Then in code you just reference the imageset name, and Xcode works everything out for you, meaning we can finally name our versioned assets things that make sense and are easy to understand where they're meant to go.

Most of the work to support asset catalogs is already done, but there's one catch which is the reason for this feature request. Inside each imageset folder is a contents.json file. The file is extremely simple, just a child object node for every version of an asset in an imageset with 4 or so keys that require corresponding values. For example, the exact file name inside of the imageset folder that represents that JSON node, or the retina scale of that version.

I've noticed that when you have more than one layer named for asset generation but they share the same name that an error log text file gets generated in the assets folder, so I know generating these necessary contents.json files as well isn't too far fetched. Further feature support here might include .xcassets group names and child .imageset group names to avoid hacking out the entire asset catalog path per layer or in a default layer.

As some one who is both a developer and designer, this would be invaluable to me as once I've added an asset catalog to Xcode it keep living inside my original PSD assets folder with Xcode reflecting any and all changes live. From there, once any changes are made all I'd have to do is push the build or run buttons again in Xcode to see those changes reflected.

Currently recompiling an iOS app requires deleting files from inside the asset catalog, and manually copying in new versions generated from Photoshop. As a developer, compiling code already sucks enough as it is, and it's extra frustrating since this workflow pattern is one of the main concerns that this tool was created to address, but it's only 80% of the way there or so for this exact use case. As a graphic designer as well, this process is extra painful as I can want to see a lot of different changes to these assets directly on the device before I'm ready to move on.

Here's a link to Apple's official Asset Catalog Documentation
https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/Recipe.html

iwehrman commented 9 years ago

Hi @Kingside, thanks for this interesting feature request! In response, I have good news and bad news. Bad news first: we are unfortunately a vanishingly small development team, and although this seems like a relatively straightforward request, it's unclear when we might be able to really consider it. I'll leave it to our product designer @timriot to help us prioritize a feature like this.

There are two bits of good news. First, the bug you mentioned with assets that have the same filename but different paths conflicting was fixed a few months ago, and should have made it into the latest release of Photoshop CC 2014:

https://github.com/adobe-photoshop/generator-assets/pull/261

The other good news is that this feature seems pretty simple, and so I highly recommend forking the Image Assets plugin and trying your hand at building it! The source for the plugin, while far from perfect, is fairly modular and easily hackable. Here are instructions for setting up a Generator development environment. And if you dive in and have questions, you can fire away on the Adobe-Generator-Dev Google group. Good luck!

Marking this as a feature request with no assigned milestone.