Linux Archive

Linux Archive (http://www.linux-archive.org/)
-   Fedora Design Team (http://www.linux-archive.org/fedora-design-team/)
-   -   Proposed Icon for Ticket #99 (http://www.linux-archive.org/fedora-design-team/434734-proposed-icon-ticket-99-a.html)

Bryan Nielsen 10-02-2010 07:16 PM

Proposed Icon for Ticket #99
 
Hello again,

I was looking for a simple ticket item that I could tackle and ticket
#99 does not have an owner and looked like something I could handle.

https://fedorahosted.org/design-team/ticket/99


So here is my proposed replacement for the old system-config-boot.png icon...

http://xorengineering.com/dev/system-config-boot.svg

Bryan
_______________________________________________
design-team mailing list
design-team@lists.fedoraproject.org
https://admin.fedoraproject.org/mailman/listinfo/design-team

Nicu Buculei 10-04-2010 06:44 AM

Proposed Icon for Ticket #99
 
On 10/02/2010 10:16 PM, Bryan Nielsen wrote:
> Hello again,

Hi Bryan and welcome to our team,

> I was looking for a simple ticket item that I could tackle and ticket
> #99 does not have an owner and looked like something I could handle.
>
> https://fedorahosted.org/design-team/ticket/99

It is awesome you stepped directly into the tickets queue.

> So here is my proposed replacement for the old system-config-boot.png icon...
>
> http://xorengineering.com/dev/system-config-boot.svg

Have you tried rendering the PNG at 22x22 / 24x24, the actual size that
will be used in the menu?


--
nicu :: http://nicubunu.ro :: http://nicubunu.blogspot.com/
_______________________________________________
design-team mailing list
design-team@lists.fedoraproject.org
https://admin.fedoraproject.org/mailman/listinfo/design-team

Bryan Nielsen 10-04-2010 02:52 PM

Proposed Icon for Ticket #99
 
Nicu,

I had not rendered the icon in the various sizes yet. I need a bit of
guidance on the various steps I should be taking to make sure icons
have the appropriate appearance and are rendered properly for
packaging.

Here are some renderings of the new icon...
http://xorengineering.com/dev/system-config-boot-22.png
http://xorengineering.com/dev/system-config-boot-24.png
http://xorengineering.com/dev/system-config-boot-48.png

I used some source SVG files from the gnome themes for the computer
screen behind the arrows and I chose the largest screen in the source
file to work with. There were several smaller screens in the same
source file and I'm wondering if I should have used one of the smaller
screens to get a better rendering for a small icon.

Bryan


On Mon, Oct 4, 2010 at 12:44 AM, Nicu Buculei <nicu_fedora@nicubunu.ro> wrote:
> On 10/02/2010 10:16 PM, Bryan Nielsen wrote:
>> Hello again,
>
> Hi Bryan and welcome to our team,
>
>> I was looking for a simple ticket item that I could tackle and ticket
>> #99 does not have an owner and looked like something I could handle.
>>
>> https://fedorahosted.org/design-team/ticket/99
>
> It is awesome you stepped directly into the tickets queue.
>
>> So here is my proposed replacement for the old system-config-boot.png icon...
>>
>> http://xorengineering.com/dev/system-config-boot.svg
>
> Have you tried rendering the PNG at 22x22 / 24x24, the actual size that
> will be used in the menu?
>
>
> --
> nicu :: http://nicubunu.ro :: http://nicubunu.blogspot.com/
> _______________________________________________
> design-team mailing list
> design-team@lists.fedoraproject.org
> https://admin.fedoraproject.org/mailman/listinfo/design-team
>
_______________________________________________
design-team mailing list
design-team@lists.fedoraproject.org
https://admin.fedoraproject.org/mailman/listinfo/design-team

Nicu Buculei 10-04-2010 03:20 PM

Proposed Icon for Ticket #99
 
On 10/04/2010 05:52 PM, Bryan Nielsen wrote:
> I had not rendered the icon in the various sizes yet. I need a bit of
> guidance on the various steps I should be taking to make sure icons
> have the appropriate appearance and are rendered properly for
> packaging.

Martin or Jimmac are probably the best persons to teach about this.

> Here are some renderings of the new icon...
> http://xorengineering.com/dev/system-config-boot-22.png
> http://xorengineering.com/dev/system-config-boot-24.png
> http://xorengineering.com/dev/system-config-boot-48.png
>
> I used some source SVG files from the gnome themes for the computer
> screen behind the arrows and I chose the largest screen in the source
> file to work with. There were several smaller screens in the same
> source file and I'm wondering if I should have used one of the smaller
> screens to get a better rendering for a small icon.

The biggest problem is blurry icons, at such small sizes if the drawing
is not aligned to pixels, then the result is blurry, have a look at
https://fedorahosted.org/echo-icon-theme/wiki/Guidelines/CommonMistakes
(is a different icon set but the principles are the same)

--
nicu :: http://nicubunu.ro :: http://nicubunu.blogspot.com/
_______________________________________________
design-team mailing list
design-team@lists.fedoraproject.org
https://admin.fedoraproject.org/mailman/listinfo/design-team

Jakub Steiner 10-04-2010 04:48 PM

Proposed Icon for Ticket #99
 
----- Original Message -----
>From: "Bryan Nielsen" <bnielsen1965@gmail.com>
>To: "Fedora Design Team" <design-team@lists.fedoraproject.org>
>Sent: Monday, October 4, 2010 4:52:11 PM GMT +01:00 Amsterdam / Berlin / Bern / Rome / Stockholm / Vienna
>Subject: Re: [Design-team] Proposed Icon for Ticket #99


>Here are some renderings of the new icon...
>http://xorengineering.com/dev/system-config-boot-22.png
>http://xorengineering.com/dev/system-config-boot-24.png
>http://xorengineering.com/dev/system-config-boot-48.png


Hi Bryan,
as Nicu already mentioned, scaling the high resolution icon down isn't going to work. As you see on all the gnome-icon-theme plates, we create pixel perfect variants for the small sizes. Even if it's SVG for editability, the artwork needs to properly align to the pixel grid to render sharply.

Here's a few links about scalable icons and pixel perfection --

http://jimmac.musichall.cz/log/?p=177
http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design/
http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines

I don't think the metaphor is a strong one. I gave it a little thought and think a flip switch + menu panel would work best for this -- http://www.flickr.com/photos/jakubsteiner/5051667578/. It is a little abstract and lacks a unique silhouette, but communicates this being a boot menu editor better than the overused computer + refresh arrows.

>I used some source SVG files from the gnome themes for the computer
>screen behind the arrows and I chose the largest screen in the source
>file to work with. There were several smaller screens in the same
>source file and I'm wondering if I should have used one of the smaller
>screens to get a better rendering for a small icon.

Indeed, the workflow goes like this - create the highres, scale it down for 48x48, remove all the detail that won't render. Get rid of all the mask tricks, put 1px strokes in place. Make sure everything snaps to the pixel grid (snap to bounding box in inkscape). Once 48x48 is down, repeat for smaller sizes. Once done, edit the icon name and context in the baseplate layer, hide the baseplate layer and render the icon with `./render-icon-theme.py icon-name`

Feel free to drop by at #tango on irc.freenode.org or #gnome-art on gimpnet where there are a few capable icon artists that can help with specific issues you might encounter.

cheers

--
Jakub Steiner
http://jimmac.musichall.cz
_______________________________________________
design-team mailing list
design-team@lists.fedoraproject.org
https://admin.fedoraproject.org/mailman/listinfo/design-team

Bryan Nielsen 10-04-2010 06:53 PM

Proposed Icon for Ticket #99
 
Lots of good information, making good looking icons that are small is
quite the chore. :) I'm not sure how good I will be at touching up the
small raster images after rendering but I'll give it a shot.

This is a bit out of the suggested work flow but I started with a
small icon from the system-shutdown SVG source and created a new
system config boot icon based on the suggested metaphor...
http://xorengineering.com/dev/working-24.png

If this seems like the right direction for the metaphor I'll continue.
I'm wondering if my choice of colors for the menu is not such a good
idea, the dialog that comes up for system-config-boot is very basic so
perhaps the menu next to the switch should be more basic in coloring
as well.

I am having trouble locating the render-icon-theme.py script, I don't
see a Fedora package anywhere with the script and a google search
returns some references to the script but not a complete script.



On Mon, Oct 4, 2010 at 10:48 AM, Jakub Steiner <jsteiner@redhat.com> wrote:
>
> ----- Original Message -----
>>From: "Bryan Nielsen" <bnielsen1965@gmail.com>
>>To: "Fedora Design Team" <design-team@lists.fedoraproject.org>
>>Sent: Monday, October 4, 2010 4:52:11 PM GMT +01:00 Amsterdam / Berlin / Bern / Rome / Stockholm / Vienna
>>Subject: Re: [Design-team] Proposed Icon for Ticket #99
>
>
>>Here are some renderings of the new icon...
>>http://xorengineering.com/dev/system-config-boot-22.png
>>http://xorengineering.com/dev/system-config-boot-24.png
>>http://xorengineering.com/dev/system-config-boot-48.png
>
>
> Hi Bryan,
> as Nicu already mentioned, scaling the high resolution icon down isn't going to work. As you see on all the gnome-icon-theme plates, we create pixel perfect variants for the small sizes. Even if it's SVG for editability, the artwork needs to properly align to the pixel grid to render sharply.
>
> Here's a few links about scalable icons and pixel perfection --
>
> http://jimmac.musichall.cz/log/?p=177
> http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design/
> http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines
>
> I don't think the metaphor is a strong one. I gave it a little thought and think a flip switch + menu panel would work best for this -- http://www.flickr.com/photos/jakubsteiner/5051667578/. It is a little abstract and lacks a unique silhouette, but communicates this being a boot menu editor better than the overused computer + refresh arrows.
>
>>I used some source SVG files from the gnome themes for the computer
>>screen behind the arrows and I chose the largest screen in the source
>>file to work with. There were several smaller screens in the same
>>source file and I'm wondering if I should have used one of the smaller
>>screens to get a better rendering for a small icon.
>
> Indeed, the workflow goes like this - create the highres, scale it down for 48x48, remove all the detail that won't render. Get rid of all the mask tricks, put 1px strokes in place. Make sure everything snaps to the pixel grid (snap to bounding box in inkscape). Once 48x48 is down, repeat for smaller sizes. Once done, edit the icon name and context in the baseplate layer, hide the baseplate layer and render the icon with `./render-icon-theme.py icon-name`
>
> Feel free to drop by at #tango on irc.freenode.org or #gnome-art on gimpnet where there are a few capable icon artists that can help with specific issues you might encounter.
>
> cheers
>
> --
> Jakub Steiner
> http://jimmac.musichall.cz
> _______________________________________________
> design-team mailing list
> design-team@lists.fedoraproject.org
> https://admin.fedoraproject.org/mailman/listinfo/design-team
>
_______________________________________________
design-team mailing list
design-team@lists.fedoraproject.org
https://admin.fedoraproject.org/mailman/listinfo/design-team

Jakub Steiner 10-04-2010 09:44 PM

Proposed Icon for Ticket #99
 
----- "Bryan Nielsen" <bnielsen1965@gmail.com> wrote:

> Lots of good information, making good looking icons that are small is
> quite the chore. :) I'm not sure how good I will be at touching up
> the
> small raster images after rendering but I'll give it a shot.
>
> This is a bit out of the suggested work flow but I started with a
> small icon from the system-shutdown SVG source and created a new
> system config boot icon based on the suggested metaphor...
> http://xorengineering.com/dev/working-24.png
>
> If this seems like the right direction for the metaphor I'll
> continue.
> I'm wondering if my choice of colors for the menu is not such a good
> idea, the dialog that comes up for system-config-boot is very basic
> so
> perhaps the menu next to the switch should be more basic in coloring
> as well.
>
> I am having trouble locating the render-icon-theme.py script, I don't
> see a Fedora package anywhere with the script and a google search
> returns some references to the script but not a complete script.

Hi Bryan,
first of all, the 24px icon is totally fab and you are indeed on the right track. Minor nitpicks -- maybe a fewer menu items would be better, and while its purpose is not important, the active item arrow/triangle is completely unclear in shape (fuzzy) - you want to make sure the surface covers at least 4 pixels (3+1). And if you look around the existing icons, we're not afraid to go as far as creating square "pixels" in the vectors to make them sharp :)

You can find the script in gnome-icon-theme. Either download a tarball from http://ftp.acc.umu.se/pub/GNOME/sources/gnome-icon-theme/2.31/ or clone the git repository*

Good job! Looking forward to see more.

* http://git.gnome.org/browse/gnome-icon-theme
--
Jakub Steiner
http://jimmac.musichall.cz
_______________________________________________
design-team mailing list
design-team@lists.fedoraproject.org
https://admin.fedoraproject.org/mailman/listinfo/design-team

Bryan Nielsen 10-04-2010 11:20 PM

Proposed Icon for Ticket #99
 
The nit picking is appreciated. :)

I reduced the number of entries on the menu and I'm not sure if this
is better or not but I increased the height of each item so I could
get another pixel on the triangle selector so it would be more
defined.

I also created a version with menu colors that are probably more
standard for the dialog.

http://xorengineering.com/dev/working-24.png
http://xorengineering.com/dev/working-24-2.png

I think I like the shorter menu items better but I'm not sure what to
do with the selector triangle. Maybe it would look okay with the short
menu items but with one more pixel of spacing and keep the taller
selector triangle.



On Mon, Oct 4, 2010 at 3:44 PM, Jakub Steiner <jsteiner@redhat.com> wrote:
>
> ----- "Bryan Nielsen" <bnielsen1965@gmail.com> wrote:
>
>> Lots of good information, making good looking icons that are small is
>> quite the chore. :) I'm not sure how good I will be at touching up
>> the
>> small raster images after rendering but I'll give it a shot.
>>
>> This is a bit out of the suggested work flow but I started with a
>> small icon from the system-shutdown SVG source and created a new
>> system config boot icon based on the suggested metaphor...
>> http://xorengineering.com/dev/working-24.png
>>
>> If this seems like the right direction for the metaphor I'll
>> continue.
>> I'm wondering if my choice of colors for the menu is not such a good
>> idea, the dialog that comes up for system-config-boot is very basic
>> so
>> perhaps the menu next to the switch should be more basic in coloring
>> as well.
>>
>> I am having trouble locating the render-icon-theme.py script, I don't
>> see a Fedora package anywhere with the script and a google search
>> returns some references to the script but not a complete script.
>
> Hi Bryan,
> first of all, the 24px icon is totally fab and you are indeed on the right track. Minor nitpicks -- maybe a fewer menu items would be better, and while its purpose is not important, the active item arrow/triangle is completely unclear in shape (fuzzy) - you want to make sure the surface covers at least 4 pixels (3+1). And if you look around the existing icons, we're not afraid to go as far as creating square "pixels" in the vectors to make them sharp :)
>
> You can find the script in gnome-icon-theme. Either download a tarball from http://ftp.acc.umu.se/pub/GNOME/sources/gnome-icon-theme/2.31/ or clone the git repository*
>
> Good job! Looking forward to see more.
>
> * http://git.gnome.org/browse/gnome-icon-theme
> --
> Jakub Steiner
> http://jimmac.musichall.cz
> _______________________________________________
> design-team mailing list
> design-team@lists.fedoraproject.org
> https://admin.fedoraproject.org/mailman/listinfo/design-team
>
_______________________________________________
design-team mailing list
design-team@lists.fedoraproject.org
https://admin.fedoraproject.org/mailman/listinfo/design-team

Bryan Nielsen 10-05-2010 01:16 AM

Proposed Icon for Ticket #99
 
I created a couple versions of the 24px icon with color variations and
menu element size variations. I also created a 48px icon.

And I created a page that makes it easier to view the variations...
http://xorengineering.com/dev/icons/



On Mon, Oct 4, 2010 at 5:20 PM, Bryan Nielsen <bnielsen1965@gmail.com> wrote:
> The nit picking is appreciated. :)
>
> I reduced the number of entries on the menu and I'm not sure if this
> is better or not but I increased the height of each item so I could
> get another pixel on the triangle selector so it would be more
> defined.
>
> I also created a version with menu colors that are probably more
> standard for the dialog.
>
> http://xorengineering.com/dev/working-24.png
> http://xorengineering.com/dev/working-24-2.png
>
> I think I like the shorter menu items better but I'm not sure what to
> do with the selector triangle. Maybe it would look okay with the short
> menu items but with one more pixel of spacing and keep the taller
> selector triangle.
>
>
>
> On Mon, Oct 4, 2010 at 3:44 PM, Jakub Steiner <jsteiner@redhat.com> wrote:
>>
>> ----- "Bryan Nielsen" <bnielsen1965@gmail.com> wrote:
>>
>>> Lots of good information, making good looking icons that are small is
>>> quite the chore. :) I'm not sure how good I will be at touching up
>>> the
>>> small raster images after rendering but I'll give it a shot.
>>>
>>> This is a bit out of the suggested work flow but I started with a
>>> small icon from the system-shutdown SVG source and created a new
>>> system config boot icon based on the suggested metaphor...
>>> http://xorengineering.com/dev/working-24.png
>>>
>>> If this seems like the right direction for the metaphor I'll
>>> continue.
>>> I'm wondering if my choice of colors for the menu is not such a good
>>> idea, the dialog that comes up for system-config-boot is very basic
>>> so
>>> perhaps the menu next to the switch should be more basic in coloring
>>> as well.
>>>
>>> I am having trouble locating the render-icon-theme.py script, I don't
>>> see a Fedora package anywhere with the script and a google search
>>> returns some references to the script but not a complete script.
>>
>> Hi Bryan,
>> first of all, the 24px icon is totally fab and you are indeed on the right track. Minor nitpicks -- maybe a fewer menu items would be better, and while its purpose is not important, the active item arrow/triangle is completely unclear in shape (fuzzy) - you want to make sure the surface covers at least 4 pixels (3+1). And if you look around the existing icons, we're not afraid to go as far as creating square "pixels" in the vectors to make them sharp :)
>>
>> You can find the script in gnome-icon-theme. Either download a tarball from http://ftp.acc.umu.se/pub/GNOME/sources/gnome-icon-theme/2.31/ or clone the git repository*
>>
>> Good job! Looking forward to see more.
>>
>> * http://git.gnome.org/browse/gnome-icon-theme
>> --
>> Jakub Steiner
>> http://jimmac.musichall.cz
>> _______________________________________________
>> design-team mailing list
>> design-team@lists.fedoraproject.org
>> https://admin.fedoraproject.org/mailman/listinfo/design-team
>>
>
_______________________________________________
design-team mailing list
design-team@lists.fedoraproject.org
https://admin.fedoraproject.org/mailman/listinfo/design-team

Jakub Steiner 10-05-2010 08:05 PM

Proposed Icon for Ticket #99
 
----- "Bryan Nielsen" <bnielsen1965@gmail.com> wrote:

> I created a couple versions of the 24px icon with color variations
> and
> menu element size variations. I also created a 48px icon.
>
> And I created a page that makes it easier to view the variations...
> http://xorengineering.com/dev/icons/

This is shaping up nicely, Bryan. I would definitely go with the darked backdrop, blue is fine. You might want to use subtle gradients instead of flat color too. The text entries can't be solid white blocks if they are this big though. Making them semi opaque works, you might want to try experimenting with actual microscopic text (+convert to shapes ctrl-shift-c, simplify crtl-l multiple times). Also check out the glossy reflection on computer or video-display.

keep up the good work!

--
Jakub Steiner
http://jimmac.musichall.cz
_______________________________________________
design-team mailing list
design-team@lists.fedoraproject.org
https://admin.fedoraproject.org/mailman/listinfo/design-team


All times are GMT. The time now is 04:37 PM.

VBulletin, Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO ©2007, Crawlability, Inc.