BT 2016 advertising material: Difference between revisions

From Ecotopia Biketour Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 29: Line 29:
=== Facebook cover ===
=== Facebook cover ===


The Cover Photo is shown as the banner on the Facebook page. The dimensions [https://www.facebook.com/help/125379114252045 need to be] 851×315 px (otherwise it will be scaled and the text will look blurry), 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.


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.
Line 42: Line 42:


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


== Fonts ==
== Fonts ==

Revision as of 06:34, 27 December 2015

Posters and Flyers

Autumn 2015

This set of a poster and a flyer describes the Biketour in general and mentions the region where it will happen.

The files can be found here: Poster, Flyer.

To make it easier to tell which flyer/poster is in what language (can you tell apart Czech from Slovak, Polish from Lithuanian, Belarusian from Russian?), the language code is hidden on the flyer and poster. On the flyer it is on the front on the bottom left of the hill, on the poster it is in the back wheel of the big bike on the bottom left.

The translations are collected in a pad. The text for the flyer is the whole text except the headlines in the second-last paragraph. The text for the poster is the first paragraph, with the last sentence of the third paragraph (non-discriminatory environment) inserted as second-last sentence.

The translations for the country names in the map can be easily looked up by opening the article about the country and then searching the translated article in the language list on the left: Estonia Latvia Lithuania Belarus Russia Poland

Technical information

The files were created in Inkscape. The flyer is one third of an A4 page, so there are three flyer copies on one page. This was done using the “Clone” function (Alt+D), so when the left version of the flyer is edited, the two copies of it are updated automatically.

Web Artwork

Artwork for the website and Facebook is available here.

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.

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.

Fonts

Here is an overview over which fonts we use in the flyers and posters. In some cases, the font that has been chosen for the layout does not have any Greek or Cyrillic characters available. For the flyers in languages that use Greek or Cyrillic characters, we try to find an alternative that looks similar.

Headers

Used in the headers, such as “ECOTOPIA BIKETOUR” and “BALTIC STATES & BEYOND”. Sometimes used for the country names on the map.

For Latin, we use Nizam Bold. This is a font we created ourselves based on the hand-writing that Nizam used in the artwork that he created for our website in 2014.

For Cyrillic and Greek, we use Mauryssel.

Short texts

This is used for short texts, such as the description of the tour on the poster. Sometimes used for the country names on the map.

For Latin, we use Purisa.

For Cyrillic and Greek, for the lack of a better alternative we currently use Comic Sans MS.

Long texts

This is used for the long description of the tour on the back of the flyer.

Currently, we use Earthbound. It has been pointed out that this font doesn’t support any accents, or Greek or Cyrillic. Thus it should be replaced. One proposal was to use Sansation. This should be tried out. On the Greek and Cyrillic flyers, we already use Sansation.