13
TYPOGRAFI OMBRYDNING Af Susan Helany og Tanja Krone

Typografi, Ombrydning

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Typografi, Ombrydning

TYPO

GRAF

IOM

BRYD

NING

Af Susan Helany og Tanja Krone

Page 2: Typografi, Ombrydning

2BRUHN GRAFISK HÅNDVÆRK APS

FØR VI GÅR I GANGKunden her er Natasha Krone, som skulle bruge et design til sin E-bog om hendes 8-ugers kostplan. Det var et kardinalpunkt i bogen, at den skulle kunne læses både på skærm, og i udprintet version. Med hensyn til skrift og udseende, så var der en del opskrifter der ikke var billede tilhørende, så der skulle teksten kunne tale for sig selv.

OPGAVEBESKRIVELSEOpgaven går ud på at producere E-bogen. Udleveret materiale bestod af manus og billeder leveret på Dropbox.

HVAD VAR MIT BIDRAG TIL OPGAVEN?At sammensætte produktet, ved at ombryde teksten og designe det visuelle udtryk.

VALG AF PROGRAMAdobe Bridge, Adobe InDesign CC og Adobe Photoshop CC

SPECIFIKATIONER• Fremgangsmåde: Bearbejdelse af billeder > Bearbejdelse af tekst > Opsætning af standardside >• Originalfil: Manuskript.txt.,

FARVERFarverne der skulle tages i brug, var primært lysegrønne, da der skulle være fokus på de sunde, naturlige ingre-dienser (grøntsager, frugt etc).

AKTØRERGrafiker (mig selv), Kunde

Page 3: Typografi, Ombrydning

3BRUHN GRAFISK HÅNDVÆRK APS

Nicklas Ben Rasmussen Portfolio // Typografi og ombrydning

49

8ugerskostplan(Til dig der vil tabe dig på en sund og stabil måde)

LAKSEWRAP4 personer

Ingredienser4 stykker laks

4 fuldkornspandekager

2 avocado

citronsaft

1 salathoved

2 tomater

2 forårsløg

2 dl majs

MetodeSteg laksestykkerne på en pande. Mens laksen steger, udstenes avokadoerne og skæres i tern. Vend

ternene i citronsaft. Herefter snittes salaten og forårsløgene og tomaterne skæres i tern. Varm pandeka-

gerne og fyld dem med grøntsager og laks. Retten kan serveres med en god salsa, fromage frais og grøn

salat efter eget valg.

59

8ugerskostplan(Til dig der vil tabe dig på en sund og stabil måde)

VANILJEDESSERT 3 personer

Ingredienser 200g hytteost

200g fromage frais eller skyr

Korn fra en vaniljestang

Evt. 2 tsk. honning

250-300g frosne hindbær

Metode• Kog hindbærerne op i en gryde et par minutter og stil dem til side til afkøling.

• Bland de resterende ingredienser og lad blandingen hvile i køleskabet en times tid.

• Servér desserten med hindbær saucen.

Tips: Skal det gå rigtig hurtigt med mellemmåltidet, kan du købe en skyr med bær eller frugt.

14

8ugerskostplan(Til dig der vil tabe dig på en sund og stabil måde)

GULEROD OG SPINAT BOLLER 10 stk.

Ingredienser200 g hakket, frossen spinat

2½ dl kogende vand

2 tsk. salt

1 dl yoghurt naturel

50 g gær

2 spsk. olie

150 g gulerødder, revne

1 dl solsikkekerner

4 dl rugmel

5½-6 dl hvedemel

MetodeKom de frosne spinatkugler i en stor skål og hæld kogende vand over. Rør, til de er optøet. Rør yoghurt

og salt i. Smuldr gæren og opløs den i blandingen. Tilsæt herefter revne gulerødder, olie, solsikkekerner

og rugmel. Rør grundigt og kom hvedemelet i lidt efter lidt. Dejen skal være klistret, men ikke våd. Lad

herefter dejen hæve lunt tildækket i 15 minutter. Tag en stor ske og dyp dem i lidt mel. Form store boller

og sæt dem på en bageplade med skeen. Lad dem igen hæve tildækket i 20 minutter. Bages ved 200

grader i ca. 20 minutter.

Tips: Bollerne er fryseegnet og kan både indgå som en del af din morgenmad og en del af din fro-

kost.

21

8ugerskostplan(Til dig der vil tabe dig på en sund og stabil måde)

MANDAG TIRSDAG ONSDAG TORSDAG FREDAG LØRDAG SØNDAGMorgenmad Havregrød Spinat gulerods

boller med mager ost (se side 14)

Proteinpandekage (se side 13)

Havregrød Klatkager med Frisk frugt

Proteinpande-kage (se side 13)

Langtidshæve-de boller (se side 22)

Frokost Bolle med ma-gert kødpålæg og grøntsager

Rugbrød med magert pålæg og grønt

Rester fra tirsdag Rugbrød med magert pålæg og grønt

Grøn salat med magert kød, æg eller avokado.

Rugbrød med fiskefrikadeller og grøntsager

Sandwich med magert pålæg og grønt. Brug evt. bollerne fra morgenmaden.

Aftensmad Kalkun gryderet (se side 23)

Spinattærte med laks (se side 24)

Boller i karry (lav dobbelt portion) (se side15)

Rester fra ons-dag

Fiskepakke med grøntsager og sovs (se side 26)

Valgfri aftens-mad

Sursød kylling med brune ris (se side 27)

UGE 2

Page 4: Typografi, Ombrydning

4BRUHN GRAFISK HÅNDVÆRK APS

4BRUHN GRAFISK HÅNDVÆRK APS

OPSÆTNING: MASTER PAGESEftersom at det ikke er alle opskrifter som har samme længde, er det vigtigt at jeg har sat dem op efter hvad de skal indeholde. Jeg har her valgt at inkludere to forskellige masters: En masterside der har to spalter, og en masterside der har en enkelt. Dette gør det muligt for mig at variere i min opsætning. Hvis jeg f. eks. har en opskrift uden særlig meget tekst, vil det være fordelagtigt at benytte en enkelt spalte, og så have et stort billede. Hvis jeg derimod har en opskrift som har flere små under-overskrifter og en lang tilbered-nings-process, kan jeg med fordel vælge at køre den i to spalter. og inddele den med ingredienserne på den ene side, mens metode + eventuelle bileder bliver vist i den anden spalte. Jeg har valgt ikke at bruge nogen form for beskæringsmargin, da det jo ikke er en tryksag.

MASTER: 2-SPALTET MASTER: 1-SPALTET

Page 5: Typografi, Ombrydning

5BRUHN GRAFISK HÅNDVÆRK APS

Nicklas Ben Rasmussen Portfolio // Typografi og ombrydning

OPSÆTNING: GRAFISKE ELEMENTERFør jeg gik i gang, kiggede jeg mit råmateriale nøje igennem. Jeg fik udleveret nogle billeder, tabeller og tekst til hver af opgaverne. Derudover fik jeg også begge kunders logoer.

BILLEDER

LOGOER

TITEL

Page 6: Typografi, Ombrydning

6BRUHN GRAFISK HÅNDVÆRK APS

SKRIFTVALG: BRØDTEKSTDet første skridt i behandlingen af billedet er, at jeg åbner min Digital Assets Manager, i det her tilfælde Adobe Bridge. Jeg finder billedet, jeg skal arbejde med og åbner det i Photoshop. Det ville selvfølgelig være bedst med et RAW-fil, så jeg havde endnu mere luminans-data.

UniversKraftig, kantet og fangende Endnu en skrifttype baseret på Akzidenz-grotesk. Univers er en meget læsevenlig skrifttype, som på samme måde som Helvetica, ikke har en stor kontrast mellem hår- og grundstreger. Den er en smule rundere end Helvetica, og så er den væsentligt smallere. Jeg kunne selvfølgelig vælge at tage skriften hér og vælge at knibe bogstaverne, og reduc-ere bredden lidt, men det ville ikke være besværet værd, da Myriad Pro’en ville være at foretrække selv derefter.

Light

Myriad ProBlød, buet og blæret sans-serif Myriad pro, som vi kender bla. for at være Apples primære font. Jeg har altid nydt at læse en Myriad Pro, og dens særlige Y-descender er specielt lækker. Dens organiske flow, og runde buer, giver den en rigtig sprød kontrast til overskrifterne som bruger Zwodrei. De arbejder ganske godt sammen, og jeg har rent faktisk nået frem til at den fede version af Myriad Pros æ, ø og å pass-er ganske godt ind i Zwodrei. Myriad Pro er derfor både en god brødtekst, og med til at lappe overskrifterne sammen, de steder hvor Zwodrei ikke har det hele.

Regulær

HelveticaKlassisk, minimalistisk og vellidt Helvetica Light var en oplagt idé, da den fungerer ganske godt som brødtekst på baggrund af at der ikke er stor kontrast mellem hår- og grundstreger . Der-udover er den en velkendt skrift, som også vil være med til at gøre læseoplev-elsen mere behagelig. Den har en høj X-højde, hvilket gør den mere læsbar på mindre størrelser. Desværre er skriften for firkantet i det, og det, og jeg søger noget lidt mere dynamisk.

Light

Page 7: Typografi, Ombrydning

7BRUHN GRAFISK HÅNDVÆRK APS

Nicklas Ben Rasmussen Portfolio // Typografi og ombrydning

SKRIFTVALG: OVERSKRIFTTil E-bogen hér skulle jeg bruge en overskrift som skulle have noget blikfang, og derfor var der brug for en kraftig og fremtrædende skrifttype. Valget stod imellem en række klassiske og nye skrifttyper, men ovenfor ses de mest nævneværdige. Helvetica, Zwodrei og Univers. Jeg valgte i sidste ende Zwodrei, da der var en del opskrifter der skulle stå alene, og så var de andre valg simpelthen ikke fyldestgørende.

ZwodreiKraftig, kantet og fangende Zwodrei er en meget bastant font, som egentlig er grotesk af natur, men al-ligevel har fået nogle kantede 30 graders pladeseriffer som er med til at give oplevelsen en smule “edge”. Denne skrifttype ville dderfor passe glimrende til formålet som H1’er til E-bogen. Et enkelt minus ved skrifttypen hér, er at det er en gratis skrifttype, og en af den slags gratis skrifttyper som desværre ikke har inkluderet Æ-Ø og Å i sit arsenal. Derfor er jeg nødt til at kompensere for de manglende bogstaver, ved at finde nogle fra en anden skrift, som pass-er ind i formen.

HelveticaKlassisk, minimalistisk og vellidt Die Neue Graas - denne klassiske font var den første skrifttype som kom til sind, da jeg dannede mig et overblik over det look-and-feel som E-bogen skulle have. Den konstante vægt i skrifttypen og den meget begrænsede kontrast mellem hår- og grundstreger gør Helvetica (den fede version) til en lækker, kraftig over-skrift.

UniversKraftig, kantet og fangende Univers var endnu en af de skrifter jeg havde med i min overvejelser. Modsat Helvetica’en, er Univers her en smule bredere, og kontrasten i skriften er en smule større. Hvis vi kigger på den øverste del af S’et, kan vi eksempelvis se hvad jeg mener.

BoldBold Black

Page 8: Typografi, Ombrydning

8BRUHN GRAFISK HÅNDVÆRK APS

STYLES: PARAGRAPH STYLESDer er anvendt en del forskellige paragraph styles, og jeg har på opslaget her valgt at inkludere og fremvise de mest væsentlige. Da vi har at gøre med et side-tungt produkt, er det vigtigt at få automatiseret så meget som muligt. Jeg har bevidst valgt, ikke at bruge 1-gefirts-indryk da jeg ikke har nogle lange afsnit noget sted i bogen.

42

8ugerskostplan(Til dig der vil tabe dig på en sund og stabil måde)

FRIKADELLER AGURKESALAT OG KARTOFLER MED BRUN SOVS 4 personer

Ingredienser (Brug opskriften på frikadeller fra side 17)

Agurkesalat

2 agurker

1 dl balsamicoeddike

3 spsk. agavesirup eller honning

salt og peber efter smag

Fedtfattig brun sovs

4 skalotte løg

1 tsk. olie

1½ spsk balsamico eddike eller rødvinseddike

5½ dl kalve eller oksebouillon

1-2 tsk maizena

½-1 dl vand og evt. kulør.

Pil og hak løgene og svits dem i olien. Hæld eddike over og lad det koge næsten ind før bouillon tilsæt-

tes. Lad blandingen simre et godt stykke tid. Lige inden servering jævnes sovsen med en maizena og

vand blanding. Smag til med salt, peber og evt. kulør.

Tips: Bouillon til sovsen kan du selv lave ved at koge ben med lidt kød på. Lad vandet koge ind og

smag det til med de ønskede krydderier.

H1

MELLEMRUBRIK

INGREDIENSER

BRØDTEKST

TIPS

H1H1’eren er det første du ser, når du bladrer gennem opskrifterne,

og derfor er det vigtigt at den er lige i øjet. Til de steder hvor der

ikke er dækket Æ-Ø og Å, anvender jeg i stedet Myriad Pro Bold.

Familie: Zwodrei - Free

Tykkelse: Fed

Størrelse: 34 pt.

Linjeafstand: 41 pt.

Kapitaler: Kun kapitaler

Afstand efter: 3mm

Kolonner: udfyld alle

MELLEMRUBRIKMellemrubrikken har mange fælles karakteristika med brødteksten,

og det er generelt min holdning, at brødtekst og mellemrubrikker

ikke skal distancere sig for langt fra hinanden. Jeg har hér brugt

Myriad Pro i samme størrelse som i brødteksten, dog med en fed

tykkelse, for at få den fremhævet.

Familie: Myriad Pro

Tykkelse: Fed

Størrelse: 13 pt.

Linjeafstand: 20 pt.

Afstand efter: 3mm

BRØDTEKSTBrødteksten er hér skal læses på skærm, og derfor er det vigtigt at

jeg for det første, ikke har mere end 65 anslag per linje, og at jeg

for det andet har en afstand der er stor nok til at man kan læse tek-

sten uden at hverken skulle knibe øjnene sammen eller anstrenge

sig for meget.

Familie: Myriad Pro

Tykkelse: Regulær

Størrelse: 13 pt.

Linjeafstand: 20 pt.

Afstand eftere: 3mm

Page 9: Typografi, Ombrydning

9BRUHN GRAFISK HÅNDVÆRK APS

Nicklas Ben Rasmussen Portfolio // Typografi og ombrydning

INTRO: HOVEDMÅLTIDER PRIMÆR LISTEIntrosiderne i E-bogen har fået deres helt egen

paragraph styles når det kommer til lister. Der skulle

nemlig bruges bullets, og numbered bullets som

hver skulle have sit udseende. Den primære liste er

formateret med farvede numre. Grunden til den lidt

mindre linjea

Familie: Myriad Pro

Tykkelse: Regulær

Størrelse: 13 pt.

Linjeafstand: 16 pt.

Afstand efter: 4mm

Kolonner: udfyld alle

Liste-type: Numre

Character-style tilføjet: “Grøn”

Indrykning fra venstre: 6,35 mm TABELTEKSTTabellteksten har jeg valgt at gøre mindre, da det er væsentligt

at det ikke ser for stablet ud, hvilket det hurtigt kan komme til,

når ens celler er smalle. Jeg har her reduceret størrelsen på

teksten, så forholdet mellem celle og tekst passer sammen.

Familie: Myriad Pro

Tykkelse: Regulær

Størrelse: 10 pt.

Linjeafstand: 12 pt.

INTRO: HOVEDMÅLTIDER SEKUNDÆR LISTEDen skundære liste er sammensat af en bullet, men jeg har her

valgt ikke at bruge standard-bullet formateringen, men derimod

anvende en der ser lidt anderledes ud. Da disse bullets skal

fungere som underpunkter til den primære liste, har jeg her

valgt at reducere skriftstørrelsen.

Familie: Myriad Pro

Tykkelse: Kursiv

Størrelse: 11 pt.

Linjeafstand: 16 pt.

Indrykning fra venstre: 17 mm

Liste-type: Bullets

Bullet-udseende: GID:120, right-pointing double angle quota-

tion mark

7

8ugerskostplan(Til dig der vil tabe dig på en sund og stabil måde)

FROKOSTNår det er tid til frokost, har du følgende tre muligheder

Sammensætning af frokost

1. 1 skive rugbrød (max. 40g) min. 100- 170g grønsager som pynt eller salat. vælg mellem følgende forslag (hvert forslag passer til 1 skive brød)

» 65g magert kød/magert kødpålæg eller evt. middagsrest » 75g fisk eller fiskepålæg (både fed og mager) » 1 æg eller 45g mager leverpostej » 1 avokado » 2 skiver skæreost (45g)/70g hytteost

2. Salat af min: 130g grønsager (alle slags) med ca. 75g kød/fisk (alle slags)/1 æg samt evt. 0.5-1 dl kogt pasta/kogt ris og 1 spsk. mager dressing. Pasta eller ris kan byttes til 40g groft brød/rugbrød ( ½ - 1 skive)

3. Lun ret: 1 stk. magert kød/fisk (alle slags)(max. 75g) Hvis sovs max. 1 spsk.

» Tilbehør: salat af: grønsager (ca. 120-200g) og 1 spsk. mager dressing. » Kartofler, ris eller pasta: se mængder som aftensmad. Hvis du får kartofler, ris eller pasta til aften udelades det til

frokost.

PRIMÆR LISTE

SEKUNDÆR LISTE

10

8ugerskostplan(Til dig der vil tabe dig på en sund og stabil måde)

MANDAG TIRSDAG ONSDAG TORSDAG FREDAG LØRDAG SØNDAGMorgenmad Havregrød Klatkager

(se side 12)Yoghurt naturel med müsli (se side 11)

Havregryn med frisk frugt

Yoghurt med müsli (se side 11)

Proteinpande-kage (se side 13)

Spinat gulerods boller (se side 14)

Frokost Rugbrød med fiskepålæg og grønt

Rugbrød med rester fra af-tensmaden og grøntsager

Pastasalat med kylling

Kyllingefilet med kartoffelsa-lat fra onsdag

Sandwich med magert kødpå-læg og grønt.

Fiskefilet på rugbrød med grønt

Rugbrød med Pålæg og grønt eller rester fra dagen før.

Aftensmad Æggekage med grøntsager (se side 15)

Spaghetti bolognaise (se side 16)

Kyllingefrikadeller med grøn kartof-felsalat (se side 17)

Pitabrød med kyllingedunser

Pizza se opskrift Side 18

Valgfri aftens-mad

Lakse-spinat lasagne (se side 20)

UGE 1

TABELTEKST

H1-TABEL

H1-TABELEfter den første korrekturomgang, blev kunden og jeg enige om

at der skulle gøres noget ved den kedelige tabel, og derfor valgte

jeg at der skulle være en rød tråd mellem designet af de rester-

ende sider, og tabellerne der er med til at skabe overblik over de

enkelte uger. Det allervigtigste blikfang til disse er overskriften,

og her har jeg valgt at tage udgangspunkt i H1-stylen, og ændre i

farven, samt indsætte den i et boks-grafik udarbejdet i Illustrator.

Familie: Zwodrei - free

Tykkelse: Fed

Størrelse: 21 pt.

Linjeafstand: 26 pt.

Afstand efter: 3mm

Character style tilføjet: “Hvid”

Page 10: Typografi, Ombrydning

10BRUHN GRAFISK HÅNDVÆRK APS

GRAFIK: CLIPPING PATH Jeg har også fritlagt nogle elementer i Photoshop som jeg har fået InDesign til at genkende fritlægningsmasken på. Dette gør, at jeg kan have en JPG-fil med transparens som InDesign altså kan genkende masken på, og ombryde sig efter. Dette er et godt eksempel på hvor godt de to programmer interagerer med hinanden.

PHOTOSHOP

INDESIGN

WRAP

17

8ugerskostplan(Til dig der vil tabe dig på en sund og stabil måde)

KYLLINGEFRIKADELLER MED KARTOFFELSALAT Ingredienser

Frikadeller

400g hakket kylling

½ tsk. salt

peber

1 fed hvidløg, presset

1 rødløg, hakket eller revet

1 tsk. timian

1 æg

1 dl havregryn

2 spsk. vand

Kartoffelsalat

650 g Kartofler

1 spsk pesto

20 g ristede pinjekerner

50 g feta

1 rød peberfrugt

½ agurk

2-3 spsk soltørrede tomater

100 g sukkerærter

2-3 håndfulde salat/spinat/rucola

MetodeKødet røres glat med salt og peber. De resterende ingredienser tilsættes og farsen

røres godt sammen. Farsen sættes på køl en lille time, for at sætte sig, og er derefter

klar til at formes til kugler og bages i ovnen ved 200 grader – 10-15 min. hvorefter fri-

kadellerne vendes. Kartoflerne koges. Når de er afkøles skæres de i halve eller kvarte

og blandes med pesto. Herefter tilsættes de øvrige ingredienser.

Tips: Frikadellerne kan også ovnbages. Giv dem 30 minutter i ovnen ved 200 grader (find

evt. tegnet for grader celcius) og vend frikadellerne efter 15 minutter.

PATH

FÆRDIGT RESULTAT

Page 11: Typografi, Ombrydning

11BRUHN GRAFISK HÅNDVÆRK APS

Nicklas Ben Rasmussen Portfolio // Typografi og ombrydning

11BRUHN GRAFISK HÅNDVÆRK APS

OBJEKT: OBJECT STYLE For at få bitmap-grafikken i mit produkt til at være så ensartet som muligt, valgte jeg at inkludere en fordefinerede Object Style. Jeg vidste hvilket udtryk jeg gik efter, og derfor definerede jeg dem før jeg gik i gang med at indsætte billeder.

OBJECT STYLE: IMAGEDen grynede kant som jeg har sat op med mine Object Styles er med til at give det sort/grønne/hvide et rustikt udtryk, som ofte bliver forbundet med økologi og sundhed.

Effect styling: Directional Feather

Top: 4 mm

Bund: 4 mm

Venstre: 5 mm

Højre: 3mm

Støj: 30%

Choke: 56%

Page 12: Typografi, Ombrydning

12BRUHN GRAFISK HÅNDVÆRK APS

GRID: BASELINE GRID Når jeg arbejder med grids i InDesign er det vigtigt for mig, at mit grid ikke fylder hele siden, som er standard i InDesign. Derfor vælg-er jeg altid at sætte mit grid til at være vist i mine tekstfelter, og ikke andre steder. Jeg vælger derfor at indstille mit grid til at begynde relativt til top-margin, og ikke i toppen af siden. Min linjeafstand er 20 pt. og derfor vælger jeg også at sætte afstanden i mit baseline grid til samme værdi.

Page 13: Typografi, Ombrydning

13BRUHN GRAFISK HÅNDVÆRK APS

Nicklas Ben Rasmussen Portfolio // Typografi og ombrydning

TABLE: TABLE STYLES Jeg har tabeller flere steder i min produktion, og derfor er det vigtigt at jeg har en table style parat. Derved sikrer jeg mig at tabellerne har det samme udseende, hvorend de forekommer. Jeg har valgt at bruge den samme farve, (R:138 G:188 B:79) til at ramme celler og kolonner ind med. De øverste celler, hvor ugedagene står har jeg brugt en raster-opacitet (tint) på 20% af den originale farve.

MANDAG TIRSDAG ONSDAG TORSDAG FREDAG LØRDAG SØNDAGMorgenmad Havregrød Klatkager

(se side 12)Yoghurt naturel med müsli (se side 11)

Havregryn med frisk frugt

Yoghurt med müsli (se side 11)

Proteinpande-kage (se side 13)

Spinat gulerods boller (se side 14)

Frokost Rugbrød med fiskepålæg og grønt

Rugbrød med rester fra af-tensmaden og grøntsager

Pastasalat med kylling

Kyllingefilet med kartoffelsa-lat fra onsdag

Sandwich med magert kødpå-læg og grønt.

Fiskefilet på rug-brød med grønt

Rugbrød med Pålæg og grønt eller rester fra dagen før.

Aftensmad Æggekage med grøntsager (se side 15)

Spaghetti bolognaise (se side 16)

Kyllingefrikadeller med grøn kartof-felsalat (se side 17)

Pitabrød med kyllingedunser

Pizza se opskrift Side 18

Valgfri aftens-mad

Lakse-spinat lasagne (se side 20)

Uge 1