How I Created a Software That In-turn Helped Me Creating My Graphic Book

It’s the story of Rangoli , my own custom developed cloud based image editor software that helped in churning-out the print ready images to help in creating a graphic book with specific effects to set the desired nostalgic tone.

If I today look back in time, I find many memories from Rourkela, a small township around India’s first public sector steel plant. Like any other Rourkelite, I have been a true enthusiast about my town. This passion led me to spend some time in last few years to collects smaller yet evocative details of events that shaped the place and the life within it. Then a time came when I gave it a serious thought to give them a shape of a book. Last year I published the book as titled Rourkela – The Illustrated Journey Into The Life Of The City 

As the book was supposed to be a graphic novel, there were multiple challenges I had. The first and foremost of them was getting the images/photograph of the town across different times in history. Being a small town it was really difficult task as not much of the facts and history of the place was recorded from different aspects of life. before the Rourkela Steel Plant was built in 1950’s, the place was least known tribal area with in the dense forest across the hills. Even though a high level details I had collected from secondary research, still the details were not enough to come up with a photographic book with truthful and accurate particulars. The problem with photographs is that they are too real – there is a little room available for imagination when you see a bright sharp hi definition photograph. The less details are in photo including color, there is more to imagine , and no doubt that’s why a painting with less realism is always effective in igniting emotion in viewer than the same subject in photograph.

https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522type%2522%253A%2522video%2522%252C%2522title%2522%253A%257B%2522localized%2522%253A%257B%2522en_US%2522%253A%2522RANGOLI%253ACreative%2520Studio%2520-%2520Samir%2527s%2520Experiment%2520in%2520Image%2520Processing%2520over%2520Cloud%2522%257D%257D%252C%2522description%2522%253A%257B%2522localized%2522%253A%257B%2522en_US%2522%253A%2522Rangoli%2520is%2520a%2520fully%2520automated%2520cloud%2520based%2520creative%2520studio%2520app%252C%2520that%2520helps%2520in%2520converting%2520images%2520into%2520complex%2520sketches%2520and%2520artistic%2520outputs%2520that%2520can%2520be%2520used%2520for…%2522%257D%257D%252C%2522author%2522%253A%257B%2522name%2522%253A%2522Samir%2520Dash%2522%257D%252C%2522provider%2522%253A%257B%2522name%2522%253A%2522YouTube%2522%252C%2522display%2522%253A%2522YouTube%2522%252C%2522url%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252F%2522%257D%252C%2522request%2522%253A%257B%2522originalUrl%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DGY27CzxwPp8%2522%252C%2522finalUrl%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DGY27CzxwPp8%2522%257D%252C%2522images%2522%253A%255B%257B%2522url%2522%253A%2522https%253A%252F%252Fi.ytimg.com%252Fvi%252FGY27CzxwPp8%252Fhqdefault.jpg%2522%252C%2522width%2522%253A480%252C%2522height%2522%253A360%257D%255D%252C%2522data%2522%253A%257B%2522com.linkedin.treasury.Video%2522%253A%257B%2522html%2522%253A%2522%253Ciframe%2520scrolling%253D%255C%2522no%255C%2522%2520allowfullscreen%2520src%253D%255C%2522%252F%252Fmedia.licdn.com%252Fembeds%252Fmedia.html%253Fsrc%253Dhttps%25253A%25252F%25252Fwww.youtube.com%25252Fembed%25252FGY27CzxwPp8%25253Ffeature%25253Doembed%2526amp%253Burl%253Dhttps%25253A%25252F%25252Fwww.youtube.com%25252Fwatch%25253Fv%25253DGY27CzxwPp8%252526feature%25253Dyoutu.be%2526amp%253Btype%253Dtext%25252Fhtml%2526amp%253Bschema%253Dyoutube%255C%2522%2520width%253D%255C%2522480%255C%2522%2520frameborder%253D%255C%25220%255C%2522%2520class%253D%255C%2522embedly-embed%255C%2522%2520height%253D%255C%2522270%255C%2522%253E%253C%252Fiframe%253E%2522%252C%2522width%2522%253A480%252C%2522height%2522%253A270%257D%257D%257D&signature=AQYbS5FyMfkBVs5b6NHV0b3Oc7aY

(FIG: The images in the published book – the line textured engraving effect gives the feeling of vintage nostalgia.)

As the book subject was history of the town with reference to different location within and specially about the town’s inception in 1950’s, and before, I thought it would be great to use illustration type graphics to match the old times, specially 50’s and 60’s of the town. In addition to that the challenge was that as it was a place, about which very less photographs along with recorded information was available, it was difficult to come up with a graphical history of the places through photographs. Secondly due to unavailability of details of life style and location description of the area, (as Rourkela was mostly unknown remote hilly area filled with jungle and aboriginal tribal before the steel plant came up in 50’s just after a few year of India’s Independence ), leaving something to imagination of the readers in images is ideal to evoke certain emotions.

When I started looking for a theme of the graphic book on history of a location, I explored many font types, graphic styles along with sketch patterns. I wanted the book to bring back nostalgia about the past that gone by, to remind the readers of the days gone by which no more exists. So natural tendency was to select vintage designs mostly popular in the periodicals, books and magazines printed using older print approach like wood-cut , linograph and engraves and the kind, when digital print didn’t exist which ever maintain the crispness of our printing methods today and had the printing imperfections. So I selected the wood-cut, old style text and textured background of the background images which help get the reader he feeling of vintage nostalgia.

The next step was to look for options to produce such an effect. After a search I noticed there are some plugins to Photoshop and other similar photo editors which provide the similar effects. But as I am more biased towards open source and used GIMP most of the time for my graphical needs, I wanted a good plugin that would provide the desired effect . There were some yet they didn’t match the exact way I wanted to represent the images. I wanted something to closely match the childhood local magazines that were printed and were more crude looking printouts. So the one of the best choice was to rather develop a program to quickly produce the exact effect I wanted to invoke same feeling. Initially I thought of learning to develop a plugin for GIMP, but that included additional work to learn the new language and the methods to build the plugin. Yet I did not want to depend on simple actions. Also I was not interested in depending on a commercial software and stick to it and was also not sure how long it would take me to learn and there by come-up with the solution that will in turn will help me complete my book project. I was stuck at a cross road, where the other option is to look around and find an approach that would be easier for me to come up with a software solution that will involve less work. I realized, I knew a decent level of PHP and some open source image processing libraries. In my earlier days of my career as a developer, I had played a lot with such libraries which used to run over shell scripts and via PHP through Execs. So Decided to try out this approch and decided will build my own Image Editor application that will allow to upload any image and convert that to the effect I desired. Thus my pet project Rangoli came into being to help me out to finish my graphic book project.

After spending two months over weekends, quickly I managed to build a working version with a feature to convert my images into the desired effect. As I used PHP, I was able to host it locally and use it across different laptops I use at home via the wifi , without the need to install anything on the system I was working with my book project. Later I added a few more variations of the effect and build a template that can be used to add more effects like plugins into ‘Rangoli’. One such addition was to remove either the white or black from the image and make it semi transparent (the same effect you get in Photoshop by turning the blending mode to ‘Multiply’).

(FIG: Rangoli Interface showing the list of effects available and the preview in center pane. Multiple effects can be queued and batch processed.)

Later added the feature to process multiple effects one after another based on the queue — more like a batch process but through the GUI and by following human friendly language than the geek’s favorite commands. These helped me build a system that is scalable and cross platform by the time I finished the book.

(FIG: Rangoli user-interface showing the rendered vector image with transparency, ready to be used in the book.)

Using this then I started creating visuals for my book. I merged multiple public domain images and some photographs I took some time back across the town, to create desired frame which then I processed in Rangoli to generate print ready vector that with old engraved vintage type image.

(FIG: From Left to right, different stages the source images were merged and then fed into Rangoli to get the old print type shown in right.)

The one more good thing happened – in my book I was able to provide dramatic scenes from past combining some modern day photographs and processing them through Rangoli.

(FIG: Blurring the realism – Left images are the original ones processed, where are the right one are the finally processed outputs from Rangoli.)

Finally I was able to complete the book that was referred as “Mini India’ Rourkela coming alive through flickers of images”. Though technology helped me in a greater way by empowering me to meet my goal which otherwise would have been impossible for me, I learned a new trick — sometimes, we need to spend time in building components that will help us in long run . In such cases even if the immediate or direct benefit may not be in sight, still they may act as the foundation stone to the bigger thing we desire to achieve.

You can get the book from here: http://amzn.in/9pobnWq 

https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522type%2522%253A%2522video%2522%252C%2522title%2522%253A%257B%2522localized%2522%253A%257B%2522en_US%2522%253A%2522Experiment%2520on%2520the%2520Book%2520Form%2520-%2520History-cum-Travel%2520in%2520Comic%2520Book%2520Format%2520%2528Book%2520on%2520Rourkela%2529%2522%257D%257D%252C%2522description%2522%253A%257B%2522localized%2522%253A%257B%2522en_US%2522%253A%2522Rourkela%2520-%2520The%2520Illustrated%2520Journey%2520Into%2520The%2520Life%2520Of%2520The%2520City%2520Around%2520India%2527s%2520First%2520Public%2520Sector%2520Steel%2520Plant%2520Author%253A%2520Samir%2520Dash%252C%2520Sangeeta%2520Dash%2520Format%253A%2520Paperba…%2522%257D%257D%252C%2522author%2522%253A%257B%2522name%2522%253A%2522Illustrated%2520Type%2522%257D%252C%2522provider%2522%253A%257B%2522name%2522%253A%2522YouTube%2522%252C%2522display%2522%253A%2522YouTube%2522%252C%2522url%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252F%2522%257D%252C%2522request%2522%253A%257B%2522originalUrl%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253Dzs34MxEXTmo%2522%252C%2522finalUrl%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253Dzs34MxEXTmo%2522%257D%252C%2522images%2522%253A%255B%257B%2522url%2522%253A%2522https%253A%252F%252Fi.ytimg.com%252Fvi%252Fzs34MxEXTmo%252Fhqdefault.jpg%2522%252C%2522width%2522%253A480%252C%2522height%2522%253A360%257D%255D%252C%2522data%2522%253A%257B%2522com.linkedin.treasury.Video%2522%253A%257B%2522html%2522%253A%2522%253Ciframe%2520scrolling%253D%255C%2522no%255C%2522%2520allowfullscreen%2520src%253D%255C%2522%252F%252Fmedia.licdn.com%252Fembeds%252Fmedia.html%253Fsrc%253Dhttps%25253A%25252F%25252Fwww.youtube.com%25252Fembed%25252Fzs34MxEXTmo%25253Ffeature%25253Doembed%2526amp%253Burl%253Dhttps%25253A%25252F%25252Fwww.youtube.com%25252Fwatch%25253Fv%25253Dzs34MxEXTmo%252526feature%25253Dyoutu.be%2526amp%253Btype%253Dtext%25252Fhtml%2526amp%253Bschema%253Dyoutube%255C%2522%2520width%253D%255C%2522480%255C%2522%2520frameborder%253D%255C%25220%255C%2522%2520class%253D%255C%2522embedly-embed%255C%2522%2520height%253D%255C%2522270%255C%2522%253E%253C%252Fiframe%253E%2522%252C%2522width%2522%253A480%252C%2522height%2522%253A270%257D%257D%257D&signature=AQGLpYWXM5trMpF0f4NyvZxr60f_

Specstra: My Experiments in UI Automation to Extract CSS, Assets from Design Files

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.

Specstra

Quick and Dirty Guide for Developers: Adobe Edge Preview 3 in 4 Hours

Quick and Dirty Guide for Developers: Adobe Edge Preview 3 in 4 Hours

Ebook By Samir Dash
Published By patternGraphic DigiBooks 

Published: Dec. 16, 2011
Category: Non-Fiction » Computers and Internet » Programming
Category: Non-Fiction » Computers and Internet » Graphics and design
Words: 14341 (approximate)
Language: English

ISBN: 978-1-4660-7972-4

PG2011B4

Here is a discount coupon you can use to get 20% OFF :

Original Price: $4.00

Promotional price: $3.20
Coupon Code: LN68F
Expires: February 15, 2012

Available in following formats: Epub (Apple iPad/iBooks, Nook, Sony Reader, Kobo, and most e-reading apps including Stanza, Aldiko, Adobe Digital Editions, others), PDF, Mobi(kindle), and LRF.

https://www.smashwords.com/books/view/115038?ref=patternGraphic

A quick 4 hours guide for developers, web designer and those having basic knowledge in HTML, CSS, Java Script and jQuery to learn using Adobe Edge Preview 3 to develop web interactive and web applications.
The book covers the following topics:
Before We Start!

  • What is Adobe Edge?
  • What to Expect from this Book

Hour 1: Overview of Edge Runtime

  • Edge Composition
  • Edge Symbol
  • Edge Action
  • Events
  • HTML page DOM specific Events
  • Edge Elements DOM specific Events
  • Element level Touch Interaction specific
  • Triggers

Hour 2: Adding Basic Actions to Your Animation – Playing with Triggers

  • Where to Add Triggers in the Edge IDE ?
  • Different Type of Triggers
  • “Earth” – An Example for Basic Playback Control
  • “Day and Night” – An Example for Changing the content of an Element in Runtime
  • Where all Triggers are Saved When We Type into the Edge Code Editor?
  • Reference to different Elements and their properties while writing Triggers
  • Using Lookup Elements (Lookup Selectors) and jQuery API
  • Using Some Other Useful Edge Runtime APIs
  • “Progress Bar” Example – Using what we have learned about referencing Elements

Hour 3: Edge Touch API and Gestures for iPhones, iPads and Android devices – Thinking Beyond Desktop & Mouse

  • Touch Events supported on iPhones, iPads and Android devices
  • Difference Between Touch and Mouse Events
  • The WebKit Event Object for touch events
  • Note: Setup Environment to Test HTML Pages on Your Devices
  • Gestures
  • Adobe Edge and jQuery Mobile Events
  • Using Touch Events in Edge Compositions
  • Adding Touch Events to Edge Element’s Action
  • Adding Touch Events to the DOM Elements Associated with Edge Element
  • Adding Gesture Events to Compositions in Edge IDE
  • Making Edge Compositions Compatible for Both Mouse and Touch Events
  • Example: Cross-platform Slider
  • Prevent scrolling
  • Prevent Default HTML Resize

Hour 4: Complex Interactions between Multiple Compositions and Development and Usage of Reusable Compositions

  • Wheel: Example of a nested Element Animation
  • Adding Interaction to Control the Animation of the Nested Element
  • Benefits of Nested Animation
  • Reusability Approach of Development in Edge
  • Example: Building a Reusable Slider Component
  • Example: Product Selector – How to Use of the Reusable Edge Composition Multiple Times in another Edge Composition with Different Configurations

Going Forward

  • Next Steps

Source Files for this Book

This is a quick guide that will help you feel comfortable using the Adobe Edge Preview 3 in context of designing and animation.

If you are looking for the designing and animation using Adobe Edge instead of programming check “ Quick and Dirty Guide for Designers: Adobe Edge Preview 3 in 4 Hours” …that is available at https://www.smashwords.com/books/view/114683?ref=patternGraphic

 

 

Videos related to the book:

In hour 4 section of this book you will learn how to create reusable compositions which can be used in other Edge composition through configurable parameters. For source files and details check the book

This sample shown in this video is explained in the current book. In the video you can see there are 3 different Edge compositions the first one is a simple background, the second one is a rotating wheel and the third one is the combination of the two to render the final interactive. For source files refer to the book.

Here is an experiment from the current book, showing how a product selector can be built with Flash like user experience using HTML5, jQuery, CSS3 and of course Adobe Edge Preview 3 runtime. For source code refer to the book.