Blogi


Pikavinkki: Kohina-efekti

Pikavinkkien tarkoitus on olla opas, minkä tekemiseen/oppimiseen menee 5-15 minuuttia.

Kohinan (noise) käyttäminen nettisivujen grafiikoissa on yleistymässä, koska se on erittäin helppo ja nopea keino saada sivuille näyttävyyttä. Käytän kyseistä menetelmää sivujeni taustalla. Kohinan lisääminen onnistuu ainakin Adoben Photoshop -ohjelmassa, muistakin kuvankäsittelyohjelmista sen voi löytää.

1. Tausta

Täytä haluamasi alue haluamallasi värillä. Käytin esimerkissäni vihreää (#70894c). Kuva.

2. Kohinan lisääminen

Tee uusi kerros (New Layer: Ctrl+Shift+N). Täytä uusi kerros valkoisella (#ffffff) ja valitse ylävalikosta Filter – Noise – Add Noise. Laita asetukset:

Amount: 25%

Distribution: Uniform

Monochromatic: Valittu

Klikkaa OK. Kuva asetuksista.

3. Kohinan yhdistäminen taustaan

Tähän vaiheeseen ei ole oikeaa keinoa, vaan haluttu tulos tulee kokemuksen ja kokeilun saavutuksena. Valitsemalla kohinakerroksen (layerin) ja muuttamalla Blending modea, sekä läpinäkyvyyttä (Opacity) voit kokeilla eri yhdistelmiä ja valita omaan makuun sopivamman.

Jos käytät tummaa väriä taustalla, kannattaa kohinakerros invertoida (Ctrl+I tai Image – Adjustments – Invert). Kyseistä keinoa ei tietenkään ole pakko käyttää, mutta kannattaa kokeilla.

Vaaleilla taustaväreillä yleensä riittää kun muuttaa kohinakerroksen Blending modeksi: Multiply ja läpinäkyvyyttä (Opacity) halutun tuloksen mukaan.

En laittanut esimerkkikuvaan invert-muokkausta, koska käytin  vaaleaa taustaväriä. Käytin asetuksina Multiply ja Opacity: 40%. Kuva valmiista tuotoksesta.

, ,

Sami

HTML5/CSS3 addikti ja aikamoinen nörtti ns. "true nerd". Työskentelen Haajalla web-suunnittelijana, sekä vapaa-ajalla tutkin aina uusia mahdollisuuksia toteuttaa verkkosivuja.