Saturday, February 28, 2009

SOFA Designer Folio

SOFA Designer Folio By ( feeleep )

SOFA Designer Folio

Purchase for $30.00 available via Themeforest.Watch Live Preview


Features

* WordPress version 2.6 – 2.7.1.
* All Browsers friendly with (PC & Mac)
* 2 columns
* WP Admin panel Easy to manage
* slideshow included :)
Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site

Read more...

4elements - Multi Purpose Business Template

4elements - Multi Purpose Business Template By ( idowebdesign )

4elements - Multi Purpose Business Template

Purchase for $15.00 available via Themeforest.Watch Live Preview


Features

* Cycle Controllable Slideshow On Homepage
* Cycle Controllable Slideshow On Portfolio Page
* Lightbox Showcase On Portfolio Page
* Ajax Form With Validation
* Unobtrusive Ajax Form With Validation On Contact Page
* Google Map API On Contact Page
* Can Be Easily Port To CMS
* IE6 PNG Fix support
* 4 PSD file included
Enjoy
Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site

Read more...

Free CSS Layouts And Templates

(X)HTML- and CSS-Templates



Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site
Read more...

Creative Studio

Creative Studio By ( karu )

Creative Studio

Purchase for $12.00 available via Themeforest.Watch Live Preview


Creative Studio Is Clean And Simple Portfolio + Blog Template.

Features

* Valid XHTM Strict 1.0
* With Table Less Design
* Lightbox Showcase Plugin Is Installed
* Well Documentation Easy Understandable
* PSD file included
Enjoy
Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site

Read more...

XL Template

XL Template By ( Charlie78 )

XL Template

Purchase for $30.00 available via FlashDen.Watch Live Preview



Features

* XML Template With 7 External Modules
* Intro And Slideshow Module
* FLV Player Module
* Contact Module(Requires PHP On Your Webserver)
* Size: 52kb
* HTML File Included
* Music Player Also Included
* Long Text Module (With Scrolling Mouse Included)
Enjoy
Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site

Read more...

Friday, February 27, 2009

Slide template

Slide template By ( monza )

Slide template

Purchase for $10.00 available via FlashDen.Watch Live Preview


You will be able to change the navigation, to change or to add you own buttons. You can also easy change all colors in this template.

Included files:
# Good documentation with print screens
# Flash 8 file
# Font
# Button sounds
Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site

Read more...

Anatomy

Anatomy By ( ivanfgautama )

Anatomy

Purchase for $25.00 available via Themeforest.Watch Live Preview


FWordpress theme with valid xhtml, featured content slider using jquery. suitable for showcase website, portfolio, community and news portal. Widget ready theme with 2 column and showcase section. dark and beautiful color in red, black and yellow dominance.
Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site

Read more...

Mikes Lounge

Mikes Lounge By ( templateup )

Mikes Lounge

Purchase for $20.00 available via Themeforest.Watch Live Preview


Features:

* Custom ajax widget for recent posts, comments and tags (no plugin needed)
* Widget ready
* Gravatar ready
* Valid XHTML 1 .0 strict and CSS 2 .1
* Caption styles for images
* preloaded images for smooth rollovers
* Tableless – loads quick
* top navigation bar of pages
* rss subscribe button integrated into the header

Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site

Read more...

My Company

My Company
By ( Anselmo )

My Company

Purchase for $15.00 available via Themeforest.Watch Live Preview


A stylish Business Template to showcase your products/services

- Valid XHTML 1 .0 Strict & CSS 2 .1
- Tableless design
- jquery slider
- jquery lightbox
- 4 organized psd included
Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site

Read more...

Modern Business 1 XHTML/CSS

Modern Business 1 XHTML/CSS
By ( jonathan01 )

Modern Business 1 XHTML/CSS

Purchase for $12.00 available via Themeforest.Watch Live Preview


This sleek and modern design can be adapted for use with any business type, personal portfolio or agency.

Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site

Read more...

10 Free High-Quality XHTML/CSS Templates (Pack # 3)

Template Screenshot

Flash Web | Download Flash Web



Template Screenshot

AppleWeb | Download Apple Web


Template Screenshot

Trial Impact | Download Trial Impact



Template Screenshot

Aquatic | Download Aquatic


Template Screenshot

Business Events | Download Business Events


Template Screenshot

Cool Web | Download Cool Web



Template Screenshot

Genious Web | Download Genious Web


Template Screenshot

Expert Vision | Download Expert Vision


Template Screenshot

Intercraft | Download Intercraft



Template Screenshot

Free Invitation:-









Read more...

Top 10 CSS Table Designs

Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap!


Top 10 CSS Table Designs

First things first



We start with a valid xhtml 1.0 strict markup. Here is an example of a valid table markup:




<!-- Table markup-->

<table id="...">

<!-- Table header -->

<thead>
<tr>

<th scope="col" id="...">...</th>
...
</tr>
</thead>

<!-- Table footer -->

<tfoot>
<tr>
<td>...</td>
</tr>

</tfoot>

<!-- Table body -->

<tbody>
<tr>
<td>...</td>

...
</tr>
...
</tbody>

</table>

You can read more about xhtml table markup in HTML Dog’s Table Section. I have tested the tables below in Mozilla Firefox 3, IE 6 and 7, Opera 9.x and Safari. Also note that I apply a light blue color scheme to all of these tables to give the article a consistent look. You can modify the color scheme to match your site — the source package is provided in the end of the article.



Before we start, let’s review the general rule of thumb for styling of tables:



  1. Tables love space. Set the width of tables carefully, according to the content. If you don’t know the perfect width, simply set the width of the table to 100%. Tables look nicer when they have “overwidth”, and when it comes to tables too much width is definitely better than too little width.


  2. Cells need some padding. Sure, each table cell relates to each other. But it doesn’t mean that we have to pull them too close, right? Define some space between the cells, crammed up table cells are so much harder to read.

  3. Treat tables the way you treat content. Tables are read similarly to the way we read text — except it’s harder and it takes more time to read a table. So be careful with the amount of contrast you are giving to your table. Use soft colors — it’s easier for the eyes. Don’t treat your table like it’s a graphical decoration. Make sure that the style you apply to it makes the content more readable, not the other way around.




Now that we are all set up let’s get going, shall we?


1. Horizontal Minimalist


Horizontal tables are tables that are read rather horizontally than vertically. Each entity is represented by a row. You can style these types of tables with minimalist style. Simply set enough padding to the cells (td and th) and put a 2 pixel border underneath the header.









































EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie

Because horizontal tables are supposed to be scanned horizontally, clearing the border of the table increases the efficiency of the table. The lack of border, however, makes this table design hard to read if it has too many rows. To counter it we simply add 1 pixel border underneath all td elements:








































EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie

The tr:hover rules are very useful to aid people reading a minimally designed tables. When the mouse cursor hovers over a cell, the rest of the cells in the same row highlights immediately, making it easier to track things if your tables have multiple columns.




Important!

Carefully finetune the typography and the padding between the cells

Pros

Very easy to style, good for simple tables

Cons

tr:hover rules don’t work in IE 6, table can be confusing if it has too many columns

Play with


Color scheme, typography, tr:hover effects


2. Vertical Minimalist


Although rarely used, vertically oriented tables are useful for categorizing or comparing descriptions of objects, with each entity represented by a column. We can style it in minimalistic style by adding whitespace separators between columns.








































ComedyAdventureActionChildren
Scary MovieIndiana JonesThe PunisherWall-E
Epic MovieStar WarsBad BoysMadagascar
SpartanLOTRDie HardFinding Nemo
Dr. DolittleThe Mummy300A Bug’s Life

Add large border-left and border-right with the same color as background. You can use transparent borders if you want, but IE 6 screws it all up. Since this table is supposed to be read from top to bottom (vertically), adding tr:hover does not help and instead makes it harder to read the data. There is perhaps a Javascript-based solution which enables you to highlight the whole column when a mouseover event occurs, but that’s beyond the scope of this article.




Important!

Carefully finetune the typography and the padding between the cells, do not add tr:hover effect

Pros

Easy to style, good for simple tables

Cons

Can not be used if background is not a solid block of color, suitable only for some tables

Play With


Color scheme and typography


3. Box


The most dependable of all styles, the box style works for all kinds of tables. Pick a good color scheme and then distribute background-color to all the cells. Don’t forget to accentuate the differences of each cell by defining border as a separator. An example of a box style table is the following table:








































EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie








































ComedyAdventureActionChildren
Scary MovieIndiana JonesThe PunisherWall-E
Epic MovieStar WarsBad BoysMadagascar
SpartanLOTRDie HardFinding Nemo
Dr. DolittleThe Mummy300A Bug’s Life

This style is nowadays probably the most used style. The tricky part is actually trying to find the color scheme that matches with your site. If your site is heavy on graphics, it will be pretty hard to use this style.



Important!

Choose a color scheme that matches with your site

Pros

Easy to style, flexible for large or small tables


Cons

Choosing the perfect color scheme could be tricky

Play with

Colors and borders, use dashed or dotted to achieve cute effects, typography, icons


4. Horizontal Zebra



Zebra-tables are pretty attractive and usable. The alternating background color can serve as a visual cue for people when scanning the table. To style a table as zebra, simply put a class="odd" to every odd ordered tr tag and define a style for it (e.g. using if ($count % 2) then even class else odd class in PHP).



...

<tr class="odd">

<td>...</td>
...
</tr>

<tr>
<td>...</td>

...
</tr>

...







































EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie


Important!

Do not put too much contrast on the zebra colors, you can blind your users


Pros

The zebra pattern can help people to scan the table

Cons

Adding class="odd" manually can be very tedious for large tables, many content management systems do not provide even/odd features on a table loop, hence picking the color scheme may be tricky

Play With


Contrasting color, borders, typography, icons


5. Vertical Zebra Style


Vertical zebra is easier to style than the horizontal one, as we can make use of colgroup and col elements to distribute column classes. However, the markup becomes a little bit heavier:




<table>

<!-- Colgroup -->
<colgroup>
<col class="vzebra-odd">
<col class="vzebra-even">
<col class="vzebra-odd">

<col class="vzebra-even">
</colgroup>

<!-- Table header -->
<thead>
<tr>

<th scope="col" id="vzebra-comedy">Employee</th>
...
</tr>
</thead>

...
</table>

The colgroup element actually applies a style or class to the table, columnwise. Instead of tediously applying class for the first td or th element, we can use a more convenient colgroup-tag. For more information about colgroup visit this page.



















































ComedyAdventureActionChildren
Scary MovieIndiana JonesThe PunisherWall-E
Epic MovieStar WarsBad BoysMadagascar
SpartanLOTRDie HardFinding Nemo
Dr. DolittleThe Mummy300A Bug’s Life

Although perhaps more suitable for vertically-oriented table, this zebra-style can also be used for any other kind of tables.




Important!

Do not put too much contrast on the zebra colors, you can blind your viewer

Pros

Suitable for all types of tables

Cons

Choosing the color scheme could be tricky, need to add colgroup elements

Play With


Contrasting color, borders, colgroup and col, icons and typography


6. One Column Emphasis


In some tables, some particular column may have a higher weight than the other columns. If that’s the case, you can use colgroup and col to make that particular column stand out. In the example below, the first column serves as the starting point to read, so it is emphasized, just like we emphasize the first letter of the paragraph as drop caps:


















































CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3


You can also use one-column-emphasis-technique to highlight something important, say the column containing totals of an accounting table, or in a comparison table — for computer specification perhaps, the winning entity (column).



Important!

Be careful, don’t overdo the emphasis or the column will jump out, distracting the effort to read the rest of the columns.

Pros

Very effective when used in certain kind of tables

Cons


The necessary tr:hover effect does not work in IE, suitable for certain types of tables only

Play with

Color scheme, typography, icons and tr:hover effects


7. Newspaper


To achieve the so-called newspaper effect, apply border to table element and play with the cells inside. A quick, minimalistic newspaper style can look like this:














































CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3

Simply play with color scheme, borders, padding, backgrounds, and tr:hover effects of the cells (td and th). Other alternatives are presented below:




















































CompanyQ1Q2Q3Q4
The above data were fictional and made up, please do not sue me
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3







































FavoriteGreatNiceBad
Passion of the ChristBourne UltimatumShoot ‘Em UpAli
The Big FishThe MummyApocalyptoMonster
Shawshank RedemptionCold MountainIndiana JonesDead or Alive
Greatest Story Ever ToldI Am LegendStar WarsSaw 3


Important!

Be careful with border-collapse, do not lose the signature border around the table!

Pros

Gives a royal, authorative aura to a table


Cons

Unsuitable for large tables (it loses it’s charm on large tables)

Play With

Typography, color scheme, background, border, padding, and tr:hover effects


8. Rounded Corner


Rounded corners are slick and modern, and it’s easy to apply it to a table, although you need to fire up Photoshop for this. Create images for all four corners of your table. Theoretically, we can make use of the nesting tr and td-elements to place the left and right corners of the table without adding additional markup. Unfortunately, IE 6 goes berserk and the table appears ugly, so the most stable way to do this is to put ID or class to all four corner cells of the table. Please consider the example below:





















































CompanyQ1Q2Q3Q4
The above data were fictional and made up, please do not sue me
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3


Pros

Great if you want untraditional table, probably the only viable option you have if your website uses rounded corners heavily

Cons

Takes longer to style, requires images

Play With

Color scheme, corner variations, typography, tr:hover effects, icons



9. Table Background


If you are looking for a quick and unique way to style your table, simply pick an attractive image or photo related to the subject of your table and set it to be the background-image of the table. You can add 50% grey png-image as background-image of the cells to improve readability, and that means that you need a CSS-hack to make it work in IE 6:




* html table tbody td
{

/* IE CSS Filter Hack goes here*/

}


The table would look like this:








































EmployeeDivisionSuggestions
IE 6 users won’t see the transparent background if the hack is not applied
Stephen C. CoxMarketingMake discount offers
Josephin TanAdvertisingGive bonuses
Joyce MingMarketingNew designs
James A. PentelMarketingBetter Packaging


Important!

Make sure the image is relevant to the table’s contents

Pros

Very easy to style, delivers unique look, if used correctly the image can serve as a symbol that gives outstanding impression on the viewer

Cons

Needs hack to get the background work in IE 6, needs images

Play With


Background images, transparent PNGs, typography, colors, icons


10. Cell Background


You can apply background-image to the cells and achieve a consistent look. Say you have at least half an hour to spare and you want something that’s not too bland. Start your Photoshop and make 1 pixel width gradients, and set them as background-image of all cells. You’ll end up with a gradient style table:














































EmployeeDivisionSuggestionsRating
Give background color to the table cells to achieve seamless transition
Stephen C. CoxMarketingMake discount offers3/10
Josephin TanAdvertisingGive bonuses5/10
Joyce MingMarketingNew designs8/10
James A. PentelMarketingBetter Packaging8/10

Similarly, pick a pattern and set it as background-image and you’ll end up with a pattern-styled-table:








































EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie








































NationCapitalLanguageUnique
JapanTokyoJapaneseKarate
South KoreaSeoulKoreanGinseng
ChinaBeijingMandarinKung-Fu
IndonesiaJakartaIndonesianBatik


Important!

Make sure the text stands out against the background

Pros

Easy to style, not too bland

Cons

Uses images, patterns and gradients might distract reading

Play With


Color scheme, patterns, typography, borders, backgrounds, gradients, icons




Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site

Read more...

Thursday, February 26, 2009

Icon Design Tutorial: A Pencil Icon

by Vu Tran and Min Tran


Nowadays we can see icons everywhere, from a game console to web applications. Icons are getting more and more popular and play an important role, maybe the most important role in user interfaces. However, the resources about icon design are not that popular which is why when we have done our first steps in icon design, it was really hard to find a good starting point.



There were only few in-depth tutorials or books about this subject. Which is why we would like to share some (hopefully useful) tips about how to create a simple icon set. This tutorial presents of course not everything you should know about how to master icon design, but we hope that it will help you, particularly if you have just started to learn, or want to learn more about icon design.


Milky Icon Set

Few weeks ago we have released the Bright! Icon Set (see the image above) which is available for free download from our web-site. This article explains the process of designing a simple pencil icon, one of the icons of the icon set. The tutorial is very detailed and in-depth, so you will hopefully be able to follow each step without any problems.


Although we consider a basic example, the principles, conceptialization and techniques from this article can easily be applied to icon design in general. Although all tools we use in this guide are very simple and very easy to work with, your acquaintance with Adobe Illustrator is still requisite.


This is the result which we’ll come up with at the end of the article. You can download the source file as well.



outline
outline

So how do we start? Usually before starting, we have to gather some pencil pictures on the Web and pick up the details and traits out of those pictures and mix them all to create a style for some fresh pencil icon. We always start with a hand-drawn sketch.


1. Characteristics of a pencil icon


Drawing an icon means to draw the most typical characters of an object so that it can capture the icon’s action or represent the concept and nuance.

As you might know, there are generally three kinds of pencils to select from:



  1. Prism-shaped body with a shiny glaze-coated end.

  2. Prism-shaped body with an eraser secured to the pencil body by a bright white metal ring.

  3. Cylinder-shaped body without an eraser.



We choose the second kind for the icon design because it has all necessary elements, making it easier for the viewer to recognize the image. After trying to sketch some upon the second kind, this is the sample sketch that matches the style of the set that we have in mind.

Our favorite drawing tools are Copic Markers with 10%, 30%, 50% gray tones and a ballpoint pen. Some important things that should be followed as working on this icon:



  • When an icon is designed in a large size, you need to pay close attention to details, and make sure that the two-point perspective is used. But in this article, because the icon is to be made and optimized in smaller sizes (64×64px and 48×48px), its concept should be as simple as possible, and the icon should be illustrated in one-point perspective.

  • Light used in the icon must be harmonized.

  • Perspective used for the icon must be identical in the iconset, making all the icons look like being in a family.


  • Style should be a bit more manly-looking.

  • Decisive color is green.

  • Since the icon is to be saved in an EPS8 file, only gradient is used and all the paths must be connected (no open paths). It is also important to note that there is no transparent effect and no raster image invovled.


Okay, let’s get to the main part!


2. Sketches:


In our icon design sketches always come first.


We are going to scan these sketches into Illustrator.


2

3. Basic outline:



3.1. The pencil body



  1. Create a 64 x 64px document. Drag the image (the scanned sketch) into the artboard of the new document. Go to the Transparency palette and set the image’s opacity to 50. Lock this layer and save the document. Create a new layer and start to make outlines on it.

  2. Create a rounded rectangle path using the Rounded Rectangle tool and then click on the artboard to set the Corner Radius value to 10px. Click OK.

  3. 2
    2.1
  4. Choose the Selection tool (V) and click on an edge of the rounded rectangle path and drag it over and make it fit tightly on the sketched image like the picture below.


    3

    • Select the round rectangle and set their color to none.


    • The eraser looks smaller than the body, so it needs to be reformed. There may be several ways to redraw the eraser like using the Pen tool (P) but from my experience they didn’t give good results.



  5. Select the rounded rectangle path. Double-click on the Scale tool and check Uniform in the Scale dialog box. Set the scale value at 96%. Check Copy to create a replica as shown in the picture below.
    2

  6. Choose the Rectangle tool and draw a new rectangle at the position of the eraser and over the rounded rectangle path.
    2

  7. Choose the Add Anchor Point tool (+) and click on the central point of the rectangle path (drawn in step 5) to add one more anchor point. Next, select the Delete Anchor Point tool (-) and delete 2 anchor points.
    2

  8. Choose the Ellipse tool and draw an ellipse as shown below:
    2

  9. Select the larger rounded rectangle path and the ellipse path. Go to the Pathfinder palette and click the Divide icon. A new group appears in the Layer palette. Any divided path will belong to this group.

    2

  10. Go to the Layer palette and select two paths located below the new group, press Command/Ctrl + G to put them into a group and lock this group. Do that to make it easier to delete unused paths in step

  11. Ungroup the group with divided paths (in step 8) by selecting the group and choosing the Ungroup command from the right-click menu.
    2

  12. Delete unused paths until the result is achieved as below.
    2


3.2. The metal ring


Just like the steps done with the eraser, for this path we’ll use a bigger ellipse and divide the pencil body path to detach the metal ring from the body.



2
2

The shape of pencil now has been taken very basically. I think we can go into its details from this step on. What we have to do is cleaning up the pencil.


4. Details:


2

Create the outlines for a pencil with sharpened end by using the Rounded Rectangle tool and the Pathfinder palette. All we have to do with this path is make the pencil body in a prism shape and look being already sharpened.



  1. Select the Rounded Rectangle tool and draw a new rounded rectangle path with 4pt corner radius (like in step 2B).


  2. Make a duplicate of this rounded rectangle path by pressing “Copy and Paste in front” commands (Command/Ctrl + F )


  3. Move the duplicate path to the right.
    2

  4. Select both rounded rectangle paths and the body path, and then divide them using the Divide option in the Pathfinder palette.

  5. Select the group with divided paths and ungroup it, and then delete unused paths. The result should be like this:
    2

  6. Continue using the Rounded Rectangle tool to draw another rounded rectangle path, and then use the Divide option to cut the path in the middle of the pencil body to form a clear prism. Next, ungroup and unlock all the paths in Layer 2, and then change their names. See the result below.
    2
    2


5. Styling the Pencil:



And now we are going to give the icon some charm. The steps include:


5.1. Adding gradient



  1. Select all the paths and select the Gradient tool, and then go to the Swatches palette and choose a radial black-gray-white gradient.

  2. Select each path and drag the Gradient tool (G) across each of them until you see the result like the picture below:
    2

  3. Select all the paths and set their stroke weight to zero. The purpose is to preview the pencil in general.
    2

    Well, light depicted in the pencil body looks fine, but the metal ring and the sharpened end need to be adjusted a bit.


  4. Change the gradient type of this path to linear to create a new gradient as shown in the picture below. Hoping you could create the gradient like mine. In case you couldn’t make it yourself, just download the attached source file.

    2
    2
    2

  5. The metal ring path should embrace the eraser tightly. To do this, use the Add Anchor Point tool (+) and add 4 more anchor points to the two ends of the metal ring path, and then delete 2 corner points. The result look like this:

    2>



  6. The metal ring path also needs to be a little thicker. The easiest way is use the Offset Path command. Select the path and then go to Object>Path>Offset Path. In the Offset Path dialog box, set the offset value to -1pt or less. You may check Preview to see the result and hit OK.
    2
    2

    Notes:



    • Use the Offset path to make a duplicate over the metal ring path; change the gradient of the metal ring path (locating below the duplicate) to give depth.


    • Whenever the Offset path is used, the default name of the duplicate is “path”.

    • If the offset value is minus (-), the duplicate will stay upper.



  7. Apply the radial black-gray-white to the metal ring path, press G and drag the Gradient tool across the path until you get the result like the picture below:

    Okay, the metal ring looks acceptable to the eye. Now let’s mess with the sharpened end or the pencil nib path.


    2

  8. Scale the pencil nib path so that it adjoins with the pencil body.


  9. Like in the sketch, the pencil nib path here needs a highlight piece located right at its center, making up its shape. Before doing this, remember that the icon is to be saved in EPS8 format and there’s no usage of effect, no blending mode or opacity adjustment but only paths or the blendshape. To make it simpler, use the Pen tool and draw a path over the pencil nib path.
    2

  10. Change the direction and angle of the gradient until the pencil nib is taken shape properly.

  11. Draw the pencil lead using the Pen tool.


  12. Give a highlight piece to the eraser using the Pen tool and change the angle of the gradient to suggest the eraser shape.

  13. Use the Offset path command to make a duplicate of the eraser path. Change the gradient tone of the eraser path to make its contour look sharper.
    2



5.2. Tweaking the color


In this stage, we’ll put each element of the pencil into each separate group (the body, the eraser, and the sharpened end).



  1. Select the pencil body paths (including 3 paths). Go to Edit > Adjust Color Balance, check Preview and Convert in the Adjust dialog box, and then switch to RGB mode.
    2

  2. Drag the slider to change the Red/Green/Blue values (to whatever color you like).

  3. Select the eraser and do the same Step 2.

  4. Select the sharpened end and change its color (do dittos).

    2

    The pencil now looks flatter than it was initially. That’s because the gradient will lose the black color after adjusting the color balance. What we’re going to do next is go back to the three elements of the pencil and add the black color to their gradient so that the shapes of the elements will display clearer.


  5. Grab the gradient slider and move the main color closer to the white. In the Color palette, drag that color down to the Gradient palette. Select the color just dragged (by clicking the gradient slider) and change its value to 0-0-0 (make sure the color mode is RGB). You may use the Color palette to change the gradient color.
    2


6. Deeper details and style matching


After everything basic is done, switch to Pixel Preview mode from the View menu to see if the pixelation problem occurred.


We are almost done. Yet, as you see, the pencil lead looks very sharp-pointed, giving an unsafe feel. So we got to change that conical point to a frustum of a pyramid. Also, we need to add some extra paths to the pencil body as highlight pieces (using the Offset Path command). This is necessary because the outer housing of the pencil is a very shiny coating.



And the result is:


2

After the icon is rotated at 45-degree angle:


2

Well, one more thing, the pencil still looks so dark that can’t match the styleweI want to have, so we’ll make a change to its color. Just add some detail to the metal ring path by (1) duplicating the path and scale the duplicate a little bit, and then (2) make another duplicate and drag the gradient over it to make the icon more realistic.


Note: make sure both “Snap to Pixel” and “Snap to Point” have been checked after Pixel Preview mode is used.


The final outcome:


2

Look at the final outcome. While the light direction comes from above, the lower part of the pencil body is lighter than the upper part. Yes, it’s the reflection of light.


Many assume that it’s tough to draw icons with Illustrator due to difficulty in representing color and light. If you have a good sense of color you can change the gradient color and tone using the Color palette.


outline
outline

Anyway with Photoshop, you could do the following way:



  1. Export your vector to a PNG, then open it in Photoshop.

    Change the color and light level of the icon image by using Curves or Color Balance or Auto Levels (from Image menu > Adjustments), or using other techniques you knew in Photoshop. After editing, save the image file.

  2. Drag the edited image into Illustrator, then use the Eyedroper tool to pick up three main values of color – brightness, medium and darkness, and after every pick-up, drag the color into the Swatches palette to save.


  3. Drag your chosen color into the Gradient palette to make your own nice gradients, then applied to your icon.

    I used to do that way for a while and now I’ve owned a useful library of gradients, which I always use to style my icon sets.


7. Source files


You can download the source files of the icon in .eps and .ai for free:




Common Mistakes


Let us discuss some mistakes which are frequently occur when it comes to icon design using the example above.



  • Create reflection and highlights in the icon by drawing a new path over the original path and add the while or black to it, then changing its opacity.

    This way will make the object color to be the silver gray, losing the clearness as it was, though it still can achieve glossiness.

  • Use gaudy models of pencil and round cylinder shape to easily take shape of the pencil icon with only one gradient.


    But drawing icons is drawing anything most familiar and typical, and draw objects that best capture the icon’s action or gesture. A round-shaped pencil icon hardly can come with sharp corners and clear highlights.

  • Rely on a prism-shaping gradient by using a path to demonstrate the pencil body and then apply the gradient that makes an object look like a prism shape to the path.

    This may be an easy way but very difficult to edit, and the gradient tends to be askew.

  • Use the blendshape to cast shadow in EPS8 and the shadow changes from white to black without transparency.

    When the shadow casts on a background with color other than white, a white contour will appear.



Design comparisions



These are some typical designs we’d like to bring in and classify them upon some good and weak points.

The final result above shows the pencil icons designed in one-point perspective. This is a perfect design that obtains all necessary components: lighting, shadow, color and composition, and especially, this design can be scaled down to any size without pixelation problem.


right

Figure 1 shows the pencil icons designed in two-point perspective. This design depicts good lighting, acceptable shadow and nice color, and does not encounter the pixilation problem. Yes, this design looks nice and cool. However, the composition and shape of the pencils may not be recognizable immediately to viewers, resulting in the violation of the main principle of icon design.



wrong
Figure 1

Figure 2 shows the folder icons designed in two-point perspective. The design looks nearly perfect with nice concept, a complete and proper composition. It’s also a good design as it depicts accurately the light direction that comes from above and casts a nice shadow, and the light reflection on the folder object is wonderful. Yet, pixelation problem occurs on the upper edges of the folders, causing the icon in 24×24px to lose sharpness.


wrong
Figure 2

Conclusion


There are many different approaches to icon design, some use 3D application, others use Firework or Photoshop, but the goal in designing icons is the same, whatever tools we use. We need to keep the consistency through every icon in the set, and maintain recognization and simplicity. As we said in the beginning of this article, these are just some basic steps and principles of creating a beautiful and crisp icon. We hope you enjoy this tutorial. If you feel urged to learn more, please keep track on the free icon design book that we will make publicly available in July.



Vu Tran and Min Tran are the creative minds behind Frexy. When not pushing pixels, they enjoy sharing their ideas through Min’s blog and working on an upcoming free book titled “Learning icon design in 30 days”.




Free Invitation:-










If You Like My Post Comment Me,Thanks For Visiting To Site

Read more...

Followers

Action

Mesothelioma Cancer
ThemeFlash Msn bot last visit powered by MyPagerank.Net Creative Commons License
 

ThemeFlash : The Quality Web Resources. Copyright 2009-2010 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol