PHOTOSHOP 5.5 HARJOITUKSIA

© Hannu Natunen 2001

Index
Sivu_2

Harjoitus 1 (Tehdään pikseli)
Harjoitus 2 (koon muutos, terävöinti, tallentaminen.)
Harjoitus 3 (heittovarjo, jpg, psd)
Harjoitus 4 (efektit, tasot)
Harjoitus 5 (Taustakuva)

Harjoitus 1

Kuva, joka ei sisällä mitään näkyvää väriä on hyödyllinen apuväline web -asemoinnissa. Sitä käyttäen voidaan muut sivun elementit asemoida halutuille paikoilleen.

Tehdään uusi kuva: File/New (tiedosto/uusi)
Nimi / Name: pikseli
Kuvan koko / Image Size: 100x100 pikseliä
Resoluutio / Resolution: 72 pixels/inch (pikseliä/tuuma)
Tila / Mode: RGB
Tausta / Contents: White

Tämän jälkeen "supistetaan" kuvan värimäärä.

Kuvan tila / Image Mode
Mukautettu / Indexed Color
Väripaletti / palette
Määritelty / Exact
Tiedosto / File
Kirjoita / Export (gif89a)
Avautuvasta ikkunasta valitaan ainoa "näkyvä" väri pipetillä.
Hyväksytään / ok ja valitaan tallennuskansio ja -nimi.

Harjoitus 2

Avaa kuva File/Open (Arkisto/Avaa) puutarha_a5.tif

1. Pienennetään kuva kokoon 300x340 pikseliä
Valitse Image/Image Size (Kuva/kuvan koko). Aseta kuvan leveydeksi Width, 300 pikseliä, jolloin korkeudeksi tulee automaattisesti 347pikseliä (mikäli Constrain Proportions (Säilytä mittasuhteet) kohdassa on rasti.
Tämän jälkeen valitaan Resample Image (Interpoloi kuva) -kohtaan Bicubic. Klikkaa OK. Nyt kuvan koko on 300x347 pikseliä. Valitse seuraavaksi Image/Canvas Size (Kuva/Piirtoalueen koko). Vaihda mittayksiköiksi pikselit (mikäli ei jo ole). Aseta korkeudeksi (height), 340 jolloin kuva leikkautuu valitsemastasi suunnasta 7 pikseliä. Klikkaa OK, jonka jälkeen ohjelma vielä varmistaa että haluat rajata kuvaa, hyväksy se. Nyt kuvan koko on 300 (leveys) x340 (korkeus) pikseliä

2. Terävöitä kuva:
a: Zoomaa kuvaa niin että se on 100%:ssa koossa (esim. suurennuslasityökalulla).Valitse Filter/Sharpen/Unsharp Mask (Suodin/Terävöitys/epäterävä maski). Aseta Amount (Määrä) säätimestä terävöityksen määrä, Radius (Säde) säätimestä, kuinka leveälle kuvassa olevista reunoiksi tulkituista kohdista terävöitys ulottuu ja Threshold (Kynnys) säätimestä miten suuria sävyvaihteluita kuvassa vaaditaan, jotta ne tulkitaan reunaksi (mitä pienempi arvo, sitä enemmän terävöitystä). Jos Preview (Esikatselu) -kohdassa on rasti näet muutokset varsinaisessa kuvassa (voit verrata alkuperäistä ja terävöitettyä). Kun olet tyytyväinen klikkaa OK. Nyt kuva on terävöitetty.

3. Säädä kuvan sävyala:
a: Zoomaa kuvaa niin että se näkyy kokonaan. Valitse Image/Adjust/Levels (Kuva/Säädä/Tasot). Säädä Input Levels (Tasot ennen) ikkunan alla olevista kolmioista vetämällä niin, että kuvan sävyt miellyttävät silmääsi. Voit myös säätää eri värikanavia erikseen valitsemalla ne Channel (Kanava) -valikosta. Vertaa välillä alkuperäiseen, ottamalla rasti pois esikatselusta (Preview). Kun olet tyytyväinen, klikkaa OK.

4. Tallenna kuva tif-formaatissa: Valitse Save As (Tallenna nimellä) Anna tiedostonimeksi puutarha.tif. Valitse Save (Tallenna) ja valitse tavujärjestykseksi IBM PC ja laita rasti kohtaan LZW-pakkaus (jolloin kuvaa pakataan tietoa hävittämättömällä pakkauksella, mikä pienentää tiedostokokoa). Huomaat, että kuva, joka on auki Photoshopissa on nyt nimeltään puutarha .tif

Harjoitus 3

Heittovarjo ja JPG

1. Uusi taso: avaa edellisessä tehtävässä käsittelemäsi kuva (puutarha.tif) ja valitse siitä kaikki (ctrl+a). Leikkaa tekemäsi valinta (ctrl+x) ja sijoita se uudeksi tasoksi (ctrl+v). Jos nyt katsot Layers (Tasot) -palettia huomaat, että kuva on tasona (Layer) taustan (Background) päällä. Valitse aktiiviseksi Background (Tausta) -taso.

2. Piirtoalueen kasvattaminen: Valitse aktiiviseksi Background (Tausta) -taso. Valitse seuraavaksi Image/Canvas Size (Kuva/Piirtoalueen koko). Laita leveydeksi 320 ja korkeudeksi 360 pikseliä (näin tehdään tilaa heittovarjolle). Laita ikkunan alareunassa oleva ankkuri vasemmalle ylös (jolloin piirtoalue kasvaa oikealta ja alhaalta 50 pikseliä).

3. Heittovarjon tekeminen: Valitse aktiiviseksi Layer 1 (Taso 1) -taso (tai se taso jolla on objekti jolle varjon haluat tehdä). Valitse Layer/Effects/Drop Shadow (Taso/Tehosteet/Varjo). Saat auki ikkunan, jossa voit muokata varjoa. kokeile kaikkia säätöjä (näet muutoksen kuvassa, jos Apply (Käytä) ja esikatselu on valittuna). Kun varjo on mieleisesi, klikkaa OK.

4. Tallenna kopio kuvasta jpg-formaatissa: Valitse Save a Copy (Tallenna kopio) Anna tiedostonimeksi puutarha1 ja formaatiksi JPEG. Valitse Save (Tallenna) ja valitse kuvan laatu (väri-informaation poistaminen) väliltä 0-12. (muutoksen näet alla olevassa kuvassa jos esikatselu on valittuna). Samalla näet tiedoston koon ikkunan alareunassa (näet myös tiedoston latausnopeuden modeemilla). Jos valitset Baseline ("Normal") (Peruslinja Normaali) kuva aukeaa todennäköisesti kaikilla ohjelmilla jotka jpg-formaatin tuntevat. Baseline Optimized (Peruslinja optimoitu) pakkaa kuvan hieman pienemmäksi ja Progressive (Optimoitu väri) avaa kuvan näytölle 3-5:ssä vaiheessa (niin että kuva terävöityy näytölle). Klikkaa OK ja kuva tallentuu. Huomaat, että auki oleva kuva on edelleen puutarha.tif. Kopio kuvasta on tallennettu JPG-formaatissa

5. Tallenna originaali psd-formaatissa: Jos nyt yrität tallentaa auki olevan puutarha.tif kuvan File/Save (Arkisto/Tallenna) komennolla, huomaat että voit tallentaa sen ainoastaan psd-formaatissa. Tämä johtuu siitä, että kuvassa on useampi kuin yksi taso, eikä näitä voi tallentaa tif-formaatissa. Tallenna siis originaali psd-formaatissa (Photoshopin oma kuvaformaatti), jolloin tasot säilyvät. (Jos haluat välttämättä tallentaa kuvan myös tif-formaatissa, sinun täytyy yhdistää tasot Layer/Flatten Image (tasot/Yhdistä tasot) -komennolla ennen tallennusta.

Harjoitus 4

Tekstilogo

1. Tehdään uusi kuvaikkuna: Valitse File/New (Arkisto/Uusi). Annetaan kuvalle jo nimi "logo" yläreunan Name (Nimi) kohtaan. Asetetaan kuvaikkunan leveydeksi 400 ja korkeudeksi 200 pikseliä. Resoluutioksi 92dpi. Mode (Tila) kohtaan laitetaan RGB ja taustaväriksi valkoinen. Klikkaa OK, jolloin pitäisi avautua näytölle valkoinen kuvaikkuna.

2. Kirjoitetaan teksti: Valitse tekstityökalu (Työkalupaletissa T-kirjain ja siitä vasemmanpuoleisin vaihtoehto). Klikkaa sitten hiiren vasemmalla näppäimellä kuvan päällä, jolloin avautuu teksti-ikkuna. Kirjoita teksti (esim. "Firma Oy") ja valitse se maalaamalla kursorilla. Valitse fontti ja tyyli ja määritä koko niin suureksi että kuvaikkunaan jää hieman tyhjää reunoihin (jos esikatselu on valittuna näet tekstin ja voit liikuttaa sitä kuvaikkunassa). Valitse sitten väri klikkaamalla Color (Väri) suorakulmiota (voit valita värin avautuvasta liukuväripaletista klikkaamalla tai esim. RGB-arvoina). Valitse jokin pehmennys (Anti-Alias) ja klikkaa OK. Nyt tekstin pitäisi olla kuvassa uutena tekstitasona (Tunnistat tekstitason tasolla olevasta T-kirjaimesta).

3. Laitetaan tekstiin efektejä: Valitse tekstitaso aktiiviseksi ja klikkaa sen päällä oikealla hiirennäppäimellä. Valitse alasvetovalikosta Effects (Tehosteet). Ensimmäiseksi voit laittaa kuvaan halutessasi heittovarjon. Kokeile muitakin efektejä valitsemalla yhden kerrallaan alasvetovalikosta (ne tulevat näkyviin laittamalla rasti kohtaan Apply eli Käytä). Laitoin esimerkkilogoon kaikkia efektejä oletusarvoilla. Klikkaa OK kun olet tyytyväinen jolloin efektit jäävät tekstiin. (Huomaa, että efekteistä huolimatta voit vielä editoida tekstiä tuplaklikkaamalla tekstitasoa).

4. Muutetaan tekstitaso kuvatasoksi ja lisätään perspektiivi: Koska taso on tekstitaso, et voi käyttää kaikkia mahdollisia kuvankäsittelytoimintoja siihen. Tekstitaso muutetaan kuvatasoksi valitsemalla Layer/Type/Render Layer (Taso/Tyyppi/Muodosta taso). Nyt voit valita Edit/Transform/Perspective (Muokkaa/Muunna/Perspektiivi). Tee tekstiin perspektiivimuunnos vetämällä kahvoista (esim. vasen reuna lähelle) ja hyväksy OK.

5. Tehdään planeetta tekstin taakse: Piilota tekstitaso näkyvistä klikkamalla tasopaletissa sen kohdalla oleva silmänkuva pois. Tee uusi taso taustan ja tekstitason väliin valitsemalla background aktiiviseksi ja tekemällä uusi taso tasopaletin alareunassa olevista nappuloista keskimmäistä  painamalla. Tee kuvan keskelle pyöreä valinta ellipsinmuotoisella valintatyökalulla pitämällä shift pohjassa (ylin työkalu vasemmalla silmän alapuolella toinen vaihtoehto, katso että options-paletissa Feather (Häivytys) -arvo on 0). Tee pyöreään valintaan liukuväri liukuvärityökalulla (Tekstityökalun alapuolella vasemmanpuoleisin vaihtoehto). Valitse options-paletista mistä mihin väriin liuku tapahtuu (katso myös että peittävyys on 100%) ja vedä viiva pyöreän valinnan yli. Nyt kuvassa pitäisi olla pallo, jossa on liukuväritäyttö. Jos värit eivät miellytä klikkaa Edit/Undo (Muokkaa/Kumoa) ja tee liukuväri uudelleen joillakin muilla väreillä (jos olet ehtinyt tehdä enemmän kuin yhden muutoksen, voit perua useita muutoksia taaksepäin History Historia -paletissa).

6. Tallennetaan Save For Web -komennolla alle 20 kt:n kuvaksi: valitse File/Save For Web (Arkisto/Tallenna webiä varten). Valitse yläreunasta 4-Up (4-kuva). Vasemmalla ylhäällä näet originaalin kuvan. Klikkaa kuvaa joka on oikeassa yläreunassa ja valitse sen formaatiksi GIF (kuvan oikealla puolella) Valitse sitten seuraaville kuville formaateiksi JPEG ja PNG-8. Valitse taas Oikea yläkuva ja klikkaa oikealla ylhäällä olevaa nuolta (Optimize Menu eli Optimointivalikko) ja valitse Optimize to File Size (Optimoi tiedostokokoon). Valitse Current Settings  (Nykyiset asetukset) ja laita Desired File Size (Haluttu tiedostokoko) arvoksi 20 kt, kone kokeilee sitten erilaisia värimääriä ym kuvalle. Toista sama JPEG ja PNG-kuville. Katso mikä kuvista on mielestäsi parhaan näköinen ja valitse se aktiiviseksi ja klikkaa OK. Jos, niin kuin luulen valitsit JPEG:n, ohjelma ehdottaa kuvalle nimeksi logo.jpg, valitse paikka jonne haluat kuvan tallentaa ja tallenna (kuvasta tallentuu kopio). Tallenna vielä originaali psd:nä.

Harjoitus 5

Tehdään multimediasovelluksen päävalikko (tai kuva siitä), niin että maisemakuvaan tehdään läpikuultavia nappuloita ja tekstejä. Käytetään kuvaa "hotelli_katu".

1. Multimediasovelluksen työpöydän koko olisi tässä tapauksessa 800 x 600  pikseliä. Käytä Image Size (Kuvan koko) ja Canvas Size (Piirtoalueen koko) komentoja ja tee kuvasta sen kokoinen. (Voit myös tehdä haluamasi terävöitykset, sävyalan säädöt ym.) 

2. Käytä Text Mask (tekstimaski) työkalua ja tee sillä tekstin muotoinen valinta (tekstin koko voi olla vaikkapa 100 px). Kirjoita vaikka "Maisema". Klikkaa Ok. Sinulla pitäisi nyt olla tekstin muotoinen valinta. Kopioi ja sijoita uusi taso (ctrl+c ctrl+v). Nyt sinulla on uudella tasolla tekstin muotoinen pala kuvasta. 

3. Voit nyt tehdä tehosteita uudelle tasolle (klikkaa oikealla hiirennäppäimellä tason päällä ja valitse effects (tehoste). Tee sitten lisää tekstejä jos haluat. 

4. Tee nappuloita. Ota esiin valitse view/rulers (Näytä/Viivaimet). Vedä sitten viivaimista apuviivoja, joiden avulla voit kohdistaa nappulat Voit siirrellä apuviivoja siirtotyökalun avulla (Move Tool). Tee nappulan kokoinen ja muotoinen valinta ja tee siitä uusi taso kuten aikaisemmin teksteille. 

5. Tee myös nappuloille tehosteita ja lisää päälle vielä teksti. 

6. Tallenna kuva psd-formaatissa.

| 9.4.2002 |