www-sivujen graafinen suunnittelu Juuso Koponen graafinen suunnittelija

Koko: px
Aloita esitys sivulta:

Download "www-sivujen graafinen suunnittelu Juuso Koponen graafinen suunnittelija juuso.koponen@taik.fi"

Transkriptio

1 www-sivujen graafinen suunnittelu Juuso Koponen graafinen suunnittelija

2 1 Johdanto 2 Peruskäsitteitä 3 Typografia 4 Gridi 5 Värit 6 Työprosessi a Kirjallisuutta

3 1 Johdanto

4 The purpose of design is to facilitate communication. You don t get design for design s sake. That s called art. Ben Hunt

5 Designing pages in html is a lot like having sex in a bath- tub. If you don t know anything about sex, it won t help to know a lot about bathtubs. Michael L. Kaufman

6 2 Peruskäsitteitä

7 Vektori ja bittikartta vektori (vector) bittikartta (bitmap) kuva.

8 Vektori ja bittikartta antialiasointi } pikseli bittikartta (bitmap) kuva.

9 Resoluutio Resoluutio on kuvassa tietyllä pinta-alalla oleva informaation määrä. Suurempi resoluutio = tarkempi kuva. Yksikkönä dpi/ppi (dots/points per inch), joskus myös lpi (lines per inch) tai l/cm (lines/cm). dpi = 2 lpi eli 5 l/cm Painokäytössä resoluutio on nelivärikuvissa tyypillisesti 300 dpi, yksivärisissä kuvissa (line art) dpi. Ruudulla todellinen resoluutio vaihtelee näytön koon ja valitun näyttötarkkuuden mukaan. Esim. 17" näytöllä tarkkuudella px todellinen resoluutio 67 dpi. Ruutukäytössä nimellinen resoluutio on 72 dpi. Tämä merkitsee, että typografinen piste (pt) vastaa yhtä pikseliä.

10 Kuvien tiedostomuodot jpeg Häviöllinen (lossy), 24-bittinen (16,7 milj. väriä) Pieni tiedostokoko Sopii hyvin valokuviin, huonosti graafisiin elementteihin gif Häviötön (lossless), 8-bittinen (2 256 väriä) Tukee läpinäkyvyyttä ja animaatiota Laajasti tuettu myös vanhoissa selaimissa png Häviötön, 8- tai 24-bittinen Paranneltu versio gif:stä Tukee osittaista läpinäkyvyyttä (alpha)

11 Tiedostomuotojen käyttö jpeg gif png Valokuviin ja muihin kuviin joissa on paljon värisävyjä mutta ei voimakkaita graafisia muotoja Pieniin animaatioihin (isompiin kannattaa käyttää jotain varsinaista videoformaattia tai Flashia) Tarvittaessa yhteensopivuutta vanhoihin selaimiin Yleisformaatti kaikkeen käyttöön, erityisesti graafisiin elementteihin Kun tarvitaan osittaista läpi- näkyvyyttä (alpha)

12 Flash Käyttökohteet Vektoripohjainen animaatio; vie Flashilla vain pienen murto-osan siitä tiedostokoosta jonka vastaava video veisi Monimutkaista vuorovaikutteisuutta tai selainpäässä (client-side) ajettavaa koodia vaativat sovellukset Ongelmat Vaatii erillisen plugin-ohjelman selaimeen Vaatii melko paljon konetehoa Paikoin Flashin käyttö on estetty tietoturvasyistä Rikkoo selaimen käyttölogiikkaa, esim. Back-nappi ei toimi

13 3 Typografia

14 Typografisia käsitteitä keili/ pistekoko (body size) A x p k alapidennys aukko (eye) (descender) yläpidennys (ascender) akseli (axis) pääte (serif) versaalikorkeus (cap height) x-korkeus (x-height) ABC abc abc suuraakkoset/ versaalit (uppercase/ capital letters) pienaakkoset/ gemenat (lowercase) kapiteelit (small caps) peruslinja (baseline)

15 Kirjaintyylit Garamond (antiikva) Helvetica (groteski) Antiikvat (serif, roman) Päätteelliset kirjaimet, joissa esiintyy vahvuuden vaihtelua Esim. Times New Roman, Garamond, Georgia Groteskit (sans-serif) Tasavahvat päätteettömät kirjaimet Esim. Arial, Verdana, Helvetica, Futura

16 Kirjaintyylit (jatkoa edelliseltä sivulta) Egyptiennet ja clarendonit (slab-serif) Lähes tasavahvat päätteelliset kirjaimet Esim. Clarendon, Serifa Goottilaiset/murretut kirjaimet (blackletter) Vanhat keskiaikaiset Gifu-kirjaimet Clarendon Esim. Fette Fraktur, Goudy Text Muita kirjaintyylejä Glyyfiset (glyphic), kaiverrusta muistuttavat Fraktur Kalligrafiset (script), kaunokirjoitusta muistuttavat Fantasia- ja koristekirjaimet (novelty, decorative)

17 Antiikvat Renessanssiantiikvat (oldstyle) Pieni aukko, kalteva akseli, vahvahkot päätteet, loiva päätteiden liitos Elegantteja ja klassisia Aa Bembo Esim. Garamond, Bembo, Times New Roman Siirtymäkauden antiikvat (transitional) Kohtalainen kontrasti, liki suora akseli, loiva päätteiden liitos Helppolukuisia pienemmässäkin koossa Aa Baskerville Esim. Baskerville, Caslon, Fournier

18 Antiikvat (jatkoa edelliseltä sivulta) Uusklassiset antiikvat (modern) Jyrkkä kontrasti ja päätteiden liitos, suorat päätteet, suora akseli, usein pieni x-korkeus Näyttäviä, toimivat huonosti pienessä koossa Aa Bodoni Esim. Bodoni, Didot, Walbaum Uustransitionaaliset (neotransitional) Siirtymäkauden antiikvoihin pohjaavia, helppolukuisia antiikvoja, muistuttavat Aa Excelsior muodoltaan clarendoneja, suuri x-korkeus Esim. Century, Excelsior, Cheltenham

19 Groteskit Perinteiset groteskit (gothic) Lähes tasavahva, voimakas, orgaaninen muoto, suurehko x-korkeus, Vakuuttavia, hyviä otsikkokäyttöön Aa Helvetica Esim. Helvetica, Arial, News Gothic, Univers Geometriset groteskit (geometric) Täysin tasavahvoja, geometrisiin perusmuotoihin pohjaavia, konstruoituja kirjaimia Näyttäviä, sopivat huonosti leipätekstiin Aa Futura Esim. Futura, Avant Garde

20 Groteskit (jatkoa edelliseltä sivulta) Humanistiset groteskit (humanist) Antiikvan muotokieleen pohjaavia päätteettömiä fontteja, suuri x-korkeus, lähes tasavahvoja Groteskeista luettavimpia, toimivat hyvin pienessäkin koossa; yleisesti ottaen ruutukäyttöön sopivimpia kaikista kirjaintyyleistä Esim. Frutiger, Verdana, Tahoma, Lucida, Aa Frutiger Aa Lucida Meta, FF Info, Myriad, Calibri, Candara, Corbel, Sanuk, Klavika (tässä esityksessä käytetty fontti)

21 Leikkaukset (weights/variants) Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa laiha (light, thin) normaali (regular, book, roman) puolilihava (semibold, demi, medium) lihava (bold) erikoislihava (extra bold, fat, black, heavy) Fontit muodostavat usein useasta eri leikkauksesta koostuvan kirjainperheen. Eri vahvuuksien ja pysty- ja kursiiviversioiden lisäksi perheeseen voi kuulua esimerkiksi päätteellinen ja päätteetön versio samasta kirjaintyylistä.

22 Leikkaukset (jatkoa edelliseltä sivulta) kavennettu (condensed) Aa Aa Aa Aa Aa normaali Aa Aa Aa Aa Aa levennetty (extended) Aa Aa Aa Aa Aa laiha normaali puolilihava lihava erikoislihava Groteskiperheeseen kuuluu usein myös eri levyisiä leikkauksia eri vahvuisten lisäksi.

23 Insinöörikursiivi ja -lihavointi (faux bold & italic) Aa Aa Aa normaali aito lihavointi aito kursiivi Aa Aa insinöörilihavointi insinöörikursiivi

24 Typografiset mittayksiköt 1 tuuma (2,54 mm) = 6 picaa = 72 pistettä (pt) ruudulla 1 piste = 1 pikseli 1p6 = 1 pica ja 6 pistettä = 18 pt em = vaakasuuntainen mitta, joka on yhtä suuri kuin keili (pistekoko); jos pistekoko on 12 pt, 2 em = 24 pt en = ¹ 2 em, m3 = ¹ 3 em; en dash on 1 en pituinen viiva (eli suomalainen ajatusviiva tai miinusmerkki), em dash on 1 em pituinen (pitkä ajatusviiva), yhdysmerkin/tavuviivan pituus on yleensä ¹ 4 em Leipätekstin pistekoko on 8 12 pt (ruudulla pt)

25 Riviväli Quousque tande abutere, Catilina riviväli (leading, line height) Pistekoko ja riviväli ilmaistaan usein näin: 120/132 pt Normaaliriviväli on pistekoko 1,2 pyöristettynä lähimpään puoleen pisteeseen. Eli 10 pt 12 pt, 12 pt 14,5 pt. Jos riviväli on pienempi kuin keili (pistekoko), sanotaan että rivivälistys (leading) on negatiivinen (esim. 24/20 pt).

26 Välistys Avoqlz Catilina Avoqlz Catilina Parivälistyksellä (kerning) pyritään siihen, että tekstistä syntyisi sellainen optinen vaikutelma, että jokaisen kirjainparin väliin jäävän tilan pinta-ala on sama. Välistyksellä (tracking, letter-spacing) säädetään kaikkien kirjainten välejä tiiviimmäksi tai harvemmaksi.

27 Sähköisen typografian erityispiireteitä Näytön tarkkuus on vain 72 dpi kun paperille painettuna resoluutio voi olla dpi. Ruudulla sopiva pistekoko on suurempi kuin paperilla. Suuri x-korkeus tekee tekstistä helppolukuisempaa. Päätteellinen teksti menee usein suttuiseksi pienessä koossa, ruudulla leipätekstiin sopii paremmin päätteetön. Leipätekstikoossa (n pt) ja sen alle kriittiseksi muodostuu fontin vihjeistys (hinting). Markkinoilla on vain kourallinen hyvin vihjeistettyjä fontteja.

28 Sähköisen typografian erityispiireteitä (jatkoa edelliseltä sivulta) www-sivuilla kannattaa välttää grafiikkaan upotettua tekstiä; käyttäjä saattaa käyttää esim. mobiiliselainta tai näkövammaisten päätelaitetta, tai haluaa vain hyödyntää leikepöydälle tekstin kopiointia. Käyttäjällä täytyy olla kaikki www-sivuilla käytettävät fontit asennettuna. Fonttien sisällyttäminen (embedding) www-sivuille ei yleensä ole tekijänoikeussyistä mahdollista. sifr-tekniikan avulla voi tätä rajoitusta kiertää otsikoissa.

29 Yleisesti asennetut fontit Safe list: Arial, Times New Roman, Verdana, Georgia, Courier New, Trebuchet MS, Impact, Comic Sans MS Lucida Sans ja Lucida Grande ovat pienessä koossa lähes identtiset ja löytyvät liki kaikista Windows ja Mac-koneista. Windowseissa esiasennettuna lisäksi: Tahoma, Lucida Console, Microsoft Sans Serif, Palatino Linotype Windows Vistassa ja Office 2007:ssä tulee mukana Calibri Vistassa lisäksi: Cambria, Candara, Consolas, Constantia, Corbel, Nyala, Segoe ui, Seoge Print, Segoe Script

30

31 4 Gridi

32 Mikä on gridi? Gridi on pinnanjaon menetelmä, jonka avulla luodaan helposti tasapainoinen vaikutelma. Palsta (column) = gridin pystysuora blokki Rivirekisteri (baseline grid) = tekstirivien peruslinja on tasassa, eri elementtien rivivälit ovat toistensa monikertoja.

33 Mikä on gridi? Gridi on pinnanjaon menetelmä, jonka avulla luodaan helposti tasapainoinen vaikutelma. Palsta (column) = gridin pystysuora blokki Rivirekisteri (baseline grid) = tekstirivien peruslinja on tasassa, eri elementtien rivivälit ovat toistensa monikertoja.

34 Gridin rakentaminen Gridin perusyksikkö on leipätekstin riviväli. Yleensä kaikki gridin jaot ovat rivivälin kertoimia. Jos riviväli on 12 pt, sopivia jakoja ovat siis esimerkiksi 24, 36, 48, 60 ja 72 pt. Rivirekisterin säilyttämiseksi leipätekstistä poikkeavien tekstikokojen (esim. otsikot), riviväli tulisi olla myös perusrivivälin kerroin. Lisäämällä tyhjää tilaa (padding) otsikon ympärille voidaan lisätä joustavuutta, esim. 12 pt ennen, riviväli 18 pt ja 6 pt jälkeen = yht. 36 pt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. Duis autem vel eum iriure Dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu.

35 Palstan muodot Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. vasen tasa, oikea liehu (flush left, ragged right) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. keskitetty (centered) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. oikea tasa, vasen liehu (flush right, ragged left) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. tasapalsta (justified) Koska selaimet eivät tue tavutusta, tasapalstan käyttöä ei suositella www-sivuilla. Suunnitteluvaiheessa palsta täytetään täytetekstillä (placeholder).

36 www-sivun gridin erityispiirteitä www-sivun gridi on pystysuunnassa elastinen; sisällön määrää ei voi ennakolta tietää, joten elementtien on pystyttävä skaalautumaan sisällön määrän mukaan. Toistensa suhteen pystysuunnassa skaalautuvien elementtien rakentaminen on hankalaa ilman taulukkotaittoa, joka ei ole suositeltava tapa rakentaa sivuja. Tästä syystä sivun varsinainen sisältö kannattaa yleensä pitää yhdessä palstassa ja käyttää muita palstoja vain navigaatioelementteihin yms.

37 5 Värit

38 Värijärjestelmät rgb Additiivinen, väri syntyy valoa sekoittamalla Perusvärit punainen, vihreä ja sininen Käytetään digitaalisessa ympäristössä cmyk Substraktiivinen, väri syntyy musteita sekoittamalla Perusvärit syaani, magenta, keltainen ja musta Käytetään painossa ja tulosteissa pms Spottivärijärjestelmä, värit valitaan listasta Sävyt sekoitetaan 14 pääväristä Käytetään erikoispainotöissä ja yritysväreinä Muita cie/lab, Hexachrome, Pantone Goe, Munsell...

39 Värijärjestelmät (jatkoa edelliseltä sivulta) rgb r 234 g 79 b 0 tai #ea4f00 osavärit = cmyk c 0 m 80 y 100 k 0 osavärit = pms pms 173 c = coated u = uncoated ec = Euro coated

40 Väriavaruus (gamut) Millään laitteella ei pystytä toisintamaan koko ihmissilmän havaitsemaa väriavaruutta. rgb- ja cmyk-avaruudet ulottuvat osittain toistensa ulkopuolelle. Muunnoksiin väriavaruudesta toiseen tarvitaan väriprofiileja. Suositeltava rgb-profiili: srgb y 0,9 0,8 0,7 0, ,5 0,4 0, , , rgb cmyk , ,0 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,8 x

41 Värien valinta Värien välillä on oltava riittävä valöörikontrasti, vastavärikontrasteja kannattaa sen sijaan välttää. Yleensä 2 3 pääväriä ja niiden eri sävyt on riittävä paletti. Harmonisen paletin koostamiseen on useita eri tapoja. Väreihin liitetyt symboliset merkitykset vaihtelevat kulttuurista toiseen. Varsinkin suunniteltaessa hyvin laajalle kohderyhmälle suunnattua sivua, tulee ottaa huomioon värisokeat. Suomalaisista miehistä 10 % kärsii värinäön puutteista.

42 5 Työprosessi

43 Tyypillisen www-sivun suunnitteluprosessin vaiheet 1. Määrittelyvaihe; selvitetään asiakkaan tarpeet ja päämäärät, tutustutaan kilpailijoihin jne. 2. Sisältö- ja rakennesuunnittelu; suunnitellaan sivuston sisältö ja sen jaottelu 3. Käyttöliittymäsuunnittelu; suunnitellaan käyttöliittymän perustelementit ja niiden sijoittelu 4. Graafinen suunnittelu 5. Sitebuilding; sivuston selainpään tekniikan toteutus 6. Integrointi ja käyttöönotto

44 Luovan suunnittelun vaiheet 1. Briefiin tutustuminen 2. Benchmarking; määritellään kilpailijat ja haetaan parhaiten onnistuneet vastaavat työt 3. Inspiraation haku; lähteinä voi käyttää esim. alan kirjoja, lehtiä, www-sivuja ym. 4. Luonnostelu; moodboardit, piirrokset, mockupit Lopullinen suunnittelu 6. Iterointi asiakkaan ja kollegojen palautteen perusteella 7. Viimeistely ja aineistojen valmistus; painokuntoon laitto, leiskan pilkkominen tms.

45 a Kirjallisuus

46 Yleisteoksia Philip B. Meggs. A History of Graphic Design. (Wiley, 1997) Edward R. Tufte. The Visual Display of Quantative Information. (Graphics Press, 1983). Envisioning Information. (Graphics Press, 1990). Visual Explanations: Images and Quantities, Evidence and Narrative. (Graphics Press, 1997). Beautiful Evidence. (Graphics Press, 2006)

47 Typografia Markus Itkonen. Typorafian käsikirja. (RPS-yhtiöt, 2003) Jarno Lukkarila. Tekstuuri: Typografia julkaisijan työvälineenä. (CredoNet, 2001) Robert Bringhurst. The Elements of Typographic Style. (Hartley & Marks, 1992) Gridi Josef Müller-Brockmann. Grid Systems in Graphic Design. (Arthur Niggli, 1981)

48 Kiitos! Juuso Koponen graafinen suunnittelija

Lue tämä Kauniaisten kaupunki -tunnusoriginaalien käytöstä

Lue tämä Kauniaisten kaupunki -tunnusoriginaalien käytöstä Lue tämä Kauniaisten kaupunki -tunnusoriginaalien käytöstä 1. 2. 2. Kauniaisten kaupungin tunnus Kauniaisten kaupunki -tunnuskokonaisuus muodostuu seuraavista osista: 1. Pelkästä Kauniaisten vaakunasta,

Lisätiedot

A a. A a. A a. A a. Kirjaintyylit ja -tyypit. TYPOGRAFIA turkuamk Visuaalinen viestintä. merja kärkkäinen 1

A a. A a. A a. A a. Kirjaintyylit ja -tyypit. TYPOGRAFIA turkuamk Visuaalinen viestintä. merja kärkkäinen 1 A a A a A a A a Kirjaintyylit ja -tyypit TYPOGRAFIA turkuamk Visuaalinen viestintä merja kärkkäinen 1 Mitä typografia on? Viestinnän muotoilua, joka toteutetaan pääasiassa erilaisia kirjapainollisia ja

Lisätiedot

TYPOGRAFIA 1.2.2016 WWW-VISUALISOINTI - IIM60110 - TYPOGRAFIA

TYPOGRAFIA 1.2.2016 WWW-VISUALISOINTI - IIM60110 - TYPOGRAFIA TYPOGRAFIA 1.2.2016 Kirjain on ylivoimaisesti useimmin nähtävä visuaalisen viestinnän väline Kirjainmuodot ja niiden kehitys ovat aina olleet tiiviisti yhteydessä käytettyihin kirjoitusmenetelmiin. Papyrus/ruokokynä,

Lisätiedot

Tunnus. Tiedosto: 4ctunnus.eps

Tunnus. Tiedosto: 4ctunnus.eps Tunnus Yleiset ohjeet Tunnus esiintyy aina tekstillisenä. Tunnuksen värit ovat identtiset EU-lipun värien kanssa. Värit: Pantone Reflex Blue ja Pantone Process Yellow ja neliväripainatuksessa seuraavasti:

Lisätiedot

Visuaalinen identiteetti. Graafinen ohjeistus

Visuaalinen identiteetti. Graafinen ohjeistus Visuaalinen identiteetti Graafinen ohjeistus MEDRIAN OY SISÄLTÖ 01 VÄRIT 04 02 03 3... CMYK ja RGB 4... HELPien värit TYPOGRAFIA 5... Ensisijainen fontti 6... Toissijainen fontti 7... WWW-sivut LOGO 8...

Lisätiedot

Tervetuloa yhteiskunta-alan visuaaliseen maailmaan

Tervetuloa yhteiskunta-alan visuaaliseen maailmaan Graafinen ohjeisto Tervetuloa yhteiskunta-alan visuaaliseen maailmaan Tämän oppaan tavoitteena on esitellä Yhteiskunta-alan korkeakoulutetut ry:n ilmeen perusasiat ja niiden kautta ohjata, kannustaa ja

Lisätiedot

AUTTAJIEN VERKOSTO. Graafinen ohjeisto CMY

AUTTAJIEN VERKOSTO. Graafinen ohjeisto CMY AUTTAJIEN VERKOSTO Graafinen ohjeisto CMY 1.1. VISUAALISEN ILMEEN PERUSELEMENTIT Tunnus Vapaaehtoisen pelastuspalvelun tunnus muodostuu sinisellä pohjalla olevasta valkoisesta risti- ja nuolikuviosta sekä

Lisätiedot

Ulkoasiainministeriö. Graafinen ohjeisto 1.6.2007

Ulkoasiainministeriö. Graafinen ohjeisto 1.6.2007 Ulkoasiainministeriö Graafinen ohjeisto 1.6.2007 Sisällysluettelo Johdanto 1. Tunnus 1.1 Tunnus 1.2 Suoja-alue 1.3 Tunnuksen koko ja osien suhteet 1.4 Tunnuksen esiintyminen ilman palkkia 1.5 Tunnus yhteistyömateriaaleissa

Lisätiedot

SOMMITTELU & WWW-LAYOUT WEB-VISUALISOINTI - TTMS0400.6S0V2

SOMMITTELU & WWW-LAYOUT WEB-VISUALISOINTI - TTMS0400.6S0V2 SOMMITTELU & WWW-LAYOUT 27.9.2016 Sivuston layoutin suunnittelu on sisältöelementtien välisten suhteiden määrittelyä. Sommittelu on kuvallisten elementtien järjestämistä mielekkääksi kokonaisuudeksi kuvapinnalla.

Lisätiedot

9=1 GRAAFINEN OHJEISTO

9=1 GRAAFINEN OHJEISTO 9=1 GRAAFINEN OHJEISTO TUNNUKSEN SUOJA-ALUE Tunnuksen käyttö eri materiaaleissa edellyttää suoja-aluetta sen ympärillä. Tämän alueen sisäpuolelle ei tulisi tekstiä*. Suoja-alueen koon määrittelystä voidaan

Lisätiedot

AP KIINTEISTÖPALVELUT

AP KIINTEISTÖPALVELUT AP KIINTEISTÖPALVELUT GRAAFINEN OHJEISTO PJG 21052012 AP KIINTEISTÖPALVELUT GRAAFINEN OHJEISTO Logo 4-6 Värimääritykset 7 Typografia 8-9 Yritysgrafiikka - Käyntikortti 10 - Kirjekuoret 11 - Lomakkeet 12-13

Lisätiedot

GRAAFINEN OHJEISTUS 1.0

GRAAFINEN OHJEISTUS 1.0 GRAAFINEN OHJEISTUS 1.0 Mainostoimisto Penbox 10-2015 TAIVASSALON LOGO Virallinen logo 2015 Taivassalon ilmeen keskeisin elementti on tunnus logotekstin yhteydessä. Yksimastoisesta purjelaivasta muodostuva

Lisätiedot

CSS. Tekstin muotoilua

CSS. Tekstin muotoilua CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight

Lisätiedot

Palvelun rakenne sekä sivumääritykset on työstetty toteutusprojektissa yhdessä Asiakkaan kanssa.

Palvelun rakenne sekä sivumääritykset on työstetty toteutusprojektissa yhdessä Asiakkaan kanssa. 500m - Palvelun kuvaus - vaihe Thu Feb 6 06 Palvelun kuvaus.. Käyttötarkoitus. Käyttörajoitukset Palvelun rakenne sekä sivumääritykset on työstetty toteutusprojektissa yhdessä Asiakkaan kanssa. Tarjottavan

Lisätiedot

Ohjeita noudattamalla ja soveltamalla luodaan yhtenäinen ilme kaikkiin säätiön materiaaleihin tunnuksesta sähköiseen viestintään asti.

Ohjeita noudattamalla ja soveltamalla luodaan yhtenäinen ilme kaikkiin säätiön materiaaleihin tunnuksesta sähköiseen viestintään asti. YLEISTÄ Graafisen ohjeiston tarkoitus on toimia tukivälineenä eri sidosryhmille sekä sisäisessä että ulkoisessa viestinnässä. Ohjeistossa on esitelty ohjein ja esimerkein Epilepsiatutkimussäätiön visuaalinen

Lisätiedot

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

TAMPEREEN SISU vuodesta d 1960 GRAAFINEN OHJEISTUS

TAMPEREEN SISU vuodesta d 1960 GRAAFINEN OHJEISTUS TAMPEREEN SISU vuodesta 1960 GRAAFINEN OHJEISTUS Sisällysluettelo LOGO Logo 3 Typografia. 5 Värit... 8 Lomakkeet 10 Kuvitus 12 - A KU UVITUS KEET LOMAKK TYPO GRAFI VÄRIT 2 LOGO TAMPEREEN SISU vuodesta

Lisätiedot

Kutsu Professoriluennot torstaina L U O N N O N T I E T E E L L I N E N T I E D E K U N TA

Kutsu Professoriluennot torstaina L U O N N O N T I E T E E L L I N E N T I E D E K U N TA Kutsu Professoriluennot torstaina 2.4.2011 L U O N N O N T I E T E E L L I N E N T I E D E K U N TA Ohjetekstit "Ohje" tasolla. Poista taso näkyvistä ennen tulostamista tai painoon lähettämistä pdf-muodossa.

Lisätiedot

Graafinen. ohjeistus

Graafinen. ohjeistus Graafinen ohjeistus 1/2015 A-Kiltojen Liitto ry Graafinen ohjeistus Tunnus, käyttö A-Kiltojen Liiton tunnuksen väri on vihreä. Tunnusta tulee pääasiallisesti käyttää valkoisella tai mahdollisimman vaalealla

Lisätiedot

EURAJOEN KUNTA GRAAFINEN OHJEISTO

EURAJOEN KUNTA GRAAFINEN OHJEISTO EURAJOEN KUNTA GRAAFINEN OHJEISTO 1 Sisällysluettelo 1 Logo 1 Logo s. 3 Eurajoen kunnan logo ammentaa visuaalista il- Värit ja suoja-alue s. 4 mettään ja väritystä merellisyydestä. Purje viestii Käyttö

Lisätiedot

Parasta Lapsille. Graafinen ohjeisto. päivitetty 2016

Parasta Lapsille. Graafinen ohjeisto. päivitetty 2016 Parasta Lapsille Graafinen ohjeisto päivitetty 2016 Logo Parasta Lapsille -logo on ollut jo vuosikymmenet samanlainen. Tämän graafisen ohjeiston yhteydessä 2014 logoon tehtiin pientä päivitystä linjoihin

Lisätiedot

Grisaille Graafinen opas

Grisaille Graafinen opas Sisällys Yritystunnuksen käyttö Yritystunnuksen käyttötapoja... 3 Esimerkkejä yritystunnuksen vääristä käyttötavoista... 4 Yritystunnuksen käyttö valokuvan kanssa... 5 Yritystunnuksen käyttö valokuvan

Lisätiedot

Brändi-identiteetin tyyliopas 2015

Brändi-identiteetin tyyliopas 2015 Brändi-identiteetin tyyliopas 2015 FI Kuva: David Lliff EPP-ryhmä Euroopan parlamentissa 60 Rue Wiertz 1047 Bryssel, Belgia Päätoimittaja Sisällys Johdanto... 2 Graafinen yhdenmukaisuus... 2 Yhtenäinen

Lisätiedot

Kirjasinleikkaukset ja fontit

Kirjasinleikkaukset ja fontit Kirjasinleikkaukset ja fontit 1 Fontti on merkki- ja symbolijoukko, jolla on erityinen malli. Tätä erityistä mallia kutsutaan kirjasinleikkaukseksi. Valitsemasi kirjasinleikkaukset lisäävät asiakirjaan

Lisätiedot

Logo 2

Logo 2 Graafinen ohje 2012 Logo 2 3 4 8 9 13 14 18 19 xx x x 25 Kaari 26 27 28 29 30 Värit 35 Pääväri Sininen 2 -väri Musta 3 -väri Vaaleansininen 4 -väri Valkoinen CMYK C90 M40 Y0 K0 CMYK C0 M0 Y0 K100 CMYK

Lisätiedot

Jämsän graafinen ilme on raikas, moderni ja keveä, mutta myös perinteisiin nojaava ja visuaalisesti aikaa kestävä ja klassinen.

Jämsän graafinen ilme on raikas, moderni ja keveä, mutta myös perinteisiin nojaava ja visuaalisesti aikaa kestävä ja klassinen. Graafinen ohjeisto Uuden yhdistyneen Jämsän yhtenäinen graafinen ilme vahvistaa omalta osaltaan kaupungin tunnettavuutta ja vetovoimaisuutta. Alueelta löytyy mielenkiintoista ja vahvaa historiaa, mutta

Lisätiedot

Tässä ei olla tekemässä taidetta vaan presentaatiota.

Tässä ei olla tekemässä taidetta vaan presentaatiota. AJATELTAVAA. Tässä ei olla tekemässä taidetta vaan presentaatiota. Portfolio on viestintää.. Portfoliolla on selkeä päämäärä. Oman osaamisen esiintuominen sekä tietenkin itsensä myyminen Te ette tee tätä

Lisätiedot

1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI...

1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI... GRAAFINEN OHJEISTO 1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 PÄÄLLEKKÄISVERSIO... 4 RINNAKKAISVERSIO... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI... 5

Lisätiedot

HAAGA-HELIA AVAA OVET TYÖELÄMÄÄN TUNNUS ESITTELY

HAAGA-HELIA AVAA OVET TYÖELÄMÄÄN TUNNUS ESITTELY GRAAFINEN OHJEISTUS HAAGA-HELIA AVAA OVET TYÖELÄMÄÄN TUNNUS ESITTELY Haaga-Helian graafinen ohjeisto linjaa sen, miltä näytämme ulospäin ja miten käytämme erilaisia graafisia elementtejä viestinnässä ja

Lisätiedot

GRAAFINEN OHJEISTUS. Ilves ry

GRAAFINEN OHJEISTUS. Ilves ry GRAAFINEN OHJEISTUS Ilves ry Copyright Ilves ry Versio 1.0 / Marraskuu 2015 YLEISTÄ Tämä ohjeistus on rakennettu ohjenuoraksi Ilves ry:n henkilökunnalle sekä kaikille urheiluseuran sidosryhmille, joilla

Lisätiedot

SISÄLLYS 1. YLEISTÄ VAAKUNA TUNNUKSET Puolangan logo Slogan TYPOGRAFIA VÄRIT

SISÄLLYS 1. YLEISTÄ VAAKUNA TUNNUKSET Puolangan logo Slogan TYPOGRAFIA VÄRIT Graafinen ohjeistus 28.10.2016 SISÄLLYS 1. YLEISTÄ... 3 2. VAAKUNA... 4 3. TUNNUKSET... 5 3.1. Puolangan logo... 5 3.2. Slogan... 6 4. TYPOGRAFIA... 7 5. VÄRIT... 8 6. GRAAFINEN ELEMENTTI... 9 7. SÄHKÖPOSTIN

Lisätiedot

1/2016 GRAAFINEN OHJEISTO

1/2016 GRAAFINEN OHJEISTO GRAAFINEN OHJEISTO 1.1.2016 1 Sisällys 1. Tunnus... 4 2. Värit... 5 3. Suoja-alue... 6 4. Typografia... 6 5. Käyntikortti... 7 6. Lomakkeisto... 8 7. Kirjekuoret... 9 8. PowerPoint... 10 9. Ilmoittelu...

Lisätiedot

GRAAFINEN OHJEISTO. Päivitetty:

GRAAFINEN OHJEISTO. Päivitetty: Päivitetty: 8.2.2016 Liikemerkki - vaaka Woikosken liikemerkki muodostuu aina tekstilogosta ja sen yhteydessä olevasta tunnuksesta. Liikemerkin muotoja tai niiden suhteita ei saa venyttää tai vääristää

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - tyylit. 13.11.2000 Seppo Räsänen CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot

Lisätiedot

Typografia Verkkomultimedia ICT1tn004. Elina Ulpovaara

Typografia Verkkomultimedia ICT1tn004. Elina Ulpovaara Typografia Verkkomultimedia ICT1tn004 Elina Ulpovaara Mitä on typografia? Tyyppikirjaimien suunnittelua, muotoja ja asettelua käsittelevä taiteen ja tieteen laji. Antaa julkaisusta ensivaikutelman. Suunnitellaan

Lisätiedot

GRAAFINEN OHJEISTO. Mainostoimisto Aada

GRAAFINEN OHJEISTO. Mainostoimisto Aada GRAAFINEN OHJEISTO Mainostoimisto Aada JOHDANTO 1. TUNNUS 1.1 Tunnukset 1.2 Suoja-alue & koot 1.3 Tunnuksen käyttö 1.4 Tiedostomuodot 2. VÄRIT 2.1 Värimaailma 3. TYPOGRAFIA JOHDANTO K & H Annala Oy on

Lisätiedot

ABMcomposite Graafinen ohjeisto 1.0

ABMcomposite Graafinen ohjeisto 1.0 Esipuhe Tämä kevyt graafinen ohjeisto antaa perusohjeet ABMcompositen visuaalisten elementtien käytöstä markkinointiviestinnässä. Eri viestintätilanteissa harkitusti ja johdonmukaisesti käytetty visuaalinen

Lisätiedot

Graafinen ohjeistus. Suomen evankelisluterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO

Graafinen ohjeistus. Suomen evankelisluterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO Graafinen ohjeistus Suomen evankelisluterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO 1 Sisällys 1. Johdanto Kenelle, missä, miten? 3 2. Tunnus Kirkon yhteinen tunnus on yhteinen nimittäjä 5 Miten

Lisätiedot

Sisällysluettelo. Esipuhe...2. Sisällysluettelo Tunnus Tunnuksen mittasuhteet ja suoja-alue Tunnuksen minimikoko...

Sisällysluettelo. Esipuhe...2. Sisällysluettelo Tunnus Tunnuksen mittasuhteet ja suoja-alue Tunnuksen minimikoko... Visual Manual 1 Esipuhe Pohjois-Karjala pyrkii pitkäjänteisillä ja johdonmukaisilla markkinointiviestinnän toimenpiteillä luomaan seudusta vahvan ja halutun brändin. Tavoitteena on rakentaa ja viestiä

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

Ulkopuolisen tyylitiedoston käyttö 1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit

Lisätiedot

Graafinen ohjeisto 13.1.2014

Graafinen ohjeisto 13.1.2014 Graafinen ohjeisto 13.1.2014 1. Logo 1.1 Logo Elon yritystunnus Elon logo kuvastaa elämän mittaista matkaa ja siirtymää työelämästä onnellisesti eläkkeelle. Toimiakseen Elon brändiä ja tarinaa vahvistavalla

Lisätiedot

GRAAFINEN OHJEISTUS. Graafinen ohjeisto

GRAAFINEN OHJEISTUS. Graafinen ohjeisto GRAAFINEN OHJEISTUS LOGO SLOGANILLA Elämän peruspilarit Tunnus kokonaisuutena kuvaa vahvaa I-kirjainta viitaten Iisalmen kaupungin nimeen. Logon kantava idea tulee Koljonvirran pohjassa säilyneistä alkuperäisen

Lisätiedot

HTML:n perusteet. Jari Sarja / Otavan Opisto 2012. Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.

HTML:n perusteet. Jari Sarja / Otavan Opisto 2012. Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3. HTML:n perusteet Jari Sarja / Otavan Opisto 2012 Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.0 -lisenssillä 1 11. Sivuston taittaminen HTML:n avulla Sivuston taittaminen tarkoittaa

Lisätiedot

Työ- ja elinkeinoministeriö Neuvonta- ja ohjauspalvelujen kehittämisprojekti NUOVE (ESR 2008-2011):

Työ- ja elinkeinoministeriö Neuvonta- ja ohjauspalvelujen kehittämisprojekti NUOVE (ESR 2008-2011): Työ- ja elinkeinoministeriö Neuvonta- ja ohjauspalvelujen kehittämisprojekti NUOVE (ESR 2008-2011): Elinikäinen ohjaus Keski-Uudellamaalla 13.10.2011 Projektisuunnittelija Jaana Puuronen Neuvonta- ja ohjauspalvelujen

Lisätiedot

Saatteeksi. OAJ:n graafisesta ilmeestä antaa tarvittaessa lisätietoa OAJ:n viestintäosasto.

Saatteeksi. OAJ:n graafisesta ilmeestä antaa tarvittaessa lisätietoa OAJ:n viestintäosasto. Graafinen ohjeisto 2 3 Sisältö 5 Saatteeksi Saatteeksi Tämän graafisen ohjeiston tarkoituksena on 6 Tunnus 7 Tunnuksen vaakaversio ja sloganversio 8 Tunnuksen väriversiot 9 Tunnuksen tiedostomuodot 10

Lisätiedot

TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT GRAAFINEN OHJEISTO 2016

TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT GRAAFINEN OHJEISTO 2016 TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT GRAAFINEN OHJEISTO 2016 TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT 2 SISÄLTÖ Saatteeksi... 3 Tullin tunnus... 4 Tullin tunnusvaihtoehdot... 5 Tullin

Lisätiedot

SISÄLLYSLUETTELO

SISÄLLYSLUETTELO ETELÄ- KARJALA 1 SISÄLLYSLUETTELO 13.11.2015 // BRÄNDI...3 // VÄRIT...6 // TUNNUS...9 // TYPOGRAFIA...18 // KUVATYYLI...23 // GRAAFISET TEEMAT...27 // SOVELLUKSET...31 // LOMAKKEISTO...43 // SÄHKÖINEN

Lisätiedot

Visuaalinen ilme (luonnos)

Visuaalinen ilme (luonnos) Työterveys Helsinki Visuaalinen ilme (luonnos) 24.11.2015 1 Työterveys Helsingin ilmeessä sovelletaan Helsingin kaupungille luotuja visuaalisen ilmeen elementtejä uudella kuosilla, tunnuksella ja väripaletilla

Lisätiedot

Kaakkois-Suomen ammattikorkeakoulun opiskelijakunta. Graafinen ohjeisto

Kaakkois-Suomen ammattikorkeakoulun opiskelijakunta. Graafinen ohjeisto Kaakkois-Suomen ammattikorkeakoulun opiskelijakunta Graafinen ohjeisto 1 Sisällys Tunnus 3 Tunnuksen suoja-alueet 4 Tunnuksen käyttö 5 Värit 6 7 Kaakkolennokit 8 Sovellukset Käyntikortit 9 Asiakirjapohja

Lisätiedot

Tiera Pöytäkirja 6/ (7) Testilautakunta Aika , klo 22:49-22:52. Käsitellyt asiat

Tiera Pöytäkirja 6/ (7) Testilautakunta Aika , klo 22:49-22:52. Käsitellyt asiat Tiera Pöytäkirja 6/2016 1 (7) Aika 21.06.2016, klo 22:49-22:52 Paikka A1 Käsitellyt asiat 27 Kokouksen laillisuus ja päätösvaltaisuus 28 Pöytäkirjan tarkastus 29 Viranhaltijoiden päätösten otto-oikeus

Lisätiedot

WASAGROUP» GRAAFINEN OHJEISTO 2. GRAAFISET ELEMENTIT...5 Tekstuuri... 5 Raita... 5 Flat Design... 5 Kerrokset... 6

WASAGROUP» GRAAFINEN OHJEISTO 2. GRAAFISET ELEMENTIT...5 Tekstuuri... 5 Raita... 5 Flat Design... 5 Kerrokset... 6 GRAAFINEN OHJEISTO WASAGROUP» GRAAFINEN OHJEISTO 2 SISÄLLYS LOGOT...3 Värit... 3 Asemointi... 3 VÄRIT...4 Värit logoissa... 4 Värit taustalla ja pinnoilla... 4 Sävyt... 4 Oikea väritila oikeassa ympäristössä...

Lisätiedot

Someron kaupunki Graafinen ohjeisto

Someron kaupunki Graafinen ohjeisto Someron kaupunki Graafinen ohjeisto Someron kaupunki 2 Graafinen ohjeisto SOMERON KAUPUNGIN GRAAFINEN OHJEISTO Graafisen ohjeiston tavoitteena on varmistaa että kaupungin sisäisen ja ulkoisen viestinnän

Lisätiedot

GRAAFINEN OHJEISTO. Logo ja merkki Typografia Visuaaliset elemenit. Matkailualan tutkimus- ja koulutusinstituutti GRAAFINEN OHJEISTO

GRAAFINEN OHJEISTO. Logo ja merkki Typografia Visuaaliset elemenit. Matkailualan tutkimus- ja koulutusinstituutti GRAAFINEN OHJEISTO GRAAFINEN OHJEISTO Logo ja merkki Typografia Visuaaliset elemenit Matkailualan tutkimus- ja koulutusinstituutti JOHDANTO Yhtenäinen ja laadukas visuaalinen ilme auttaa erottumaan, helpottaa viestintää

Lisätiedot

Suomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015

Suomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015 Suomi Finland 100 -tunnus Graafinen ohjeisto Lokakuu 2015 Tunnus Tämä on Suomen itsenäisyyden satavuotisjuhlavuoden tunnus perusmuodossaan. Se on juhlavuoden visuaalisen ilmeen arvokkain elementti, jota

Lisätiedot

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti

Lisätiedot

Graafinen ohjeisto 21.01.2013

Graafinen ohjeisto 21.01.2013 Graafinen ohjeisto 21.01.2013 Tunnus Kansallisen digitaalisen kirjaston asiakasliittymä Finna on arkistojen, kirjastojen ja museoiden yhteinen helppokäyttöinen verkkopalvelu. Finna-palvelu auttaa käyttäjiä

Lisätiedot

Graafinen ohjeisto (27.6.2013)

Graafinen ohjeisto (27.6.2013) Graafinen ohjeisto (27.6.2013) Merkki Logotyyppi Alateksti Tunnus Lapin AMK:n tunnus koostuu kolmesta osasta: logotyypistä (Lapin AMK -teksti), merkistä ja englanninkielisestä alatekstistä. Tunnuksen minimileveys

Lisätiedot

TEKIN VISUAALINEN OHJEISTUS

TEKIN VISUAALINEN OHJEISTUS TEKIN VISUAALINEN OHJEISTUS VISUAALINEN OHJEISTUS Visuaalinen ilme on osa TEKin brändiä. Visuaalinen ilme symboloi organisaatiota, vahvistaa tavoiteltuja mielikuvia, lisää näkyvyyttä ja erottuvuutta. Ulkoisille

Lisätiedot

TILASTOKESKUKSEN GRAAFINEN OHJE

TILASTOKESKUKSEN GRAAFINEN OHJE TILASTOKESKUKSEN GRAAFINEN OHJE 2.0 2015 SISÄLTÖ ESIPUHE 3 1 PERUSELEMENTIT 1.1 Tunnus 4 1.1.1 Tunnuksen suoja-alue 5 1.1.2 Tunnuksen käyttö 6 1.1.3 Tunnusoriginaalihakemisto 7 1.2 Värit 8 1.3 Typografia

Lisätiedot

HTML5 -elementit jatkuu

HTML5 -elementit jatkuu HTML5 -elementit jatkuu Harjoitus: xhtml.htm -> html5.htm Muuta tämä xhtml dokumentti HTML5:ksi: http://users.metropolia.fi/~norrm/s12/kalasu/xhtml.htm Validoi myös koodisi: http://validator.w3.org/ "Mallivastaus"

Lisätiedot

POHJOIS-POHJANMAAN LIITTO Council of Oulu Region GRAAFINEN OHJEISTO

POHJOIS-POHJANMAAN LIITTO Council of Oulu Region GRAAFINEN OHJEISTO GRAAFINEN OHJEISTO Sisällys 1. TUNNUS 3 1.1 Tunnuksen piirtäminen 3 1.2 Typografia 4 1.3 Värimääritykset 4 1.4 Tunnuksen sijoittelu 5 1.5 Suoja-alue 5 1.6 Minimikoko 5 1.7 Käyttö värillisellä pohjalla

Lisätiedot

G R A A F I N E N O H J E I S T O

G R A A F I N E N O H J E I S T O GRAAFINEN OHJEISTO LOGO IDEA 2 Siun sote tehdään, koska asioiden täytyy muuttua. Siun sote on uudenlaisen yhteistyön tulos. Hyviä palveluita ei väännetä rautalangasta vaan ne tehdään yhdessä. Siksi Siun

Lisätiedot

GRAAFINEN OHJEISTUS 2017

GRAAFINEN OHJEISTUS 2017 GRAAFINEN OHJEISTUS 2017 SISÄLLYS JOHDANTO... 3 LOGO.... 4 VÄRIT.... 5 MUUT GRAAFISET ELEMENTIT... 6 KUVAT & VÄRIT.... 7 TYPOGRAFIA.... 8 LATAA TIEDOSTOT................... 9 2 JOHDANTO Tervetuloa tutustumaan

Lisätiedot

Xamk Brändi-identiteetti. Copyright Mainostoimisto Ilme 2016

Xamk Brändi-identiteetti. Copyright Mainostoimisto Ilme 2016 Xamk Brändi-identiteetti Copyright Mainostoimisto Ilme 2016 Mikkeli Kouvola Savonlinna Kotka Tunnuksessa on nähtävissä neljä eri paikkakunnilla sijaitsevaa kampusta, jotka muodostavat kivijalan kaikelle

Lisätiedot

Oiva Akatemia Graafinen ohje 2008

Oiva Akatemia Graafinen ohje 2008 Oiva Akatemia Graafinen ohje 2008 Alustava 19.11.2008 Oiva Akatemia Graafinen ohje 2008 2 (10) 1 Markkinointitunnus Oiva Akatemian markkinointitunnus muodostuu tyylitellyistä oranssista O- ja harmaasta

Lisätiedot

Ohjeita informaation saavutettavuuteen

Ohjeita informaation saavutettavuuteen Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea

Lisätiedot

Vakiofontit. Fonttien esittely. Tulostaminen. Värien käyttäminen. Paperinkäsittely. Huolto. Vianmääritys. Ylläpito. Hakemisto

Vakiofontit. Fonttien esittely. Tulostaminen. Värien käyttäminen. Paperinkäsittely. Huolto. Vianmääritys. Ylläpito. Hakemisto Vakiofontit Tulostimessa on valmiina vakiofontteja, jotka on tallennettu pysyvästi tulostimen muistiin. PCL 6- ja PostScript 3 -emulointeja varten on erilaisia fontteja. Jotkin yleisimmät kirjasinleikkaukset,

Lisätiedot

Graafinen ohjeisto. Päivitetty tammikuussa 2015

Graafinen ohjeisto. Päivitetty tammikuussa 2015 Graafinen ohjeisto Päivitetty tammikuussa 2015 Sisällys Sisällys Esipuhe Liikemerkki ja logo Värit korteille ja kirjepohjalle Typografia Fontit korteille ja kirjepohjalle Kirje- ja esityspohja Käyntikorttipohjat

Lisätiedot

Graafinen ohjeisto.

Graafinen ohjeisto. Graafinen ohjeisto www.finfami.fi Sisällys Graafinen ohjeisto FinFami Sisällys 1 Tunnus 3 1.1 Tunnuksen esittely 3 1.2 Tunnuksen minimikoko 4 1.3 Tunnuksen suoja-alue 4 1.4 Alatunnukset 1.5 Tunnuksen eri

Lisätiedot

DIGI PRINT. Aineistovaatimukset ja aineiston siirto

DIGI PRINT. Aineistovaatimukset ja aineiston siirto DIGI PRINT Aineistovaatimukset ja aineiston siirto Glass Jet - Digitaalipainotekniikka Tulostettavan kuvan maksimikoko 2400 x 4000 mm. 6 perusväriä ja hiekkapuhallusta jäljittelevä etch-väri. Väreistä

Lisätiedot

Graafinen Ohjeisto Pastorpuvun markkinointimateriaalin tekijöille

Graafinen Ohjeisto Pastorpuvun markkinointimateriaalin tekijöille Graafinen Ohjeisto Pastorpuvun markkinointimateriaalin tekijöille VERSIO 1.0 Sisältö ALKUSANAT 4 PUVUN GRAAFINEN ILME 5 TUNNUS 6 TUNNUKSEN VERSIOT 7 TUNNUKSEN MITTASUHTEET 8 TUNNUKSEN VÄRIT 9 TUNNUKSEN

Lisätiedot

RATA-SM -sarjan graafinen ohjeistus Alkusanat Kuvapankki

RATA-SM -sarjan graafinen ohjeistus Alkusanat Kuvapankki GRAAFINEN OHJEISTUS RATA-SM -sarjan graafinen ohjeistus Tähän ohjeeseen on koottu RATA-SM -sarjan ulkoisessa ja sisäisessä viestinnässä käytettävien materiaalien ulkoasua koskevat ohjeet. Tärkeää on muistaa

Lisätiedot

2. Graafi nen yrityskuva

2. Graafi nen yrityskuva 2. Graafi nen yrityskuva 2.1. Näin käytät tunnisteita 2.2. Liikemerkki / logo ja sen suhteet 2.3. Logon ja sloganin suoja-alueet 2.4. Logon käyttö 2.5. Typografi a 2.6. Värit TULIKIVI OYJ:N GRAAFINEN YRITYSKUVA

Lisätiedot

1. Sommitelman on sijaittava sivun keskellä sekä vastattava tilauksessa ilmoitettuja mittoja;

1. Sommitelman on sijaittava sivun keskellä sekä vastattava tilauksessa ilmoitettuja mittoja; Digitaalinen alkuperäisversio on komposiitti-pdf, joka on tehty PDF/X- 1a:2001 -versiolla sekä Acrobat Distillerillä. Tilauksen mukaisesti joko CMYK:llä tai CMYK+SPOT -väreillä (PANTONE). Ohjeita ja suosituksia

Lisätiedot

Hai uoto. luokseen kutsuva loistokunta. Graafinen ohjeisto

Hai uoto. luokseen kutsuva loistokunta. Graafinen ohjeisto Graafinen ohjeisto 1 Sisällys Esipuhe 3 Tunnus 4 Versiot 5 Käyttö 9 Vaakuna 10 Värit 11 Typografia 12 Graafiset elementit 13 Lomakepohjat 14 Vaakunalla 14 Markkinointitunnuksella 15 Kirjekuoret ja käyntikortit

Lisätiedot

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård CSS selectorit Elementti HTML CSS otsikko h1 { color: pink; Luokka HTML CSS

Lisätiedot

Typografia Verkkomultimedia ICT1tn004. Mitä on typografia?

Typografia Verkkomultimedia ICT1tn004. Mitä on typografia? Typografia Verkkomultimedia ICT1tn004 13.9.2009 Elina Ulpovaara Mitä on typografia? Tyyppikirjaimien suunnittelua, muotoja ja asettelua käsittelevä taiteen ja tieteen laji. Antaa julkaisusta ensivaikutelman.

Lisätiedot

Rovaniemen kaupungin graafinen käsikirja lyhennetty versio

Rovaniemen kaupungin graafinen käsikirja lyhennetty versio Rovaniemen kaupungin graafinen käsikirja lyhennetty versio 1.0 11.10.2005 Rovaniemen graafisen käsikirjan käyttötarkoitus Rovaniemen kaupungin yhtenäinen visuaalinen ilme määrittää kaupungin ulkoisen identiteetin,

Lisätiedot

Tämän värilaatuoppaan tarkoitus on selittää, miten tulostimen toimintoja voidaan käyttää väritulosteiden säätämiseen ja mukauttamiseen.

Tämän värilaatuoppaan tarkoitus on selittää, miten tulostimen toimintoja voidaan käyttää väritulosteiden säätämiseen ja mukauttamiseen. Sivu 1/7 Värilaatuopas Tämän värilaatuoppaan tarkoitus on selittää, miten tulostimen toimintoja voidaan käyttää väritulosteiden säätämiseen ja mukauttamiseen. Laatu-valikko Tulostustila Väri Vain musta

Lisätiedot

Tietokonegrafiikan perusteet

Tietokonegrafiikan perusteet Tietokonegrafiikan perusteet Kuvamallit Koordinaattijärjestelmät Ihmisnäön ominaisuudet Grafiikkalaitteisto Abstrakti kangas Piirtäminen Teksti Leikkaaminen Väri Petri Vuorimaa 1 Kuvamallit Kuvien esittämiseen

Lisätiedot

Used with permission of Microsoft. Kulttuurihistoria Syyskuu 2015

Used with permission of Microsoft. Kulttuurihistoria Syyskuu 2015 MUOTOSEIKKOJA Mitä asetuksia käytän? Tyypillisimpiä fontteja ovat Times New Roman (fonttikoko 12) tai Arial (fonttikoko 11). Käytä riviväliä 1,5, jotta asettelu on selkeä ja teksti on myös tältä osin helppolukuista.

Lisätiedot

Caruna graphic guidelines

Caruna graphic guidelines Caruna graphic guidelines 16.06.2014 Caruna visual identity The Caruna visual identity and logo are designed to visually share positive energy. The identity is alive, social and full of color. The visual

Lisätiedot

raafinen ohjeisto 2011 TIIVI Brand Book 2011 Sivu 1

raafinen ohjeisto 2011 TIIVI Brand Book 2011 Sivu 1 raafinen ohjeisto 2011 TIIVI Brand Book 2011 Sivu 1 GRAAFINEN OHJEISTO Visuaalisuus on tärkeä osa yrityksen brändiä. Oikean viestin välittäminen vaatii selkeät pelisäännöt, jotka löydät tästä osiosta.

Lisätiedot

KOMISSION DELEGOITU ASETUS (EU) N:o /, annettu XXX,

KOMISSION DELEGOITU ASETUS (EU) N:o /, annettu XXX, EUROOPAN KOMISSIO Bryssel 18.2.2013 C(2013) 818 final Osa 3/6 KOMISSION DELEGOITU ASETUS (EU) N:o /, annettu XXX, Euroopan parlamentin ja neuvoston direktiivin 2010/30/EY täydentämisestä vedenlämmittimien,

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

Lisätiedot

TuUL graafinen ohjeistus GRAAFINEN OHJEISTUS. päivitetty

TuUL graafinen ohjeistus GRAAFINEN OHJEISTUS. päivitetty GRAAFINEN OHJEISTUS päivitetty 2.2.2016 Turun Urheiluliiton logo Turun Urheiluliiton logo yhdistettynä kolmiomerkkiin Turun Urheiluliiton tunnus Turun Urheiluliitto -tunnuksen muodostaa logon Ja merkin

Lisätiedot

LAITTEEMME NOUDATTAVAT SEURAAVIA VÄRIASETUKSIA: Euroopan PMS-kirjastot Coated FOGRA39 ja Uncoated FOGRA29 Mustavalko Gray Gamma 2.

LAITTEEMME NOUDATTAVAT SEURAAVIA VÄRIASETUKSIA: Euroopan PMS-kirjastot Coated FOGRA39 ja Uncoated FOGRA29 Mustavalko Gray Gamma 2. LAITTEISTOMME M&P PAINOSSA KÄYTÖSSÄMME OVAT SEURAAVAT OHJELMAT: Adobe Photoshop CS6 Adobe InDesign CS6 Adobe Illustrator CS6 Adobe Acrobat Pro Adobe Distiller Microsoft Word Microsoft Excel Microsoft Powerpoint

Lisätiedot

Keskusta. Graafinen perusohje

Keskusta. Graafinen perusohje Graafinen perusohje Ilmeen tehtävänä on pitää viestintä selkeänä ja arvokkaana, vailla turhanpäiväisiä sirkustemppuja. Ilme palvelee sisältöä antamalla tilaa ajatuksille tekemällä painavasta asiasta kevyttä

Lisätiedot

Äänekosken Juniorijalkapallo

Äänekosken Juniorijalkapallo Äänekosken Juniorijalkapallo Graafinen ohjeistus 1 graafinen ohjeistus Sisällysluettelo Äänekosken Juniorijalkapallo -vaakunalogo 3 Äänekosken Juniorijalkapallo -tekstilogo 4 Logojen et ja koot 5 Värielementit

Lisätiedot

InDesign CS FreeHand MX. Painovalmis materiaali PDF

InDesign CS FreeHand MX. Painovalmis materiaali PDF InDesign CS FreeHand MX Painovalmis materiaali PDF Miksi PDF? 1. Työnkulku nopeutuu 2. Työn tulostus toimii varmemmin 3. Fontit ovat tiedostossa mukana 4. Kuvat ovat tiedostossa mukana 5. Usein tiedostokoko

Lisätiedot

CSS - tekstit. Tyylisivut

CSS - tekstit. Tyylisivut CSS - tekstit Sisällys: Tyylien käyttö Tekstit: Fontit, värit, korostukset Tasaus, välistykset ICT01D 28.11.2005 Elina Ulpovaara Tyylisivut Tyylisivut on dokumentin esitysasua koskeva ehdotus, joka on

Lisätiedot

Grafiikka julkaisuun. Tietohallintokeskus Markku Könkkölä Sisällys

Grafiikka julkaisuun. Tietohallintokeskus Markku Könkkölä Sisällys Grafiikka julkaisuun Tietohallintokeskus Markku Könkkölä 7.4.2011 Sisällys Kuva tietokoneella Kaaviot ja piirrokset vektorimuodossa Vektorigrafiikan muokkaus (InkScape, Illustrator ) Valokuvat bittimuodossa

Lisätiedot

Kirjaintyypin valinnasta

Kirjaintyypin valinnasta Kirjaintyypin valinnasta 3 ITC Bauhaus (1975) Universal (1925) 4 esimerkki: Dokumentin utopiat Suomalaisen dokumentti- ja lyhytelokuvan historia 1944 1989. sks 2015. 5 Kuvituksen tyyli 6 Aluksi: antiikva

Lisätiedot

SISÄLLYS JOHDANTO 2 NÄIN SIVUSTOSI VALMISTUU 2 SISÄLLÖNTUOTTAJAN OHJE 3

SISÄLLYS JOHDANTO 2 NÄIN SIVUSTOSI VALMISTUU 2 SISÄLLÖNTUOTTAJAN OHJE 3 SISÄLLYS JOHDANTO 2 NÄIN SIVUSTOSI VALMISTUU 2 SISÄLLÖNTUOTTAJAN OHJE 3 VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 7 1. Sisään kirjautuminen 7 2. Sivut 7 3. Tiedotteet 9 4. Sisältöeditorin toiminnot 10 5.

Lisätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda

Lisätiedot

Sami Uusikylä YRITYSILMEEN SUUNNITTELU JA TOTEUTUS: Milaja Design

Sami Uusikylä YRITYSILMEEN SUUNNITTELU JA TOTEUTUS: Milaja Design Sami Uusikylä YRITYSILMEEN SUUNNITTELU JA TOTEUTUS: Milaja Design Opinnäytetyö CENTRIA-AMMATTIKORKEAKOULU Mediatekniikan koulutusohjelma Lokakuu 2015 TIIVISTELMÄ OPINNÄYTETYÖSTÄ Yksikkö Aika Tekijä/tekijät

Lisätiedot

Väitöskirjan kansien suunnittelu

Väitöskirjan kansien suunnittelu Väitöskirjan kansien suunnittelu Ohje koskee Lapin Yliopistopainossa painettavia julkaisuja. Väittelijä toimittaa tarvittavat tiedot tekijälle sähköisenä: - julkaisun nimi - acta sarjan numero sekä ISBN

Lisätiedot

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ennen kuin aloitat: 1. Asenna tietokoneeseesi ilmainen Miso Regular fontti, jonka saat täältä: https://www.fontspring.com/fonts/marten- nettelbladt/miso

Lisätiedot

Graafinen ohjeisto Opintokeskus Siviksen

Graafinen ohjeisto Opintokeskus Siviksen Graafinen ohjeisto Opintokeskus Siviksen visuaalinen ilme on yhteisön identiteettiä rakentava ja selkeyttävä tekijä. Ilme heijastaa yhteisöä ja sen tavoitteita nyt ja tulevaisuudessa. Ville Tietäväinen,

Lisätiedot

jäsenapteekkien tunnus

jäsenapteekkien tunnus Suomen Apteekkariliiton jäsenapteekkien tunnus graafinen ohje 1.0 24.2.2005 Tunnus...2 Tunnuksen väri...3 Tunnuksen asettelu...4 Tunnus ja tekstityyppi...5 Tunnuksen ja nimilogon yhdistäminen...6 Tähän

Lisätiedot