Este documento presenta una introducción a Photoshop e ImageReady. Explica los conceptos básicos de trabajar con imágenes de mapa de bits y gráficos vectoriales, la resolución de imágenes y cómo afecta el tamaño de archivo. También cubre temas como ajustes de color y tono, filtros, plugins, optimización de imágenes para la web y una breve historia de Photoshop.
2. CONTENIDO DE LA PRESENTACION
• Que es Photoshop e ImageReady.
• Trabajar con imágenes.
• Todo sobre la resolución.
• Que contienen las imágenes - ajustes de color y tono.
• Retoque y manipulación digital de imágenes.
• Filtros y plugins.
• Photoshop en la web-Acciones
• Sobre la historia de Photoshop.
¿Es necesario aprender sobre Photoshop en Ingeniería de Sistemas?¿Es necesario aprender sobre Photoshop en Ingeniería de Sistemas?
Saber es poder; el conocimiento otorga al que lo posee
una ventaja competitiva.
3. Que es Photoshop e ImageReady
Introducción
• Es una de las mas poderosas herramientas para la edición y
creación de imágenes.
• Photoshop proporciona un entorno de trabajo coherente con
otras aplicaciones de Adobe y Macromedia*, entre las que se
incluyen, Adobe Premiere, Adobe After Effects, Flash,
Dreamweaver entre otras.
• No es un programa de uso exclusivo para retoque fotográfico,
también, es usado para diseño grafico-publicitario, diseño
arquitectónico, diseño Web, edición de video, fotometrismo,
grafistas e impresores.
* Para agosto de 2005 Adobe System adquirió todas las acciones de Macromedia y
desarrollo interfaces coherentes entre sus distintas aplicaciones.
4. EL ESPACIO DE TRABAJO
• El área de trabajo de Photoshop e ImageReady se ha
organizado para que pueda centrarse en la creación y edición
de imágenes.
Barra de Menús
Barra de Opciones
Cuadro de Herramientas
Paletas
Área Activa de la Imagen
Área de Paletas
5. TRABAJAR CON IMÁGENES DE
MAPA DE BITS Y G. VECTORIALES
• Los gráficos de ordenador se dividen en dos categorías
principales:
– Imágenes de Mapa de Bits
– Gráficos Vectoriales.
• En Photoshop se pueden trabajar con ambos tipos de
gráficos.
• Comprender la diferencias entre estas dos categorías permite
la creación, edición e importación de ilustraciones.
6. LOS GRÁFICOS VECTORIALES
• Son compuestas de líneas y curvas definidas por objetos
matemáticos denominados vectores (ecuaciones
paramétricas), cuyas características geométricas describen
los gráficos.
• Todos los vectores quedan expresados por su definición
matemática con:
– Una posición especifica
– Un contorno variable de grosor
– Un Relleno
• Se pueden mover, redimensionar o cambiar el color de una
línea sin que el grafico pierda calidad pues proviene de
cálculos matemáticos.
7. Los Gráficos Vectoriales
• Su definición es nítida, exacta y clara.
• No dependen de la resolución, es decir, se pueden escalar en
cualquier tamaño e imprimir en cualquier resolución.
• Los gráficos vectoriales son usados en el diseño arquitectónico,
diseño grafico en creación de logotipos y publicaciones
editoriales entre otras.
8. IMÁGENES DE MAPA DE BITS
• Las imágenes de mapas de bits, denominadas
técnicamente imágenes rasterizadas, utilizan una
cuadrícula rectangular de elementos de imagen (píxeles)
para representar imágenes. A cada píxel se le asigna una
ubicación y un valor de color
• específicosSe pueden comparar con una malla
Son el medio
electrónico mas
usado para las
imágenes de tono
continuo, puesto que
pueden representar
degradados sutiles
de sombras y color.
9. Imágenes De Mapa De Bits
• Sus características son:
– Almacenamiento del color en Bits
– Forma de los píxeles (cuadrados).
– Tamaño Relativo Siempre con una unidad de longitud fija cuya unidad
habitual es la pulgada.
• El tamaño relativo esta relacionado a una unidad de longitud fija,
como por defecto se trabaja con pulgadas se le llama a ese
tamaño relativo píxeles por pulgada cuya abreviaturas seria el
acrónimo PPI (píxel per inch).
10. LA RESOLUCION
• La cantidad de detalle de una
imagen depende de sus
dimensiones en píxeles.
• La resolución de imagen
controla el espacio que ocupan
los píxeles impresos
Todo lo que Siempre quiso saber y nunca se
atrevió a preguntar.
11. 2”
2,16”
La dimensión en píxeles de una imagen, su resolución y
tamaño se puede observar mediante la herramienta Tamaño de
imagen, ubicada en menú Imagen/Tamaño de imagen…
COMPRENDER EL TAMAÑO Y LA
RESOLUCIÓN DE LAS IMAGENES
500
540
250
•La Dimensión en píxeles equivalen a la resolución
multiplicada por el tamaño (de salida) del documento.
•La masa total de píxeles de una imagen equivale a
multiplicar la anchura por la altura de la dimensión en
píxeles de la imagen (tamaño del CCD del objeto de la
captura).
12. • Qué quiere decir que una impresora ofrece una resolución de 300
puntos por pulgada? Simplemente, que dicha impresora es capaz
“pintar” 300 puntos distintos en el ancho de una pulgada (de aqui
en adelante, 2.5 cm, 4 décimas de milímetro por ahora no nos van
a suponer un grave problema).
• Si nuestra impresora tuviera una resolución mayor a la de la
Captura y/o resolución de la imagen, y el tamaño de la imagen final
fuera el mismo que la original, tendríamos que Interpolar,
Remuestrear la imagen.
• El remuestreo o interpolación inventa o descarta pixeles en nuestra
imagen, si tengo que hacer la imagen con el doble de ancho,
tendré que inventarme un píxel entre cada dos píxels de mi imagen
original; si fuera el triple de ancho, tendría que inventar dos píxels
entre cada dos píxels originales, y así sucesivamente.
La Resolución De Impresora
13. • El tipo remuestreo determinan el color del nuevo Píxel. Las Clases de
Remuestreo o Interpolación son:
Aproximación - Vecindad
Bilineal
Bicubica
La Resolución De Impresora
R=
G=
B=
R=
G=
B=
R=
G=
B=
R=
G=
B=
R=?
G=?
B=?
R=
G=
B=
R=
G=
B=
R=
G=
B=
R=
G=
B=
• Bicubica: (R+R+R R+R+R+R+R)/8= R
(G+G+G+G+G+G+G+G)/8= G
(B+B+B+B+B+B+B+B)/8= B
14. Interpolación de Imágenes
A B C
A. Disminuir la resolución sin modificar las dimensiones en píxeles (sin remuestreos)
B. Dimensiones y resolución originales C. Disminuir la resolución con el mismo
tamaño de documento disminuye las dimensiones de los píxeles (remuestreo)
15. Interpolación de Imágenes
•Imagen Interpolada a 300 PPI, mantiene el tamaño del documento pero aumenta
sus dimensiones en Píxeles. Para interpolar la imagen se debe activar la casilla
remuestrear la imagen
•La resolución de impresora se denomina DPI (Dot per Inch) puntos por pulgada, ya
que la impresora plasma puntos de tinta.
•Al concepto de Lineatura de impresión se asigna la unidad LPI (Line per Inch).
16. Resolucion de pantalla PPI-PPP (Píxeles Por Pulgada)
• Los datos de la imagen se traducen directamente a píxeles del monitor.
Esto significa que si la resolución de imagen es más alta que la resolución
del monitor, la imagen aparece con un tamaño mayor en pantalla que el de
las dimensiones de impresión especificadas.
Importante: Al preparar una imagen para visualizarla en línea, las
dimensiones de píxeles adquieren gran importancia. Debe asegurarse de
que el tamaño de la imagen deja espacio para los controles de la ventana
del explorador Web en los monitores de menor tamaño.
OTROS TIPOS DE RESOLUCION
17. FOTOGRAFICA. PPI-PPP
Determinada por el CCD de la cámara:
OTROS TIPOS DE RESOLUCION
CAMARA
RESOLUCIÓN
MAXIMA
OTRAS RESOLUCIONES
5 MP 2560 X 1920 píxeles 1600x1200, 1280x960, 1024x768,
640x480
4 MP 2272 x 1704 píxeles 1600x1200, 1024x768, 640x480
3 MP 1600 x 1200 píxeles (1280x960), 1024x768, 640x480
1,3 MP 1280 x 960 píxeles 1024x768, 640x480
La descarga ya viene a 300ppi, es decir, Calidad Fotográfica.
18. ¿Qué es un Píxel?
•Para poder observar un Píxel debemos
aumentar la imagen al 1600%, igualmente
en la figura demarcamos el píxel a
estudiar.
•En la paleta información información de
los canales rojo, azul, y verde, cuyos
valores, mezclados, nos proporcionan un
tono único, el del color que presenta el
píxel indicado.
•Si partimos de la base de que un byte de
información sólo puede representar 256
valores distintos ¿cómo llegamos a los
16.7 millones de colores de que consta
esta imagen? Fácil.
19. ¿Qué es un Píxel?
1-bit = 2 7-bits =128 13-bits =8192
2-bits = 4 8-bits = 256 14-bits = 16384
3-bits = 8 9-bits = 512 15-bits = 32768
4-bits = 16 10-bits =1024 16-bits = 65536
5-bits = 32 11-bits =2048
6-bits =64 12-bits = 4096
• Un bit puede estar activado o desactivado (1 o 0), igual que un
interruptor eléctrico. Por tanto, una imagen de 1-bit puede
contener sólo ds tonos de gris, blanco o negro.
• Podemos decir que una imagen de 1-bit, es una imagen en
blanco y negro (sin escala de grieses).
• Una imagen en escala de grises contiene un solo canal, es decir
256 tonos de gris.
• Ahora una imagen de 3 canales como RGB seria 256x256x256
=16.777.216 = 16.7 millones de colores o 8bits de Rojo + 8bits
de azul + 8bits de verde.
20. EL COLOR
• Los modelos de color describen los colores numéricamente. Hay
distintos métodos para describir colores numéricamente
• Un modo de color determina el método o conjunto numérico que
se va a utilizar para visualizar e imprimir una imagen.
• Los modos de color de Photoshop están basados en los
modelos de color que resultan útiles en las imágenes que se
utilizan en autoedición.
• Photoshop utiliza los modos de color RGB (red, green, blue —
rojo, verde, azul—); CMYK (cyan, magenta, yellow, black —cian,
magenta, amarillo, negro—); Color Lab (basado en CIE L*a*b*) y
Escala de grises. Color indexado.
22. AJUSTES DE COLOR Y TONO
• Hay dos componentes importantes para realizar un ajuste de
color y tono (luminosidad, oscuridad y contraste) de un imagen.
– Revisar la exposición de la captura
– Verificar las ganancias tonales y aberraciones cromáticas.
23. AJUSTES DE COLOR Y TONO
NIVELES - HISTOGRAMA
SOMBRAS T. MEDIOS ILUMINACIONES
Corrección Puntual
Elige el canal a ajustar
Ajuste Automático de la gama
Reguladores de
Sombras
Tonos Medios
Iluminaciones
24. AJUSTES DE COLOR Y TONO
Sobreexpuesta Expuesta correctamente Subexpuesta
26. • Para nuestros propósitos, podemos pensar en un filtro como un
dispositivo que cambia las propiedades de un fenómeno físico. Por
ejemplo, las gafas de sol son un filtro ya que permiten que ciertas ondas
de luz pasen mientras que previene el paso de otras. Está cambiando las
propiedades físicas de la luz.
• Cualquier cosa que se enchufe es un plug-in (juego de palabras del
original en inglés). Si buscamos algún tipo de definición, deberíamos
decir que un plug-in es un dispositivo que expande o modifica la
funcionalidad de otro dispositivo a través de una interfaz bien definida.
FILTROS Y PLUGINS
27. • La optimización es el proceso de ajustar con precisión la
calidad de visualización y el tamaño de archivo de una
imagen para su uso en Internet u otro medio en línea.
LA Web - ACCIONES
TIEMPO DE TRANSFERENCIA DE
ARCHIVOS
BW
T
S
Máximo ancho de banda teórico
Tiempo que demora la
transferencia del archivo
Tamaño del archivo en Bits
T =
S
B W
• Para una optimización básica, el
comando Guardar como de
Photoshop permite guardar una
imagen como un archivo GIF, JPEG,
PNG o WBMP.
• Para una optimización precisa, puede
utilizar las funciones de optimización
de Photoshop o ImageReady para
previsualizar las imágenes
optimizadas en diferentes formatos de
archivo y con diferentes atributos de
archivo.