Portfolio H2
Bjørn Nyborg
04
12
18
26
Grafisk Design
Grafisk Produktion &
workflow
Grafik &
Billedbehandling
Typografi &
ombrydning
Introduktion til opgaven
I min fritid laver jeg lidt grafiske opgaver med en kammerat,
primært for venner og bekendte. Vi bestemte at vi ville lave
en ny hjemmeside, hvor vi skulle kunne præsentere vores referencer, og have en lille blog, som skulle være pænere grafisk
præsenteret end vores daværende hjemmeside.
Medie: www.bbpixelz.dk
Grafisk Design
Fakta om opgaven
Typografiske valg
Opgaven
Rubrikker
Jeg skulle fremstille en funktionel, simpel, men flot hjemmeside til BB Pixelz, hvis primære formål er at fortælle hvem vi er, og hvad vi laver. Siden skulle være responsive,
og leve op til de moderne standarder.
Til alle vores rubrikker, har vi valgt at bruge “Lato Bold”, som er en helt ren og letlæselig sans-serif font. Dette har vi valgt da, når man skimmer siden, lynhurtigt skal kunne
spotte den information man er på udkig efter.
Afsender
The quick brown fox jumps over the lazy dog
Lato Bold
BB Pixelz.
Målgruppe
Brødtekst
Dem der finder vores opgaver interessante, og evt. skal se, om vi er leveringsdygtige til
det, de mangler en hånd til.
Til brødteksten har vi valgt at bruge “Crimson Text” som er en stilet serif font. Vi er
klar over at man siger at “Serif fonte bør ikke anvendes til online brødtekster”, men
i og med at langt de fleste efterhånden har en rigtig god opløsning på deres skærme,
bliver det et mindre og mindre problem. I brødteksterne har vi tilgengæld valgt at
anvende 16px skriftstørrelse, for at kompensere på de skærme der stadig måtte have
dårlig opløsning.
Ansvar
Jeg har stået for alt i denne opgave, men har været i tæt dialog og samarbejde med min
kammerat, som også er en del af projektet.
The quick brown fox jumps over the lazy dog
Crimson Text Roman
Illustrationer og farver
Processen
Billederne
Brainstorm
De fleste billeder der bliver brugt på siden, er til at præsentere referencer. Vi bruger
altid Apple produkter til disse, da de er stilrene og lækre at se på. Vi gør det oftest ved
at downloade en mockup og indsætte vores emne her. På denne måde har vi en hvis stil
over billederne, som bidrager til det stilrene og æstetiske udtryk.
De steder hvor vi anvender “Header” billeder, er overskriften placeret i disse, og der er
parrallax scroll, hvilket giver en illusion af dybde på siden.
Det første vi gjorde, var at komme med en hel masse idéer til vores hjemmeside. Det
var alt lige fra funktioner, design finesser til CMS og mobiloptimering.
Farver
Opsætning og mark-up
Vi har kørt farvere i det allerede fastsatte farveskema, for at skabe en genkendelighed,
og være tro mod brandets visuelle identitet.
Herefter gik vi i gang med den tekniske opsætning, ved først at lave den nødvendige
HTML og CSS, herefter implementerede vi det i Umbraco CMS.
#FF7200 - Orange
Dette er vores kendingsfarve, som skal skabe genkendelighed. Den er
valgt fordi den er varm, behagelig og står for imødekommenhed, som er
nogle af de ting vi gerne vil stå for.
#333333 - Mørk grå
Denne farve bliver anvendt til tekster, for ikke at ramme den helt sorte
farve. Denne er farve er behagelig at læse.
#F4F4F4 - Lys grå
Denne farve bruger vi ofte som baggrundsfarve, for ikke at have den helt
hvide farve. Den er stadig lys, energisk og ren.
Designforslag og mockups
Herefter gik vi i gang med at finde forskellige inspirationskilder, finde skabeloner vi
ville arbejde ud fra, for endelig at sætte det sammen i et design i Photoshop.
Optimering og tilpasning
Lige siden vi har sat siden live, har vi gået og rettet småting og justeret i designet. Dette
er en proces der ikke vil stoppe foreløbig, da vi hele tiden kommer på nye idéer.
Kvalitetsvurdering
Jeg føler virkelig, at vi har klaret denne opgave til godt. Hjemmesiden er blevet super lækker, nem at navigere rundt på, fungerer som den skal på alle enheder og lever op til de nyeste standarder. Udover alt dette er den rigtig hurtig. Den får 87/100 på
google pagespeed. Samtidig har vi fået sat vores backend op, så
det er super let at tilføje nye referencer og blogindlæg.
Introduktion til opgaven
I min fritid er jeg i gang med et projekt, hvor vi er nogle stykker der skal arbejde sammen om at opsætte en webshop helt
fra bunden. Jeg har været med til at stå for frontend udvikling
samt en del af designet.
Medie: www.myteddyandfriends.dk (Ikke online endnu)
Grafisk Produktion & workflow
Fakta om opgaven
Beskrivelse
Opgaven
Layout
Opsætning af en funktionel webshop, som er specialudviklet helt fra bunden.
Børn og forældre
Layoutet er sat op efter Bootstraps 12 column 1170px grid i en PSD fil. Dette har
vi gjort, for at vi kan lave siden responsive. På denne måde kan vi lave et design,
der tilpasser sig den enhed, du ser hjemmesiden på. Det vil også sige, at vi har brugt
Bootstrap Frameworket i vores kode. Da dette framework er open-source, kan man
bruge det lige så tosset, man vil.
Ansvar
Kvalitetskontrol
Jeg har haft ansvaret for halvdelen af designet, samt alt frontend udviklingen.
Hjemmesiden er testet ned til og med IE9, i Firefox og Chrome.
Udover dette er den valideret i W3C og lever op til alle HTML5 standarder.
Alt grafikken på hjemmesiden er Web-optimeret, enten vha. photoshops “Save for
web”-funktion, eller ved at bruge en Ikon-font, som gør at vi kan bruge vektorgrafik på
nettet og samtidig fylder ekstremt lidt.
Målgruppe
Standarder
Som nævnt ovenover er det en HTML5 side, som er valideret til at leve op til standarden. Vi har brugt Bootstrap, som efterhånden også næsten er en standard på nyere
hjemmesider, som skal optimeres til smartphones, tablets og pc’er på én gang uden at
skulle lave flere forskellige sider. Siden er stylet vha. CSS3. Vi har også benyttet jQuery
til interaktivitet på siden.
Processen
Samtale omkring krav,
forventninger, tanker og
brainstorm omkring den
nye hjemmeside.
Layout produceres i
photoshop, og der bliver
“ping-pong’et” frem og
tilbage om produktet.
Herefter startede kodningen, hvor vi benyttede Bootstrap 3 og fik
lavet vores funktioner og
styling.
Da vi var tilfredse med
resultatet, kiggede vi på
funktioner og smarte
effekter, vi skulle have.
Så kom vores kvalitetskontrol, her validerede
vi W3C og gennemgik i
forskellige browsere.
Da alt dette var, som vi
ville have, sendte jeg siden videre til fyren som
skal lave selve betalings
implementering, samt
database opsætningen.
Kvalitetsvurdering
Det har virkelig været en spændene opgave, og jeg synes den
er lykkedes super godt. Det skyldes bl.a. at vi har brugt lang tid
på at teste siden på forskellige enheder, og tilpasset den skærmstørrelser. Dette gør at siden også er en lækker oplevelse, på
mobile enheder.
Introduktion til opgaven
Jeg har på min praktikplads fået den opgave at behandle et fiktivt billede til et Dansani katalog.
Medie: Dansani katalog (Fiktivt)
Grafik & Billedbehandling
Billedebehandling
1
2
Fakta om opgaven
Opgaven
Ørskov Gruppen laver bl.a. kataloger for Dansani. I disse
kataloger er der en helt masse billeder og sådan et, skulle jeg
lave (Billedet blev dog ikke brugt). Det foregår sådan, at en
fotograf tager et billede af møblerne m.m. i et helt hvidt rum,
efterfølgende lægger vi så gulv, vægge, fliser, justerer osv.
Programvalg
Det første, jeg gjorde, var at fritlægge alle elementer med
“Pen tool” og til sidst kombinere dem alle til én “Path”,
så jeg efterfølgende kan udvælge alle elementerne ved at
CTRL-klikke på min “Path”.
3
Herefter fandt jeg de textures, jeg ville bruge til gulv og
vægge. Disse åbnede jeg i et nyt dokument og gik til Edit
 Define Pattern. Dette gemmer dokumentet som et
Pattern, hvilket jeg skal bruge senere i processen.
4
Jeg har udelukkende brugt Photoshop CS 5.1.
Ansvar
Jeg har stået for alt i denne opgave. Alt jeg fik, var start
billedet og et katalog med eksempler på redigeringen. Jeg løste
opgaven med tips fra de andre grafikere i huset.
Distribution
Billedet blev ikke distribueret.
Herefter lavede jeg alle vægge og gulve til individuelle Paths,
lavede et nyt lag til hver væg/gulv og gav dem de patterns,
jeg oprettede i forrige step. Herefter brugte jeg min Path
til at maskere lagene, så hver individuelle væg/gulv havde
et lag med maske.
Så åbnede jeg Filter  Vanishing Point og definerede perspektivet i billedet. Da jeg havde trukket linjerne, brugte
jeg funktionen “Render Grid to Photoshop”, hvilket gør
at jeg får Gridet som et lag, så jeg hele tiden har det i
nærheden.
Billedebehandling
5
De lag, som jeg har givet mine patterns, Konverterede jeg
til smart objects for at arbejde ikke-deskrutivt, herefter
transformerede jeg dem med “Free Transform”’s forskellige muligheder, “Perspective”, “Skew” osv. Indtil gulvet og
væggene var, hvor de skulle være i forhold til mit grid.
7
Udvælgelsen fra sidste step brugte jeg ved at lave et nyt
lag, fylde højlys udvælgelsen med hvid og skyggerne
med sort. Højlys fik herefter blending mode “Soft light”
og skyggerne fik “Multiply”. Nu kan jeg styrre højlys og
skygge ved at ændre opaciteten på de 2 lag og samtidig
give billedet mere kontrast.
6
Det næste jeg gjorde var at vælge mit startlag gå til “Channels” og “CTRL” klikke på “RGB”-laget. RGB er populært
sagt lysets farver, så når jeg udvælger RGB- laget får jeg
en udvælgelse, der indeholder alle højlys på billedet. Når
jeg inverterer udvælgelsen, får jeg skyggerne på billedet.
8
Den bagerste mørke væg blev for mørk, også da mit
højlys-lag var på 100%, så derfor lavede jeg et ekstra
højlys-lag og “connectede” dette til laget med min bagerste
væg. Herefter tog jeg min path som indeholder spejlet og
gav den et gradient fyld fra hvid til sort. Ganske simpelt.
Billedebehandling
9
Herefter lavede jeg et nyt lag, som jeg fyldte med 50% grå,
så brugte jeg hhv. en sort og en hvid blød pensel til at
pålægge skygger og ekstra lys. Laget fik “blendingmoden”
“overlay” fordi så vil 50% blive transperant. Hvid vil gøre
billedet lysere, og sort vil gøre billedet mørkere.
10
Det næste, jeg ville gøre, var at få fokus mere ind mod
midten af billedet. Dette gjorde jeg vha. Filter  Lens
correction  Custom, og så indstillte jeg “Vignette” til
-40%, dette giver effekten som vist ovenfor. Med mørke
hjørner bevæger øjnene sig automatisk mod midten.
11
Til sidst justerede jeg billedet ved at lave et Levels justering-lag, og derefter fandt jeg det mørkeste og det lyseste
punkt på billedet med pipetteværktøjet. Og så sørgede jeg
for, at det ikke var helt hvidt eller helt sort så det ikke vil
brænde ud. Og også for at sikre mig, at billedet havde den
rigtig gråbalance.
Resultat
Kvalitetsvurdering
Farvestyring og opløsning
Jeg har igennem hele workflowet holdt billedet og de importerede elementer i sRGB, da dette er den profil, fotografen har
givet billederne fra starten. Derfor har jeg, for at bevare fotografens farveindstillinger, bevaret profilen. Jeg har “Down
samplet” billedet, selvom det er rigtig stort, fordi billederne bliver brugt til helsidesindslag i kataloget.
Vurdering
Jeg er rigtig godt tilfreds med resultatet, da jeg har opnået det
ønskede “Dansani - look”, og jeg har været vidt omkring i opgaven. Har lavet alt fra justeringer og fritlægninger til effekter,
perspektivering og farvestyrring.

Introduktion til opgaven
I forbindelse med at jeg skal på mit andet hovedforkløb som
mediegrafiker, skal jeg lave denne portfolio. Jeg har gjort lidt
ekstra ud af typografien, for så at bruge den som emne i selv
samme opgave.
Medie: Dansani katalog (Fiktivt)
Typografi & ombrydning
Fakta om opgaven
Typografiske valg
Afsender
Skriftvalg
Bjørn Nyborg
Til overskrifter og mellemrubrikker har jeg anvendt fonten “Open Sans Light” (Dog
bold på alle introduktions sider, dette er en meget ren og letlæselig sans-serif font, som
jeg personligt er stor fan af. Jeg har givet den en gradient som skriftfarve, for at giver
den lidt ekstra opmærksomhed.
Målgruppe
Målgruppen er alle, der kunne have interesse i at se min portfolio. Primært grafikere.
Distribution
Der er en pdf til fri download på min hjemmeside.
The quick brown fox jumps over the lazy dog
Open Sans Light
Til brødtekster har jeg anvendt Crimson Text, da dette er en letlæselig skrifttype, når
det gælder trykt materiale. Og samtidig er let og har et eksklusivt udtryk.
The quick brown fox jumps over the lazy dog
Crimson Text Roman
Satsformer
Løs bagkant er anvendt til brødteksten, og hovedrubrikkerne er centreret.
På titelsiderne har jeg højrestillet overskriften for æstetikkens skyld.
Punktstørrelse/skydning
Jeg har valgt at bruge 10/14 pkt. til brødteksterne, dette er en middel størrelse.
Dette er den gyldne mellemvej til tekster som skal være letlæselige for alle.
Fremgangsmåde
1
2
Typografiske detaljer
Linjelængde
Linjerne er ca. 80 tegn i brødteksten. Det er en læsevenlig længde dog lige til den lange
side. Jeg har prioriteret æstetikken lidt højere her, da opgaven ikke er teksttung nogen
steder.
Jeg startede med at finde skrifttype og farver. Jeg lagde
på den måde en stil med farve-swatches og de grafiske
elementer, der skulle anvendes. Og finde inspiration på
nettet til de forskellige layouts.
Herefter oprettede jeg mine Paragraph styles og sorterede dem i mapper for bedre at kunne holde et ordentligt
overblik i min liste.
Neutralisering
Overrubrikkerne er neutraliseret de steder, der har været behov for det.
3
4
Figurbrydende typografi
Jeg har arbejdet med at flere steder at lade typografien bryde de rammer og figure den
er placeret i. Dette kommer til udtryk i sidetallene, og mine titelsider.
Det næste, jeg gjorde, var at lave mine mastersider med
layout, baseline grid og sidetal.
Herefter gik jeg igang med at lave de forskellige layouts,
eksempler på disse følger. Til sidst begyndte jeg at lave
indhold til opgaven.
Layouts
Titel opluk
Titel oplukket er brugt til at præsentere nye emner, og har
navn på emnet, og en kort beskrivelse af dette.
Kvalitetsvurdering
Tekstside
Tekstsiden er brugt til de fleste indholdstekster.
Fremgangs visning
Jeg har lavet et bestemt layout til fremgangsvisninger, da
der er et par stykker af disse.
Det har været sjovt at prøve at tænke lidt ud af boksen, og lave
noget lidt anderledes. Jeg er tilfreds med resultatet, og synes det
giver et godt indblik i min personlige stil, der er stilrene linjer,
men med nye og anderledes elementer.
Af: Bjørn Nyborg
www.bjornnyborg.com
[email protected]
(+45) 53 72 90 81
Alle rettigheder forbeholdes