Metacity

Differences between revisions 1 and 27 (spanning 26 versions)
Revision 1 as of 2009-02-21 15:25:10
Size: 861
Editor: c-24-11-192-142
Comment:
Revision 27 as of 2009-03-08 02:25:54
Size: 3547
Editor: c-24-11-192-142
Comment:
Deletions are marked like this. Additions are marked like this.
Line 2: Line 2:
||<tablestyle="float:right; font-size: 0.9em; width:30%; background:#F1F1ED; background-image: url('http://librarian.launchpad.net/2980250/Emblem-16.png'); background-repeat: no-repeat; background-position: 98% 0.5ex; margin: 0 0 1em 1em; padding: 0.5em;">'''Contents'''<<BR>><<TableOfContents>>|| ||<tablestyle="float:right; font-size: 0.9em; width:30%; background:#F1F1ED; background-image: url('http://librarian.launchpad.net/2980250/Emblem-16.png'); background-repeat: no-repeat; background-position: 98% 0.5ex; margin: 0 0 1em 1em; padding: 0.5em;"><<TableOfContents>>||
Line 8: Line 8:
'''*** This page is under Contruction ***''' ||<style="border:0;">{{attachment:../ImpressionLogo.png}}||
||<style="border:0;font-size:11pt;">[[../|Home Page]]||
Line 12: Line 13:
One the key elements of any GTK theme is the frame controls with many examples presented [[http://art.gnome.org/themes/metacity|here]]. A key element of any GTK theme is the Metacity control widgets with many examples presented [[http://art.gnome.org/themes/metacity|here]]. The Ubuntu logo is based on circles and the desire is to leverage the strengths of its design in Metacity. The default control widgets are displayed muted.
Line 14: Line 15:
||<tablestyle="text-align:center" style="background-color:#cdc7be;">Metacity||
||{{attachment:MetacityMockup.png}}||
||Design||
Line 18: Line 16:
=== Comments === ||<tablestyle="text-align:center" style="background-color:#cdc7be;">Metacity Window Controls||
||{{attachment:UbuntuMetacityMockupSolid.png}}||
||Solid Design||

=== Control Detail ===

The dimensions of the Metacity control widgets are 12.5 x 12.5 pixels and the simplicity of this design adds sharpness to the detail. Although the control widgets may be perceived as buttons they are actually dots. The icons fade to provide the illusion of activity when clicked. This is similar but opposite to action of clicked upper panel icons.

||<tablestyle="text-align:center;" style="background-color:#cdc7be;width:250px;">Focused Control||<style="background-color:#cdc7be;width:250px;">Unfocused Control||
||{{attachment:MetacityButtonNormal.png}}||{{attachment:MetacityButtonInsensitive.png}}||
||[[attachment:MetacityButtonNormal.svg|SVG]]||{{attachment:MetacityButtonInsensitive.svg}}||


||<tablestyle="text-align:center;" style="background-color:#cdc7be;width:250px;">Close Prelight Control||<style="background-color:#cdc7be;width:250px;">Close Active Control||
||{{attachment:MetacityButtonClosePrelight.png}}||{{attachment:MetacityButtonCloseActive.png}}||
||[[attachment:MetacityButtonClosePrelight.svg|SVG]]||[[attachment:MetacityButtonCloseActive.svg|SVG]]||

||<tablestyle="text-align:center" style="background-color:#cdc7be;width:250px;">Maximize Prelight Control||<style="background-color:#cdc7be;width:250px;">Maximize Active Control||
||{{attachment:MetacityButtonMaximizePrelight.png}}||{{attachment:MetacityButtonMaximizeActive.png}}||
||[[attachment:MetacityButtonMaximizePrelight.svg|SVG]]||[[attachment:MetacityButtonMaximizeActive.svg|SVG]]||

||<tablestyle="text-align:center" style="background-color:#cdc7be;width:250px;">Minimize Prelight Control||<style="background-color:#cdc7be;width:250px;">Minimize Active Control||
||{{attachment:MetacityButtonMinimizePrelight.png}}||{{attachment:MetacityButtonMinimizeActive.png}}||
||[[attachment:MetacityButtonMinimizePrelight.svg|SVG]]||[[attachment:MetacityButtonMinimizeActive.svg|SVG]]||

Those with a sharp eye for color may notice the color of the dot of the default widget is "#808080" or neutral gray. The color of the prelight state mimic Ubuntu colors of yellow, orange, and red.

Simple, functional, Ubuntu!

=== Attachments ===

<<AttachList()>>
Line 24: Line 53:
== Comments == === Comments ===
 * Seems very nice...perhaps a bit of some very light 3D element to the buttons? -kwwii
 ||<style="border:0;">{{attachment:Artwork/Incoming/Jaunty/Impression/design.png}}||<style="border:0;font-weight:bold;">[[Artwork/Incoming/Jaunty/Impression/Kyudo|Theme Design]]||

Concept

A key element of any GTK theme is the Metacity control widgets with many examples presented here. The Ubuntu logo is based on circles and the desire is to leverage the strengths of its design in Metacity. The default control widgets are displayed muted.

Metacity Window Controls

UbuntuMetacityMockupSolid.png

Solid Design

Control Detail

The dimensions of the Metacity control widgets are 12.5 x 12.5 pixels and the simplicity of this design adds sharpness to the detail. Although the control widgets may be perceived as buttons they are actually dots. The icons fade to provide the illusion of activity when clicked. This is similar but opposite to action of clicked upper panel icons.

Focused Control

Unfocused Control

MetacityButtonNormal.png

MetacityButtonInsensitive.png

SVG

MetacityButtonInsensitive.svg

Close Prelight Control

Close Active Control

MetacityButtonClosePrelight.png

MetacityButtonCloseActive.png

SVG

SVG

Maximize Prelight Control

Maximize Active Control

MetacityButtonMaximizePrelight.png

MetacityButtonMaximizeActive.png

SVG

SVG

Minimize Prelight Control

Minimize Active Control

MetacityButtonMinimizePrelight.png

MetacityButtonMinimizeActive.png

SVG

SVG

Those with a sharp eye for color may notice the color of the dot of the default widget is "#808080" or neutral gray. The color of the prelight state mimic Ubuntu colors of yellow, orange, and red.

Simple, functional, Ubuntu!

Attachments

  • [get | view] (2009-02-23 02:55:48, 97.3 KB) [[attachment:GimpScreenShot.png]]
  • [get | view] (2009-02-26 02:35:40, 21.6 KB) [[attachment:Impression.tar.gz]]
  • [get | view] (2009-03-08 02:21:10, 8.4 KB) [[attachment:MetacityButtonCloseActive.png]]
  • [get | view] (2009-03-05 23:27:58, 126.1 KB) [[attachment:MetacityButtonCloseActive.svg]]
  • [get | view] (2009-03-11 00:44:00, 5.8 KB) [[attachment:MetacityButtonClosePrelight.png]]
  • [get | view] (2009-03-11 00:45:27, 191.9 KB) [[attachment:MetacityButtonClosePrelight.svg]]
  • [get | view] (2009-03-01 03:01:47, 4.5 KB) [[attachment:MetacityButtonDashed.png]]
  • [get | view] (2009-03-01 03:07:00, 123.7 KB) [[attachment:MetacityButtonDashed.svg]]
  • [get | view] (2009-03-08 02:21:38, 5.2 KB) [[attachment:MetacityButtonInsensitive.png]]
  • [get | view] (2009-03-08 02:26:24, 193.4 KB) [[attachment:MetacityButtonInsensitive.svg]]
  • [get | view] (2009-03-08 02:21:49, 7.7 KB) [[attachment:MetacityButtonMaximizeActive.png]]
  • [get | view] (2009-02-26 02:34:14, 58.3 KB) [[attachment:MetacityButtonMaximizeActive.svg]]
  • [get | view] (2009-03-08 02:21:58, 6.3 KB) [[attachment:MetacityButtonMaximizePrelight.png]]
  • [get | view] (2009-02-26 02:34:31, 58.3 KB) [[attachment:MetacityButtonMaximizePrelight.svg]]
  • [get | view] (2009-03-08 02:22:07, 7.2 KB) [[attachment:MetacityButtonMinimizeActive.png]]
  • [get | view] (2009-03-05 23:28:14, 126.4 KB) [[attachment:MetacityButtonMinimizeActive.svg]]
  • [get | view] (2009-03-08 02:22:17, 5.9 KB) [[attachment:MetacityButtonMinimizePrelight.png]]
  • [get | view] (2009-03-05 23:28:26, 192.4 KB) [[attachment:MetacityButtonMinimizePrelight.svg]]
  • [get | view] (2009-03-05 23:27:09, 4.1 KB) [[attachment:MetacityButtonNormal.png]]
  • [get | view] (2009-03-05 23:28:34, 193.9 KB) [[attachment:MetacityButtonNormal.svg]]
  • [get | view] (2009-02-27 13:57:08, 28.8 KB) [[attachment:UbuntuMetacityMockup.png]]
  • [get | view] (2009-02-21 15:26:17, 445.7 KB) [[attachment:UbuntuMetacityMockup.svg]]
  • [get | view] (2009-02-23 12:18:34, 29.3 KB) [[attachment:UbuntuMetacityMockupDark.png]]
  • [get | view] (2009-03-01 02:55:42, 27.8 KB) [[attachment:UbuntuMetacityMockupDash.png]]
  • [get | view] (2009-03-05 02:55:26, 26.5 KB) [[attachment:UbuntuMetacityMockupDot.png]]
  • [get | view] (2009-03-11 00:44:12, 27.1 KB) [[attachment:UbuntuMetacityMockupSolid.png]]
 All files | Selected Files: delete move to page


CategoryArtwork

Comments

  • Seems very nice...perhaps a bit of some very light 3D element to the buttons? -kwwii


Your comments here.

Artwork/Incoming/Jaunty/Impression/Metacity (last edited 2009-04-08 12:50:09 by 204)