Ok, icon drawing time! Here's my suggestions for some specs and guidelines to get started with. All feedback welcome.
In the attachment:
- an icon template file for Inkscape
- basic directory structure for organising and categorisation of the icon sources and png renders.
The directories are mostly empty, but have a look in the applications and the mimetypes folder, there are SVG files for:
- forum icons
- calendar icons
- mimetype icons (with PSD sources for 16 and 32px versions which are actually further developed then the SVG!)
Let's use these for a first round of collaboration and see how it works.
Design specs:
Ok, SVG 1.1 it is. Let's see if we can also agree on Inkscape as the preferred editor (instead of Illustrator). There's some compatibility problems between the two with maintaining layers. We can research this some more though, I don't want to exclude Illustrator per se.
Canvas: 512 x 512px
This allows us to build nice icons that could also be used as illustrations in docs and marketing materials. Exports to sizes of 32px and lower will always need manual touch-ups. Might as well do that based on a high-res original that allows for more detail at larger sizes.
Color palette?
- Let's try and get the basic metaphors working in a grayscale setup first. (black/white or gray/white)
Exporting to PNG (not gif)
- Bitmap versions should be exported as 24bit PNGs with 8bit alpha channel
Naming specs:
It would make sense to follow the naming specification as defined by freedesktop.org. It gives a good structure for different kinds of icons and if there ever comes a module that enables KDE icon sets in Drupal we can use that too. http://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-lates...
TODO:
- Map existing naming spec to Drupal specific objects and concepts.
- Make a list of things that are missing in the spec but are needed in Drupal
- ??
Workflow / a project in CVS?
- I have no idea how to do this but if we want to collaborate this and keep sane we'll have to get this into version control. If we can agree on using the naming spec and the 11 contexts, then this directory structure should be the tree that goes into CVS.
TODO: - Agree on basic dir structure and add it to the Drupal CVS? (yes of course.)
| Attachment | Size |
|---|---|
| icon-starterkit.zip_.txt | 830.46 KB |
Comments
Very nice Yoroy
I hope I could find some time to help here, that's a very good start you posted here yoroy.
I don't mean to start a discussions about Illustrator vs Inkscape, imho, illustrator should be standard, as it's the standard for anything else, but I guess it's totally ok if people start working on this with inkscape, as long as we all provide svg / eps // png / gif files.
The Drupal Agency >> www.raincitystudios.com <<
Me on the Web >> www.couzinhub.com <<
Careful now
gif and eps are ruled out. Since they are proprietary formats.
Png is raster, thus a binary, and it's not possible to diff source.png with sources2.png. Yet, you are free to use png for the end product on your site.
But with svg from inkscape we use the W3 standard SVG1.1, that are free and open + pluss it's source code, meaning we can diff changes and track history.
When we are happy with the svg icon, we export it to png for deployment. But the source should always be .svg
I think Inkscape
I think Inkscape compatibility would be useful for those of us who are never likely to contribute a new icon, but might want to hack one for use in a specific context, pretty much because Inkscape is free.
couzinhub - do you think it would turn designers away if we're using inkscape? Also you all might have a better idea about how long term the incompatibility is going to be - since it'd be best to use open/free standards where possible.
..
Yes.
I've been using both tools, and they both support SVG 1.1 - so there is no problem. Choosing what tools you use is totally up to you as the gfx artist. We only want graphics that are contributed under GPL and SVG 1.1. This solves one of drupals outstanding issues as well - graphics (png) vs. licensing. - Hence our png's lack the source code. Now with SVG1.1, they don't. And we don't have to use sepearate licenses.
but do not say like inkscape is a bad tool or anything - I prefer it inkscape over illustrator anytime.
so what do we do now ?
Yep I agree, the only difference is that illustrator doesn't save the layers, but that's not an issue. So we don't really care what people use, as long as we keep concistency in the format...
So now that we have some standard to begin with, my main worry is : what do we do now ? I'm ok to design icons, but for what exactly ? Will these icons we design be used in garland by default ? Or is it administration icons ? Will they be available when changing theme ?
I'm not sure that I really understand where our icons will be used.. And more generally, I am not sure what Drupal needs in term of design. Drupal definitelly needs a lot of usability and user interface design, but in term of pure design.. I'm not sure what drupal needs.
IMHO, we could design a successor to Garland, with improved usability, and a real admin interface. This theme would be replacing garland in the futur versions of Drupal, and with this theme, we can set a new design that would relate to Drupal itself.
And THEN, we can start some nice icons set for ... let's say Garland 2...
One of the feature of this theme could be to have a basic set of icons, maybe even an icon folder, that you could override in your theme, but if not, it would be used by default. A little bit like the icons in the forum, but for drupal itself.
I've seen a lot of discussions about design and drupal recently, and I'm fearing a lack of organisation, that would lead to a design anarchy in drupal.. :'(
Design doesn't work like code, let's find a proper way for people to contribute to Drupal.
I've been working with Katerine Bailey on Quicktab module, and the way her module works is really interesting :
There is a set of basic design you can choose from for your tabs, but you can also create your own, that will appear in the list, like a mini-theme, only for the quicktabs blocks (works the same in the fivestar module I think)
That is inho the right way to create design for drupal : have some base set up, that you could override. It should be the same for icons.
some references :
http://groups.drupal.org/node/9722
http://groups.drupal.org/node/9517
http://drupal.org/project/quicktabs
The Drupal Agency >> www.raincitystudios.com <<
Me on the Web >> www.couzinhub.com <<
Thanks couzinhub. Yeah, I
Thanks couzinhub. Yeah, I really don't want to exclude Illustrator at all. If most people have illustrator we should probably go with that. We'll figure it out along the way, I just hope to get the ball rolling with this!
About metaphors
Great initiative. I was looking for a thread like this because I had issues with the old (current) icons. Have never heard anyone refer to them as letters, or mails or envelopes or anything similar. What I hear is thread or topic or discussion or something similar. Sometimes I find the word post which is actually the closest thing to the mail metaphor, but it is always mentioned in reference to a single comment or reply.
I tried to open the icon-template.svg file from icon-starterkit.zip_.txt but Adobe illustrator CS3 only returns:
Any idea why?
Looking at your contribution I have to say that this is probably the right way to go. Good job!
--
fyrkantigt.se av Niklas Brunberg
I haven't found a way to
I haven't found a way to save SVG's in a way that keeps them compatible with both Inkscape and Illustrator. I've added an .ai template to the wiki page here, so that you can have a look at the proposed grid etc. But please do check out Inkscape, it's got some nice icon-specific features not found in Illustrator and even seems to have some collaboration tools in there. It's not as slick as Illustrator, but also not as bad as you might think!
This is Awesome. I just
This is Awesome. I just wanted to say thanks to you all for making this happen.
Bevan/
Bevan/
Thanks! Check out Ximo's
Thanks! Check out Ximo's GSOC application to make the icon module a reality here: http://groups.drupal.org/node/9836
Subscribe
This is an important node!
Here is a working draft on the icon naming specification:
http://drupal.org/node/270229