Kunde Nestlé Barnmat. Brief Levering af billeder til HTML5 website

Transkript

1 1

2 Billedbehandling I kerneområdet Grafik og Billedbehandling har jeg valgt at vise et udsnit af den billedredigering jeg har lavet til en Nestlé hjemmeside. Jeg fik til opgave at stå for hele opsætningen af hjemmesidens PSD fil, samt at klargøre alle billeder til HTML5 programmering. Da HTML5 åbner op for en masse nye effekter og muligheder på hjemmesider, skulle siden laves til en sjov og anderledes oplevelse. Dette gjorde vi ved, at få en masse levende elementer ind på siden, som bevæger sig når man scroller ned på siden. Hjemmesiden havde desværre et meget kort liv og er nu blevet ændret igen, så jeg kan desværre ikke vise den live. Arbejdsproces Jeg fik leveret en masse billeder, før vi havde fået planlagt hele processen, så der var desværre ikke mulighed for at få taget billederne som jeg ville: Et billede med baggrunden uden noget emne (person, produkt, osv.) og et billede med samme opsætning, bare med emnet i billedet. Det ville have gjort arbejdet betydeligt nemmere, men da det ikke var muligt, så måtte jeg gøre det i Photoshop i stedet. Derfor startede jeg med 1 færdigt billede, og skulle så klippe emnet ud og erstatte/genskabe baggrunden, så emnet kunne glide på plads når man scrollede på hjemmesiden. Kunde Nestlé Barnmat Brief Levering af billeder til HTML5 website Produkt En række billeder med elementer i lag, så de kan animeres på website Programmer Det originale billede Det færdige billede, uden emne Jeg har brugt følgende værktøjer under processen: Fritlægning med penneværktøjet Klonings værktøj Transform Masker Levels og Curves Brush Blur og Gennemsigtighed Burn og Dodge værktøjet På følgende sider vil jeg vise hvordan jeg har arbejdet med ét specifikt billede, trin for trin. Det færdige billede, med emne 2 3

3 4 1. Fritlægning 2. Farvejustering 3. Kloning Fritlægning, med penneværktøjet, af grøntsagerne fra det originale billede, så jeg kan lægge dem i et seperat lag. Jeg har også forlænget billedet, så det passer til tværformatet på hjemmesiden. Billedet vi modtog fra fotografen havde et blåt farvestik, derfor har jeg justeret farverne ved at trække lidt blå farve ud i et Curves lag. Jeg klonede grønsagerne væk og genskabte bordet og kogepladen, som den ville se ud hvis der ikke havde været nogle grøntsager til at starte med. Der er taget højde for genskær, lys, skygge og dybde i billedet. Derefter begyndte jeg at genskabe hans arm, hvilket nok var den største udfordring. Det blev gjort i frihånd, med en lille smule kloning og en masse tegning med brush i forskellige nuancer og afsluttet med burn og dodge for at lave dybde og realisme. 4. Transform, Blur, Masker m.m. 5. Afsluttende detaljer 6. Profil og resultat For at få grøntsagerne til at passe ind på det færdige billede, har jeg genskabt de dele som var skåret væk på det originale billede, samt lagt en passende skygge mellem grøntsager og bordet. De sidste detaljer bliver lavet på ærmet, så det ser så realistisk ud som muligt. Inden billedet bliver puttet ind i den samlede PSD fil til programmørerne, sørger jeg for at billedet er i RGB og komprimerer det fra 300 dpi til 72 dpi, da det skal bruges til web. Dette gøres til sidst, for at bevare så mange detaljer som muligt, og for samtidigt at have en kopi af det ukomprimerede billede til evt. tryksager og andet materiale. 5

4 En del af de forskellige billeder jeg har arbejdet med, samt lagene fra den samlede PSD fil Grafik Til samme website, har jeg også lavet et Play ikon som skulle ligge ovenpå de film, som blev lagt på hjemmesiden. Ikonnet er lavet i Illustrator og har et simpelt design, så det ikke er et distraherende element på hjemmesiden. Arbejdsproces Ikonet har jeg bygget på følgende måde: Jeg startede med baggrunden, som er en yderkant med en gradient. Gradienten er gennemgående, da den giver dybde til knappen og gør den mere levende og spændende at kigge på. Derefter kommer selve knappens base, som har en samme gradient som yderkanten har, dog vinklet modsat. Dette er igen med til at tilføje dybde i grafikken. Så kommer selve Play ikonet. Dette er i form af en simpel trekant med en lysegrå farve. Til sidst er der blevet lavet et lysskær, med en lys gradient og en lav opacitet, hen over knappen for at tilføje en 3D effekt. Kunde Nestlé Barnmat Brief Grafik i form af et Play ikon Produkt Et simpelt og diskret ikon til brug som overlay på filmene på hjemmesiden Programmer Eksempel på brug af Play ikonnet 6 7

5 Arbejdsproces 1. Yderkant 2. Baggrund 3. Play symbol 4. Gradient lag som bliver til lysskær 5. Ændring af path ved brug af penneværktøjet 6. Opacitet fra 100% til 30% 8