Luo yksinkertaisia ​​kuvia verkkoille

Sep 11, 2025
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

Luo mukautettu slack bot

Miten tehdään Sep 11, 2025

(Image Credit: Web Designer) Slack on yhä suosittu työkalu yrityksille ja joukkueille, jotka tarvitsevat kommunikoi..

Kuinka luoda 3D-ihmissusi epärealistisessa moottorissa

Miten tehdään Sep 11, 2025

Tämän ihmissunan käsite, malli, rakenne ja materiaali asetukset - joka luotiin Kunoichille, varkain-suuntautunut peli, joka sijaitsee fantasian maailmassa - valmistui kokonaan Unreal Engin..

21 tapaa optimoida CSS ja nopeuttaa sivustosi

Miten tehdään Sep 11, 2025

CSS: n on läpäistävä suhteellisen monimutkainen putki, aivan kuten HTML ja JavaScript. Selaimen on ladattava tiedostot palvel..

10 hämmästyttävää asiaa, joita voit tehdä kerroksilla

Miten tehdään Sep 11, 2025

Kerrokset ovat, jotta voit rakentaa projektin varhaisista perustuksista viimeistelyyn. On vaikea uskoa sitä nyt, mutta ne eivät..

Piirrä kuva alle viisi minuuttia

Miten tehdään Sep 11, 2025

Luonnos viiden minuutin pose on hauskaa, koska se tarjoaa vain tarpeeksi aikaa kaapata voimakas tunne aiheuttaa, mutta ei tarpeeksi aikaa ylityötä (tai kaataa) piirustusta. Yksinkertainen j..

Kuinka veistää vakauttavat silmät Zbrushissa

Miten tehdään Sep 11, 2025

Kun veistetään realistisen 3D-ihmisen lisääminen valmiiksi käyttövalmiiden varojen kirjastoon, muista, että kaksi silmää..

Miten maalata ilmakehän muotokuva Photoshopissa

Miten tehdään Sep 11, 2025

Maalaus muotokuva voi olla vaikea tehtävä. Vaikka olet oppinut Miten tehdä kasvot , voit helposti päätyä yks..

Kuinka käyttää digitaalisia työkaluja käsin piirrettyjen ulkoasun luomiseksi

Miten tehdään Sep 11, 2025

Digitaalisesti merkitsee ja havainnollistaa paljon järkeä erityisesti kaupallisissa kuvaprojekteissa. Viime vuonna aloin työsk..

Luokat