FUNDACIÓN UNIVERSITARIA SAN MARTIN
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.
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.
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
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.
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.
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.
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.
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).
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.
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).
• 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
• 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
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)
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).
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
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.
¿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.
¿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.
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.
EL COLOR
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.
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
AJUSTES DE COLOR Y TONO
Sobreexpuesta Expuesta correctamente Subexpuesta
AJUSTES DE COLOR Y TONO
• 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
• 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.
Thomas Knoll
HISTORIA DE PHOTOSHOP
Presentación Photoshop e Imagenes

Presentación Photoshop e Imagenes

  • 1.
  • 2.
    CONTENIDO DE LAPRESENTACION • 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 Photoshope 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 DETRABAJO • 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ÁGENESDE 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 MAPADE 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 MapaDe 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 • Lacantidad 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 enpí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é quieredecir 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 tiporemuestreo 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 AB 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 •ImagenInterpolada 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 pantallaPPI-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 porel 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 unPí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 unPí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 • Losmodelos 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.
  • 21.
  • 22.
    AJUSTES DE COLORY 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 COLORY 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 COLORY TONO Sobreexpuesta Expuesta correctamente Subexpuesta
  • 25.
  • 26.
    • Para nuestrospropó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ónes 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.
  • 28.