Sketching is key skill for any designer or an artist. Some designers believe totally in softwares like Photoshop or Painter & some believe that softwares are just media. Traditional artists also believe that Softwares cannot give a  joy of traditional media. So they keep working with pencils, watercolors, oils and others. Personally I belong to this later category of artists, but in case of low budget project, you need to use softwares to fake traditional media and achieve your desired painting, sketch effect in cheap price and less time.
I did this experiment while I was working on some old photos for a website. During R&D of this project I had some ideas to convert photos in sketches. I would like to share it with you.[ I know there are lot of tricks on internet already posted. What I am going to share here is just my experience. ]

For this tutorial I am using a photo of my uncle and friend Dr. Rajendra Kulkarni.

Final Image

Application : Photoshop Cs4
Tools used : brush, eraser
Device : Wacom Intuos 3 tablet.

Step 01

Open any photograph that has good tonal, color values in it. Its suggested for good results only.

Duplicate background layer by pressing Ctrl+j twice. Now you should have  following layers in layers palette.

Step 02

Select top layer and go to image >> adjustments > gradient map.

You will get something like above when you apply standard black to white gradient.
Then go  to filters >> stylize > & apply neon signs effect.

This is very Important step. Use above or your best settings to get outline effect. Then Invert it ( shortcut : Ctrl + i ), So you will get black lines on white background.

This will create a outline of image which we are going to use as reference or basic drawing. Then I tweaked it out as drawing by removing some black strokes and clean up.

Its just a drawing half done stage. Apply a multiply mode and you will be able to see photograph below it.

Step 03

now Select background copy layer and apply gradient map to it as we did for first layer. By now you should have following layers in your layers palette.

Step 04

Select both layers other than background and apply a mask to it one by one. I renamed those layers as shown in below graphic. Add new paper layer with paper texture below drawing  layer. Fill both masks with black color so no pixel will be visible from any layer except paper layer. You should have following layers in layers palette. now apply both layers as multiply mode and paper layer with normal mode.

Step 05

Then  start drawing randomly with large brush & white color in mask area of outlines layer.  So that it  will give you some random outline on paper. like below.

Step 06

Then select mask of drawing layer and start rendering lines in same way you do with pencil. Render light dark tones with variation in lines and pressure of pen. Also change brushes, sizes, hardness and opacity to get desired effect.  After rendering all you will get following result. You can see  start of this process in above image too. Some strokes on chicks, forehead.

See layers below, outline layer is  turned off after drawing is complete. You can  see white unmask area that shows drawing in layer. Which is drawn with help of wacom pen.

So here is final result.

Moving it further

Using combination of shift+ctrl + click on masks, select both masks with addition mode. Now select background layer. Then duplicate layer by pressing ctrl+j. It will copy masked or selected area from background image and will add it to new layer as a color sketch. Also you can add more strokes on separate layer with help or your skills to add more realistic sketching effect .

So here is color version. I hope you like this trick and use it somewhere.
Thanks for reading and visiting website.

Please let me know your thoughts on this article.

This tag offers freedom to choose font. Designers specially will find this tag more encouraging as they don’t have to bound their designs in few web font families.

So, Over all as a designer and front-end developer, I was pretty excited to give a try to it. But was lost in a misconceptions that it may not be supported by big devil “IE” and other many browsers, but I was wrong. It has separate method to do it for IE  & actually IE supports this font embedding from its version 4. That was shocking news for me!, [found myself a bit guilty for blaming IE for everything. :P ]

History

This tag was introduced in CSS2 but was supported in .eot format only by Internet Explorer & Netscape Navigator. But In CSS 2.1 It was removed. Which is current version of more than 90% websites. Now its being again introduced in CSS3 version but in new and simple way. Thats what we are going to discuss here.
This tag of CSS3 is now supported by

• IE4+,
• Safari 3.1+,
• Opera 10+,
• Firefox 3.5+
• Chrome 3.0 Beta.

So, This overall says that If you are computer literate or at least have installed latest browser on your system then you are ready for font freedom.

Live Example

So what is actual funda ? This is what I understood from my effort

1. Your web page is normal XHTML or Html which is beautified with CSS file.
2. In this CSS file, We create a font family which contains fonts those are non-web fonts. Means those fonts which are not so popular or not system default fonts like arial, helvetica, verdana.
3. We keep one TTF [ True Type Font ] file in web folder and call it as per requirement. So when ever web page calls for the font, first browser looks for that font on visitor’s system, if it exists it calls that font in web page. If its not installed, your font file gets downloaded in cache and it gets rendered on web page by browser.
4. Internet explorer doesn’t support TTF files for this tag, But not to worry as it supports .EOT format [Embeddable Open Type]
5. There are also support for woff, svg, otf file formats.

What do we need for this.

• A font file in .ttf format which is licensed for @font-face tag. There are many great and free fonts on internet. I would suggest font squirrel as they have clear license declaration under each font.
• A embeddable font file in .eot which can be created online from desired .ttf file. font squirrel also supports conversion too if they do not have your desired font.
• A web page index.html with dummy text in it and a blank style.css  file.

Lets get started !

First I created index.html file in project folder. I also created two folders called css & fonts to keep files organized.
So structure is

• project
  • css > style.css
  • fonts > font files.

Copy paste following code in your html file.

<body>
<div style="width:500px; margin:2% auto;">
<h1>Test of @font-face tag in CSS3 </h1>
<p>Praesent pellentesque malesuada massa ac pharetra. Integer ultricies est et nibh rhoncus aliquam nec in dui. Praesent a egestas lectus. Maecenas ut enim lacus. Proin nec enim arcu. Curabitur ut sapien eu velit venenatis molestie quis et dolor. In elementum tempor tellus quis tempor. Fusce suscipit placerat velit, vel aliquam arcu porta a? Fusce venenatis neque id diam tempor accumsan? Fusce condimentum eros vitae ligula tristique dapibus. </p>
</div>
</body>

Here is code used in style.css file located in css folder

@font-face {
 font-family: 'PT Sans Narrow';
 src: url('../fonts/PT_Sans_Narrow_Bold.eot');
 src: local('PTSans NarrowBold'), local('PT Sans Narrow'), url('../fonts/PT_Sans_Narrow_Bold.ttf') format('truetype');
}
* {
	padding:0;
	margin:0;
	line-height:100.01%;
}
body {
	background:#fff;
	font-family:'PT Sans Narrow', 'arial', sans-serif;
	color:#666;
	font-size:101.1%;
}
h1 {
	font:1.6em 'PT Sans Narrow', sans-serif;
	color:#CE5013;
	font-weight:bold;
}
p {
	font: 1em'PT Sans Narrow';
	color:#333;
	line-height:1.5em;
}

Download @font-face kit used in this example.

So what @font-face code is doing here?

As you can easily understand @font-face relates to type face of font. Its declaring own font family in first line. src is locating .eot or .ttf file to browser. Before ttf file there are local strings or values which are indicating browser to find the alternatives installed on visitor’s system by providing other possible names of the same font.

Now, in css just call font name in font property and add style to it. Done !

Samvidnyan emailed us their requirement of icon set which was going to be used in a software. The software which was planned for teachers and school staff to help them managing School time table. As it was related to school & educational field, We were excited to do work in this project.

In creative brief client clearly mentioned that

” We need to design an icon set that will be used in our windows based software. We are targeting a user class which is not expert in windows operations & does’nt need to be. So what we need is to have simple interface with bold and clear icons which are also windows native icons. “

They also added work flow of user & software while processing, So that we can suggest them where they may require extra icons to improve interface.

We started with few sketches and concepts of roles like principal, teachers, school, classrooms. Here are some of sketches.

Then we started working in Illustrator. We gave few revisions on icons to client and finalized all them.

We provided them total 12 icons for the software. Plus an icon for installation. Here are few Examples from Final Icons.

All icons are copyrighted for Samvidnyan Computer Systems, India.

Logo design process

Clients requirements : A logo which reflects nature, environment, resort feel. It was also bound to include various nature elements with simple design form. They needed this mostly for website purpose but it should not be that complicated for printing also.

We started doodling with few simple concepts like trees, landscapes, mountains explored some ideas about mystic valley. The mystic forced us to get another concept too

Created this work created for fun. Feel free to use this as wallpaper. Download it from here !
Total work flow was really fun process.  Comments and critiques are welcome !

Split browser

This plugin helps to separate browser tabs in to separate frames in same firefox window. easy management of windows and flexible layout are its main features

get it here

Personas for firefox

Are you bored with themes come on firefox theme section? or want to create them with your own photos? Then you just need this plugin. This concept is based on our day to day life. Just like we change our costume, you can change your browsers look and feel.

You have to just go on getpersonas.com and wear your personas !

Fox tab

This plugins changes the way you navigate through tabs in firefox. You get different transition modes to choose from. you get sleek interface to interact and you can easily see tabs with live updates.

get it here

Testgen4web

What if you get an assistant that repeats your firefox actions? Yes you can have one. This script is just incredible. When you record any action you performed in window. It gets recorded like macros and you can use it repeatedly many times. Usefull for form fill ups and other repeating works !

get it here

Scribefire

If you are blog writer and do offtenly blogging then you need this plugin. Its interface contains very rich text tool set + tabbed notes and save to draft utilites. You can configure blogs as many and you can monetize your blog or share it on internet.

get it here

These are some of  my personal favorites. These are different and cool. Which plugins do you like ? do mention in comments.

The answer would be yes or no .. I say why not ? If someone can’t afford photoshop, or doesn’t want to learn these softwares or doesn’t know how to install them ? then these web based software would be helping hand to them. There are some benifits of these softwares such as

• No Installation.
• Editing with quick simple facilities
• Save your work in common formats like jpg or gif or png. so they can be opened everywhere.
• They are flash based which is [95% ] os independant. so it opens on any computer whether its mac or pc or else. :)
• they are introducing new concepts those may cause for our much better future .

To start with -

SUMO PAINT :

one of my friend told me about sumo paint. great features, lite weight, fully flash copy of photoshop. so easier to use and fast.

1. Sumo paint gives 80% 95% feel of photoshop and its utilities are just the same as in photoshop.
2. Dry brushes, soft air brushes, smudge tool, blur sharp tools, stamp tool ..  are included in toolbox.
3. Plus they have added some shape tools and drawing tools like arc and bulky star tool. My favorite tool is symetry tool in which you can draw multiple threads in one stroke with symmetry. [must try it]
4. multiple image editing windows, blending modes, layers support with layer styles, free hand selection and other selection tool set with support of feather, navigator, swatches, color, gradient palletes are same as in photoshop. but still its not photoshop ..

After this I started searching more in this catagory. I found Pixer.us, Aviary, Splashup, piknik and many more.

Pixer.us :

Non flash Software. At first look I found its interface very very boring. But simplicity of this software is its main feature.

Really no nead to know about software and functions and all. Just choose your options,  move some sliders,  watch preview and click apply. save your file .. it is that simple. I was faculty in some institutes for 2 years . .. I know really how it is dificult to teach concepts like hue saturation or level control or filters and effects to root user who is computer illiterate or not frequent user. This facility is really good for them

This is just plain photo manupulating tool no drawing !

Splashup :

One thing on start you will say … sleek interface ! Its adobe air based software very lite and fast. [i guess // please correct if wrong ].  This facility has few similar features as compaired to sumo paint but one unique feature too. In this software,  you can edit your online photos from picasa, flickr, photobucket or your own domain. You have to just sign in from open dialogbox and you choose your photo or image or just browse from pc.

1. open file wizard has many tabbed options to open images. you need to register for free account on splashup to open any online image from image hosting service like picasa or flickr or photobucket.
2. It also supports to take picture from web cam and then use it for editing.
3. Gradient tool editor is nice feature of this software
4. Layers with layer styles are just working great !
5. brush set are enough good but do not satisfy advance users.
6. basic tool box and filters

Pixlr

Similer to sumo paint. Advance tool box with no shape tools. looks like almost similar to photoshop 7 and works really smooth.

1. toolset is fast and good, except crop and smudge tool. crop tool directly crops image no preview of crop image and smudge tool makes it bit heavy and slows down performance,
2. It has many language support
3. and similar software features to above softwares.

Aviary- Phoenix

most futuristic interface ever. it has many differences as compaired to above tools. very unique and stable.

1. rulars with guieds
2. tool settings appear when you click on tool, nested tools are easy to access.
3. takes lil bit time to load but results are superb.
4. total worth to try software. may say future of image editing tools is gona look like this..
5. bad is you need to sign up for saving your image .. but print screen + copypaste in paint does the job ! ;)

I just had start with sumo paint, editor which had large set of features compaired to others so i just tried to mention most uncommon feature of them. There are many others too like photoshop express from adobe, pikipimp, picnik .. try them out ..

tell me which one did you liked most !

Here are some photoshop actions I created for fun. I would like to share them with you.  Hope you like them. All are tested in photoshop cs3 and cs4.

Download actions.atn

Go to actions pannel
In actions pannel menu click on load actions.

• Locate downloaded action file. It will add 4 actions in your actions panel.
• photostack – I gives look to open image as if its stacked on its copies.
• gradient overlay – gives fire colored gradient map effect to opened image. use full on smoke and cloud images to create abstract things.
• pop art – actually this action was designed for one of my friend. This action gives four tinted images aligned in grid with white border.
• web 2.0 - this is really different than above actions. This creates folder structure to organize layers of web layout psd file. Very useful for beginners.
• open any test image & run action

Image of hillary duff is taken from usemycomputer.com

Free wallpaper collection from smashing magazine

I am really glad to announce that smashing magazine has released my wallpapers free on their blog post called Desktop Wallpaper Calendar: March 2009 , Further more I am going to post here some free stuffs, tutorials and news around my design world.