Web artwork

Types of web artwork

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 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.

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 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 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 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 gpx2svg or QGis (following the instructions here).

One particular function of Inkscape that is really useful is Path → Simplify (Ctrl+L).

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 map projection. The projection is the way that the 3-dimensional globe is represented on a 2-dimensional map (compare for example the Mercator, Mollweide, 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 Flex Projector). Another good source for SVG maps is Wikipedia (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 this, and it is a bit difficult to work with as there are gaps between the countries.