Los elementos del diseño web retro
El estilo vintage y retro se está haciendo cada vez más popular en las obras de arte digitales de hoy en día.
El uso de temas retro y vintage en el diseño es probablemente una de las tendencias más penetrantes ya que la industria se volvió casi completamente digital.
En la publicación de hoy, veremos ejemplos de trabajos provenientes de lo maravilloso Dribbble , lo que nos ayuda a centrarnos en los fragmentos de una pieza, en lugar de en todo el diseño o la ilustración.
Desde aquí, es posible identificar qué técnicas se han utilizado y describir cómo afectan el diseño general. Se familiarizará con estas tendencias de diseño y podrá replicarlas.
Para ayudarlo, los tutoriales breves están dispersos por todo el artículo. ¡También le indicaremos varios otros tutoriales y recursos útiles para que comience con su propio trabajo retro y vintage!
1. Círculos y otras formas simples
Las formas simples se utilizan comúnmente en el diseño vintage. Los círculos son los más comunes, especialmente en la marca. Los siguientes ejemplos han sido cuidadosamente seleccionados para mostrarle cuán poderosas pueden ser las formas simples.
pag Esta encantadora ilustración hace uso de formas elípticas para producir un sol y se remata muy bien con un efecto tipográfico.
La marca de Circlebox Creative se basa en un círculo e inspirada en sellos e insignias de tinta vintage. El diseño está helado con motivos florales y un estilo tipográfico simple.
Este diseño es un poco diferente porque depende en gran medida de formas simples para hacerlo explotar. El encabezado de la barra azul usa una larga fila de pequeños círculos para crear un borde inferior interesante.
Este diseño vintage, al igual que la marca de Circlebox Creative, está inspirado en sellos e insignias de tinta vintage. La identidad parece que ha sido estampada en una hoja de papel, a diferencia de las líneas suaves y limpias de Circlebox.
Aquí hay otra pieza de marca basada en un círculo. La textura y el azul entre todos los grises realmente dan vida a este diseño.
Una pieza increíblemente simple de trabajo que consta de dos círculos, una textura, algunos estilos de fusión y tipografía limpia. Esta pieza realmente demuestra el poder de las formas simples.
Mini-Tutoriales
Cómo aplicar un estampado de flores de Damasco a un círculo con Adobe Illustrator
Aplicar un patrón a un círculo en Illustrator es algo que probablemente hará mucho si explora la tendencia retro. La técnica es similar a lo que Glace Cakes hace por su marca (se muestra arriba).
Abre Illustrator y dibuja un círculo. Mantenga presionada la tecla Mayús mientras arrastra su círculo para mantenerlo redondo. Inserta tu estampado de flores de Damasco yendo a Archivo → Colocar.
Elimine cualquier fondo y cambie el color de su patrón recién colocado. Puede seleccionar elementos individuales utilizando la herramienta Selección directa.
Seleccione su patrón usando la herramienta Selección y luego vaya a Ventana → Buscador para abrir la ventana del Buscatrazos si aún no lo ha hecho. Mantenga presionada la tecla Shift y seleccione su círculo para seleccionar ambos elementos al mismo tiempo. Haga clic en el botón "Minus Front" en la ventana de Pathfinder para eliminar el patrón floral que se encuentra fuera de su círculo. Juega con tu elección de color, ¡y listo!
Crear una línea burbujeada con Adobe Photoshop
Vamos a crear una línea tipo burbuja como la del ejemplo anterior.
Con la herramienta de recuadro rectangular, arrastre una selección y llénela de negro en una nueva capa. Seleccione la herramienta de marquesina elíptica y, mientras mantiene presionada la tecla Mayús, arrastre una selección muy pequeña y llénela de negro, de nuevo en una nueva capa.
Coloque el círculo negro en la parte inferior de su rectángulo negro. Duplique la capa y coloque el nuevo círculo al lado de su original.
Repita este paso hasta que tenga algo que se parece a la siguiente imagen. Tendrás muchas capas. Seleccione todos ellos mientras mantiene presionada la tecla Shift, y luego vaya a Layer → Merge Layers para convertirlos en uno.
Ahora vamos a agregar algunos estilos de capas simples o opciones de fusión para que nuestra forma cobre vida. Haga clic derecho en su capa y seleccione "Opciones de fusión". La ventana de Estilo de capa debería abrirse. Aplica los siguientes efectos para agregar un degradado, una sombra interna y una sombra paralela:
¡Y terminamos!
2. Esquemas de colores de dos tonos y limitados
Los esquemas de color de dos tonos son una gran novedad en el diseño vintage porque la producción de copias a todo color no era tan fácil en el pasado como lo es ahora. A continuación se muestran algunos ejemplos recientes de esquemas de color de dos tonos y limitados.
Este diseño minimalista obtiene su atractivo visual de las formas y líneas en blanco y negro, especialmente la línea discontinua horizontal y las formas recortadas de la parte inferior del círculo.
Esta marca repite algunos colores selectos en todas partes. Los colores funcionan increíblemente bien juntos. El amarillo anaranjado es el color focal que llama tu atención.
Esta encantadora pieza de diseño retro se basa únicamente en el color y la tipografía. Las sutiles líneas de un píxel ancho lo terminan.
Otro diseño en blanco y negro de dos tonos. Esta identidad se basa en una insignia y obtiene un aspecto ligeramente tridimensional a partir de la tipografía y los efectos simples.
Este ejemplo realmente muestra cuán efectivo puede ser el color. Utiliza tres colores: naranja, marrón y blanco. El contraste entre las tres muestras funciona muy bien para el diseño.
Este diseño (la identidad en sí misma, no el fondo) se basa únicamente en el color y la tipografía.
Este diseño combina naranja y un bonito azul verdoso con blanco. La combinación de colores coincide con los bordes elegantes y los simples efectos tipográficos.
Sin embargo, otro logotipo tipográfico vintage que se basa en dos colores: tipo blanco sobre rojo. Observe cómo la identidad se basa en un círculo.
Esta identidad utiliza solo tres colores, un tipo de letra elegante y un modo de fusión agradable para poner la guinda del pastel.
Recursos de color
Un montón de excelentes aplicaciones están ahí para ayudarlo a crear sus propios esquemas de color. Esta pequeña selección comparte varios de los mejores:
- ColourLovers (Aplicación Web)
Un sitio web encantador dedicado a esquemas de color. Explore temas existentes creados por la comunidad, o cree los suyos desde cero cargándolos. - Aviary Toucan (Aplicación Web)
Otra aplicación web, pero sin un respaldo de la comunidad como ColourLovers. Esta aplicación le permite crear esquemas de color desde cero o desde imágenes importadas. - Adobe Kuler (Aplicación Web)
Otra aplicación web de gestión del color, esta vez traída a nosotros por el adorado Adobe. La interfaz es impresionante y fácil de usar. Kuler alberga una comunidad, y puedes navegar por los esquemas de color mejor valorados. - Color Stream (aplicación de iPhone)
Esta aplicación de iPhone le permite crear y almacenar paletas de colores desde cero o desde una foto importada. También puede generar esquemas automáticamente a partir de fotos utilizando el esquema de colores incorporado. - Paletas (aplicación de iPhone)
Paletas es similar a Color Stream al permitirle crear y almacenar esquemas de color sobre la marcha desde cero o desde una imagen. También puede tomar colores de su sitio web favorito.
Si eres un novato, aquí hay un par de artículos que vale la pena consultar: " Elegir combinaciones de colores "Y" Teoría del color para diseñadores, parte 3: cree sus propias paletas de colores "
3. Elementos tipográficos y tendencias
La tipografía es uno de los elementos más importantes en el diseño digital retro. Hay infinitas posibilidades con el diseño de tipo, algunas de las cuales se pueden encontrar en los ejemplos a continuación.
Este fragmento de diseño de tipo está lleno de bondad de efecto de texto. El texto está terminado con una sombra paralela y un patrón de diagonales de un píxel simple pero realmente impresionante.
Aquí está mi pieza tipográfica favorita en esta muestra. Combina algunos estilos vintage excelentes con técnicas modernas. El tipo cobra vida mediante la adición de detalles sutiles, como el trazo blanco de un píxel en la línea "Le invitaron cordialmente" y las siempre importantes sombras paralelas en el tipo de fecha.
Esta tipografía retro revela técnicas sorprendentemente simples. El tipo "Diseño es" se duplica tres veces y se vuelve a colocar. El duplicado inferior se texturiza para crear un encantador estilo retro en cuestión de minutos.
Sin embargo, hay más tipografías que usan una simple sombra paralela para agregar profundidad a la tipografía elegante y decorativa.
Tipografía simple combinada con formas semitransparentes y una textura sutil. El diseño se combina muy bien.
No puede ser mucho más simple que esto: una poderosa elección de tipos de letra.
Esta tipografía tridimensional probablemente se completó en Illustrator, haciendo uso de las herramientas 3D allí. Se ha agregado ruido sutil al diseño, que funciona bien con el esquema de color limitado.
Esta gran pequeña instantánea del diseño retro producido digitalmente combina textura, ruido, formas simples, diferentes estilos de fusión y una gran combinación de colores. La tipografía, especialmente la de mayor tamaño, cobra vida gracias a las sombras pronunciadas.
Esta impresionante pieza de papelería comercial de inspiración vintage utiliza elementos dibujados a mano para su aspecto. El diseño también tiene un esquema de color limitado.
La tipografía blanca en este diseño se ha fusionado con la imagen como si estuviera allí cuando se tomó la fotografía. Funciona bien con la foto sepia.
Mini-Tutoriales
Cómo crear una tipografía dibujada a mano con Adobe, Photoshop o Illustrator
En este breve tutorial, aprenderá a producir, escanear y vectorizar rápidamente su tipo dibujado a mano con Adobe Photoshop e Illustrator.
Antes que nada, dibuja algunas letras:
Necesitas completar tu tipo bosquejado de alguna manera. Puedes hacer esto usando pintura o un marcador. Usaré tinta india negra y un pincel fino, que recomiendo mucho, principalmente porque es muy puro y audaz.
Comience a completar sus líneas esbozadas.
Deberías terminar con algo que se parece a esto.
A continuación, escanea tu imagen. Si no posee un escáner, podría simplemente fotografiar el trabajo, solo asegúrese de que sea de alta calidad. Después de escanear o fotografiar la imagen, abra un nuevo archivo de Photoshop y vaya a Archivo → Colocar; ubique la imagen y colóquela en su documento.
Vaya a Imagen → Ajustes → Brillo / Contraste. Aumente el nivel de contraste a alrededor de 50. Esto oscurecerá el negro en la imagen.
Guarde su archivo como una imagen y abra Adobe Illustrator. Cree un nuevo archivo RGB y luego vaya a Archivo → Lugar. Ubique su imagen recién guardada y colóquela en su lienzo. En la barra de menú en la parte superior del lienzo, seleccione la opción "Seguimiento en vivo". Su texto ahora es un vector de trabajo y puede ampliarse o reducirse según lo desee, para usarlo en sus documentos de Photoshop.
Cómo agregar una tipografía a una fotografía de la ciudad con Adobe Photoshop
Vamos a agregar tipografía a una fotografía usando una técnica similar a la utilizada para la fotografía de Amsterdam anterior. Para el propósito de este tutorial, usaremos esta fotografía de Barcelona .
Copie la fotografía y cree un nuevo documento de Photoshop. Pega la fotografía en el documento. Seleccione la herramienta Texto y escriba "Barcelona" en el tipo de letra de su elección. Vaya a Editar → Transformar → Rotar y gire la tipografía en un ángulo para que se alinee aproximadamente con el ángulo de los edificios.
Notarás que algunas de las letras no se superponen a los edificios. Para solucionar esto, seleccione la herramienta Pluma y extienda manualmente la parte inferior de las letras dibujando nuevas formas sobre ellas. Una vez que haya hecho esto, haga clic derecho y seleccione "Ruta de llenado". Llene la selección con negro.
A continuación, elimine las áreas superpuestas de su tipo. Una vez más, use la herramienta Pluma para crear una selección. Zoom hacia la derecha en su fotografía y trace alrededor del edificio y el árbol. Una vez que haya hecho esto, haga clic derecho y vaya a "Hacer selección". Ahora debería tener una línea punteada en movimiento como la siguiente:
Haga clic derecho en su capa de tipografía y seleccione "Rasterizar tipo". Esto lo convertirá de una capa de tipo en una capa estándar. Combina tu capa de texto con las formas personalizadas que hicimos anteriormente, seleccionándolas todas manteniendo presionada la tecla Mayús y yendo a Capa → Fusionar capas. La selección que hicimos en el último paso con la herramienta Pluma aún debería estar activa. Con la capa de tipo único ahora seleccionada, presione la tecla Eliminar. Esto debería eliminar todo el texto superpuesto.
Ahora es el momento para una edición de fotos muy simple para fusionar un poco mejor tu estilo. Seleccione la capa de fondo (que debería ser su fotografía), y vaya a Imagen → Ajustes → Desaturar para convertir su fotografía a escala de grises / blanco y negro. Ahora vaya a Imagen → Ajustes → Filtro de fotos. Seleccione la opción sepia del menú desplegable y juegue con el deslizador de nivel para establecer la intensidad del efecto. Elegí alrededor del 60%.
Haga clic derecho en su capa de tipo y seleccione "Opciones de fusión" en el menú. Aplica una superposición de color a tu tipo; Usé un marrón claro. Aquí está mi resultado:
Cómo aplicar una sombra paralela y una superposición de patrón a la tipografía con Adobe Photoshop
En este breve tutorial, realzaremos una simple pieza de tipografía con los efectos integrados de Photoshop. También crearemos nuestro propio patrón.
Primero, creemos nuestro patrón simple. Abra un nuevo documento de Photoshop de 3 a 3 píxeles. Ahora selecciona la herramienta Lápiz. Zoom en el lienzo, y con negro # 000000 coloque tres puntos diagonalmente a través de su lienzo, como se ve a continuación:
Vaya a Editar → Definir patrón para que aparezca el siguiente cuadro de campo. Llame a su patrón algo adecuado (llamé al mío "Diag Line 1"). Presiona el botón "Aceptar". Tu patrón está hecho!
Crea otro nuevo documento de Photoshop. Complete el fondo con un color claro de su elección y agregue un poco de tipografía al lienzo. Los tipos de letra que utilicé son Helvetica Neue Medium y Helvetica Neue Bold.
Vuelva a seleccionar su texto y cambie su color. Elija algo que contrasta bien con el fondo. Es importante establecer el color del texto en lugar de usar una superposición de color porque usaremos una superposición de patrón más tarde y, desafortunadamente, no puede usar ambos.
Haga clic derecho en su capa de tipo, y seleccione "Opciones de fusión" para abrir la ventana Estilo de capa. Seleccione "Superposición de patrón" y, en el cuadro desplegable de patrón, seleccione el patrón que hicimos anteriormente. Cambie el modo de fusión a "Superposición" y la opacidad al 30%. Los resultados variarán dependiendo de la elección de su color, así que siéntase libre de experimentar.
Ahora vamos a aplicar una sombra interior. Use la configuración que se ve en la siguiente captura de pantalla:
Ahora aplica una sombra muy débil pero importante. Prestar atención a pequeños detalles siempre vale la pena. Use configuraciones similares a las que se ven en la siguiente captura de pantalla:
Para finalizar la tipografía, duplicamos el texto por completo. Haga clic con el botón derecho en la capa de texto y seleccione "Duplicar capa". Seleccione la herramienta Mover, mueva el texto a otro lugar en su documento y luego vuelva a colocarlo debajo de la capa de texto original. Baja la opacidad, y listo.
4. Estilos de fusión
Los estilos de fusión (generalmente conocidos como el modo de fusión en Photoshop e Illustrator) son una excelente manera de agregar dimensión a su trabajo sin mucho esfuerzo. Le permite combinar objetos y colores juntos de diferentes maneras. Los modos de fusión a menudo se usan con diferentes niveles de opacidad; por ejemplo, al aplicar una textura fotográfica a una imagen, que discutiremos más adelante.
Parece que hay tres formas en esta marca, pero de hecho solo hay dos: una azul y otra roja. Se ha aplicado un modo de fusión a las formas para permitir que se vea el fondo con textura, mezclando los colores y creando un violeta oscuro intenso.
Esta pequeña pieza está llena de varios modos de fusión, texturas, fotografías y formas simples, lo que resulta en un trabajo poderoso.
Esta hermosa pieza de trabajo repite formas simples y utiliza diferentes modos de fusión para hacer que cada forma sea única. Los modos de fusión también se han aplicado a la tipografía.
Los dos círculos en este diseño tienen diferentes modos de fusión aplicados, uno de los cuales proyecta un tinte rojo en la imagen de abajo, el otro cambia la imagen de abajo a un rojo oscuro, y ambos permiten que la textura se vea. Se produce un rojo vívido donde las dos formas se encuentran.
Esta pieza de Open Yoga Gallery es una de mis favoritas en el escaparate. Combina un esquema de color suave y limitado con una fotografía, y luego agrega ruido, textura ligera y tipografía con estilo.
La fotografía en esta pieza podría haber sido producida superponiendo toda la foto con un color sólido y cambiando el modo de fusión de esa capa, haciendo que la imagen debajo de ella aparezca desgastada y desgastada.
Esta pieza está llena de textura. Se aplicó un modo de fusión a cada textura para permitir que la imagen de abajo se muestre.
Similar a la fotografía de Italia que vimos, esta foto fue manipulada usando una capa llena de color con un modo de fusión. El estilo tiene una capa de blobs de diferentes colores, muy probablemente con un modo de fusión Overlay aplicado a ellos y una transparencia reducida.
El círculo en el medio de esta pieza tiene un modo de fusión aplicado, permitiendo que se vea el fondo.
Mini-Tutoriales
Cómo mezclar colores con fotografías con Adobe Photoshop
En este mini-tutorial, aplicaremos color a una fotografía en blanco y negro utilizando la herramienta Pincel y los modos de fusión. Estaré usando esta fotografía de spiderweb .
Abra un nuevo documento de Photoshop y coloque la fotografía de su elección en el lienzo. Le di al mío un borde blanco.
Seleccione un pincel suave y un color claro. Elegí un pastel amarillo. Crea una nueva capa yendo a Layer → New Layer. Pinta un gran splodge de tu color en la nueva capa, como se ve aquí:
Repita el proceso con más colores. Puede pintar estos colores en la misma capa; no es necesario crear nuevas capas.
pag Una vez que haya terminado de colorear su capa, vaya a Filtro → Desenfoque → Desenfoque gaussiano. Desenfoque la capa para unir esos colores un poco más. Cualquier cosa por encima de 100 píxeles debería estar bien, pero depende del tamaño de su lienzo: cuanto más grande sea el lienzo, más píxeles necesitará para desenfocarlo.
Ahora podemos cambiar el modo de fusión de la capa. Desde el menú desplegable del modo de fusión en la paleta de capas, seleccione "Superposición".
Baje la opacidad de su capa de color a alrededor del 50%. Deberías terminar con algo como esto:
La experimentación es clave; cada modo de fusión cambia el producto final, lo que significa que nunca podrá reproducir un resultado. El siguiente ejemplo usa la pantalla del modo de fusión, que lava la fotografía y la hace parecer retro. Experimentar con efectos como este es típicamente cómo se reproducen los efectos de la cámara retro Lomo y Holga.
Recursos
A continuación hay una pequeña selección de tutoriales de pósters vintage que hacen uso de los estilos de fusión:
- Crear un póster retro de grunge en Photoshop
- Crea un increíble póster de película B en Photoshop
- Diseño de carteles de Gig: The New Sex en Photoshop
- Cómo crear un cartel de juego de computadora retro de ciencia ficción en Photoshop
- Diseña un póster futurista retro colorido en Photoshop
5. Textura y ruido
La textura y el ruido le agregan un interés visual a su trabajo. En algunos casos, un diseño simplemente no se ve bien sin ellos. En otros casos, la textura y el ruido pueden ser demasiado. A continuación se muestran algunos ejemplos de diseños retro que funcionan bien con textura.
En esta pieza se usa una textura fotografiada estilo lienzo, lo que le da al diseño general un aspecto adorable y desgastado.
Esta textura limpia finalmente produce un diseño limpio. El aspecto retro se logra con un pincel ligero de grunge para eliminar algunas áreas del logotipo y la tipografía.
La textura del papel se ha utilizado excesivamente en esta pieza para producir una pieza de trabajo digital desgastada y de aspecto vintage.
Al igual que en el último ejemplo, se utilizó una textura de papel para hacer que la ilustración parezca un póster antiguo. Una textura oscura también se coloca encima de las siluetas del boxeador.
Una combinación de madera, papel reciclado y texturas de manchas de café se han utilizado aquí para producir un efecto realmente impresionante. Se ha aplicado un modo de fusión a la capa en la que se encuentra el personaje, lo que permite mostrar la textura.
La textura en este diseño web es mínima y sutil, sin embargo, contribuye significativamente al interés visual del trabajo en general.
La textura se usa aquí para animar el fondo y la tipografía. La más simple de las texturas pero aún tan efectiva.
La textura se ha utilizado mínimamente para amenizar esta ilustración, darle profundidad y hacerla más atractiva a la vista.
Aquí hay una pieza que simplemente no se vería igual sin textura: el fondo, la ilustración y la tipografía están todos texturizados.
Esta pieza es bastante diferente de las otras en este escaparate; la textura no es una fotografía sino una imagen vectorial.
Recursos
La siguiente lista contiene enlaces a varios sitios web geniales donde puede descargar texturas, tanto premium como gratuitas, para usar en su trabajo:
- TextureVault
Un mercado premium especialmente para descargar texturas individuales. El precio varía según el tamaño de la textura. - Perdido y Tomado
Un gran blog que publica algunas de las mejores texturas. Algunas cosas realmente de alta calidad aquí. También puedes ver el texturas en una galería . - Texturas CG
Probablemente una de las galerías de texturas más grandes alrededor. Miles de imágenes están disponibles de forma gratuita. - TextureLovers
TextureLovers es básicamente una galería de texturas de toda la web. Es un gran lugar al que ir si no está seguro de dónde buscar, ya que muestra texturas de una variedad de sitios web.
6. Recorte de imagen y máscaras de capa
El recorte de imagen y las máscaras de capa son efectivos para agregar elementos adicionales a un trabajo. ¿Por qué incluir una fotografía completa cuando puede simplemente mostrar lo que necesita o adaptarlo para que coincida con el resto del trabajo? La simplicidad es clave en el diseño retro.
Esta pieza hace un gran uso de la textura y los efectos tipográficos y hábilmente usa una máscara de capa para redondear una imagen de la galaxia. Se ve excelente.
Esta pieza retro utiliza no solo fotografías retro-enmascaradas, sino también círculos, trazos, modos de fusión y un esquema de colores limitado, prácticamente todos los elementos principales tratados en este artículo.
Esta pieza es ultra minimalista pero se ve genial. Las imágenes están enmascaradas en círculos y son muy ruidosas, lo que le da un gran aspecto retro-futurista.
A continuación hay algunos tutoriales sobre cómo recortar fotos y usar máscaras de capas de Photoshop:
- Recortar fotos en tamaños de fotograma específicos en Photoshop
- Recortar imágenes en Illustrator
- Photoshop 101: Cómo usar máscaras de capa
Escrito exclusivamente para WDD por Callum Chapman, un diseñador e ilustración que cotiza como Circlebox Creative . Él también dirige The Blog de inspiración y Tienda Picmix
Comparta sus diseños e ilustraciones vintage y retro con nosotros, así como también cualquier artículo o tutorial que pueda ayudar a sus colegas lectores.