Creeu il·lustracions senzilles per al web

Autora: Randy Alexander
Data De La Creació: 3 Abril 2021
Data D’Actualització: 20 Juny 2024
Anonim
Creeu il·lustracions senzilles per al web - Creatiu
Creeu il·lustracions senzilles per al web - Creatiu

Content

Em vaig asseure, vaig tocar música, vaig atenuar els llums i vaig obrir el portàtil. Tenia moltes coses a fer. En un esforç per convocar inspiració, vaig començar a dibuixar línies artístiques de doodle d’un cantó a l’altre de la pantalla, quan vaig veure com es formava un cometa. "Mmm", va començar lentament el meu cervell, "i si els connecto i afegeixo alguns planetes?"

Unes hores més tard vaig tenir la meva il·lustració més popular de Dribbble. Encara no recordo com va passar, però després d’excavar-me pel cervell, vaig descobrir el meu algorisme intern per crear una il·lustració, no només aquesta, sinó qualsevol altra que he fet. És curiós, m’esperava que fos més complex. Ah, bé ...

Estil d’il·lustració

Abans de començar a treballar en una il·lustració, m’asseguro d’entendre el seu propòsit i el context on viurà. És això a l'aplicació, al lloc web o al fons de pantalla? Hi haurà text i s’ubicarà en un entorn ocupat? Se suposa que simbolitza una acció, o només hi ha per donar una certa atmosfera?


Si se suposa que la il·lustració transmet una idea clara o simbolitza un objecte o una acció concreta, optaré per una execució senzilla on tota l'atenció se centri en la part important. Tanmateix, si opto específicament per una il·lustració de fons "silenciosa", triaré un enfocament semblant a un patró o m'asseguraré que no hi hagi elements evidents que atreguin l'atenció, per minimitzar la possibilitat que la gent la sobreinterpreti excessivament. . Per a les il·lustracions integrades a l'aplicació, intento mantenir les coses manses, per evitar que la funcionalitat descarrili l'atenció.

Regles estètiques

Al meu cervell li agrada crear totes aquestes regles estranyes. Són com desafiaments ridículs que no puc suportar: i si dibuixo un ésser humà només mitjançant cercles? Què passa si il·lustro una posta de sol amb només un color?

Regles geomètriques, progressions lògiques, simetria. Hi ha alguna cosa molt atractiva en aplicar regles matemàtiques estrictes a l’art. Se sent com una màgia d’enginyeria inversa; elimina l'element místic de l'art, de manera que és gairebé com revelar la ciència que hi ha al darrere.


Il·lustració complexa; paleta de colors senzilla

Resulta que el meu cervell és bastant mandrós a l’hora d’escollir el color, de manera que té dos tipus generals de paletes de colors que tria: una per a il·lustracions complexes; un altre de senzill.

Les il·lustracions complexes tenen un gran nivell de granularitat, amb moltes formes / objectes i molts detalls. Normalment són per patró i no tenen un punt focal clar. El meu cervell ha decidit que aquest tipus d’il·lustracions funcionen bé amb paletes de colors monocromàtiques o anàlogues. O, en termes més amplis: menys colors i menys contrast de colors.

Tot això es redueix a l’equilibri visual; si les formes són bojes, els colors haurien de ser suaus. Una excepció és en un cas en què vull posar èmfasi en un objecte determinat que d’altra manera no destacaria. Això es pot aconseguir utilitzant un color molt contrastat, mentre que tota la resta es manté monocromàtica i mansa. L’equilibri visual perfecte es troba entre la sobreestimulació (colors forts, formes complexes, molts detalls, tot el que et crida a la cara) i la subestimulació (el mal tipus de mínim, avorrit, que no passa res de nou ni d’interessant).


Paletes monocromàtiques

Una paleta de colors monocromàtica es compon de les tonalitats o tons d’un color. Els tons es produeixen quan un color es barreja progressivament amb el blanc; els tons passen quan es barreja progressivament amb el negre. Un dels problemes que sempre he tingut amb les paletes monocromàtiques és que els tons i les ombres perden progressivament la seva intensitat, a causa de la naturalesa de barrejar un color amb blanc o negre, ambdós amb un percentatge de saturació zero.

Per evitar aquest embrutiment gradual, faig servir una simple trampa: a més d’afegir blanc o negre, canvio progressivament una mica el to. Es tracta essencialment d’una subtil paleta anàloga en lloc d’una paleta monocromàtica. Per exemple, si vull crear tintes monocromàtics de color vermell, canviaria el to cap al taronja. Si vull crear tons vermells monocromàtics, canviaria la tonalitat cap al magenta a mesura que s’enfosqueix. Si vull aconseguir matisos de blau més clars, em desplaco cap al cian; per als tons foscos de blau, em desplaco en l'altra direcció, cap al porpra.

Això es tradueix en una paleta que encara se sent una mica monocromàtica, però que és molt més viva i que definitivament té un tret. Des que ho vaig descobrir, no he tornat a crear una veritable paleta monocromàtica.

Il·lustració senzilla; paleta de colors complexa

Les il·lustracions amb menor complexitat solen tenir un clar punt central i jerarquia d'objectes. Les formes solen ser més senzilles, de manera que les opcions de color poden ser més salvatges. Estic pensant en colors de qualsevol tipus amb un contrast elevat (complementaris, triàdics, tetràdics), sempre que sigui una paleta atractiva i estimulant.

Hi ha tot un univers entre el que he descrit com a il·lustracions complexes i senzilles. Però el meu cervell no està massa preocupat per tot aquest espectre; prefereixo etiquetar qualsevol il·lustració com a complexa o senzilla.

Les paletes de colors d’alt contrast no són tan senzilles com escollir els colors oposats en una roda de colors. La roda de colors és un gran punt de partida, però no és en cap cas el final del procés. Per exemple, a l’hora de triar una bona combinació de taronja i blau, em fixo en algunes coses: la lluminositat percebuda i el funcionament dels colors d’accent amb els colors predeterminats.

Lluminositat percebuda

Si ambdós colors tenen la mateixa lluminositat percebuda, al cervell li costa distingir la frontera entre ells, de manera que mirar la imatge se sent incòmode. A menys que se suposa que els colors no es toquen mai, val la pena assegurar-se que no tinguin la mateixa lluminositat percebuda.

Ah, i per si teniu curiositat per què faig servir la paraula "percebut", busqueu l’efecte Helmholtz – Kohlrausch, que demostra que es pot percebre que els colors amb la mateixa lluminositat tenen valors diferents. Com que el taronja té una luminància percebuda més alta que el blau, per exemple, és fàcil augmentar encara més la disparitat entre els dos colors mitjançant un taronja més clar i un blau més fosc.

Accent versus colors predeterminats

Si l’ús de cada color és molt diferent, ajusto els valors del color en conseqüència. Ser valent amb els colors d’accent i jugar amb seguretat amb els colors predeterminats és el meu enfocament preferit.

A l’exemple blau taronja, faria servir el blau com a color calmant per omplir àrees més grans, per a fons i elements grans, i una mica de taronja salvatge per a botons, icones i altres elements petits. En el context de la il·lustració, tindria els tons blaus com a base i, de nou, el taronja com a accent, potser per emfatitzar un detall interessant o un element important.

Comprovació de l’equilibri visual

Sigui quina sigui la il·lustració que acabi seguint les guies anteriors, assegureu-vos de fer un pas enrere i comproveu si tot té sentit junts. Hi ha tantes excepcions a les regles de la il·lustració, que seria impossible enumerar totes les combinacions que donen a llum una il·lustració sorprenent. Proveu sempre coses que us semblin interessants i, quan alguna cosa us sorprengui, assegureu-vos d’entendre-ho perquè pugueu millorar la vostra intuïció.

Aquest article va aparèixer originalment a revista net número 286; compreu-lo aquí!

Articles relacionats

  • 7 tasques i tasques de disseny web
  • 6 de les millors carteres autònomes del 2016
  • Les 6 millors eines de Photoshop per a dissenyadors web
Mirada
Adobe afegeix 5 funcions noves a la seva eina de disseny web
Descobrir

Adobe afegeix 5 funcions noves a la seva eina de disseny web

Nomé han pa at un me o de que Adobe ha millorat ignificativament la eva eina de di eny web Creative Cloud per a no programador . Però això no ha impedit que l’equip el de envolupé ...
10 principals tutorials de Houdini
Descobrir

10 principals tutorials de Houdini

Houdini é una bè tia podero a, amb eine per con truir VFX utilitzade en molte pel·lícule de Hollywood. Però la corba d’aprenentatge inicial é forta, de manera que hem com...
Guanyeu dues entrades a TYPO Berlin 2012
Descobrir

Guanyeu dues entrades a TYPO Berlin 2012

Mé de 20 del llum mé de tacat del món del di eny ocuparan el eu lloc al podi de la Ca a de le Culture del Món de la ciutat per a TYPO Berlín: una èrie de xerrade que ofer...