Design til digitale kommunikationsplatforme - Formiddag (Hold 1), IT-Universitetet, Efterår 2013 Øvelse 4, individuel øvelse Photoshop: Billedredigering og mockups 1. Lidt om hvad du har lært Nu er du snart ved at være ekspert i HTML og CSS. Du har flere gange prøvet at opbygge og strukturere dit HTML-dokument og har et par gange prøvet at style med CSS. 1.1. Baggrund for øvelsen Digitale designere benytter sig også bl.a. af skitser i de tidlige designfaser. Skitser og prototyping er noget, vi skal arbejde med senere på kurset. Når designidéerne er blevet fastlagt bl.a. gennem skitseringsarbejde, kan designeren begynde på en mere konkret eksekvering af designet. Her benyttes oftes Adobe Photoshop, som efterhånden er blevet industri-standard indenfor designeksekvering til bl.a. web. Det kan være en fordel at arbejde med skitser, style tiles og mock-ups, hvor man lægger designet på pladt i Photoshop, før man går i gang med implementeringen i eksempelvis HTML og CSS. Photoshop ligger inde med et væld af funktioner, som afspejler programmets mange anvendelsesmuligheder. Som navnet måske antyder, opstod programmet primært til at dække behov indenfor billedbehandling - det gør det stadigvæk men bruges nu ligeledes som designværktøj. Photoshop tager mange års træning at mestre, og der vil altid være funktionalitet og teknikker som vil være nye for en ligemeget hvor dygtig man bliver. Der er derfor intet underligt i, at Photoshop kan virke som en lidt skræmmende oplevelse, første gang man bruger det. Men mit bedste råd er, at kaste sig ud i det - og bruge noget fritid på at sidde og lege med det. 2. Målsætning Dagens øvelse vil fokusere på at introducere Adobe Photoshops opbygning og nogle basale funktioner, som du senere kan anvende, når du skal eksekvere på dine egne designprojekter. Dette er en individuel øvelse. Du vil ikke få grundige gennemgange af funktionerne men kun en beskrivelse af, hvordan du kan bruge dem i denne øvelse. Hvis du har brug for dette henvises til Photoshops egen hjælp, tutorials på Lynda.com (hvis du har adgang), litteratur om emnet og selvfølgelig til internettet.
Bemærk at skærmbilleder i denne øvelse er taget på en af skolens PC ere (med CS6), du vil derfor kunne opleve mindre forskelle, hvis du sidder på en Mac eller med en anden version af Photoshop. 3. Beskrivelse Adobe Photoshop CS6 (eller andre versioner) har som nævnt et væld af funktioner og derfor også mange forskellige måder at gøre nøjagtigt det samme på. Denne øvelse består af to designopgaver: 1. Billedredigering: Denne del vil overfladisk vise dig, hvordan en simpel billedredigering kan løses. Du vil ikke blive bedt om at være særligt kreativ - men simpelthen følge anvisningerne. Dette er ofte en effektiv metode til at afprøve Photoshops mange muligheder på. 2. Mini-mockup: Her vil du blive bedt om at genskabe en android-app - du skal tegne efter. Selvom det kan virke lidt underligt er det en fantastisk måde at lære hvordan man kan gribe et design an i Photoshop. 4. Photoshop På ITU s computere finder du Photoshop her: Start > All Programs > Adobe Master Collection CS6 > Adobe Photoshop CS6 4.1. Introduktion til Photoshop Du vil i de følgende øvelsesdele benytte en række forskellige værktøjer, koncepter og funktioner i Photoshop. Jeg vil kort introducere dem her: Lag I Photoshop arbejder du i lag. Dvs. at de enkelte elementer i billedredigeringen ligger ovenpå eller under andre lag. Du arbejder i ét lag ad gangen. Vær opmærksom på, hvilket lag, der er aktivt, når du arbejder. Lagene ser du i højre side som felter, du kan klikke på og markere som aktive. Du kan også klikke dem væk uden at slette dem - hvis du.f.eks. gerne vil se effekten af et lag. Justeringslag Et justeringslag er et lag, der ikke består af pixels eller vector-grafik. Det lægger sig som default ovenpå andre lag
ligesom almindelige grafik-lag. Paneler Photoshop består af paneler, som du kan flytte, udvide eller ændre. Der er meget at overskue og du kan hurtigt komme til at flytte rundt eller fjerne dem, hvis du kommer til at klikke og trække i dem. Panelerne udgør som default værktøjsmenuen i venstre side og lag-menuen sammen med ikon-panelet i højre side. Derudover er der en række funktionsområder, som varierer alt efter de specifikke egenskaber for det enkelte justeringslag (i højre side) eller værktøj (øverst i vinduet - se illustration nedenfor). Læg mærke til, at panelet i højre side også rummer fanebreve, der gemmer på ekstra funktioner. Disse er ofte forskellige tilgange til de enkelte elementer. F.eks. arbejder vi i Layers (lag) i denne øvelse, men Channels og Paths-fanebrevene gemmer på funktioner, der vedrører de enkelte farvekanaler og vektor-funktioner. Menupunkterne Programmenuen rummer File, Edit, Image, Layer, Select, Filter, Analysis, 3D, View, Window og Help. Her har du adgang til en række forskellige funktioner. Læg mærke til, hvordan de fleste menu-punkter har en genvejsfunktion i form af en tastekombination. Du kan forbedre dit workflow betragteligt, hvis du lærer dig selv nogle af disse genveje. Også værktøjer har genvejstaster - de kan ses ved tryk eller hover over værktøjets ikon. Værktøjer og funktioner I dag skal vi fokusere på nogle af de mest centrale værktøjer i Photoshop (venstre panel): Move (V) Selektionsværktøjer (Marquee (M), Lasso (L) og Wand/Quick Selection (W)) Crop (C) Healing (J) Brush (B) Type (T) Path (A)
Shape (U) Vi vil benytte os af en række funktioner (højre panel): Layer Style Layer Mask Blend Modes og Opacity Adjustment Layer (Levels, Curves, Gradient) Groups Delete Layer History I programmenuen vil vi bl.a. besøge disse: Filter Select Layer Image 5. Billedredigering 5.1. Download forberedt billedmateriale (eller brug dit eget) Du er velkommen til at bruge dine egne billeder. Men jeg har pakket en samling af mine egne uredigerede fotografier, som du kan øve dig på. Dem finder du her: bit.ly/ddkp13_4extra (35,7MB) 5.2. Gør klar til at optimere billedet Når du åbner en jpg-fil i Photoshop vil du se, at billedet er det eneste lag i filen. I denne øvelse vil vi arbejde på en måde, hvor vi ikke skader de originale filer. På den måde kan vi eksperimentere uden at tabe kvalitet eller gå for langt tilbage i processen for at rette eventuelle fejl. Derfor skal du som det første kopiere dit billed-lag ved at markere laget og trykke CTRL+J eller højreklikke og vælge Duplicate layer Nu har du to lag. Din kopi ligger øverst. 5.3. Juster skygger og højlys Mange billeder mangler noget kant og noget kontrast. De det får dem til at virke flade. Det kan du rette ved at bruge Levels eller Curves. Tilføj et justeringslag ovenpå dine billedlag. I Photoshop kan du gøre det på mange måder. Klik f.eks. nederst til højre og vælg Levels
I Properties-vinduet kan du nu se et histogram med kurver, der indikerer lys og mørke-forholdene i dit dokument. Til venstre på aksen ser du skyggerne og til højre højlysene. Ved at trække i den sorte og hvide trekant ved histogrammet kan du ændre ved lys og mørke. Har dit billede sorte områder, skal kurven ende ved den sorte trekant til venstre. Træk evt. i trekanterne som ovenfor for at gøre skyggerne mørkere og højlysene lysere. Vil du have mere kontrol og lys og kontrast, så brug Curves. Du sletter Levels-justeringslaget ved at trække laget i højre panel ned til skraldespands-ikonet: Klik på igen og vælg Curves Nu ser Properties-vinduet sådan her ud:
I hvert fald næsten. Som du ser, har jeg i eksemplet her allerede trukket i linjen. Som i Levels har jeg trukket den sorte trekant mod højre for at gøre skyggerne mørkere. Linjen har jeg trukket i for at lave en svag S-form. Ved at trække ned i venstre side, gør jeg skyggeområderne mørkere. Trækker jeg op i højre side af den diagonale linje, bliver de lysere områder i billedet lysere. Prøv at eksperimentere ved at trække i de forkellige dele for at se forskellen. Det kan hurtigt blive grimt. 5.4. Layer mask Lagmasker kan bruges til at skjule dele af et lag. Har du f.eks. lavet et justeringslag, der kun skal gælde et vist område af billedet, kan du skjule resten med Layer Mask: (Nederst til højre). Prøv at tilføje et justeringslag for Hue/Saturation I Properties-vindues kan du trække alle farver ud af billedet ved at trække trekanten for Saturation helt til venstre. Alt er nu gråt. Men det kan du gøre noget ved. Klikker du på Layer Mask, tilføjer du en maske til det aktiverede lag. Masken er en hvid rektangel ved siden af det lag, det hører til. Har du lavet et justeringslag f.eks. med Levels eller Curves er det allerede tilføjet. Det skyldes, at mange justeringer typisk kun skal gælde dele af dokumentet. Prøv at vælge Brush Tool (B). Sørg for at have en sort farve som forgrundsfarve i paletten til
venstre. Du kan nustille for- og baggrundsfarve ved at trykke D. Du kan skifte mellem de to ved at trykke X. Sørg for at have valgt din Layer Mask - klik på det hvide rektangel. Med en sort pensel kan du nu male din justering væk på dele af dit billede. Du kan male farverne frem igen, hvis du bruger en sort pensel på dit Hue/Saturation-lag. Er din pensel en forkert størrelse eller blødhed, kan du ændre det i værktøjsmenuen øverst, når du har valgt Brush (B): Klik, hvor der står 13 i eksemplet her og vælg den rette pensel til jobbet. Mal til og fra på din(e) lagmasker. Tilføj evt. justeringslag. 5.5. Kapow til din skarphed Nogle gange er det ikke nok at justere dit billede. Du kan i Photoshop tilføje forskellige filtre til dit billede. Men filtrene virker direkte på dit pixel-lag. Derfor skal du nu lave en kopi af dit arbejde indtil videre i et nyt lag. Sørg for at vælge det øverste lag i menuen til højre. Tryk så SHIFT+CTRL+ALT+E på én gang. Nu får du et helt nyt lag, hvor alle dine justeringer er påført. Dine originale billeder og lag er der stadig. De ligger bare nedenunder. Prøv evt. at trække laget for den kopi af originalbilledet, du lavede først i øvelsen, op ovenover dit øverste lag. Klik det væk igen ved at klikke på ikonet til venstre for det, der forestiller et øje: tydeligt.. Så kan du se forskellene Nu vil jeg have dig til at markere det samlede lag, du lavede før. Derefter skal du i programmenuen klikke Filter > Sharpen og vælge Unsharp Mask I Filter-vinduet sætter du Amount til 50% samt Radius til mellem 15 og 150 Pixels. Kan du se effekten? (Husk flueben i Preview). Det må gerne være overdrevet. F.eks. 180% i stedet for 50%. Klik OK. Du kan nu justere Filter-styrken på flere måder. Det er det gode ved Photoshop og det at arbejde i lag: Du kan altid nedjustere en effekt. Prøv at ændr Opacity for dit lag med Unsharp Mask-filtereffekten i Layers-panelet til højre: Du kan også skifte Blend Mode fra Normal til f.eks. Overlay for en rå og mere ekstrem effekt. Prøv at skifte tilbage til 100% Opacity. Eksperimenter så med blend modes, til du finder en passende effekt. Er den for kraftig, så juster Opacity, når du har valgt blend mode. 5.6. De sidste justeringer Nu har du leget lidt med forskellige optimeringer af dit billede. Der er stadig en masse andre ting,
du kan pille ved. Er du ikke helt tilfreds og vil du gerne ændre noget andet en lysforhold, kontrast, farver og skarphed, så spørg en TA eller tag fat i mig. Nu skal du bruge din viden om kompositioner til at klippe billedet helt rigtigt til. Vælg Crop Tool (C) i værktøjsmenuen. Du kan nu trække en ramme over billedet, så du klipper det til i en passende komposition og proportion. I menuen for Crop Tool oppe i højre hjørne kan du eventuelt vælge proportioner, inden du trækker dit crop tool udover billedet. Når du har trukket Crop Tool ud over billedet, kan du justere størrelsen ved at trække i siderne eller hjørnerne. I hjørnerne kan du også dreje billedet, hvis du f.eks. skal rette en horisont eller vælge en skæv komposition for mere action. Vil du flytte din crop-markering, så brug piletasterne eller træk med markøren midt i markeringen. Tryk ENTER eller fluebenet øverst til højre for at klippe billedet til. Gik noget galt? Tryk straks CTRL+Z for at fortryde dit Crop. Ellers gå videre til næste trin: Gem. 5.7. Gem dit billede Hvis du ikke allerede har gemt din arbejdsfil, så gør det nu. Vælg formatet.psd. På den måde bevarer du dine lag og kan vende tilbage og arbejde videre senere. Når du har gemt din psd-fil, skal du eksportere dit arbejde til et komprimeret format, du kan bruge online. Gem derefter til et web-format. Vælg File > Save for web og vælg et passende billedformat, samt en kvalitet som tilgodeser filstørrelse, uden at det ødelægger, det kvalitetsniveau du ønsker. Alternativt: Vælg File > Save as for at gemme billedet i sin originalstørrelse. Her skal du også vælge en passende filtype og komprimering, der passer til web. 5.8. Rediger mindst fem billeder Brug din nyerhvervede viden om basal billedredigering og Photoshop til at redigere yderligere mindst fire billeder. Du er velkommen til at tilføje nye filtre, justeringslag eller andre effekter, som øvelsen ikke har været omkring endnu. Overvej at vente med de sidste billeder til du har lavet sidste del af denne øvelse. 6. Mini-mockup Billedredigering er én ting. Photoshop kan så meget mere - og du har brug for at kunne meget mere for at lave f.eks. et mockup af dit design. Denne del af øvelsen vil udfordre dig til at lære nogle flere funktioner og værktøjer i Photoshop at kende. Samtidig vil den bidrage til at du får øje for detaljerne i grafisk design.
6.1. Åbn et screenshot af en smartphone-app i Photoshop I det forberedte øvelsesmateriale finder du et screenshot af nogle forskellige af mine apps på min Android-telefon. Du er velkommen til at bruge din egen yndlings-app i stedet. Når du har valgt en app og åbnet dit screenshot kan du med fordel begynde som i først del af øvelsen med at tage en kopi af laget med CTRL+J. Du vil i denne del af øvelsen ikke blive guidet gennem processen at lave et mockup. I stedet vil du blive præsenteret for de værktøjer, du umiddelbart skal bruge. 6.2. Rulers og Guidelines CTRL+R slår linealerne i venstre side og toppen til og fra. Ved at trykke med venstre museknap og trække en linje fra en af linealerne kan du lave horisontale og vertikale guidelines til at hjælpe dig med at aligne dine elementer. En guideline kan ikke ses i eksporterede filer, men er en del af interfacet i Photoshop, som du kan slå til og fra med CTRL+H. Brug guidelines til at markere det grid, som elementerne i designet læner sig op af. På den måde vil de former, figurer og tekster, du tilføjer nærmest magnetisk lægge sig op ad dine guidelines. 6.3. Fill Layer Du kender allerede justeringslag. -ikonet giver adgang til forskellige Fill Layers, der bl.a. kan bruges til at lave baggrunde. Ved tryk på ikonet kan du vælge Solid Color, Gradient eller Pattern og på den måde f.eks. tilføje en hvid baggrund (Solid Color ) eller en grøn, der gradvist går fra mørk til lys grøn (Gradient ) 6.4. Shapes I værktøjsmenuen finder du Shape Tool (U) og lave forskellige figurer som f.eks. bokse, cirkler eller mere avancerede symbolformer. Ved at bruge shapes kan du nemt lave en figur, du kan ændre uden at tabe kvalitet. Samtidig kan du style shapes med gradienter, borders, skygger og andet. Du kommer til at bruge dette værktøj både som rectangle tool, rounded rectangle tool og måske ellipse tool. Hold venstre museknap inde på værktøjsikonet for shape tool og vælg den rette form i den ekstra menu, der dukker frem. Tip: Hold proportionerne på et element ved at holde Shift inde, når du laver en shape. F.eks. når du bruger ellipse-figuren, hvis du skal have en cirkel - eller ved rectangle tool for at få et kvadrat. 6.5. Layer Style Med denne funktion kan du lægge effekter på et lag. I denne øvelse er en layer style (eller flere) i kombination med et shape-lag en rigtigt god idé. Ved at klikke på -ikonet kan du vælge Drop
Shadow og føje en skygge til en boks-shape. Ligesom i CSS. Du kan også lave border som i CSS. Det hedder bare Stroke Skal du lave en boks eller knap med en gradueret baggrund, kan du vælge Gradient Overlay 6.6. Type Tool Typografiske elementer er ofte centrale i denne type designløsninger. I værktøjsmenuen til venstre kan du vælge Type Tool (T). Med dette værktøj laver du et tekstlag, som du kan redigere i, flytte og manipulere på forskellig vis. I denne øvelse vil du få brug for i Type Tools funktionspanel (øverst til venstre) at ændre text color, font size, font family og nok også anti-aliasing method. Skal du flytte på teksten vælger du Move Tool (V) og værktøjsmenuen. 6.7. Gruppér lag Du vil hurtigt få mange uoverskuelige lag i dit dokument. Ved at klikke på -ikonet (Groups) kan du lave mapper til dine lag. Det er en god måde at bevare overskueligheden på. Lav f.eks. en gruppe til hvert enkelt type design-element. Bare husk, at grupper af lag stadig ligger ovenpå og under hinanden. Så du kan ikke flytte rundt på dem, som du vil. 6.8. Zoom og flyt dit lærred Du zoomer nemt med CTRL++ (zoom ind) eller CTRL+- (zoom ud). Vil du se hele lærredet på én gang kan du bruge CTRL+0. Men du kan også bruge Zoom Tool (Z) ved at klikke på -ikonet i værktøjspanelet i venstre side. Er du zoomet helt ind for at se detaljer kan du bruge mellemrumstasten SPACE i kombination med klik med venstre museknap på lærredet til at trække den del af lærredet du gerne vil se. 6.9. Flyt rundt, skalér og rotér elementer Move Tool (V) kan bruges til meget - og hele tiden. Vil du gerne lave en shape mindre eller større trykker du CTRL+T (Transform) - så kan du trække i sider og hjørner. Husk at bruge SHIFT, hvis du vil bevare proportionerne på dit element. Skal noget drejes bruger du også CTRL+T og roterer elementet ved at dreje ved hjørnerne. 6.10. Gem Du skal gemme dit arbejde som Photoshop-fil (psd). Når du er færdig, skal du eksportere det til et web-format, som du finder passende. Inden du eksporterer kan du tage kopien af original-laget og flytte det op for oven i dine lag for at se, om du mangler nogle detaljer. Brug siden af laget til at klikke det til og fra. Gem så arbejdet. -ikonet ved
7. Aflevering Din deadline for aflevering er tirsdag den 8. oktober inden kl 18.00. Du har altså en ca. uge til at poste et link til en mappe, hvori dine efterbehandlede billeder og din app-efterligning ligger som originale Photoshop-filer (psd-filer) så vi kan se, hvordan du har grebet øvelsen an. Post eksempelvis www.itu.dk/people/dit_brugernavn/oevelse4 på kursusbloggen - på den side, der hører til din hjælpelærer. Du poster bare linket som en kommentar på samme måde som med de tidligere øvelser. 7.1. Tjekliste Af din aflevering skal det være synligt, at du har været igennem denne øvelse. Det betyder, at: Øvelsen er udarbejdet individuelt. At du har optimeret mindst fem billeder (fotografier) Efterlignet en af de apps, der er med i øvelsesmaterialet - eller at du har efterlignet en tilsvarende, men mere avanceret app efter eget valg. Brugt de nødvendige værktøjer for at gennemføre efterligningen - dvs. at du ikke har overført grafik direkte fra dit screen-shot. Uploadet en psd-fil med alle lag og effekter intakte så vi kan se hvad du har foretaget dig.