Share
Ya que las vacaciones están a la vuelta de la esquina, creo que podría ser divertido crear un tutorial sobre el popular efecto 3D Wrap-Around Ribbon que ha estado apareciendo tanto este año. Esta es una excelente manera de agregar profundidad a sus diseños, y es bastante fácil de completar. Le mostraré algunos ejemplos de esto en acción en la web, lo guiaré a través de las técnicas de creación en Adobe Photoshop y luego explicaré los diferentes enfoques para codificarlo..
Antes de profundizar en el tutorial, echemos un vistazo a un puñado de sitios que utilizan este efecto. Tenga en cuenta la variedad de formas en que puede ser creativo con esto, ¡así que no se detenga solo en este tutorial! Los principios detrás de esto son muy simples en la naturaleza, pero como puede ver en los siguientes ejemplos, puede ser bastante juguetón con la ejecución..
Bien, ahora que hemos visto algunos ejemplos de lo creativo que puedes obtener con este efecto, vamos a profundizar en el tutorial. El objetivo aquí es enseñar las técnicas básicas: lo que haces con ellas es donde debería ser interesante!
Crear un nuevo documento en Photoshop. El tamaño realmente no importa ... usaremos un lienzo de 600px de ancho para este tutorial, pero puede usar su propio tamaño si está trabajando en un diseño web.
Queremos crear una cierta separación de inmediato, así que empiece por oscurecer el fondo y dibuje un rectángulo de color claro en la parte superior..
Comenzaremos la cinta dibujando un rectángulo de 310px por 44px. Estoy usando un rectángulo redondeado con un radio de 4px, pero también puede usar un rectángulo cuadrado si no le gusta la esquina redonda.
Preste atención al ancho: desea utilizar un ancho total que sea igual al "ancho de la columna de contenido" + "el ancho con el que desea que la cinta se superponga con el fondo principal". En este ejemplo, estoy usando 310px, que es 285px para el contenido, y aproximadamente 25px de superposición.
A continuación, quiero cuadrar la esquina inferior para que no sea redonda. Me muevo con la herramienta Convertir punto, y simplemente muevo el punto para que haya un ángulo de 90 grados..
La razón por la que estamos haciendo esto es simple: Para completar la ilusión óptica de que la cinta se "dobla" sobre sí misma, esta esquina no debe ser redonda.. Puede ser bastante creativo con este solo paso creando la ilusión de "redondear" haciendo que la esquina inferior derecha se doble hacia abajo, pero en este ejemplo lo haremos simple..
Ahora queremos recortar la forma de la cinta. Usa la herramienta Lazo poligonal para forjar la forma ... Presiono la tecla "MAYÚS" para forzar ángulos de 45 grados, pero puedes tallar la forma que quieras.
Una vez que haya seleccionado la forma deseada con la herramienta Lazo, haga de esto una Máscara vectorial en la parte superior de su capa de cinta:
El siguiente paso es crear el lado "sombreado" de la cinta que desaparecerá detrás del primer plano. Empieza por dibujar un cuadrado simple.
Consejo: use un color que sea un poco más oscuro que el lado frontal de la cinta para ayudar a crear la ilusión de profundidad.
Ahora necesitamos crear el efecto de "plegado": usando la herramienta Convertir punto de nuevo, mueva el punto de abajo a la derecha hasta que esté casi en el punto de arriba a la derecha..
Tu documento debería tener este aspecto ahora:
Ok, ahora tenemos nuestras formas básicas! Eso significa que el siguiente paso es agregar algunos estilos de capa personalizados a nuestra cinta. Puedes hacer lo que quieras aquí, pero te mostraré las configuraciones que estoy usando para crear una apariencia ligera y texturizada..
Los siguientes estilos de capa se aplican en la parte frontal de la cinta.
Los siguientes estilos de capa se aplican al lado inferior de la cinta.
Whallah! Ahora debería verse así:
¡Hora de un texto! Estoy usando 18pt "Eureka" con una sombra ligera, pero puedes usar lo que quieras.
Las líneas de puntos se pueden hacer de varias maneras, pero le mostraré cómo hacerlo usando "puntos" de texto básicos, usando "." llave. Tenga en cuenta la configuración de arriba: la capa de texto está configurada con una opacidad de casi el 50%, y estoy usando una variedad de técnicas de caracteres para completar el efecto.
Ahora, veamos el sombra suave" Eso ayuda a hacer que los puntos salten un poco:
Eso debería completar la cinta para el carril derecho; Puede copiar / pegar y voltear el conjunto de capas para crear una versión para el lado izquierdo.
Ahora que hemos diseñado la cinta, vale la pena tomarse unos minutos para analizar las tres formas que podría usar para codificarla. No profundizaremos en el código línea por línea; Hay muchos tutoriales específicos de CSS que pueden ayudarte con esto (incluso en nuestro sitio de red, ¡Nettuts!). Lo que haré es discutir los enfoques que podría usar y compartir algunos enlaces donde puede encontrar información más detallada sobre ellos..
Este es el enfoque más simple y directo. Utiliza las propiedades básicas de fondo CSS sin trucos sofisticados más allá de un pequeño posicionamiento. Es posible que su cinta se vea un poco diferente, así que lo guiaré a través de los pasos básicos:
Pros: Este es el método más simple, es fácil de completar.
Contras: El re-skinning requiere abrir un archivo de Photoshop; El elemento no se "estirará" si desea que no sea un tamaño fijo.
El método clásico de "puertas corredizas" es similar al primer enfoque, pero le permitirá estirar su cinta para adaptarse a cualquier tamaño que desee!
Pros: Esto es bastante flexible: obtiene los beneficios del uso de imágenes y la flexibilidad del método de puertas correderas.
Contras: Esto puede ser bastante difícil de conseguir en cada navegador; Volver a personalizar aún requiere abrir un archivo de Photoshop, pero ahora hay tres imágenes para guardar, no solo una.
Si está dispuesto a renunciar a algunos de los detalles (como la textura del ruido y el brillo interior), es posible recrear este código completamente sin imágenes. El nuevo rotación método, gradientes, y elemento oscuridad son las técnicas primarias (lea acerca de todas ellas aquí).
Lea el tutorial completo basado en CSS en Nettuts!
Pros: ¡No se necesitan imágenes! Esto significa que es súper fácil volver a personalizar cambiando algunos valores en el CSS.
Contras: Además de perder la capacidad de agregar texturas y otros aspectos destacados, este método no se procesará correctamente en muchos navegadores. Todo lo que esté por encima de IE8, Safari 4.0 y Firefox 3.5 funcionará bien, pero corre el riesgo de que no funcione en absoluto en los navegadores más antiguos (que mucha gente tiene).
Espero que hayas disfrutado este tutorial! Este efecto es una de las formas más simples de agregar la ilusión de profundidad a sus diseños, y existe una variedad de formas en las que puede abordar la codificación. Deje algunos comentarios o preguntas abajo :)
Accentsconagua