Hoy tenemos una pequeña colección de trucos de diseño completamente aleatorios pero muy útiles que debe tener en mente la próxima vez que necesite una nueva idea.
Te mostraré una forma rápida de hacer que una captura de pantalla de software sea más interesante, cómo crear impresionantes texturas grunge vectoriales y una forma súper rápida de crear un vector starburst.
Captura de pantalla de Breakout
Cuando diseñas un sitio web para una aplicación web o de escritorio, inevitablemente acabarás incorporando algunas capturas de pantalla en tu diseño, lo cual es genial porque crean gráficos atractivos que son muy fáciles de crear. Simplemente abre la aplicación en tu escritorio atractivo pero mínimo, presiona un atajo de teclado, agrega algo de texto ¡y listo!
Definitivamente, esta es una forma bellamente sencilla de crear ilustraciones para un sitio web, pero vale la pena el esfuerzo extra para reflexionar sobre cómo puede ir más lejos y hacer que el gráfico sea aún más interesante.
Una forma súper simple de hacer esto es hacer que la captura de pantalla supere los límites de la imagen de fondo. Este truco rápido y fácil hace que su diseño parezca más vivo y en capas.
Ahora, la forma larga y difícil de realizar este truco sería enmascarar parte del fondo en tu captura de pantalla, pero eso es un verdadero dolor. Es mucho más fácil simplemente crear un PNG transparente de la ventana de su aplicación que no contiene fondo, que luego puede colocar sobre cualquier cosa que desee en Photoshop.
Para hacer esto en una Mac, presione Comando + Mayús + 4 para que aparezca el punto de mira que le permitirá tomar una captura de pantalla de un área seleccionada. Luego coloca el cursor sobre la ventana de la aplicación y presiona la barra espaciadora. La mira debe transformarse en un ícono de cámara y la ventana sobre la que se está desplazando debe estar resaltada. Simplemente haga clic para crear un archivo en su escritorio que contenga esa ventana y su sombra sobre un fondo transparente. Los usuarios de Windows pueden seguir estos pasos para tomar una captura de pantalla de una ventana.
Una vez que hayas tomado la captura de pantalla de la ventana, toma un fondo para colocarlo y ábrelo en Photoshop.
Desde aquí, es fácil recortar el fondo para que la captura de pantalla se vea fuera de él. Observe que tomé la ruta opuesta en la parte inferior de la captura de pantalla, que está metida en la imagen de fondo.
En la naturaleza
Este truco es muy común en el diseño web en este momento y puede verse en cualquier número de software de escritorio y sitios de aplicaciones web. Un ejemplo brillante es el actual sitio web de Sparrow para Mac.
Easy Illustrator Starburst
Dudo en enseñarte este truco simplemente porque generalmente odio los arrebatos de estrellas en el diseño. Sin embargo, aceptaré que, de hecho, existen algunos usos legítimamente interesantes para ellos. Más importante aún, conozco un buen truco para hacerlos que me encanta presumir.
Para empezar, abre Illustrator y dibuja un círculo. A continuación, establezca el trazo del círculo en una línea discontinua. Los parámetros no importan demasiado en este punto, solo asegúrate de tener algo que se vea así:
Aquí viene la parte divertida. Tome el peso del golpe en su círculo y gírelo más allá de cualquier cosa lógica (en cientos). Finalmente, configure sus primeros valores de guiones y espacios para que sean idénticos. El resultado es un buen estallido perfecto.
La parte sorprendente es que este truco te da un control total sobre el ancho de las líneas y los huecos. Aquí hay un ejemplo ligeramente modificado que está un poco más extendido.
Vaya aún más lejos y agregue algunos valores aleatorios a algunos de los otros espacios de guiones y espacios. Esto comenzará a darte algunos resultados realmente creativos, aquí hay un pequeño patrón que me recuerda a una menta.
Expandelo
Ahora, trabajar con un artículo con trazos funky como este a largo plazo se volverá complicado, así que una vez que decida cuál es su forma y patrón general, recomiendo ir a Objeto> Aplanar transparencia. Esto te dará un bonito y expandido vector de estrellas que parece que lo construiste de la manera más difícil (el trazo del contorno da algunos resultados extraños). Solo asegúrate de eliminar el trazo del círculo original para mantener todo limpio.
Texturas Grunge Vector
Las texturas fotográficas de grunge son fáciles de conseguir, las texturas vector grunge, no tanto. Afortunadamente, es bastante fácil crear este último mediante el uso del primero.
Comencemos golpeando Flickr Creative Commons para encontrar una textura grunge decente. Aquí hay una excelente de D. Sharon Pruitt.
Ahora, intencionalmente elegí este porque contiene rasguños claros sobre un fondo oscuro, lo que parece que sería mucho más difícil trabajar con él, pero en realidad no lo es.
Abre la textura en Photoshop, pulsa Comando + I para invertir los colores y de repente tendrás un bonito fondo blanco con rayas negras. Luego use un ajuste de Niveles básicos para resaltar los blancos y bajar los negros. El resultado debe verse algo como esto:
Ahora guarde la imagen como JPG y ábrala en ilustrador. A partir de aquí, tenemos algunas formas realmente básicas que se pueden rastrear automáticamente con relativa precisión. Ejecute el comando Seguimiento automático y configure sus parámetros de forma similar a los que se muestran a continuación. Un paso crítico aquí es asegurarse de hacer clic en "ignorar blanco". comando para que Illustrator solo rastree las partes negras.
Desde aquí simplemente pulsa el botón? Expandir? Botón en la barra de menú. Esto le dará arañazos de grunge 100% escalables y fácilmente aplicables.
Podemos combinar este truco con el último y tenemos una impresionante obra de arte retro de vectores. ¡Muy genial!
Conclusión
Estos mensajes de consejos rápidos están destinados a expandir su bolsa de trucos para que tenga un grupo de ideas más amplio en su próximo proyecto de diseño. Espero que hayas aprendido una o dos cosas y que hayas sido inspirado para crear tus propias ideas únicas basadas en la información anterior.
Deje un comentario a continuación y háganos saber acerca de cualquier técnica que haya visto en la web pero no esté seguro de cómo replicar.Echaremos un vistazo y veremos si podemos ayudar en la próxima publicación de trucos de diseño.