This is a proof-of-concept /experimental exploratory project I was spending my weekends during 2013-15 to come up with a cloud based tool that allows designers & developers in quickly getting assets, CSS and element details like position, dimension, shapes, raster, text formatting info etc. from the design file/screen mockups easily without them required to have installed Adobe Software suits like Photoshop.
The major challenges I faced were in reading the Adobe proprietary file formats like PSD to extract separate information on design elements specially the fonts and getting formatting information without using any of the Adobe technology available. Invented many workarounds and implemented them in an assembly line kind of architecture (i.e. chain of responsibility design pattern) to ensure that multiple design file uploads (each one having file sizes from few hundred MBs to 1 GB ) are processed successfully without crashing or over burdening the cloud system. Also the implementation required the necessary image processing tasks to achieve certain goals like creation and export of assets in specific resolution and rendering the red-lines on the fly.
The technologies used were: PHP, MySQL, Python, Perl, Ruby, Shell Scripting, HTML5, CSS3, JavaScript, Canvas & Node.
FEATURES:
Extract design info from a PSD comp to use with HTML & Native App projects like mobile and desktop designs, with Specstra.
Cloud based – Single dashboard to manage all design files.
Export design elements / assets e.g Raster (PNG,JPG) , Vectors (SVG), CSS
Dynamic selection of design elements/assets from the file.
Detects nested vector shapes, text objects, images/raster from the design file.
Detects color palette from the design file.
SAMIR 