Diseño de banners web con Adobe Photoshop e Illustrator | Martin Perhiniak | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Diseño de banners web con Adobe Photoshop e Illustrator

teacher avatar Martin Perhiniak, Graphic Designer, Illustrator & Educator

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      1:49

    • 2.

      Flujo de trabajo de banners web

      1:34

    • 3.

      Preparación de imágenes

      4:32

    • 4.

      Preparación de elementos de texto

      4:30

    • 5.

      Adición de elementos vectoriales

      6:48

    • 6.

      Preparación de elementos vectoriales para Illustrator

      5:57

    • 7.

      Diseño del banner principal

      4:32

    • 8.

      Finalización del banner principal

      3:52

    • 9.

      Mutaciones y relación de aspecto

      3:10

    • 10.

      Versiones adicionales de relaciones de aspecto

      4:20

    • 11.

      Diseño de los marcos para el banner animado

      4:38

    • 12.

      Conversión de marcos en objetos inteligentes

      1:54

    • 13.

      Opciones de exportación

      6:01

    • 14.

      Conclusión

      0:46

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

232

Estudiantes

5

Proyectos

Acerca de esta clase

¿Te gustaría aprender a diseñar banners web? Aprende sobre el proceso, la teoría, las técnicas y evalúa tus habilidades trabajando en el proyecto de clase.

Únete a Martin Perhiniak (diseñador gráfico e instructor certificado de Adobe) y aprende su flujo de trabajo y las mejores prácticas que desarrolló durante 20 años como profesional creativo para clientes como BBC, Mattel, IKEA, Google, Pixar y Adobe.

Captura de pantalla%202024-05-22%20at%2016.24.30.png?w=800&v=2&elementId=1S9NQb1pXlCe0Y

En esta clase aprenderás lo siguiente:

  • Creación de banners web estáticos y animados profesionales para todo tipo de clientes/empresas
  • Flujo de trabajo completo del banner web con Adobe Photoshop y Adobe Illustrator
  • Términos importantes de diseño web que necesitas saber
  • Edición y enmascaramiento de fotos con Adobe Photoshop
  • Creación de elementos vectoriales en Adobe Illustrator
  • Uso de mesas de trabajo en Photoshop para los diversos tamaños de banner
  • Uso del panel Línea de tiempo en Photoshop para crear un banner animado

Crearás lo siguiente:

  • Una campaña de banner web profesional con Adobe Photoshop e Illustrator.

¿Para quién es esta clase?

  • Cualquier persona que esté planeando convertirse en diseñador gráfico o diseñador web
  • Creativos que buscan mejorar sus habilidades técnicas y su comprensión de la teoría del diseño
  • Cualquier persona que se especialice en diseño web
  • No necesitas ser un profesional creativo para tomar la clase

¿Qué vas a necesitar?

  • Adobe Creative Cloud
  • Deseo de hacer algo impresionante

Incluso si eres nuevo en el diseño de banners o en el uso de aplicaciones de Adobe ¡las técnicas simples y efectivas que se analizan en este curso te resultarán fáciles de usar y aplicar a tu trabajo!

Conoce a tu profesor(a)

Teacher Profile Image

Martin Perhiniak

Graphic Designer, Illustrator & Educator

Top Teacher

Martin is a Certified Adobe Design Master and Instructor. He has worked as a designer with companies like Disney, Warner Brothers, Cartoon Network, Sony Pictures, Mattel, and DC Comics. He is currently working in London as a designer and instructor as well as providing a range of services from live online training to consultancy work to individuals worldwide.

Martin's Motto

"Do not compare yourself to your role models. Work hard and wait for the moment when others will compare them to you"

Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción: Es hora de diseñar algunos banners web geniales. Vamos. Martin, tengo más de 20 años de experiencia como diseñador gráfico, ilustrador e instructor certificado por Adobe. He trabajado con empresas como BBC, Disney, Google, Ikea, y no puedo esperar para compartir mis mejores prácticas contigo. Este es un curso práctico aerodinámico centra en un proyecto de diseño de la vida real. Te estaré guiando a través de todo paso a paso, y obtendrás todos los archivos de ejercicios para que puedas seguir adelante. En caso de que prefieras no copiarme. También puedes seguir mi flujo de trabajo utilizando los activos alternativos proporcionados y crear algo completamente único que puedas exhibir en tu portafolio creativo. Estoy bastante seguro de que este curso te inspirará a crear algo increíble. Comenzaremos aprendiendo algunos términos importantes de publicidad interactiva como CTR, mutaciones de banner, relaciones de aspecto comunes, tamaños y formatos de archivo preferidos Luego saltaremos al photoshop y armaremos nuestro primer banner usando imágenes, formas vectoriales y tipo. Reutilizaremos esta primera composición para las variaciones adicionales de banner y aprenderemos a usar mesas de trabajo y objetos inteligentes Finalmente, crearemos un banner animado dinámico utilizando panel de línea de tiempo de Photoshop y la función de animación de fotogramas. Además de todo lo técnico, también cubriremos alguna teoría importante del diseño gráfico que podrás aplicar en cualquiera de tus futuros proyectos creativos. Puedes unirte a este curso sin ningún conocimiento previo en ilustración de diseño gráfico o aplicaciones DOB Pero para completar el proyecto, necesitará acceso a DOB Creative Cloud y a la computadora de escritorio o portátil Pero ahora es el momento de comenzar a crear, así que te veo en la siguiente lección. 2. Flujo de trabajo de banners web: Estaremos produciendo algunos banners web geniales. Algunos de estos serán estáticos, pero al final, también crearemos un banner animado. Comenzaremos con nuestra imagen de héroe, que suele ser el formato horizontal. Entonces crearemos mutaciones a partir de esto porque es muy común que tendrías que producir diferentes versiones o variaciones de relación de aspecto. El segundo que creamos será un formato cuadrado. Entonces también crearemos un formato de retratar. Y luego prepararemos tres fotogramas para la versión animada. Entonces eso es frame uno a y tres, que acabará en un documento separado donde aprenderemos a usar el panel timeline y generar archivos gif animados. Para este proyecto, principalmente pasaremos tiempo en photoshop. Sin embargo, en un momento, cambiaremos a Illustrator solo por crear algunos elementos vectoriales que luego podremos usar en nuestras composiciones y para agregar algo de sabor y darle sabor a los banners. Aquí de nuevo, tendrás la opción de elegir entre qué imágenes quieres trabajar. Elegí dos de estas tomas. Pero si quieres, incluso puedes encontrar imágenes completamente diferentes con las que trabajar. Nuevamente, puedes seguirme paso a paso y recrear exactamente el mismo diseño o ser un poco más creativo y experimentar y explorar tus propias ideas Entonces espero que estén emocionados de comenzar porque en el próximo video, juntaremos primero las imágenes y los textos que necesitaremos para nuestros banners. 3. Preparación de imágenes: Decidí trabajar con estas dos imágenes y estos dos entrenadores, principalmente porque me encantan sus colores. Me inspiré especialmente en el color del Nike Trainer a la derecha y también ese bonito telón de fondo azul que tenemos en ese tiro y que en realidad voy a usar para mis pancartas. Entonces para empezar, tendremos que hacer una selección de converso porque que tenemos dos separados de su fondo original. Tengo seleccionada esta imagen y voy al menú Seleccionar y simplemente elijo un tema de nuevo, porque tenemos alta diferencia de contraste entre el primer plano y el fondo. Esta es una selección muy rápida y fácil. Y todo lo que tenemos que hacer es convertir esto en una máscara haciendo clic en el icono de máscara aquí en la parte inferior del panel Capas. Y luego convertir todo esto en un objeto inteligente que mantendrá o retendrá la calidad de imagen original. Así que vamos a convertir esto en un objeto inteligente. Esto es especialmente útil cuando estás trabajando en banners porque terminas creando tantas variaciones diferentes en diferentes tamaños. Y no quieres terminar teniendo detalles pixelados una vez que vayas ida y vuelta redimensionando tus imágenes tuyas. Entonces hagamos lo mismo con la otra imagen aquí a la derecha. Nuevamente, haga clic derecho sobre eso y conviértelo en un Objeto Inteligente. Aquí no tendremos que hacer una selección porque me gustaría usar esta hermosa sombra paralela que tenemos en este tiro y también el color de fondo. Por lo que ahora que tenemos estos listos, vamos a crear un nuevo documento. Y voy a configurar esto para un proyecto web. Por lo que elijo Web, que configurará automáticamente el nuevo documento como tablero de arte, y utilizaré el siguiente tamaño, 1280 por 600. Observe que existe la pequeña casilla de verificación ahí para los tableros de arte que recomendaría seguir para este proyecto en particular. Y una vez que hacemos clic en Crear, creará un nuevo documento para nosotros. Déjame simplemente alejar un poco. Y ya se puede ver que dentro del panel de capas en lugar de una capa de fondo, ahora tenemos un tablero de arte, el von Lee o grupo. En realidad es ligeramente diferente de un grupo de capas, pero puedes considerarlo similar a eso. Y actualmente no tenemos nada en este tablero de arte. Así que vamos a traer sobre las imágenes que preparamos. Primero. Deja esto aquí, y podemos ver que esto es enorme, por lo que tendremos que hacerlo más pequeño. Pero ahora sólo puedo cerrar el documento original. Y también copiaré este objeto inteligente. Incluso puedo usar Comando o Control C y luego Comando o Control V para pegarlo. Volvamos a cerrar el documento original. No tenemos que salvar eso. Ahora podemos seleccionar estas dos capas. Y con la herramienta Transformación Libre, que es Comando o Control T, podemos hacerlas más pequeñas. Por lo que ahora tengo a la NYC en la parte superior, pero tan pronto como muevo la capa conversa por encima, podemos ver que en realidad tenemos una buena selección aquí. Por lo que podremos poner estas dos imágenes en un tablero de arte fácilmente. Ahora para evitar que aparezca el fondo blanco, también voy a añadir una capa de fondo sólido. Esto es de la opción de ajustes, color sólido. Y voy a hacer clic en el fondo del Nike Trainer para probar ese color azul. Y de esta manera tendremos un infinito de colores de fondo, por lo que no nos limitaremos a los bordes de esta otra imagen. Ahora, en primer lugar, me aseguraré de que estos zapatos luzcan realistas en cuanto a su tamaño comparados entre sí. Y voy a empezar a rotarlas ya. Entonces creo que esto puede estar en un ángulo y lo converso en realidad ya está en un ángulo divertido. Sólo voy a hacerlo un poco más pequeño. Una vez más, aprenderemos más sobre los objetos inteligentes más adelante. Pero por ahora, solo recuerda que cada vez que trabajes con objetos inteligentes, no tienes que preocuparte por perder calidad de imagen cuando estás redimensionando las capas. Entonces algo así que me siento será una composición agradable, bastante dinámica. Por lo que tenemos dos colores contrastantes, pero también ángulos contrastantes. Y no tengas miedo de recortar imágenes en tus composiciones, ya sea para impresión o web, si encuentras el lugar adecuado para recortarlas, puede hacer que parezca emocionante e interesante. Recuerda, hablamos bastante de recortar imágenes esta semana. 4. Preparación de elementos de texto: A continuación, vamos a traer los elementos de texto. Para eso. Voy a utilizar esa fuente que incluí en los archivos de ejercicio Y también en el tablero con las imágenes, se puede encontrar un enlace a la fuente original. Entonces esta es la fuente llamada velocidad A4, y solo escribiré en gran venta y traeré esto aquí. Vamos a hacer esto un poco más pequeño. Y por ahora no voy a poner esto en un ángulo. Simplemente manténgalo recto y duplicarlo con Alt u Opción, haga clic y arrastre y escriba. En todos los entrenadores. Esto puede ser más pequeño. Esta es la copia secundaria. Y para esto, voy a usar dos nuevos colores que podamos introducir. Entonces, en primer lugar, selecciona sobre todo y cambia el color a este azul más oscuro o tal vez algo del propio entrenador. Así funcionará si quieres usar los mismos valores exactos. Estos son los valores RGB, 8361. Puedes escribirlas si quieres. Sólo voy a hacer click OK. Y luego por el amarillo, voy a escoger un amarillo muy intenso. De nuevo, se pueden ver los valores aquí, 55 a 520. Haremos clic en Aceptar y aceptaremos estos cambios haciendo clic en la cinta en la parte superior. Y por último pero no menos importante, también necesitaremos la pequeña pegatina que diga hasta el 50%. Entonces para esto primero voy a dibujar una elipse. Entonces ahí está la herramienta elipse. Y sólo voy a cambiar el color de relleno a blanco. No necesitamos el color del trazo y tenemos que asegurarnos de que esto esté configurado para dar forma. Y entonces solo podemos empezar a dibujar y asegurarnos de que mantengas presionada la tecla Mayús mientras dibujas. Eso asegurará que sea un círculo perfecto. Por ahora, sólo voy a colocar esto en algún lugar aquí. Antes de añadir el texto. Sólo voy a cambiar el color ahora a negro. Y la fuente o tipografía esta vez va a ser decano. Italic, 2014, cursiva. También sólo voy a reducir el tamaño, tal vez 200 puntos, y luego solo haga clic en algún lugar aquí en el lienzo. Por lo que podemos escribir hasta entonces presionar Enter y 50 por ciento. Ahora sí podemos ver ese texto, pero lo moveré hacia arriba. Y me di cuenta de que esta en realidad no es la fuente que quería usar. Entonces en lugar de Italica, quiero usar la cursiva extra negrita. Esto va a ser más impactante, pero el hasta no necesita estar en todas las capitales. Por lo que quiero que esto sea minúsculas, a lo que podemos llegar entrando las opciones adicionales de formato de caracteres haciendo clic en este ícono aquí en la barra de opciones, y luego elimine las todas las mayúsculas en caso de que tenerlo encendido. Adicionalmente, me gustaría tener menos espacio entre estas líneas, que también podemos encontrar aquí en el panel de caracteres. Por lo que a esto se le llama liderar. Y sólo voy a arrastrar para acercarlas unas a otras, las dos líneas. Y entonces también voy a hacer el hasta el texto más pequeño. Ese es el tamaño del texto a algo así. Y después teniendo todos estos seleccionados, puedo alinearlos a su centro. Y ahora podemos usar la herramienta Mover y simplemente con Free Transformar Command o Control T. Y luego arrastrándola hacia abajo, podemos alinearla a esta forma de pegatina. También agregaré un poco de ángulo aquí solo para hacerlo un poco más interesante y también reducir un poco aún más el espacio entre las dos líneas. Siento que podemos hacer el 50 por ciento un poco aún más grande. Pero entonces tendremos que tener también un poco más de espacio entre las dos líneas, algo así. Creo que eso se ve bien. Solo estoy usando las teclas de flecha del teclado para posicionar esto. Entonces incluso podemos agrupar estas dos capas juntas porque tendremos que moverlas juntas siempre. Entonces eso es Comando o Control G. Una vez que tengas las dos capas seleccionadas, y acabaré de decir 50% sticker, solo para mantener las cosas ordenadas antes de seguir adelante, también nombraré las capas de imagen. Entonces esto va a ser converso, y eso es NYC. Y ahora tenemos todo listo para continuar y crear algunos elementos vectoriales en Illustrator. En el siguiente video. 5. Adición de elementos vectoriales: El motivo por el que necesitamos algunos elementos vectoriales en esta composición es que sin ellos se siente un poco vacío. Hay demasiado espacio negativo y no pasa mucho. Y para mantener las cosas más dinámicas, estas formas geométricas que crearemos ayudarán a sumar algo de impulso y energía a nuestras pancartas. Entonces aquí estamos en Illustrator. Y en primer lugar, solo voy a usar la herramienta de línea y dibujar una sola línea recta manteniendo pulsada la tecla Shift. Y aumentaré el grosor sobre esto tal vez a cinco puntos. Después ve al menú Efecto y elige entre distorsionar y transformar la función llamada zigzag. Cada efecto que aplique en Illustrator se convierte en efecto vivo, lo que significa que siempre puedes volver y hacer cambios en la configuración. Así que no te preocupes por ponerlos exactamente como yo lo hago. Siempre puedes volver y experimentar y ver lo que prefieres. Pero vamos a aumentar un poco el tamaño aquí. Y entonces también aumentaré las crestas. Tal vez el tamaño puede ser un poco menor. Apenas agreguemos algunas crestas más, algo como esto. Creo que se ve bien. Por lo que sólo podemos hacer clic, Vale, y luego vamos a duplicar esto usando la herramienta de selección alt u opción, haga clic y arrastre. Y si tienes el panel de apariencia abierto, verás ahí el efecto zigzag. Y esto es lo que quiero decir con efectos en vivo. Simplemente puedes apagarlo y luego el león vuelve recto. Una vez que lo vuelvo a encender, vuelve a la configuración en zigzag que creamos. Por supuesto podemos cambiar aún el color y el grosor del trazo si queríamos. Pero para esta segunda versión, lo que quiero hacer es volver al efecto en sí, que podemos hacer haciendo clic en la palabra zigzag aquí en el panel de apariencia. Y en lugar de forense, pondré esto a suavizar, lo que creará esta bonita línea ondulada. Y para esto, sólo voy a ajustar las cosas un poco. Vamos a necesitar menos crestas aquí y tal vez aumentar el tamaño apenas ligeramente, algo así. Quizás un poco menos de acero rígido. Vamos a hacer clic. De acuerdo, y ahora tenemos listos estos dos elementos. Es hora de crear una pequeña cruz, que volveremos a hacer usando la herramienta de línea. Esta vez voy a dibujar una línea verticalmente y aumentar el grosor hasta tal vez alrededor de 30 puntos. Y luego haciendo clic en la configuración del trazo, cambiaré la tapa para redondearla. Y luego vamos a crear una copia de esto, haría clic y arrastrarlo y luego rotarlo mientras mantenemos presionada la tecla Mayús, ahora tenemos una versión horizontal también. Entonces podemos alinearlo a estas otras formas. Así que asegúrate de que esté perfectamente centrado. Acabo de usar y confié en las guías inteligentes para lograr esto. Ahora vamos a hacer esto un poco más pequeño. Estoy manteniendo pulsada la tecla Shift, arrastrándola hacia abajo. Y quizá también el tamaño del trazo pueda ser más pequeño y pronto volveremos a esta forma. Pero también quiero crear un elemento tipo chevron para el cual de nuevo, empiezo con la herramienta de línea, solo dibuje una línea recta y luego cambie a la herramienta pluma presionando P en el teclado o haciendo clic en este icono en la barra de herramientas, y luego haga clic aquí en el centro, agregando un punto de anclaje. Después usando la herramienta de selección directa, podemos arrastrar esto hacia fuera, tal vez arrastrarlo a algún lugar por aquí. Ahora, ya que tenemos gorras redondas, también sería bueno tener una ronda une. Creo que eso se ve mucho mejor. Estamos listos. Vamos a reducir el grosor en esto. Y luego por Alt u Opción click y arrastrando, puedo crear un duplicado y luego presionando Comando o Control D un par de veces, podemos crear algunas copias adicionales. A lo mejor uno menos es suficiente. Muy bien, por lo que este es también otro elemento con el que trabajaremos. Y por último, voy a usar la herramienta Elipse y dibujar un círculo perfecto manteniendo pulsada la tecla Mayús y luego haga clic en la configuración del trazo y encienda la opción de línea discontinua. Aquí, podemos establecer el guión en 0 y luego la brecha puede ser tal vez diez puntos o más. Ahora puedo ver necesitaremos más espacio. Simplemente puedo hacer click en esta sección donde especificamos el tamaño de la brecha. Y luego puedo usar la flecha hacia arriba en el teclado para aumentarlo y verlo actualizando en vivo sobre la forma. Siento que 20 brecha en este caso va a funcionar. Y ahora solo voy a copiar esta forma con comando o control C y luego pegar en su lugar con Comando o Control F. Estas opciones pueden encontrar aquí. Por lo que esto es pegar al frente o pegar en su lugar, lo que prefiera usar. Pero entonces también redimensionaré esta nueva copia manteniendo presionadas las teclas Alt u Opción y Mayús juntas y podemos hacer un círculo más pequeño como ese. Pero debido a que estamos transformando esto, hay que asegurarse también de que el grosor de las líneas no esté cambiando. Este es un ajuste que puedes encontrar en el panel de transformación. Ahí, encontrarás Escala, Golpes y Efectos. Asegúrate de que esté apagado. Esto es algo que puedes encontrar, una vez más desde el panel de transformación. Simplemente se asegura de que dentro de eso, tenga las opciones de show seleccionadas para poder ver estos ajustes. Ahora que tengo esta segunda versión, repitamos nuevamente los últimos pasos. Comando C o Control C para copiar, y luego Comando o Control F para pegar en su lugar, y luego Alt y Shift para arrastrarlo hacia abajo hasta que tengamos el siguiente círculo ya. Y observa que los círculos no están perfectamente alineados aquí. Y eso es debido a un ajuste en la característica de línea discontinua, tenemos que cambiar a esta opción, que alineará los guiones dos esquinas y extremos de ruta. Entonces una vez que haga clic en eso, los distribuirá muy bien a lo largo de los círculos. Por lo que podemos volver a repetir estos pasos. Simplemente crea un círculo más por ahí. Ahora si quiero que sea muy específico, podría asegurarme de que la distancia entre estos círculos sea igual. Pero por ahora, solo estoy tratando de ocultarlo y acercarlo aproximadamente a un espaciado parejo. Y también tenemos la idea elemental más compleja. Pero para seguir adelante de aquí, realidad voy a crear una copia de cada uno de estos porque quiero mantener un original que se pueda editar fácilmente que tenga ajustes de trazo de acero y los efectos disponible en el panel de apariencia. Pero estos en su estado actual no se transferirán bien a Photoshop. 6. Preparación de elementos vectoriales para Illustrator: Si selecciono los chevrons por ejemplo, y los copié, Eso es Comando o Control C. Y luego salto a Photoshop y uso Comando o Control V. Al pegar, quiero usar la opción Capa de forma, que es lo mejor para trabajar con estos simples elementos vectoriales. Cuando haga clic en OK, se va a estropear mi bonito diseño de chevron. Entonces para evitar tener este tema aquí en Illustrator, voy a duplicar este grupo de elementos. Luego ve al menú Objeto y elige Expandir en este cuadro de diálogo, simplemente haz clic en Aceptar, no tienes que cambiar ninguna configuración. Esta segunda versión ya está lista para entrar en Photoshop. Y la razón por la que guardé el original, porque aquí todavía tenemos los valores de trazo. Entonces, si quiero, siempre puedo aumentar, disminuir el grosor de estas líneas e incluso cambiar la configuración de trazo mientras estas ahora son formas rellenas. Por lo que es mucho más difícil hacerles algún cambio. Pero la ventaja es que si ahora copio esto y voy a Photoshop arriba en pegarlo como capa de forma. Ahora, en realidad aparece de la forma en que queremos que lo use. Y lo mejor de tenerlo como capa de forma es que puedo cambiar fácilmente su color haciendo doble clic en la miniatura, en la capa, y luego escogiendo cualquier color del diseño. Y hagamos esto más pequeño con la herramienta Transformación Libre y colóquelo en algún lugar aquí a un costado por ahora. Y vamos a saltar de nuevo a Illustrator y asegurarnos de que todos los demás elementos estén listos para ser trasladados a Photoshop. Entonces empecemos con esta línea aquí. Voy a duplicarlo, alterar opción, arrastrar, y luego ir al menú Objeto para este 1 primero necesitamos usar Expandir Apariencia. Porque recuerda que el efecto se guarda en el panel de apariencia, pero esto sólo amplió el efecto, pero sigue siendo un trazo, que luego tenemos que volver a expandir. Ahora esto está listo para ir a Photoshop. Así que vamos a copiarlo y pegarlo como una capa de forma. Volveré a ponerlo aquí en la parte superior. Por ahora, repitamos lo mismo para esta línea ondulada. Nuevamente. Objeto Expandir Apariencia y luego Objeto Expandir y luego copiar y pegar como una capa de forma, podemos hacer lo mismo por estos círculos. Nuevamente. Primero lo duplico, luego voy a Objeto, Expandir Apariencia. Y aunque no hubo efecto aquí, teníamos líneas discontinuas que necesitaban expandirse esta manera primero y luego expandirlo por completo. Convirtiéndolos en un grupo de pequeños círculos, no podremos ajustar yano podremos ajustar ningún trazo y cosas. Pero una vez más, la ventaja es que sólo podemos copiar esto y pegarlo en Photoshop. Y ahí tenemos listo nuestro precioso elemento? Mantendré esto aquí en el lado izquierdo. Y en realidad me gustaría tener otra versión de esto. Entonces voy a simplemente hacer algo de espacio y copiar este grupo una vez más y presionar Shift X aquí en Illustrator para intercambiar el color de relleno para convertirse en color trazo y tal vez aumentar el grosor de los trazos, que hacen que esto luzca ligeramente diferente cuando ahora podemos volver a moverlo a Photoshop. Pero recuerda antes de mover esto a Photoshop, Vamos a expandir esto. Una vez más, no puedes tener ajustes de trazo entrando como capas de forma en Photoshop. Entonces ahora que hemos hecho el expandir, podemos pegarlo en y se mostrará exactamente como lo quería. Y por último pero no menos importante, hagamos también una copia de esta forma aquí y luego vamos a Objeto, Expandir. Y luego solo vamos a crear una copia más de la misma. Y usando el panel Pathfinder, podemos unir estas formas haciendo clic en este icono aquí. Y si no ves el panel de pathfinder, solo tienes que ir al menú Ventana, podrás abrirlo desde ahí. Y luego una vez que tengamos esta versión donde unimos estas formas, ahora podemos presionar Shift X para otra vez, intercambiar los colores. Y ahora tenemos un tamaño de trazo que podemos ajustar. Y creo que eso se ve bien. Ahora de nuevo, solo podemos ampliar esto para asegurarnos de que podamos moverlo a Photoshop. Así que vamos a mover este 1 primero, pegarlo como capa de forma, y luego la última, de nuevo, copiar y pegar como capa de forma. Entonces ahora tenemos todos los elementos y en realidad hay solo un elemento que también puedo crear aquí directamente dentro de Photoshop muy rápida y fácilmente. Y como con la herramienta elipse, voy a dibujar un simple anillo. No hay color de relleno, simplemente trazo blanco. Y sólo voy a aumentar el grosor. Y simplemente voy a dibujarlo aquí, manteniendo pulsada la tecla Shift. Y siempre podemos ajustar el tamaño del trazo arrastrando esto hacia arriba y hacia abajo. Probablemente algo así. Va a funcionar. Así que si realmente lo quieres, técnicamente podrías recrear todas estas formas directamente aquí en Photoshop. Pero tomará mucho más tiempo y sería mucho más difícil que hacerlo en Illustrator. No olvides que esto es lo que te va a hacer un diseñador gráfico profesional, que siempre estás eligiendo la forma más efectiva crear algo y utilizas cada aplicación de Adobe. Partes específicas del flujo de trabajo. No te preocupes si sientes que no podrás decidir estas decisiones por tu cuenta y elegir la aplicación correcta siempre para la tarea correcta. Porque al final de este campo de entrenamiento y después de pasar por 12 grandes proyectos, tendrás una idea mucho mejor y estarás mucho más seguro en decidir cuándo cambiar y a qué aplicación. Pero ahora que tenemos todos nuestros elementos listos, en el siguiente video, podemos crear esta primera composición para nuestro paisaje y banner. 7. Diseño del banner principal: Es hora de crear una composición dinámica de alta energía utilizando todos estos elementos que tenemos aquí. Y una técnica que te ayudará a agregar más impulso a tu diseño es utilizar algunas diagonales. Entonces para esto, voy a seleccionar el texto en primer lugar, ambas capas, la gran venta y los viejos entrenadores. Y usando la herramienta de transformación libre, voy a teclear en el ángulo de rotación, que en este caso será menos 20, y pulsamos nuevamente Enter y Enter para aceptar esta transformación, nosotros también puede seleccionar nuestras líneas VV y zigzag y una vez más utilizar herramienta de transformación libre y escribir también menos 20. Uh, por cierto, si acabara de escribir en 20, eso sería rotación en sentido horario, mientras que menos 20 crea rotación en sentido contrario a las agujas del reloj. Y podrías preguntarte, ¿por qué decidí usar este ángulo? Bueno, antes que nada, si tienes texto que ya está en un ángulo o cursiva, como esta fuente, suele verse mejor yendo hacia la parte superior de tu diseño y no bajando. Pero incluso con textos normales que no se establece en Italica, siempre se siente un poco más positivo orientarlo en esta dirección en comparación con tenerlo al revés. Solo te voy a mostrar, lo que se siente un poco negativo porque el texto está disminuyendo en lugar de ir muy bien hacia arriba. Por supuesto, realmente depende de la composición, de lo que quieras lograr. Pero en este caso, creo que esto va a funcionar bien. Ahora hagamos algo de espacio. Y por cierto, siempre que tengas activa la función de mesa de trabajo, puedes mover elementos fuera del tablero de arte y aún así tener acceso a ellos. Observe cómo se colocan también fuera del tablero de arte aquí en el panel de capas. Me gustó mucho trabajar así cuando tengo muchos elementos. Por lo que sólo podemos arrastrarlos y traerlos de vuelta una vez que sepamos dónde queremos colocarlos. Así que coloquemos esta línea en zigzag, tal vez en algún lugar por aquí. Y te voy a mostrar un atajo muy práctico mediante el uso de la herramienta pincel, puedo Alt u Option hacer click en este color que tenemos en el texto. Ahora que está configurado como nuestro color de primer plano, puedo usar Alt u Option Backspace para aplicar ese color o rellenar ese color en nuestra capa de forma vectorial actualmente seleccionada . También podemos hacer campo v, el color de fondo, que actualmente es blanco. Entonces eso es Comando o Control Retroceso. Y con estos dos accesos directos, es tan rápido y fácil cambiar rápidamente los colores de tus capas. Así que solo utilicemos uno azul aquí, pero aquí usaremos una versión en blanco. Y primero, antes de ajustar las otras formas, sólo tenemos que asegurarnos de que nuestro texto esté establecido en el lugar correcto. Por lo que queremos asegurarnos de que sea legible. Siento que tiene buen contraste por aquí. Y me gusta bastante cómo el zapato viene entre las dos palabras. Y entonces podemos tener los propios todos los entrenadores debajo de él. Pero no tiene por qué ser tan grande. Entonces voy a usar la herramienta de transformación gratuita, solo hazla un poco más pequeña, algo así. Pero para crear un poco más de interés, ya que tenemos esto como capa separada, voy a poner esto en realidad debajo del converso, lo que hará sentir como si viniera de detrás de la primera línea de texto, y luego viene delante de la segunda línea de texto. Por lo que estamos agregando cierta profundidad e interacción a nuestros elementos, que ambos ayudaron a crear una composición más emocionante o atractiva. Y ahora sólo podemos mover esta forma aquí arriba. Y luego la línea en zigzag puede bajar en algún lugar por aquí. Pero esto puede volver a ir detrás del zapato. Algunas formas pueden estar al frente, algunas pueden estar detrás. Ahora también vamos a hacer esto un poco más pequeño. Y luego volveré a hacerlo, manera similar a la línea en zigzag, usar otra copia de la misma capa y simplemente ponerla en azul. Observe cómo mantengo los detalles de contraste más alto como las líneas blancas más cerca los textos reales que titulan o el mensaje principal. Si bien utilizo detalles de menor contraste más cerca de los bordes, esto ayuda a dirigir los ojos de los espectadores y asegurarme de que se centren en el mensaje central en lugar de distraerlos y tener detalles compitiendo su atención en todo el lugar. 8. Finalizar el banner principal: Ahora vamos a mover estos cruces hacia la composición. Voy a usar uno de estos aquí en la parte superior izquierda, sólo voy a hacer esto más pequeño aquí, no me importa usar un poco de blanco porque este es un detalle muy pequeño. Y entonces voy a añadir otro aquí. Esto me pondré en azul, y agregaré otro azul tal vez en algún lugar por aquí. Y luego vamos a traer esta otra versión de la cruz, a la que podemos caminar quizá en algún lugar aquí. Puedo mover esta línea un poco, puedo hacer esto un poco más pequeño. Y luego vamos a duplicar esto una vez más, moverlo aquí. Y ya sea podemos poner esto también en azul o también podemos simplemente reducir su opacidad para que podamos mantenerlo ancho. Pero presionando tres o cuatro en el teclado, podemos reducir la opacidad rápidamente a 30 o 40 por ciento. Nuevamente, esta es una forma de jugar con el contraste, y solo usamos este elemento aquí más para llenar ese espacio vacío. Pero no queremos distraer demasiado al espectador de los entrenadores. Y de igual manera a lo que hemos hecho antes, vamos a traer también el detalle del Chevron. Simplemente lo rotaré 90 grados hacia abajo. Colocarlo en algún lugar aquí arriba, de nuevo, usando la versión de alto contraste de la misma cerca del título y realmente dirigir el ojo del espectador al mensaje principal que duplicar esto, puedo darle la vuelta al revés, tal vez aumente un poco el tamaño de la misma. Y entonces podemos poner esto al color azul más oscuro y tal vez simplemente moverlo un poco más al borde. Y entonces sólo podemos tener otra versión de esto de nuevo, rotada, reducida en tamaño y llenando aquí una forma. Incluso puede venir al frente y solaparse ligeramente. Este entrenador así. Ahora vamos a usar estos círculos. Voy a poner esto aquí atrás. El converso, aumentará el tamaño de esto y reducirá la opacidad al 30%. Y luego podemos usar el otro aquí en la esquina inferior derecha. Y en realidad cambiaré el color de esto a amarillo o retroceso para llenarlo rápidamente con ese color. Y por último, tenemos nuestro círculo, que voy a colocar aquí en la parte inferior, rellena esto de azul. Pero en este caso, no podemos usar el atajo ya que esto fue creado aquí en Photoshop y está usando un atributo de trazo, solo tenemos que cambiar el color de la barra de control. Y luego solo dupliquemos esto una vez más. Colocarlo en algún lugar allá arriba. Utiliza un poco el tamaño. Y luego una vez más, mediante el uso de la herramienta de flecha negra, veremos los ajustes para los colores y podemos cambiarlo a amarillo, de nuevo, más cerca del título, tenemos el color de contraste más alto por dejar que la parte inferior tenemos la versión de menor contraste. Y luego solo hagamos un círculo más aquí a la derecha también. Puede hacerlo ligeramente más pequeño, tal vez aumentar el grosor del trazo, ponerlo en blanco, pero luego también reducir la opacidad hasta un 30%. Eso es todo lo que quería usar en esta versión del banner. Solo echemos un vistazo a esto desde un poco más lejos. Siento que tal vez este entrenador pueda ser un poco más grande, así que solo voy a aumentar el tamaño de misma para que llene ese espacio un poco más. Incluso podemos moverlo un poco de esa manera. Y ahora sólo podemos mover el texto también, ajustándose ligeramente a esta nueva posición. Y creo que se ve bien ahora. Así que sólo para terminar esto, voy a cambiar el nombre de este tablero de arte, luego simplemente llamarlo paisaje. Por lo que ahora podemos salvar nuestro trabajo. Y en el siguiente video crearemos dos mutaciones a partir de esto. Entonces tendremos un cuadrado y la variación de formato retrato con el mismo diseño. 9. Mutaciones y relación de aspecto: La forma más rápida de crear un duplicado de un tablero de arte es simplemente usar la herramienta Mover y mantener pulsada la tecla Alt u Opción, arrastrarla hacia un lado. Observe que esto crea un tableros de arte separados aquí en el panel Capas también. Y podemos cambiar el nombre de estos dos cuadrados, pero tenemos que cambiar también el tamaño de este banner, que podemos hacer desde el panel Propiedades aquí por el ancho, voy a escribir en 600. Y una vez que haga eso, observe cómo los elementos que ya no encajan en el tablero de arte se colocan afuera, tanto aquí en el espacio de trabajo sino también en el panel de capas. Y un elemento que definitivamente no queremos perder es esto más grueso? Así que voy a arrastrar eso recto aquí atrás en la esquina, tal vez un poco más alto. Y también el texto, no queremos perder. Pero en este caso, no creo que necesitemos ambas capas de textos, por lo que los viejos entrenadores pueden ser removidos. Y en cambio solo estaremos concentrándonos en esta una gran venta y usando la herramienta tipo, voy a dividir esto en dos líneas. Siento que eso funciona muy bien aquí. Podemos hacerlo ligeramente más pequeño y alinearlo en un lugar donde no se superponga demasiado el producto. Y sigue siendo realmente bueno y legible. Estas formas, solo podemos movernos aquí a la cima y ver si las necesitamos o no. También se puede simplemente comprobar en el panel de capas ¿ qué más tenemos aquí? El Nike Trainer no será visible en esta versión, por lo que sólo podemos eliminar eso del tablero de arte cuadrado. Y ahí está esta forma, por ejemplo, que probablemente no necesitemos en este caso, también puedo eliminar que estas líneas onduladas pueden estar un poco más allá o tal vez incluso aumentadas tamaño solo para que encaja mejor que, vamos a mover esta forma aquí arriba, tal vez aumentar un poco su tamaño. El Chevron puede venir aquí señalando el producto y podemos venir un poco más abajo o incluso centrados entonces la línea en zigzag, podemos moverlo más lejos del producto. El otro chevron aquí también puede subir. Este círculo puede bajar un poco. Y tal vez podamos tener una de estas formas aquí. Y sólo para tener un poco de amarillo también en la composición, sólo voy a colocar ese círculo ahí arriba en la parte superior. Tal vez hacer esto un poco más pequeño. De acuerdo, estoy contento con esto, así que podemos simplemente eliminar las formas que no terminamos usando. Y ahora sólo podemos duplicar este banner cuadrado para crear nuestra tercera versión, que va a ser el tamaño del banner retratar. Y para tener esta configuración de la manera correcta, volveré a usar el panel Propiedades. Para esto. El ancho va a ser 400 y la altura va a ser de 800. Entonces es una relación de aspecto dos por uno, que nos va a permitir tener, nuevo ambos tres nervios visibles. Entonces, en primer lugar, vamos a mover el converso aquí a la izquierda, reducir un poco el tamaño. Y esta vez en realidad voy a tener la pegatina ir debajo del zapato converso y colocarlo en algún lugar por ahí. 10. Versiones adicionales de relación de aspecto: Y esto me recuerda a una cosa que nos perdimos, y esa es una sombra paralela para lo contrario. Por lo que tenemos una sombra en el Nike Trainer. Tenemos que igualar eso para este otro zapato también. Así que volvamos a nuestra composición principal. Y por cierto, estoy usando Command or Control click para cambiar entre capas. Eso es porque no estoy usando la función de selección automática. Prefiero usarlo con este atajo. Entonces con eso, puedo cambiar muy rápidamente entre ahora y las capas, pero incluso diferentes capas en diferentes tableros de arte. Pero al tener esto seleccionado, puedo hacer doble clic cerca del nombre de la capa y aplicar sombra paralela. Puedes copiar los ajustes que ves en mi pantalla. Entonces estoy usando multiplicar un color azul más oscuro, similar al color de sombra de este otro entrenador. Y con el resto de los ajustes que puedes ver aquí, es bueno saber cada vez que configuras tu sombra paralela, siempre puedes simplemente hacer clic y arrastrarla alrededor sobre el lienzo. Pero esta vez sólo voy a guardarlo donde estaba, asegurándome de que sea el mismo ángulo que el otro zapato. Podemos estar un poco más a la derecha. Vamos a hacer clic en OK, y luego podemos asegurarnos de que esta sombra paralela se aplique también en los otros tableros de arte. Y la forma más rápida de hacerlo es haciendo clic con el botón derecho en la capa y eligiendo Copiar estilo de capa, luego Comando o Control haga clic en la otra capa de imagen y haga clic con el botón derecho en Pegar estilo de capa. Y una vez más en éste también, pego estilo de capa. que puedas ver por qué esta sombra está ayudando a establecer o crear más profundidad y hacer que toda esta composición de la pegatina esté debajo del zapato más interesante. Por supuesto, todavía quiero asegurarme de que sea legible, así que solo lo muevo ligeramente hacia abajo. Pero entonces vamos a copiar esta capa con la NYC. Lo seleccioné y luego presioné Comando o Control C. Luego vuelve a este tablero de arte. Simplemente seleccione una de las capas y luego presione Comando o Control V que nosotros, lo traigo a esta composición y voy a mover esto todo el camino en la parte inferior y tal vez colocarlo en algún lugar aquí abajo. Y sólo podemos arreglar las cosas. Este círculo se puede quitar, estos Chevron también podemos quitar, y en su lugar, sólo voy a aumentar el tamaño de este zapato y tal vez moverlo ligeramente. Uno puede ser capaz de ralentizar un poco más grande. No me importa que se superponga un poco más aquí. Y además no quiero que esté tocando exactamente el borde inferior del marco. Esto es lo que normalmente llamaría tangente o besos cuando los bordes se encuentran exactamente. Por lo que siempre es mejor recortar un poco más en él o asegurarse de que no lo alinees al borde. Y yo quería solaparme también ahí en la parte superior. Sí, creo que eso funciona muy bien. Y entonces sólo podemos mover estas formas más allá a la izquierda un poco. Por supuesto, necesitamos nuestro texto de venta grande que pueda ser tan ligeramente más grande en este formato encaja bastante bien aquí arriba. Entonces vamos a mover estos elementos distractores como la línea en zigzag fuera del camino. Se puede subir en algún lugar por aquí. Tal vez esta otra línea en zigzag pueda estar aquí abajo. Esta línea chevron aquí puede estar tal vez debajo de la pegatina para que no compita con ella. Podemos colocar esta cruz aquí en la parte inferior, tal vez reducirla hasta un 30%. Esta pequeña cruz puede estar arriba en algún lugar allí. También podemos tener uno más oscuro, tal vez aquí. Y entonces tal vez podamos colocar este círculo aquí en la esquina. Ok, creo que eso se ve bien. Pero lo mejor de tener todas estas tres variaciones en el mismo documento de Photoshop es que siempre podemos volver y hacer pequeños ajustes, mover cosas alrededor, pedir prestados elementos de una versión, moverlo rápidamente al otro, y viceversa. Por lo que trabajar con tableros de arte es definitivamente una gran ventaja a la hora crear banners y las diferentes mutaciones. Pero ahora en el siguiente video, vamos a crear una variación del formato cuadrado, que puede ser utilizado como banner animado. 11. Diseño de los marcos para el banner animado: Así que para empezar, voy a duplicar nuestro formato cuadrado original, que crea un nuevo tablero de arte. Y podemos simplemente cambiar el nombre de éste, enmarcar uno. Y lo principal que quiero cambiar aquí es que sólo necesitamos la primera palabra, grande. Y como sólo tenemos una palabra, podemos hacerla un poco más grande y tenerla tal vez en algún lugar por ahí. Ahora no voy a pasar demasiado tiempo aquí moviendo las cosas por ahí. En cambio, solo voy a duplicar esto y crear el fotograma número dos, que tendrá los otros entrenadores. Por lo que voy a quitar el converso y pegar en la NYC. Esta vez lo voy a rotar en el otro ángulo. Encaja mejor en el formato cuadrado como este. Y tener los textos yendo de la otra manera crea una dinámica interesante. Así que solo escribiré cl usando el mismo tamaño para el texto. Y entonces solo muevo estos otros elementos por ahí, me aseguro de que no estén en el mismo lugar. De lo contrario se sentiría un poco estático. Incluso podemos pedir prestadas algunas de estas otras capas como esta, solo asegúrate de que vaya más abajo en la estructura de la capa y tal vez también reduzca su opacidad. Vamos a mover este chevron lejos de aquí también. Y como dije, asegurándonos de que no tengamos los elementos en el mismo lugar exacto. Esto puede ser probablemente blanco, tal vez solo colóquelo aquí abajo. Y luego vamos a mover éste hacia abajo y tal vez aumentemos el tamaño. Y entonces tal vez podamos simplemente mover este otro círculo hasta aquí solo para llenar ese espacio. Y de esa manera podemos simplemente mover este tal vez más arriba un poco. Ahora nota que el único elemento que guardé en el mismo lugar exacto es la pegatina. Y eso es intencional. Quiero asegurarme de que eso consistente a lo largo de al menos dos fotogramas de toda la animación porque hay un mensaje clave y quiero asegurarme de que llegue al espectador. Pero ahora podemos crear el tercer marco. Así que una vez más, solo dupliqué esto, renombralo esto para enmarcar tres. Aquí, podemos mover hacia abajo el Entrenador Nike. Simplemente lo daré la vuelta en la otra dirección, reduzca su tamaño, lo colocaré en algún lugar ahí abajo. Entonces podemos traer una versión del converso y reducir su tamaño de nuevo, colocarlo en algún lugar aquí en la esquina superior derecha. Primero. En realidad, voy a sacar estas formas también. Así que simplemente ordena un poco antes de colocar la imagen ahí dentro. Ahora podemos volver a moverla. Literalmente solo quiero que el talón y el cordones de los muestren el poquito del logotipo que solo está insinuando qué marca es esta. Y luego podemos escribir grande aquí atrás. Por lo que tenemos gran venta, y esta vez en realidad tendremos espacio para el resto de la copia también para mostrar cuál podemos pedir prestado de esta composición principal. Por lo que sólo seleccionaré ese texto por Comando o Control, pulsando sobre él, luego Comando o Control C para copiar. Vuelve aquí y da click en este lienzo o tablero de arte, y luego Comando o Control V para pegar el texto en. Puede dividir esto en dos líneas también y colocarlo en algún lugar aquí. Ahora aquí, se puede quitar la pegatina. En realidad lo eliminaré, y en cambio, voy a hacer este texto más grande e incluso la gran venta puede ser más grande. Este último marco es realmente sobre el texto. Nuevamente, no quiero tener ningún elemento que esté exactamente en la misma posición que en el tablero de arte anterior. Por lo que voy a asegurarme de que movemos las cosas para que la animación sea más interesante. Esta cruz tiene que ir a otro lugar también. Tal vez aquí arriba. Podemos tener esta línea ondulada, tal vez aquí abajo. Y en lugar de tener el zigzag en la misma posición, solo moveré eso aquí arriba y lo cambiaré al color azul usando el comando Alt u Option Backspace, y luego este círculo se puede quitar. No creo que realmente lo necesitemos en este caso. A lo mejor sólo trae de vuelta este círculo de la otra composición y pega eso en algún lugar de la esquina aquí. Y por último, tal vez éste pueda venir aquí también. Ahora estas formas sobrantes sólo podemos eliminar del panel de capas. Y si alejamos el zoom, ahora podemos ver los tres fotogramas uno al lado del otro. Siento que va a funcionar muy bien como una animación. Por lo que tendrá un mensaje claro. Vela grande hasta el 50%. Y luego el marco final solo pone toda la frase unida. Gran venta en todos los entrenadores. 12. Convertir marcos en objetos inteligentes: Siempre que creo banners animados, siempre me gusta mantener el color general de cada fotograma bastante similar porque de lo contrario podrías terminar creando demasiadas transiciones carnosas entre ellos. Así que imagina si tuviera un marco con fondo azul, el siguiente blanco, y luego el tercero amarillo. Podría ser una muy atención buscando banner a través esto será un poco más sutil pero aún interesante de mirar. Por supuesto, esto siempre es algo que hay que discutir con el cliente. Tal vez quieran ir por esa mirada más carnosa por sus pancartas. Pero ahora que tenemos los tres cuadros listos, hay una cosa más que tenemos que hacer aquí, y eso es convertir estos en objetos inteligentes. Esto sólo va a hacer que sea más fácil moverlos a un documento separado. Porque a pesar de que los diseñamos en el mismo documento, para poder exportarlos como un banner animado, tendrá que estar en otro documento. Así que hagamos esto ahora. Haré clic derecho en el marco uno y Convert to Smart Object. Haz lo mismo por el marco dos y también haz lo mismo para el marco tres. Ahora vamos a crear ese nuevo archivo de documento nuevo. Y voy a configurar esto como 600 por 600 pixeles. Esta vez no necesito la opción de tableros de arte, así que tengo eso apagado y luego creé. Ahora volviendo al documento anterior, puedo seleccionar el marco 1 primero, copiarlo, Comando o Control C saltó a este documento y luego pegue con comando o control V como nuestro marco uno. Ahora podemos incluso eliminar la capa de fondo, solo seleccionarla y presionar Retroceso. Entonces otra vez, salta aquí, copia el número de fotograma para pegar, y luego copie el fotograma número tres y pega. Y no olvidemos guardar este documento también. Voy a llamarlo banner animado. 13. Opciones de exportación: Ahora es por fin el momento de crear nuestra animación para la que vamos a abrir el panel de línea de tiempo. Y dentro de eso, elija la opción Animación de fotogramas y haga clic en el botón. Esto va a crear un marco por defecto, pero podemos ir al menú del panel y elegir make frames a partir de capas. De esta manera tendremos cada una de nuestras capas configuradas como marcos rectos de una Y podemos usar la tecla Shift para seleccionar las tres. Podemos cambiar la duración de todos ellos a tal vez 1 segundo. Pero entonces selectivamente voy a cambiar el tercero a dos segundos. Ahora, si tenemos la opción de bucle establecida para siempre, eso significa que va a seguir repitiéndose, lo cual es perfecto para nosotros. Así que vamos a probar esto. Voy a tocarlo. Siento que el 1 segundo podría ser un poco demasiado rápido al principio para los dos primeros cuadros. Así que para frenar un poco las cosas, puedo elegir otra y tal vez establecer esto a 1.5 o así otro 1.5. Ahora vamos a probarlo. Sí, creo que esto ya está un poco mejor. Sí, creo que eso funciona. Por lo que ahora que tenemos nuestra configuración de línea de tiempo, solo tenemos que ir al menú Archivo y elegir Exportar. Guardar para Web, y escuchar de los presets, asegúrate de elegir GIF 128, la suciedad. Esto te va a dar la mejor calidad banner animado, pero también va a producir el tamaño de archivo más alto. Siempre se puede ver el tamaño final aquí en la parte inferior izquierda. Se trata de un 187 kilobytes, que se considera bastante alto para un banner, idealmente, quieres mantenerlo alrededor de 50 K max, un 100 K. Nuevamente, depende del cliente y sus especificaciones o de los sitios asociados que trabajan. Entonces la forma en que siempre puedes reducir el tamaño del archivo es ajustar la configuración aquí, aumentar cosas como la opción con pérdidas va a reducir la calidad de tus marcos. Pero a su vez, también reducirá el tamaño del archivo. Y otra opción que puedes usar para reducir el tamaño del archivo es la cantidad de colores. Entonces si se reduce eso a, digamos 64, ahora ya estamos abajo a un 100 K. Por supuesto, siempre vale la pena revisar todos los fotogramas solo para asegurarse que se vean aceptables. Creo que se ven bien, pero en realidad voy a volver al ajuste de alta calidad. Por lo que elimino la función con pérdidas y subo hasta 128 colores. Incluso podría ir a 256 colores, pero eso hará que el tamaño del archivo sea aún más grande. Pero sólo para la demostración ahora, voy a utilizar esta máxima calidad y voy hacer clic en Guardar y guardarlo en mi carpeta de proyecto. Aquí está la pancarta animada. Sólo podemos echar un vistazo al archivo GIF que guardamos de Photoshop. Creo que se ve muy bien. Y ahora no olvidemos guardar también los banners estáticos, para lo cual voy a saltar de nuevo al documento original y voy a ir al menú Archivo y elijo Exportar, Exportar Como esta vez, lo que me dará la opción de exportar los tres tableros de arte individualmente. Observe que los objetos inteligentes que tenemos en la parte inferior, que utilizamos para nuestros marcos para el banner animado ni siquiera aparecen aquí porque no están en tableros de arte. Pero estos todos podemos seleccionar y cambiar al mismo tiempo a JPEG, que es el formato de archivo recomendado para banners estáticos u opcionalmente, también puedes usar PNG. Y de nuevo, verá los respectivos tamaños de archivo aquí en el lado izquierdo. Una vez más, si puedes mantener estos más cerca de 50 a un 100 K, eso es más ideal. Actualmente todos son demasiado grandes, por lo que tendremos que hacer algo al respecto. Una característica útil en caso de que esté trabajando con PNG es activar la función de archivo más pequeño. Esto no va a afectar demasiado la calidad, pero definitivamente hizo que el tamaño del archivo sea más pequeño. Así que sólo voy a exportarlos así. Y de nuevo, podemos echar un vistazo a estos exportar el PNG es, así que aquí está la versión de paisaje, ahí está la versión retrato, y ahí está la plaza. Ahora hay una opción adicional que vale la pena mencionar en el cuadro de diálogo Exportar como, y esa es la función de escala que por defecto exportará el tamaño actual que establezca para sus tableros de arte. Pero en caso de que necesites crear versiones para tal vez pantallas retina, necesitas exportar estas dos veces más grandes. Entonces puedes hacerlo fácilmente haciendo clic en el signo más aquí y cambiando el tamaño dos veces dos. De esta manera, debido a que tenemos tres imágenes y dos tamaños diferentes, sería una exportación por lotes de seis imágenes. Pero como ya creamos las versiones de tamaño original, solo podemos quitar eso y mantener las versiones de doble tamaño, que una vez que haga clic en Exportar y elijo el destino, se generarán también con los nombre de archivo que muestran que estas son las versiones de doble tamaño. Entonces por ejemplo, con el tamaño cuadrado, tenemos el original y tenemos la versión de alta resolución más grande. Y es por eso que era tan importante trabajar con las formas vectoriales y también capas de Imagen de Objeto Inteligente de alta resolución. Por lo que nos permite exportar fácilmente doble o triple el tamaño original de los banners. Y eso resume prácticamente todo lo que necesitas saber sobre producción de banners tanto estáticos como animados usando la combinación de Photoshop e Illustrator. 14. Conclusión: Bien hecho para terminar este curso. Espero que te hayas divertido tanto pasándolo como yo lo tuve grabando. Y claro, no te olvides del proyecto de clase. Porque recuerda, la práctica hace la perfección. No puedo esperar a ver tu trabajo, así que asegúrate de presentarlo. Y en caso de que te guste este curso, y te gustaría aprender más de mí, entonces hay muchos otros cursos que puedes encontrar aquí. Ve y compruébalos ya. No puedo esperar a conocerte en la siguiente.