| Create Free Blog | Random Blog » | Report Abuse | Login |
This bolg is helpful to start desinging your self, it may learns so many things in graphics, vector lines, photoshop fields also you may lean some imp tips, tools, tricks, desigin related stuffs, tutorials, information about designs, softwares and many more useful things…So visit this blog and enjoy with your creative mind in the world..
817 Icons .PNG .ICO
Map icons with different symbols on them in different colors. Cut and paste using the included png or change them yourself with the included vector files. Have fun using.
Format: 1 eps/svg, 1 png
Resolution: 1 png @ 550dpi (7639×7639)
Translating the ‘iconic’ features of an object into something that is metaphorically meaningful and instantly recognizable is no easy task — particularly when the design needs to be as effective at 48×48 pixels as it is at 256×256!
A memorable and functional icon is beautiful, iconic, meaningful and functional. Here are ten wise tips on how to create outstanding icons.
1. Capture the Characteristics of the Object
One of the most important aspects of icon design is to create an icon that is immediately recognizable. Whether it is meant to represent a blue frog or a tin of pencils, what it is trying to portray must be identifiable at a glance or the purpose of the icon is defeated. An icon must, of course, be ‘iconic’ of the metaphor it represents.
In an icon design tutorial over at Smashing Magazine, master icon designers Vu and Min Tran discuss their process behind the pencil graphic as part of their Bright! Icon Set.
Drawing an icon means to draw the most typical characteristics 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:
- Prism-shaped body with a shiny glaze-coated end.
- Prism-shaped body with an eraser secured to the pencil body by a bright white metal ring.
- 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.
Sometimes it’s better to choose the more complicated form of an object because there are fewer other items that share those unique characteristics, making the specific object you’re trying to portray easier to identify. There are plenty of cylindrical objects with pointy tips besides pencils (pens, markers, nails) and at smaller sizes they might be indistinguishable, but only a pencil has a prism-shaped body with an eraser attached by a bright white metal ring. It becomes ‘iconic’.
For icon creators DryIcons, an key value in their design process is to keep their icons fairly simple and basic style-wise, as opposed to aiming for a definitive style. This helps make the icons much more versatile and useable in a range of projects once sold as a complete pack to software developers. If your icon looks at home in a broader range of settings, its potential market becomes bigger.
Regarding trends, we feel that it’s very important to keep things simple and basic, so they could serve their initial purpose: to fit in one’s project as it would seem like that was the way it should naturally be. That’s the only trend we follow.
One particularly useful tip when designing multiple icons for a pack is to provide consistency between them not only in style but also in the details such as the light source. While usually a secondary thought, any mismatch of one icon in the pack could seriously affect the overall quality of the icons.
In this overview of the Windows Vista icons, it is noted how the light source has changed between operating systems, but is consistent with all icons in each set.
Shadows in Vista icon objects are indicative of true, realistic depth just as they exist in any object in the real world. Vista icons do not have the flat lower-right drop shadows that are default for Windows XP icons. The light source is also completely different in Vista icons. All objects now face directly into the light source. From Windows 95 to Windows XP the light source on all icons has always come from the top left and objects are rotated counter-clockwise, away from the light source. The Vista icons placement and lighting will be completely opposite in comparison to Windows XP and older Windows system icons.
Icons often need to be used in a range of sizes, therefore it is a good opportunity to make the most of the scaleable nature of vector graphics to create a great looking design that can be used for multiple purposes.
What’s more, with vector software packages such as Adobe Illustrator, every shape, gradient and stroke that makes up the icon can be tweaked and changed at any point, unlike a pixel based design that needs redrawing when changes are made.
This excellent icon design tutorial here at VECTORUTS goes through the process of how a stunning graphic can be created based on the basic shapes and gradients of Illustrator.
On the contrary, vector graphics aren’t always the best approach for icon designers. With many icons requiring very small scales vector graphics often don’t manage to reproduce a crisp render when rasterized. In these cases completely redrawing the icon at a number of specified sizes gives the best result.
Web Interface Designers Firewheel Design highlight this approach in their discussion of bitmap vs. vector:
When you take a vector image, originally sized at 24×24 and scale it down to 16×16, the relative proportions do not match. There’s no way you can evenly distribute 24 pixels of information into 16 pixels of space (remember, there’s no such thing as half a pixel). So the image blurs.
There’s also no way you can evenly scale 24 pixels of information upwards into 32 pixels of space. Again, the image blurs.
Furthermore, if you take that same vector image, originally sized at 24×24 and scale it up to 48×48, you’re now doubling the proportions. You no longer have crisp 1-pixel lines. You have chunky 2-pixel lines. Scale it up larger (say to 96×96) and those lines become even thicker.
Similar to point number one, where it was mentioned that it’s crucial to capture the ‘iconic’ characteristics of an object, it’s also important to remember that there may be huge cultural differences in the recognition of everyday items.
Turbomilk discuss this in their useful roundup of 10 Mistakes in Icon Design with the example of a mailbox. What might be the recognized shape and color of a mailbox in one country, might be totally wrong for another.
It is always necessary to take into account the conditions in which your icon is going to be used. An important aspect here is national characteristics. Cultural traditions, surroundings and gestures can differ radically from country to country.
Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less recognizable than a postage stamp.
Note: pay particular attention to this rule when designing icons based on warning and traffic signs, which differ on a country by country basis.
If an icon is created as a bland graphic presented in a circular shape it is likely to be overlooked. Using strong colors and an interesting shape that reinforces the object will help the icon to stand out. Remember that icons are rarely going to be displayed on a mono-colored background — in most cases there will be a lot going on behind them, so they’ll need to stand out. Consider also using gloss and shading to create a more dynamic final effect.
Jasper Hauser, the designer behind the Camino icon, touches on this in an interview discussing ‘What makes good icon design?‘
Basically there are two aspects that are the base of a good icon: 1) shape, and 2) use of color. If you look at the Appzapper icon you will see that it 1) has a original shape, and 2) uses irregular colors and an irregular color combination. Doing a blue circle will not stand out.
It has already been mentioned that icon designers need to accommodate small scales into their icon creations. However, with the forward development of technology designers should also be taking into consideration the use of icons at a much larger scale than the standard. An example of this occurs in Windows Vista, where the icons can be scaled up to 256px tall!
In an interview with Brian Brasher, an artist at Firewheel Design, he was asked:
John Marstall: What’s your opinion on the shift to larger icons and resolution independence?
Brian: Larger icons mean more detail, which means a richer GUI experience as well as removing a lot of restrictions an icon maker has placed upon him to make an image legible. Unfortunately, throwing out those restrictions means that a lot of icons that look quite spiffy at full size will be muddy, cruddy horrors at 32×32 and below. A two-edged sword. There will be casualties.
Sketching is a common process in any aspect of design and it continues into icon design. Fleshing out a range of ideas on paper really helps develop a concise product that fits the requirements of its purpose. Because an icon design must conform to a defined set of proportions and dimensions while still being ‘iconic’ and immediately recognizable, forward planning is incredibly important.
Michael Matas, a graphic designer who has created icons for the Mac OS X platform shares his own working practices:
I always start on my white board. I try to come up with good and clear metaphors for the icon. I sketch out different ideas and usually end up covering the entire white board. When I do come up with a good metaphor, I then start sketching the layout of the icon and what angle I am going to draw it from. I go on Google image search and Watson’s picture search and try to find good pictures for the object I’m drawing. I download anything that looks decent and open them all up in Photoshop. I create a new Photoshop file to draw the icon in and surround that window with the images I downloaded from the Web. I use the Web images to help me get an idea for what the texture and shape looks like. But if I can, I always try to look at real objects to get inspiration.
The job of an icon is to represent an action or idea in the form of a graphical symbol. Therefore metaphors play a crucial role in translating that action or idea instantly to the user. When commissioning a set of fresh icon designs for Macinstruct, the team contemplated a range of metaphors to represent the difficulty of their online tutorials:
Perhaps the most difficult icons to decide upon were our tutorial gauges. We needed a way to rank the difficulty of our tutorials, and we wanted a really creative, effective way to show this. After a couple days of brainstorming, we came up with the following ideas:
- Thermometers: Easy tutorials are cold, medium tutorials are medium, and hard tutorials are hot.
- Traffic Lights: Green for easy, orange for medium, and red for hard.
- Karate Belts: White, orange and black belts, ala karate skill levels.
- Puzzles: A puzzle with 1 piece off to the side. Smaller pieces equate to harder.
- Aviation themes: Goggles for easy, old leather helmet and goggles for medium, and fighter pilot’s helmet and air mask for hard.
- Engineering Images: A manual and a circuit board, a circuit board and some tools, and oscilloscope.
In the end, we nixed all of these ideas for one volunteered by our own Ric Getter. Everyone agreed that using pocket protectors to indicate difficulty was a great idea!
|
 |
File Type: Illustrator EPS and AI
No. in set: 17
License: See Download File
This new Vector Freebie Pack is created by Pien Duijverman (AKA DaPino)
Firstly lets create our navigation in photoshop, create a new document 600×200 pixels with a black background. Create a rectangle 600×40 pixels with rectangular marquee tool, you can create specific sizes by changing the style to “fixed size”.
Fill your navigation with the color black then add these layer styles.
You should have something like this.
Select the rectangular marquee tool again and create a selection like this.
Fill with the color white, then click on your naviagtion layer whilst holding down the ctrl key on the key board to make a selection.
Once you have made the new selection goto, “select > inverse” then hit the delete key. You should be left with this.
Lower the opacity to about 5% then add your naviagtion text.
Now select the rounded rectangle tool and create a small rectangle next to your navigtation text. The icons should be no bigger than 32×32 pixels. Althou you can make them bigger if you want you just need to adjust the CSS code when we come to code it. Add these layer styles to each of your round rectangles.
Your navigation should now look like this.
nside the round rectangles we want to add our icons, im going to use some preset shapes in the custom shapes libary that came free with photoshop. Once you have chosen your icons and added them inside the rectangles add this outer glow.
Your navigation should looks something like this.
Looks abit cramped up, but it doesnt matter as we can set the spacing of each item in css. For this bit we need to zoom in abit, select the pen tool with the color #008aff, draw a line underneath your 1st item.
Now add this layer style to your line.
That’s it for your naviagtion, you end result should be something like this.
Now that we’ve finished we need to slice our navigation up, so go ahead and create a new folder on your desktop called navigation, then inside that folder create another 2 folders called “icon_images” and “navigation”. Inside the “icon_images” folder we need to save each icon as seperate images dont forget they need to be 32×32 pixels and on a transparent background, save each of them as .PNG files. Heres mine.
We also need 2 chunks of our navigation one being the main background and the other one being the mouseover. Head back over to your naviagtion which should still be in photoshop, hide all your layers apart from your main navigation and the mouse over.
Make each seperate image 300 pixels wide, you may need to stretch your mouse over line over more so it fits like the image below. Save these 2 files as “nav_background” and “nav_hover”.
Next you need to create an empty text file and save it as styles.css in your root naviagtion folder. After you’ve done that its time to open dreamweaver. Create a new html document and straight away save it as index.html or whatever you want to call it save the file in your root folder with your styles.css file. Edit your title text and link your style sheet.
After this bit of code we need to map out our navigation using the standard UL and LI tags which looks like this.
You will notice that next to each link there is a “EM CLASS” this will refer to our icons in the style sheet. You will also notice like the 1st navigation tutorial we have set “LI CLASS CURRENT” which basically means the link on the navigation will stay in mouseover state for that certain page.
So you HTML code should look like this.
Thats all the HTML code we need, so now head over to your styles.css file. At the top of your css file add a comment code, which looks like this /* NAVIGATION ELEMENTS */ after that we start to add our navigation css rules.
.navigation {
padding:0 0 0 20px;
margin:0;
list-style:none;
height:40px;
background:#1841c8 url(navigation/nav_background.gif);
}
padding:0 0 0 20px = A shorthand property for setting all of the padding properties in one declaration.
margin:0 = A shorthand property for setting the margin properties in one declaration.
list-style:none = removes the bullets from the list.
height:40px = height of our navigation bar.
background:#000000 url(navigation/nav_background.gif) = sets our naviagtion background color to black, and also sets the background of our navigation which refers to our image we created in photoshop.
Our next bit of css code is.
.navigation li {
float:left;
}
.navigation li a {
display:block;
float:left;
height:40px;
line-height:40px;
color:#FFFFFF;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 0 0 10px;
font-size:11px;
}
.navigation li a b {
float:left;
display:block;
padding:0 16px 0 8px;
}
float:left = The float property sets where an image or a text will appear in another element. In our case left.
display:block = The element will be displayed as a block-level element, with a line break before and after the element.
line-height:40px = The line-height property sets the distance between lines.
color:#FFFFFF = Color #ffffff is white.
text-decoration:none = Defines normal text.
The next bit of css defines our “current” class and “mouseover” image.
.navigation li.current a {
color:#FFFFFF;
background:url(navigation/nav_hover.gif);
}
.navigation li a:hover {
color:#00CCFF;
background: url(navigation/nav_hover.gif);
}
.navigation li a em {
display:block;
float:left;
width:30px;
height:40px;
}
Take note of the background: URL as the links relate to our mouse over image we created in photoshop. Also double check your image paths which is something i should of mentioned ealier, if you images dont show when we text in the browser then more than likely it will be the image path.
The last bit off css code is for our icons. Again dont for get to comment code /* ICON ELEMENTS */.
/* ICON ELEMENTS */
.navigation li a em.home {
background-image: url(nav_icons/home.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.templates {
background-image: url(nav_icons/templates.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.psd {
background-image: url(nav_icons/psd.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.tutorials {
background-image: url(nav_icons/tutorials.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.shop {
background-image: url(nav_icons/shop.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.contact {
background-image: url(nav_icons/contact.png);
background-repeat: no-repeat;
background-position: center center;
}
Were only setting 3 simple rules for each of our icons as most of the important stuff is inherited from the other CSS RULES. The most important again is our individual images or icons that we made previously. If you look at our HTML code in our links you will see each icon has its own individual class that relates to there own snippet of code in the css file.
To see the navigation bar live, click HERE
Enjoy… 
|
|
|
