Opened 12 years ago

Closed 8 years ago

Last modified 7 years ago

#624 closed defect (fixed)

Several icons does not look nice in the ring

Reported by: erikos Owned by: eben
Priority: Unspecified by Maintainer Milestone:
Component: design Version: Unspecified
Severity: Critical Keywords:
Cc: wadeb Distribution/OS: Unspecified
Bug Status: New

Description

Eben - can you have a look at them? What are the guidelines they need to follow?

Maze:
http://git.sugarlabs.org/projects/maze/repos/mainline/blobs/master/Maze.activity/activity/activity-maze.svg

screenshot: http://dev.laptop.org/~erikos/maze.png

At least to me this looks wrong.

Attachments (9)

Maze icon tweak.png (72.0 KB) - added by garycmartin 12 years ago.
Before and after shot
activity-maze.svg (914 bytes) - added by garycmartin 12 years ago.
Here's the tweaked svg
activity-flipsticks.svg (3.2 KB) - added by garycmartin 12 years ago.
Flipsticks svg icon downsized and centred
activity-jigsawpuzzle.svg (1.6 KB) - added by garycmartin 12 years ago.
Jigsaw Puzzle svg icon scaled down a little
activity-sliderpuzzle.svg (2.9 KB) - added by garycmartin 12 years ago.
Slider Puzzle svg icon scaled down
activity-cartoonbuilder.svg (2.9 KB) - added by garycmartin 12 years ago.
Cartoon Builder svg icon scaled down a little
activity-speak.svg (800 bytes) - added by garycmartin 12 years ago.
Speak activity svg icon, centred
slicelogo.svg (1.6 KB) - added by garycmartin 12 years ago.
InfoSlicer activity svg icon re-scaled and centred
activity-write.svg (1.6 KB) - added by garycmartin 12 years ago.
Write activity svg icon re-centred

Download all attachments as: .zip

Change History (25)

comment:1 Changed 12 years ago by erikos

  • Severity changed from Unspecified to Critical

comment:3 Changed 12 years ago by eben

Here is a better reference for icon creation, with some creation and verification scripts as well: http://wiki.laptop.org/go/Making_Sugar_Icons

I'll look into moving this page to the SugarLabs wiki...

comment:4 Changed 12 years ago by garycmartin

Happy to rework the offending icon, if no one else has started yet, just reassign to me.

erikos: other than Maze (just too big, right?); which others were vinegar in your eye, the mamamedia ones?

comment:5 Changed 12 years ago by garycmartin

  • Cc wadeb added

Well, here's a very quick tweak to the Maze icon. This simple scale trick can be used on any oversized or non-centred icons now that the rounded rect highlight effect makes any deviations from the spec standout. Basically just wrap the svg drawing with the below, or something similar (I might be + .5 of a translate unit over the top if you want to tweak):

<g transform="translate(4,4)">
    <g transform="scale(0.84)">
        ...
        ...
    </g>
</g>

Changed 12 years ago by garycmartin

Before and after shot

Changed 12 years ago by garycmartin

Here's the tweaked svg

comment:6 Changed 12 years ago by garycmartin

might be + .5 of a translate unit over the top

Actually, looking at a misc selection of icons, I think it might be the rounded rect that's 1 width unit too narrow and 1 height unit too short (with the left edge and top edge staying where they are). Either that or there's a fair few naughty slightly off centre icons.

erikos: until you mentioned it, I hadn't really noticed, now I can't stop seeing it :-)

comment:7 Changed 12 years ago by erikos

Gary, thanks for the icon, does work nicely here. As you pointed out - there is more then one issue it looks like. The icons need to follow the guidelines. Does not look nice if some are bigger than others. Some icons seem to fully use the 55px - some seem to leave some space. Have not looked at the details - but I think you know what I mean ;p

As well it looks like the drawing algorithm has some issues as well - see #636.

The other icons are the flipstick puzzles, comic builder and maybe a few more. I guess the ones that we include in soas-2 should be ideally the same size.

Sorry to have you made aware of this aesthetic drama :)

comment:8 Changed 12 years ago by erikos

  • Bug Status changed from Unconfirmed to New

make it new as Gary confirmed it.

comment:9 Changed 12 years ago by garycmartin

OK will re-scale Flipsticks, Jigsaw Puzzle, Slider Puzzle, Comic Builder and will look out for others (Speak, Infoslicer, Joke Machine, Write, Chat are all badly centred or over scale). What's much more worrying to me is that this new hover design is so much less visually tolerant – seems like many Activity authors already have too much difficulty making their svg icons – trying to frame every activity icon with a border, in this aspect, is making other aspects of the UI look worse not better (i.e no one reported issues with these icons until now, as most were 'good enough' to get by).

The only though I have on this just now is that slightly increasing the size of the rounded rect will make it more visually tolerant to padding/centring issues – the down side being that it eats some space in the home layout. Is this a reasonable suggestion?

Changed 12 years ago by garycmartin

Flipsticks svg icon downsized and centred

Changed 12 years ago by garycmartin

Jigsaw Puzzle svg icon scaled down a little

Changed 12 years ago by garycmartin

Slider Puzzle svg icon scaled down

Changed 12 years ago by garycmartin

Cartoon Builder svg icon scaled down a little

Changed 12 years ago by garycmartin

Speak activity svg icon, centred

Changed 12 years ago by garycmartin

InfoSlicer activity svg icon re-scaled and centred

comment:10 Changed 12 years ago by wadeb

SVGs are inherently scalable. Can't we just have Sugar detect the dimensions of the icon and automatically scale it to the appropriate size?

Changed 12 years ago by garycmartin

Write activity svg icon re-centred

comment:11 follow-up: Changed 12 years ago by garycmartin

FWIW, I've attached corrected (re-scaled and/or re-centred) Flipsticks, Jigsaw Puzzle, Slider Puzzle, Cartoon Builder, Speak, InfoSlicer and Write.

comment:12 in reply to: ↑ 11 Changed 12 years ago by alsroot

Replying to garycmartin:

FWIW, I've attached corrected (re-scaled and/or re-centred) Flipsticks, Jigsaw Puzzle, Slider Puzzle, Cartoon Builder, Speak, InfoSlicer and Write.

thanks, i'll update Flipsticks, Jigsaw, Slider, Cartoon, Speak and InfoSlicer

comment:13 Changed 12 years ago by erikos

  • Milestone changed from 0.84 to 0.86

comment:14 Changed 9 years ago by walter

Can this ticket be closed?

comment:15 Changed 8 years ago by walter

  • Resolution set to fixed
  • Status changed from new to closed

I think these are all resolved. Please reopen if there are more icons that need corrections.

comment:16 Changed 7 years ago by dnarvaez

  • Milestone 0.86 deleted

Milestone 0.86 deleted

Note: See TracTickets for help on using tickets.