Share
Vamos a crear un gif de pre-cargador animado para tu próximo proyecto de interfaz de usuario. Necesitará la versión extendida de Photoshop CS3 o superior.
Vamos a crear un pequeño gif animado que se puede usar para una gran cantidad de widgets, en cualquier momento en que se solicite contenido ajax, se estén cargando archivos, lo que sea que usted desee. Siéntase libre de mezclar sus propios estilos y variaciones en el cargador a medida que avanzamos. Hay tres secciones principales que vamos a emprender:
Listo. Conjunto. Ir…
Comience por configurar el tamaño del lienzo y agregue un fondo rápido para comenzar.
Solo por diversión, agregaremos un patrón alineado a nuestro fondo y luego comenzaremos a trabajar en el cargador..
Crea un nuevo documento transparente: (7px por 7px). Dibuje una línea diagonal con una herramienta de lápiz negro 1px (haga clic en el píxel superior izquierdo, mantenga presionada la tecla Mayús y haga clic en el píxel inferior derecho)
Definir y nombrar el patrón (menú Editar> Definir patrón).
Una vez hecho esto, vuelva al documento original y cree un estilo de capa de "Superposición de patrón" en nuestra capa de fondo gris: (Menú de capa> Estilo de capa> Superposición de patrón). Elija su patrón del cuadro de patrón y baje la opacidad (utilicé 20%).
Vamos a configurar algunas marcas que actuarán como guías para ayudarnos en el proceso. Usaremos el comando "Transformar de nuevo" para acelerar el proceso..
Dibuje una línea blanca vertical de 1px con la herramienta de línea en su documento:
Para asegurarse de que esté alineado en el centro, seleccione tanto su capa como la capa de fondo, tome la herramienta de movimiento y haga clic en la opción "Alinear centros horizontales" de la siguiente manera:
Gire la línea 45 ° (Seleccione el menú Edición de línea> Transformación libre || Control / Comando + T)
Seleccione el menú Editar> Transformar> "Transformar de nuevo" mientras mantiene presionada la tecla "Opción / Alt" (Comando / Control + Opción / Alt + Mayús + T)
Ejecute ese comando varias veces hasta que la línea haya girado completamente, así:
Usando la misma técnica que se explicó anteriormente, agregaremos algunas marcas pequeñas en cada línea de la cuadrícula para hacer que el cargador dé vueltas y vueltas ... Aquí va.
Agregue algunas guías donde desee que aparezca su "marca de verificación" inicial (asegúrese de que estén en píxeles enteros, no divida los píxeles).
Cree un rectángulo redondeado con un radio de 1px dentro de nuestras líneas de guía (asegúrese de que esté activado para las guías: Ver menú> Ajustar)
Usando la herramienta Selección directa, mueva las esquinas inferiores (nodos) de nuestra forma de marca de rectángulo hacia adentro, para que la forma disminuya..
Utilice el mismo truco de 'Transformar de nuevo' que usamos anteriormente, para duplicar la forma alrededor de nuestras marcas (al girar los 45 °, asegúrese de establecer el punto de transformación en el centro de nuestra cuadrícula, no en el centro de la marca del rectángulo forma, que es donde falla por defecto).
Seleccione el menú Editar> Transformar> "Transformar nuevamente" mientras mantiene presionada la tecla "Opción / Alt" (Comando / Control + Opción / Alt + Mayús + T) hasta que la marca se haya copiado completamente. Debe tener un aspecto como este:
Comprobación de capas: asegúrese de que el panel de capas tenga este aspecto:
Uf. Hemos creado todas las formas de pre-cargador, ahora solo vamos a agregar un montón de estilos de capas para arreglar las cosas un poco. Como de costumbre, sal al gusto. Vamos a agregar estilos de capas que se pueden encontrar en "Menú de capas> Estilos de capas".
Agrega un estilo de capa "Superposición de color" a la capa de marcas (usé # 242424).
Agregue un estilo de capa "Sombra" a la capa de marcas de verificación:
Agregue un estilo de capa "Sombra interior" a la capa de marcas de verificación:
Su cargador ahora debería verse así:
Hay algunas formas en que podríamos continuar con este siguiente bit, pero para simplificar las cosas vamos a duplicar nuestra capa de marcas cinco veces y luego eliminar todas las marcas de formas que no pertenecen a esas capas de formas en particular. No queremos que haya marcas de marcas superpuestas en las capas de abajo, ya que los estilos de capa que vamos a agregar se apilarán, lo que causará efectos de apariencia sobreexpuestos..
Duplique su capa base de ticks cuatro veces, luego comience a eliminar las marcas en cada una de las capas hasta que termine con lo siguiente:
Puede utilizar la herramienta Selección directa para eliminar las formas de marca de cada una de las capas.
Ahora agregaremos algunos estilos a cada una de las capas de marcas de verificación individuales que separamos. Voy a estar haciendo referencia a mis propios nombres de capa.
A la capa llamada "Brillo-Activo", agregue / modifique el estilo de capa "Resplandor externo":
A la misma capa, agregue / modifique el estilo de capa "Resplandor interno":
Luego agregue / modifique el estilo de capa "Superposición de color" (utilicé # 0087c6):
A la capa llamada "Shine-Fading1", agregue exactamente los mismos estilos de arriba, omitiendo el estilo de capa "Outter Glow":
A la capa llamada "Shine-Fading2", agregue / modifique el estilo de capa "Sombra interior":
En la misma capa, agregue / modifique el estilo de capa "Sombra interior" (utilicé # 0087c6).
Luego, a la capa llamada "Shine-Fading3", agregue / modifique el estilo de capa "Sombra interior" (note también el cambio en la opacidad):
Su cargador ahora debería tener un aspecto similar al siguiente (ajuste los estilos de capa a su gusto):
De acuerdo, ya tenemos configurados los estilos básicos, ahora es el momento de duplicar las capas en un montón (lo que hará que la animación sea instantánea) y crear nuestro animado .gif
Agrupe todas las capas que conforman nuestra marca de verificación (resáltelas todas + menú Capa> Capas de grupo)
Duplique todo el grupo, luego gírelo 45 ° (menú Editar> Transformación libre). Repita el paso 2 hasta que haya girado la marca de verificación (tendrá ocho grupos en total).
Su cargador debe verse algo como esto:
Bien, nuestras capas están configuradas y estamos listos para animar. Vamos a seguir con la animación regular fotograma a fotograma, aunque podríamos lograr lo mismo con la animación basada en la línea de tiempo..
Abre el Panel de Animación: (Ventana> Animación). Desactive todas las capas del grupo de ticks excepto la primera, luego haga clic en el botón "Duplicar cuadros seleccionados" en el panel de animación.
Desactivar la primera capa agrupada y activar la segunda capa agrupada.
Repita el paso anterior para cada una de las capas de grupo. Resalte todos los cuadros en su capa de animación (Shift + clic en cada cuadro) y establezca la duración del cuadro en .1 seg.
Elija Archivo> Guardar para Web y dispositivos y use la siguiente configuración para su .gif animado
¡Abra su .gif en un navegador web y admire su nuevo cargador de lujo! Por último, conseguir un poco de helado..
Eso es. Espero que hayas disfrutado creando el cargador! Fue divertido para mí configurar. Suba y vincule algunas de sus creaciones en los comentarios, y haga cualquier pregunta que pueda tener.
Accentsconagua