UNIVERSIDAD TÉCNICA DE MACHALA

FACULTAD DE INGENIERÍA CIVIL

LABORATORIO 02 DE HARDWARE Y SOFTWARE

GUÍA DE PRÁCTICA DE ASIGNATURA

NÚMERO DE PRÁCTICA: 3.3-03

NOMBRE DE LA PRÁCTICA: Edició n de banners, publicidad, interfaces de software con
Photoshop.

1. DATOS INFORMATIVOS
CARRERA: TECNOLOGÍAS DE LA INFORMACIÓ N
ASIGNATURA: HERRAMIENTAS PARA EL DISEÑ O GRÁ FICO
CICLO/NIVEL: TERCERO
FECHA: 20/08/2020

2. FUNDAMENTACIÓN
Adobe Photoshop es un editor de grá ficos rasterizados desarrollado por Adobe Systems
Incorporated. Usado principalmente para el retoque de fotografías y grá ficos, su nombre
en españ ol significa literalmente "taller de fotos". Es líder mundial del mercado de las
aplicaciones de edició n de imá genes y domina este sector de tal manera que su nombre es
ampliamente empleado como sinó nimo para la edició n de imá genes en general

Un editor de grá ficos rasterizados es una aplicació n que permite al usuario crear y editar
imá genes de grá ficos rasterizados de forma interactiva y almacenarlas en la computadora
en un formato de archivo grá fico, como JPEG, PNG, GIF y TIFF.

Para ver imá genes, generalmente es preferible usar un visor de imá genes en vez de un
editor de grá ficos rasterizados.

Algunos editores está n diseñ ados específicamente para la edició n de imá genes
fotorrealísticas, como el popular Adobe Photoshop, mientras que otros está n má s
orientados a las ilustraciones artísticas, como Adobe Fireworks.

Con frecuencia los editores de grá ficos vectoriales y los editores de grá ficos rasterizados
contrastan, y sus características se complementan. Los editores de grá ficos vectoriales son
mejores para diseñ o grá fico, diseñ o de planos, tipografía, logotipos, ilustraciones
artísticas, ilustraciones técnicas, diagramació n y diagramas de flujo. Los editores de
grá ficos rasterizados son má s adecuados para manipulació n fotográ fica, ilustraciones
fotorrealistas, collage, e ilustraciones dibujadas a mano usando una tableta digitalizadora.

Muchos ilustradores actuales usan Corel Photo-Paint y Adobe Photoshop para crear toda
clase de ilustraciones. Las versiones recientes de editores de grá ficos rasterizados, como
GIMP y Photoshop soportan herramientas de tipo vector y los editores de grá ficos
vectoriales como: CorelDRAW, Adobe Illustrator, Xara Xtreme, Adobe Fireworks,
Inkscape o SK1 está n adoptando poco a poco herramientas y técnicas que alguna vez
fueron exclusivas de los editores de grá ficos rasterizados

1
 Dentro del diseñ o de sistemas de informació n vamos a necesitar usar ilustraciones
(grá ficos) que nos permitan presentar de una forma má s amigable las interfaces para los
usuarios, es por esto que es necesario conocer Illustrator para poder crear dichos íconos.

3. RESULTADOS DE APRENDIZAJE
Edita imá genes de mapas de bits.

4. OBJETIVOS ESPECÍFICOS
Elaborar ilustraciones utilizando la herramienta de Photoshop para utilizarlos dentro de
las interfaces de los sistemas de informació n que nos permitan tener un ambiente má s
amigable para el usuario.

5. EQUIPOS, MATERIALES E INSUMOS

 Computadora de escritorio.
 Internet
 Adobe Photoshop.

6. PROCEDIMIENTO
Para poder aplicar los conceptos descritos en este laboratorio es necesario que el
estudiante utilice los conceptos y herramientas vistas en clase, crear los objetos
presentados a continuació n. El trabajo debe ser presentado tomando en consideració n lo
siguiente:
1. El trabajo es individual, toda copia o fraude se considerará n con nota 0.
2. Crear archivos por cada ejercicio, uno en formato .psd y otro en jpg, cuyo nombre
debe incluir el nombre del estudiante, Ejemplo:
Practica1_EstudianteApellido_EstudianteNombre.
3. Debe entregar en digital un informe completo con los pasos que realizó para
desarrollar cada uno de los ejercicios (1 solo documento) en el formato de la guía
de prá ctica del estudiante.
4. Se evaluará uso de la herramienta, creatividad y presentació n.

Ejercicio No. 1
Primero viene la tarea má s complicada. Esta es la selecció n de las fotografías a
utilizar. No siempre tenemos imá genes posando para cualquier ocasió n, por lo que
nos podemos ayudar con algú n banco de imá genes para una de ellas. En este caso,
se tomó 2 fotografías de un banco fotográ fico (usted debe elegir las imá genes,
similares a las mostradas a continuació n).

2
1º Paso. Abra un documento de 10cm. x 15cm. (o el tamañ o de fotografía que se
desea segú n el portarretratos). El mismo deberá ser con fondo negro. Luego se
crea una nueva capa (Ctrl+J) y se la denominó “original1". En ella se coloca la
imagen horizontal. Acto siguiente, se repite el proceso de creació n de capa, a la que
se la llama “original2" y se coloca la imagen vertical.

2º Paso. Lo que se hace a continuació n es “Añ adir una má scara vectorial” a la capa
“original2". ¿Có mo? Tal como se ve en la imagen siguiente:

3º Paso. Lo que a continuació n se realiza es seleccionar la herramienta de

degradado. Una vez hecho esto, vamos al panel de propiedades del degradado
(ubicado en la parte superior) y seleccione un degradado lineal, el cual de la punta
izquierda lleva negro al 100% de opacidad y del lado derecho, negro al 0% de
opacidad. Ya teniendo lista la herramienta para utilizarla, se traza una línea de
arriba hacia abajo sobre la capa “original2" como lo muestra la siguiente imagen

3
(para tener una noció n de ubicació n de la fotografía que se encuentra debajo,
podemos variar momentá neamente la opacidad de la capa “original2" a un 50%):

Si volvemos a 100% de opacidad la capa “original2", obtendremos como resultado

la fusió n de las 2 imá genes.

4
Esto es lo que se llama fusió n o montaje de 2 imá genes. Y tenemos gran parte del
trabajo realizado.

4º Paso. Ahora corresponde darle un toque artístico a esta imagen. Para esto, ir al
menú superior, en Capas > Nueva Capa de Ajuste > Tono/Saturació n. Se abre una
ventana a la que le debe dar aceptar y luego aparece una nueva ventana en donde
se puede ajustar los valores de tono, saturació n y luminosidad sin afectar a las
capas originales. Aquí mismo se marca la casilla “Colorear” y podemos comenzar a
jugar con los valores de tono y saturació n (Luminosidad se lo deja como está ).

Ya podemos decir que tenemos el trabajo terminado. Es un excelente fotomontaje

de una escena romá ntica. Y si lo dejamos así, ya es una buena composició n.

5º Paso. Para darle un aspecto de poster cinematográ fico. Debemos agregar un

poco de texto, un pincel para las letras manuscritas, pá jaros, rejas y formas y un
recorte final de otro poster cinematográ fico para el pie (lo ideal es crearlo uno,
pero queda a criterio de cada uno). El resultado fue el siguiente:

5
6
Ejercicio No. 2
Similar a la prá ctica anterior, seleccionar una temá tica en particular, de acuerdo a
una película de su preferencia, con esa temá tica crear un poster utilizando Adobe
phtoshop que incluya su imagen dentro del poster (utilizar una foto de usted). A
continuació n, presento algunos ejemplos de lo que se solicita, para que sirva só lo
de referencia.

7
 Determinar ¿Qué consideraciones tomó para que sea un buen diseñ o? ¿Qué
dificultades tuvo? ¿Có mo podemos comprobar que el diseñ o representa la mejor
alternativa de amigabilidad?

7. RESULTADOS ESPERADOS
Se espera que los estudiantes puedan crear ilustraciones utilizando Photoshop. La
evidencia son capturas de pantalla con los resultados y las explicaciones de dichos
resultados.

8
 3

8. BIBLIOGRAFÍA
 MEDIAactive (2014). Aprender Photoshop CC con 100 ejercicios prá cticos. Marcombo.
(BIC01101)
ANEXOS