Web-grafiikka

Liukuväritausta

• Luo GIMPissä uusi kuva, jonka leveys on 10 px, korkeus 400 px, resoluutio 72 ppi ja taustaväri läpinäkyvä. Kuva-ala on siis erittäin kapea suhteessa sen korkeuteen.
• Luo kuvaan värikerros liukuvärityökalulla (Blend Tool).
• Valitse liukuvärin ääripäiksi työkaluikkunan värivalinnasta (foreground color ja background color) esim. kaksi saman värin sävyä, tumma ja vaalea.
• Valitse mistä mihin väri liukuu, nyt etualaväristä taustaväriin FG to BG (RGB). Liukuvärin suunnan voi myös kääntää.
• Offset-säädöllä voit vaikuttaa siihen, kuinka läheltä aloituspistettä väriliuku alkaa. Tähän hyvä arvo on oletuksena oleva 0.
• Valitse liukuvärin muodoksi Linear.
• Maalaa hiirellä pystysuora linja kuvan yläreunasta alareunaan hiiren vasenta painiketta alhaalla pitäen. Värin aloitus- ja lopetuspiste sekä suunta vaikuttavat väriliukuun. Liukuvärin voi myös aloittaa ja lopettaa kuvan ulkopuolella.
• Tallenna kuva esim. nimellä tausta.gif. Jätä kuvankäsittelyohjelma vielä auki.

Lisätään taustakuva CSS-tiedostoon.

• Määritä kuva taustakuvaksi body-tyylilleja määritä se toistumaan vain yläreunassa. Tallenna ja tarkastele selaimessa.
• Lisää vielä sivun taustaväriksi sama väri, johon liukuvärin alareuna päättyy. Värin koodin saat selvitettyä Gimpin väripaletista.

Pyöreäkulmainen taustakuva

Pyöreäkulmaista taustaa voidaan käyttää esim. pystynavigaation tai tekstilaatikon taustalla tai painonappeina.

• Valitse tyyli, jonka taustalle aiot pyöreäkulmaisen taustan tehdä.
• Luo uusi tiedosto, joka on sen elementin levyinen, jolle taustakuva tulee. Jos elementin leveys on ilmaistu prosentteina, se pitää jatkossa määrittää pikseleinä. Valitse tiedoston resoluutioksi 72 ja taustaksi läpinäkyvä. Kuvan korkeudella on merkitystä vain, jos se tulee painonapin taustalle, mutta kuvankäsittelyä voi helpottaa, jos kuvan korkeus on ainakin 100 px.
• Luo kuvan kokoinen nelikulmainen valinta-alue suorakulmiovalintatyökalulla (Rectangle Select Tool).
• Valitse valinta-alueen työkalun asetuksista (Tool options) kulmien pyöristys ja anna pyöristyssäteeksi esim. 10. Valinta-alueen koon voit tarkistaa työkaluikkunasta eli varmistaa, että se on alkuperäisen kuvan kokoinen.
• Maalaa valinta-alue valitsemallasi täyttövärillä (Bucket Fill).
• Valitse ja kopioi kuvan yläosasta se pala, jossa pyöristykset sijaitsevat. Luo kopioidusta alueesta uusi kuvatiedosto valikkokomennolla Edit | Paste as | New image tai näppäinyhdistelmällä [Ctrl + Shift + V].
• Tallenna kuva .gif-tiedostona, joka säilyttää läpinäkyvyyden.

Tehdään vielä muutoksia css-tiedostoon ja html-tiedostoon.

• Mene html-tiedostoon ja luo valitsemasi elementin sisälle kolme div-elementtiä, joista keskimmäisessä on alkuperäisen divin sisältö. Jos esimerkiksi elementti oli aiemmin tällainen:

<div id="leipa">
<p>Tämä sivusto on tehty Jyväskylän yliopiston...
...
</div><!--#leipa päättyy-->

niin nyt se on

<div id="leipa">
<div id="yla">
</div>
<div id="keski">
<p>Tämä sivusto on tehty Jyväskylän yliopiston...
...
</div>
<div id="ala">
</div>
</div><!--#leipa päättyy-->

• Määritä uusi kuva taustakuvaksi ylimpään elementtiin.
• Muokkaa alkuperäisestä kuvasta samoin alareuna ja määritä se taustakuvaksi alimpaan elementtiin.
• Määritä väliin jäävän div-laatikon taustaväriksi sama kuin on taustakuvissa.

• Mukauta elementin täytteitä tarpeen mukaan niin, että teksti asettuu kauniisti.

Painonappi

• Luo uusi tiedosto, jonka koko on 200 x 50 px, resoluutio 72 ja tausta läpinäkyvä.
• Luo kuvan kokoinen nelikulmainen valinta-alue.
• Valitse valinta-alueen kulmien pyöristys ja anna pyöristyssäteeksi 10. Valinta-alueen koon voit tarkistaa työkaluikkunasta.
• Maalaa valinta-alue valitsemallasi täyttövärillä (Bucket Fill).
• Tallenna nappi gif-tiedostona
• Määrittele nappi taustakuvaksi haluamallesi linkkielementille css-tiedostossa. Määritä elementin kooksi napin koko.

Otsikkoteksti kuvana

Jos otsikkotekstissä haluaa käyttää muuta kuin tavanomaista fonttia ja varmistua, että sama fontti näkyy kaikille sivuston kävijöille, on otsikko syytä tehdä kuvana.

• Luo uusi tiedosto, joka on leveä ja matala, esimerkiksi 600 x 100 px, resoluutioltaan 72 ja taustaltaan läpinäkyvä.
• Valitse tekstityökalu ja klikkaa tyhjässä kuvassa.
• Kirjoita haluamasi teksti avautuneeseen tekstieditori-ikkunaan. Hyväksy.
• Muotoile tekstiä työkalun asetuksista (Tool Options).
• Tallenna kuva gif- tai png-tiedostona.
• Lisää kuva verkkosivulle haluamaasi kohtaan