GRAFIK OG BILLEDE MAC MOCKUP

Transkript

1 GRAFIK OG BILLEDE MAC MOCKUP

2

3 HVAD, HVORFOR OG HVORDAN? HVAD GÅR OPGAVEN UD PÅ? Opgaven jeg blev stillet var at tage en masse billeder af imacs, iphones, Macbooks og ipads, og lave disse til mockups. Disse mockups skal brugs på makeable.dk. Jeg har valgt at tage udgangs punkt i et, men de er alle lavet på mere eller mindre samme måde. HVAD ER DIT BIDRAG? Jeg har stået for hele processen, det vil sige at jeg har taget billederne, redigeret billederne, og til sidst lagt dem ud på makeable.dk under de rigtige cases, med de rigtige skærmbilleder i de forskellige Smart Objects. Dette betyder også at jeg har stået for at alle billederne stadig ser gode ud efter de har været gennem en minimerings proces. PROGRAMVALG Jeg har valgt at lave billederne i Photoshop, da dette er det bedst program til billedebehandling. Jeg har i denne opgave ikke haft brug for at lave noget i Illustrator eller Indesign. ARBEJDSPROCES Min arbejdsproces har været meget normal i denne opgave, jeg startede med at tage billedet i raw format og åbne det i Photoshop (jeg plejer ikke at bruge de forskellige sliders der kommer når man åbner et raw billede. Det gør jeg ikke fordi jeg har det bedre med hurtigt at kunne rette det til med forskellige Adjustment layers). Som det første spejlvendte jeg billedet for at få det rigtige udtryk frem i billedet. Efter det begyndte jeg at lave en rå fritlægning af vinduerne, da det skulle være muligt at skifte baggrunden uden for, for at give mere stemning, efter det lavede jeg farve korrigering med Adjustment layers. Herefter lavede jeg et Smart Object i samme størrelse som en alm. skærmopløsning. Jeg brugte derefter Transform til at få Smart Objectet til at ligge rigtigt. lavede dette lag med et normalt lag, som jeg farvede sort, derefter lagde jeg et Noice filter på. Til sidst gav jeg laget en Blending Option som hedder Difference. Dette gjorde jeg fordi jeg derved kunne få alt sort væk fra laget og kun bibeholde de pixels som jeg skulle bruge. Derefter skar jeg billedet til i de rigtige dimensioner med Crop Tool derefter var billedet færdigt til at blive resized og komme gennem minimerings procesen (til minimerings processen brugte jeg tinypng.com). ARBEJDES PROCESSEN KAN SES MERE DETALJERET PÅ DE FØLGENDE SIDER. OPSTART OG SLUT KVALITET Billedet jeg brugte var ret fint til at starte med, der var dog nogle små rystelser lidt hist og her, og dem har jeg valgt at beholde for at få billedet til at se mere rigtigt ud da der er meget der er blevet lavet om. Billedet der er brugt i baggrunden var meget lille, så da jeg skalerede det op, blev det meget pixeleret. Men det var ikke noget problem, da billedet alligevel skulle have en stor blur effekt. KVALITETSVURDERING Kvaliteten af slut resultatet er blevet ret god. Billedet er lavet i fuld størrelse, det vil sige at det er 6016 X 3901px istedet for de 2000 X 1297px som er den størrelse det skal have på makeable.dk. Jeg kan især godt lide kontrasterne i det der er sløret, og det der er skarpt på billedet. Jeg synes jeg er kommet frem til et mockup der ser rigtig professionelt ud. Derudover synes jeg det er en fed feature at man kan skifte baggrunden uden for vinduet ud med en anden. Det kommer til at give illusionen af at billedet ikke bliver genbrugt alt for tit. Der er generelt ikke rigtig noget jeg ikke kunne lide ved slut resultatet. Jeg synes jeg har løst den bedre end jeg havde forventet. Selv tasteturet (som også er blevet Photoshoppet ind) er kommet til at se helt rigtigt ud. Derefter begyndte jeg at rette tastaturet til (dette vendte forkert efter som at jeg spejlvendte billedet til at starte med). Efter det lagde jeg det rigtige billede ind i Smart Objectet. Efter det lagde jeg et Noice lag ind, dette lag giver billedet mere støj og få det hele til at se mere rigtigt ud. Jeg GRAFIK OG BILLEDE KASPER MØLGAARD SIDE 3

4 ORIGINAL BILLEDE SIDE 4 KASPER MØLGAARD GRAFIK OG BILLEDE

5 ARBRJDS PROCES CLONE STAMP TOOL LASSO TOOL SPEJLVENDING AF BILLEDET HIGHLIGHT PÅ GULV Jeg startede med at lave hullerne i billedet (der kom efter spejlvendingen) med Clone Stamp Tool. Derefter brugte jeg Lasso Tool til at lave den rigtige form på highlighten på gulvet, efter dette lavede jeg et Blur filter på laget. KASPER MØLGAARD GRAFIK OG BILLEDE SIDE 5

6 FRITLÆGNING AF VINDUER PEN TOOL Jeg bruger her Refine Mask til at få fritlægningen rundt om skærmen og bordet til at se rigtig ud. Da vindues rammen skulle være mere sløret, bekymrede jeg mig ikke så meget om denne. SIDE 6 KASPER MØLGAARD GRAFIK OG BILLEDE

7 ADJUSTMENTS LAYERS CURVES LAYER COLOR BALANCE LAYER LEVELS LAYER EFTER ALLE TRE ADJUSTMENTS LAYERS Jeg valgte at bruge tre Adjustments Layers til opgaven. Jeg har valgt både at bruge et Curves og Levels lag. Det har jeg valgt fordi det er nemmere at styre sort/hvid kontrasterne med begge to, frem for kun det ene. Derudover brugte jeg et Color Balance lag til at fjerne noget af den gule farve som er i original billedet. KASPER MØLGAARD GRAFIK OG BILLEDE SIDE 7

8 SMART OBJECT PÅ SKÆRMEN Efter jeg havde fået Smart Objectet til at passe med skærmen, lagde jeg et Blur filter på, for at få det nye skærmbillede til at passe med det gamle. Jeg rettede blur effekten til ved at bruge den maske der normalt kommer med fra et Blur filteret. SIDE 8 KASPER MØLGAARD GRAFIK OG BILLEDE

9 BAGGRUNDS BILLEDET Jeg brugte her igen et Blur filter til at lave blur effekten på baggrunds billedet. KASPER MØLGAARD GRAFIK OG BILLEDE SIDE 9

10 TASTATURET - FORSVINDER OG KOMMER IGEN CLONE STAMP TOOL Jeg startede med at fjerne det gamle tastatur med Clone Stamp Tool. Efter det fandt jeg et bedre billede af et tastetur og lagde ind. SIDE 10 KASPER MØLGAARD GRAFIK OG BILLEDE

11 BRUSH TOOL Efter det fritlagde jeg det nye tastaturet, og fik det rasterende til at passe med pladen hvor det gamle tastatur var. Som det sidste lavede jeg en highlight som passerede med den gamle. Jeg brugte en Drop Shadow effekt til at få tasterne til at se tre dimensionelle ud, og brugte derefter Brush Tool til at lave highlights på tasterne hvor de skulle være. KASPER MØLGAARD GRAFIK OG BILLEDE SIDE 11

12 DET FÆRDIGE PRODUKT SIDE 12 KASPER MØLGAARD GRAFIK OG BILLEDE