Graphics

Differences between revisions 1 and 15 (spanning 14 versions)

Read this Site in your language:

Introduction

Contents

Introduction
1. Moinmoin markup
2. Names and sizes
Branding
1. Logo
2. Roundel
Icons
1. Pictograms
2. Social media

This page describes the availability and use of icons in the Ubuntu GNOME Wiki. If you wish to insert icons into your wiki page, then please read this page and make full use of the splendid icons available. The page contains instruction on how to use icons in the moinmoin markup and a complete list of the icons themselves. Enjoy!

Moinmoin markup

The moinmoin markup is the main pagetype to be used in the Ubuntu Wiki. For instructions as to its use, see HelpOnEditing. In order to insert icons or any other images, you simply use their wiki location like this:

attachment:UbuntuGNOME/Artwork/Graphics/roundel48.png

Produces:

UbuntuGNOME/Artwork/Graphics/roundel48.png

And this is an UbuntuGNOME/Artwork/Graphics/roundel24.png example of an in-line icon, and how the text will wrap around it and all that good stuff.

Names and sizes

All icons have now been downscaled to 32px. While our main colour remains blue, we've changed it to match the overall look of the wiki.

In the tables below, the names are specified as icon_name.png. For instance, if you want to get a roundel, you shall use

attachment:UbuntuGNOME/Artwork/Graphics/roundel.png

Branding

Logo

Image	Name	SVG Source
	logo.png	Download

Roundel

Image	Name	SVG Source
	roundel.png	Download

Icons

Pictograms

Image	Name	SVG Source
	accessibility.png	Download
	artwork.png	Download
	brainstorming.png	Download
	bugsquad.png	Download
	comunications.png	Download
	contact.png	Download
	develpment.png	Download
	documentation.png	Download
	download.png	Download
	help.png	Download
	information.png	Download
	install.png	Download
	love.png	Download
	mediaXX.png	Download
	music.png	Download
	onlineaccounts.png	Download
	people.png	Download
	photos.png	Download
	schedule.png	Download
	share.png	Download
	todo.png	Download
	translate.png	Download
	upgrade.png	Download
	utilities.png	Download
	videos.png	Download
	web.png	Download

Social media

Image	Name	SVG Source	Available sizes
	facebookXX.png	Download	24, 32, 48, 64, 96
	google+XX.png	Download	24, 32, 48, 64, 96
	google+_communityXX.png	Download	24, 32, 48, 64, 96
	twitterXX.png	Download	24, 32, 48, 64, 96
	youtubeXX.png	Download	24, 32, 48, 64, 96

UbuntuGNOME/Artwork/Graphics (last edited 2015-08-19 03:36:03 by 179)

-  ⇤ ← Revision 1 as of 2013-08-05 09:40:30 → 
  Size: 2275
  Editor: 17
  Comment: First structure
+   ← Revision 15 as of 2015-08-18 13:33:49 → ⇥
  Size: 7586
  Editor: inoki
  Comment:
-Deletions are marked like this.
+Additions are marked like this.
 Line 2:
+<<BR>>
'''Go back to [[https://wiki.ubuntu.com/UbuntuGNOME/Artwork | Artwork Page]]'''

<<BR>>
Read this Site in your language:

|| [[https://wiki.ubuntu.com/UbuntuGNOME/Artwork/Graphics/Greek| Ελληνικά]] ||
<<BR>>
-Line 7:
+Line 16:
-## This page describes the availability and use of icons in the Ubuntu wiki. If you wish to insert icons into your wiki page, then please read this page and make full use of the splendid icons available. If you add more, PLEASE ADD THEM TO THIS PAGE, so that others can use and benefit from your icons. The page contains instruction on how to use icons in the moinmoin markup and a complete list of the icons themselves. Enjoy!
+This page describes the availability and use of icons in the Ubuntu GNOME Wiki. If you wish to insert icons into your wiki page, then please read this page and make full use of the splendid icons available. The page contains instruction on how to use icons in the moinmoin markup and a complete list of the icons themselves. Enjoy!
-Line 9:
+Line 18:
-## '''If you add an icon to the wiki, please add it here as well. It will be much easier to find later.'''

== Courtesy ==
Make sure all your images are converted to .png format, since .jpg and .gif are both proprietary format! The best way to get non-proprietary formats accepted is to use them! 'course, I doubt any heads will explode if you use .jpg or .gif or whatever.

== Adding icons  ==
To add icons to this page as attachments,  select from the "More Actions" pull down menu (located at the top and bottom of the wiki page) the "attachments" option. From that page, simply select which icon to upload from your computer.  After doing this, the uploaded icon will be available to insert in any pages of the wiki.
+##If you add more, PLEASE ADD THEM TO THIS PAGE, so that others can use and benefit from your icons. 
## '''If you add an icon to the Ubuntu GNOME wiki, please add it here as well. It will be much easier to find later.'''
-Line 19:
+Line 23:
-The moinmoin markup is the main pagetype to be used in the ubuntu wiki. For instructions as to its use, see HelpOnEditing. In order to insert icons or any other images, you simply use their wiki location like this:
+The moinmoin markup is the main pagetype to be used in the Ubuntu Wiki. For instructions as to its use, see HelpOnEditing. In order to insert icons or any other images, you simply use their wiki location like this:
-Line 21:
+Line 25:
-attachment:UbuntuGNOME/Artwork/Graphics/IconUbuntu.png
+attachment:UbuntuGNOME/Artwork/Graphics/roundel48.png
-Line 25:
+Line 29:
-{{attachment:UbuntuGNOME/Artwork/Graphics/IconUbuntu.png}}
+{{attachment:UbuntuGNOME/Artwork/Graphics/roundel48.png}}
-Line 27:
+Line 31:
-{{attachment:UbuntuGNOME/Artwork/Graphics/IconUsers.png}} This is an icon with text beside it, and I'm going to type and type and type so that you can see how it wraps, because you like to see how stuff works, since it's how people usually are able to learn, especially with code.
+And this is an {{attachment:UbuntuGNOME/Artwork/Graphics/roundel24.png}} example of an in-line icon, and how the text will wrap around it and all that good stuff.
-Line 29:
+Line 33:
-And this is an {{attachment:UbuntuGNOME/Artwork/Graphics/IconUsers.png}} example of an inline icon, and how the text will wrap around it and all that good mojo jo jo.
+== Names and sizes ==
All icons have now been downscaled to 32px. While our main colour remains blue, we've changed it to match the overall look of the wiki.

In the tables below, the names are specified as `icon_name.png`. For instance, if you want to get a roundel, you shall use
{{{
attachment:UbuntuGNOME/Artwork/Graphics/roundel.png
}}}
-Line 32:
+Line 43:
-Line 33:
+Line 45:
+||<rowstyle="background:#0087ED; color:#FFFFFF; text-align: center; font-weight: bold"> Image||Name||SVG Source||
||{{attachment:UbuntuGNOME/Artwork/Graphics/logo_small.png}} || logo.png || [[attachment:UbuntuGNOME/Artwork/Graphics/logo.svg|Download]] ||
-Line 34:
+Line 49:
+||<rowstyle="background:#0087ED; color:#FFFFFF; text-align: center; font-weight: bold"> Image||Name||SVG Source||
||{{attachment:UbuntuGNOME/Artwork/Graphics/roundel48.png}} || roundel.png || [[attachment:UbuntuGNOME/Artwork/Graphics/roundel.svg|Download]] ||
-Line 36:
+Line 53:
-Line 38:
+Line 56:
+||<rowstyle="background:#0087ED; color:#FFFFFF; text-align: center; font-weight: bold"> Image||Name||SVG Source||
||{{attachment:UbuntuGNOME/Artwork/Graphics/accessibility48.png}} || accessibility.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/artwork48.png}} || artwork.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/brainstorming48.png}} || brainstorming.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/bugsquad48.png}} || bugsquad.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/communications48.png}} || comunications.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/contact48.png}} || contact.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/develpment48.png}} || develpment.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/documentation48.png}} || documentation.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/download48.png}} || download.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/help48.png}} || help.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/information48.png}} || information.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/install48.png}} || install.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/love48.png}} || love.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/media48.png}} || mediaXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/music48.png}} || music.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/onlineaccounts48.png}} || onlineaccounts.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/people48.png}} || people.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/photos48.png}} || photos.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/schedule48.png}} || schedule.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/share48.png}} || share.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/todo48.png}} || todo.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/translate48.png}} || translate.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/upgrade48.png}} || upgrade.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/utilities48.png}} || utilities.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/videos48.png}} || videos.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/web48.png}} || web.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
-Line 39:
+Line 85:
+||<rowstyle="background:#0087ED; color:#FFFFFF; text-align: center; font-weight: bold"> Image||Name||SVG Source||Available sizes||
||{{attachment:UbuntuGNOME/Artwork/Graphics/facebook48.png}} || facebookXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/contact-us.svg|Download]] || 24, 32, 48, 64, 96 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/google+48.png}} || google+XX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/contact-us.svg|Download]] || 24, 32, 48, 64, 96 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/google+_community48.png}} || google+_communityXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/contact-us.svg|Download]] || 24, 32, 48, 64, 96 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/twitter48.png}} || twitterXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/contact-us.svg|Download]] || 24, 32, 48, 64, 96 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/youtube48.png}} || youtubeXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/contact-us.svg|Download]] || 24, 32, 48, 64, 96 ||