Introduktion til Photoshop

Transkript

1 Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår Introduktion til Photoshop 1. Lidt om hvad du har lært Nu er du snart ved at være ekspert i (X)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. 2. Baggrund for denne øvelse Webdesignere 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 industristandard indenfor designeksekvering til web. Det er ofte en fordel at arbejde med skitser og mock-ups, dernæst arbejde i Photoshop indtil designet er lagt helt på plads og så først til allersidst gå i gang med implementeringen i eksempelvis (X)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 vores bedste råd er, at kaste sig ud i det - og bruge noget fritid på at sidde og lege med det. 3. Målsætning Dagens øvelse vil ligesom de forrige ikke være kreativ, men vil fokusere på at introducere Adobe Photoshops opbygning og nogle basale funktioner, som du senere kan anvende, når du skal eksekvere på fine egne designprojekter. Dette er en individuel øvelse. Du vil bl.a. prøve at arbejde med Layers. Du vil prøve at lave en Gradient. Du vil arbejde med 1

2 Blending mode og Opacity. Ydeligere vil du prøve at placere vektorgrafik og ændre størrelse på det. Du vil også prøve at tegne med Photoshops Brush tool. Du vil ligeledes prøve at lave en meget grov afmaskning med Photoshops Mask funktion. Til sidst vil du afprøve Photoshops Save for web funktion. Du vil ikke få grundige gennemgange af funktionerne men kun en beskrivelse af, hvad du skal gøre 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 alle skærmbilleder i denne øvelse er taget på en Mac-computer (med CS4), du vil derfor kunne opleve mindre forskelle, hvis du sidder på en PC. 4. Beskrivelse Adobe Photoshop CS5 (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 vil overfladisk vise dig, hvordan en simpel designopgave kan løses - du vil ikke blive bedt om at være kreativ - men simpelthen kopiere et slutprodukt. Dette er ofte en effektiv metode til at afprøve Photoshops mange muligheder på. Dagens opgave er, at udarbejde et web-banner for filmen The Western. Web-bannere er altid bestemt af faste dimensioner, og da vi skal eksportere til en skærm, skal vi tænke i pixels. Vi har valgt et højt bannerformat, også kaldt et skyskraber-banner (160 pixels i bredden og 600 i højden). Hvis du hellere vil aflevere dit banner i et andet af standardformat, er du selvfølgelig velkommen til det. (Klik ind på ind på FDIM s (Foreningen for Danske Intermedier) hjemmeside for at se eksempler på danske standardformater - Hvis du bare hader western-film, er du naturligvis velkommen til at vælge et andet tema, når blot du følger de skridt, der er i opgaven. Du kan også vælge om du vil vise en mandlig eller kvindelig cowboy. 5. Øvelsen 5.1. Download forberedt billedmateriale Først skal du downloade de billeder, som du skal bruge i banneret. Hvis du vælger at udarbejde et banner på egen hånd kan du eksempelvis bruge Google billedsøgning. Billederne til Obama banneret er lagt i en zip-mappe, som du gemmer og pakker ud på din computer. Download zip-filen ved at klikke her Opret en Photoshop-fil med de rigtige dimensioner Åben Photoshop og vælg file new. (Hvis mac: cmd + N og hvis PC: ctrl+n) 2

3 Indtast nu de rigtige informationer for din psd-fil. Du vil gerne have dimensionerne 160 pixels bredt og 600 pixels højt. Du skal sikre dig, at enheden er valgt til pixels og ikke et fysisk enhedsmål. Opløsning sætter du til skærmopløsning, dvs. 72 pixels pr. inch. Color Mode sættes også til skærmfarver, dvs. RGB, og baggrunde sætter du til transparent - klik herefter OK. 3

4 Nu har du oprettet dit Canvas, altså det område som du kan arbejde på. Husk at du, hvis du laver en fejl, altid klikke Crtl/cmd + z eller vælge Edit Undo. Dette kan dog kun gøres for én fejl. Har du brug for at gå længere tilbage (hvis du har lavet flere fejl - eller vil se udviklingen i dit arbejde) kan du bruge History paletten som du får frem ved at vælge fanebladet Window History eller trykke alt+cmd+z (mac) alt+ctrl+z (PC) Åben filen colors.psd og brug farverne til at lave en baggrundsgradient. Vælg nu file open og vælg filen colors.psd blandt de materialer, du hentede før. Vælg nu eyedropper-værktøjet i værktøjslinjen til venstre (eller tryk i) og klik derefter først på den den brune farve farve i color.psd. 4

5 Nu skal du tilføje den brune farve til din farvepalette - eller dine swatches. Ude i panelet til højre kan du finde dine swatches. Skulle det ikke være der, kan du gå ind inder Window Swatches og vælge det. Ude i dine Swatches finder du et lille ikon, som ligner en post-it, når du trykker på det, bliver din brune farve lagt ind nederst i dine Swatches. Gentag proceduren ved de to blå farver. 5

6 Gå nu tilbage til din banner-fil. Vælg f.eks. fanebladet window og klik på det rigtige filnavn. Nu skal du oprette en gradient, som går fra mørkeblå til lyseblå til hvid og over til brun. Vælg først gradientværktøjet, som også er i værktøjslinjen (eller tast g). Nu skal du vælge de fire farver til gradienten. Det gør du ved at klikke på gradient-boksen i øverste venstre hjørne. I pop-up vinduet kan du vælge den mørkeblå, lyseblå, hvid og den brune, som du tilføjede dit swatches-bibliotek før. For at tilføje farverne vælger du først på det den lille firkant med farve i gradient-eksemplet i pop-up-vinduet ved at klikke på det. Derefter vælger du den swatch, der passer til. For at tilføje flere farver i gradienten, så hold musen over en af de små firkanter, tryk alt og træk farven ind mod midten. 6

7 Herefter kan du, ved at holde Shift nede, trække din gradient lodret fra top til bund af dit canvas. Hvis gradienten vender forkert, kan du bare trække den omvendt. Det brune skal være nederst og fylde ca. en fjerdedel. 7

8 5.4. Placer billedet af Cowboy-chick/dude og skalér det til den rette størrelse. Åben filen guy.psd eller girl.psd. Hvis dit layers panel ikke er vist, vælger du Window Layers. Du kan overføre laget med billedet af cowboyen ved at klikke på billedet i din lagpalette og trække det over på din banner-canvas. 8

9 Som du kan se, er billedet af girl/guy alt for stort til banneret - det er derfor nødvendigt at lave det mindre. Vælg laget med din cowboy ved at højreklikke på billedet på dit canvas for derefter at vælge laget. Dette er en alternativ måde at vælge et lag på - du kan også vælge laget direkte i lag-paletten. Hold derefter Tryl crtl+t (PC) eller cmd+t eller vælg Edit Free transform. Herefter holder du Shift inde mens du trækker billeder til en passende størrelse. Shift er vigtigt at holde nede så proportionerne i billedet bibeholdes - ellers risikerer de at blive forkerte. Du kan give slip på Shift og trække billedet hen, hvor det skal ligge. Når du er færdig, og billedet sidder rigtigt og er den rigtige størrelsen, taster du Return. 9

10 5.5. Placer vektorgrafik af logo og tagline skaler og placer Vælg nu File Place og vælg eps-filen med titel kaldet title.eps. Skaler og placer logoet på samme måde som billedet af din cowboy. Dette gentages for filen med tagline kaldet tagline.eps Placer skyer og juster blending-mode og opacity 10

11 Åben psd-filen skyer.psd og træk laget med skyerne over på dit canvas, som da nu placerede billedet af din cowboy. Du vil gerne have skyerne om bag cowboyen - træk laget ned bag laget med cowboyens billede i lagpaletten. Herefter kan du skalere og placere billedet lidt bedre, som du har gjort et par gange. Skyerne virker lidt voldsomme - det kan vi lave om på ved at ændre lidt på, hvordan laget blandes med de andre lag samt på, hvor tranparent det er. Øverst i lag-paletten vælger du, med sky-laget markeret, Blending mode til Luminosity og sætter opacity til 75%. 11

12 5.7. Lys og farvespil For at få baggrundsfarven til at se lidt mere varieret ud går vi nu ind og tegner lidt Brush tool, så vi kan give himlen lidt sol og bevægelse. Opret et nyt lag og lig det bagerst - dog over det nederste gradientlag. Vælg Layer New Layer Kald eksempelvis laget lys og vær opmærksom på, at Color er sat til None, så det virker transparent fra start. Træk herefter laget ned over det allernederste lag i lagpaletten. Nu vil vi starte med at ligge nogle hvide farver på den blå farve med Brush tool, som ligger i værktøjspaletten i venstre side (eller tryk b). Husk at sikre dig, at den farve, du farver med, er hvid - hvis den forreste firkant ikke er hvid nederst i værktøjslinjen, dobbelt-klikker du på den og ændrer den til hvid. Herefter skal vi have indstillet størrelsen og hårdheden af brushen. Sæt til at starte med Master diameter til 200 pixels og Hardness til 0, så du får et Airbrush-lignende resultat. Sæt desuden Opacity til 50 pixels, så den ikke er så kraftig. 12

13 Prøv dig lidt frem med forskellig hårdhed, størrelse samt gennemsigtighed, så du får et mere spændende farveunderlag. Du kan evt. prøve at oprette endnu et lag, hvor du ligger en mørkere farve i toppen. Lav nu en sol. Først lav et nyt layer og kald det sol. Sæt Brush-størrelse til ca. 13px blød, opacity 100% og farve hvid. Klik hvor du vil have din sol. Herefter ændrer du penselstørrelse til ca. 45px blød og opacity til 55%, klik oven på din sol for at gøre den lidt større. Tilføj lidt "flare" fra solen ved at placere klatter med penslen rundt omkring. Sæt evt. opacity yderligere ned til omkring 30% Prøv dig lidt frem. Husk at du kan bruge History til at gå et eller flere skridt tilbage Afmaskning Både billedet af din cowboy og billedet af skyerne har vi på forhånd fritlagt for dig, dette kaldes og afmaskning, dvs. at vi har fjernet dele af billedet, som ikke skal være med, hvorved at området rundt om din cowboy eksempelvis er gennemsigtigt. Photoshop indeholder en masse funktionaliteter, som kan hjælpe til at lave fritlægninger, der findes også en række plugins kan hjælpe til det. Nogle fritlægninger er nemme mens andre er vanskelige og kan tage lang tid (eksempelvis semitransparente objekter som bobler på en detaljeret baggrund eller en persons hår). Du skal nu lave en meget grov fritlægningen af et billede ved hjælp af mask-funktionaliteten i Photoshop. Vælg nu File Place og vælg billedet af en western-by (town.png). Skalér billedet til en passende størrelse og placer billeder bagved din cowboy. Når billedet er sat rigtigt og i den korrekte størrelse taster du Return - husk at holde Shift nede når du skalere så billedet beholder sine proportioner. 13

14 Hvis billedet ligger ovenpå din cowboy, skal du rykke det længere ned - det gør du ved at tage fat i laget indeholdende town-billedet og rykke det længere ned i lag-niveau. Bemærk at du selv kan navngive og gruppere lagene i mapper for bedre at holde styr på dem. Du kan ændre navnet ved at dobbeltklikke på det eksisterende lag-navn i lag-paletten og derefter ændre navnet. Nederst i lagpaletten kan du klikke på mappe ikonet for at oprette en mappe, flyt herefter de lag som du ønsker i grupperet i en mappe til den oprettede lag-mappe. 14

15 Med laget town aktivt, klikker du nu på mask-ikonet nederst i layers-paletten. Herefter laver Photoshop en mask knyttet til dit town -lag. 15

16 Læg mærke til at masken er helt hvid og at der ikke skete noget med udseendet af billedet af supporterne. Det er fordi masken er tom. En maske virker ved at gøre billedet mere eller mindre gennemsigtigt - det sker udfra, hvor meget sort-hvid farve masken indeholder. Hvis masken er helt hvid vises alt, hvis det er helt sort vil alt forsvinde. Gråtonerne, som findes mellem hvid og sort, er tilsvarende mere og mere gennemsigtige alt efter, hvor mørke de er. Det betyder, at vi ved at male med sort og hvid farve i masken kan fjerne og vise indhold fra det billede, vi arbejder med. Ved at bruge forskellige brush-størrelser og varierer hårdheden af brushen, kan vi lave meget detaljerede masker og overgange i gennemsigtighed. Det smarte ved masker er, at du ikke sletter noget af billeder, og at du derfor altid kan gå ind og lave din maske om, hvis du har fjernet noget, som ikke skulle fjernes. Der findes mange forskellige måder at lave masker avancerede masker på i Photoshop. Vi skal lave en simpel overgang i transparens så billedet af byen kommer til at indgå flydende i baggrunden over billedet af din cowboy. Tryk b eller vælg brush-ikonet, som du tidligere brugte, da du tegnede lys og farvespil ind på dit canvas. Klik dig nu ind i masken med at klikke på mask-feltet i dit supporter lag. Læg mærke til at forgrunds- og baggrundsfarve ændrer sig til hvid og sort da det er disse du arbejder med i en maske. Sørg for at forgrundsfarven i venstremenuen er sort ved at rykke rundt så den forreste kasse i din toolbar er sort - det gør at du vil tegne med sort, når du bruger din brush, og at du dermed vil gøre noget usynligt, når du tegner i masken. Klik på den lille pil over de to kasser for at skifte mellem forgrunds og baggrundsfarve. Tilpas din brush-størrelse og -hårdhed og eksperimenter med at lave en maske som du synes passer 16

17 til dit indhold. Hvis du laver en stor brush-størrelse (300px) med ingen hårdhed (0%) kan du lave en blød overgang i stedet for en klart afgrænset friskrapning. 5.9 Tilføj skygge Nu skal du give din cowboy en lille skygge, så det ligner, hun står i solen. Derfor skal du vælge det lag, hvor din gradient er. Vælg Burn-værktøjet i venstremenuen: Vælg shadows oppe i burn-menuen i toppen. Leg lidt rundt med exposure og brush-type, så du får den helt rette skygge Tilføj ekstra billede For at give dit banner et ekstra kitch look, skal du nu placere lidt pynt på banneret. Prøv dig frem uden vores hjælp at placere cactus.png Eksporter til web Så er dit banner klar til at blive eksporteret i det rigtige webformat. Vælg File Save for Web & Devices. 17

18 Vælg en billedetype, som du mener passer bedst til visningen af dit banner, samt en kvalitet som tilgodeser filstørrelse, uden at det ødelægger, det kvalitetsniveau du ønsker. Der er ingen aflevering knyttet til denne øvelse 18