Mistä kuvitus?

  • Ota itse, käsittele ja optimoi oikeisiin asetuksiin Photoshopissa
  • Luo itse Illlustratorissa, Indesignissä ym.
  • Piirrä, maalaa, tekstaa itse ->skannaa Photoshoppiin tai Illustratoriin käsiteltäväksi pikseli- tai vektorigrafiikkamuodossa
  • Osta valokuvaajalta, kuvittajalta, piirtäjältä tai muulta taiteilijalta
  • Kuvapankeista voi ostaa kuvia yksitellen tai paketteina tai erilaisilla kuukausi/vuosisopimuksilla
  • Pexels, Pixabay, Dreamstine, Pxhere, Canva, Adobe stock, Istock (Osa maksullisia)


Kuvankäyttöoikeudet!

  • Mitä vaan kuvia EI SAA netissä käyttää luvatta, ei edes omalla ei-kaupallisella sivulla!!!!
  • Määritä jo Googlesta hakiessa hakuasetuksissa
  • Lue kuvalisensseistä: https://creativecommons.fi/lisenssit/
  • Kuvien lisensseistä selviää miten ja mihin kuvia voi käyttää ja onko pakko mainita tekijä. Vaikka ei olisi pakko, on silti kohteliasta mainita.

Kuvan talletus oikein Photarissa

  • Tallenna nettisivulle tulevat valokuvat Photarissa sRGBmuodossa JPG:nä, tarkista profiili + talleta sopivassa pikselikoossa, leveys esim. 1920 px taustakuvalle.
  • Kuvat on yksitellen käsiteltävä ja talletettava jokainen erikseen. Kaikkia kuvia ei vo voi talletttaa samanlaisilla säädöillä ja asetuksilla. Riippuu kuvasta, kuinka paljon se kestää pakkaamista jne.
  • Haluttuun tiettyyn kokoon muuttaminen: Window/Options -paletti auki. Valitse pudotusvalikosta (esim.) kohta: W(Weight) x H(Hight) x Resolution ja anna arvot niihin, HUOM Mitat annetaan PIKSELEINÄ!!! Esim. W 750px H 500px 72
  • Resoluutiolla ei ole väliä, vain pikselimitat vaikuttavat.
  • Nettikuvien resoluutioksi riittää 72 dpi.
  • Pakkauslaatu Quality: esim. high tai medium. Format options: baseline.
  • Kuvan kokoa pienennettäessa (Image / Image Size) kannattaa valita x(Rasti) Resample, Bicubic sharper (reduction)
  • Kuvan tiedostokoon kannattaa olla mahdollisimman pieni, jotta kuva latautuu selaimessa nopeasti. Ei kuitenkaan kannata pakata liikaakaan, ettei tule jo pikselit näkyviin.
  • Kuvat (rasterikuvat) talletetetaan yleensä aina jpg:nä. Png:nä vain jos kuvassa on läpinäyviä elementtejä.
  • Jpg:tä on helppo pakata tarvittaessa pienemmäksi, jos halutaan pienentää tiedostokokoa.
  • Png:nä ei kannata tallettaa kuvia, jossa EI ole läpinäkyviä elementtejä, koska png tiedostokoko on suurempi kuin jpg:n.
  • Vektorigrafiikkaan paras on svg –tiedostomuoto, mutta WordPress ei huoli sitä ainakaan vielä.
  • Talleta kuvat File / Export / Save for web… (Ei File / Save as)

Kuvien säätöä CSS:llä

Kuvan kallistaminen esim. 30 astetta

  • transform: rotate(30deg);

Taustakuvan sovittaminen joustavasti ikkunan kokoon (isolla näytöllä)

  • text-align: center (Kuvan keskitys)
  • background-size: cover (Kuvan peitto koko tausta-alueelle)
  • background-position: right center tai center tms (Määrittelee sen mistä kohtaa kuva alkaa näkyä, jos se ei mahdu näkymään kokonaan, esim otsikkoalueella)
  • box-sizing: border-box (Kumotaan paddingista johtuva kasvu)
  • margin: 0px (Poistetaan oletusmarginaali)
  • padding: 1px (En muista miksi tämä laitettiin)

Pienen sivun taustakuva-ongelman ratkaisu

  • body{ min-height: 100vh; (Venytetään vähintään ikkunan korkeudeksi)
  • margin: 0; (Poistetaan oletusmarginaali)
  • padding: 0.5em; (Palautetaan reunoille tyhjää tilaa)
  • box-sizing: border-box; (Kumotaan paddingista johtuva kasvu)

Kuva oikealle määrittely: (esimerkiksi)

  • .kuvitus oikealla{ float: right;
    • vertical align: 2px;
    • margin:0;
    • margin-left: 20px;

Kännykkänäkymään eri sääntö: (esimerkiksi)

  • @media (max-width: 609px)
    • .kuvitus oikealla
    • {float: one; margin; 0;   }