A veces tienes un diseño perfectamente bueno, pero tu diseño necesita algo más para terminarlo. Desafortunadamente, es fácil quedarse atascado y quedar completamente vacío de ideas.
Hoy vamos a ayudarlo a resolver este problema resaltando cinco ideas de diseño aleatorias que puede incorporar en su parte posterior de los trucos de diseño. ¡Empecemos!
Líneas puntedas
Las líneas discontinuas o punteadas son una excelente manera de aportar un poco de estilo a sus diseños. Son súper fáciles de implementar y tienden a dar un diseño a algunas clases de la vieja escuela. En Illustrator, crear un trazo discontinuo es tan simple como abrir el? Trazo? paleta.
Intente variar el uso de la línea discontinua. Coloque uno verticalmente entre los elementos en una lista horizontal, intente solo un subrayado de texto o tal vez incluso cree un rectángulo completo.
También puede lograr una línea discontinua o punteada usando CSS puro a través de frontera propiedad.
Traceflow, el sitio web que se muestra a continuación, es un excelente ejemplo del uso de la técnica de líneas discontinuas. Aquí hay una foto de su área de navegación:
Cosido
El mismo sitio web muestra una versión ligeramente alterada de la técnica. Si traes las líneas discontinuas en un poco para que se desvíen del borde, el resultado es un aspecto cosido.
Bloqueos de texto fácil
Los bloqueos de texto como el de arriba son extremadamente populares en este momento. ¿Es probable que sean un mal cliché? en un futuro cercano, pero por ahora todos parecen amarlos. Se ven como una pieza de diseño realmente elegante, pero en realidad son bastante fáciles de construir. Solo tome algunas fuentes que se ven bien juntas y haga que los anchos de línea sean iguales. Asegúrese de variar el número de palabras por línea para que algunas palabras sean más grandes que otras y el énfasis se coloque justo donde lo desea.
Intente mezclar en gráficos simples pero atractivos con el tipo para mayor interés. Observe cómo en realidad usé la forma de doble línea de una de las fuentes como inspiración para una línea divisoria vertical. Este es un ejemplo de libro de texto del principio de repetición. Debes buscar oportunidades similares en tu propio trabajo.
Lo que hace que esto sea tan fácil es que las personas que crearon las fuentes han hecho todo el trabajo. El atractivo estético está en el atractivo de las formas de la letra. Esta es una de las razones principales por las que los diseñadores adoran tanto la tipografía. ¡Alguien más hace todo el trabajo, luego lo tiramos en un lienzo y obtenemos el crédito!
Por supuesto, todos los bloqueos de texto realmente buenos tienen un poco más de trabajo puesto en ellos. Echa un vistazo a este gran ejemplo de Deda.me, que muestra algunas variaciones agradables con el texto, las ilustraciones y el color. También hay un montón de efectos geniales en el trabajo aquí, así que asegúrate de visitar el sitio y echar un vistazo.
Efecto de etiqueta
El efecto de la etiqueta es tan ridículamente fácil que es tonto. Todo lo que realmente hace es tomar casi cualquier imagen y lanzarla sobre un fondo con un trazo blanco grueso y tal vez un poco de sombra. Este es un buen truco para usar cuando se busca una sensación brillante, divertida y retro. Debido a que esta técnica se presta a colores brillantes e ilustraciones interesantes, obviamente es perfecta si estás diseñando algo para niños.
En Photoshop, todo lo que tienes que hacer es subir el trazo hasta que se vea bien. Para el texto, es posible que deba ingresar y rellenar manualmente las áreas negativas de las letras, pero generalmente es un proceso súper rápido.
¡Podemos ver esta técnica en acción, por supuesto, en un sitio web de pegatinas! Echa un vistazo a la siguiente ilustración de la etiqueta Mule.
Una alternativa barata a un buen trazado de recorte
Este truco también se puede utilizar para resolver un obstáculo de diseño común. Si eres demasiado perezoso o inexperto para construir un trazado de recorte adecuado, puede ser difícil colocar una foto tomada sobre un fondo blanco en un lienzo oscuro sin que aparezcan algunos artefactos.
Aquí todo lo que tiene que hacer es hacer una selección realmente rápida y sucia, luego aplicar un trazo blanco grueso. El resultado parece bastante intencional, ¡nadie sabrá que apestas en Photoshop!
Titulares de banners
¿Quieres una forma divertida de animar un titular? Pégalo en una pancarta. Esta es otra tendencia que es bastante popular en el diseño web actual, puede encontrar esta idea en toda la web.
Como puede ver en la imagen de arriba, hay tres variaciones principales de su banner típico, que se pueden usar en conjunto en un sitio. El primero es un banner independiente, que se dobla sobre sí mismo en los extremos.
Si te estás preguntando cómo hacer el efecto 3D, no podría ser más fácil. Primero, elija un color para la parte principal o frontal de la pancarta. Entonces elige un ligeramente Tono más oscuro para las porciones laterales. Finalmente, crea un pequeño triángulo y haz que sea otro tono más oscuro. Las tres piezas se muestran separadas y luego juntas en la imagen de abajo.
Las otras dos versiones del banner son una variación de este tema. Esta vez, sin embargo, la idea es envolver el banner alrededor de algún contenido. Puede hacer que el banner se vea desde un lado como en el segundo ejemplo o envolver el objeto completo como en el tercer ejemplo.
El sitio web que WPCoder realmente usa los tres Variaciones del banner en su diseño. Aquí hay algunas capturas de pantalla de algunos de los elementos.
Se han creado con imágenes, pero se está volviendo bastante común lograr un efecto similar utilizando solo HTML5 y CSS3. Echa un vistazo a este tutorial de WebDesignTuts para ver un tutorial de este proceso.
Pon una foto en tu texto
A veces, un título simple y de color sólido se siente aburrido. Le arrojas una sombra y quizás intentas biselarla, pero eso mata el aspecto clásico y simple que buscas. ¿Cual es la solución? ¡Es fácil! Solo usa una foto como fondo para tu texto.
Crear uno de estos titulares en Photoshop es muy fácil. Todo lo que necesitas es dos capas.Primero, escriba un texto y consígalo de la forma que desee. Luego lanza una foto por encima de ella y pulsa Cmd-Option-G o ir a Capa> Crear máscara de recorte. ¡Eso es todo al respecto! Ahora puede mover las capas de texto e imagen de forma independiente y el clip permanecerá.
Usando CSS
Realmente puedes lograr esta misma técnica en CSS mediante el uso de clip de fondo: texto o imagen de máscara. Trent Walton tiene un breve pero práctico tutorial sobre cómo lograr esto.
Tenga en cuenta que si desea que todos los usuarios experimenten el efecto, tendrá que usar una imagen. Al igual que con la mayoría de las funciones CSS más recientes, el soporte del navegador es irregular para estas propiedades.
Conclusión
Espero que estos trucos de diseño rápidos y fáciles te hayan inspirado a pensar un poco más sobre cómo puedes cambiar las cosas en tu proceso de diseño típico. Es probable que los hayas visto en acción mil veces, pero tomar conciencia de ellos te ayudará a expandir tus horizontes como diseñador.
Deja un comentario y déjanos saber lo que piensas! ¿Usas regularmente alguno de estos? ¿Comenzarás ahora?