Download adobe photoshop – sesión 7

2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
ADOBE PHOTOSHOP – SESIÓN 7
En esta sesión se van a realizar pequeños ejercicios para poner en
práctica todo lo aprendido a lo largo de las demás sesiones. Pero no
todo será recordar. Se indagará más en algunas funciones de algunas
herramientas y aprenderemos alguna herramienta de ajuste más, así
como modos de fusión de capa.
Para concluir el taller, puedes profundizar en los aspectos de
Photoshop que más te han llamado la atención o más útiles te son,
haciendo ejercicios pasados o proponiendo tú mismo tus propias
actividades sobre el tema en el mismo taller.
SESIÓN 7 - ¿QUÉ VAS A APRENDER?
•
•
•
•
•
•
Transformar capas: distorsión
Modo de fusión multiplicar
Ajuste: Equilibrio de color y brillo/contraste
Concepto: Tamaño de lienzo, rotar lienzo
Estilos/Efectos de capa
Canales: RGB, CMYK
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
1
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
ACTIVIDAD GUIADA
Actividad 1 – Fotomontaje
Problema:
Abre el archivo “calum.jpg” en Photoshop. Es una foto de una pared de
la Casa del Alumno con algunos carteles de talleres y actividades. Ahora abre
el archivo “carteltaller.jpg”. Es una réplica del cartel que diseñaste en la sesión
4. El objetivo de este ejercicio es intentar insertar el cartel en la imagen para
que parezca que está colgado en la pared.
Observa la imagen inferior de las dos que hay. El cartel está insertado
en la pared. No es un fotomontaje exacto, pero con el nivel que hemos
adquirido en este taller, será un resultado suficiente.
Solución paso a paso:
Con lo que hemos aprendido hasta ahora, ya deberíamos saber insertar
la imagen “carteltaller.jpg” dentro de “calum.jpg” (recuerda Copiar-Pegar), y
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
2
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
también deberíamos saber transformar la nueva capa en la que esté insertado
el cartel para variar su tamaño y obtener el tamaño deseado. Realiza estos
movimientos.
¿Cómo situamos la imagen en perspectiva para que parezca que está en
la pared?
Una vez escalada la imagen, utilizaremos otro tipo de transformación, la
distorsión. La distorsión nos permite mover los puntos de flexión de una
manera completamente libre. Para entrar en el modo de distorsión, pulsa
“Edición>Transformar>Distorsión” en el menú principal.
Fíjate que ahora los puntos de flexión se desplazan de manera diferente
y puedes crear un efecto perspectiva. Intenta desplazar los puntos de tal modo
que las esquinas del cartel estén situadas como si el cartel estuviera en la
pared.
Aceptamos la modificación y ya hemos logrado realizar la actividad.
Piensa que el montaje no ha sido perfecto. El cartel en la realidad no sería tan
recto, y no está siendo influenciado por la iluminación del entorno como los
demás carteles, pero hemos realizado el primer paso para realizar este tipo de
acciones.
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
3
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
ACTIVIDAD PROPUESTA
Actividad 2 – Un proyector
Problema:
Abre la imagen “pared.jpg” de la sesión 7 y la imagen “coche.jpg” de la
sesión 3. Sitúa la imagen del coche sobre la pared como si fuera una fotografía
que se reproduce en la pared con un proyector.
Si estás demasiado perdido, recuerda que la función protagonista de
este ejercicio será la de “Edición>Transformar>Distorsión”. Además de esto,
con el fin de adquirir más realismo, también se ha hecho uso de opacidad y
fusión de capas.
La capa del coche está fusionada en modo “sobreexponer color”, al 50%
de opacidad.
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
4
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
ACTIVIDAD GUIADA
Actividad 3 – Modo de fusión multiplicar para poder pintar
Problema:
La UPV quiere introducir un pintoresco logo en su página Web. El
objetivo de este ejercicio es pintar el logo “logowebupv.jpg” para que luzca
como la imagen que hay a continuación.
Solución paso a paso:
La principal herramienta de relleno en Photoshop es el Cubo
.
Recuerda que esta herramienta es muy fácil de utilizar. Intenta realizar la
actividad con el Cubo. ¿Puedes pintar algo tan complicado como las cintas
en las que pone “ex technica” y “progressio”? No es tan fácil con el cubo.
Deshaz todos los movimientos realizados y vuelve a la imagen inicial.
Vamos a intentar colorearla utilizando una capa para pintura en un modo de
fusión Multiplicar. Si recuerdas sesiones anteriores, se mencionó el modo de
fusión multiplicar como un modo que da preferencia a lo oscuro sobre lo claro.
Utilizaremos este hecho para que las líneas negras del logo queden por
encima de nuestro color aunque el color esté situado jerárquicamente
sobre ellas.
Crea una nueva capa vacía llamada “Color”. A continuación, escoge un
modo de fusión “Multiplicar”. Selecciona la capa “Color” para trabajar en ella.
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
5
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
Realiza una selección con el Marco Elíptico
para seleccionar el
sector circular de la imagen que vamos a pintar en verde. Si no realizas la
selección perfecta, recuerda que puedes hacer clic derecho en la selección
y escoger “transformar selección” para editarla.
Una vez realizada la selección, píntala de verde con la herramienta Cubo
y observa los resultados:
Los trazos negros que hay en la capa “Fondo” que está debajo de la
capa “Color” siguen por encima del color, y así hemos logrado pintar de verde
el logo de una manera perfecta.
Sigue pintando el logo con los colores propuestos utilizando la misma
técnica. Ésta técnica es muy útil y utilizada a la hora de colorear dibujos en
blanco y negro para ser utilizados en páginas Web y comics.
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
6
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
ACTIVIDAD GUIADA
Actividad 4 – Equilibrio de color. Brillo y contraste
Problema:
La fotografía “desequilibrada.jpg” ha salido con un exceso de Brillo y
con un exceso de color rojo debido a problemas de la cámara fotográfica.
Utiliza el Equilibrio de color y la herramienta de ajuste Brillo/Contraste para
calibrar la imagen hasta que luzca lo mejor posible. La imagen es esta:
Solución paso a paso:
Abre la imagen “desequilibrada.jpg” en Photoshop. Una vez abierta,
procedamos a compensar ese exceso de rojo que presenta esta imagen. Para
ello haremos uso de la herramienta de ajuste “Equilibrio de color”. Esta
función de Photoshop permite incrementar y disminuir los niveles de los colores
en la imagen. Para acceder a su ventana, pulsa la opción
“Imagen>Ajustes>Equilibrio de color” en el menú principal o simplemente
pulsa “Control+B”. Aparecerá la ventana de Equilibrio de color.
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
7
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
Observa los valores de la derecha: rojo, verde y azul. Representan a los
valores RGB (red, green, blue), que son los tres canales de los que se
compone una imagen digital. A la izquierda, sus opuestos, el Cian RGB, el
Magenta RGB y el Yellow RGB.
Sabido esto, para compensar el exceso de rojo de la imagen, sólo
tendremos que desplazar la barra Cian/Rojo hacia la izquierda para que el nivel
de rojo sea negativo. Calibra la imagen hasta que la veas compensada, si te
excedes, se verá azulada. Observa la imagen de arriba. Pulsa OK.
Ahora ya no es rojiza pero sigue teniendo demasiado brillo. Photoshop
dispone de un controlador básico de brillo y contraste. Sólo tenemos que abrirlo
y reducir ligeramente el brillo hasta que la foto quede bien.
Para acceder al controlador de brillo y contraste tenemos que pulsar la
opción “Imagen>Ajustes>Brillo/Contraste” del menú. Se abrirá la ventana:
Como puedes observar, esta ventana permite cambiar el brillo y el
contraste. Para obtener una imagen más “oscura”, reduce el brillo hasta que la
imagen esté compensada. Después, pulsa OK para visualizar el resultado del
arreglo de la imagen que estaba desequilibrada.
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
8
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
CONCEPTOS
El lienzo
En Photoshop, llamamos lienzo a la ventana sobre la que está posado
un archivo. Sabemos aumentar o reducir el tamaño de la imagen completa,
pero hay que saber que también podemos aumentar el tamaño del lienzo,
independientemente de las imágenes que contenga. Para cambiar el tamaño
del lienzo acudimos a “Imagen>Tamaño de lienzo” y aparecerá la ventana
correspondiente:
Podemos decir cuáles queremos que sean las nuevas medidas del
lienzo. Además podemos poner un ancla. Esto sirve para que la imagen solo
crezca o mengüe en los sentidos que queramos. También podemos declarar el
color que tomará la extensión del lienzo en caso de aumentar su tamaño.
Puedes crear una imagen nueva y probar estas funciones.
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
9
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
Para rotar la imagen por completo, podemos acudir a la opción
“Imagen>Rotar Lienzo”. Como se puede leer, podemos voltear la imagen en
todos los sentidos. La opción “Arbitrario” se utiliza para indicar manualmente un
valor en grados para que la imagen rote.
Esto puede servirnos para girar en sentido correcto algunas fotografías
verticales que se encuentran tumbadas en horizontal, por ejemplo.
ACTIVIDAD GUIADA
Actividad 5 – Botón para página Web
Problema:
Diseña en Photoshop el siguiente botón de menú para una posible
página Web. Es un botón para entrar en la sección de “Inicio”. Sus medidas son
150x40 píxeles. Se ha utilizado haciendo uso de los estilos de capa “Inglete y
relieve”, “Luz exterior” y “Sombra paralela”.
Solución paso a paso:
Comenzaremos creando una nueva imagen en color RGB de 150x40
píxeles con fondo transparente, no blanco. Como la imagen es para Web,
recuerda que la resolución píxeles/pulgada ha de ser de 72. Una vez creada la
imagen, rellenamos el fondo del color deseado para el botón, como por
ejemplo, el azul escogido o uno que se le parezca.
Para dar esa redondez, en este caso, hemos decidido seleccionar con el
Marco Elíptico
una selección similar a la siguiente:
10
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
Observa que para realizar esta selección deberás crear una elipse tan
grande que saldrá del lienzo, pero no te preocupes, como ves, esto está
permitido. Una vez tenemos seleccionada la zona que será el fondo del
botón, tenemos que eliminar la zona sobrante. Para ello tendremos que
invertir la selección, es decir, que se seleccione exactamente el área que en
este momento no está seleccionada.
Para invertir la selección acudimos a la opción “Selección>Invertir” del
menú principal. Una vez invertida la selección, podemos observar que la línea
discontinua ahora selecciona todo lo contrario a antes de pulsar la opción.
Pulsa la tecla Suprimir del teclado para borrar la zona seleccionada y
conseguir una imagen de este aspecto:
Es hora de introducir efectos o estilos de capa. El menú de efectos de
capa de Photoshop 5.5 es bastante distinto al de Photoshop CS. Los efectos de
capa son efectos que podemos aplicar a una capa y son bastante intuitivos:
sólo leer su nombre ya nos da una idea de para qué sirve el efecto y sus
atributos son también muy claros. Para acceder al menú de efectos para cierta
capa tenemos que hacer clic derecho en dicha capa en la ventana de Capas
y pulsar después la opción “Efectos…”. Si nos encontramos en Photoshop
5.5, aparecerá esta ventana:
A grandes rasgos, los puntos a tener en cuenta sobre esta ventana son:
1) Efecto: El menú desplegable que indica arriba “Sombra paralela” es el
efecto aplicar. Para visualizar los efectos disponibles despliega el menú
11
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
y accederás a los atributos de cada efecto. “Sombra paralela” es un
efecto.
2) Opción “Aplicar”: A la derecha del menú desplegable podemos ver la
opción Aplicar. Si activamos esta opción, el efecto se aplicará y si no la
activamos, podremos dejará de aplicarse. Cuando apliques un efecto,
asegúrate de que esta opción está activada.
3) Atributos del efecto: Las demás opciones situadas debajo del menú
desplegable son opciones asignadas al efecto que esté seleccionado en
ese momento. En el caso de la imagen superior, podemos observar los
atributos del efecto “Sombra paralela”.
Ahora que entendemos qué es un efecto o estilo de capa, vamos a
aplicar una “Sombra paralela” a nuestra capa del botón. Accede al menú de
“Sombra Paralela” de esa capa si es que no estabas ya en él.
Al aplicar “Sombra paralela” vemos como una sombra se proyecta bajo
nuestro botón. Puedes copiar los atributos de la imagen superior para la
sombra de tu botón. Si quieres conocer más sus atributos, juega con ellos para
examinar los cambios que producen en la sombra. Pulsamos OK para que se
apliquen los cambios.
El efecto de “Inglete” será traducido en versiones posteriores de
Photoshop como “Bisel”. El inglete o bisel es muy utilizado para realizar
gráficos de botones porque produce un efecto de relieve en la figura. Despliega
el menú de efectos de capa en la misma capa para probar lo que ofrece este
efecto:
12
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
Puedes copiar las opciones de la imagen de arriba si quieres que el bisel
sea idéntico al del ejemplo. Observa que el bisel proporciona un efecto de
relieve con su luz y sombra. Puedes escoger el color de la luz y el color de la
sombra pinchando en el cuadro (blanco o negro) que hay a la derecha de cada
submenú. En cuanto al inglete, observa que puedes modificar la profundidad,
que sería equivalente a la “altura” del relieve, y también su desenfoque.
Observa que a menos desenfoque, más liso será el relieve aplicado. En
nuestro caso, el bisel está muy definido, y eso significa que hemos aplicado un
desenfoque muy pequeño. Pulsa OK para aplicar los cambios cuando termines.
Observa que los efectos se aplican pero que puedes acceder a la
ventana de efectos para modificar sus valores cuantas veces quieras.
Ahora insertamos el texto del botón. Para ello, introduce un texto en
color blanco del tamaño que veas adecuado. Si quieres realizarlo más parecido
al del ejemplo, la fuente utilizada ha sido Arial en Negrita y Cursiva.
El brillo azul que presentan las letras del botón que es nuestro objetivo
nos da a ver que las capas de Texto también pueden tener efectos de capa.
13
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
Visita los efectos de capa de la nueva capa de Texto para aplicarle un efecto
de “Luz exterior”:
Los valores que pueden editarse de “Luz exterior” son menos y más
obvios. El color del efecto será ahora un factor muy importante. Antes hemos
trabajado solo con sombras y las sombras tienen a ser negras. En cambio, las
luces se presentan en colores más variados. En este caso concreto, hemos
seleccionado una luz azul pálido, un color que se acerca mucho al CYAN RGB.
Aplica este efecto al texto para finalizar nuestro botón de Web.
Cuestiones:
El botón creado no es cuadrado. ¿En qué formato/s habrá que guardar
este botón para que sea visible en Web con la forma que le hemos dado?
¿Sería recomendable guardar una copia PSD o TIFF de este botón si
queremos realizar muchos botones similares para la misma Web?
14
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
ACTIVIDAD PROPUESTA
Actividad 6 – Botones de máquina recreativa
Problema:
A partir de la experiencia obtenida en el ejercicio anterior, intenta crear
desde cero en Photoshop estos dos botones de máquina recreativa. Sigue las
pistas para facilitar el diseño de los botones:
Pistas:
Número de capas: Cuatro. Dos por botón.
Efectos de las capas: Sombra paralela. Inglete y relieve.
Inglete y relieve: Bastante desenfocado. Muy profundo.
Consejo: Aprovecha la duplicación de capas y la herramienta de ajuste
“tono/saturación” para realizar el segundo botón a partir del primero.
15
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
CONCEPTOS
Canales en Photoshop
Canales RGB
Como ya sabrás, todos los colores de una imagen digital puedes
producirse con la mezcla de los colores RGB (Red, Green, Blue). Cuando
utilizamos en Photoshop un modo de color RGB, sabemos que nuestra imagen
está compuesta por una gama de colores que tienen cierta cantidad de rojo,
verde y azul. Adobe Photoshop nos permite visualizar esos tres canales y
extraer una imagen que indica cuánta cantidad de cada uno de esos tres
colores está utilizando nuestra imagen.
Contiguamente a la ventana de Capas, hay una pestaña llamada
“Canales”. Abre la imagen “canalesRGB.jpg” para entender los canales RGB:
Como ves en esta imagen, están presentes los 6 colores RGB y
variaciones de los mismos. Además, hay una fotografía con mezcla de colores
más compleja para entender mejor el hecho. Accede a la ventana de canales
de esta imagen:
16
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
Podemos visualizar solamente un canal si lo seleccionamos únicamente
(igual que las capas). Selecciona únicamente el canal “Rojo” para ver en qué
se convierte nuestra imagen. Una vez seleccionado debería aparecer así la
ventana de canales:
Y la imagen en sí, se visualizará de la siguiente manera:
17
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
Esta imagen representa los niveles de ROJO que tiene la imagen
“canalesRGB.jpg”. Cuanto más blanco sea un píxel, más rojo habrá en él, y
cuanto más negro sea, habrá menos. Esto significa, evidentemente, que los
píxels completamente blancos tienen la cantidad máxima de RED RGB y que
los píxeles completamente negros no tienen nada de RED RGB.
Los colores presentes en esta imagen con cantidad máxima de rojo
son el rojo RGB (obviamente), el amarillo RGB (que es mezcla de rojo y verde),
el magenta RGB (que es mezcla de rojo y azul) y el blanco (que es mezcla de
rojo, azul y verde). Los colores que no tienen nada de rojo son los colores
RGB que no lo utilizan como el verde RGB (que es únicamente verde), el cian
RGB (que es mezcla de azul y verde) y el azul RGB (que es azul únicamente).
Ahora sabes dónde visualizar los canales RGB de las imágenes. Recuerda
que el color Negro no tiene nada de rojo, azul y verde; que el color blanco
tiene cantidad máxima de rojo, azul y verde y que cualquier tono de gris
se produce cuando el rojo, el azul y el verde se aplican por igual sin llegar
a ser blanco o negro puro.
Canales CMYK:
Abre la imagen “canalesCMYK.jpg” en Photoshop y echa un vistazo a la
opción “Imagen>Modo” en el menú principal. Observa que el modo de esta
imagen no es RGB, sino CMYK. Los colores no presentan las mismas
características en luz que en pigmento. El modo CMYK está compuesto por
canales de colores representables por una impresora, para realizar trabajos
que se presentarán en papel, por ejemplo. Los canales CMYK son Cyan (cian),
Magenta (magenta), Yellow (amarillo) y K es como se llama al negro de la
impresora. Abre la imagen y observa que es así:
18
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
Ojo con los canales CMYK. Al contrario que en el modo RGB, el color
que aparecerá será más negro cuanta más mezcla de ese color haya en la
imagen. Selecciona el canal “negro”:
Observa el cambio. Ahora lo negro se ve negro porque la cantidad de
negro es máxima. Visualiza los demás canales para observar este hecho con
todos los colores.
19
Universidad Politécnica de Valencia y Cursos de Formación Postgrado
2ª Edición Talleres Informáticos Casa del Alumno UPV
Adobe Photoshop. Nivel: Iniciación. Sesión 7. Extra
Canales CMYK y RGB
20
Universidad Politécnica de Valencia y Cursos de Formación Postgrado