Póster de estilo de diseño plano: cómo aprender a diseñar iconos desde cero
Un artículo para ayudarte a entender las escuelas de arte y los estilos de diseño
Aunque la mayoría de los diseños actuales se presentan al público en un estilo de comida rápida, también hay tandas de diseños condensados En ellos, la creatividad y las ideas de los diseñadores han llevado una tendencia de diseño tras otra desde el esqueuomorfismo hasta el plano y ahora al eskeuomorfismo ligero, pero la formación de estos estilos de diseño es muy similar a la de los siglos. hace.género de arte. Este artículo realizará un análisis horizontal de varias escuelas de arte y estilos de diseño para descubrir sus similitudes. El propósito es inspirar a todos a descubrir el brillo de los clásicos e inyectarlo en el diseño. crear una nueva tendencia de diseño.
Escuelas de arte y estilos de diseño
¿Por qué las escuelas de arte y los estilos de diseño son muy similares? Primero, comparemos sus métodos de generación y operación. Aquí hay una tabla para simplificar la expresión de los dos conceptos. escuela de arte y estilo de diseño:
No es difícil comprobar que aunque están separados por varios siglos, sus métodos de producción y funcionamiento son muy similares. Aunque el diseño no puede llamarse arte puro, no se puede negar que están intrínsecamente conectados. Quizás la evolución de los estilos de diseño desde el eskeuomorfismo → plano → eskeuomorfismo ligero no tenga nada que ver con los artistas de hace siglos, pero Roberto Longi dijo: “Una obra de arte nunca existe sola; son inseparables de otras obras de arte”. ¿Quién puede decir claramente sobre este tipo de cosas?
Ya que no puedes explicarlo claramente, entonces dilo con valentía.
Leí muchos libros ("Métodos de apreciación de las escuelas de arte") y finalmente encontré las pequeñas estrellas que iluminan el diseño moderno en la larga historia del desarrollo de las escuelas de arte.
Son: Neoimpresionismo → Cubismo → Arte abstracto (ordenados en orden cronológico)
Creo que la mayoría de ustedes están familiarizados y no están familiarizados con estas tres escuelas. Partiendo de estas tres escuelas y buscando similitudes entre ellas y el diseño moderno, si el nuevo plasticismo que surgió después de esto presagiará futuras tendencias de diseño, aunque tengo poco conocimiento, también quiero analizarlo.
Neoimpresionismo y diseño plano
Hablando de neoimpresionismo, hay dos obras que hay que mencionar, "Desayuno" de Paul Signac y "Tarde de domingo en la isla" de Georges Seurat. de La Grande Jatte".
El punto decisivo de Paul Signac al crear "Breakfast" fue la fusión de la pintura dividida y el puntillismo. La pintura dividida es responsable del equilibrio compositivo, y el puntillismo es responsable de la mezcla visual. Esta es una forma de pintar muy racional. El cuadro completo es tranquilo y se puede colgar en la pared de cualquier restaurante.
△"Desayuno" de Paul Signac
"Tarde de domingo en la isla de Grande Jatte" de Georges Seurat, tuve la suerte de ver este cuadro en el Museo Nacional (Lamentablemente es no es la obra original). La forma del fondo en esta pintura es detallada, los contornos de los personajes son regulares, el diseño general utiliza principios mecánicos y la composición es estable. Rompió las limitaciones de los principios visuales de la época y dio a la imagen una sensación de visión panorámica.
△"Tarde de domingo en la isla de La Grande Jatte" de Georges Seurat
Mirando de cerca estos dos cuadros, podemos comprobar que estos dos pintores representativos del neoimpresionismo son obras maestras. , la forma del carácter es muy similar a los caracteres vectoriales planos que se hicieron populares hace unos años. Los personajes de las pinturas neoimpresionistas casi se pueden descomponer utilizando gráficos básicos. Para que todo el mundo pueda entenderlo mejor, he descompuesto la mujer que sostiene un paraguas en el extremo derecho del cuadro "La Grande Jatte" utilizando gráficos básicos y la he presentado por separado, ¿no es también muy elegante y hermosa?
¿Y si descompusiéramos toda la obra y la imagen resultante fuera muy moderna, como si una obra tan antigua hubiera regresado a nuestro ratón a través del tiempo y el espacio? Por tanto, analizar y comprender las obras del Neoimpresionismo será de gran ayuda para el diseño de gráficos de personajes actuales. Con estas referencias, los personajes de nuestros trabajos de diseño definitivamente lucirán más vívidos y naturales, con sabor literario y densidad artística.
Echemos un vistazo a los estilos de ilustración que vemos a menudo en sitios web de diseño extranjeros.
Este estilo de ilustraciones aparece cada vez más en sitios web de diseñadores como Behance y Bentou también lo ha imitado. Después de comenzar a estudiar géneros artísticos, Bentou de repente descubrió que este tipo de gráficos es similar a la pintura. El estilo neoimpresionista tiene formas muy similares de expresión de personajes. Aunque el autor probablemente no pensó en "La Grande Jatte" de nuestro maestro Seurat cuando dibujó este cuadro, si pudiera absorber algo de él, definitivamente enriquecería el cuadro. y más interesante.
Cubismo y estilo de objetos luminosos
Veamos la obra representativa del cubismo, “La Casa de Estaque” de Georges Braque. George simplificó hábilmente las casas y los árboles en formas geométricas y utilizó transiciones de color para distinguir grupos de árboles y casas. Esta era una nueva forma de expresión entre el plano y lo tridimensional en ese momento.
No es difícil encontrar que el cubismo que siguió al neoimpresionismo es ligeramente similar al estilo de gradiente de cuasiobjeto ligero que ahora es popular después de la tendencia plana. La diferencia es que el propósito del cubismo es. hasta completamente El ángulo representa un objeto, mientras que el objeto claro es solo un giro aproximado del objeto plano en un ángulo de 45 ° y luego agrega algunos gradientes. Aunque es superficial, también va acorde con la tendencia estética actual.
Si absorbemos algunas características del género cubista, ¿podemos hacer que las llamadas obras falsas en 3D sean menos superficiales? Mirando de cerca "House of Estaque", George utiliza colores muy ricos y generales para expresar la luz excesiva. y oscuro, no solo exceso de luz y oscuridad del mismo sistema de color, el uso exquisito del color en obras artísticas es completamente digno de ser utilizado en nuestros diseños.
Arte abstracto y puntos, líneas y superficies
Cuando se trata de arte abstracto, debemos sacrificar a nuestro maestro abstracto Kandinsky. Sus "Rose Grey" y "Red, Yellow and Blue" son pinturas que utilizan puntos, líneas y elementos superficiales al extremo. ¿No lo entiendes? No importa, Kandinsky quiere que abandonemos las conjeturas, especulaciones y pensamientos innecesarios y apreciemos plenamente la pureza y la belleza del arte en la danza de colores y líneas. Pero mirándolo desde otra dimensión, Kandinsky extrajo muy racionalmente las formas geométricas del cuadro, utilizando elementos activos flotantes para expresar el efecto de movimiento. Al mismo tiempo, la composición también era muy particular.
△"Rojo, amarillo y azul" de Kandinsky
△"Rosa gris" de Kandinsky
Las obras de Kandinsky todavía parecen estar llenas de moda, tal vez por los puntos. , líneas y superficies son los elementos eternos que componen una imagen. Controlando puntos, líneas y superficies, se pueden crear infinitas imágenes. Los carteles y diseños de carteles actuales utilizan cada vez más puntos, líneas y elementos de superficie, pero la mayoría de ellos no se utilizan como cuerpo principal, sino como elementos que llenan los espacios en blanco de la imagen. Aun así, pueden mejorar la sensación general de vivacidad. .
Habiendo hablado de esto, creo que es hora de mirar hacia las futuras tendencias de diseño.
Según la rutina, primero necesitamos el apoyo de una escuela de arte, por lo que el Neoplasticismo, que surgió después de las tres escuelas del Neoimpresionismo, el Cubismo y el Arte Abstracto, debe ser la mejor opción.
Puede que no estés familiarizado solo con el neoplasticismo, así que echemos un vistazo a la siguiente imagen:
△“La composición del amarillo, el rojo y el azul” de Mondrian
Debes haber visto la "Composición de amarillo, rojo y azul" de Mondrian (en realidad también hay negro, blanco y gris), que se ha convertido en un logotipo clásico y se ha utilizado en los círculos de la moda y la arquitectura durante muchos años. , y también se ha utilizado en el mundo UI hace muchos años, pero finalmente desapareció junto con algunas marcas. La siguiente imagen es la interfaz diseñada por Microsoft para sistemas de teléfonos móviles. La combinación de colores y el diseño se basan básicamente en la "Composición de amarillo, rojo y azul". Los usuarios pueden mover los módulos para diseñarlos según sea necesario.
Aunque Microsoft abandonó este diseño, creo que este concepto de diseño de estilo Mondrian no debe abandonarse en el diseño móvil, después de eso, se ha completado un ciclo de esqueuomorfismo, planitud y esqueuomorfismo ligero. ¡Por fin llegó el momento de que el tío Meng regresara al campo de batalla!
No subestimes esta pintura "La composición de amarillo, rojo y azul". De hecho, muchos amigos pensarán eso cuando vean esto. pintura Para eliminar la mentalidad arrogante de que "qué diablos, incluso los trabajadores y la dirección pueden pintar", echemos un vistazo más de cerca a este trabajo.
Cuando estamos lo suficientemente cerca, podemos ver que cada bloque de color en esta pintura resalta la imagen y está en un plano diferente, y las líneas negras que dividen estos bloques de color parecen tan duras como un acero. barra, y el bloque de color incluso tiene un borde rugoso. Todos estos detalles son muy difíciles de copiar.
Volviendo al cuadro en sí, el tío Meng parece estar pintando una cuadrícula, pero en realidad lo que está pintando es oposición y equilibrio. Realiza los tres colores primarios (rojo, amarillo y azul) y los tres. Los no colores (negro, blanco y gris) forman una oposición. Rompe la imagen al extremo. Podemos ver que ninguna parte de esta pintura es completamente simétrica, pero permite al espectador sentir una sensación de paz espiritual y equilibrio en el universo al mismo tiempo. Estas características son completamente diferentes a los diseños anodinos que tenemos hoy.
Finalmente
El Neoplasticismo apareció después del Neoimpresionismo, el Cubismo y el Arte Abstracto. Absorbió las características de las escuelas anteriores y siguió evolucionando dando lugar a lo que tenemos ahora. El Mondrian que vimos corresponde al presente. Si queremos romper con el ciclo del esqueuomorfismo, la planitud y el esqueuomorfismo de la luz, es posible que podamos utilizar el arte de Mondrian para encontrar nuevos avances en el diseño de interfaces, carteles, gráficos dinámicos, etc. Cree un estilo completamente nuevo en el campo y deje que "La composición de amarillo, rojo y azul" lidere la tendencia del círculo del diseño nuevamente. Y usted, que lee este artículo, puede ser el Mondrian del mundo del diseño. Cómo aprender a diseñar íconos desde cero
Si desea aprender a crear íconos, necesita aprender los métodos y herramientas del diseño de íconos. Los íconos pequeños en realidad deben contener muchos conocimientos de diseño. Un conjunto de íconos debe cumplir con las características y el estilo del producto, y debe ser identificable. El conjunto debe estar unificado o ligeramente diferente, para que las personas puedan ver los íconos y comprender las funciones después de hacer clic en ellos.
Fuente de la imagen: Trabajos de estudiantes del Adobe Design Institute
1. Herramientas para diseñar íconos
Hay muchas herramientas para diseñar íconos. Elegimos PS y AI. Aprenda a utilizar estas dos herramientas de diseño.
1.
PhotoShop
Si es la primera vez que entramos en contacto con PS, entonces debemos comprender el uso básico de PS, a continuación. Comenzaremos con la interfaz de PS y las configuraciones básicas. Cree nuevos archivos, vea operaciones, guarde, exporte y mueva herramientas para ayudarlo a comprender PS paso a paso. Que todos se familiaricen con las funciones comunes y el uso específico de las herramientas PS en diseño gráfico y puedan utilizar PS para el procesamiento básico de imágenes.
Abra la herramienta PS y comprenda brevemente los componentes de la interfaz y la función de la herramienta. Luego, aprenda sobre las funciones comunes y los usos específicos de PS, como relaciones y aplicaciones de capas, relleno de color, recorte de varita mágica, selección y copia, funda de bloqueo y difuminado, herramienta de eliminación de manchas, herramienta de reparación, efecto de licuefacción_⑹嫡jian⑽淖(caracteres y párrafos), recorte de forma, deformación.
Después de comprender las funciones básicas de PS, debe comprender mejor las relaciones de capas, recortes, herramientas de lápiz, herramientas de borrador, herramientas de cuentagotas, herramientas de pincel y otras herramientas, máscaras y filtros comunes, y familiarizarse con las funciones de capa. estilos, con capacidad de aplicación de maquetación y diseño de síntesis de carteles. Niveles, contraste, curva, saturación de tono, equilibrio de tono, casos de fusión de color, máscaras de recorte, modos de fusión, estilo de capa 1, estilo de capa 2, efectos de filtro.
2.
IA
La mejor manera de utilizar las herramientas de IA no es dar descripciones de texto largas e introducir cada función, sino encontrar ejemplos de uso específicos para operar y aprender las funciones del software a partir de las operaciones de ejemplos. Hablaremos brevemente sobre cómo usar la IA a través de los siguientes ejemplos y comprenderemos las operaciones básicas de la IA, copia de IA, rotación, conversión de vectores, segmentación de IA, máscara de recorte, suavizado, expansión, texto de ruta de IA, efectos, generador de formas, IA. degradado, personajes tridimensionales, IA bidireccional continua, cuatro direcciones continua, etc. De esta manera, podemos utilizar hábilmente herramientas de PS e IA para procesar materiales y completar el diseño de varios efectos especiales, como efectos 3D y efectos de mezcla, según los requisitos.
2.
Video tutorial sobre cómo crear íconos
Ahora que dominas las herramientas de diseño, simplemente compartamos algunos estilos diferentes de íconos para echar un vistazo. en estos estilos ¿Cómo hacer íconos?
1. Íconos de silueta
La mayoría de los íconos de silueta son de un solo color, pero, por supuesto, también hay íconos de dos colores. Los íconos de silueta son concisos y elegantes, destilan en gran medida el significado del ícono y pueden expresar la función representada por el ícono a través de las líneas más simples. El icono de silueta aparentemente simple en realidad pone a prueba el alto refinamiento de los requisitos del producto por parte del diseñador y resalta el pensamiento lógico de racionalidad y sensibilidad en la comunicación funcional.
2. Iconos planos
El estilo de diseño plano se puede ver a menudo en el diseño de aplicaciones, y los iconos no son una excepción.
Por lo tanto, aprender el estilo de diseño plano es muy versátil y se encuentra a menudo en el trabajo de diseño diario. El estilo plano se hizo popular desde el iPhone. Su característica es que los límites de todos los elementos son limpios y ordenados, no hay efectos especiales, no hay demasiados efectos decorativos, los elementos de la composición son simples y la información se puede transmitir. intuitivamente.
3. Copiar íconos
Se dice que la mejor manera de aprender a diseñar íconos es copiarlos primero, así que elijamos íconos de lana, íconos de bolas de lana e íconos de jugadores para tener uno. Mira. ¿Cómo están diseñados los iconos?
El ícono de lana y el ícono de la bola de lana son dos formas de expresión del ícono. El ícono de lana reflejará los puntos y los hilos del tejido de lana en el diseño, dándole una sensación cálida y acogedora. Si la textura de la lana se utiliza correctamente, el diseño quedará brillante, y lo mismo ocurre con el ícono del ovillo de lana. Aunque este tipo de ícono es menos práctico, comprenderlo aumentará su base de conocimientos de diseño.
4. Iconos esqueuomórficos
Aunque la mayoría de las aplicaciones ahora se desarrollan en un estilo plano, la popularidad es un círculo y el estilo esqueuomórfico se está volviendo popular nuevamente. Creo que todos los diseñadores de UI pueden sentir cuán feroz está ahora el "nuevo estilo esqueuomórfico". Entonces, mantengamos esta tendencia estudiando el ícono del micrófono esqueuomórfico, el ícono del baloncesto esqueuomórfico, el ícono del paraguas esqueuomórfico, el ícono de la gota de agua y el ícono del donut esqueuomórfico.
3. Sitios web de iconos
El resumen del proceso de aprendizaje requiere muchos materiales de copia o fuentes de inspiración.
1. Biblioteca de iconos vectoriales de Alibaba
: una biblioteca de iconos vectoriales doméstica con funciones muy potentes y un rico contenido de iconos, que proporciona descarga de iconos vectoriales, almacenamiento en línea, conversión de formato y otras funciones.
Fuente de la imagen: Biblioteca de iconos vectoriales de Alibaba
2. IconStore:
Es un sitio que proporciona materiales de paquetes de iconos gratuitos de primera clase y reúne muchos de los mejores. -material de icono de calidad.
Fuente de la imagen: IconStore
3. Flaticon:
Diseños de iconos enriquecidos.
Fuente de la imagen: Flaction
4. MaterialDesignIcons:
Contiene iconos de uso común, como para reproducción multimedia, comunicación, edición de contenido, conexión, etc.
Fuente de la imagen: MaterialDesignIcon
5. LogoMaker
Fuente de la imagen: LogoMaker
Además de los sitios web de diseño de iconos anteriores, excelentes iconos. diseñar sitios web también
icons8, iOS11IconPack, IconsMind, IconStore, iconfinder, Icons|FontAwesome, Logo Lab: pruebe su logotipo, Logo Intelligence Bureau: los medios autorizados para noticias globales sobre LOGO y tendencias de diseño de marca (LOGONEWS), Iconos simples
etc.
Fuente de la imagen: Trabajos de estudiantes del Adobe Design Institute
Para diseñar íconos, la forma más rápida de inspirarse es dibujarlos a mano. El primer borrador de todos los íconos puede provenir de. dibujos y luego ser producido por computadora pulir repetidamente el ícono final que se ajuste a las características del producto. En realidad, es muy difícil crear iconos perfectos, lo que requiere no sólo experiencia en diseño sino también altas capacidades de procesamiento de gráficos, imaginación y pensamiento lógico.
Los íconos son una parte importante de la interacción persona-computadora. Son altamente visuales y figurativos. Es decir, los diseñadores de íconos utilizan íconos diseñados para extraer y expresar funciones de productos, significados de acciones e implementaciones. Por lo tanto,
lleva la tarea de entregar información interactiva a los usuarios, instándolos a comprender e implementar correctamente las operaciones correctas.
Así que hay grandes tareas detrás de los íconos pequeños. Espero que el contenido de aprendizaje de íconos anterior pueda ayudarlo a comprender el diseño de íconos de nivel básico, y también espero que pueda diseñar íconos excelentes en su trabajo futuro.
¿Conoce estos 6 estilos comunes de carteles ilustrativos?
Se puede decir que 2020 es el mundo de las ilustraciones
"Hot Dry Noodles, Long Time No See", que ha conmovido a innumerables personas
en el festival reciente. carteles de marca
Puedes ver ilustraciones en todas partes
¿Sabes cuáles son los estilos comunes de ilustraciones?
La pequeña A aprobará este artículo
¡Echemos un vistazo a los estilos comunes de los carteles ilustrativos!
Las ilustraciones de estilo plano se componen principalmente de bloques de colores, con formas geométricas y contornos suaves. La información es más intuitiva y permite a las personas saber cuál es. La interfaz es de un vistazo el mensaje transmitido.
La interfaz plana también puede realizar mejor la transformación de imágenes y las páginas web se cargan más rápido. Por lo tanto, las ilustraciones de estilo plano se utilizan ampliamente en diversos campos.
El estilo de dibujo lineal es una extensión del estilo plano.
Agregue contornos y trazos a elementos planos y agregue trazos a los contornos de las ilustraciones lineales. En comparación con los estilos planos, son más tridimensionales y lindos. A menudo se usan en carteles y en la página de inicio. , logotipo, etc
Las ilustraciones de estilo textura también se llaman estilo ruido granulado, que es otra rama del estilo plano. La textura granulada se superpone a la página para darle una textura mate, un poco como la pintura con arena, pero más delicada. que pintar con arena.
La forma principal de expresión es el uso de una gran cantidad de bloques de color. Los elementos son simples y limpios. La textura a menudo se superpone a las luces y sombras de los elementos. los detalles de la imagen. La transición de la imagen es natural, tridimensional y vívida. El estilo de la pintura es relajado e informal.
Ukiyo, en lenguaje budista, se refiere a "el mundo humano próspero y vacío". Ukiyo-e expresa los altibajos del mundo humano en forma de pintura.
El estilo de pintura Ukiyo-e se basa en grabados tradicionales, enfatizando la pintura plana de líneas y bloques de color, con colores vivos, y utiliza pájaros, peces y olas del océano como principales formas de expresión.
Las ilustraciones MBE son un estilo creado por un diseñador de Dribbble. Utilizan líneas negras gruesas para representar elementos, eliminando elementos innecesarios de la imagen. Los bloques de color son claramente diferenciados, redondeados y lindos. Junto con elementos pequeños, se utiliza a menudo en páginas de guía, páginas de inicio, logotipos, etc.
La ilustración en acuarela es un método de pintura popular en los últimos años. Las líneas simples y los colores suaves son tranquilos y naturales. Las ilustraciones en acuarela son particularmente creativas y pueden expresar tanto realismo como abstracción. y otros estilos diversos.
Las ilustraciones son uno de los elementos de diseño más comunes en nuestras vidas
En los últimos años, poco a poco se han ido convirtiendo en la corriente principal del diseño de carteles.
Diferentes estilos de ilustración Los estilos aportan las diferentes experiencias visuales de las personas
¿Cuál prefieres?