Web artwork - Revision history

Candid: /* Create a vector graphic of the route/map */

2016-05-26T07:19:30Z

Create a vector graphic of the route/map

← Older revision		Revision as of 07:19, 26 May 2016
Line 45:		Line 45:
	To do this, you need a bit of experience working with a vector program such as Inkscape.		To do this, you need a bit of experience working with a vector program such as Inkscape.

	To create an SVG file of the route, first create a GPX file (for example on http://www.yournavigation.org/, calculate the route and then click on “Export”), and then convert it to SVG, using either [http://nasauber.de/opensource/gpx2svg/ gpx2svg] or [http://www.qgis.org/ QGis] (following the instructions [http://gis.stackexchange.com/a/190858/70040 here]).		To create an SVG file of the route, first create a GPX file (for example on http://www.yournavigation.org/, calculate the route and then click on “Export”), and then convert it to SVG, using either [http://nasauber.de/opensource/gpx2svg/ gpx2svg] or [http://www.qgis.org/ QGis] (following the instructions [http://gis.stackexchange.com/a/190858/70040 here]). Another more hacky but faster way is to calculate the route in an OpenLayers-based map (such as FacilMap/FacilPad/YourNavigation) using Chromium/Google Chrome, right-click on the line of the route, click “Inspect”, scroll up in the source code until you find a line starting with “<svg”, right-click on in, “Copy”, “Copy outerHtml”, paste it in a text editor, and then save it with the extension “.svg”.

	One particular function of Inkscape that is really useful is <tt>Path</tt> → <tt>Simplify</tt> (<kbd>Ctrl+L</kbd>).		One particular function of Inkscape that is really useful is <tt>Path</tt> → <tt>Simplify</tt> (<kbd>Ctrl+L</kbd>).

Candid: /* Create a vector graphic of the route/map */

2016-04-24T13:08:59Z

Create a vector graphic of the route/map

← Older revision		Revision as of 13:08, 24 April 2016
Line 43:		Line 43:
	Creating a sketch of the route map as a scalable vector graphic (SVG) can be very useful, as it can be easily scaled to the different sizes needed for the different types of artwork, and it will have good printing quality.		Creating a sketch of the route map as a scalable vector graphic (SVG) can be very useful, as it can be easily scaled to the different sizes needed for the different types of artwork, and it will have good printing quality.

	To do this, you need a bit of experience working with a vector program such as Inkscape~~. One particular function of Inkscape that is really useful is <tt>Path</tt> → Simplify (<kbd>Ctrl+L</kbd>)~~.		To do this, you need a bit of experience working with a vector program such as Inkscape.

	To create an SVG file of the route, first create a GPX file (for example on http://www.yournavigation.org/, calculate the route and then click on “Export”), and then convert it to SVG, using either [http://nasauber.de/opensource/gpx2svg/ gpx2svg] or [http://www.qgis.org/ QGis] (following the instructions [http://gis.stackexchange.com/a/190858/70040 here]).		To create an SVG file of the route, first create a GPX file (for example on http://www.yournavigation.org/, calculate the route and then click on “Export”), and then convert it to SVG, using either [http://nasauber.de/opensource/gpx2svg/ gpx2svg] or [http://www.qgis.org/ QGis] (following the instructions [http://gis.stackexchange.com/a/190858/70040 here]).

			One particular function of Inkscape that is really useful is <tt>Path</tt> → <tt>Simplify</tt> (<kbd>Ctrl+L</kbd>).

	If you want to put national borders or coastlines on the map, you need to find an SVG map. Be aware of projections: If you want to put the route and the map together in one graphic, they both have to be in the same [http://axismaps.github.io/thematic-cartography/articles/projections.html map projection]. The projection is the way that the 3-dimensional globe is represented on a 2-dimensional map (compare for example the [https://commons.wikimedia.org/wiki/File:Mercator_projection_SW.jpg Mercator], [https://commons.wikimedia.org/wiki/File:Mollweide_projection_SW.jpg Mollweide], [https://commons.wikimedia.org/wiki/File:Robinson_projection_SW.jpg Robinson] projections, in each one, the countries have a different shape). Interactive online maps (like OpenStreetMap or Google Maps) normally use the Mercator projection, and when you convert a GPX file to SVG as written in above, it will also be in Mercator. You can also use a different projection, but then you have to export the GPX file in that projection in QGis.		If you want to put national borders or coastlines on the map, you need to find an SVG map. Be aware of projections: If you want to put the route and the map together in one graphic, they both have to be in the same [http://axismaps.github.io/thematic-cartography/articles/projections.html map projection]. The projection is the way that the 3-dimensional globe is represented on a 2-dimensional map (compare for example the [https://commons.wikimedia.org/wiki/File:Mercator_projection_SW.jpg Mercator], [https://commons.wikimedia.org/wiki/File:Mollweide_projection_SW.jpg Mollweide], [https://commons.wikimedia.org/wiki/File:Robinson_projection_SW.jpg Robinson] projections, in each one, the countries have a different shape). Interactive online maps (like OpenStreetMap or Google Maps) normally use the Mercator projection, and when you convert a GPX file to SVG as written in above, it will also be in Mercator. You can also use a different projection, but then you have to export the GPX file in that projection in QGis.

Candid: /* Create a vector graphic of the route/map */

2016-04-24T13:08:30Z

Create a vector graphic of the route/map

← Older revision		Revision as of 13:08, 24 April 2016
Line 43:		Line 43:
	Creating a sketch of the route map as a scalable vector graphic (SVG) can be very useful, as it can be easily scaled to the different sizes needed for the different types of artwork, and it will have good printing quality.		Creating a sketch of the route map as a scalable vector graphic (SVG) can be very useful, as it can be easily scaled to the different sizes needed for the different types of artwork, and it will have good printing quality.

	To do this, you need a bit of experience working with a vector program such as Inkscape.		To do this, you need a bit of experience working with a vector program such as Inkscape. One particular function of Inkscape that is really useful is <tt>Path</tt> → Simplify (<kbd>Ctrl+L</kbd>).

	To create an SVG file of the route, first create a GPX file (for example on http://www.yournavigation.org/, calculate the route and then click on “Export”), and then convert it to SVG, using either [http://nasauber.de/opensource/gpx2svg/ gpx2svg] or [http://www.qgis.org/ QGis] (following the instructions [http://gis.stackexchange.com/a/190858/70040 here]).		To create an SVG file of the route, first create a GPX file (for example on http://www.yournavigation.org/, calculate the route and then click on “Export”), and then convert it to SVG, using either [http://nasauber.de/opensource/gpx2svg/ gpx2svg] or [http://www.qgis.org/ QGis] (following the instructions [http://gis.stackexchange.com/a/190858/70040 here]).

Candid: /* Create a vector graphic of the route/map */

2016-04-24T12:26:50Z

Create a vector graphic of the route/map

← Older revision		Revision as of 12:26, 24 April 2016
Line 47:		Line 47:
	To create an SVG file of the route, first create a GPX file (for example on http://www.yournavigation.org/, calculate the route and then click on “Export”), and then convert it to SVG, using either [http://nasauber.de/opensource/gpx2svg/ gpx2svg] or [http://www.qgis.org/ QGis] (following the instructions [http://gis.stackexchange.com/a/190858/70040 here]).		To create an SVG file of the route, first create a GPX file (for example on http://www.yournavigation.org/, calculate the route and then click on “Export”), and then convert it to SVG, using either [http://nasauber.de/opensource/gpx2svg/ gpx2svg] or [http://www.qgis.org/ QGis] (following the instructions [http://gis.stackexchange.com/a/190858/70040 here]).

	If you want to put national borders or coastlines on the map, ~~a good source for~~ SVG ~~maps is Wikipedia ([https://commons.wikimedia.org/wiki/Category:Blank_SVG_maps_of_the_world world maps / [https://commons.wikimedia.org/wiki/Category:Blank_SVG_maps_of_Europe maps of Europe])~~. Be aware of projections: If you want to put the route and the map together in one graphic, they both have to be in the same [~~https~~://en.~~wikipedia~~.~~org~~/~~wiki~~/~~Map_projection~~ map projection]. The projection is the way that the 3-dimensional globe is represented on a 2-dimensional map (compare for example the [https://commons.wikimedia.org/wiki/File:Mercator_projection_SW.jpg Mercator], [https://commons.wikimedia.org/wiki/File:Mollweide_projection_SW.jpg Mollweide], [https://commons.wikimedia.org/wiki/File:~~Kavraiskiy_VII_projection_SW~~.jpg ~~Kavraiskiy~~] projections, in each one, the countries have a different shape). Interactive online maps (like OpenStreetMap or Google Maps) normally use the Mercator projection, and when you convert a GPX file to SVG as written in above, it will also be in Mercator. ~~The~~ only Mercator ~~SVG~~ map ~~on Wikipedia~~ seems to be [https://commons.wikimedia.org/wiki/File:Mercator_Projection.svg this].		If you want to put national borders or coastlines on the map, you need to find an SVG map. Be aware of projections: If you want to put the route and the map together in one graphic, they both have to be in the same [http://axismaps.github.io/thematic-cartography/articles/projections.html map projection]. The projection is the way that the 3-dimensional globe is represented on a 2-dimensional map (compare for example the [https://commons.wikimedia.org/wiki/File:Mercator_projection_SW.jpg Mercator], [https://commons.wikimedia.org/wiki/File:Mollweide_projection_SW.jpg Mollweide], [https://commons.wikimedia.org/wiki/File:Robinson_projection_SW.jpg Robinson] projections, in each one, the countries have a different shape). Interactive online maps (like OpenStreetMap or Google Maps) normally use the Mercator projection, and when you convert a GPX file to SVG as written in above, it will also be in Mercator. You can also use a different projection, but then you have to export the GPX file in that projection in QGis.

			Something to start with is [[:File:Mercator Europe Map.svg]] (extract of [[:File:Mercator World Map.svg]] created with [http://www.flexprojector.com/ Flex Projector]). Another good source for SVG maps is Wikipedia ([https://commons.wikimedia.org/wiki/Category:Blank_SVG_maps_of_the_world world maps / [https://commons.wikimedia.org/wiki/Category:Blank_SVG_maps_of_Europe maps of Europe]). Unfortunately, the only Mercator map there seems to be [https://commons.wikimedia.org/wiki/File:Mercator_Projection.svg this], and it is a bit difficult to work with as there are gaps between the countries.

	[[Category:Web artwork]]		[[Category:Web artwork]]

Candid at 11:33, 24 April 2016

2016-04-24T11:33:22Z

← Older revision		Revision as of 11:33, 24 April 2016
Line 1:		Line 1:
			== Types of web artwork ==

	Here is an overview over which graphics exist and what details to pay attention to when creating them.		Here is an overview over which graphics exist and what details to pay attention to when creating them.

	== Website banner ==		=== Website banner ===

	Displayed on top of the website. The dimensions need to be 900×250 px. Note that on the top left there needs to be a gap for the language picker (~115×45 px) and on the top right for the RSS and Facebook link (~110×45 px, note that they move down when you point the mouse at them).		Displayed on top of the website. The dimensions need to be 900×250 px. Note that on the top left there needs to be a gap for the language picker (~115×45 px) and on the top right for the RSS and Facebook link (~110×45 px, note that they move down when you point the mouse at them).

	== Facebook cover ==		=== Facebook cover ===

	The Cover Photo is shown as the banner on the Facebook page. The dimensions need to be 828×315 px (otherwise it will be scaled and the text will look blurry. Facebook [https://www.facebook.com/help/125379114252045 claims] the dimensions need to be 851×315 px, but this is wrong), so in total it is less wide than the website banner. An area about 40 px high will be covered on the bottom due to the buttons, where the name of the page is written it will be about 60 px.		The Cover Photo is shown as the banner on the Facebook page. The dimensions need to be 828×315 px (otherwise it will be scaled and the text will look blurry. Facebook [https://www.facebook.com/help/125379114252045 claims] the dimensions need to be 851×315 px, but this is wrong), so in total it is less wide than the website banner. An area about 40 px high will be covered on the bottom due to the buttons, where the name of the page is written it will be about 60 px.
Line 11:		Line 13:
	The profile picture is covering an area of about 185×140 px on the bottom left. Note that this part is not visible when looking at the page, but when clicking on the cover photo it will be visible.		The profile picture is covering an area of about 185×140 px on the bottom left. Note that this part is not visible when looking at the page, but when clicking on the cover photo it will be visible.

	== Facebook event cover ==		=== Facebook event cover ===

	Events also have cover photos, but those have different dimensions. The dimensions need to be 784×295 px. An area about 65 px high should be left free of text on the bottom of the photo, as there will be the name of the event.		Events also have cover photos, but those have different dimensions. The dimensions need to be 784×295 px. An area about 65 px high should be left free of text on the bottom of the photo, as there will be the name of the event.

	== Profile picture ==		=== Facebook group cover ===

			Our group also has a cover photo, but it has again different dimensions. They are 784×250 px. An area of about 220×65 px needs to be left free of text on the bottom left for the name of the group, and 330×50 px on the bottom right for the buttons.

			=== Profile picture ===

	This is the small square photo on the top left of the Facebook page. The photo [https://www.facebook.com/help/125379114252045 must be] at least 180×180 px, but will be scaled down to 160×160 px and 40×40 px on computers and 140×140 px or 50×50 px on phones. So it will always be scaled. Do make sure that it doesn't get blurry, it is the best to create it as 1120×1120 px, as that is the common multiple of 160×160 px and 140×140 px.		This is the small square photo on the top left of the Facebook page. The photo [https://www.facebook.com/help/125379114252045 must be] at least 180×180 px, but will be scaled down to 160×160 px and 40×40 px on computers and 140×140 px or 50×50 px on phones. So it will always be scaled. Do make sure that it doesn't get blurry, it is the best to create it as 1120×1120 px, as that is the common multiple of 160×160 px and 140×140 px.
Line 21:		Line 27:
	Currently we have a seamless profile picture, so the profile picture looks like it is part of the cover photo. To create that in Inkscape, set your document size to 160×160 px, paste your cover photo (dimensions 851×315 px) and put it to the position X: -20 px, Y: 23 px. When exporing it as a PNG, make sure to select “Page” under “Export area”, and setting the image size to 1120×1120 px.		Currently we have a seamless profile picture, so the profile picture looks like it is part of the cover photo. To create that in Inkscape, set your document size to 160×160 px, paste your cover photo (dimensions 851×315 px) and put it to the position X: -20 px, Y: 23 px. When exporing it as a PNG, make sure to select “Page” under “Export area”, and setting the image size to 1120×1120 px.

	== Thumbnail ==		=== Thumbnail ===

	The thumbnail is displayed when posting a link on Facebook. It is shown next to the page title of the link preview. Normally Facebook takes the first image it finds on the linked page and scales it to either 470×245 px (and then displays it as 470×246 px), or to 158×158 px. The details are described [https://developers.facebook.com/docs/sharing/best-practices#images here].		The thumbnail is displayed when posting a link on Facebook. It is shown next to the page title of the link preview. Normally Facebook takes the first image it finds on the linked page and scales it to either 470×245 px (and then displays it as 470×246 px), or to 158×158 px. The details are described [https://developers.facebook.com/docs/sharing/best-practices#images here].
Line 30:		Line 36:

	The attachment page for the current one is [https://www.ecotopiabiketour.net/yellow-banner-2016_v1_facebook_thumbnail here].		The attachment page for the current one is [https://www.ecotopiabiketour.net/yellow-banner-2016_v1_facebook_thumbnail here].

			== Howtos ==

			=== Create a vector graphic of the route/map ===

			Creating a sketch of the route map as a scalable vector graphic (SVG) can be very useful, as it can be easily scaled to the different sizes needed for the different types of artwork, and it will have good printing quality.

			To do this, you need a bit of experience working with a vector program such as Inkscape.

			To create an SVG file of the route, first create a GPX file (for example on http://www.yournavigation.org/, calculate the route and then click on “Export”), and then convert it to SVG, using either [http://nasauber.de/opensource/gpx2svg/ gpx2svg] or [http://www.qgis.org/ QGis] (following the instructions [http://gis.stackexchange.com/a/190858/70040 here]).

			If you want to put national borders or coastlines on the map, a good source for SVG maps is Wikipedia ([https://commons.wikimedia.org/wiki/Category:Blank_SVG_maps_of_the_world world maps / [https://commons.wikimedia.org/wiki/Category:Blank_SVG_maps_of_Europe maps of Europe]). Be aware of projections: If you want to put the route and the map together in one graphic, they both have to be in the same [https://en.wikipedia.org/wiki/Map_projection map projection]. The projection is the way that the 3-dimensional globe is represented on a 2-dimensional map (compare for example the [https://commons.wikimedia.org/wiki/File:Mercator_projection_SW.jpg Mercator], [https://commons.wikimedia.org/wiki/File:Mollweide_projection_SW.jpg Mollweide], [https://commons.wikimedia.org/wiki/File:Kavraiskiy_VII_projection_SW.jpg Kavraiskiy] projections, in each one, the countries have a different shape). Interactive online maps (like OpenStreetMap or Google Maps) normally use the Mercator projection, and when you convert a GPX file to SVG as written in above, it will also be in Mercator. The only Mercator SVG map on Wikipedia seems to be [https://commons.wikimedia.org/wiki/File:Mercator_Projection.svg this].

	[[Category:Web artwork]]		[[Category:Web artwork]]

Candid: Created page with "Here is an overview over which graphics exist and what details to pay attention to when creating them. == Website banner == Displayed on top of the website. The dimensions n..."

2015-12-27T06:36:55Z

Created page with "Here is an overview over which graphics exist and what details to pay attention to when creating them. == Website banner == Displayed on top of the website. The dimensions n..."

New page

Here is an overview over which graphics exist and what details to pay attention to when creating them.

== Website banner ==

Displayed on top of the website. The dimensions need to be 900×250 px. Note that on the top left there needs to be a gap for the language picker (~115×45 px) and on the top right for the RSS and Facebook link (~110×45 px, note that they move down when you point the mouse at them).

== Facebook cover ==

The Cover Photo is shown as the banner on the Facebook page. The dimensions need to be 828×315 px (otherwise it will be scaled and the text will look blurry. Facebook [https://www.facebook.com/help/125379114252045 claims] the dimensions need to be 851×315 px, but this is wrong), so in total it is less wide than the website banner. An area about 40 px high will be covered on the bottom due to the buttons, where the name of the page is written it will be about 60 px.

The profile picture is covering an area of about 185×140 px on the bottom left. Note that this part is not visible when looking at the page, but when clicking on the cover photo it will be visible.

== Facebook event cover ==

Events also have cover photos, but those have different dimensions. The dimensions need to be 784×295 px. An area about 65 px high should be left free of text on the bottom of the photo, as there will be the name of the event.

== Profile picture ==

This is the small square photo on the top left of the Facebook page. The photo [https://www.facebook.com/help/125379114252045 must be] at least 180×180 px, but will be scaled down to 160×160 px and 40×40 px on computers and 140×140 px or 50×50 px on phones. So it will always be scaled. Do make sure that it doesn't get blurry, it is the best to create it as 1120×1120 px, as that is the common multiple of 160×160 px and 140×140 px.

Currently we have a seamless profile picture, so the profile picture looks like it is part of the cover photo. To create that in Inkscape, set your document size to 160×160 px, paste your cover photo (dimensions 851×315 px) and put it to the position X: -20 px, Y: 23 px. When exporing it as a PNG, make sure to select “Page” under “Export area”, and setting the image size to 1120×1120 px.

== Thumbnail ==

The thumbnail is displayed when posting a link on Facebook. It is shown next to the page title of the link preview. Normally Facebook takes the first image it finds on the linked page and scales it to either 470×245 px (and then displays it as 470×246 px), or to 158×158 px. The details are described [https://developers.facebook.com/docs/sharing/best-practices#images here].

For blog posts and pages on our website, you can manually define the preview picture by clicking “Set Featured Image” on the bottom right when editing a page or post. As we don’t want to do this for every post, and the first image that Facebook would find on a page without pictures would be the “Move Commons” logo at the bottom of our website, there is a default Facebook thumbnail set up. It is hard-coded into the theme, go to Appearance → Editor, select “header.php” on the right, and find the following line:

<link rel="image_src" href="https://www.ecotopiabiketour.net/wp/wp-content/uploads/biketour//2015/11/yellow-banner-2016_v1_facebook_thumbnail.png" />

The attachment page for the current one is [https://www.ecotopiabiketour.net/yellow-banner-2016_v1_facebook_thumbnail here].

[[Category:Web artwork]]