Visuaalisiin identiteetteihin kuuluu tärkeänä osana kuvat ja kuvitukset. Identiteetin kehityksessä usein suunnitellaan kokonaisuutta tukevat materiaalit, joita on helppo käyttää erilaisissa yhteyksissä. Kuvitukset saattavat olla valokuvia, piirrettyjä kuvituksia, 3d mallinnettuja kuvia tai muita kuvia.

Pikselikuvitukset ja ditheröinti

Ennen nopeita verkkoyhteyksiä, laajaa väriavaruutta ja nykyistä DTP-painotekniikkaa niin printissä kuin näytöllä käytettiin rasterikuvia, joissa oli rajoitettu värimäärä. Muunmuassa yksivärisiä rasterilogoja (joissa saattoi olla liukuvärejä tai sävyjä) käytettiin taitto-ohjelmissa bitmap-muodossa. Näissä kuvissa oli vain kaksi väriä, musta ja valkoinen, mutta taitto-ohjelmassa mustan värin pystyi vaihtamaan mihin tahansa muuhun. Tällä tavalla oli mahdollista luoda kevyesti ja joustavasti duotone-kuvia sekä käyttää esimerkiksi merkkiä värillisellä tai valkoisella pohjalla.

Aikanaan myös näyttöjen värimäärä oli rajallinen (esimerkiksi 16 tai 256 väriä). Jotta kuvat eivät näyttäneet karkeilta, kehitettiin erilaisia tekniikoita moniväristen kuvien luomiseen rajoitetulla pikseli- ja värimäärällä. Näitä rajoitettuja värejä järjesteltiin lomittain siten, että värien siirtymät näyttivät pehmeämmiltä eikä värialueiden rajoja erottanut selvästi. Tätä pikseleiden järjestelytekniikkaa kutsutaan ditheröinniksi. Tekniikasta on olemassa useita toteutustapoja, joista Photoshopissa yleisiä ovat diffusion, pattern ja noise. Näistä on kattava esittely esimerkiksi Wikipedian aihetta käsittelevässä artikkelissa.

Nykyisin bitmap-kuvia ja ditheröintiä ei enää tarvita teknisistä syistä, olipa kyseessä printti tai näyttö. Nämä vanhat tekniikat tarjoavat kuitenkin mahdollisuuden luoda mielenkiintoisia tekstuureja ja pintoja – eräänlaisia digitaalisia pensselinvetojen jälkiä.

Tekniikan jatkokehitystä ja testailua

Suunnitellessamme Green Beans -yrityksen visuaalista ilmettä, teimme kokeiluja ja taustoitusta kuvituksia varten. Alla muutama poiminta näistä kokeiluista.

Pikselitekstuurien pohjamateriaalina voidaan käyttää erilaisia sumennettuja kuvia, joihin ditheröinti on toteutettu niin, että värit joita sen pisteissä käytetään on käsin valittu. Alla muutama lähdekuva.

Kevyet värivaihtelut sävyjen välillä pohjakuvassa synnyttää ditheröinnin yhteydessä mielenkiintoisia rytmejä ja kuvioita.

Säätämällä ditherin prosenttimäärää Photoshopissa RGBstä – Indexoiduksi muutoksen yhteydessä, saa haettua sopivan tasoisen määrän ditherkuviota kuosiin.

Näin toteutettuun patterniin saa lisää syvyyttä käyttämällä sitä materiaalina 3D-mallissa. Käytimme 3D mallinnukseen tässä yhteydessä Blender:iä.

Tästä 3D-mallsita renderöidyn valmiin kuvan voi vielä käsitellä käyttämään haluttuja brändivärejä, jolloin kuvitus säilyy yhtenäisenä muun brändin kanssa.

Kuvan uudelleen ditheröinti tuo kuvitukseen vielä mielenkiintoisen Moiren ja luo pikseleihin lisää rytmiä.

Muita työkaluja ditheringiin toteutukseen

ANTLII dither tool https://antlii.work/DITHR-Tool
Selainpohjainen ditheröintityökalu, jolla voi tehdä 3D malleista ja muusta materiaalista ditheröityjä animaatioita. Ohjelmalla voi ilmaiseksi tehdä vesileimattuja kuvia ja maksua vastaan pääsee leimoista eroon.

Dither boy https://studioaaa.com/product/dither-boy/
Kertamaksulla ostettavissa oleva paikallisesti asennettava ditheröintityökalu josta löytyy monenlaisia ditheröintialgorytmejä.

Sidosteen kuosit

Bitmap-muotoisia pikselikuoseja on käytetty myös mm. Sidosteen pakkauksissa ja muissa materiaaleissa.

Alla kolmen sukan pakkauksen rakenne avattuna, jossa pistekuviossa käytetty kuva näkyy selkeämmin kokonaisuudessaan. Tästä kuvasta saattaa löytyä joku konttoriltamme tuttu hahmo. Tätä samaa pistekuviota on käytetty kaikissa ylläoleveissa pakkauksissa – toki tiukasti rajattuna.

Lue lisää Sidosteen brändikehityksestä →

Read briefly in English

Visual identities often include images and illustrations that support the overall brand concept. These can range from photographs and hand-drawn illustrations to 3D renders and other visual elements.

Pixel Art and Dithering

Before modern digital printing and high-speed internet, images were often rendered in bitmap format with limited colors. Techniques like dithering were used to create smooth gradients and textures by arranging pixels in a way that blended colors more seamlessly. This was especially useful in early computer screens with restricted color palettes.

While dithering and bitmap graphics are no longer necessary for technical reasons, they still offer a unique aesthetic. These techniques can be used creatively to add texture and depth, mimicking digital brushstrokes.

Experimenting with the Technique

For the visual identity of Green Beans, we explored various pixel-based illustrations. By manually selecting colors and adjusting dithering levels in Photoshop, we created patterns that added rhythm and structure to the visuals. These patterns were further enhanced using 3D modeling in Blender, allowing for a seamless integration of brand colors.

Reapplying dithering can also introduce moiré effects, creating dynamic visual rhythms within the pixel structure.

Application in Packaging

Bitmap pixel patterns have been used in various branding applications, including Sidoste packaging. A particular dot-based illustration was applied across different packaging materials, adding a distinctive and recognizable texture.