1Portfolio H2
Bjørn Nyborg
04121826
Grafisk Design
Grafisk Produktion & workflow
Grafik & Billedbehandling
Typografi & ombrydning
4Grafisk Design
5
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 re-ferencer, og have en lille blog, som skulle være pænere grafisk præsenteret end vores daværende hjemmeside.
Medie: www.bbpixelz.dk
6
Fakta om opgaven
OpgavenJeg skulle fremstille en funktionel, simpel, men flot hjemmeside til BB Pixelz, hvis pri-mæ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.
AfsenderBB Pixelz.
MålgruppeDem der finder vores opgaver interessante, og evt. skal se, om vi er leveringsdygtige til det, de mangler en hånd til.
AnsvarJeg 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.
7
Typografiske valg
RubrikkerTil alle vores rubrikker, har vi valgt at bruge “Lato Bold”, som er en helt ren og letlæse-lig sans-serif font. Dette har vi valgt da, når man skimmer siden, lynhurtigt skal kunne spotte den information man er på udkig efter.
The quick brown fox jumps over the lazy dogLato Bold
BrødtekstTil 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.
The quick brown fox jumps over the lazy dogCrimson Text Roman
8
Illustrationer og farver
BillederneDe 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.
FarverVi har kørt farvere i det allerede fastsatte farveskema, for at skabe en genkendelighed, og være tro mod brandets visuelle identitet.
#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.
9
Processen
BrainstormDet 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.
Designforslag og mockupsHerefter 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.
Opsætning og mark-upHerefter 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.
Optimering og tilpasningLige 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.
10
Kvalitetsvurdering
Jeg føler virkelig, at vi har klaret denne opgave til godt. Hjem-mesiden er blevet super lækker, nem at navigere rundt på, fun-gerer som den skal på alle enheder og lever op til de nyeste stan-darder. 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.
Grafisk Produktion & workflow
13
Introduktion til opgaven
I min fritid er jeg i gang med et projekt, hvor vi er nogle styk-ker 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)
14
Fakta om opgaven
OpgavenOpsætning af en funktionel webshop, som er specialudviklet helt fra bunden.
MålgruppeBørn og forældre
AnsvarJeg har haft ansvaret for halvdelen af designet, samt alt frontend udviklingen.
15
Beskrivelse
LayoutLayoutet 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.
KvalitetskontrolHjemmesiden 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.
StandarderSom nævnt ovenover er det en HTML5 side, som er valideret til at leve op til stan-darden. 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.
16
Processen
Samtale omkring krav,forventninger, tanker ogbrainstorm omkring dennye hjemmeside.
Layout produceres iphotoshop, og der bliver“ping-pong’et” frem ogtilbage om produktet.
Da vi var tilfredse medresultatet, kiggede vi påfunktioner og smarteeffekter, vi skulle have.
Herefter startede kod-ningen, hvor vi benyt-tede Bootstrap 3 og fik lavet vores funktioner og styling.
Så kom vores kvalitets-kontrol, her validerede vi W3C og gennemgik i forskellige browsere.
Da alt dette var, som vi ville have, sendte jeg si-den videre til fyren som skal lave selve betalings implementering, samt database opsætningen.
17
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ærm-størrelser. Dette gør at siden også er en lækker oplevelse, på mobile enheder.
18Grafik & Billedbehandling
19
Introduktion til opgaven
Jeg har på min praktikplads fået den opgave at behandle et fik-tivt billede til et Dansani katalog.
Medie: Dansani katalog (Fiktivt)
20
Fakta om opgaven
OpgavenØrskov Gruppen laver bl.a. kataloger for Dansani. I dissekataloger er der en helt masse billeder og sådan et, skulle jeglave (Billedet blev dog ikke brugt). Det foregår sådan, at enfotograf 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.
ProgramvalgJeg har udelukkende brugt Photoshop CS 5.1.
AnsvarJeg har stået for alt i denne opgave. Alt jeg fik, var startbilledet og et katalog med eksempler på redigeringen. Jeg løsteopgaven med tips fra de andre grafikere i huset.
DistributionBilledet blev ikke distribueret.
21
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”.
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.
Billedebehandling
1 2
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 per-spektivet 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.
3 4
22
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 forskelli-ge muligheder, “Perspective”, “Skew” osv. Indtil gulvet og væggene var, hvor de skulle være i forhold til mit grid.
Det næste jeg gjorde var at vælge mit startlag gå til “Chan-nels” 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.
Billedebehandling
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.
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.
5 6
7 8
23
Billedebehandling
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.
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.
Til sidst justerede jeg billedet ved at lave et Levels juste-ring-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
9 10
11
24
Kvalitetsvurdering
Farvestyring og opløsningJeg har igennem hele workflowet holdt billedet og de impor-terede elementer i sRGB, da dette er den profil, fotografen har givet billederne fra starten. Derfor har jeg, for at bevare fo-tografens farveindstillinger, bevaret profilen. Jeg har “Down samplet” billedet, selvom det er rigtig stort, fordi billederne bli-ver brugt til helsidesindslag i kataloget.
VurderingJeg er rigtig godt tilfreds med resultatet, da jeg har opnået det ønskede “Dansani - look”, og jeg har været vidt omkring i op-gaven. Har lavet alt fra justeringer og fritlægninger til effekter, perspektivering og farvestyrring.
25
26Typografi & ombrydning
27
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)
28
Fakta om opgaven
AfsenderBjørn Nyborg
MålgruppeMålgruppen er alle, der kunne have interesse i at se min portfolio. Primært grafikere.
DistributionDer er en pdf til fri download på min hjemmeside.
29
SkriftvalgTil 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.
The quick brown fox jumps over the lazy dogOpen 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 dogCrimson Text Roman
SatsformerLøs bagkant er anvendt til brødteksten, og hovedrubrikkerne er centreret.På titelsiderne har jeg højrestillet overskriften for æstetikkens skyld.
Punktstørrelse/skydningJeg 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.
Typografiske valg
30
Typografiske detaljer
LinjelængdeLinjerne 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.
NeutraliseringOverrubrikkerne er neutraliseret de steder, der har været behov for det.
Figurbrydende typografiJeg 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.
31
Fremgangsmåde
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 sortere-de dem i mapper for bedre at kunne holde et ordentligt overblik i min liste.
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.
1
3 4
2
32
Layouts
Titel oplukTitel oplukket er brugt til at præsentere nye emner, og har navn på emnet, og en kort beskrivelse af dette.
TekstsideTekstsiden er brugt til de fleste indholdstekster.
Fremgangs visningJeg har lavet et bestemt layout til fremgangsvisninger, da der er et par stykker af disse.
33
Kvalitetsvurdering
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.
Recommended
