Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Photoshop fortsat: Genskab en webside. 1. Lidt om hvad du har lært Sidste gang prøvede du at arbejde med nogle basale funktioner i Photoshop. Du lavede et webbanner efter en nøje anvist brugsanvisning. Du prøvede bl.a. at arbejde med Layers, Blending mode og Opacity. Du prøvede desuden at placere vektorgrafik og ændre størrelsen på det. Ligeledes arbejdede du med gradient-værktøjet og du tegnede med Photoshops Brush tool. Afslutningsvis lavede du en grov afmaskning med Photoshops Mask funktion. For at eksportere dit webbanner i et passende web-billedeformat benyttede du dig af Photoshops Save for web and devices-funktion. 2. Målsætning Målet med denne uges øvelse er at gøre dig lidt mere hjemmevant i at udarbejde design i Photoshop, så du senere kan designe og optegne dine skitser i forbindelse med jeres eksamensprojekt. Derfor er dagens øvelse, ligesom de forrige, ikke af kreativ karakter, men vil i stedet fokusere på, at du bliver videreintroduceret til Adobe Photoshops opbygning og funktionalitet. Du vil i denne opgave benytte mange af de samme funktioner og værktøjer, som du benyttede dig af sidst. Du vil på den måde opleve at det faktisk ofte er meget få værktøjer, som skal til for at skabe et website, og at du ved at mestre basalfunktionaliteten kan opnå rigtigt meget. Du vil ikke blive guidet igennem på samme måde som sidste øvelse. Går du kortvarigt i stå - og er din hjælpelærer i gang med at hjælpe en anden - er et lille tip at benytte Photoshops indbyggede hjælp, som i korte skridt forklarer de fleste tilgængelige værktøjer i Photoshop. Klik på fanebladet Help og vælg derefter menupunktet hjælp - dette vil åbne Photoshops omfattende hjælpefunktion. Søg så specifikt som muligt - beskriv eksempelvis den delopgave, du skal udføre og se, om der dukker noget brugbart op.
3. Beskrivelse Du skal i denne øvelse genskabe en webside i Photoshop - du skal tegne efter. Selvom det kan virke lidt underligt er det en fantastisk måde at lære hvordan man griber et webdesign an i Photoshop. Det kan aldrig anbefales at starte op fra bunden i Photoshop - normalt er Photoshop noget man åbner forholdsvis sent i ens designproces når indhold, informationsarkitektur, skitser og prototyper er bearbejdede og testede nok til at man kan bevæge sig videre. Derfor vil man ofte have en skitse eller nogle grove Photoshop-opsætninger at arbejde udfra. I dag har vi et eksisterende website, som vi skal genskabe - det vil derfor minde meget om en slags rentegning, og du skal derfor have øje for de små detaljer, som ofte gør sig gældende på en webside og forsøge, om du kan genskabe dem. Der er valgt to forholdsvis simple websites ud. Det ene website er lidt nemmere at genskabe end det anden. Vælg derfor det som du synes passer bedst til dit udgangspunkt - føler du dig efterhånden rigtigt godt hjemme i Photoshop, så forsøg dig med det lidt mere krævende. Hvis du foretrækker helt frit at vælge det website, du vil efterligne, enten fordi du synes at de to, der er valgt ud, er for nemme (eller for kedelige) - så er du selvfølgelig velkommen til dette. Du skal dog være opmærksom på at finde frem til et website, som tydeligt er mere udfordrende end de to, der er valgt ud. Den første (og nemmeste webside) er forsiden på VestjyskBanks (deres Skjern afdeling) website (https://www.vestjyskbank.dk/om-banken/afdelinger/skjern?opendocument).
Den anden (og lidt mere krævende webside) er forsiden på Lån & Spar Bank nye website (www.lsb.dk). Grunden til, at valget er faldet på banksider, er ikke tilfældigt. Banksider udmærker sig ofte ved at være forholdsvis simple i udtrykket med klare linjer og få detaljer. Dette gør dem lidt nemmere at gå til. Vestjysk Banks design er rent teknisk lidt mere simpelt at efterligne, da det mest gør brug af
enkle linjer og kasser. Lån og Spar banks website virker overordnet meget simpelt. Forskellen ligger især i detaljen - på LSBs website er der arbejdet meget med skygger, afrundinger og nedtonede gradienter som er svære at udføre i Photoshop (samt i CSS og HTML). Bemærk det nedtonede brug af effekterne. I må ikke direkte overføre elementer fra selve websiden, da alt skal genskabes af jer i Photoshop. Der er derfor klargjort noget materiale til begge websider, så I nemmere kan komme i gang. Det drejer sig bl.a. om logo og andre identitetselementer, som kan være vanskelige at efterligne. Der er ikke inkluderet billeder af personerne på hjemmesiden. Da I ikke må bruge billederne fra websiden skal I selv finde passende (tilsvarende) billeder - her kan i bruge Googles billedesøgning eller nogle af de gratis Stock-billededatabaser som er tilgængelig på nettet. Her kan eksempelvis Stock.XCHNG (www.sxc.hu) være et godt bekendtskab, også i forbindelse med jeres eksamensprojekt. I kan evt også bruge gettyimages. I må gerne overføre teksten fra websiden. 5. Øvelsen 5.1. Download forberedt billedemateriale Først skal du downloade materiale, som du skal bruge til at genskabe websitet i Photoshop. Billederne er lagt i en zip-mappe, som du gemmer og pakker ud på din computer. Download zip-filen ved at klikke her http://www.itu.dk/people/stg/wdwk-f2012/ekstra/materialephotoshop2.zip 5.2. Tag screen-shot af websitet Gå ind på det valgte website og tag et screen-shot af forsiden. På PC klikker du på knappen Printscreen og på Mac trykker du tasterne Shift+Cmd+3, hvorefter billedet havner på dit skrivebord. På PC ligger billedet i dit clip-board (eller i din hukommelse). 5.3. Overfør screen-shot til Photoshop På Mac åbner du simpelthen bare billedet i Photoshop. Vælg file Open, eller træk billedet ned på Photoshop-ikonet. Vælg herefter file Save as og gem filen som en Psd.fil (Photoshop fil). På PC bliver du nødt til at åbne photoshop og vælge file new. Fordi skærmbilledet ligger i dit clipboard burde Photoshop udfylde billedets dimensioner automatisk. Hvis de ikke er udfyldt, vælger du nogle passende dimensioner - det gør ikke noget der er for meget plads - du kan altid beskære. Skriv eksempelvis 1280 pixel bred og 1024 pixels høj, hvis du sidder på skolens computere. Bemærk at du lige 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 eller White. Klik herefter OK. I dit nye dokument indsætter du dit screen-shot ved at vælge Edit Paste. Eller ved at trykke Ctrl + V.
5.4. Beskæring (C) Du har nu dit skærmbillede lagt ind i Photoshop. Da skærmbilledet er taget af hele skærmen og ikke kun af browservinduet, vil du nok have en del ting med (eksempelvis dele af dit skrivebord) som er overflødige at have med. Beskær dit billede ved at vælge Crop værktøjet i tool-panelet ( c ) og træk det henover det område, som skal bevares. Tryk herefter Return eller delete. Husk at have hele siden i browser-vinduet med. Også baggrunden bag indholdet. 5.5. Opsæt guides for dit arbejde Du kan gøre dit arbejde lidt nemmere, hvis du sætter nogle guides du kan arbejde efter. Du laver i virkeligheden et slags grid - da designet allerede er lavet for dig skal du i bare trække guides (hjælpestregerne) efter det eksisterende design. Når du herefter tilfører elementer til dit canvas vil de ligge sig (snappe) til hjælpelinjerne. Du skal først have vist linealen (rulers) i dit vindue. På Mac tastes Cmd+R eller Ctrl+R på PC. Nu dukker linealen op i toppen af vinduet og i venstre side. Vælg herefter Move-værktøjet (V) øverst i værktøjspanelet, eller eksempelvis ved at taste v på Mac. Klik herefter inde i top-linealen og træk ned for at skabe en horisontal guide og klik i venstre lineal og træk ind for at skabe en vertikal guide (guides optræder som lyseblå streger henover dit design). Du kan trække så mange guides ind, som du finder nødvendig og slå visningen til og fra under fanebladet View eller ved Cmd+H (Mac) eller Ctrl+H (PC). For at fjerne en guide tager du fat i den og trækker den ud i linealen igen, hvorefter den forsvinder.
Det smarte ved guides er, at du har noget at sigte efter og at indholdet klistre (snapper) til de opstillede guides. På den måde kan du sikre dig at tingene ender de rigtige steder. 5.6. Begynd på designet Du er nu klar til at gå i gang med din efterligning. Arbejd ovenpå din screenshot. Det er altafgørende, at du ligesom sidste øvelse arbejder i lag. Du kan slå visningen af lag til og fra i lag-paletten, så du kan holde øje med, hvordan dit design skrider frem. Der vil efterhånden opstå mange lag i den lag-palette - for at det ikke tager overhånd, kan du gruppere lag, der hører sammen i lag-grupper. Nederst i lag-paletten klikker du på mappeikonet hvorefter en ny mappe opstår i dit lag-hieraki. Træk de lag ned i mappen, som du ønsker skal være i den. Det kan eksempelvis være nyttigt at samle de lag som indeholder et header design, en speciel detaljeret knap osv. Man kan også sammenlægge lag hvorved lag-strukturen forsvinder - dette kan nogle sjældne gange være nødvendigt.
Tip Et andet lille tip til at håndtere de mange lag på er, at du kan vælge lag inde på dit canvas i stedet for at vælge dem ude i lag-paletten. Det gør du ved at holde vælge Move tool (v) og derefter holde curseren henover det område hvor det element du vil vælge befinder sig. Herefter højreklikker du, hvorefter en liste over de nærmeste aktuelle lag vises. Du kan nu herefter vælge det lag, du vil arbejde på. Dette kræver dog, at du navngiver dine lag ordentligt. Man kan evt. skrive mapper med STORE bogstaver og egentlige lag med små - på den måde er det let at holde styr på mapper og lag når man vælger lag ved at højreklikke på canvas. Forskellen på at vælge mappe og lag og at kunne se forskellen på dem i navnet er nemlig ikke blevet indbygget i Photoshops genvej til at vælge lag. Som nævnt er mange af de værktøjer, som kan vise sig anvendelige i forbindelse med dit arbejde magen til dem, du benyttede i sidste øvelse. Her er nævnt nogle af dem, og hvordan de kan vise sig brugbare i denne øvelse. Zoom tool (z) Brug zoom værktøjet til at bevæge dig ind og ud - dels når du skal se detaljer i designet som du skal kopiere - når du skal ramme en bestemt farve med Eyedropper værktøjet, eller når du skal lave en præcis selektion. Hand tool (h) Brug hand værktøjet når du eksempelvis er zoomet langt ind i dit design og vil bevæge dig rundt på canvas uden at skulle zoome ud. Med hand værktøjet valgt kan du trække dig rundt på canvas. Holder du SPACE inde forvandles markøren midlertidigt til Hand Tool.
History paletten Klik op fanebladet Window History for at slå visningen af History paletten til. Her kan du bevæge dig frem og tilbage i dine handlinger og fjerne handlinger, som du har fortrudt (men husk det kun virker i Photoshop :-) ). Du kan også fjerne enkelte handlinger uden at skulle gå hele vejen tilbage, hvilket gør denne funktionalitet mere fleksibel end bare at lave en masse undo. Her undgår du alt for meget dobbeltarbejde. Eyedropper tool (i) Brug eyedropper værktøjet til at kopiere farverne fra de design du er i gang med at efterligne - på den måde sikre du dig at det er de helt rigtige farver som bliver brugt. Type tool (t) Brug Type værktøjet til at tilføje tekst med. Hvis du vil tilføje en enkel linje kan du bare klikke og skrive. Hvis du vil lave et afsnit, skal du lave en tekstboks. Det gør du ved at trække Type værktøjet henover skærmen til den størrelse, du gerne vil have på tekstboksen.
I type-paletten i toppen af dit vindue kan du formatere din tekst og lave indstillinger for anti-aliasing. Dvs. hvor skarpt skriften skal tegnes på skærmen. Til websikre brødtekster er det ofte en ide at vælge none, da det ofte også vil være sådan at skiften vises i browseren. Overskifter skal ofte have en eller anden form for anti-aliasing tilknyttet, da udseendet af store skrifterstørrelse sjældent er særligt pæne, hvis de ikke blødes lidt op. Selektion tool (M) Et af allervigtigste grundliggende funktioner er det at lave en selektion. En selektion bruger du til mange ting, og der findes også mange forskellige måder at lave en selektion. Når du har lavet en selektion, er den der til du fjerner den igen - dvs. at den lidt fungerer som et ekstra lag og har indvirkning på det lag, som er valgt. Det er eksempelvis en måde at lave en kasse på. Vælg Rektangular Marquee Tool og træk værktøjet henover skærmen til du får en selektion i den rette størrelse. Du har nu lavet en selektion, som er indikeret ved den levende myresti-streg på dit kanvas. Hvis du har lavet et nyt lag og valgt en passende farve eller gradient kan du nu enten vælge gradient værktøjet og trække din gradient indenfor rammerne eller Edit Fill for at fylde kassen ud med en farve. For at fjerne din selektion taster du Cmd+d på Mac eller Crl+d på PC eller vælger Select Deselect. Du kan nu lave en ny selektion og arbejde videre på det samme lag eller et nyt.
Hvis du bare skal lave en simpel kasse er Rectangle tool dog ofte en del mere fleksibelt, da du her nemt kan trække og omforme boksen efterfølgende. Photoshops Rectangle-, Rounded rectangle- og Ellipse tool fungerer som vektor-grafik og kan manipuleres på samme vis. Tip En rigtig smart feature er, at du kan lave selektions på baggrund af indholdet i eksisterende lag. Har du eksempelvis en lag med en form, som du skal kopiere eller lave om, kan du lave en selektion dannet på baggrund af det synlige indhold i laget. Det gør du ved at holde curseren over det lille ikon i lag-paletten, som repræsenterer det lag, som du vil lave en selektion udfra. Mens du holder Cmd (Mac) eller Ctrl (PC) nede og klikker på ikonet skabes en ny selektion, som du kan bruge videre. Hold curseren over det lille billedeikon og klik som beskrevet ovenfor for at skabe en selektion på baggrund af det synlige indhold i laget. Afmaskning Sidste gang lavede du en simpel afmaskning med ved hjælp af brush tool. Det blev en blød overgang. Hvis du vil lave en hård overgang - eksempelvis hvis du vil lave en beskæring af et billede inde i dit design, kan du bare lave et selektion - eksempelvis ved hjælp af det rektangulære selektionsværktøj - ovenpå det billede som skal beskæres. Når myrestien er i den rette størrelse (du kan transformere selektionen inden du gør noget med den bl.a. ved hjælp af Select Transform selection eller Select Modify. Når din selektion er passende, klikker du på mask-ikonet nederst i lag-paletten, hvorefter dit billede beskæres. Det smarte ved at beskære billeder på denne måde i dit design fremfor at slette osv. er at du altid kan lave din afmaskning om eller flytte rundt på billedet inde i beskæringen.
Den samme funktion kan nemt opnås ved at placere billede oven på den form som skal beskære og derefter højreklikke på laget og vælge Create clipping mask. Layer styles Layer styles er en super smart og fleksibel måde at tilføje styling til dine elementer. Det kan være gradienter, borders, skygge og lys. Det smarte ved layer styles er at du tilføjer dem til et lag eller en lag-gruppe og at du altid kan ændre på dem, kopiere dem eller fjerne dem igen. Lav eksempelvis en kasse og slå en layer style til - det kan eksempelvis være Drop shadow. Med det lag valgt som skal have skygge klikker du på Add layer style ikonet nederst i lag-paletten (vist med fx). Det åbner en ny dialogboks, hvor du kan lave forskellige indstillinger for den stil, du vil tilføje. Du kan tilføje flere Layer styles til et enkelt lag - prøv evt. at se, hvad de enkelte indstillinger gør ved dit lag ved at sætte et hak i preview tjek-boksen i højre side.
Husk på, at det ofte er meget fint og aftonet brug af nogle få effekter, som giver et lækkert udtryk og ikke omvendt. Det er selvfølgelig helt op til dig, hvilke værktøjer du vælger til at løse opgaven, som nævnt er der ofte adskillige måder at opnå det samme resultatet på i Photoshop. Hvis du støder ind i et element, du er i tvivl om, hvordan du kan efterligne så spørg din hjælpelærer, hvilket værktøj han/ hun ville bruge, hvis det er et mere avanceret værktøj kan de være en idé at tage et kig i Photoshops hjælpe-funktion, lave en Google søgning (søgetip: skriv navnet værktøjet eller funktion og afslut med tutorial ) eller gennemføre en video-tutorial på Lynda.com hvis du har adgang til dem. På den måde kan du få skabt et overblik, inden du selv går i gang med værktøjet eller funktionaliteten. Der er ingen aflevering knyttet til denne øvelse