Los puristas dicen que nunca se debe alterar la tipografía. Las letras deben aparecer según lo previsto por el diseñador de tipos, o debe seleccionar una fuente completamente diferente. Si bien esto es cierto en su mayoría, la excepción se encuentra en la tendencia de texto segmentado.
El efecto ingenioso hace que los elementos de tipo parezcan haber sido cortados con una herramienta de precisión y pueden agregar interés visual a logotipos, titulares y bloques de texto simples. Los efectos de texto cortado pueden variar desde súper sutiles (como una pequeña parte de una letra que falta) hasta partes importantes de las palabras que faltan por completo.
Lo que hay que tener en cuenta cuando se usa texto cortado es que las palabras siempre deben estar legible - ¿Qué punto hay de otra manera? - y debe prestar mucha atención para que las combinaciones de letras no intencionadas o las palabras no aparezcan debido a los cortes. A continuación, le mostramos cómo hacer que funcione para usted con algunos ejemplos de diseños que lo hacen bien.
?¿Tradicional? Rebanada
El texto cortado incluye una apariencia casi en capas con un elemento de texto, como una palabra o un pequeño grupo de palabras, que se corta y se superpone en dos planos. Este efecto crea profundidad y puede hacer que un conjunto simple de personajes sea visualmente interesante.
Resoluut utiliza este efecto en combinación con un símbolo comercial para atraer a los usuarios al centro del diseño. El texto cortado refleja el mensaje a continuación que la compañía se centra en "diseño digital con actitud". porque el texto cortado no transmite una cierta vibra más afilada que las letras directas.
Esta técnica funciona mejor cuando los conjuntos de caracteres son simples (piense primero en las fuentes tipográficas serif) y las palabras tienen un punto de ruptura natural donde se pueden cortar y mantener la legibilidad.
Cortar texto y fotos
El efecto de capas no se limita a una combinación de fuente y espacio. Los diseñadores también pueden usar imágenes y texto para crear un efecto de corte fresco, como el ejemplo anterior de The Shift.
Las combinaciones de cortes inclinados de una sola imagen (también en rodajas) con letras dibuja al usuario en el diseño.
Si bien algunas de las palabras son un poco más difíciles de discernir al principio, hay suficiente tiempo entre las animaciones para entender el mensaje con facilidad.
Esta tendencia funciona bien para las agencias digitales y los sitios de cartera como una forma de mostrar un aspecto moderno, así como de destacar las chuletas creativas.
Rebanada con animación
El efecto de texto cortado también se puede combinar con otros elementos de diseño de moda. Mezclar rebanar con animación puede resultar en un elemento visual agradable.
En el ejemplo anterior, cada uno de los elementos de texto segmentado es en realidad navegación. Los usuarios pueden hacer clic en cualquiera de los elementos, pero lo que es más impresionante es la acción de desplazamiento, que vuelve a juntar el texto cortado.
Para logotipos
El texto cortado puede ser una forma divertida de crear un logotipo cuando los únicos elementos con los que tiene que trabajar son el texto. Un logotipo divertido puede ser más que una marca para el reconocimiento de la marca; También puede ser un elemento altamente gráfico para múltiples usos, como el diseño de la camisa, arriba.
Cuando trabaje con texto cortado, busque una forma natural y una pendiente para el corte, de modo que sea interesante de mirar mientras se mantiene la lectura.
Preste atención a la forma en que el corte crea espacios en blanco. El diseño anterior utiliza una amplia porción de información adicional en su interior. El uso más común de rebanar es a menudo una línea delgada, pero los enfoques (como puede ver en los ejemplos de esta publicación) pueden variar considerablemente.
Crear interactividad
Permita que los usuarios recorten su propio texto con una combinación interactiva de texto y pincel, como el ejemplo anterior. Si bien el texto no se corta exactamente en sí mismo, el efecto se crea en el proceso de creación artística.
Cualquier herramienta que permita a los usuarios modificar el diseño puede resultar en tiempos más prolongados en el sitio debido al componente interactivo.
Rebanadas de trazos verticales
Los cortes verticales tienden a ser más cortos porque cada corte es parte de una sola letra. Si bien la mayoría de los diseñadores parecen estar usando la tendencia de la misma manera con un corte más orientado horizontalmente, los cortes también pueden ser verticales.
Los cortes verticales tienden a ser más cortos porque cada corte es parte de una sola letra. El truco para hacer que los cortes verticales funcionen es la consistencia. La forma en que se hacen los cortes debe imitarse para que las letras se vean como si fueran juntas. Este método de corte debe parecer que es casi una parte intencionada del tipo de letra. (No en el ejemplo anterior, los segmentos tienen el mismo ancho de una letra a otra y las mismas letras tienen los mismos sectores).
Establecer flujo visual
Los cortes casi crean una sensación de urgencia en la lectura, de modo que usted puede cruzar las letras y ver la visualización principal en la pantalla. Una consecuencia del texto cortado, ya sea intencional o no, es que crea un flujo visual. El ojo de un usuario seguirá la dirección de la división y el espacio en blanco que lo rodea.
Mira el logotipo en el ejemplo de arriba. Con los cortes en la derecha y en el Robocath (más la parte normal faltante de la c), hay un obvio tirón direccional en la pantalla de izquierda a derecha.
El tirón es más fuerte que lo que asocias con la lectura normal (también de izquierda a derecha) porque los cortes te empujan a través de los personajes rápidamente. Los cortes casi crean una sensación de urgencia en la lectura, de modo que usted puede cruzar las letras y ver la visualización principal en la pantalla.
Añadir énfasis a las letras
La razón final, y posiblemente la más convincente, para utilizar la tendencia de diseño de texto en segmentos es agregar énfasis a las letras o al mensaje. Cortar puede ser prácticamente cualquier alteración de las letras donde falta parte de un personaje en el diseño.
MJND, arriba, usa más de un efecto de capas para ocultar, o cortar formas de letras para ayudar a agregar énfasis al mensaje. La imagen podría hacer fácilmente toda la comunicación aquí, pero este efecto ayuda a que el usuario vuelva a la mensajería principal. La combinación es simple, efectiva y visualmente interesante.
Recursos de aprendizaje
Hay algunas formas de crear efectos de texto segmentado para proyectos, dependiendo de lo que esté intentando crear exactamente. Las opciones más populares incluyen crear el efecto de texto a mano utilizando un software de edición o CSS para crear el efecto para proyectos web.
Aquí hay tutoriales para cada una de esas opciones para que pueda intentar crear un efecto de texto en rebanadas moderno:
- Video: Cómo crear texto cortado en Adobe Illustrator
- Cortar fragmento de efecto de texto usando CSS
Conclusión
Usar la tendencia de texto cortado puede ser un poco complicado porque implica alterar elementos de tipo. Es importante que la legibilidad no se pierda o podría perder usuarios con este efecto.
Sin embargo, los efectos de texto en rodajas pueden ser una solución divertida y ayudar a generar un punto focal. Agregar un toque de animación puede ayudar a llevarlo al siguiente nivel también. (Muchos de los ejemplos incluidos en esta publicación hacen precisamente eso; asegúrate de visitar esos sitios web y hacer clic).