What laziness leads to or how to get to writing a psd parser and what can come of it
Good day!
My name is Andrey, I want to tell you about my project, which I develop in my free time. He has already reached the stage when he has something to show and this will not be embarrassing.
So let's get started!
In the old days, being a typesetter, I probably, like many others, took the path of optimizing repetitive work: at first there were just css and html, then preprocessors and template engines with assemblers appeared, and so on.
And at some point I realized that working with the layout takes an unforgivably long time, after a bit of searching, I found a plug-in for Photoshop that generated ready-made styles based on the layer. It was for me like a new round in development, it seemed that before that I hadn’t made up at all, but was dabbling.
But, as you know, human laziness and the desire to optimize everything (people who are close to IT suffer more from this) do not give rest, and I began a new search. At this time, there was one very popular service now, with an exorbitant price tag for a subscription and a free week of use, which gave rise, it seems to me, to an avalanche-like increase in email accounts :)
After trying it, I realized what I needed, but there were several factors:
maybe there was something else, but this is already secondary.
And then I realized that I could try to write a small program for myself, which I did.
After about 3 months of leisurely picking the documentation for psd and the layouts themselves in the hash editor, the very first version of my work appeared, which did not have a name then:
It was a desktop client written in node-webkit. As a tool for myself, it was not bad, my productivity grew, free time began to appear, and I let it go to Marsy for revision, there was no export of images, but there were opportunities that helped me: quick copying of layer styles and texts, but the most useful was comparison mode for multiple layouts. It was visible in which layers changed, and how they differ - it helped to make an adaptive design very quickly, having layouts of different resolutions.
A little later, I started a group in VK, people began to get interested and I decided that I need to further develop the program.
The first item sharply raised the issue of exporting images, but the problem is that in psd, as it later became clear in many other formats, the original images and a list of modifications that need to be applied to them are stored, for example, fill with color, stroke and shadow .
Layers in layouts can be very large and I did not have enough skills or knowledge to make friends with huge arrays with information about pixels and node-webkit. Large memory drawdowns began, frequent crashes due to its lack. Because of this, I had to abandon js and switch to another language familiar to me - java.
Changing the language greatly affected performance, parsing just started to fly, but memory still needed a little more than Photoshop consumed.
Since then, one screenshot has remained:
At that moment, I realized that I needed to go to the server - the user wasted no resources, it was easier for me to develop, knowing that the application worked in one environment controlled by me.
No sooner said than done.
The parser was rewritten for web architecture, VPS was ordered, tomcat was raised, the database was written, the client part was written, and closed testing by invitation began.
So the service looked at that time:
I really liked this scheme of work, the first visitors, the first reviews and suggestions appeared.
And so a year passed, there were a lot of updates, I changed jobs, moved away from the layout, went into clean react, with almost no layouts.
I transferred the client part of Marsy to it, optimized a lot on the server.
A stack of technologies and tools for today: java, Spring framework, React, Redux.
Today, it looks something like this (I apologize for the diction, I'm not used to speaking, and every voice recording is very exciting for me)
I won’t describe all the features of Marsy, they are visible in the video, it is shown more clearly there, but here are a few features that did not seem to be included in the video:
Surely there is something else and I forgot to mention, but you can see and evaluate yourself.
If you are interested, I can write a separate article in which I will describe in more detail the technical part and features of working with the psd format.
How to try
The application is available for free at the Marsy link.
You can also watch a video with a full description of its features, though some things have changed since then.
If you don’t have time or desire to register, then you can try a test account:
Thank you for attention,
andrey@markupeasy.ru
www.markupeasy.ru
Good luck to all!
My name is Andrey, I want to tell you about my project, which I develop in my free time. He has already reached the stage when he has something to show and this will not be embarrassing.
So let's get started!
In the old days, being a typesetter, I probably, like many others, took the path of optimizing repetitive work: at first there were just css and html, then preprocessors and template engines with assemblers appeared, and so on.
And at some point I realized that working with the layout takes an unforgivably long time, after a bit of searching, I found a plug-in for Photoshop that generated ready-made styles based on the layer. It was for me like a new round in development, it seemed that before that I hadn’t made up at all, but was dabbling.
But, as you know, human laziness and the desire to optimize everything (people who are close to IT suffer more from this) do not give rest, and I began a new search. At this time, there was one very popular service now, with an exorbitant price tag for a subscription and a free week of use, which gave rise, it seems to me, to an avalanche-like increase in email accounts :)
After trying it, I realized what I needed, but there were several factors:
- I like to program
- I didn’t want, and to be honest, I couldn’t afford to pay so much for their product
- Point about laziness and desire to optimize everything
maybe there was something else, but this is already secondary.
And then I realized that I could try to write a small program for myself, which I did.
After about 3 months of leisurely picking the documentation for psd and the layouts themselves in the hash editor, the very first version of my work appeared, which did not have a name then:
It was a desktop client written in node-webkit. As a tool for myself, it was not bad, my productivity grew, free time began to appear, and I let it go to Marsy for revision, there was no export of images, but there were opportunities that helped me: quick copying of layer styles and texts, but the most useful was comparison mode for multiple layouts. It was visible in which layers changed, and how they differ - it helped to make an adaptive design very quickly, having layouts of different resolutions.
A little later, I started a group in VK, people began to get interested and I decided that I need to further develop the program.
The first item sharply raised the issue of exporting images, but the problem is that in psd, as it later became clear in many other formats, the original images and a list of modifications that need to be applied to them are stored, for example, fill with color, stroke and shadow .
Layers in layouts can be very large and I did not have enough skills or knowledge to make friends with huge arrays with information about pixels and node-webkit. Large memory drawdowns began, frequent crashes due to its lack. Because of this, I had to abandon js and switch to another language familiar to me - java.
Changing the language greatly affected performance, parsing just started to fly, but memory still needed a little more than Photoshop consumed.
Since then, one screenshot has remained:
At that moment, I realized that I needed to go to the server - the user wasted no resources, it was easier for me to develop, knowing that the application worked in one environment controlled by me.
No sooner said than done.
The parser was rewritten for web architecture, VPS was ordered, tomcat was raised, the database was written, the client part was written, and closed testing by invitation began.
So the service looked at that time:
I really liked this scheme of work, the first visitors, the first reviews and suggestions appeared.
And so a year passed, there were a lot of updates, I changed jobs, moved away from the layout, went into clean react, with almost no layouts.
I transferred the client part of Marsy to it, optimized a lot on the server.
A stack of technologies and tools for today: java, Spring framework, React, Redux.
Today, it looks something like this (I apologize for the diction, I'm not used to speaking, and every voice recording is very exciting for me)
I won’t describe all the features of Marsy, they are visible in the video, it is shown more clearly there, but here are a few features that did not seem to be included in the video:
- support for smart objects and the ability to open them
- the ability to create direct links to the layout by which you can open it without the need to log in like this
- batch image download with quality settings
- use of variables
Surely there is something else and I forgot to mention, but you can see and evaluate yourself.
If you are interested, I can write a separate article in which I will describe in more detail the technical part and features of working with the psd format.
How to try
The application is available for free at the Marsy link.
You can also watch a video with a full description of its features, though some things have changed since then.
If you don’t have time or desire to register, then you can try a test account:
: 12345 : 12345
Thank you for attention,
andrey@markupeasy.ru
www.markupeasy.ru
Good luck to all!
All Articles