Como deseñar unha icona en Vectornator

Queres gañar cartos ao lado vendendo os teus paquetes de iconas? Ou queres converterte nun deseñador de iconas de pleno dereito?

Non chegarás lonxe sen coñecer o básico.

Fonte da imaxe: Unsplash

Antes comezas a traballar con iconas, cómpre entender que é a iconografía. De onde vén? Onde vai? E por que é importante?

Trataremos todos estes puntos neste artigo. E despois cubriremos todos os tipos de iconas que podes escoller. Non importa cal sexa o teu estilo de deseño gráfico, haberá unha icona para ti. Despois, coñeceremos os principios dun bo deseño de iconas.

E, finalmente, proporcionarémosche unha guía paso a paso que che axudará a transformar a túa visión de iconas nunha realidade. É moito que cubrir, así que imos mergullarse!

Que é unha icona?

Considera a forma en que unha icona de "lixo" indica onde van todos os teus ficheiros eliminados. Esta icona significará basicamente o mesmo en calquera lingua, cultura e para todas as idades e xéneros.

Entón, se pensas niso, unha icona é a lingua máis universal do mundo.

Historia da icona

Para todas as nosas cabezas latinas, a palabra "icona" provén da palabra latina "eikṓn", que significa "semellanza" ou "imaxe". A forma moderna desabe, todas as iconas son vectores!

Capas

O noso consello principal é crear unha nova capa para os novos elementos gráficos que introduzas na túa peza. Estás engadindo unha grella? Fai unha nova capa. Estás engadindo as liñas vectoriais? Correcto. Fai unha nova capa. Tempo de colorear? Adiviñaches.

Sobre todo cando estás trazando o teu bosquexo, axuda a reducir a transparencia da capa vectorial para que sexa máis fácil ver o teu traballo subxacente.

Grid

Algúns artistas poden consideralas sobrevaloradas, pero as grellas son útiles nalgunhas situacións.

Se estás a crear un conxunto de iconas, unha grella axudarache a manter a coherencia.

Outro escenario que é útil é cando estás creando iconas para plataformas (iOS ou Android) que xa teñen unha grella existente. As iconas do sistema de materiais, por exemplo, usan unha grade de iconas de 24 dp.

Aquí está o tipo de grade que estamos suxerindo. O xeito de crealo é doado. Usa a ferramenta de creación de formas para crear dous cadrados: un é a altura e o ancho máximos da grade e outro establece as túas marxes. Teña en conta que a súa icona non precisa tocar os catro lados da marxe. Despois debuxa as liñas de simetría.

Para facelo aínda máis sinxelo, podes descargar aquí o noso práctico modelo de cuadrícula.

Ferramenta de forma

Do mesmo xeito que o teu debuxo, a túa arte vectorial non caerá lonxe da árbore. Tamén se fará do mesmo básicoformas.

Podes crear diferentes formas facilmente usando a ferramenta de formas de Vectornator. Podes cambiar o número de lados do teu polígono usando o control deslizante que aparece unha vez seleccionada a forma. Ou pode acceder a el a través do menú Acción rápida despois de debuxar a forma.

Tamén está a cuestión de redondear as esquinas, que é a función Raio de esquina. Tamén dispoñible a través do control deslizante ou do menú de accións rápidas.

Para manter a relación de aspecto da túa forma, só tes que manter premido o lenzo cun dedo adicional cando traballes nun iPad ou premes a tecla Maiúsculas.

Ferramenta Pluma

A Ferramenta Pluma non é a ferramenta máis fácil de dominar, pero é esencial no deseño vectorial. É especialmente sorprendente debuxar liñas curvas suaves.

Para facelo, só tes que tocar o lenzo no punto onde queres comezar a curva e arrastrar o bolígrafo ou o rato ata que as dúas asas asociadas ao punto consigan o lonxitude que queres. A continuación, toca e arrastra de novo para ver como toma forma a curva.

Estas instrucións soan estrañas se nunca utilizaches a ferramenta Pluma antes. Pero unha vez que o probes, saberás o que queremos dicir. E se aínda non viches o vídeo da parte superior deste artigo, asegúrate de facelo. Todos estes pasos explícanse mellor visualmente.

Paso 5: Exportar SVG

Por suposto, o paso final é exportar a túa obra de arte.

Podes preguntarche que tamaño debería ter a túa icona.Iso é realmente menos importante. Un vector é de alta calidade sen importar o tamaño. Unha das principais regras que hai que cumprir á hora de crear iconas é que deben encaixar nun cadrado.

Sentes máis cómodo traballando cun tamaño moi específico? Utiliza calquera destes tamaños predeterminados: 16x16, 24x24, 32x32, 48x48, 64x64, 96x96, 128x128, 256x256, 512x512. Pero asegúrate de comprobar sempre as directrices ou os requisitos do teu proxecto en particular, especialmente se estás a deseñar iconas de aplicacións para iOS ou Android.

As iconas son ficheiros SVG, que é un formato compatible con calquera ferramenta de deseño vectorial como Vectornator.

Vaia a Ficheiro, Exportar e seleccione SVG. E iso é todo! Agora tes unha nova icona orixinal.

Esperamos que este tutorial vos axude! Por simple que parezan, as iconas non son tan fáciles de deseñar. Pero con todas as nosas directrices, principios, consellos e trucos, estás un montón de pasos máis preto de facelo profesionalmente.

Comparte os teus deseños connosco e mostrarémoste nas nosas canles de redes sociais. Estamos ansiosos por ler o que pensas deste artigo na sección de comentarios a continuación.

É alucinante a cantidade de información que conteñen as iconas. É aínda máis incrible o rápido que o entregan. É por iso que as iconas foron usadas durante séculos para comunicarse. Cales son as primeiras iconas históricas que se me ocorren? Xeroglíficos do antigo Exipto! E non son só eles, tamén son pinturas rupestres ou runas viquingas. Todas son iconas.

Pero avanzando cara aos nosos milenios, as iconas fixéronse cada vez máis destacadas a medida que comezabamos a usar e necesitabamos comunicarnos cos dispositivos. Se nos centramos nun historial máis recente das iconas, queda claro o moito que definiron e influíron no desenvolvemento do concepto de experiencia de usuario.

Se queres consultar un historial detallado de iconas dende o primeiro cartafol. icona aos esqueuomórficos que vemos hoxe, consulta este incrible sitio web.

Fonte da imaxe: FusionGroup

Por que son importantes as iconas?

A medida que o mundo está cada vez máis ocupado e tolo, as iconas son unha parte moi necesaria das nosas vidas que axudan a transmitir mensaxes de forma sinxela, elegante e rápida.

Se necesitas atopar a función correcta dunha aplicación, ou cando buscas o baño nun aeroporto estranxeiro, as iconas aforran moito tempo. E non só!

Todos os sinais de tráfico son iconas. Imaxina estar en Xapón e non saber se podes cruzar a rúa nun momento determinado. As iconas son literais salvavidas en situacións nas que todos o necesitamoscomunicarse no mesmo idioma sen falar realmente.

Se es un deseñador de interfaces de usuario, usar as iconas correctas asegurarase de que a funcionalidade da túa aplicación se manteña coherente en todo o mundo.

As iconas unen o mundo. .

Bastante poderoso, non? Agora que sabemos o importantes que son estes pequenos símbolos, imos a deseñalos. Aínda que se crearon e seguirán creándose moitas iconas, sempre haberá unha demanda de máis. Máis temas, cores diferentes, estilos diferentes, marcas diferentes.

Entón, imos aprender como alimentar a besta creando o teu propio.

Principios de deseño de iconas

O proceso de creación é o máis emocionante e imos chegar. Pero primeiro, necesitamos cubrir algúns principios básicos que adoitan seguir os deseñadores de iconas para crear unha icona memorable.

Perfección de píxeles

Non é suficiente con deseñar un ollo- atrapando iconas. Debes facer que as túas iconas sexan escalables, sensibles e adecuadas para dispositivos reais. Coloca as túas iconas nunha cuadrícula de píxeles para asegurarte de que non haxa borrosidade.

Utiliza un ancho de trazo que sexa un número par (como dous ou catro píxeles) e manténo coherente en todo o paquete de iconas ou iconas.

Se estás cambiando a escala da túa icona para varias aplicacións, é posible que teñas que cambiar lixeiramente o deseño para cada tamaño para que non te quede medio píxeles que poidan facer que o teu deseño resulte borroso.Isto axudarache a manter a perfección en píxeles.

Fonte da imaxe: Blog de Icons8

Formas xeométricas

Utiliza formas xeométricas tantas veces como ti pode deseñar a súa icona. Dará ás túas iconas unha forma máis poderosa, atractiva e orgánica. Ademais, aumentará a lexibilidade.

Ángulos

A menos que se trate dun ángulo recto, na maioría dos casos, intenta manter os ángulos de 45 graos. O resultado será nítido e a diagonal perfecta é un patrón facilmente recoñecido.

Recunchos

Un raio de 2 píxeles é moi común no deseño de iconas. É o suficientemente grande como para definir claramente as túas esquinas redondeadas, pero non suaviza tanto as esquinas como para que o teu deseño adquira unha estética totalmente nova. Pero todo depende da personalidade que queiras dar ao teu deseño.

Un trazo máis fino de só un píxel parecerá máis puntiagudo, mentres que tres píxeles forman unha forma moi redondeada, mentres que un Raio de esquina de 0dp dáche iconas moi nítidas. .

Fonte da imaxe: Smashing Magazine

Keep it Simple

A túa icona debe transmitir a súa mensaxe dunha simple vista. Ese é o seu propósito. Non pode ser demasiado abstracto, nin demasiado complexo, porque se non, perderá o seu significado.

Isto tamén se aplica á súa composición: intente non entrar en demasiados detalles. Un deseño de iconas eficaz debería poder lerse en tamaños pequenos ou grandes.

Elimine as súas iconas todos os detalles innecesarios que non axuden a comunicar o seu concepto.En vez diso, faino pesado e ruidoso.

Espazo en branco

Na mesma liña, fai uso do espazo en branco para que o teu deseño teña máis espazo para respirar. Iso axudará á túa icona a transmitir o seu significado máis rápido.

Perspectiva

É difícil ler a perspectiva en algo tan pequeno como unha icona. Tenta sempre ver os obxectos do teu deseño directamente.

Manter as iconas consistentes

Os paquetes de iconas deben parecer coherentes, polo que debes comprobar que o peso do trazo , as esquinas do trazo, a paleta de cores, o nivel de detalles complexos, o espazo e os elementos de estilo seguen sendo os mesmos en todo o conxunto de iconas.

Entón, se usas un trazo de 2 píxeles para a túa primeira icona, debes manter usándoo en todo momento.

Non obstante, non leas entre liñas. Non é necesario que as súas iconas teñan o mesmo ancho ou alto. En cambio, deben escalarse individualmente para garantir un peso visual uniforme.

O peso visual é a noción de que certos elementos comúns poden parecer máis pesados ​​que outros. Como un elemento escuro séntese máis pesado que un claro. Non é unha ciencia exacta, e ten moito que ver coa percepción individual.

Polo tanto, non hai instrumentos para medir estas forzas. Confía nos teus ollos e na túa intuición cando aliñas as túas iconas nunha liña.

Fonte: Designoxy

Personalidade

Tes que dar o teu icona dunha personalidade. Hai moitos conxuntos de iconas profesionais diferentesaí fóra, e tes que destacar como artista. Podes facelo co teu propio estilo de debuxo ou cunha paleta de cores única.

Do mesmo xeito, mantéñase lonxe de metáforas obsoletas, como representar películas cunha cámara de bobina da antiga escola. A excepción é, por suposto, cando iso é o que require o proxecto. Mantente moderno e non te limites a repetir o que outros fixeron sen pensar.

Agora que cubrimos todos os principios, imos mergullar nos cinco pasos necesarios no deseño de iconas.

Fonte: Designoxy

Paso 1: Investigación

A base de calquera proxecto creativo, non é? Debes descubrir que icona necesitas deseñar para representar unha idea determinada.

Está pensado para unha aplicación para nenos, unha universidade ou unha empresa? O teu deseño ten que transmitilo.

‍Se precisas crear unha icona que represente o propio obxecto, é bastante sinxelo. Pero que pasa se necesitas crear unha icona abstracta que represente a "rutina". Aquí é onde tes que poñer o teu límite de pensamento e facer unha chuvia de ideas sobre os posibles símbolos.podes usar. Anota todas as asociacións que se te ocurran para representar a esencia ou o significado da túa icona.

Utiliza un dicionario, un tesauro, asociacións de palabras ou busca en Google para non só comprender mellor o que necesitas. para representar, pero tamén para inspirarse. Máis difícil do que parece, pero cómpre simplificar a idea dun concepto abstracto en obxectos comúns que transmitan o significado nun instante.

Falando de inspiración, non te desanimes se non atopas unha forma de representar. o concepto da túa icona desde o primeiro momento. Hai moitos deseños de iconas que poden proporcionarche o estímulo visual tan necesario.

Unha das plataformas máis grandes é o Buscador de iconas, e o fantástico desta plataforma é que che permite buscar iconas en de varias maneiras.

Paso 2: define o teu estilo

Deseñar iconas é moi divertido! Faise aínda máis agradable polo feito de que hai tantos estilos para escoller.

• As iconas con esquemas créanse só a partir de esquemas. Este é o estilo máis sinxelo para os principiantes, polo que recomendámosllo a todos os deseñadores de iconas incipientes.

• Iconas debuxadas a man son unha forma de iconas delineadas, pero parecen debuxadas a man.

• Iconas completas incorporan cores , sombreado, degradados e todas esas cousas divertidas. Pero hai moi específicossubcategorías dependendo de como elixas encher a túa icona.

• As iconas de glifos énchense cunha cor sólida.

• As iconas planas , como o nome indica, respectan os principios de deseño plano no sentido de que teñen sombreamentos, sombras ou degradados mínimos ou nulos.

• As iconas esqueomorfas (tamén chamadas iconas 3D) están deseñadas para imitar as súas contrapartes da vida real.

Considérase un minimalista, un deseñador de planos ou ama o deseño esqueuomórfico? Non importa a túa preferencia, hai un estilo de iconas co teu nome.

Pero non podes considerar só o teu propio estilo persoal cando deseñas iconas. A súa decisión depende dos requisitos xerais para o tipo de interface na que se mostrarán as súas iconas (por exemplo, Apple iOS ou Material), así como da elección estilística do deseño particular da IU para o que está a deseñar. Decisións, decisións.

Paso 3: Esbozo

Todos os deseños, sinxelos ou complexos, comezan polas formas máis sinxelas.

É importante comezar. manteña unha boa reixa e deseño mentres traballa nas iconas. Descarga o ficheiro da cuadrícula de iconas para comezar facilmente.

Ao debuxar, entende que formas principais necesitas usar para crear o contido das túas iconas. Para comprender estas formas básicas, pode usar unha imaxe de referencia ou simplemente comezar a debuxar acompoñentes principais da túa icona en trazos amplos.

Entón, se estamos debuxando unha icona de xeado, por exemplo, sabemos que imos usar un triángulo para o cono e óvalos para as cucharadas e as gotas.

Podes optar por facer un bosquexo no teu propio caderno, pero Procreate é unha incrible ferramenta de ilustración baseada en píxeles que che permite debuxar dixitalmente. A partir de aí, podes importar o ficheiro directamente ao teu software de deseño vectorial, como Vectornator, onde dás vida á túa icona.

Neste momento, debes escoller un esquema de cores que represente o carácter da túa icona ou o tema da túa serie de iconas. Temos un artigo completo que explica como crear unha paleta de cores única que defina o teu estilo como artista. Pero aquí tes os conceptos básicos:

• Asegúrate de que a túa cor se mantén consistente en todo o teu paquete de iconas.
• Comproba se todas as cores son visibles tanto nun fondo claro como nun fondo escuro.
• Comproba se as túas cores contrastan entre si. Podes verificalo convertendo a túa icona en escala de grises. Se as cores contrastan en escala de grises, contrastarán en calquera outro ambiente.
• A teoría da cor é o teu amigo. Escolle tonalidades cálidas e frías para contar unha historia.
• Usa cores para definir unha xerarquía visual escollendo só unha cor de foco.

Paso 4: Vectoriza

Despois de rematar o teu bosquexo, é hora de vectorizar a túa icona. No caso de que non o fixeches