search

zhugenkz / google-maps-icons

Automatically exported from code.google.com/p/google-maps-icons
0 stars 0 forks source link

A laymen's terms Guide/Tutorial on how you create these icons? #58

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
Willem Nabuurs wrote:

Not that I am very creative or very good with graphics, but can somebody
explain in laymen's terms how you can create these icons. Because if I can
get some good tutorial I might be interested in creating a couple of easy
ones myself :-)

Original issue reported on code.google.com by myBCN...@gmail.com on 17 Aug 2009 at 6:16

GoogleCodeExporter commented 9 years ago 
To All who are interested,

This is obviously a bigger project but just to point anyone who might not want 
to
wait in the right direction I want to provide some very basic tips.

The Programs
Nico uses Photoshop (world standard for this and not free) and I use a free
alternative called Paint.NET found here: www.getPaint.NET

The Templates
Templates with the official Set Colors, the frame and the transparent 
background can
be found attached below.

About Transparency
You also need to understand how to work with semi-transparent pixels, like in 
the
pixels surrounding the icon frame. This to be able to create the icons looking 
a bit
softer and with more detail then if you paint them with 100% color. An example 
Layer
with lots of semi-transparent pixels is provided with the Canoe icon.

About Layers
You need to understand the principles of working with Layers, like the Layers 
you
find in the templates below. Key to the icons designed by me is the Layer 
Blending
Mode found under Layer Properties in Paint.NET.  Icon sybols are never drawn on 
a
background color, always in their own layer as in the attached Templates. This 
for
many reasons but most importantly to be able to easily be able change the 
background
color.

Some Basic Rules
The size of the inner icon symbol should never be bigger then 20x20 pixels. Use
common sense with size, a midget needs to be smaller than a gigant even if they 
look
similar in basic shape. White pixels on the Set standard background is the 
color for
all symbols (except for the F&F&R Set where it obviously is Black instead). This
means that the Layer with the symbol can only contain White (and Black) pixels, 
with
0-99% transparency as seen in the example Layer in the attached Templates. Using
Transparency below 25% almost never makes sense.

OK, that's all to start with. There are tons of Guides online to help you get 
started
with Photoshop and quite a few for Paint.NET as well. Just Google Photoshop 
Guide or
Tutorial or Getting Started and you will see what I mean. Most of the Photoshop
guides you will find makes sense for paiint.NET as well.

Good Luck!

//Matthias (www.myBCN.es)

Original comment by myBCN...@gmail.com on 17 Aug 2009 at 7:35

Attachments:

GoogleCodeExporter commented 9 years ago 
Hey Matthias and Willem !

I am back to work, here is a "Contribute" page for everyone that wants to help 
on the
project : http://code.google.com/p/google-maps-icons/wiki/Contribute

Matthias, you are free to edit the page, it's a first try :)

--
Nico

Original comment by nico.mol...@gmail.com on 26 Aug 2009 at 2:26