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.