[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kde-artists
Subject:    Re: K-ARTIST: icon guide
From:       "luciash d' being" <luci () ground ! cz>
Date:       2004-02-01 0:52:00
Message-ID: 200402010152.00598.luci () sh ! ground ! cz
[Download RAW message or body]

hello,

On Friday 30 January 2004 16:37, Wade Olson wrote:
> Ante,
>
> I think that this is a great start.  I can't critique the content, but am
> glad that this work is gaining momentum.

/me thinks it's great too :)

> Some thoughts:
> 1) Some simple tutorials, tricks of the trade, and faq about vector
> programs will be nice.  Alot of people that have previously specialized in
> Photoshop and GIMP may have hesitation about learning the various vector
> programs.

yes! you can start your own tutorial as a wiki page at http://kde.ground.cz
you can name it e.g. "Icons with <app_name> HOWTO" where <app_name> is your 
favorite graphics program...

btw, I'm preparing a little tutorial about creating SVG icons using intuitive 
tools of OO Draw (part of OpenOffice.org suite)

> We may also want to list the program options, as displayed on:
>
> -http://www.w3c.org/Graphics/SVG/SVG-Implementations.htm8

cool page :)

> and reference other svg tutorials.
>
> 2) To see how others approach icon style guides, if not already done so, we
> should review sites such as:
> -http://developer.kde.org/documentation/standards/kde/icon-style.html

this one seems outdated too

> -http://www.sapdesignguild.org/resources/icon_cookbook/
> -http://developer.apple.com/documentation/UserExperience/Conceptual/APStyle
>Guide/AppleStyleGuide2003.pdf -Any gnome style guides that are recent
>
> Such sites may help us with and topics we've skipped.  General style guides
> (such as Apple's) can still be useful.
>
> Does anyone know of any other useful references?

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/html/winxpicons.asp 
:-P

> 3) We should keep any accessibility issues in mind:
>
> http://accessibility.kde.org/
>
> For example, is the cystal color palette distinctive to forms of color
> blindess?  Is there any palette choice conflict? (you do mention briefly
> below)

of course, but imho it's not possible with crystal svg icons. we need another 
svg iconset (e.g. based on crystal but made with special shapes in black and 
white plus maybe few grades of grey) which will be made for and will 
especially take care about accessibility issues and will become official part 
of KDE too.

now to the ante's original post:

> > The current look of the KDE-icons is a compromise between icons that look
> > very symbolic (like those icons used for the MacOS) and
> > near-photorealistic icons (like those icons used by Windowmaker or Gnome
> > e.g.). The design that results from these guidelines can be described as
> > being "cartoonish".

seems this part is outdated too. I think the current MacOS (X) icons are much 
more photo realistic than Gnome's icons.

> > !!!Pixels and Vectors
> >
> > There are 2 ways to draw icons, make pixel icons or make vector icons.
> > Both ways have their pitfalls. Understanding these pitfalls will make you
> > a better iconmaker.

I would wrote:

There are basically two ways to create icons using graphics applications: the 
first is to create them as fixed size images "pixel by pixel" using a bitmap 
editor (or modell and render your icons in some 3D modeller/renderer) and the 
second way is to draw scalable vector graphic icons in a vector based suite. 
All the ways do have their pros and cons. Understanding these issues will 
make you a better iconmaker.

...

> > !!!Icons are Recognizable
> >
> > They should be recognizable at all levels.

I agree!

> >  - The Symbolic level. A notebook and pencil together are symbolic for a
> > simple text editor, a notebook and a fountain pen for a more advanced
> > text editor. A car, a bucket and a brush symbolize an application to wash
> > a car.

lol. ehm, any better example?

> > It is time to mention the general design principle KISS - Keep It Simple,
> > Stupid. While artists may love to paint beautiful paintings, icons need
> > simple symbols. Think Icon, Not Painting. Be a follower of KISS.

I would rather use just KIS - Keep It Simple ;-) 
to somebody "Stupid" can be offensive word...
or maybe "KISS - Keep It Simple & Stupid" is better interpretation of the KISS 
abbreviation (doesn't sound like "Hey you stupid! Keep it Simple!")

> > !!!Icon Boot Camp
> >
> > Want to learn to draw icons? Enlist in Icon Boot Camp!
> >
> > !!!* First Assignment *
> >
> > Make an icon for an application to wash a car (or any other application).
> >  Here is the specification: it has to be a pixel image, size 32x32
> > pixels, in black and white on a transparent background. Black and white
> > icons are hard to make, you can not use colors to set objects apart.
> > Making a black and white icon may be the most valueable learning
> > expercience you ever get (in the icon field...). For pixel images you can
> > for instance use the GIMP.
> >
> > Ready? Save the image as a png.
> >
> > Next step. Scale the image to 16x16. It will need repair now. Repair it
> > and save it under a new name. Does it look the same as the 32x32 icon?

from my experience in most cases using the GIMP and filters -> enhance -> 
sharpen with sharpness set to e.g. level 4 is enough to repair the blurness 
of an icon.

> > Now add color to the 32 icon. Since colors can be used to set objects
> > apart, objects can overlap more easily, it will seem you have more space.
> > A totally other design is possible. Keep a 1 pixel transparent border
> > around your drawing. Then make the 16x16 icon, also with transparent
> > border, and work on both till you have visual consistency.
> >
> > Take a look at the 16 icon. How many major objects does it have? (fi car,
> > bucket, brush) How many sub-objects does the biggest major object have?
> > (fi car: body, 2 wheels, 2 windows) How many sub-objects does the
> > smallest major object have? How big are these sub-objects, how many
> > pixels do they use? Is the count the same for the 32 icon?
> >
> > You now have an idea about how many objects and sub-objects an icon can
> > have.
> >
> > Still got the 1 pixel border? Now add a black outline to both icons. How
> > do you like them best - with or without outline?

I'm not sure about the outline. imho if the icon is well recognizable on 
various backgrounds (white, black, red, green, blue, yellow) then the outline 
is not needed. if there's some problem then two options apply in the crystal 
iconset case: the icon should be slightly rearranged in shapes or the blue to 
deep purple color outline should be added (i don't think the outline has to 
be strictly black or white especially in the crystal case).

> > !!!General tips
> > Design your icons to match the look of those icons in KDE which already
> > do exist. KDE uses the Crystal SVG icon set originated by Everaldo, take
> > a good look at it!
> >
> > Visual appearance: KDE-icons look clear, sharp, clean and crisp. They are
> > easy to recognize -- even those tiny pixmaps which measure 16x16 pixels.
> >
> > [
> > All KDE-icons are surrounded by a black line, except when it affects the
> > "readability" of the image too much. Don't use antialiasing outside this
> > line. Don't use the alpha channel at all for icons. Shadows should be
> > black.
> > ]

this should be changed to "Use antialiasing for outline!", "Do not use indexed 
palette without alpha transparency" and "Shadows shouldn't be black" for 
crystal.

> > 5% to 8% (depending on the study you quote) of the men and 0.5% of the
> > women of the world are born colorblind. Please have a look at this URL
> > for more detailed information on this topic:
> >
> > "Effective Color Contrast  -- Designing for People with Partial Sight and
> > Color Deficiencies" by Aries Arditi, Ph.D

i think because of this there should be made the special B&W accessible 
crystal iconset or low-color palette crystal iconset. 
imho the current crystal icons are not made with taking care about it or 
accessibility compliant at all.

> > [
> > Recommendation for the kde-artist-team:
> > We should support all of these incarnations! Please always start with the
> > locolor-incarnations. Then scale the 32x32-locolor-incarnation up to
> > 44x44 and 'repair' your icon to make it look sharp, clean and colorful
> > again. You may also add some detail (but not too much!). Finally add a
> > blank 2-pixel-border on each side. When the 48x48-incarnation is done
> > scale it down to 32x32 and 'repair' it again or create the
> > 32x32-hicolor-version from the 32x32-locolor-version directly. ]

btw, why the border was needed?

> > Colordepth
> > Black/white-icons
> >
> > These icons will be used by LCD/Monochrome-displays and by visually
> > impaired people. There will be special
> > <http://artist.kde.org/bw.html>guidelines for these kind of icons.

still i think it would be nice to have a special B&W version of crystal (i 
know the icons can be filtered to become grayshade in kcontrol, but sometimes 
it produces unwanted results since crystal is not optimized for this - mostly 
light shades of blue)

> > Locolor-icons
> >
> > The low-color icons are provided for compatibility with very old video
> > hardware which puts limitations on the number of the colors the desktop
> > one can use safely. Of course KDE would dither hicolor-icons on
> > 256-color-displays. But certain combinations of icons/wallpaper don't
> > give acceptable results. Therefore KDE provides a set of locolor-icons
> > for this case. To create the locolor-version ("incarnation") of your icon
> > you have to choose colors of the locolor-palette only.

the same for low-color icons, but imho b&w are more important

> > Storing & submitting icons
> >
> > !!!Vectors and pixels
> > The Crystal SVG icon set is a vector icon set. The icons are drawn in
> > vector drawing programs and saved as .svg or .svgz. Many artists work at
> > the 128x128 size. SVG is a evolving standard, for the moment the svg
> > sources are exported to png icons in the sizes 16x16, 22x22, 32x32,
> > 48x48, 64x64 and 128x128. As seen in the Icon Boot Camp, the smallest
> > icons need repair. Always send in the svg and the 16x16 and 22x22 png
> > icons. The bigger pngs can be rendered with scripts.
> >
> > Since svg is an evolving standard, keep all sources you have. No program
> > has svg implemented fully and correctly. For instance, if you work in
> > Illustrator, also keep your .ai files. May be later svgs can be made out
> > of them with a higher quality. Sending in the .ai files too would be
> > welcomed!

additionally OO.o Draw and Star Draw vector graphics file name extension is 
.sxd which can be used as "source" too

> > [
> > Styleguide
> > Black & White -Icons
> >
> > These icons will be used by LCD/Monochrome-displays and probably by
> > visually impaired people. Guidelines
> >
> > Because of the very special purpose of these icons they also need special
> > guidelines: Black & White-Icons should be very symbolic and they should
> > have shapes which are easy to recognize.
> > Good contrasts: they should consist of areas which are filled black and
> > white (not just black lines). Eventually you can also use black-white
> > -patterns.
> > These icons should be mostly 2-dimensional

i would like to keep this when slightly modified for application on b&w 
crystal iconset

> > Software
> > [http://www.sodipodi.com/|sodipodi] - vector drawing program, open source
> > [http://www.koffice.org/karbon/|karbon] - vector drawing program, open
> > source [http://www.adobe.com/products/illustrator/main.html|illustrator]
> > - vector drawing program [http://www.gimp.org/|The Gimp] -- recommended
> > for pixel images. [http://www.imagemagick.org/|Image Magick] --can be
> > used to convert files, the GIMP has better compression. At the moment
> > imagemagick really has magical output from svg files - do not use it for
> > svg.

[http://www.openoffice.org|OpenOffice.org Draw] - vector drawing, open source 
-- can export to SVG (intuitive interface and tools, usefull for quick start 
of an icon - only basic color shapes without gradients, semi-transparency or 
shadows are rendered correctly)

uff, that's all by me.

greetings, luci
-- 

:.. :.: ::: :
luci(ash [graun]d' being) :.:::.::. ::.:::  :: :: :  :.:.::
simply just an( )other web designer? :::::.::.:.:::.:::  :.: :
l u c i [ a t ] s h . g r o u n d . c z ::.:::..:::.::.::.::  :.  ::
c. p#one ++ 420 777 777 590 :::.::::..::.:::  ::   : :.: ::      
http://www.ground.cz ::.:::...:.: :  .::  ::.: ::  :::
:.. :.: ::: :

_______________________________________________
kde-artists mailing list
kde-artists@mail.kde.org
https://mail.kde.org/mailman/listinfo/kde-artists
[prev in list] [next in list] [prev in thread] [next in thread]