DESIGNMANUAL DIGITAL

Transkript

1 DESIGNMANUAL DIGITAL

2 Januar 2016

3 INDHOLD INDLEDNING 5 1. ELEMENTER LOGOER Primære logoer Sekundære logoer FARVER 9 Farver, Global 9 Farver, Kanal 4 9 Farver, 6 eren 9 Farver, Kanal 5 9 Farver, Canal FONT Brandon Discovery Tisa Sans KVADRATER Størrelse Farver Blending modes, transparens og farve STYLE GUIDE LOGO Primært logo Sekundært logo Placering af logo TEKST Headings, font og farve Headings, størrelsesforhold Placering, Heading 1 og Placering, Heading 3 og Heading Speciel Copy 20

4 2.3 KVADRATER Farver, blending modes og transparens Placering GRID Headings i Grid Kvadrater og logo i Grid Eksempel på placering i Grid INSTRUKTION PHOTOSHOP DIGITAL ANNONCE Versalhøjde Heading Grid Størrelser på Headings Størrelser på tekstfelter Placer logo Lav kvadrater Bestem farve, Blending Mode og transparens SOCIALE MEDIER Versalhøjde Heading 1 Strap Grid Størrelser på Headings Størrelser på tekstfelter Placer logo Lav kvadrater Bestem farve, Blending Mode og transparens ANIMATION To regvler EKSEMPLER Annoncer Facebook billede Facebook video Facebook coverbillede Twitter coverbillede Youtube coverbillede 48 KONTAKT 49

5 INDLEDNING Designmanualen viser og beskriver identitetens elementer. Da forholdet mellem de forskellige elementers størrelse og placering er meget væsentligt for udtrykket, er beskrivelsen af elementerne omfattende. I afsnit 3 Instruktion Photoshop er der en gennemgang af, hvordan man mest effektivt bygger sit dokument op. Ønskes en lignende gennemgang til InDesign henvises til SBS_Designmanual_Print_2015. Der er løbende gennem manualen og i afsnit 5 Eksempler vist forskellige layouts. Kombinationen af beskrivelsen af elementerne og disse eksempler skulle gerne give et fyldestgørende indblik i identiteten. For yderligere informationer se afsnittet Kontakt s. 45.

6 1. Elementer 6/49 1. ELEMENTER 1.1 Logoer Primære logoer Sekundære logoer 1.2 Farver 1.3 Font Brandon Text Tisa Sans 1.4 Kvadrater Størrelse Farver Blending modes, transparens og farve

7 1. Elementer 7/ LOGOER Logoerne skal altid gengives ubeskåret og i sin originale form. Det er ikke tilladt at ændre på farver eller proportioner Primære logoer Det primære logo er det, der også bruges on air. De primære logoer findes i ensfarvede versioner i henholdsvis 100% sort og 100% hvid, der hovedsageligt bruges i corporate sammenhænge, hvor logoerne indgår sammen med SBS Discovery s øvrige kanallogoer. Kanal 4 PRIMÆRT LOGO K4_RGB SOLIDE VERSIONER K4_RGB_SolidBlack K4_RGB_SolidWhite Kanal 5 PRIMÆRT LOGO K5_RGB SOLIDE VERSIONER K5_RGB_SolidBlack K5_RGB_SolidWhite 6'eren PRIMÆRT LOGO K6_RGB SOLIDE VERSIONER K6_RGB_SolidBlack K6_RGB_SolidWhite Canal 9 PRIMÆRT LOGO K9_RGB SOLIDE VERSIONER K9_RGB_SolidBlack K9_RGB_SolidWhite

8 1. Elementer 8/ LOGOER Sekundære logoer Det sekundære logo har tilføjet logotype og bruges kun, når det optræder i fremmed miljø, hvor en tydelig afsenderinformation er nødvendig. Det sekundære logo findes i to versioner: en med sort og en med hvid tekst. De sekundære logoer findes i ensfarvede versioner i henholdsvis 100% sort og 100% hvid, der hovedsageligt bruges i corporate sammenhænge, hvor logoerne indgår sammen med SBS Discovery s øvrige kanallogoer. Kanal 4 SEKUNDÆRE LOGOER K4_RGB_Logotype_Black K4_RGB_Logotype_White SOLIDE VERSIONER K4_RGB_Logotype_SolidBlack K4_RGB_Logotype_SolidWhite Kanal 5 SEKUNDÆRE LOGOER K5_RGB_Logotype_Black K5_RGB_Logotype_White SOLIDE VERSIONER K5_RGB_Logotype_SolidBlack K5_RGB_Logotype_SolidWhite 6'eren SEKUNDÆRE LOGOER K6_RGB_Logotype_Black K6_RGB_Logotype_White SOLIDE VERSIONER K6_RGB_Logotype_SolidBlack K6_RGB_Logotype_SolidWhite Canal 9 SEKUNDÆRE LOGOER K9_RGB_Logotype_Black K9_RGB_Logotype_White SOLIDE VERSIONER K9_RGB_Logotype_SolidBlack K9_RGB_Logotype_SolidWhite

9 1. Elementer 9/ FARVER Hver kanal har en farvepalette bestående af 5 farver. Tre farver er fælles for alle kanaler Global Yellow, Global Light og Global Dark. Derudover har hver kanal en primær og en sekundær farve. Farver, Global GLOBAL YELLOW HEX: DF D0 30 RGB: GLOBAL LIGHT HEX: EB EB EB RGB: GLOBAL DARK HEX: RGB: Farver, Kanal 4 Farver, Kanal 5 K4 PINK 1 HEX: D8 1E 5E RGB: K4 PINK 2 HEX: 8b RGB: K5 RED 1 HEX: E RGB: K5 RED 2 HEX: 9D 1C 1F RGB: Farver, 6 eren Farver, Canal 9 K6 BLUE 1 HEX: 1E 75 B9 RGB: K6 BLUE 2 HEX: C RGB: K9 GREEN 1 HEX: RGB: K9 GREEN 2 HEX: RGB:

10 1. Elementer 10/ FONT Brandon Discovery Black og Medium er den primære skrift og bruges til al on air information samt alle væsentlige budskaber off air. Brandon Discovery skrives altid i versaler Brandon Discovery I AFTEN BRANDON DISCOVERY BLACK BRANDON DISCOVERY MEDIUM BRANDON DISCOVERY BLACK GREY S HVIDE VERDEN BRANDON DISCOVERY BLACK ABCDEFGHIJKLMNO PQRSTUVWYZÆØÅ BRANDON DISCOVERY MEDIUM ABCDEFGHIJKLMNO PQRSTUVWXYZÆØÅ

11 1. Elementer 11/ FONT Tisa Sans bruges til længere tekst off air Tisa Sans TISA SANS LIGHT TISA SANS LIGHT ITALIC TISA SANS REGULAR TISA SANS ITALIC TISA SANS MEDIUM TISA SANS MEDIUM ITALIC TISA SANS BOLD TISA SANS BOLD ITALIC I andet afsnit af Det Perfekte Match I andet afsnit af Det Perfekte Match I andet afsnit af Det Perfekte Match I andet afsnit af Det Perfekte Match I andet afsnit af Det Perfekte Match I andet afsnit af Det Perfekte Match I andet afsnit af Det Perfekte Match I andet afsnit af Det Perfekte Match TISA SANS REGULAR AaBbCcDdEeFfGgHh IiJjKkLlMmNnOoPp QqRrSsTtUuVvWw XxYyZzÆæØøÅå

12 1. Elementer 12/ KVADRATER Ud over kanallogo og font bruges farvede kvadrater som et væsentligt identitetselement. Kvadraterne findes i tre størrelse og tre farver pr. kanal. Når kvadraterne bruges oven på billedmateriale bruges blending modes og transparens Størrelse str. 1 str. 2 str. 3 forhold mellem størrelser Farver KANAL 4 KANAL 5 6 EREN CANAL 9 K4 PINK 1 K4 PINK 2 GLOBAL YELLOW K5 RED 1 K5 RED 2 GLOBAL YELLOW K6 BLUE 1 K6 BLUE 2 GLOBAL YELLOW K9 GREEN 1 K9 GREEN 2 GLOBAL YELLOW Blending modes, transparens og farve Kvadraterne skal være en af følgende kombinationer af Blending Mode, Opacity og farve: Kvadrater str. 1: Blending mode: Normal Opacity: 100% Farve: Kanalfarve 1, Global Yellow Kvadrater str. 2 og 3: Blending mode: Multiply Opacity: 100% Farve: Kanalfarve 1+2, Global Yellow Blending mode: Normal Opacity: 85% Farve: Kanalfarve 1+2, Global Yellow

13 2. Styleguide 13/49 2. STYLE GUIDE 2.1 Logo Minimumstørrelse og respektafstand Primært logo Sekundært logo Placering af det primære logo 2.2 Tekst Headings, font og farve Headings, størrelsesforhold Placering, Heading 1 og Placering, Heading 3 og Heading Speciel Copy 2.3 Kvadrater Farver, blending modes og transparens Placering 2.4 Grid Headings i Grid Kvadrater og logo i Grid Eksempel på placering i Grid

14 2. Styleguide 14/ LOGO MINIMUMSTØRRELSE OG RESPEKTAFSTAND Primært logo Logostørrelse afhænger af griddet beskrevet på s Minimumstørrelse for det primære logo er bredde = 25 px. 25 px 6,25 px 6,25 px 6,25 px MINIMUMSSTØRRELSE Bredde = 25 px. RESPEKTAFSTAND Respektafstand for fremmede elementer er logo bredde/4. Respekt afstanden gælder ikke for kvadraterne (se s. 13). Kvadrat erne kan altså røre logoet dog kun hjørne til hjørne. FORKERT De to kvadrater rammer logoet placeringen skal være hjørne mod hjørne Sekundært logo Minimumstørrelse for det sekundære logo er bredde = 40 px. 40 px 10 px 10 px 20 px MINIMUMSSTØRRELSE Bredde = 40 px. RESPEKTAFSTAND Respektafstand for fremmede elementer er: I toppen og siderne = Logobredde/4. I bunden = Logobredde/2 fra kassens bund. I toppen gælder respekt afstanden ikke for kvadraterne (se s. 13). Kvadraterne må altså godt røre logoet i toppen dog kun hjørne til hjørne. FORKERT Øverste, venstre kvadrat rammer logoet placeringen skal være hjørne mod hjørne. Nederste kvadrat bryder respektafstanden.

15 2. Styleguide 15/ LOGO Placering af logo Nedenfor vises de tre almindelige placeringer af logoet. PRIMÆR PLACERING ANNONCER Logoet placeres normalt i øverste, højre hjørne og går til kant. Denne placering spejler den mest almindelige brug af identiteten på print og bruges til digitale annoncer. PRIMÆR PLACERING SOCIALE MEDIER Logoet placeres i venstre side med rubrik (strap) føjet til. Denne placering spejler identiteten on air og bruges på sociale medier. ALTERNATIV PLACERING Annonce og opslag uden billede. Her er logoet det centrale element og har derfor en central placering.

16 2. Styleguide 16/ TEKST Al væsentlig information placeres i farvede felter. Der er fem former for headings: Heading 1, Heading 2, Heading 3, Heading Speciel 1 og Heading Speciel 2. De to sidstnævnte bruges meget sjældent, da tre Headings som regel vil være nok Headings, font og farve Typisk programtitel Brandon Text Black Tekstfarve: Global Light Feltfarve: Kanalfarve 1 HEADING 1 Rubrik sociale medier. Altid i forbindelse med kanallogo Brandon Text Black Tekstfarve: Global Light Feltfarve: Kanalfarve 2 Opacity: 85% H 1 STRAP Typisk programundertitel Brandon Text Regular Tekstfarve: Global Light Feltfarve: Kanalfarve 1 HEADING 2 Typisk sendetidspunkt Brandon Text Black Tekstfarve: Kanalfarve 1 Feltfarve: Global Light HEADING 3 Typisk Se trailer el. lign. Altid i forbindelse med playknap Brandon Text Black Tekstfarve: Global Light Feltfarve: Kanalfarve 2 Opacity: 85% Særlig information Brandon Text Black Tekstfarve: Global Dark Feltfarve: Global Light Brandon Text Regular Tekstfarve: Global Dark Feltfarve: Global Light HEADING 3 STRAP HEADING SPECIEL 1 HEADING SPECIEL 2

17 2. Styleguide 17/ TEKST Headings, størrelsesforhold For at sikre konsistens mellem alle headings bestemmes alle størrelser ud fra Heading 1. Enheden H1/10 ( ) bruges som vist nedenfor. 6 6 HEADING 1 + STRAP Versalhøjden deles med 10. Tekstfeltet = 20. Margin, top og bund = 5. Margin, højre og venstre = HEADING HEADING 2 Felt = 14. Tekst = 6. Margin, top og bund = 4. Margin, højre og venstre = HEADING 2 14 HEADING 3 + STRAP Felt = 14. Tekst = 6. Margin, top og bund = 4. Margin, højre og venstre = HEADING 3 14 HEADING SPECIEL 1 Størrelser er lig Heading 2. Teksten og tekstfeltet er roteret og vredet 15 (læs mere s. 38). HEADING SPECIEL 2 Størrelser er lig Heading 3. Teksten og tekstfeltet er roteret og vredet 15 (læs mere s. 38). HEADING SPECIEL 1 15 HEADING SPECIEL

18 2. Styleguide 18/ TEKST Placering, Heading 1 og 2 Heading 1 og 2 hænger sammen i ét tekstfelt. Heading 2 kan dog skubbes horisontalt. Begge Headings er venstrestillet. HEADING 1 FLERE LINJER Har Heading 1 flere linjer, skal versal højden på følgende linjer svare til bunden af foregående linjes tekstfelt. HEADING 1 2 LINJER HEADING 2 Heading 2 placeres i forlængelse af Heading 1, så versalhøjden svarer til bunden af Heading 1 s tekstfelt. Heading 2 kan skubbes horisontalt i forhold til Heading 1 i afstande af 10. HEADING 1 HEADING 2 HEADING 1 HEADING 2 10 HEADING 2 FLERE LINJER Har Heading 2 flere linjer, skal versal højden på følgende linjer svare til bunden af foregående linjes tekstfelt. Bemærk, at linjerne kan skubbes horisontalt uafhængigt af hinanden altid i afstande af 10. HEADING 1 HEADING 2 2 LINJER

19 2. Styleguide 19/ TEKST Placering, Heading 3 og Heading Speciel Heading 3 er altid højrestillet og placeres i bunden af formatet. Heading Speciel placeres i toppen af formatet og kan både være venstre- og højrestillet. HEADING 3 FLERE LINJER Har Heading 3 flere linjer, skal versal højden på følgende linjer svare til bunden af foregående linjes tekstfelt. HEADING 3 2 LINJER HEADING SPECIEL 1 FLERE LINJER Har Heading Speciel flere linjer, skal versal højden på følgende linjer svare til bunden af foregående linjes tekstfelt. Heading 2 kan skubbes horisontalt i forhold til Heading 1 i afstande af 10. HEADING SPECIEL 2 Heading Speciel 2 placeres i forlængelse af Heading Speciel 1, så versalhøjden svarer til bunden af Heading Speciel 1 s tekstfelt. Heading Speciel 2 kan skubbes horisontalt i forhold til Heading 1 i afstande af 10. Har Heading Speciel 2 flere linjer, skal versal højden på følgende linjer svare til bunden af foregående linjes tekstfelt HEADING SPECIEL 1 2 LINJER HEADING SPECIEL 1 HEADING SPECIEL 2 2 LINJER

20 2. Styleguide 20/ TEKST Copy Større tekstmængder skrives med Tisa Sans. Placeres teksten på et billede kan den med fordel sættes på farvet baggrund. Baggrunden kan have en af de to kanalfarver eller Global Light, Global Dark og Global Yellow. Sort tekst Kan man overhovedet se det, hvis ens perfekte match står lige for øjnene af en? Det er den opgave 20 udvalgte singler står over for, når Oliver Bjerrehuus beder dem om at finde deres perfekte match. Singlerne griber det vidt forskelligt an og allerede i første program, oplever de, hvor store følelser, der kan opstå, når huset vælger at teste det par, som alle er enige om er Det perfekte match. Baggrundsfarve: Primær Kanalfarve (K6 Blue 1) Kan man overhovedet se det, hvis ens perfekte match står lige for øjnene af en? Det er den opgave 20 udvalgte singler står over for, når Oliver Bjerrehuus beder dem om at finde deres perfekte match. Singlerne griber det vidt forskelligt an og allerede i første program, oplever de, hvor store følelser, der kan opstå, når huset vælger at teste det par, som alle er enige om er Det perfekte match. Baggrundsfarve: Global Dark Kan man overhovedet se det, hvis ens perfekte match står lige for øjnene af en? Det er den opgave 20 udvalgte singler står over for, når Oliver Bjerrehuus beder dem om at finde deres perfekte match. Singlerne griber det vidt forskelligt an og allerede i første program, oplever de, hvor store følelser, der kan opstå, når huset vælger at teste det par, som alle er enige om er Det perfekte match. Baggrundsfarve: Global White Kan man overhovedet se det, hvis ens perfekte match står lige for øjnene af en? Det er den opgave 20 udvalgte singler står over for, når Oliver Bjerrehuus beder dem om at finde deres perfekte match. Singlerne griber det vidt forskelligt an og allerede i første program, oplever de, hvor store følelser, der kan opstå, når huset vælger at teste det par, som alle er enige om er Det perfekte match.

21 2. Styleguide 21/ KVADRATER Farver, blending modes og transparens På s. 13 blev kvadraternes farver, blending modes og transparens kort beskrevet: Eksemplerne til højre viser farverne for Canal 9. KVADRAT STR. 1 Kanalfarve 1 eller Global Yellow Blending Mode: Normal Opacity: 100% KVADRAT STR. 2 OG 3 Kanalfarve 1, 2 eller Global Yellow Blending Mode: Multiply Opacity: 100% eller Blending Mode: Normal Opacity: 85%

22 2. Styleguide 22/ KVADRATER Placering Kvadraterne kan placeres frit i forhold til hinanden. For at skabe bevægelse, kan man dog med fordel placere dem i relation til hinanden evt. så de rammer hinanden hjørne mod hjørne. Fro at skabe dynamik i billedet kan de med fordel placeres i et begrænset område på formatet. Kvadraterne må ikke ligge oven på hinanden med følgende undtagelse: Det mindste kvadrat (str. 1) må ligge oven på de større kvadrater dog: Skal kvadraterne placeres hjørne mod hjørne De to kvadrater skal være samme farvetone. Dvs, at hvis kvadrat str. 1 er kanalfarve 1, skal det større kvadrat være enten kanalfarve 1 eller 2. Hvis kvadrat str. 1 er Global Yellow skal det større kvadrat også være Global Yellow. Kvadrat str. 2 eller 3 skal have gennemsigtighed (Blending Mode: Multiply eller Opacity: 85%) Kvadraterne ligger bagved teksten. KORREKT Kvadraterne overlapper ikke hinanden bortset fra kvadrat str. 1, der overlapper større, transparente kvadrater med samme farve, og er placeret hjørne mod hjørne. FORKERT 1. Det gule kvadrat str. 1 er placeret på et grønt kvadrat. 2. Det gule kvadrat str. 3 bliver overlappet af det grønne kvadrat. 3. Det grønne kvadrat str. 1 er ikke placeret hjørne mod hjørne på kvadrat str. 3. Kvadrat str. 3 har desuden kanalens sekundære farve.

23 2. Styleguide 23/ GRID Headings i Grid Alle formater opdeles i et grid til placering af elementer. Griddet inddeles efter Heading 1 s versalhøjde således, at versalhøjden svarer til et felt i griddet (de sorte streger i eksemplerne herunder). Griddet kan herefter med fordel deles i 2 (de røde streger).heading 1 placeres, så øverste venstre hjørne af tekstfeltet er placeret i griddet. Heading 3 placeres, så øverste højre hjørne af tekstfeltet er placeret i griddet. Heading Speciel placeres så enten øverste højre eller venstre hjørne af tekstfeltet er placeret i griddet. Afhængigt af antal linjer vil bunden af tekstfelterne ikke nødvendigvis passe ind i griddet. HEADINGS I GRID Heading 1 s versalhøjde svarer til 1 felt i griddet. Tekstfeltet svarer til 2 felter. Øverste venstre hjørne placeres i griddet. HEADING 1 Heading 1 og Heading 2 s tekstfelter svarer til sammen til 3 gridfelter eller 6 felter, hvis griddet er yderligere delt (de røde streger). HEADING 1 HEADING 2 Heading 3 s tekstfelt er magen til Heading 2 s tekstfelt og fylder næsten 1,5 gridfelt. Øverste højre hjørne placeres i griddet. HEADING 3 Heading Speciel placeres så enten øverste venstre eller højre hjørne af tekstfeltet passer i griddet. HEADING SPECIEL 1

24 2. Styleguide 24/ GRID Kvadrater og logo i Grid Kvadraterne (se s. 13 og 22) og logo placeres altid i griddet (bemærk, at griddet her vises uden inddeling). KVADRATER I GRID Kvadrat str. 1 svarer til 1 gridfelt. Kvadrat str. 2 svarer til 4 gridfelter. Kvadrat str. 3 svarer til 16 gridfelter. LOGO I GRID Størrelsen af logo afhænger af medie og format, men som hoved regel skal logoet have samme størrelse som kvadrat str. 3 (16 gridfelter). Logoet må ikke være mindre end kvadrat str. 3. Er logoet større, findes næste mulige logostørrelse ved at lægge kvadrat str. 2 til i bredde og højde. Altså: 4x4 gridfelter (16) = Kvadrat str. 3 6x6 gridfelter (36) 8x8 gridfelter (48) 10x10 gridfelter (100)

25 2. Styleguide 25/ GRID Eksempel på placering i Grid Formatet er inddelt i kvadrater, svarende til versalhøjden på Heading 1. Griddet begynder i øverste højre hjørne, og går ikke nødvendigvis op i formatet, da nogle formater ikke går op i et kvadratisk grid. De viste eksempler er 300x250 px. Her går griddet op i bredden, mens de nederste gridfelter bliver beskåret. LOGO Logoet er placeret i øverste højre hjørne og går til kant. Logoet er 16 gridfelter samme som kvadrat str. 3. KVADRATER Kvadraterne er alle placeret i griddet. Kvadraterne er placeret under tekstfelterne og bliver derfor beskåret af disse. Kvadrat str. 1 = 1 gridfelt. Kvadrat str. 2 = 4 gridfelter. Kvadrat str. 3 = 16 gridfelter. HEADING 1 OG 2 Heading 1 er venstrestillet. Heading 1 s tekstfelts øverste venstre hjørne er placeret i griddet. Heading 2 er placeret i direkte forlængelse af Heading 1, men skubbet horisontalt med 2 gridfelter (20 ). HEADING 3 Heading 3 er placeret i bunden, højrestillet og går til kant. Heading 3 s tekstfelts øverste højre hjørne er placeret i griddet. Her er Heading 3 samme størrelse som Heading 2. HEADING SPECIEL 1 Heading Speciel 1 er venstrestillet og går til kant. Tekstfeltets øverste venstre hjørne er placeret i griddet. Linje 2 er skubbet horisontalt med 2 gridfelter (20 ).

26 3. Instruktion Photoshop 26/49 3. INSTRUKTION PHOTOSHOP 3.1 Digital annonce Versalhøjde Heading Grid Størrelser på Headings Størrelser på tekstfelter Placer logo Lav kvadrater Bestem farve, Blending Mode og transparens 3.2 Sociale medier Versalhøjde Heading Grid Størrelser på Headings Størrelser på tekstfelter Placer logo Lav kvadrater Bestem farve, Blending Mode og transparens

27 3. Instruktion Photoshop 27/ DIGITAL ANNONCE I Photoshop laves tekstfelterne på et lag for sig, der lænkes til tekstfeltet. Fremgangsmåden, der beskrives i detaljer i det følgende, er: Lav Swatches. Se farvekoderne på s Find passende versalhøjde for Heading Ud fra Heading 1 s versalhøjde laves et Grid. 3. Bestem størrelsen på de øvrige Headings ud fra Griddet. 4. Lav tekstfelterne til alle Headings. 5. Placer og skaler logoet ud fra Griddet. 6. Lav og placer kvadrater ud fra Griddet. 7. Bestem Blending Modes og transparens for kvadraterne.

28 3. Instruktion Photoshop 28/ Versalhøjde Heading 1 Egnet størrelse afhænger af format og indhold. I eksemplet her er taget udgangspunkt i en annoncestørrelse på 300x250 px Grid Griddet skal (tilnærmelsesvis) gå op i formatets bredde, så det vil ofte være nødvendigt at justere versalhøjden efter følgende. I eksemplet er Griddet sat til 15 px. hvilket går op i bredden på 300 px. Til gengæld bliver nederste gridfelter kraftigt beskåret. Den røde streg viser den manglende gridstreg på formatet.

29 3. Instruktion Photoshop 29/ Størrelser på Headings Ud fra størrelserne beskrevet på s. 18 kan de øvrige Headings laves. Se størrelsesforholdene mellem alle Headings på s. 17. Forholdene er som følger: Heading 1 s versalhøjde = 15 px Grid = 15 px En måleenhed ( ) = 1,5 px Heading 2, 3 og Speciel = 9 px (1,5 x 6)

30 3. Instruktion Photoshop 30/ Størrelser på tekstfelter Højden på tekstfelterne laves med Rectangle Tool ud fra størrelserne beskrevet på s. 17. Bredden bestemmes af selve tekstens bredde + 6 i hver ende altså 12 i alt. Bredden på teksten kan findes ved at Cmd- /Ctrl-klikke på tekstikonet i Layers Palette. Størrelsen kan herefter aflæses i Info Palette, og det endelige pixelmål skrives ind i Options, hvor man også vælger den rigtige farve. Tekstfeltet og tekstlaget kan centreres med hinanden i Align Palette. Forholdene er som følger: Heading 1 s versalhøjde = 15 px Grid = 15 px En måleenhed ( ) = 1,5 px Tekstfelt Heading 1: Højde = 30 px (1,5 x 20) Bredde = Teksten + 18 px (1,5 x 12) Tekstfelt Heading 2, 3 og Speciel: Højde = 21 px (1,5 x 14) Bredde = Teksten + 18 px (1,5 x 12) Heading Speciel skal desuden roteres og vrides -15 (vælg Transform og skriv -15 i Options felterne for Rotate og Horisontal Skew).

31 3. Instruktion Photoshop 31/ Placer logo Logoet placeres og skaleres. Vær opmærksom på, at Rulers i Photoshop skal begynde ved logoets øverste højre hjørne, så griddet passer med logoet. I eksemplet passer griddet med logoet allerede, da griddet går op i bredden (30 / 300 px). Hvis det ikke er tilfældet, er det vigtigt at flytte griddet, så alle elementer placeres i forhold til logoet. Logoet placeres i øverste højre hjørne og fylder 16 gridfelter. Griddet passer med logoet.

32 3. Instruktion Photoshop 32/ Lav kvadrater Kvadraterne laves i de tre størrelser, der er beskrevet på s. 13 og s Bestem farve, Blending Mode og transparens Vælg farve, Blending Mode og transparens for kvadraterne, som beskrevet på s. 13 og 22. Kvadraterne placeres som beskrevet på s. 23. Forholdene er som følger: Grid = 15 px Kvadraterne laves i størrelserne: Str. 1 = 15x15 px Str. 2 = 30x30 px Str. 3 = 60x60 px Alle elementer er nu lavet og kan flyttes rundt til et passende layout. Hvis nogle Headings har mere end én linje, skal linjerne placeres i forhold til hinanden som beskrevet på s Vær opmærksom på, at tekstfeltet fra første linje dækker over toppen af bogstaver i den anden linje. Tekstfelterne skal derfor placeres under tekstlagene.

33 3. Instruktion Photoshop 33/ SOCIALE MEDIER I Photoshop laves tekstfelterne på et lag for sig, der lænkes til tekstfeltet. Fremgangsmåden, der beskrives i detaljer i det følgende, er: Lav Swatches. Se farvekoderne på s Find passende versalhøjde for Heading Ud fra Heading 1 s versalhøjde laves et Grid. 3. Bestem størrelsen på de øvrige Headings ud fra Griddet. 4. Lav tekstfelterne til alle Headings. 5. Placer og skaler logoet ud fra Griddet. 6. Lav og placer kvadrater ud fra Griddet. 7. Bestem Blending Modes og transparens for kvadraterne.

34 3. Instruktion Photoshop 34/ Versalhøjde Heading 1 Strap Egnet størrelse afhænger af format og indhold. I eksemplet her er taget udgangspunkt i et billede på 504x504 px Grid Griddet skal (tilnærmelsesvis) gå op i formatets bredde, så det vil ofte være nødvendigt at justere versalhøjden efter følgende. I eksemplet er Griddet sat til 20 px. hvilket ikke går op i bredden og højden på 504 px.

35 3. Instruktion Photoshop 35/ Grid ved billedcollager Ved billedcollager er det vigtigt, at griddet forholder sig til billedernes beskæring, så kvadraterne kan placeres i skæringslinjen mellem billederne. Det betyder, at griddet flyttes, så det passer med overgangen mellem billederne. Ved mere end to billeder skal hver billedbeskæring passe i grid et, hvilket kan betyde, at de ikke bliver lige brede. TODELT COLLAGE Billedet er 640x640 px og griddet er 30 px. For at kvadraterne understreger skæringslinjen mellem de to billeder, er griddet centreret, hvilket gør, at de yderste gridfelter i hver side er mindre end 30 px. Det betyder, at logoet har mere luft i toppen end i venstre side. TREDELT COLLAGE Billedet er 640x640 px og griddet er 30 px. For at kvadraterne understreger skæringslinjerne mellem de tre billeder, er griddet også her centreret og beskæringerne mellem billederne er placeret på en gridstreg. Det betyder, at det midterste billede er lidt bredere end de to yderste.

36 3. Instruktion Photoshop 36/ Størrelser på Headings Ud fra størrelserne beskrevet på s. 18 kan de øvrige Headings laves. På denne type billeder vil man ofte kun bruge Heading 1 Strap til rubrikken og Heading 3 til tidspunkt eller anden information. Se størrelsesforholdene mellem alle Headings på s. 17. Forholdene er som følger: Heading 1 s versalhøjde = 20 px Grid = 20 px En måleenhed ( ) = 2 px Heading 1 = 20 px Heading 2 og 3 = 12 px (2 x 6)

37 3. Instruktion Photoshop 37/ Størrelser på tekstfelter Højden på tekstfelterne laves med Rectangle Tool ud fra størrelserne beskrevet på s. 7. Bredden bestemmes af selve tekstens bredde + 6 i hver ende altså 12 i alt. Bredden på teksten kan findes ved at Cmd- /Ctrl-klikke på tekstikonet i Layers Palette. Størrelsen kan herefter aflæses i Info Palette, og det endelige pixelmål skrives ind i Options, hvor man også vælger den rigtige farve. Tekstfeltet og tekstlaget kan centreres med hinanden i Align Palette. Forholdene er som følger: Heading 1 s versalhøjde = 20 px Grid = 20 px En måleenhed ( ) = 2 px Tekstfelt Heading 1 Strap/Heading 1: Højde = 30 px (2 x 20) Bredde = Teksten + 24 px (2 x 12) Tekstfelt Heading 2 og 3: Højde = 21 px (2 x 14) Bredde = Teksten + 24 px (2 x 12)

38 3. Instruktion Photoshop 38/ Placer logo Logoet placeres i griddet i dokumentets øverste venstre hjørne med luft ud til kanten. Heading 1 Strap er placeret umiddelbart efter logoet. Logoet placeres i øverste venstre hjørne og fylder 4 gridfelter. Griddet passer med logoet. Heading 1 Strap placeres umiddelbart efter logoet.

39 3. Instruktion Photoshop 39/ Lav kvadrater Kvadraterne laves i de tre størrelser, der er beskrevet på s. 13 og s Bestem farve, Blending Mode og transparens Vælg farve, Blending Mode og transparens for kvadraterne, som beskrevet på s. 13 og 22. Kvadraterne placeres som beskrevet på s. 23. Forholdene er som følger: Grid = 20 px Kvadraterne laves i størrelserne: Str. 1 = 20x20 px Str. 2 = 40x40 px Str. 3 = 80x80 px Alle elementer er nu lavet og kan flyttes rundt til et passende layout. Hvis nogle Headings har mere end én linje, skal linjerne placeres i forhold til hinanden som beskrevet på s Vær opmærksom på, at tekstfeltet fra første linje dækker over toppen af bogstaver i den anden linje. Tekstfelterne skal derfor placeres under tekstlagene.

40 4. Animation 40/49 4. ANIMATION 4.1 To regler

41 4. Animation 41/ To regler For digitale bannere med animationer og øvrige formater, der har mulighed for bevægelse, gælder de samme regler som for on air-grafikken. Der er kort fortalt to grundlæggende regler for bevægelse: 1. Kvadrater skal fade langsomt af og på. 2. Tekst og tekstfelter wiper samtidigt på vertikalt (fra top til bund). I øvrigt henvises til designmanualen SBS_Designmanual_OnAir_2015.

42 5. Eksempler 42/49 5. EKSEMPLER 5.1 Annoncer 5.2 Sociale medier Facebook billede Facebook video Facebook coverbillede Twitter coverbillede YouTube coverbillede

43 5. Eksempler 43/ Annoncer Øverst: Annonce 300x250 px Kanal 4 og Kanal 5. I midten: Ejerskab rundt om site. Nederst: Branding af kanal i fremmed miljø.

44 5. Eksempler 44/ Facebook billede Eksempler på billeder til Facebook. Øverst logoplacering, der spejler on air identitet. Øverst til højre billede med lang tekst. Nederst eksempel på coverbillede til Facebook. Bemærk, at kanal-logo ikke optræder i billedet, da det bruges som profilbillede. Kanal 4. Layout med to billeder. Primær information som H1 Strap og tidspunkter som H3. Kanal 5. Hovedinformation som H1 Strap, sekundær information som H1 og H2 og tertiær information som H3 og i tekstboks. 6 eren. Layout med tre billeder. Primær information som H1 Strap og sekundær information som H1 og H2. Canal 9. Layout uden billede. Central placering af up-scale logo. Primær information som H1, sekundær information som H2 og tertiær information som H3.

45 5. Eksempler 45/ Facebook video Eksempler på placering af undertekster og afmelding på videoklip. Videoklip med undertekster. Videoklip med afmelding.

46 5. Eksempler 46/ Facebook coverbillede Den væsentlige del af motivet i et Facebook coverbillede skal centreres, da siderne skæres af ved visning på telefon. Derudover bør man undgå at placere væsentlige elementer i den nederste tredje del, der dels indeholder tekst og ikoner og dels bliver gradvist mørkere på telefon en. Tekst skal holdes på et minimum og helst helt undgås. Øverst: coverbillede i desktop-beskæring. I midten: coverbillede i mobile-beskæring. Nederst: coverbillede med tekst i både desktop- og mobile-beskæring.

47 Designmanual / Digital Twitter coverbillede Coverbilledet på Twitter er responsivt og beskæres vertikalt afhængigt af skærm- og browserstørrelse. Derudover skaleres billedet op, så der forsvinder ca. 110 px i hver side. Den væsentlige del af motivet skal derfor placeres midt i billedet. Ovenfor ses et coverbillede lavet i format 1500x421 px. Nedenunder ses coverbilledet uploadet på Twitter. Ca. 110 px er forsvundet i hver side, mens beskæringen i top og bund afhænger af skærm/browser-størrelse. 5. Eksempler 47/49

48 Designmanual / Digital Youtube coverbillede Coverbilleder til Youtube skal laves i 2560x1440 px, hvis det skal kunne fungere optimalt på TV. På desktop, tablet og mobile kommer der dog en voldsom beskæring, så det kan være svært at finde egnede billeder. Ovenfor ses et coverbillede lavet i format 2560x1440 px. Nedenunder ses coverbilledet i beskæring på tablet. 5. Eksempler 48/49

49 Kontakt 49/49 KONTAKT Craig Jonathan Kristensen Motion Graphics Designer Discovery Networks Denmark ApS Mail: Mobil: