Luo yksinkertaisia ​​kuvia verkkoille

Jan 26, 2026
Miten tehdään

Istuin alas, pelannut jotain musiikkia, himmennettiin valot ja avasi kannettavan tietokoneeni. Minulla oli paljon tekemistä. Pyrkimys kutsua inspiraatiota, aloin piirtää Doodle Art linjat näytön yhdestä kulmasta toiseen, kun näin komeetta. "Hmm", "Aivoni alkoi hitaasti," mitä jos yhdistän ne ja lisää joitakin planeetat? "

Muutama tunti myöhemmin minulla oli suosituin dribbble kuva. Muistan silti tuskin, miten se tapahtui, mutta sen jälkeen kaivaa aivoni läpi, huomasin sisäisen algoritmin luomaan kuva - ei vain tämä, vaan muut, mutta muut olen tehnyt. On hauskaa, olen sellainen odotettu, että se on monimutkaisempi. Noh…

Kuvatyyli

Ennen kuin aloitan työskentelyn kuvassa, varmistan, että ymmärrän sen tarkoituksen ja kontekstin, jossa se elää. Onko se sovellus tai verkkosivusto tai taustakuva? Onko sinulla tekstiä siihen, ja se sijaitsee kiireisessä ympäristössä? Onko se tarkoitus symboloida toimintaa vai onko se vain siellä antaa tietyn tunnelman?

Jos havainnollistamisen on tarkoitus välittää selkeä idea tai symboloida tiettyä esinettä tai toimintaa, sitten valitsen yksinkertaisen toteutuksen, jossa kaikki huomion keskittyy tärkeään osaan. Jos olen kuitenkin nimenomaan menossa "hiljaiselle" taustakuvaksi, valitsen kuvion kaltaisen lähestymistavan tai varmistaa, että ei ole ilmeisiä huomiota tarttuvia elementtejä, minimoida mahdollisuus ihmisten yli tulkita sitä . Sovellusten kuvitelmille yritän pitää asiat, jotta vältettäisiin huomiota toiminnallisuudesta.

Esteettiset säännöt

Aivoni haluaa luoda kaikki nämä outoja sääntöjä. He ovat kuin naurettavaa haasteita, joita en kestä siirtyä: Mitä jos piirtää ihmisen vain ympyröillä? Entä jos havainnollisen auringonlaskua vain yhdellä värillä?

Geometriset säännöt, loogiset edistysaskelut, symmetria. On jotain erittäin houkuttelevaa, että taiteeseen sovelletaan tiukkoja matemaattisia sääntöjä. Se tuntuu päinvastaisesta teknisestä taikuudesta; Se nauhoittaa mystinen elementti taideteoksesta, joten se on melkein kuin paljastaen sen takana.

Monimutkainen kuva; Yksinkertainen väripaletti

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette

Kaupunki kuva monimutkaisella yksityiskohtaisella tasolla, joka on yhdistetty yksinkertaiseen, analogiseen väripalettiin (Kuva luotto: Nina Geometrieva)

Kun se osoittautuu, aivoni on melko laiska, kun valitaan väri, joten se on kaksi yleistä väripalettiä, jotka se valitsee: yksi monimutkaisista kuvituksista; toinen yksinkertaisille.

Monimutkaisilla kuvituksilla on korkea rakeisuustaso, jossa on monia muotoja / esineitä ja paljon yksityiskohtia. Nämä ovat yleensä kuvioita luonteeltaan ja niillä ei ole selkeää polttopistettä. Aivoni on päättänyt, että tällaiset kuvat toimivat hyvin monokromaattisten tai analogisten väripalettien kanssa. Tai laajemmilla termeillä - vähemmän värejä ja vähemmän värin kontrastia.

Kaikki tämä kiehuu visuaaliseen tasapainoon; Jos muodot ovat hulluja, värin pitäisi olla. Yksi poikkeus on siinä tapauksessa, missä haluan painottaa tiettyä esinettä, joka muuten ei erotu. Tämä voidaan saavuttaa käyttämällä erittäin kontrastiväriä, kun kaikki muu pidetään monokromaattisena ja tameen. Täydellinen visuaalinen tasapaino on jonnekin ylityslaitteiden välillä (voimakkaat värit, monimutkaiset muodot, paljon yksityiskohtia, kaikki huutaa kasvosi) ja polkupyöräily (huono minimaalinen, tylsää, ei mitään uutta tai mielenkiintoista).

Monokromaattiset palettimet

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements

Analogiset tai yksiväriset paletit toimivat tehokkaasti, kun elementtien visuaalinen eteneminen tai toistaminen (Kuva luotto: Nina Geometrieva)

Monokromaattinen väripaletti koostuu yhden värin sävyistä tai sävyistä. Sävyt tapahtuvat, kun väri sekoitetaan asteittain valkoiseen; Shades tapahtuu, kun se on asteittain sekoitettu mustalle. Yksi asia, jonka olen aina ollut monokromaattisilla paletilla, on se, että sävyt ja sävyt menettävät asteittain värähtely, koska väri sekoittui valkoisella tai mustalla, joilla molemmilla on nolla prosenttia kyllästynyt.

Tämän asteittaisen tylsyn välttämiseksi käytän yksinkertaista huijausta: sekä lisäämällä valkoista tai mustaa, siirrät asteittain hua hieman. Tämä on olennaisesti hienovarainen analoginen paletti monokromaattisen paletin sijaan. Esimerkiksi, jos haluan luoda punaisia ​​monokromaattisia sävyjä, siirrät sävyn kohti oranssia. Jos haluan luoda punaisia ​​monokromaattisia sävyjä, siirrät sävyn kohti magentaa, kun se tummenee. Jos haluan saada kevyempiä sävyjä sinistä, siirrän kohti syaania; Sinisten tummien sävyt, siirry toiseen suuntaan, kohti violetti.

Tämä johtaa palettiin, joka silti tuntuu jonkin verran monokromaattisesta, mutta on paljon elossa ja ehdottomasti on potkia. Koska huomasin tämän, en ole koskaan luonut todellista monokromaattista palettia uudelleen.

Yksinkertainen kuva; Monimutkainen väripaletti

Kuvilla pienemmällä monimutkaisella tavalla on yleensä kirkas polttopiste ja objektin hierarkia. Muodot ovat yleensä yksinkertaisempia, joten värivaihtoehdot voivat olla Wilder. Ajattelen korkean kontrastinta värejä - täydentävät, triadic, tetradic - niin kauan kuin se on silmiinpistävä, stimuloi paletti.

Siellä on koko maailmankaikkeus, mitä kuvain monimutkaisiksi ja yksinkertaisiksi kuvituksiksi. Mutta aivoni ei ole liian huolissaan kaikesta tämän spektrin kannalta - mieluummin merkitsemällä kaikki kuvat joko monimutkaisina tai yksinkertaisina.

Korkean kontrastin väritteet eivät ole yhtä yksinkertaisia ​​kuin vastakkaisten värien poiminta väripyörällä. Väripyörä on erinomainen lähtökohta, mutta se ei missään nimessä Prosessin loppu. Esimerkiksi kun valitset hyvän oranssin ja sinisen yhdistelmän, kiinnitän huomiota muutamiin asioihin: havaittu luminanssi ja miten aksenttivärit toimivat oletusväreillä.

Havaittu luminanssi

Jos molemmilla väreillä on sama havaittu luminanssi, aivot ovat vaikeita erottaa niiden välinen raja - niin katsomassa kuva tuntuu epämukavalta. Ellei väriä ole koskaan tarkoitus koskettaa toisiaan, kannattaa varmistaa, että heillä ei ole samaa havaittua luminanssia.

Oh, ja jos olet utelias, miksi käytän sanaa "havaittu", etsiä Helmholtz-Kohlrausch-vaikutusta, joka osoittaa, että samassa luminanssissa voidaan havaita värejä, joilla on erilaiset arvot. Koska oranssi on korkeampi kuin sininen, esimerkiksi sininen, on helppo lisätä kahden värin välistä erotusta kevyemmällä oranssilla ja tummemmalla sinisellä.

Accent vs. oletusvärit

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents

Kuva Zopimin kotisivulle. Siniset sävyt ovat hallitsevia, oranssi tarjoavat aksentteja (Kuva luotto: Nina Geometrieva)

Jos kunkin värin käyttö on huomattavasti erilainen, säädän väriarvot vastaavasti. Olla rohkea aksentti värejä ja pelaa sitä turvallisesti oletusväreillä on minun go-lähestyä.

Yli Orange-Blue-esimerkissä käytän sinistä rauhoittavana värinä suuremmille alueille, taustat ja suuret elementit ja jotkut luonnonvaraiset oranssit napit, kuvakkeet ja muut pienet elementit. Kuvituksen yhteydessä minulla olisi sinisiä sävyjä pohjana ja uudestaan, oranssina accent - ehkä korostaa mielenkiintoista yksityiskohtaa tai tärkeä osa.

Visual Balance Check

Riippumatta siitä, mitä mieltä olet seuraamalla edellä mainittuja oppaita, varmista, että otat askeleen takaisin ja tarkista, onko kaikki järkevää yhdessä. On niin paljon poikkeuksia havainnollistamisessa, että se olisi mahdotonta luetella kaikki yhdistelmät, jotka synnyttävät hämmästyttävää kuvaa. Aina kokeilla asioita, jotka näyttävät mielenkiintoisilta, ja kun jotain yllättää sinut, varmista, että ymmärrät sen, jotta voit jatkaa intuitionne parantamista.

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti numero 286; Osta se täällä !

Aiheeseen liittyvät artikkelit

  • 7 Web Design Dos ja Don'ts
  • 6 parhaimmista freelance-salkkuista 2016
  • Web-suunnittelijoiden 6 parhaat Photoshop-työkalut

Miten tehdään - Suosituimmat artikkelit

Onko Apple icloud-varastosi täynnä? Näin voit vapauttaa tilaa

Miten tehdään Jan 26, 2026

(Kuva luotto: Apple) Applen iCloud-palvelu on yksi Paras pilvi varastointi Tuotteet ympärillä - ei i..

Vienti Effects-animaatiot HTML5: lle

Miten tehdään Jan 26, 2026

Animaatio verkossa on täällä jäädä. Se on kaikessa hienot liikkeet, jotka auttavat tuomaan UI-muotoilu Eläm..

Maali 3D-verkkoon Zbrushcoren polypain-työkalulla

Miten tehdään Jan 26, 2026

Polypaintti Zbrushcore on fantastinen työkalu, jonka avulla voit lisätä väriä ja tekstuurit malliin, kun luot..

Kuinka veistää 3D-painettua goblin

Miten tehdään Jan 26, 2026

Tämän hankkeen käsite, Mushroom Goblin, tulee ystäväni Adrian Smithin piirustuksesta. Olen työskennellyt tämän konseptin ..

Master käyttäjäkokemusstrategia

Miten tehdään Jan 26, 2026

UX-strategia on prosessi, joka olisi aloitettava ennen digitaalisen tuotteen suunnittelua tai kehittämistä. Se on k..

Verkkokauppasivustojen suorituskyvyn parantaminen

Miten tehdään Jan 26, 2026

Tammy Everts antaa esityksen suunnittelun, suorituskyvyn ja muuntokurssien välisestä yhteydestä ..

Creative Design Frient

Miten tehdään Jan 26, 2026

Yksi minun ohjaajistani kertoi minulle, että jos hän lukittiin vankilaan loppuelämänsä ajan, ei vain kynää ja paperia, hän ei kirjoittaisi asiaa, toisistaan ​​ehkä "hyvästit" ju..

Ultimate Guide yhdistää kuvia Photoshopissa

Miten tehdään Jan 26, 2026

Kaikista Photoshop-projekteista, kuvien koostumus yhteen fantastiseksi kehykseksi on ehkä nautittava ja luova harjoittamisesta. ..

Luokat