En tiedä sanoisko grafiikaksi,tyyliksi vai miksi, mutta olen ihmetellyt, että miten voi saada internet sivuista tyylikkään kuvista, taulukoista, logoista yms. Esimerkiksi, miten ohjelmointiputkan tuo " on error goto ohjelmointi putka" logo on tehty. Ihan kuvankäsittelyn avulla vai millä. Tai miten ylipäätänsä voi nettisivujen grafiikasta/tyylistä saada hienoja. Pitääkö olla ihan taiteilija näin harrastajan siihen hommaan?
Azure kirjoitti:
Esimerkiksi, miten ohjelmointiputkan tuo " on error goto ohjelmointi putka" logo on tehty. Ihan kuvankäsittelyn avulla vai millä.
En nyt varmasti voi sanoa, mutta veikkaisin, että ihan tyhjästä Photoshopilla.
Azure kirjoitti:
Tai miten ylipäätänsä voi nettisivujen grafiikasta/tyylistä saada hienoja. Pitääkö olla ihan taiteilija näin harrastajan siihen hommaan?
Toki taiteellinen silmä auttaa, ja hiukan esteettistä silmää tarvitaan, jotta osaa valita keskenään sopivat värit jne, muttei taiteen harrastus mitään pakollista näppärän veppigrafiikan aikaansaamiseksi ole.
Samaan aiheeseen... Kun sillon tällön näkee pyöreäkulmaisia linkinreunoja (tai taulukon, jne), niin onko nekin vain photoshopilla, tjs. tehtyjä, vai saako semmoisen esim. CSS:ällä...
Ja jos saa, niin miten?
Gecko-selaimista löytyy ehdotettua CSS3-ominaisuutta vastaava -moz-border-radius, mutta yleensä nuo vielä on kuvia.
Tuhti tietopaketti luvassa...
Nykyiset (joustavimmat) tekniikat erinäköisiin kulmakoristeluihin ovat "hackkeja", ts. yleensä on laitettu sivun sisällön ja rakenteen kannalta ylimääräisiä turhia elementtejä sekaan, jotta CSS:llä voidaan asetella riittävästi kuvia. Tämä johtuu tämänhetkisen CSS-standardin rajallisuudesta että selaimien edelleen puutteellisesta (tai jopa vakavasti viallisesta) tuesta.
Tavanomaista sivua tehdessä grafiikat tosiaan jakautuvat kahteen osaan: bittikarttakuviin sekä CSS:n tyylitietoihin. Bittikarttakuvat on tallennettu siten, että jokainen pikseli voidaan palauttaa. Joskin kaikki formaatit eivät muista pikseleitä täydellisesti pienemmän tiedostokoon takia, esim. JPEG luo artefakteja. GIF vastaavasti voi sisältää vain 256 väriä. PNG on tällä hetkellä ainoa webissä yleisesti käytössä oleva kuvaformaatti, joka kykenee muistamaan jokaisen pikselin tarkasti sekä sisältämään myös tietoa alfakanavan, ts. "portaatonta" läpinäkyvyyttä. Käytännössä bittikarttakuvat tehdään kuvankäsittelyohjelmalla kuten PhotoShop, GIMP tai Paint Shop Pro (itse suosin viimeisintä).
CSS:llä voidaan määrittää ennemminkin sivulla olevien elementtien sekä tekstin tyyliä. Voi laittaa taustaväriä, tekstin väriä, reunuksia, sisennystä, marginaaleja, jopa läpinäkyvyyttä (Firefox ja Opera 9 tukevat). Helpoiten onnistuvat erinäköiset laatikot, yleensä pyöreiden reunojen teko on aikamoista kikkailua.
Kuvia voi lisätä HTML-sivuun kahdella tavalla: koristeellisena osana, eli taustakuvana CSS:n kautta, tai sitten dokumentin sisällön osana HTML:ssä IMG-tagina. Toisin sanoen IMG-tagi on olennainen osa sivun sisältöä ja sen täytyy näkyä vaikka CSS ei toimi. Vastaavasti CSS:ssä määritellyt kuvat eivät ole tärkeitä (sisällön kannalta).
Uutena tulokkaana meille on sitten tarjolla vektorigrafiikkaa. Vektorigrafiikkaa voi zoomata portaattomasti laadun kärsimättä, eli vaikka kuvasta tekee pienen, voi sen edelleen palauttaa isommaksi ja se on edelleen samanlainen (vrt. bittikartta, joka selvästi kadottaa tietoa kun sen koon pienentää ja sitten taas suurentaa). Toisaalta se on myös rajoittunut formaatti, koska se voi koostua lähinnä vain ennalta määritetyistä elementeistä. Firefox 1.5 sisälsi ensimmäisenä selaimena natiivin tuen SVG-formaatille (siis ilman erillisen pluginin asentamista). Tällä hetkellä tosin vapaa zoomailu ei näyttäisi onnistuvan, mitä itse ainakin kaipaisin; muitakin rajoitteita vielä on.
CSS3:ssa on sitten tosiaan tulossa kaikenlaista karkkia: kuvallisia reunuksia, palstoittaminen, useamman kuvan tausta per elementti... kun kaikki selaimet alkavat tukea noita, saadaan aikaiseksi jo paljon hienompaa ja joustavampaa jälkeä vähemmällä vaivalla :)
Eli mikkisoftan Paintilla ei pitkälle pötkitä. Kannattaa käydä hakemassa joku testiversio vaikka PSP:stä tai kenties joku ilmainen proggis tuolta pingviinihemmojen hoteista. Minä en osaa tehdä mitään hienoa, mutta kokeilemalla olen oppinut tekemään vähemmän rumaa.
Tekstilogoja voi generoida automaattiesti ohjelmilla.
ImageMagick on yksi hyvä siihen. Sen komentorivijutut tosin täytyy opetella, mutta manuaalissa on esimerkkejä. Ei pitäisi nokan tuhista asennuksen kanssa (toki ilmainen), ja sitten vain esimerkkejä muokkaamaan. Siitä sitä oppii.
Esimerkki käyttötavasta: Voit määritellä jonkin kuvan tulevan antamastasi tekstistä. Laitat pohjalle ensin tekstin siluetin mustana ja käytät siihen blur-toimintoa, joten se sumenee. Sitten liität itse tekstin kuvan päälle hieman eri kohtaan, jolloin tumma sumea tausta näyttää aivan varjolta. Siinä on heti tyylikäs otsikkoteksti bittikarttakuvana. Sama menettely toimii kaikilla antamillasi teksteillä.
Hyvällä mielikuvituksella saat paljon muuta aikaan. Ohjelmaa voi käyttää monella muulla tavalla kuvien käsittelyyn, kuvaformaattien muuttamiseen, kuvagallerioiden tekoon (thumbnailit) ym. ym. Sitä voi kutsua vaikka PHP:sta tai muusta kielestä webbisivua rakentaessa, jolloin logoja ym. voi luoda lennossa.
Siis, ilmainen ja hyvä softa. Tutustukaa. Minä joskus tarvitsin tällaista, ja tämä oli ensimmäinen mitä suositeltiin. Muista vaihtoehdoista en edes tiedä, koska IM riittää kaikkiin minun (vähiin) grafiikkavaatimuksiin loistavasti.
GIMP on sellainen "pingviinihemmojen" softa joka toimii kiitettävästi Windowsissakin, jos asentaa jonkin GTK-tms-paketin, johon on kuitenkin hyvät ohjeet. Sillä kelpaa piirrellä ja käsitellä kuvia interaktiivisesti, jos IM:n komentorivi ei nappaa. Kokoa on tietenkin tuhdisti ja pieni hitaus voi vaivata sen takia.
Pitäisikö lopuksi heristää sormea, ja murista, ettei webbi ole kuvilla koreilua varten, vaan rakenteellisia dokumentteja varten, joissa on syvällistä asiaa jne. jnpp.? Enpä jaksa. Sormi on jo yliheristynyt eilisen C-ohjelmoinnin jäljiltä.
Minulta löytyy kotisivuilta suoraan Paint Shop Pro 4.12 niille, jotka osaavat arvostaa Wanhan Ajan Hywiä pikselitasonviilausohjelmia. PNG:n alfakanavat eivät tosin onnistu, koska ohjelma ei tue leijereitä (layer). Muuten tosi näppärä, sikamaisen nopea ja kiva ohjelma.
Paint Shop Pro 7 on myös edelleen yllättävän suosittu ohjelma. Johtuu siitä, että siinä on hyvä toimintamalli (imo järkevämpi kuin GIMPissä ja PhotoShopissa) ja kaiken lisäksi se on muutamista kehittyneistä ominaisuuksistaan huolimatta kevyt ohjelma nykykoneille. Ei tarvitse esimerkiksi odottaa kauaa käynnistymistä.
Aihe on jo aika vanha, joten et voi enää vastata siihen.