Mikä on varjo?

Varjo on kuvan pehmeämpi ja tummempi kopio, joka sijoitetaan kuvan taakse hieman sivuun, ikään kuin kuva leijuisi sivun yllä. Se nostaa tuotekuvat, logot, kuvakaappaukset ja valokuvat irti taustasta ja tuo litteisiin designeihin syvyyttä.

Työkalun kuvaus

Avaa kuva, säädä varjon pehmeyttä Sumennus-kohdassa ja siirrä sitä vaaka- ja pystysiirtymillä. Valitse väri ja peittävyys Väri-osiossa. Jos PNG- tai WebP-kuvassa on läpinäkyvyyttä, varjo seuraa kohteen muotoa eikä sen ympärillä olevaa suorakulmiota. Valokuvalle muodostuu suorakulmion muotoinen varjo.

Piirtoalue kasvaa juuri sen verran, että koko varjo mahtuu siihen. Ladattava PNG-tiedosto on läpinäkyvätaustainen, ja sen voi sijoittaa mille tahansa sivulle tai dialle.

Ominaisuudet

  • Seuraa läpinäkyvien kuvien muotoa
  • Sumennus, siirtymä, väri ja peittävyys
  • Piirtoalue kasvaa varjon mukaan, joten mitään ei leikkaudu pois
  • Läpinäkyvätaustaisen PNG-tiedoston lataus

Toimintaperiaate

Sumennus toimii kuten CSS-varjon sumennus: kyseessä on Gaussinen sumennus, jonka keskihajonta on puolet arvosta. Varjo häipyy noin puolitoista kertaa sumennuksen arvon verran kuvan reunojen ulkopuolella, joten piirtoalue kasvaa tämän verran jokaisella sivulla, jolle varjo ulottuu siirtymä huomioiden.

Vinkkejä

  • Sumea varjo suoraan kuvan alla ilman vaakasiirtymää saa kuvan näyttämään leijuvalta.
  • Luonnollisen vaikutelman saat, kun peittävyys on noin 30–50 %. Ei sumennusta ja täysi peittävyys taas luovat litteän retrotyylin.
  • Värillisellä sivulla sivun väriä tummempi sävy näyttää luonnollisemmalta kuin musta.
  • Säilytä läpinäkyvä tausta käyttämällä PNG- tai WebP-muotoa. JPG lisää varjon valkoiselle taustalle.