Portfolio H2 Bjørn Nyborg
04 12 18 26
Grafisk Design
Grafisk Produktion & workflow
Grafik & Billedbehandling
Typografi & ombrydning
Grafisk Design
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
Fakta om opgaven Opgaven 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.
Afsender BB Pixelz.
Målgruppe Dem der finder vores opgaver interessante, og evt. skal se, om vi er leveringsdygtige til det, de mangler en hånd til.
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.
Typografiske valg Rubrikker 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.
The quick brown fox jumps over the lazy dog Lato Bold
Brødtekst 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.
The quick brown fox jumps over the lazy dog Crimson Text Roman
Illustrationer og farver Billederne 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.
Farver Vi 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.
Processen Brainstorm 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.
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.
Opsætning og mark-up 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.
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.
Grafisk Produktion & workflow
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)
Fakta om opgaven Opgaven Opsætning af en funktionel webshop, som er specialudviklet helt fra bunden.
Målgruppe Børn og forældre
Ansvar Jeg har haft ansvaret for halvdelen af designet, samt alt frontend udviklingen.
Beskrivelse Layout 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.
Kvalitetskontrol 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.
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.
Grafik & Billedbehandling
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)
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 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.
Billedebehandling 1
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 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.
2
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
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.
Typografi & ombrydning
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)
Fakta om opgaven Afsender Bjørn Nyborg
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.
Typografiske valg Skriftvalg 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.
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.
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.
Neutralisering Overrubrikkerne er neutraliseret de steder, der har været behov for det.
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.
Fremgangsmåde 1
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.
3
Det næste, jeg gjorde, var at lave mine mastersider med layout, baseline grid og sidetal.
2
Herefter oprettede jeg mine Paragraph styles og sorterede dem i mapper for bedre at kunne holde et ordentligt overblik i min liste.
4
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.
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.
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.
Af: Bjørn Nyborg www.bjornnyborg.com bjornnyborg@hotmail.com (+45) 53 72 90 81 Alle rettigheder forbeholdes