 Hi, my name is Alugu and this talk is going to be about hacking photoshop. So we built a product previously called markup wand where we learnt a lot of tech around hacking photoshop and this talk is mostly going to be about our learnings and how you could benefit from it. Usually your design or your html css when you start, it starts off when your designer gives you a photoshop design or probably a png file. Most of the time it depends upon who is more lazy. If your designer is more lazy he will just give you a photoshop file and you have to measure every part of it. For example it will be like your font size, what is the font and colors, distances between each block and the images and stuff like that. So all these things are actually repetitive. If you are doing it again and again it becomes really tedious. So what you could actually do is, if you are doing this again and again you can try to take out all this information from photoshop and just inject it into your code. So how can you actually hack photoshop, there are two ways to do it, one is to actually reverse engineered libraries in which you have language specific libraries psd.rb which is for ruby and psd.js is nodejs based library which is what we used extensively and libpsd. All these libraries actually read through the photoshop file format and then they give you information. Most of it is just read only, you will just get a hash of the entire layers or the layer set and stuff like that. So the other way is to actually script over photoshop. So scripting over photoshop is something like your excel macros where you could just run functions over your photoshop file. Now the thing with this is it is actually slow because it is GPU intensive, you have to open up photoshop, click stuff, the similar stuff that you have seen is probably your photographer taking one small photograph and making eight photographs for your passport size photo and probably applying lot of filters for lot of images. So using all these libraries you could get a lot of information from photoshop which generally tends to be a black box. So photoshop file format usually gives you a lot of information. It is about layers, layer bounds, filters and so much of it. But what is relevant to us is probably very few things which is the fonts, the colors, the images and dimensions. Now let me actually do a quick demo of how you can get information from this. So the first example probably I will show is to open up fonts. So here this code, so most of the code that I am showing is pretty much very very simple. It is just reading through the photoshop file and getting out some very minimal information. So what I am doing here, the code part of the code is here. I am just looking through all the layers and I am seeing if the layer is a text layer and if it is a text layer I just print the font family name, okay font family name alright. So let me just run through it. So I have some sample photoshop files. So I have a photoshop file with three fonts. Let me just run through this. So it just reads the photoshop file and then parses all the layers and just gives me all the three font names. Now the similar things that you can do with this is actually reading your colors. So I have a similar colors.tsd which has some four different colors and the code is sort of very similar instead of actually printing out all the font names. I am just checking if it is a solid file and if it is a solid file what I am doing is I am just parsing color which just converts your 255255 to hash hex. So I will just run through this as well. So it just prints all the hex layers. So these are just very meta information that you could just read out from photoshop format but if you are actually trying to use the same reverse engineer libraries the two code that I showed previously were using reverse engineer library it was used it was using psd.js it is a Node.js library. Now if you are using this for extracting out images it may not work right. The reason is most of the photoshop files tend to have clipping masks where you have to apply one layer over the other. Now when you apply clipping masks all these reverse engineer libraries would give each layer each clipping layer as a specific layer so it won't merge both. What you want to do is to merge both and then show it as a single image for your usage. Now that is possible only using your photoshop extenscript libraries which is scripting over photoshop the macro. So the language that the extenscript uses is similar to javascript it is in the same form your ECMAScript. So what you could do is you could just access the DOM element like you access in your browser you could just access the entire document and then loop through. So what I am doing here is just I am going through all the layers and just making everything visible false and then I am going through each layer making it visible true and then saving it as a png file and then setting it as false again. Now how do I run this to run this you have something called extenscript toolkit it is basically a scripting environment over photoshop. So I have compiled this coffee script into a javascript file and that is what this is. So let me just open up so this photoshop file has some images. So what I will do is I will just export all these images all I need to do is just click on this run it will just open up each layer and then save it. So you have all the images extracted separately. So these are some very simple examples that you could do but the more things that you could do around with this is probably finding differences between two photoshop files which is what we usually encounter very often because whenever we are iterating on new pages what designers tend to do is to take out their older version of design and then modify things and give it to us. So it is very hard for engineers to find out what exactly has been changed. So what we could do is to just so assuming I have two designs so this is a design which has a last image and then I have changed that last image by something else. So what I could do is to run I have a script which actually compares to two files and then gives out what are the just layer differences. I am just going very high level just the layer differences. So my first file and then my second file. So it just finds out what layers were deleted and what layers were added. So this is very high level you can actually go as deep as possible try to find out what text has changed and what font has changed. You can go into any level and get an entire diff and what you could do is you could take snapshot of the diff that was made you could actually say that this image was added this font was added. Okay so so all these all these simple examples might not actually be a very huge value add it's very very marginal. So the best use case is to replace yourself entirely as an engineer and and and actually let your designer probably to push to production or probably in Rahul Gandhi's words empower your designer. So the best the best things that you could do is tell your designers to actually give assets which would work live in production. So this is an example while we were working at Zinger we had a lot of fishes. So all these fishes have a lot of motions and they move up and down and they have their own way of bagging tail and stuff but every week they push new fishes right. So what the designers do is they just create new fishes they add markers saying you can the fish starting point is here the tail wag is here and they just upload it to our server right. So what they do is after uploading it it automatically picks up and then it just pushes it to production and the fishes go live that's it we never had to do anything in between you can do a lot of font stuff but it won't be very good if you're doing it again and again but the best thing is you replace yourself with all the scripts the other flow other thing that you could think about is actually adding layers in which you can say markers and all these markers can be clickable you can export them as PNGs and you can say these layers are clickable and you can have a clickable mockup for your designer. The other thing which I just showed is versioning of PSDs a lot of companies already do this there is a company called layer vault which actually helps you to have version PSD files you can version your own PSD files in your own workflow the next thing is really useful the all the fonts that you generated all the colors that you generated you could put them in separate sass files and you could use them in your main file this is similar to your WordPress themes you could just have a single file for your theme and you could modify your fonts and you could modify your color and inject them directly right. So all these things actually increase your productivity as an engineer and also helps you to keep pushing as it's very often okay so all this said why Photoshop of all things why Photoshop why do you want to hack Photoshop the thing is Photoshop actually is not good for web it's a really good software but it's not good for web it doesn't have fonts as when you see a font in Photoshop it's not the same thing and in web and whatever you see in Photoshop is very hard to replicate it takes an artist to actually get a pixel perfect HTML right and the whole structure the DOM structure in a browser and the layer structure in Photoshop they don't go so well and and as an engineer probably paintbrush is much more easier for me compared to Photoshop so the reason why I think Photoshop is still live is because there is no convincing alternative for designers to be more productive and still be able to build stuff that would fit in web yeah that's it I'd be happy to take any questions if I still have time yeah yeah yeah so the clickable prototypes is just to use case that I think what you could do so what you could do is make your designer tell that these are the clickable regions right and then you could use those XY coordinates and with height and you could export that entire PSD as a PNG file and make it as a clickable layer in your HTML and that could point to another page hey I have a question so yeah thanks for the information the whole thing you said is about extracting info from PSD correct extracting information from PSD yes yes can we update a PSD through the script like say I want to add a new layer yeah yeah you can so the reverse in your library is necessarily don't let you do that but all these extents script scripting over Photoshop you can do that the way we were doing is all these clipping layers we were trying to copy all these layers into a new Photoshop file and then merge it and then save it as a new file so you can do a lot of stuff you can do you can do add filters you can do a lot of repetitive tasks using extents script okay can we read can you hear me sorry can you hear me yeah yeah I can yeah can we just as layers can we read slices can we read slices yeah sorry I'm not sure I haven't actually tried slices but with extents script definitely should be possible one one thing with extents script is anything that you're doing on a Photoshop document it keeps you can collect all the information in so you have this thing called script listener log whatever happens in your Photoshop file you're clicking up selecting of a layer or deleting a layer everything gets recorded as a function so you could just copy this snippet whatever action you're doing and you could paste it in your extents script and repeat it again and again so if you're doing clipping if you're doing slicing then you could just see what function has been generated and then use it in your extents script okay thanks yeah yeah hi sorry yeah yeah I can take the rest on chat