Backgrounds

Differences between revisions 1 and 18 (spanning 17 versions)
Revision 1 as of 2007-09-03 15:38:17
Size: 3129
Editor: 207
Comment: Making a simple page for guidlines . feel free to edit.
Revision 18 as of 2009-07-09 21:53:45
Size: 3083
Editor: p54956A92
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
This is an unofficial wiki page designed to help artists make backgrounds for ubuntu that look good
and have lasting appeal. Please feel free to improve on my words if you feel you have my IQ or better.
<<Include(Artwork/PageTemplate/Header)>>
||<tablestyle="float:right; font-size: 0.9em; width:30%; background:#F1F1ED;"><<TableOfContents>>||
Line 4: Line 4:
== RULES ==
Line 6: Line 5:
Number one : Colors. Try to use colors that are gentle , not vibrant or fluorescent.
Being Ubuntu, Orange is our primary color , and the template colors to be used in creations are in the below image.
https://wiki.ubuntu.com/Artwork/Incoming/GutsyIdeas?action=AttachFile&do=get&target=oldpalette.png
Using at least three of these as primary colors in your creation , and having no more than four colours among those not in the palette (not including white and black), ensures that your creation matches the overall theme to be used. This action on your part will help make Ubuntu's theming consistent.
== Background Guidelines ==
Line 11: Line 7:
Number two : SHAPE. Scalability is a must with Ubuntu.Creating your image to conform to a 4:3 ratio screen ensures that it will be correctly displayed on the majority of the monitors used by Ubuntu users.Some resolutions in this frame include 1600x1200,1280x1024, 1024x768,800x600, and 640x480.  * Avoid prominent use of the Ubuntu logo. It appears in enough places already.
 * No version numbers. Some individuals may desire to use an older theme, or use the latest theme in their older version of Ubuntu. Let your submission be about choice and do not use version numbers in your artwork.
 * Avoid text, it calls for attention too much and will likely look bad when scaled. Plus it can't be translated easily.
 * Be careful with small patterns, they might become uneven when scaled.
 * Consider how the wallpaper will interact with the panels, icons and windows.
 * Show restraint in your use of color tone and contrast. The wallpaper sets the scene for other elements, it is not the main act.
Line 13: Line 14:
Number three : size. Size is not much of a concern , but a faster display time means faster booting. Basically , this means that if you should use image formats that compress more easily. Most art, especially landscapes or larger creations in terms of file size should be saved in .jpg format for release. However , if you are into vector art like LasseGullvågSætre2 , you should create your art in .svg format. What this does is , it saves the exact instructions used to paint the image , and apon you loading it as your wallpaper , it instantly carries them out to create the image. The Ubuntu logo can be found in .svg format. Doing this ensures a re-paint of your image for any resolution and any display, as you have supplied not a premade artwork but a art work that remakes itself on every screen. Doing this also guarentees massive bandwidth savings as the svg equivalents are much smaller than the same image rendered into a static .png.
Line 15: Line 15:
.jpg - smaller file size for rich and detailed large images. No transparency.
.svg - very small file size , transparency . Only applies to vector art.
.png - largest file size , transparency, but as is static image can be used for any application.
== File Formats ==
Line 19: Line 17:
Number four : elements. Somewhere I read that you should fade out towards the edges and corners. Many people will put their Icons in corners and along edges, and for part of your creation to be obscured by a panel is distracting.
Also words in a image is distracting , using the Ubuntu logo by itself as many have done is much more pleasing.
 * Use PNG format for bitmap files (ie any files in which fewer colors are repeated throughout, especially when the colors are in large blocks). Use JPGs for photos and final images in order to reduce the file size, as this format can cause visible compression artefacts.
 * Make the XCF source files available, if you happen to work with GIMP
 * Use SVG for vector art.
 * Work generated with proprietary applications like Photoshop and Illustrator is acceptable, but files in their formats are useless for many of us.
Line 22: Line 22:
Number five : content. As a worldwide community attempting to appeal to humanity of every race and nation , we have done a very good job of not creating images that could offend anyone. Let us keep this in mind as we move foward.
Line 24: Line 23:
Number six : Theming. Somehow Ubuntu should have values moral values like strength and love for others. It is in the name , you know. So the images we make should have something representing these in it as well. == Screen Resolution and Aspect Ratio ==

Table of screen resolutions of hardware offered in an online store on 2009-02-23:

=== Monitor ===
||'''Width'''||'''Height'''||'''Factor'''||'''Aspect Ratio'''||
||2560||1600||1.6|| 8:5||
||1920||1200||1.6|| 8:5||
||2048||1152||1.77||16:9||
||1920||1080||1.77||16:9||
||1680||1050||1.6|| 8:5||
||1600||1200||1.33||4:3||
||1440|| 900||1.6|| 8:5||
||1280||1024||1.25||5:4||
||1024|| 768||1.33||4:3||

=== Laptops ===
||'''Width'''||'''Height'''||'''Factor'''||'''Aspect Ratio'''||
||1920||1200||1.6|| 8:5||
||1920||1080||1.77||16:9||
||1680||1050||1.6|| 8:5||
||1680|| 945||1.77||16:9||
||1440|| 900||1.6|| 8:5||
||1366|| 768||1.77||16:9||
||1280|| 800||1.6|| 8:5||
||1024|| 576||1.77||16:9||


== Template ==

An [[attachment:bg_template_2560x1600.svg|SVG template]] for use with Inkscape and an [[attachment:bg_template_2560x1600.xcf|XCF template]] for GIMP. Both have a 2560 x 1600 pixel canvas to use the largest commonly offered resolution, currently. "Passepartout" layers allow to see how things will look when this space is cropped to conform to other common aspect ratios.

This simulates the effect the "Style: Zoom" setting in "Appearance Preferences: Background" will have: the image is scaled up or down such that it fills the screen without distorting it. If the aspect ratio of the image is wider than that of the screen, it will be scaled to the same height and the areas on the side will be cropped. If the aspect ratio of the image is taller than that of the screen, it will be scaled to the same width and the areas on top and bottom will be cropped.

Background Guidelines

  • Avoid prominent use of the Ubuntu logo. It appears in enough places already.
  • No version numbers. Some individuals may desire to use an older theme, or use the latest theme in their older version of Ubuntu. Let your submission be about choice and do not use version numbers in your artwork.
  • Avoid text, it calls for attention too much and will likely look bad when scaled. Plus it can't be translated easily.
  • Be careful with small patterns, they might become uneven when scaled.
  • Consider how the wallpaper will interact with the panels, icons and windows.
  • Show restraint in your use of color tone and contrast. The wallpaper sets the scene for other elements, it is not the main act.

File Formats

  • Use PNG format for bitmap files (ie any files in which fewer colors are repeated throughout, especially when the colors are in large blocks). Use JPGs for photos and final images in order to reduce the file size, as this format can cause visible compression artefacts.
  • Make the XCF source files available, if you happen to work with GIMP
  • Use SVG for vector art.
  • Work generated with proprietary applications like Photoshop and Illustrator is acceptable, but files in their formats are useless for many of us.

Screen Resolution and Aspect Ratio

Table of screen resolutions of hardware offered in an online store on 2009-02-23:

Monitor

Width

Height

Factor

Aspect Ratio

2560

1600

1.6

8:5

1920

1200

1.6

8:5

2048

1152

1.77

16:9

1920

1080

1.77

16:9

1680

1050

1.6

8:5

1600

1200

1.33

4:3

1440

900

1.6

8:5

1280

1024

1.25

5:4

1024

768

1.33

4:3

Laptops

Width

Height

Factor

Aspect Ratio

1920

1200

1.6

8:5

1920

1080

1.77

16:9

1680

1050

1.6

8:5

1680

945

1.77

16:9

1440

900

1.6

8:5

1366

768

1.77

16:9

1280

800

1.6

8:5

1024

576

1.77

16:9

Template

An SVG template for use with Inkscape and an XCF template for GIMP. Both have a 2560 x 1600 pixel canvas to use the largest commonly offered resolution, currently. "Passepartout" layers allow to see how things will look when this space is cropped to conform to other common aspect ratios.

This simulates the effect the "Style: Zoom" setting in "Appearance Preferences: Background" will have: the image is scaled up or down such that it fills the screen without distorting it. If the aspect ratio of the image is wider than that of the screen, it will be scaled to the same height and the areas on the side will be cropped. If the aspect ratio of the image is taller than that of the screen, it will be scaled to the same width and the areas on top and bottom will be cropped.

Artwork/Documentation/Backgrounds (last edited 2012-01-26 17:19:32 by 180)