v-render

Using css3 @font-face

admin — Wed, 24 Feb 2010 04:32:09 +0000

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. ]

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

Your web page is normal XHTML or Html which is beautified with CSS file.
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.
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.
Internet explorer doesn’t support TTF files for this tag, But not to worry as it supports .EOT format [Embeddable Open Type]
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.



Test of @font-face tag in CSS3 
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.

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 !

Pros:

Gives you to choose font you want.
Design friendly rendering of page in less code
Many browsers supported, Even IE4.
Very lite to load, No flash, php or js methods required for font replacements
If visitors browser is not supported for css3 it uses default other system fonts and shows content.

Cons :

Great risk of font piracy, So clear license for use is advised when using commercial, creative commons or free fonts in projects.
Adds a bit delay while loading a page. Also shows system font first then desired font.
Font rendering quality differs from browser to browsers. As anti aliasing techniques of each browser are different. Ultimately affects design.
Renders blocks in IE when there is script called before @font-face tag.

References :

Resources :

New icons set for Samvidnyan.

admin — Sun, 20 Dec 2009 03:59:32 +0000

Recently we designed Icon set for our client company Samvidnyan Computers.

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.

Mystic Valley

admin — Tue, 13 Oct 2009 22:21:32 +0000

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

SKETCH - 01

SKETCH - 02

FINAL - 03

but finally client asked very simple yet illustrative logo. So they selected our last concept.

DIGITAL VERSION

Then we started working in illustrator, sent some compositions of same concept.

then we finalized look and feel of logo. Here is the final logo with there web banner.

we also provided web design service to them. Please visit website
here are some snapshots from website. It also changes environment around website as per your time zone.

Visit Website

This is our first experience with this client and it was great! on time feedback. clear intentions behind project and complete information about project was given to us. Your comments and critiques are welcome.

Choco tea..

v-render — Mon, 24 Aug 2009 13:31:06 +0000

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 !

5 fantastic firefox plugins

v-render — Mon, 18 May 2009 09:51:15 +0000

Firefox is being more and more popular in India due to its speed and extentions or plugins. Firefox it self and these helpful plugins make our internet experience more comfirtable and easy. I was just going through plugins section and was wondering about any new facilities those I don’t know yet. These are really fantastic plugins for firefox 3.

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.

Color studies

v-render — Sun, 12 Apr 2009 18:36:53 +0000

As an assignment I am copying some reference images found on internet to study their compose, lighting and color schemes . I am having great fun with my wacom tablet. just want to share this with you. please let me know how do you feel.

5 Web-based image editors

v-render — Fri, 20 Mar 2009 20:33:55 +0000

Photoshop, GIMP, Paint.net, Corel Painter, Paintshop pro .., there are so many other desktop based image editing soft wares, which offer many facilities on click, then is there need of any web based editor?

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.

Sumo paint gives 80% 95% feel of photoshop and its utilities are just the same as in photoshop.
Dry brushes, soft air brushes, smudge tool, blur sharp tools, stamp tool .. are included in toolbox.
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]
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.

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.
It also supports to take picture from web cam and then use it for editing.
Gradient tool editor is nice feature of this software
Layers with layer styles are just working great !
brush set are enough good but do not satisfy advance users.
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.

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,
It has many language support
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.

rulars with guieds
tool settings appear when you click on tool, nested tools are easy to access.
takes lil bit time to load but results are superb.
total worth to try software. may say future of image editing tools is gona look like this..
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 !

Photoshop Actions

v-render — Wed, 04 Mar 2009 19:12:02 +0000

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

Smashing Start of v-render

admin — Mon, 02 Mar 2009 06:39:15 +0000

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.