Levert!

Jeg velger å legge opp linker og levere min oppgave i dag, siste dag før helgen, når oppgaven skal leveres på mandag morgen. Dermed har jeg to dager på meg til å se etter feil, samt teste nettsiden og boka på andre maskiner og lignende.

Da jeg testet hjemmesiden hjemme opplevde jeg at den gikk noe tregt. Når jeg trykker på bildene blir de først borte, så kommer de tilbake og filmen spilles av. Jeg har funnet ut at dette er fordi jeg ikke sitter på en sterk maskin, og har heller ikke optimal nettverkstilgang.

Da er semesteropgaven levert her på bloggen. Du finner den på siden Semesteroppgave 2012. Eller du kan trykke HER.

For å se mine fem utvalgte arbeider kan du trykke deg inn på 5 utvalgte arbeider. Eller du kan trykke HER.

After Effects

Da jeg fant ut at jeg ikke hadde mulighet til å lagde de bevegelsene og animasjonene jeg ville ha på illustrasjonene mine ved hjelp av interaktivitet i indesign, bestemte jeg meg for å bruke after effects.

I after effects har jeg brukt noe puppetpin-tool for å skape bevegelse, men jeg har for det meste brukt position, scale og rotation. Lydene som er på filmene er lagt til og redigert i after effects.

Michelle har hjulpet meg og står bak mange av lydene. For å ta opp lyden brukte jeg Adobe audition, et program jeg ikke har vært borte i tidligere. Jeg hadde ikke mulighet til å ta opp lyden i et ordentlig studio, så jeg ble nødt til å bruke mikrofonen på mac’en. Derfor er det desverre blitt noe bakgrunnsstøy på noen av lydklippene.

Filmene er rendret ut fra after effects som FLV-filer for bruk i indesign, les mer om det her: eksportering fra indesign. Men fordi disse filmene får en dårlig oppløsning i boken på nett har jeg også rendret de ut som mov-filer og lagt de opp på nettkringkastings siden min slik at det er mulig å se hvordan oppløsningen og kvaliteten egentlig er. Klikk på linkene under for å se på filmene.

Jeremias lommebok

Marihøna på flyplassen i Madrid

Jeremia med ørepropper i nesa

Frosken Peder

RotteRonny

Esken med sjokoladen

Kloakk-kartet

Jeremia i spindelvevet sitt

Dreamweaver

Først tegnet jeg opp noen enkle skisser på hvordan jeg ville at nettsiden skulle se ut.

Nettsiden boken kan leses på har jeg kodet i dreamweaver. Siden er 1200px bred og 820px høy. Dette er en relativt bred side, den fungerer veldig bra på skolemac’en, og er ikke for bred til den bærbare pc’en min som har en noe smalere skjerm.

Når jeg eksporterte boken min ut fra indesign som en swf-fil fikk jeg blant annet med en html-fil man kan bruke for å åpne boken i nettleseren. Denne html-filen har jeg kodet inn under “les boka” linken på nettsiden, dermed dukker boken opp på denne siden og det er mulig å bla og lese i den der. Jeg har kodet hmtl-filen slik at boken har en liten grå ramme rundt seg. Uten denne grå rammen kan det se ut som om boken er kuttet når man blar i den. Denne grå rammen var opprinnelig ganske stor da jeg åpnet hmtl-filen etter å ha eksportert den ut sammen med swf-filen fra indesign. Etter å ha gjort den grå rammen mindre, plasserte jeg html-filen sine koder inn i en div-tag på “les boka” siden i dreamweaver og sørget ved hjelp av css-stylesheetet for at boken ble midtstilt på siden. Under er et bilde fra dreamweaver der jeg jobber med å kode inn html-filen, samt et bilde av boken på nettsiden.

Navigasjonsbaren/menyen har jeg laget ved hjelp av photoshop. Den består i hovedsak av 3 bilder, et for hver link/knapp. For å få en roll-over effekt, linken blir lysere når du tar musepekeren over og forblir lys når du er på siden, har jeg laget 3 nesten helt like “link-bilder” som danner “enda en” navigasjonsbar, den eneste forskjellen er at denne navigasjonsbaren har en mye lysere farge. Dermed endte jeg opp med et mørkt og et lyst bilde til hver av linkene.

Når dette var gjort kunne jeg i dreamweaver velge å sette inn link-bildene som roll-over bilder og dermed fungerer menyen slik at linken blir lysere når du tar musepekeren over den. For at linken skulle forbli lys på den siden du er inne på, satt jeg ikke inn et roll-over bilde for den gjeldene siden. Der brukte jeg kun det lyse bildet av linken.

Her er noen screenshots fra de tre linkene på nettsiden.

Eksportering fra indesign

For å ende opp med en bok man kan bla i på nettet eksporterer jeg bok ut fra indesign som en swf-fil. Det har bydd på noen utfordringer og irritasjoner når det kommer til oppløsning og kvalitet på filmene jeg har laget i After Effects.

I første omgang prøvde jeg å lagre filmene mine som mov-filer da jeg rendret de ut fra After effects, før jeg tok de inn i indesign, men da jeg skulle eksportere indesign-filen ut som en swf-fil fikk jeg beskjed, fra indesign, om at det heller ville lønne seg å bruke FLV-filer.

Jeg endret alle filemene mine til FLV-filer, tok de inn indesign og eksporterte på nytt ut fra indesign som swf-fil. I nettleseren ser filmene fine ut helt til man trykker på de og de begynner å spille. Da sprekker illustrasjonene i filmene opp og oppløsning og kvalitet ser heller dårlig ut. Dette er noe som har erget meg veldig, men det viser seg at det er lite jeg kan gjøre med saken. Etter å ha forhørt meg med lærerne er det klart at det er swf-filen jeg eksporterer indesigndokumentet ut som, som ødelegger kvaliteten og oppløsningen på filmene, noe som er veldig kjedelig. Jeg ønsker veldig gjerne å vise hvordan filmene egentlig skal se ut, så jeg har lagt de opp på nettkringkasting som mov-filer. Linker til filmene finner du under innlegget om After Effects eller ved å klikke her.

Jeg nevnte tidligere i innlegget Indesign at sidene i boka har en bredde på 610 px, det vil si at boka i åpen tilstand har en bredde på 1220px og en høyde på 554px. For at boken skulle få størst mulig rom på nettsiden min satt jeg nettsidens bredde til å være 1200 px bred. Da har jeg tatt hensyn til at boken kan leses på mindre skjermer, i forhold til skjermen på skolemac’en som er relativt bred. Du kan lese mer om nettsiden under innlegget Dreamwaver.

I og med at nettsiden har en bredde på 1200px blir boken med en bredde på 1220px noe for stor, derfor skalerer jeg den ned til en størrelse på 1150px bred og 523px høy når jeg eksporterer indesigndokumentet ut som en swf-fil. Bredden blir dermed skalert ned 70px mens høyden blir skalert ned 31px.

Indesign

Før jeg åpnet indesign satt jeg med ned og lagde noen enkle skisser over hvordan jeg kunne tenke meg at layouten på boken skulle være. Først skisset jeg litt på en forside jeg kunne tenke meg.

Den ferdige forsiden ble nokså lik. Jeg har meg vilje ikke med noen undertittel på denne boken. Det er fordi jeg ser for meg at dette kan være en av flere bøker om Jeremia Von Nilsen, og dermed kan de senere bøkene ha undertittler.

 

Jeg tenkte at sidene i boken skulle ha en bredde på 24cm og en høyde på 22cm. Jeg ville at teksten alltid skulle stå på venstre side i boken og at illustrasjonene gjennomgående skulle plasseres på høyre.

Da jeg opprettet dokumentet i indesign satt jeg målenheten til pixler i og med at boken skal være nettbasert, dermed ble målene som følger; bredde: 680.315 px og høyde 623.622px

Etter å ha prøvd denne versjonen på nett fant jeg ut at den ville bli altfor bred for nettsiden jeg senere skulle lage, derfor endret jeg målene til en bredde på 610px og en høyde på 554px per side. Dette ble det gjeldene formatet.

Fontstørrelsen i boken er satt til 16 pt og baselinegrid er innstilt der etter. 16 pt er en fontstørrelse som hverken gjør teksten for stor eller for liten. Dette er en bok som er beregnet på at voksne skal lese for/sammen med barna sine, derfor har jeg tillatt å ha teksten i 16 pt. Skulle det vært en bok der barn skal lese alene ville 16 pt vært en for liten fontstørrelse.

Jeg ønsket at teksten ikke skulle gå helt i ytterkantene på boken, derfor satt jeg følgene mål på margins.

Siden med tekst ble da seendes slik ut:

Jeg har laget en smal gradiet som går fra grå til hvit, som jeg har lagt mellom sidene i boken. Denne gradienten har jeg lagt inn i master pagen i indesign slik at den automatisk er på alle sidene jeg lager. Grunnen til at jeg har lagt inn denne gradienten er for å gi boken et bedre preg på at den består av to sider som er delt på midten. Uten gradienten ser boken kun ut som en lang side når den er åpnet. Her er et bilde hvor man kan se gradienten ligger på midten mellom sidene.

Illustasjonene i boka består i hovedsak av animasjoner jeg har laget og rendret ut fra After Effects som FLV-filer. Da jeg satt filmene inn i indesign hadde det stillestående bildet av filmen, før den startes, noe dårlig oppløsning. Derfor har jeg laget et posterframe bilde som jeg har lagt oppå filmen, når du trykker på dette bildet forsvinner det og filmen begynner å spille. Når du har trykket på bildet og filmen har startet kan du igjen føre musepekeren over filmen, da har jeg gjort det slik at det dukker opp en roll-over meny som gir deg mulighetene til å trykke på pause/play og mute.

Kartet jeg laget over Spania har jeg gjort interaktivt ved hjelp av indesign. Jeg har laget “hot-spots” over sirklene/punktene på kartet som angir de ulike byene. “hot-spotsene” gjør at når du tar musepekeren over de kommer det en lyd jeg har lagt til, samt at det dukker opp en faktaboks med enkel info om den gjeldene byen.

Ved hjelp av indesign har jeg også lagt til lyd på illustrasjonen på forsiden og baksiden  av boken. Her ser du lydfilen som ligger på “utsiden” av boken. Bildet du ønsker å ha lyd på linkes til lyden.

Her er et utsnitt av boken mens den er under arbeid.

Jeg ønsker at uttrykket på boken skal være noe minimalistisk med mye rom til tekst og illustrasjoner. Det føler jeg at jeg har fått til ved å la sidene være helt hvite uten noe dill-dall på. På denne måten får tekst og illustrasjoner større plass til å utspille seg.

Det er en del tekst i boken min så det er viktig med god plass. Dette er som sagt en bok som er bereget på at voksne leser for og kanskje også sammen med barna. For noen barn vil det være for mye tekst å lese selv, mens for andre kan det være noe å bryne seg på.
Jeg har prøvd å gjøre boken litt morsom, ved å ha litt humor i teksten. Spenningen ligger nå i å se hvor mange som liker denne formen for humor i og med at den er litt “merkelig”. Men jeg vet allerede om mange den vil passe perfekt til.

Logo

Logoen for prosjektet mitt består av illustrasjonen Jeremia Von Nilsen som også er frontfiguren i boken. Det er bevisst valgt å ikke ha med tekst i logoen, dette begrunnes med at teksten, som ville vært “Jeremia Von Nilsen”, vil i noen tilfeller bli for ruvende og ta for mye av oppmerksomheten fra illustrasjonen. Eksempler på dette kan være når logoen skal plasseres på en bokrygg, en penn eller andre gjenstander der logoen må være i et lite format. Da vil det også være tilfelle at teksten vil bli så liten at det ikke går ann å lese den.

Logoen består av kun strekene på Jeremia, og en hvit fyllfarge i logen som skal plasseres på sort bakgrunn. Jeg mener denne versjonen egner seg bedre som logo enn den som er fargelagt, da det vil være vanskelig å eksakt gjengi alle sjatteringene og fargespillet i den fargelagte versjonen.

Her er en skala som viser når logoen skal skifte fra sort til hvit.

Avstanden til elementer rundt logoen skal tilsvare lengden fra Jeremias kropp og ned til føttene. Føttene kan gå kant i kant med andre elementer.

Fonter – stroke – brush

Font:
Fontene jeg har valgt å bruke heter Roboto og Dandelion in the spring. Begge fontene er funnet på www.dafont.com. (Klikk på fontene for å åpne dafont-sidene deres) Roboto er den fonten som blir brukt til teksten i boka. Dette er en enkel og lett leselig font som jeg mener egner seg godt til barneboken min. Roboto-fonten har flere forskjellige versjoner, blant annet; regular, light og thin. Jeg har valgt å bruke light versjonen, da blir ikke fonten for fet, men heller ikke så tynn at den ikke vil syntes på web.
(Regular versjonen blir brukt kun på “Tekst og illustrasjon av Maja Furuhaug” som står på siste side i boken)


Dandelion in the spring blir brukt på overskriften på boken, samt på den tilhørende nettsiden. Dandelion in the spring har i mine øyne et lekent uttrykk som jeg mener passer godt til en barnebok. Men denne fonten vil ikke egne seg til hovedtekst i boken, da den ikke er like lett leselig  som Roboto.


Stroke:
På illustrasjonene jeg har laget i illustrator har jeg i hovedsak brukt en stroke som heter artistic paintbrush drybrush 5. Dette er en stroke som gir det litt røffe og “tegnede” preget på illustasjonene som jeg ønsker. På øynene til illustrasjonene har jeg brukt en stroke som heter artistic paintbrush 1.

Artistic paintbrush drybrush 5.


artistic paintbrush 1.

Brush:
Jeg helt fra starten av oppgaven hatt et ønske om at illustrasjonene mine skal ha et malt preg. Ved å bruke en brush jeg fant på www.qbrushes.com har jeg skapt litt liv i fargene på illustrasjonene. Jeg brukt photoshop som verktøy for å farglegge illustrasjonene, jeg har gått frem ved at jeg først har fargelagt den ønskede formen med en helt vanlig brush, for deretter å bruke brushen fra www.qbrushes.com med lignede, lysere og mørkere farger.
Dette er et bilde av hvordan brushen ser ut.

Karakterene

I dette innlegget vil jeg vise frem arbeidsprosessen med, skisser av og ferdige illustrasjoner som er med i boken min.

JEREMIA VON NILSEN
Jeremia Von Nilsen er hovedfiguren i oppgaven min. Prosessen med å tegne Jeremia begynte med at jeg tegnet 20 raske ulike skisser.


Jeg valgte ut de jeg var mest fornøyd med og jobbet videre med de.


Jeg bestemte meg tidlig for at illustrasjonene i boken min skulle ha en enkel strek, og være mer “barnetegning-aktig” enn naturtro. Etter endel tegning kom jeg frem til  skissen jeg ville jobbe videre med.


Da skissen var ferdig, scannet jeg den inn og åpnet den i illustrator, hvor jeg brukte pentool for å trace den. Først brukte jeg en helt enkel stroke, men jeg følte ikke at Jeremia fikk det uttrykket jeg ønsket. Etter å ha testet ut litt forskjellige strokes, fant jeg frem til artistic paintbrush drybrush 5. Denne stroken ga Jeremia det litt røffe preget jeg var ute etter.


Etter å ha tegnet Jeremia ferdig i illustrator laget jeg ett fargekart og gikk jeg over til å fargelegge i photoshop. Der brukte jeg en brush du kan leser mer om HER samt burntool for å skape litt skygge og spill i illustrasjonen.

 


Det er brukt forskjellige illustrasjoner av Jeremia i boken, den figuren du ser ovenfor, Jeremia med ørepropper i nesa og Jeremia som slapper av i spindelvevet sitt.

ROTTERONNY
Da Jeremia var ferdig tegnet hadde jeg klare rettningslinjer for form og uttrykk jeg ville følge. Jeg ønsket at alle illustrasjonene skulle ha samme stroke, og at de skulle fargelegges på samme måte.

RotteRonny er en stor og skummel rotte som Jeremia møter på i løpet av fortellingen. Jeg har tegnet RotteRonny sett fra et froskeperspektiv for å få han til å virke stor og skummel.

Jeg tok skissen inn i illustrator og tracet den med samme stroke som Jeremia.

Etter å ha fått litt konstruktiv kritikk endret jeg måten han har hendene sine på slik at de ble mer tydlige.

RotteRonny er fargelagt på samme måte som Jeremia.

PEDER
Peder er Jeremias følgesvenn på hans reise fra Spania til Norge. Jeg har brukt samme fremgangsmåte på Peder som på de andre illustrasjonene. Først skisset jeg noen forslag, og kom frem til en skisse jeg ville bruke.

Jeg brukte pentool i illustrator for å tegne over. Stroken er den samme som på Jeremia og de andre illustrasjonene.

Tilslutt brukte jeg photoshop for å fargelegge han.

MARIHØNA
Marihøna sitter i skranken på flyplassen i Madrid. Jeremia syns hun er veldig vakker med de lange flotte øyevippene sine.


Marihøna er tegnet i illustrator med samme stroke som de andre illustrasjonene.

Da jeg skulle fargelegge marihøna i photoshop flyttet jeg hodet hennes litt ned slik at kropp gikk over i hodet uten noe mellomrom. Det gjorde jeg fordi ingen av de andre illustrasjonene har hodet adskilt fra kroppen.

SERGIO
Sergio er en liten tilleggsfigur i boka som går igjen som en link på nettsiden, hvor du kan lese mer om han. Han er kjæledyret til Jeremias familie.

Han er tracet og har samme stroke som de andre illustrasjonene.

Og fargelagt på samme måte.

JEREMIAS LOMMEBOK
Lommeboken har jeg laget for å illustrere at Jeremia ikke har penger til å kjøpe seg en flybillett. Det viser jeg ved at det flyr fluer rundt/ut av den når han åpner den. Jeremia har såklart et bilde av familien kjæledyr Sergio i lommeboken sin.

Lommeboken er scannet inn og tracet i illustrator med samme stroke som de andre illustrasjonene. Det samme er fluene.

Illustrasjonene er fargelagt i photoshop på samme måte som de foregående.

SJOKOLADE I ESKE
Dette er en eske med en liten sjokolade i, som Jeremia får av Peder når de er i Belgia. Jeg har ikke håndtegnet noen skisse på denne esken, men startet i illustrator med samme stroke som de andre illustrasjonene.

Her har jeg gitt sjokoladen litt farge allerede i illustrator slik at den skal bli lettere å se. Etter å ha tegnet ferdig i illustrator åpnet jeg filen i photoshop og brukte samme metode som tidligere til å fargelegge sjokoladen og esken.

I photoshop la jeg på en veldig svak tekstur av revet sjokolade på selve sjokoladen. Denne teksturen er hentet fra www.cgtextures.com

DET BRODERTE KLOAKK-KARTET
I fortellingen har Peder arvet et brodert kloakk-kart over kloakksystemet i hele Europa. I boken vises bare et lite utsnitt av dette kartet slik man kan se på bildet under.

For å få et brodert uttrykk valgte jeg å la streker og tekst bestå av små kryss, som skal ligne kryss-sting man finner i vanlige broderier. Veien Peder og Jeremia skal følge er merket opp i rødt.

For å få et enda mer brodert preg på kartet hentet jeg en textur fra  www.cgtextures.com som jeg la i bakgrunnen.

SPANIAKART
Dette enkle kartet over Spania er laget gor å illustrere hvor Jeremia kommer fra, samt noen av de store byene i Spania. Jeg fant et bilde på nettet som jeg brukte for å tegne ytterstrekene på kartet, og for å se hvor de ulike byene lå. Jeg har ikke tatt med alle byene med tanke på plass når det hele skulle gjøres interaktivt i indesign.

For å få kartet til å se litt mer papir-aktig ut har jeg også her brukt en tekstur jeg har funnet på www.cgtextures.com I indesign har jeg gjort kartet interaktivt ved at når man tar musepekeren over punktene til de ulike byene, så kommer det opp faktabokser med enkel fakta om den byen. jeg har også laget det slik at det kommer en liten lyd når musepekeren er over punktet. Dermed har man også muligheten til å lære noen enkle fakta av boken.

Semesteroppgave 04.05.2012

I dag har jeg blant annet jobbet med å endre litt på animasjonen av Peder. Jeg har flyttet litt på notene slik at de forsvinner helt ut av bildet, noe de ikke gjorde tidligere.

Peder

Jeg jobber også med å lage en enkel profilmanual til boken min. Jeg skriver om logoen, typografi og illustrasjoner. Profilmanualen blir laget i indesign, og  planen er å skrive den ut som en swf-fil. Jeg regner med at bildene vil ha en god oppløsning etter at de eksporteres ut fra indesign, da jeg tidligere har hatt en god erfaring med det. Det viser seg at det er filmer som blir ødelagt, med tanke på kvalitet og oppløsning, ved eksportering til swf.

Semesteroppgave 02.06.2012

I dag har jeg funnet ut at det faktisk går ann å bruke mov-filer i indesign, for så å eksportere de ut i en swf-fil. Hvorfor jeg tidligere har fått beskjed av indesign om at dette ikke fungerer er jeg virkelig ikke sikker på. Da jeg fant ut at det gikk ann med mov-filer i indesign ble jeg kjempeglad. De filmene jeg la ut i går er mov-filer og de har den gode kvaliteten og oppløsningen jeg ønsker å vise fram.

Men etter å ha lagt inn alle mov-filmene i indesign og deretter eksportert de ut til en swf-fil, ble oppløsningen og kvaliteten helt lik den som er på FLV-filene jeg har brukt til nå. Dermed er det nå helt klart at det er swf-formatet som ødelegger oppløsningen på filmene mine. Derfor sier jeg igjen, vil du se hvordan kvaliteten egentlig er, klikk deg inn på linkene i forrige blogginnlegg og kikk på de.