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

What the failure of Google Glass teaches about UX?

stop

In mid of January I saw the headlines making official announcement of the detah of Google Glass. I was not surprised. I knew lot of issues ave to be addressed before Gass could make it to the expectations. Many of them are issues related to UX. All of them related to an grey area of UX space, which was never given the prime consideration when designing a seminal product like Glass and many other legends.
Back in 2013, I had wrote a few posts on the usability in context to the social aspect of Google Glass that was being ignored. When I read now the article saying “privacy concerns” is one of many reasons of failure, it certainly louds the many of the design approach concerns I had raised.

Google Glass is not evil product, everyone agrees. Even all agree that it has immense potential. However, it certainly needs a facelift from product design point of view — and there by from UX point of view.

We saw, the raise and fall of Google Glass carrying it’s pattern where we can notice how with the emergence of Google Glass, the topics related to devices infringing with personal privacy became hot cakes for tech-debates. Many social scientists, human rights activists had started to see the ‘Glass’ as the evil that reminds them with George Orwell’s ‘1984’. The fear of a ‘Google Big Brother’ controlling the major shares of the information world is seen as the intruder to private aspects of ‘the public’. The “Glass Hole” incarnation of the Glass is equally seminal as the product “Glass” it self, due to bring out the topics like “user privacy”, “social context” and certainly what I believe as the “Context of the Other”.

It is not the case that Google has not spent money on user research and usability aspects before going ahead with the concept of persons using glass that may change the way we interact with systems in our daily life. Usability wise, it is definitely a super gadget that has the potential to catapult the device industry into next century. But the new features and interaction methods implemented in the device in a manner that is actually a decade old approach that is only fit for human-computer-interaction (HCI) in case of smart phones and tablets which have less tendency to hurt sentiments of those who do not directly interact with the device when the user might be performing some actions in a certain socio-cultural context. These sentiments could result in the fear of losing privacy , cultural distrust and humiliation among the second-hand users of the device who are impacted indirectly in some way by the device actions in the context.

Historically, the product design process while following the check and balances with heuristics and usability models, has never given prime importance to the user’s relationship to the ‘Other’ in his environment. And this is the missing piece that needs to be re-discovered and fit into standard usability matrix when Google might give “Glass” a face-lift to bring it back with a new incarnation that is more friendly and less intruder to user’s privacy and is compatible with SX model (Socio-cultural Usability Model) which I had proposed earlier.

Socio-Cultural User Experience (SX) – the missing piece in UX


‘Socio-Cultural User Experience to represent the aspect of Usability Design or User Experience (UX) that deals with usability aspect of products/ software in a social context. This is the same “Context of Other”

Considering the ‘Others’ in the User’s Social circle:

The existing UX model does not analyze the need beyond the current user and his ‘type’ to do a usability test — it never considers how it is impacting the other members of the society while the target user set is using the app/system.
For example, using car horn is a safety measure, but using it near a hospital or school is considered as unsocial and disturbing. There are many social check points that bar users of any system from using it in special socio logical context.

Criteria of a Good ‘SX’ Compatible System

Criteria of a sound usability design of an app on socio-cultural context:

1. Universal—has design elements that are universal.
2. Ethical – follows principles and approach that has positive ethical value
3. Non-racial – non biased and non-provocative attitude to user’s race and beliefs.
Socio-cultural User Experience (SX) and Social Interaction Design (SxD)
4. Respectful – towards user’s culture, social beliefs and ethnicity
5. Safety – has it’s social impact that is safe for the User.
6. Non-abusive – must not exploit the user and the environment he is in .
7. Common Sense – has geared towards common sense – behaves and reacts to the user in a sensible way
8. Protect Privacy – App’s feature and interaction must protect user’s privacy and other humans in the social circle.

Let’s take the case of Google Glass.

Google Glass is designed in a way that can act as more personal than a mobile handset, as it is a spectacle and can be indispensable accessory for the user once he gets addicted to it by replacing his conventional glass with it.
But the support for camera to take picture can pose a problem for the user to enter private areas, industrial areas, secure zones and offices where cameras are not allowed. In some places of earth, the cultural restrictions are in practice to ban cameras in certain places — most of the temples in India do not allow cameras inside. Now imagine, if the user has replaced his traditional spectacle for it , then he may find it difficult to manage without it in these scenarios.
So by following SX approach in usability design, the glass will require to have a “detachable set of camera” used in the glass so that the user can detach the camera and which would power it off and at the same time allow the user to keep on using the glass as a conventional spectacle.
This example may be just one of many features that Google glass might have, but it is enough to illustrate the approach in thought.

Points to Focus on while designing a SxD Compatible System

1. Provide multiple alternatives to the interaction methods to control the same functionalities in different socio-cultural context.
2. User should have total control over enable/disable of interaction methods for different scenarios.
3. The default interaction method must follow ‘SX’ approach.
4. Provide options to the user to switch between interaction methods with the system as and when needed.
5. Alternative mechanisms should be provided for physically challenged users. Rethink on the use of gestures and other interaction methods in the Article 508 context as everyday the new devices with unpredictable (not necessarily negative!) interaction methods and features.

Gesture and other Interaction Medium of SxD:

The ‘Social Interaction Design’ approach has the following major facets in the system interaction towards the user in socio-usability context:
1. Facial Gestures—The selection of Human triggered facial gestures (e.g. wink, smile etc.) to activate the system or trigger any action in the system must be judged based on the canonical meaning of those gestures in social and cultural context of the user where he is going to use it. For example, in case of Google Glass , the feature of “winking” (the gesture developed by Google Glass developer Mike DiGiovanni http://news.cnet.com/8301-1023_3-57582500-93/google-glass-code-lets-you-snap-a-photo-with-a-wink/ ) at someone to take a photo can pose a problem if the user is in India or Middle East countries. Even in western world winking at a lady or group of ladies (even though it is unintentional for any kind of abasement) can be taken as a negative action (e.g. weakness in character) and evoke anger and misunderstanding. So even if the winking to take a feature is a ‘cool feature’, in social context SxD will suggest the usability/interaction engineer to rethink on it to implement some options to ‘keep it disabled by default and allow the user the total freedom to use his judgment to enable and use the feature in any given socio-cultural context. Fig5: The ‘wink’ gesture developed by Google Glass developer Mike DiGiovann allows user to take a snap of the surrounding with just a wink of an eye.

2. Sound Gestures — The selection of sound gestures – the use of voice or sound pattern to control the system should be examined for different user environments. For example blowing a whistle to activate a play functionality on a portable music player, or to open an SMS on the cell phone can be an interesting feature, but on the other hand if it becomes useless in a busy street or in a meeting room where a discussion is going on.
3. Touch based Gestures – Touch, swipe and pinch are popular now a days as most of the tablets and smartphones offer this as a user friendly interaction method for the user. More devices are coming up which do not have any physical button rather a few multi-touch gestures are enough to fully control them. However ‘SxD’ stresses that the devices must be designed and developed with the interaction method that can allow alternative to the available touch triggered interaction mechanism. For example , while developing a digital medical instrument with touch sensitive display, the interaction methods should be carefully planned so that the surgeon can use the system without touching to avoid infections through contact with it while conducting any mission critical surgery.
4. Hand/Finger based 3D gestures – ‘SxD’ approach encourages to conduct a social analysis of the hand/finger based gestures that are planned to be used in a system – the gestures should selected / innovated by carefully studying the cultural context avoiding common gestures used in daily life that are considered abusive to others. In addition to this practical usage resulting out of user’s environment and work culture must be given consideration. For example the middle finger gesture commonly used by youths to represent the crack humiliating pun on the other should not be used for any app that is expected to be popular among the users from the similar demography. But note that only considering the demography is not enough to decide the gestures.
5. Mouse /Keyboard Control – Similar to the gesture , voice and the related interaction method with system, mouse, keyboard, joystick and other typical input device based methods should be considered with in the context in which they are going to be used. As this group of interaction method are very old, many standard guidelines are already in there in practice. They However we need to rethink on them and make sure they are upto date with the ever changing human –computer-interaction domain.

Our world needs products that are not only usable but also safe to use socially . It is high time, we need to consider the “Other” in our social context to improve the products and there by our future.

Complete entry submitted for Rupee symbol contest

 

 

Click the following link to view

Complete entry submitted for Rupee symbol contest

 

 

  

 

 

My facebook photo album containing the entry details…

The Proposed symbol of “Rupee” is the synergy of several themes namely: antiquity and modernity; Indian-ness and the International culture; the East and West. The symbol has all the elements that projects its attributes that are strongly recognizably Indian about it and at the same time it has all the characteristics that makes it a part of the family of popular international currency symbols such the Pound (£), the US dollar ($), Yen (Y) and Euro (€). The focus of the design of this symbol was mainly along the following lines. Thematic aspect of the symbol : The symbol of Rupee must represent the unique characteristics of the essence of India — the symbol must be representative of what we can recognize as Indian character. Historically it must represent country’s rich past and it must present itself as the attestation of one of the culturally pregnant civilization. It must represent the India’s concept uniqueness in acting as a bridge for the East and West. Also it must signify the Indian spirit in “unity in diversity” — representing the fact that in today’s troubled times India can be an example in how people of different cast , race, color, language and religion live together in harmony and proper. Last but not the least, thematically the symbol must live upto the promise that Rupee is committing to the world at large that it has the stability which is required by any currency to be the player in the global stage. https://samirshomepage.wordpress.com/2009/04/16/my-entry-for-rupee-symbol-design-contest/ https://samirshomepage.wordpress.com/2010/07/15/indian-rupee-got-a-distinct-symbol/

Quick and Dirty Guides for Designers and Developers : Adobe Edge Preview 3

“Quick and Dirty Guide for Designers: Adobe Edge Preview 3 in 4 Hours”

Ebook By Samir Dash
Published By patternGraphic DigiBooks
Rating: Not yet rated.
Published: Dec. 15, 2011
Category: Non-Fiction » Computers and Internet » Programming
Category: Non-Fiction » Computers and Internet » Graphics and design
Words: 9365 (approximate)
Language: English

ISBN: 978-1-4658-4425-5

PG2011B3

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

Original Price: $4.00

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

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

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:

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.

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

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

 

 

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

“Quick and Dirty Guide for Designers: Adobe Edge Preview 3 in 4 Hours”

Ebook By Samir Dash
Published By patternGraphic DigiBooks
Rating: Not yet rated.
Published: Dec. 15, 2011
Category: Non-Fiction » Computers and Internet » Programming
Category: Non-Fiction » Computers and Internet » Graphics and design
Words: 9365 (approximate)
Language: English

ISBN: 978-1-4658-4425-5

PG2011B3

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

Original Price: $4.00

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

Table of Contents

  • Before We Start!
  • What is Adobe Edge?
  • What to Expect from this Book
  • Getting Ready : Download and Setup Adobe Edge on your System
  • Hour 1: Quick Tour of the Adobe Edge IDE
  • Default Layout : Welcome to Adobe Edge!
  • “Get Started..” Panel
  • Stage
  • Toolbars
  • Elements panel
  • Timeline panel
  • Properties panel
  • Menu bar
  • Editor
  • Hour 2: Drawing and Animating Shapes
  • Creating your First Animation
  • Changing Color through Animation
  • Shape Morphing Animation
  • Animating Background Color of the Stage
  • Example: Creating a Flip Book animation
  • Hour 3: Editing Webpages Not Created With Edge
  • Animate Existing Webpage
  • Adding Animation to HTML Forms
  • Feedback Form Animation – Example of Animation to HTML Forms Elements
  • Hour 4: Adding Basic Actions to Your Animation through Triggers
  • Where to Add Triggers in the Edge IDE ?
  • Different Type of Triggers
  • “Earth” – An Example for Basic Playback Control
  • Going Forward
  • Next Step s
  • 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.

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.

If you are looking for the programming part stay tuned…”Quick and Dirty Guide for Developers: Adobe Edge Preview 3 in 4 Hours” is underway…… Notice the diff …it will be for DEVELOPERS.

5 Shortlisted Entries of New Rupee Symbol by Govt. of India

Last year in April I had submitted my entry for Rupee symbol to the “Rupee symbol design contest” (which was there in sl.no. 76 in the first list of eligible entries ) . After a wait of more than a year the 5 designs are now shortlisted from the  2,500 entries that have been received from across the country.

4 out of 5 selected entries were from Mumbai and the fifth one is from Kerala.

http://www.pluggd.in/indian-rupee-symbol-297/

However there were some interesting articles/press/posts/media stories I found :

http://img718.imageshack.us/img718/2905/18sec.jpg : This one states that each design was given approx 18 second to be evaluated!

http://yfrog.com/f/6h19marhindustanj/ This one states that there was spome kind of scam as the winners sent multiple entries where as it was restricted to only 2. also the jury never saw the background details and theme of the logo  which was the part of the contest guideline!(even here http://www.equitipz.com/2009/08/rupee-to-get-identification-symbol.html the commentary says that only the symbol design was presented to the jury!)

http://yfrog.com/f/3u22032010016j/ also states the similar story!

http://www.scribd.com/doc/25924085/RTI-Against-Symbol-for-Indian-Rupee-Design-Competition-Scam ()

<–  “RTI Against Symbol for Indian Rupee Design Competition Scam”

My Entry

https://samirshomepage.wordpress.com/2009/04/16/my-entry-for-rupee-symbol-design-contest/

Below are the Shortlisted designs by finance ministry

http://timesofindia.indiatimes.com/india/Cabinet-decides-on-rupee-sign-today-/articleshow/6084121.cms#write

UPDATE:

Now there is a new site called Save Indian Rupee Symbol at http://www.saveindianrupeesymbol.org/

which focuses on the possible scam in the design selection. As per this site:

  1. No records are available with Finance Ministry which could indicated, how many total design entries Finance Ministry had received ?
  2. Non-eligible candidate was shortlisted in top five finalists.
  3. One finalist was in contact with Finance Ministry and RBI prior to competition.
  4. Design concept or brief was not put in front of jury along with Indian Rupee symbol design.
  5. No marks or grades were allotted to selected (2644) candidates design entries, in the process of shortlisting top five finalist design entries.
  6. Jury had spends less than 20 seconds on each design entries to analyze it.
  7. One jury member from Ministry of Culture was absent on the day of final presentation.
  8. Three jury member were absent in two days long meeting dated 29th Sept. and 30th Sept. 2009
  9. All seven jury member had never meet in this whole selection process.

My entry for Rupee Symbol Design Contest

 Here is some of the details from the entry I had submitted to Indian Rupee Symbol Design Contest.  

 

 

 

 

 

The Proposed symbol of “Rupee”  is the synergy of several themes namely:  antiquity and modernity; Indian-ness and the International culture; the East and West.  The symbol has all the elements that projects its attributes that are strongly  recognizably Indian about it and at the same time it has all the characteristics that makes it a part of the family of popular international currency symbols such the Pound (£), the US dollar ($),  Yen (Y) and Euro (€).    The focus of the design of this symbol was mainly along the following lines.  Thematic  aspect  of the symbol :  The symbol of Rupee must represent the unique characteristics of the essence of India — the symbol must be representative of what we can recognize as Indian character. Historically it must represent country’s rich past and it must present itself as the  attestation of one of the culturally pregnant civilization. It must represent the India’s concept  uniqueness in acting as a bridge for the East and West. Also it must signify the Indian spirit in “unity in diversity” — representing the fact that in today’s troubled times India can be an example in how people of different cast , race, color, language and religion live together in harmony and proper.  Last but not the least,  thematically the symbol must  live upto the promise that Rupee is committing to the world at large that it has the stability which is required by any currency to be the player in the global stage.  

 


 

Design aspect of the symbol:

 

The design must truthfully represent the symbol’s connection to the  root of Indian Rupee. The design must be technically sound so that when used on the real life scenario it can be easily rendered on different devices and media with varying parameters such as resolution and color depths. Apart from preserving its uniqueness as Indian the design has to technically appealing eyes and psyche of the global mass. The symbol has to be designed in such a way that for foreign eyes it should not look alien. In other words it must represent “the fact that it is a player on the world stage”. The technical aspect of the design of the symbol must follow the world standards in for good iconography such as:

 Simple graphics, strong and easy to write – a single symbol .

  1. Even weight – not overloaded with strokes or have any minor unnecessary lines .
  2. Width not exceeding that of a zero – so it can fit into columns for company reports and accounting .
  3. It should have a visual link with existing well-known currency symbols .
  4. It should be aesthetically pleasing and easy to write by hand.

For this, the design is based on the concept of careful selection of glyphs/script elements from the two representative languages scripts – Devanāgarī and Latin Script/ English scripts.  The symbol mainly takes glyphs from Devanāgarī  to refer to the rich heritage and cultural ethos of India.

 

The origin of the word “rupee” is found in the Sanskrit word rūp or rūpyāh, which means “wrought silver,” originally “something provided with an image, a coin,” from rupah “shape, likeness, image.” The Sanskrit word rūpyakam (Devanāgarī:     रूप्यकम्   ) means coin of silver. Also the case is true for the Hindi word rūpyāh  (i.e. रुपया ), that was coined by Sher Shah Suri (1538-1545 AD) who introduced the silver Rupayya or Rupee coin. So from Hindi language : रुपया  the proposed symbol takes the first character.

 

 

Considering this the symbol takes its character from the First two characters (i.e. “Ru”)of the English name “Rupee”. Of course , the representation of the different characters from the two polar opposite script system (English standing for Western Philosohy and Devanagari as a part of Eastern philosophy) were represented in such a way that it results in an unique design concept that do justice to both of the script systems. The ”Ru” comes from the the Latin script/English script that is most representative of the West , its culture and historical ethos and by making it the part of the symbol makes it truly the point of synergy that represents the world harmony and peaceful coexistence of different cultural and regional elements. This also is the representative of India’s nature of tolerance and respect for different languages and culture, on the basis of which different people of varied cultural, language and racial domains live together and prosper in India even in today’s troubled times.

 

Attempts were also made that the glyph elements are merged in such a way to create the new aesthetic graphical representation that will contain in it-self the memory of the traditional use of abbreviations of the word “Rupee” and ”Rupees”  as “Rp” and “Rs” respectively.  If the proposed symbol is closely observed , next to R the “s” seems to be there in Flipped vertically. Similarly the presence of “p” next to “R” can be felt where “p” seems to be flipped with 90 degree clockwise. Representing these two aspects with out any  prominence in the symbol shows how these two past elements of “Rupee” character are deprecated. 

 

The expectation from the proposed symbol references the fact that this could be a powerful part of the country’s brand iconography, a signal of stability. And the concept of “stability” can be easily convinced by the international mass through the use of “horizontal lines” found in almost all the currency symbols.  The lines provide the symbol the required visual link with existing well-known currency symbols – and that makes it visually one of the same family of symbols that of others and preserving its uniqueness at the same time.

 

 

The symbol uses even lines of same thickness for its representation. As the soul focus behind symbol is to make it from a “simple graphical elements that will make it easy to write and easy to remember”. Apart from this the symbol is designed with the spirit to look unique as well as with the familiarity elements in the family of other major currency symbols. Last but not the least the concept is to have a clean and even weight – not overloaded with strokes or have any minor unnecessary lines.

 

 

 

The symbol design must be applicable to the standard key board – keeping in mind that the design will be used by various Font makers to create varied form of the symbol to include it in their Font sets.

 

As the design is most targeted to be represented as an Font character in Uni-Code (currently “Rs” is placed at 20A8 position in Unicode chart), it must be designed in such a way that it will render properly and evenly even in relatively small resolutions and lower color-depth screens (such as mobile devices, portable digital players etc.)

 

Every effort has been made to make the proposed symbol representative of the India in all its aspects and easily comprehensible to the eyes of international mass.

 

symbol_variations

 

(Click the above image to see it in A4 size to view how it is applicable to standard key board )

P.S:

The symbol is as simple as writing the hindi character “रू” by hand (which has been used by people for a long time to represent rupee word in Hindi). Here is a simple clip image showing how easy it is to write the symbol by hand:

20042009176

 

 

 

 

 

(The symbol was also tested on various lower resolution small screen devices to check if it renders well at small font sizes. )

testmobile