Käytössäni "Adobe Photoshop 7.0". Eli jos haluan vaikka otsikoksi "KOTISIVUT" ja olen kirjoittanut tuon "Photoshopilla" niin miten saan yksinkertaisimmin tekstistä sellaisen, että valkoinen tausta jää pois. Kokeilin tuon ohjeen mukaan http://www.ratol.fi/opensource/photo/ Mutta on kyllä niin työläs, että huh huh..... Olisko jotain muuta keinoa kuin maalata tuo tausta pikamaskilla....????
Tee yksi layer josta teet alpha channel:in ja tallennat kuvan PNG muotoon. Rajaa sillä taikasauvalla painamalla tekstin ulkopuolella kerran sitten edit ja inverse selection, sitten vaihdat alpha layer:iin ja värität maksimiin jolloin teksti on täytin näkyvä ja tausta ei. Kuvan paikan saa määrättyä tarkasti toisiin kuviin nähden esim taulukoilla, tai sitten muuten vaan DHTML:lä.
No eikös se käy ihan perinteiseen tapaan tallentamalla GIF:ksi ja määrittämällä valkoisen taustavärin läpinäkyväksi (transparent).
Helpoin ja nopein tapa tehdä läpinäkyvä teksti: 1. Luo Photoshopissa uusi tiedosto (CTRL+N), syötä haluttu leveys ja korkeus ja määritä tausta läpinäkyväksi. 2. Kirjoita haluamasi teksti kirjoitustyökalulla (T). 3. Exporttaa tiedosto webiä varten (SHIFT+CTRL+ALT+S). Valitse asetuksista GIF ja ruksi kohtaan 'Transparency'. Määritä taustaväri (Matte) vastaamaan mahdollisimman tarkasti webbisivun taustaa. (Toki voit exportata kuvan vaikka PNG:ksi, mutta pitäydytään nyt vielä tossa giffissä, jotta IE:kin osaa näyttää läpinäkyvyyden oikein.) 4. Alla hyvin yksinkertainen html-esimerkki jolla kuvan saa asemoitua sivulle tarkasti:
Tuli pikku propleema tuon kuvan paikan määrityksen kanssa: Eli kuvan paikat ovat kyllä just niinku olen ne halunnut, mutta mulla itellä on kuvan reso 1024x768 ja olen sen mukaan tietysti aina välillä esikatsellut kotisivujani, kun kokeilin sivuja 800x600 niin tulee aika paljon sivuttais liikettä, kun taas laitan resoa isommaksi niin sivut ovat vain vasemmalla ylhäällä pienellä, eli ei ollenkaan niin kuin olisi tarkoitus. Mitenkähän tässä kannattais nyt edetä järkevästi? Jos jollaki olis hyvä idea niin olisin erittäin tyytyväinen sillä kotisivuni ovat loppusuoralla ja nyt vasta hokasin tuommosen ongelman.. Täytyy tästä lähtee sorsan pyyntiin hermoja lepyyttään : ) katellaanpa parin päivän päästä joskopa joku olisi keksinyt jotain..
Käytä sivun leveyden määrittämiseen %-merkintää niin se skaalautuu. Eli jos haluat tehdä sivuista 90% leveän niin laitat tablen tai div:in leveydeksi 90%. Se on silloin kaikilla resoilla 90%.
Tablen tai Div:n? Eli miten se tulisi esim. tälle kuvalle: <div style="position: absolute; left: 65px; top: 65px"> <img src="kuvat/kehykset.gif" name="kuva" width="860" height="458"> </div> _X_X_X_X_X_[small][/small]
Elikkä siinä img-tagissa on nyt määritettynä leveydeksi 860 pikseliä. Jos ruudun leveys 800 pix niin siitähän tulee pakostakin sivuttaisliikettä kun kuva mahdu kerralla ruudulle. img-tagille voi tietty myös määrittää leveydeksi esim. 90% mutta se ei ole kovin suositeltavaa, sillä selaimet eivät osaa skaalata kuvia nätisti ja suurilla tarkkuuksilla kuvassa alkaa näkyä pikselöitymistä johtuen alkuperäisen kuvan pienemmästä tarkkuudesta. Jos haluat kuvan näkyvän kokonaan (ja nätisti) 800x600 resolla ilman sivuttaisskrollausta, se tulisi ensin pienentää sopivaan kokoon (leveys alle 800 pix) Photoshopissa ja käyttää pienennettyä kuvaa sivulla.
Meneepäs vähän hankalksi... Onkos muita keinoja sijoittaa nuita kuvia tuonne kotisivuille "tarkasti"? Miten te teette kotisivunne? kuvathan voi tietysti sijoittaa Align="left", "center" tai "right" mutta ei nuista sivuista saa kyllä haluamnsa laisia jos kuvia ei saa sijoitettua tarkemmin.
Kuvat saa kyllä sijoitettua ihan pikselin tarkkuudella sivuille, mutta skaalautumaan niitä ei oikein nätisti saa siten, että kuva olisi aina esimerkiksi selaimen ikkunan levyinen. Ja sehän voi vaihdella hyvin paljon riippuen käyttäjän asetuksista. Suositeltavin tapa käyttää kuvia on pitää ne tiukasti jossain tietyssä kohdassa. Sitten esim. taulukoita tai tyylitiedostoja käyttämällä voidaan tekstialueita skaalata selaimen ikkunan levyiseksi. Näille voi sitten määrittää reunuksia ja taustakuvia selkeyttämään ja parantamaan sivun graafista ilmettä.
Miksi IE ei näytä kuvaa, mutta Mozilla näyttää: <div style="position: absolute; left: 10px; top: 10px"> <img src="kuvat/otsikko.gif" name="otsikko" width="100%" height="10%"> </div> Jos teen näin niin sitten IE:kin näyttää: <div style="position: absolute; left: 10px; top: 10px"> <img src="kuvat/otsikko.gif" name="otsikko" width="100px" height="10px"> </div> tai näin: <img src="kuvat/otsikko.gif" name="otsikko" width="100%" height="10%"> _X_X_X_X_X_[small][/small]
