Näin teet ikonit tekoälyn avulla

Tekoälyllä voi tehdä nopeasti näyttäviä ikoneita, mutta hyvä lopputulos ei synny pelkällä yhdellä promptilla. Jos tekoälylle antaa liian avoimen ohjeen, se tuottaa helposti kuvia, jotka näyttävät visuaalisesti hienoilta, mutta eivät vielä toimi oikeina ikoneina.

Tässä prosessissa käytin kahta työkalua: ChatGPTä ikonien ideointiin ja kuvien luomiseen sekä Figmaa ikonien viimeistelyyn ja vektorointiin. ChatGPT auttaa löytämään nopeasti visuaalisen suunnan, mutta Figma tekee lopputuloksesta muokattavan ja oikeasti käyttökelpoisen.

Ikoneissa tärkeintä ei ole yksittäinen näyttävä kuva. Tärkeämpää on, että tyyli pysyy yhtenäisenä, muodot ovat selkeitä ja lopputulos on käyttökelpoinen esimerkiksi verkkosivulla, sovelluksessa tai käyttöliittymässä.

Tässä prosessi, jolla tekoälyä voi käyttää ikonien suunnittelussa järkevästi.

‍

1. Kerää inspiraatiota ennen promptin kirjoittamista

Hyvä ikoniprosessi alkaa referensseistä. Ennen kuin tekoälylle kirjoittaa yhtään ohjetta, kannattaa etsiä muutama esimerkki siitä, millaista visuaalista suuntaa haetaan.

Hyviä paikkoja inspiraation keräämiseen:

• Pinterest
• Cosmos
• Dribbble

Referenssien tarkoitus ei ole kopioida valmiita ikoneita. Niiden avulla määritetään tyyli: ovatko ikonit litteitä vai kolmiulotteisia, käytetäänkö paksuja vai ohuita muotoja, ovatko kulmat pyöristettyjä, kuinka paljon värejä käytetään ja millainen yleisilme kokonaisuudessa on.

Tämä vaihe tekee promptista huomattavasti tarkemman. Tekoäly toimii paremmin, kun sille ei vain kerrota mitä pitää tehdä, vaan myös millaisella visuaalisella logiikalla se pitää tehdä.

‍

2. Anna tekoälylle tarkka ja rajattu ohjeistus

Kun visuaalinen suunta on tiedossa, seuraava vaihe on promptin kirjoittaminen. Tässä kohtaa kannattaa olla mahdollisimman täsmällinen.

Hyvä prompti kertoo, montako ikonia tarvitaan, mihin aiheeseen ne liittyvät ja mitä jokaisen ikonin pitää kuvata. Samalla promptissa kannattaa määritellä tyyli mahdollisimman selkeästi: esimerkiksi yksinkertaiset muodot, pyöristetyt kulmat, tasaiset värit, moderni app-icon-tyyli ja yhtenäinen visuaalinen kieli.

Yhtä tärkeää on kertoa, mitä tekoälyn ei pidä tehdä. Jos referenssikuvaa käytetään tyyliviitteenä, promptissa kannattaa sanoa suoraan, että samoja symboleita, sommitteluja tai yksittäisiä ikoneita ei saa kopioida.

Tällä tavalla tekoäly saa suunnan, mutta lopputulos pysyy alkuperäisenä.

Alta löydät promptin, jota käytin ikonien luomiseen. Kannattaa kuitenkin ajatella sitä lähtökohtana, ei valmiina kaavana. Paras lopputulos löytyy yleensä testaamalla muutamia eri variaatioita ja tarkentamalla promptia oman tyylin, käyttötarkoituksen ja halutun lopputuloksen mukaan.

Luo 9 leikkisän ja minimalistisen app-tyylisen ikonien setti podcast-sovellukselle.

Käytä liitteenä olevaa kuvaa vain tyyliviitteenä. Älä kopioi samoja ikoneita, symboleja tai sommitteluja. Noudata samaa visuaalista kieltä: yksinkertaiset vahvat muodot, pehmeästi pyöristetyt kulmat, selkeät geometriset muodot, tasaiset värit, helposti lähestyttävät mittasuhteet ja viimeistelty moderni app-icon-ilme.

Ikonisetin tulee sisältää 9 erilaista ikonia, jotka kuvaavat seuraavia toimintoja:
1. Podcastien löytäminen
2. Haku
3. Kategoriat tai aiheet
4. Jakson toistaminen
5. Kuuntelun tauotus tai jatkaminen
6. Tallennus kirjastoon
7. Jakson lataaminen
8. Ilmoitukset tai uudet jaksot
9. Käyttäjäprofiili tai tili

Vaatimukset:
- Luo täsmälleen 9 ikonia.
- Asettele ikonit selkeään 3x3-ruudukkoon.
- Jokainen ikoni tulee sijoittaa omaan neliönmuotoiseen laattaansa.
- Käytä kirkkaita ja ystävällisiä värejä, joissa on hyvä kontrasti.
- Ikonien tulee olla yksinkertaisia ja helposti tunnistettavia ilman tekstiä.
- Kaikissa ikoneissa tulee olla yhtenäinen visuaalinen paino, kulmien pyöristys, mittasuhteet ja yksityiskohtien määrä.
- Vältä ohuita ääriviivoja, realistisia varjoja, liukuvärejä ja turhia yksityiskohtia.
- Käytä pääasiassa täytettyjä muotoja ja vain muutamia yksinkertaisia korostuselementtejä tarvittaessa.
- Ikonien tulee sopia modernille verkkosivulle, mobiilisovellukseen, SaaS-tuotteeseen tai onboarding-näkymään.
- Lopputuloksen tulee näyttää yhdeltä yhtenäiseltä ikonijärjestelmältä, ei yhdeksältä irralliselta kuvitukselta.
- Ei tekstiä, numeroita, kirjaimia, logoja tai vesileimoja.
- Siisti esitystapa neutraalilla taustalla.

3. Tee ensin koko ikonijoukko ja arvioi tyyliä

Ensimmäinen generointi kannattaa tehdä kokonaisena settinä. Setti näyttää nopeasti, ymmärsikö tekoäly annetun tyylin oikein.

Tässä vaiheessa ei kannata vielä takertua yksittäisiin virheisiin. Tärkeämpää on katsoa kokonaisuutta. Kuuluvatko ikonit samaan sarjaan? Onko värimaailma yhtenäinen? Ovatko muodot riittävän yksinkertaisia? Ymmärtääkö katsoja, mitä ikonit esittävät?

Usein ensimmäinen versio ei ole valmis, mutta se kertoo paljon suunnasta. Jos ikonit ovat liian monimutkaisia, promptia voi tiivistää. Jos ne näyttävät liian geneerisiltä, niihin voi pyytää persoonallisempaa muotokieltä. Jos tyyli vaihtelee liikaa, promptissa kannattaa painottaa yhtenäistä design-järjestelmää.

Tässä vaiheessa tekoäly toimii ennen kaikkea nopeana luonnostelijana.

‍

4. Tee parhaat ikonit yksi kerrallaan

Kun ikonisetistä löytyy hyvä suunta, yksittäiset ikonit kannattaa generoida erikseen. Tämä on usein koko prosessin tärkein vaihe.

Kun tekoälyltä pyytää yhdeksän ikonia samaan kuvaan, jokainen ikoni saa vain rajallisesti tilaa. Muodot voivat jäädä epäselviksi, yksityiskohdat voivat vääristyä ja lopputulosta voi olla vaikea käyttää sellaisenaan.

Yksittäin tehty ikoni on yleensä selkeämpi. Sen voi pyytää mahdollisimman suurena, keskitettynä ja ilman ylimääräisiä taustaelementtejä. Tämä tekee ikonista helpommin rajattavan, muokattavan ja vektoroitavan.

Tässä vaiheessa kannattaa valita ikonisetistä parhaat ideat ja pyytää niistä erilliset versiot. Lopputulos on usein huomattavasti käyttökelpoisempi kuin alkuperäisen setin pieni ikoni.

‍

5. Vie ikoni Figmaan ja vektoroi se

Tekoälyn tekemä ikoni ei ole automaattisesti valmis design-elementti. Usein se on vielä rasterikuva, jota ei voi skaalata rajattomasti ilman laadun heikkenemistä.

Siksi valmis kuva kannattaa viedä Figmaan ja vektoroida. Vektorointi muuttaa kuvan muokattaviksi muodoiksi, jolloin ikonin värejä, kulmia, mittasuhteita ja yksityiskohtia voi säätää tarkemmin.

Tämä vaihe erottaa luonnoksen käyttökelpoisesta ikonista. Vektoroinnin jälkeen ikonista saa siistimmän, yhtenäisemmän ja paremmin osaksi oikeaa käyttöliittymää sopivan.

Samalla kannattaa poistaa kaikki turhat yksityiskohdat. Hyvä ikoni toimii myös pienessä koossa, joten liian ohuet muodot, epäselvät varjot ja pienet koristeet kannattaa yksinkertaistaa.

‍

6. Viimeistele ikoni oikeaa käyttöä varten

Viimeisessä vaiheessa ikoni tarkistetaan käytännön näkökulmasta. Näyttääkö se hyvältä isona? Toimiiko se vielä pienenä? Sopiiko se samaan sarjaan muiden ikonien kanssa?

Tässä kohtaa tekoälyn jälkeä voi joutua vielä siistimään. Muotoja voi suoristaa, värejä yhtenäistää ja mittasuhteita korjata. Jos ikoni tulee verkkosivulle tai sovellukseen, sen pitää olla selkeä myös nopeasti katsottuna.

Valmis ikoni ei siis ole vain tekoälyn generoima kuva. Se on tekoälyn avulla luonnosteltu ja suunnittelijan viimeistelemä elementti.

Tämä on tekoälyn suurin hyöty ikonisuunnittelussa. Se nopeuttaa ideointia ja antaa nopeasti useita visuaalisia vaihtoehtoja, mutta lopullinen laatu syntyy edelleen valinnasta, rajauksesta ja viimeistelystä.

‍

Lopuksi

Tekoäly tekee ikonien ideoinnista huomattavasti nopeampaa, mutta sitä ei kannata käyttää oikopolkuna koko suunnitteluprosessin ohi.

Paras lopputulos syntyy, kun prosessi etenee vaiheittain: ensin määritetään tyyli, sitten tehdään ensimmäinen ikonijoukko, valitaan parhaat ideat, tuotetaan ikonit yksittäin ja viimeistellään ne Figmassa.

Tekoäly ei poista suunnittelijan roolia.

Se tekee luonnostelusta nopeampaa.