GRAFISK DESIGN. Responsiv website - Mockup

Størrelse: px

Starte visningen fra side:

Download "GRAFISK DESIGN. Responsiv website - Mockup"

Holger Brandt
6 år siden
Visninger:

GRAFISK DESIGN I denne fiktive opgave skulle vi skabe et online portfolio til fotografen Sofia.

Billederne skulle være i fokus, og derfor valgte jeg at lave et simpelt site, for ikke at tage

Farven skaber blikfang og fører brugerens øjne der hen hvor det er vigtigt.

forstyrre billedet. Google fonten Quicksand Light bruges som display font.

1 GRAFISK DESIGN I denne fiktive opgave skulle vi skabe et online portfolio til fotografen Sofia. Kravet var en forside, samt en galleri side, og websitet skulle kunne bruges på bade mobil og desktop. Billederne skulle være i fokus, og derfor valgte jeg at lave et simpelt site, for ikke at tage opmærksomheden fra dem. Jeg tog inspiration i den orange farve, der gik igen i nogle af billederne. Farven skaber blikfang og fører brugerens øjne der hen hvor det er vigtigt. Jeg valgte at skabe et grafiks element der går igen på hver header, for at skabe noget interesse, uden at forstyrre billedet. Google fonten Quicksand Light bruges som display font. Den er simpel og feminin, der holder den simple stil på resten af sitet. Til brødtekst bruges fonten Jacques Francois, da den er en anderledes serif font, der både er let læslig og feminin. Responsiv website - Mockup

2 Moodboard og inspiration Galleri underside

GRAFIK Denne opgave blev givet af den Japanske Ambassade. Krav: Dato, lokation samt at adgangen var gratis skulle indgå på plakaten/flyveren. Sponsorer logoer skulle også indgå.

3 GRAFIK Denne opgave blev givet af den Japanske Ambassade. Krav: Dato, lokation samt at adgangen var gratis skulle indgå på plakaten/flyveren. Sponsorer logoer skulle også indgå. Motiv, font og farver stod dog frit, men det var et krav at der at den japanske kultur var inspiration. Jeg valgte at kombinere den opgående sol fra det japanske flag med et kirsebærtræ, for at skabe en sammenhæng til den japanske kultur og kirsebær træerne, hvor under festivalen foregår. Jeg lavede 4 slags kirsebærblade, for at skabe noget dynamik og for at undgå at bladende gik i et med hinanden. Ud fra hvert blad skabte jeg derefter en custom scatter brush, der både gav bladene forskellig størrelse, rotation og afstand til hinanden, for at skabe et naturligt look. Jeg valgte at bruge en kalligrafi font til Sakura Festival, da den både er elegant og organisk, hvilket særligt repræsentere et kirsebær træ. Dertil er kalligrafi meget stor i Japan, og skaber derfor endnu en forbindelse til den japanske kultur. Serif-fonten bliver brugt til information, da den er let at læse men stadig elegant, og skaber en god kontrast til den organiske kalligrafi font. Plakat

4 BILLEDBEHANDLING Jeg valgte at afprøve en teknik jeg længe gerne har ville afprøve, nemlig at lave et billede hvor modellen svæver. Det virkede som en bred opgave, hvor jeg ville have mulighed for at afprøve en masse forskellige tools. Da jeg gerne ville give illusionen af at modellen var i sin egen verden, en verden hun er kommet til gennem bøger, havde jeg brug for en baggrund fri for mennesker. Jeg rensede derfor baggrunden for folk, ved at bruge stamptool. Jeg valgte også at fjerne uønskede elementer som skraldespande, bygninger og nogle træer, med en blanding af stamptool og kopiering af dele af billedet. Jeg ønskede at lave en pænere himmel end den grå overskyede jeg fik med fra billedet. Jeg brugte en channel til at lave en maske. Jeg valgte den røde, da den havde mest kontrast mellem himmel og træerne. Jeg brugte derefter Apply Image med multiply som setting, for at gøre kontrasten tydligere. Jeg malede det sidste ind med en sort brush. Til sidst skabte jeg en ny himmel, ved at bruge brushes til at farvelægge himmelen og tegne skyer.

Jeg startede med at fritlægge modellen med pen-tol. Jeg valgte at skære en del af kjolen af under hende, da det derved ville være nemmere at fjerne skamlen under hende.

5 Jeg startede med at fritlægge modellen med pen-tol. Jeg valgte at skære en del af kjolen af under hende, da det derved ville være nemmere at fjerne skamlen under hende. Jeg valgte også at skære noget af håret væk for at fjerne drengen i baggrunden. Derefter tog jeg baggrundsbilledet og placerede det, som et smartfilter, bag laget med den fritlagte model. Da baggrundsbilledet ikke havde samme fokus som model billedet, brugte jeg Gaussian Blur som et smart filter, da det gav mig muligheden for at gå tilbage og rette i skabheden, samt muligheden for at skabe en maske, hvor jeg kunne lave en gradient på filteret. Jeg brugte derefter en smule Liquify på modellen, for at få en bedre afrunding på hendes numse, efter at hun havde siddet på traburetten. Jeg brugte pentool til at ind kopierer et nyt stykke af kjolen, for at få et bedre fald. Jeg brugte Patch-tool til at retoucherer hendes hud, og fjerne kanten på strømpebukserne. Til sidst brugte jeg en hård brush til at tegne nye hår ind, og brugte Gaussian Blur til at blende dem. Til sidst lagde jeg billederne med blade og bøger ind. Jeg brugte en maske til at male bøger og bladene ind på billedet og satte en feather på 5px på hver maske for at få en mere glidende overgang. Da jeg også var fotografen af billedet, tog jeg mig den frihed at lave en color correction, der passer til min personlige stil.

TYPOGRAFI Jeg blev bedt om at give et bud på Interdan s årsrapport, som der normalt bliver opsat hos Brandhouse.

grafi ske elementer blevet fjernet så de ikke havde indflydelse på mit design.

Jeg dannede et grid, med 6 kolloner og et gutter på 6 mm.

muligheder i det grafi ske udtryk. Brødteksten blev sat til 8/12, for at give luft på de teksttunge sider.

element. Billede kasserne blev skabt ud fra silhuetten fra N-et.

7 TYPOGRAFI Jeg blev bedt om at give et bud på Interdan s årsrapport, som der normalt bliver opsat hos Brandhouse. Jeg fi k udleveret den gamle 2015 årsrapport, som jeg kunne bruge som udgangspunkt, dog var alle billeder og grafi ske elementer blevet fjernet så de ikke havde indflydelse på mit design. Formatet på rapporten var 210x285mm, med en bleed på 5mm. Rapporten blev 52 sider lang, inklusiv for- og bagside. Jeg dannede et grid, med 6 kolloner og et gutter på 6 mm. Da Interdan ikke havde deres egen font, valgte jeg at bruge Helvetica Neue for en let læslig font, med mange muligheder i det grafi ske udtryk. Brødteksten blev sat til 8/12, for at give luft på de teksttunge sider. N-et i Interdan logoet er meget unikt for dem, og derfor valgte jeg at bruge det som et gennemgående grafi sk element. Billede kasserne blev skabt ud fra silhuetten fra N-et. Samtidig brugte jeg N-et til at skabe noget interesse i baggrunden, eller som et fi lter hen over billeder. Jeg skabte også et mønster med N-et, som bruges i baggrunden som en gradient. Alle farver der blev brugt, var en del af Interdans identitet. Forside og første opslag

8 Opslagseksempel Opslagseksempel

9 GRAFISK PRODUKTIONSFORSTÅELSE I denne fi ktive opgave skulle vi skabe et online portfolio til fotografen Sofi a. Kravet var en forside og en galleri side. Siden skulle kunne bruges på bade mobil og desktop. Efter design processen, var det tid til at opbygge hjemmesiden. Jeg lavede en wireframe for bedre at få overblik over hjemmesidens opbygning. For at gøre hjemmesiden responsiv valgte jeg at arbejde med width i procenter. Den vigtigste del af hjemmesiden er galleriet, og det var derfor vigtigt for mig at det virkede optimalt. Jeg valgte at bruge lightbox til at få en optimal galleri oplevelse. Billeder blev lagt i koloner med column-counts, der automatisk deler indholdet af sektionen ind i tre koloner. Da hjemmesiden nemt kunne blive meget lang, valgte jeg at lave en menu der følger med når man scroller. Det gjorde jeg ved at bruge fi xed postion, hvilket gør at menuen bliver et bestemt sted på skærmet. Mit problem var dog at menu-ikonet var designet til at være hvid, men når man scroller ned på galleri siden vil man ikke længere kunne se den, da baggrunden her var hvid. Det løste jeg ved at fi nde et jquery script der inverter billedet når det kommer ned under headeren. BODY HEADER NAV UL LI MAIN SECTION #GALLERIHEAD H1 SECTION #GALLERI IMG.THUMBNAIL.LIGHTBOX #IMG1 IMG IMG.THUMBNAIL.LIGHTBOX #IMG2 IMG FOOTER IMG IMG

Relaterede dokumenter

GRAFIK & Billedbehandling AF JULIA FRANDSEN DOKUMENTATION Jeg har valgt at slå typografi og grafik billedbehandling sammen. Her beskriver jeg alt hvad jeg har redigeret i billederne. Billederne har