Ajustes

Vamos a trabajar ahora con algunas opciones que se encuentran en el menú Imagen – Ajustes

EJERCICIO:

1 - NECESITAMOS QUE LA IMAGEN SE GUARDE "GRANDE". Para eso, clic derecho sobre la imagen - Abrir enlace en una pestaña nueva - y recién cuando se abra, clic derecho, guardar como "Mono"  

 

2 - Ingresen a Photopea y abran el archivo mono

3 - Dupliquen la capa

Esto puede hacerse de dos maneras:

* clic derecho sobre la única capa que existe, que es el fondo -Background- y luego clic en Duplicar capa

* clic derecho sobre la capa Background - menú Capa - Duplicar capa

Las capas se duplican para poder realizar modificaciones sin "afectar" la imagen original. 

4 - Clic en la capa duplicada para trabajar sobre ella

5 - Aplicar sobre la capa recién duplicada la herramienta balance de color (desde el menú Imagen - Ajustes). Se abrirá un cuadro de diálogo. 

BALANCE DE COLOR

Balancear o equilibrar el color es dosificar la cantidad de cada color primario en la totalidad de la imagen, mediante 3 reguladores.

Se puede indicar a qué valores de luminosidad afectarán estos cambios, seleccionando desde Rango: Sombras, Tonos medios o Altas luces.

La casilla Conservar luminosidad, mantiene la uniformidad en los valores de luz de la imagen.

Es útil tener activa la casilla Previsualizar, para “ir viendo” cómo afectarían los cambios que se realizan.

Con el botón OK se aplican los cambios. Con el botón RESET se descartan.

6 - Duplicar nuevamente la capa Background y hacer clic sobre la capa  recién duplicada

7 - A la izquierda de cada capa hay un ícono de un ojo, haciendo clic sobre él se puede visualizar u ocultar esa capa. Ocultar todas las otras capas, dejando solamente el "ojo" en la capa sobre la que se va a trabajar.

8 -Aplicar BRILLO/CONTRASTE

Estas opciones son de fácil manejo, sin embargo deben usarse con precaución si se pretende mantener el realismo de la imagen.

Los nuevos niveles a aplicar, se obtienen desplazando la barra reguladora.

Brillo: modifica los valores de luminosidad del color y afecta a todos los píxeles de la imagen, incluyendo luces, sombras y medios tonos.

Contraste: los resultados que se obtienen varían según el modo de color. Por ejemplo, si la imagen está en escala de grises, al ajustar el contraste se potencian las diferencias entre claros y oscuros (más blancos y negros), reduciendo los tonos medios. Si la imagen está en color, la diferencia se origina con una mayor saturación de los colores, reduciendo los medios tonos.

9 - Duplicar nuevamente la capa Background y hacer clic sobre la capa recién duplicada


10 - Ocultar la visualización de las otras capas, dejando solamente visible la capa sobre la que se trabajará ahora

11 - Aplicar opciones de BLANCO Y NEGRO (a su gusto)

Cambia una imagen color a escala de grises, permitiendo tener el control sobre los colores al mover los manejadores para acentuar el blanco o el negro de la imagen.

Además se puede colorear la imagen activando la casilla Colorear y seleccionado el tono desde el botón ubicado a la derecha de la palabra "Colorear" que abre el Selector de color.

12 - Duplicar nuevamente la capa Background y hacer clic sobre la capa recién duplicada


13 - Ocultar la visualización de las otras capas, dejando solamente visible la capa sobre la que se trabajará ahora

14 - Aplicar opciones de TONO/SATURACIÓN  (a su gusto)

Este comando permite modificar los tres atributos o características de un color: tono, saturación y luminosidad.

El cambio sobre los reguladores de Saturación y Luminosidad tienen consecuencias evidentes sobre la imagen.

Cuando se mueve el regulador Tono, se desplaza por el espectro de la rueda de colores en un sentido o en otro; si se seleccionan valores positivos, se mueve en el sentido de las agujas del reloj; si se regula con valores negativos, se desplaza en sentido contrario al de las agujas del reloj. Los tonos de la imagen por lo tanto, varían ajustándose a la posición de la rueda cromática.

Bajo los reguladores hay 2 barras con el espectro de color completo: la superior es siempre una referencia, mientras que la inferior modifica su aspecto en función de los cambios que se realicen en tono, saturación y luminosidad.

Desde la lista desplegable Rango, se puede indicar la gama de colores a modificar.

15 - Duplicar nuevamente la capa Background y hacer clic sobre la capa recién duplicada


16 - Ocultar la visualización de las otras capas, dejando solamente visible la capa sobre la que se trabajará ahora

17 - Usar "a su gusto" la herramienta POSTERIZAR

Este comando aplica sobre la imagen niveles tonales que van de 1 a 255; lo que reduce el número de colores haciendo coincidir los píxeles originales con el nivel de brillo y tono más cercano a los nuevos valores.

En el cuadro de diálogo que se abre al activar el comando se indica el nivel de posterización. El resultado del efecto depende siempre de la imagen que se use como base, aunque se notará más al aplicar números bajos en el nivel, ya que se mostrarán grandes áreas de un color plano; al elevar el nivel, suele resultar difícil distinguir el efecto. Es útil tener el botón Previsualizar activado para apreciar cómo quedaría, antes de su efectiva aplicación.

Tampón de clonar

Esta herramienta permite “clonar”o copiar áreas de la imagen, por lo que es sumamente útil para eliminar o agregar elementos iguales e incluso corregir imperfecciones.

Los invito a ver el video para tener una idea de la herramienta y su uso.

Ejercicio:

• Hagan un clic sobre la imagen y cuando la vean grande, recién guárdenla en su computadora con el nombre “en el río”

• Ábranla desde Photopea (menú Archivo - Abrir)
• Guárdenla como .psd con el mismo nombre (esto permitirá trabajarla aplicando las herramientas, sin perder calidad). Tengan en cuenta que al guardar como .psd será un archivo que solamente pueda abrirse en Photopea o en Photoshop

• Seleccionen la herramienta Tampón de clonar de la Caja de Herramientas  

• Se habilitará la barra de opciones. En ella se presentarán comandos que permitirán elegir cómo se desea aplicar esa herramienta, como por ejemplo el tamaño y la dureza del tampón, que es importante para que "no se note" lo que hagamos

También se puede seleccionar Modo de fusión, Opacidad y Alineado.  
Cuando se utiliza el Tampón, se  fija como referencia un punto de origen. El punto de origen será aquel que queremos que se copie o repita en los lugares donde luego se haga clic con el mouse (a los lugares donde se hace clic se les llama punto de copia o destino).

Si se tilda la opción Alineado: el punto de origen y el punto de copia se mantendrán siempre a la misma distancia cada vez que se haga clic sobre la imagen; por lo tanto al mover el mouse, el punto de origen irá cambiando.

Si no se tilda la opción Alineado: el tampón tomará como referencia siempre el mismo punto de origen para hacer el punto de destino.

• Decidan entonces, si Alineado estará o no tildado. Les aconsejo probar de las 2 maneras para ver en la práctica cómo funcionan. Tienen a su disposición “Paso atrás” o Deshacer del menú Edición para quitar lo que hicieron y probar otra alternativa

• Seleccionen un Pincel: tipo (es lo que aparece debajo de tamaño y dureza), el tamaño, la dureza.
• Marquen el punto de origen: para ello coloquen el cursor en el lugar de la imagen que deseen copiar (siempre tengan en cuenta que el punto de origen tenga luminosidad y colores similares al punto que se quiere usar como destino) y mientras presionan la tecla ALT, hagan clic o vayan pasando suavemente sobre el lugar donde desean que se aplique. Traten de que no se note ninguna "marca". Se puede arrastrar con el ratón o ir haciendo clics. Todo depende de lo que se esté clonando.

La idea es que, usando la herramienta Tampón de Clonar:

a) eliminen las personas que están en la foto 

b) agreguen algunas piedras 

Cuando estén seguros y conformes con lo que hicieron, entonces recuerden guardar los cambios y vuelvan al aula virtual para entrar al foro y publicar la captura

El trabajo terminado deberá quedar mucho mejor que este:

Iniciando con Photopea

Los invito a ver una Clase introductoria, en la que se muestra un poquito Photopea que me pareció bastante abarcativa, pero simple. No crean que van a aprender las herramientas ya, es solamente para que observen  la interfaz de trabajo.

Pasando en limpio...

La interfaz es idéntica a la de Photoshop. Es FUNDAMENTAL poder identificar las diferentes partes para poder guiarse posteriormente de los tutoriales. Así que... ATENCIÓN para aprenderlas.

Entorno de trabajo

Barra de menú: contiene los comandos propios del programa. (Archivo - Editar - Imagen - Capa - Seleccionar - Filtro - Visualziar - Ventana - Más - etc.)

Herramientas o panel de herramientas o caja de herramientas: contiene una serie de íconos que representan herramientas para seleccionar, pintar, recortar, escribir, etc.

Observaciones sobre el panel herramientas:

• Si un ícono presenta un pequeño triángulo o punta de flecha en la esquina inferior derecha, significa que se trata de un grupo de herramientas. Para ver la lista que pertenece a ese grupo, hacer clic derecho sobre el ícono.  Ejemplo de grupo de herramientas

• Selectores de color: en el panel de herramientas se encuentran también los selectores de color. Se trabaja con dos colores activos. El color situado al frente será el  color Frontal, la mayoría de las herramientas lo tomarán como color de trabajo. El que se encuentra detrás es el color de Fondo.

• El recuadro que se encuentra al frente muestra el color que se está utilizando. Si se hace clic sobre el icono de doble flecha  se intercambiarán los colores de los recuadros entre sí, haciendo que el color de fondo pase a frontal y por lo tanto las herramientas usarán ese color como predeterminado.

• Para seleccionar un color, clic sobre uno de los recuadros y se abrirá el cuadro de diálogo Selector de color desde donde se puede elegir un color de la paleta

Fíjense que en el ejemplo del cuadro de diálogo de arriba, se muestra el color rojo con sus valores en el modo de color RGB, en HSB y en código Hexadecimal.

Barra de opciones de herramientas: contiene los ajustes correspondientes a la herramienta que se haya seleccionado, por lo que el contenido de esta barra cambiará según la herramienta con la que se esté trabajando y permitirá cambiar aspectos como tamaño, opacidad, etc. (En el ejemplo se muestran opciones de la herramienta pincel)

Paneles: muestran opciones adicionales de las herramientas o posibilitan las gestiones con capas, canales, etc.

Pestañas de documentos: una por cada documento abierto

Área de trabajo: muestra el contenido del archivo sobre el que se está trabajando.

Abrir una imagen 

Photopea puede abrir imágenes guardadas en un formato compatible con esta aplicación.  Para ello:

Menú Archivo – Abrir  - Seleccionar el archivo  

Guardar un archivo

Es muy conveniente guardar el archivo como PSD (que es el formato de Photoshop), para poder seguir trabajando sobre el mismo ya que se mantienen las capas y todo lo necesario para continuar con la edición.

El formato .psd

Es un formato creado por Adobe para aprovechar al máximo sus funciones y operaciones específicas, ya que guarda el máximo de información en el mismo archivo y permite gestionarlo de la manera más rápida.

Es por ello que, es conveniente guardarlo con este formato mientras se trabaja con las imágenes (este formato se podrá abrir en Photoshop y también en Photopea) y recién cuando se haya concluido la tarea, se sugiere guardarlo con otro formato de compresión para no perder calidad (recuerden que los formatos de compresión, cualquiera sea el algoritmo que utilicen, en mayor o menor medida, quitan píxeles de la imagen).

Crear un nuevo proyecto

 Antes que nada, hay que destacar que las dimensiones en alto y ancho, Photopea las establece por defecto en píxeles (también podremos expresarlas en milímetros, si nos resulta más sencillo "pensar" en el sistema métrico decimal para definir dimensiones).

Photopea ofrece tamaños predefinidos para redes sociales, impresiones (tamaños de papel), pantallas, celulares y también brinda plantillas que pueden usarse como fondos.

Fondo: puede ser blanco, transparente u otro. 

El fondo transparente (es decir que no se ve), se muestra con recuadros grises y blancos.

Síntesis para repasar

Imágenes vectoriales

Las imágenes vectoriales no están formadas por píxeles, sino que se construyen a partir de líneas o curvas definidas por ecuaciones matemáticas en las que se establecen parámetros como coordenadas, grosor y color del contorno, color del relleno, etc. Los objetos no dependen de la resolución, por lo que, sin importar el tamaño al que se amplíen, se ven nítidos y con contornos limpios.

Los programas más utilizados para trabajar con este tipo de imágenes son Corel Draw y Adobe Illustrator

Las imágenes vectoriales se usan en carteles, dibujos de precisión, logotipos, folletos y otros documentos  en los que la imagen hecha con una gama reducida de tintas planas, debe ser reproducida en distintos soportes y a distintos tamaños.

Bitmaps

Los bitmaps están formados por una trama de cuadraditos o píxeles (píxel: abreviatura de picture element – elemento de imagen), cada uno con una posición fija y un color de relleno, pero como el ojo integra visualmente las variaciones de color y luminosidad entre píxeles adyacentes, son percibidos como un conjunto transformándolos en una imagen muy real.

A baja resolución o al “escalarlos” aumentando su tamaño, los píxeles se perciben y la imagen se ve con un aspecto dentado o borroso, especialmente en las líneas curvas y en las zonas en donde hay cambios bruscos de luminosidad.

Los programas más utilizados para trabajar con bitmaps son Photoshop, Corel PhotoPaint y Photopea.

Resolución de una imagen

La resolución de una imagen está relacionada con su calidad ya que indica la cantidad de píxeles que la forman. La resolución se mide en píxeles por unidad de medida, es decir en ppp (píxeles por pulgada - 1 pulgada equivale a 2,54 cm. aproximadamente).

En los mapas de bits, la resolución de la imagen puede describirse:

• con dos números enteros, donde el primero es la cantidad de columnas de píxeles (cuántos píxeles tiene la imagen a lo ancho) y el segundo es la cantidad de filas de píxeles (cuántos píxeles tiene la imagen a lo alto)

• con el número total de píxeles en la imagen (expresado usualmente en megapíxeles = 1 millón de píxeles), que se calcula multiplicando la cantidad de columnas de píxeles por la cantidad de filas de píxeles.

Resolución del monitor

Es el número de píxeles por pulgada con los que se forma la imagen en pantalla. 

Cuanto mayor sea la resolución, mejor será la calidad de la imagen en pantalla.

La resolución se indica por la multiplicación de píxeles horizontales y verticales. Por ejemplo,  un  monitor cuya resolución máxima es de 1024x768 píxeles puede representar hasta 768 líneas horizontales de 1024 píxeles cada una.

Si bien los monitores trabajan en múltiples resoluciones, se debe tener en cuenta que la misma está relacionada con el tamaño del monitor y con la capacidad de la tarjeta gráfica instalada en la PC. Por ejemplo en un monitor de 15” puede apreciarse una resolución máxima de 1024x768, pero si se cuenta con una tarjeta VGA, la máxima resolución posible será de 640x480.

En Photoshop y Photopea, los píxeles de la imagen se traducen directamente a píxeles de monitor, lo que significa que cuando la resolución de una imagen es mayor que la resolución del monitor, la imagen aparece más grande en pantalla de lo especificado en sus dimensiones; es decir, necesita más pulgadas para poder mostrar todos los píxeles que contiene.

Dimensiones de la imagen

Las dimensiones de una imagen se expresan habitualmente en cm o mm. Por ejemplo, una imagen de 10 x 15 cm medirá 10 cm de ancho y 15 cm de alto.

Resolución de la impresora

Se mide en puntos por pulgada o dots per inch (dpi). Una resolución estándar es de 300 ppp. Obviamente a mayor resolución, mayor calidad de la imagen.

Profundidad de color

Cada uno de los píxeles de una imagen bitmap muestra un color, por lo tanto el archivo que guarda los datos de la imagen debe contener la información del color de cada uno de los píxeles. Cuántos bits se emplean para albergar esta información, es lo que se conoce como profundidad de color. En otras palabras, profundidad de color es el número de bits utilizados para describir el color de cada pixel de una imagen.

Cuanto mayor sea la profundidad de color de una imagen, más colores tendrá la paleta disponible, por lo tanto, la representación podrá hacerse con más matices, con colores más sutiles.

Las imágenes en blanco y negro (sin tonalidades de gris) necesitan solamente una profundidad de 1 bit/pixel: si el bit tiene color 0 será negro (ausencia de los tres colores) y si vale 1 (suma de los 3 colores), será blanco.

Con  8 bits podremos elegir entre 256 colores, porque 2 elevado a la potencia 8 = 256. Esta es una profundidad de color suficiente para las imágenes construidas en el modo denominado escala de grises, porque con 8 bits cada pixel puede adoptar un tono entre 256 valores posibles de gris.

Con 16 bits, se pueden mostrar hasta 65.536 colores. Con 24 bits, hasta 16,7 millones de colores, etc.

En síntesis, cuanto mayor sea la profundidad, se utilizará una cantidad mayor de colores para describir la imagen.  

Tamaño de archivo

Es una cifra, en bits o en bytes (usualmente indicada en Kb = 1024 bytes o Mb = 1024 Kb), que describe la cantidad de memoria necesaria para almacenar la información de la imagen en un soporte (disco rígido, DVD, tarjeta de memoria, etc.). El tamaño del archivo depende de varios factores: básicamente resolución y profundidad de color.  

Compresión de archivos

Los archivos de imagen, especialmente los bitmaps, ocupan un gran espacio de almacenamiento. Esto hizo necesario el desarrollo de tecnologías capaces de comprimirlos, desechando para ello la información menos relevante pero sin pérdidas significativas, de manera que puedan publicarse o imprimirse sin resignar demasiado la calidad.

Cada sistema de compresión utiliza un algoritmo matemático propio para reducir la cantidad de bits necesarios para describir la imagen. La extensión del archivo indica el formato de compresión aplicado, por ejemplo bmp, jpg, gif, png, etc.

Los más utilizados son:

⇨Formato JPG

Es un formato de alta compresión sin que el ojo pueda percibir diferencias. Tiene muy buena calidad y alta compresión

 

⇨Formato TIF o TIFF

Tiene muy buena calidad pero menor compresión que el JPG

 

⇨Formato GIF
GIF (Graphics Interchange Format - Formato de Intercambio de Gráficos) es un formato de alta compresión y baja calidad. Admite 256 colores solamente pero permite hacer secuencia de imágenes que se repiten, es decir animaciones.

⇨Formato PNG

PNG (Portable Network Graphics - Gráficos de red portátil) tiene buena calidad y buena compresión (aunque mayor que la de los JPG). Permite fondos transparentes 

Tiene la gran ventaja de permitir fondos transparentes.

   

⇨Formato BMP

Buena calidad, baja compresión. Es usado por Microsoft y sus aplicaciones.

Para guardar un archivo mientras se trabaja con Photopea o Photoshop se usa PSD, que permite guardar las capas y continuar con la edición o composición de imágenes.

El modo de color RGB

La gama de colores se forma con la mezcla aditiva de tres colores o canales: rojo (Red - R), verde (Green - G) y azul (Blue - B).

Las cantidades utilizadas de cada color primario se expresan con un número que puede adoptar cualquier valor entre 0 (ausencia absoluta de ese color) y 255 (cantidad máxima). 
Se llama aditivo porque la mezcla de los tres colores básicos produce el color blanco  (255, 255, 255) y la ausencia de los tres colores produce el color negro (0, 0, 0). 

Es el modo que emplean los monitores.

Aunque RGB es un modelo de color estándar, puede variar el rango exacto de colores representados, según la aplicación o el dispositivo de visualización, o sea si se ve lo mismo en distintos monitores o pantallas de celulares o tablets, por ejemplo pueden notarse ligeros cambios en la tonalidad.

El modo CMYK

(Cian - Magenta - Yellow - Black) 

Aplica un sistema sustractivo del color, basado en las mezclas de las tintas. 
Se llama sustractivo porque la tinta sustrae al espectro de luz blanca una parte de la radiación, dicho de otro modo la tinta absorbe una parte de las longitudes de onda de la luz que recibe.  

Los colores se describen con el porcentaje de tinta utilizado, que va del 0% (mínimo - o sea no se coloca nada de ese color) al 100% (se coloca el máximo posible de ese color). 

En las imágenes CMYK, el blanco puro se genera si los cuatro componentes tienen valores del 0%.

Teóricamente, si pintásemos una hoja de papel con tinta cyan, magenta y amarillo debería absorber todo el espectro, produciendo, en consecuencia, el color negro. Pero en la práctica las tintas no son de color puro y sólo conseguimos un marrón oscuro, que tenemos que ajustar con tinta negra para mejorar la calidad de la reproducción.
Este modo de color es el empleado cuando hay que ajustar el color para imprimir una imagen sobre papel.  

Aunque CMYK es un modelo de color estándar, puede variar el rango exacto de los colores representados, dependiendo básicamente del dispositivo y del tipo de tinta empleado.

En síntesis

HSB

Clasifica los colores de acuerdo a tres características básicas: tono, saturación y luminosidad.

· Tono (Hue)

Esta propiedad se refiere a la longitud de onda dominante en la luz emitida o reflejada por un objeto. Para asignar un valor al tono se utiliza una rueda de color normalizada, en la que los tres colores primarios (rojo, verde y azul) y los tres colores secundarios (cyan, magenta y amarillo) se alternan a lo largo de una circunferencia.
El tono se mide en grados, de 0º a 360º, según su posición en la periferia de la rueda de color (de rojo a 0º, amarillo a 60º, verde a los 120º y magenta a los 300º)

· Saturación

Es el grado de pureza del color. Un color muy saturado es un color con una tonalidad intensa y pura. Por el contrario, un color poco saturado es el que tiene una tonalidad apagada.

Se expresa en porcentaje y oscila entre el 100%, que corresponde a los colores puros, saturados al máximo y el 0%, que corresponde a los colores apagados en los que ya no se distingue la tonalidad.

En la rueda de color HSB, la saturación se representa a lo largo del radio de la circunferencia. Los colores muy saturados se encuentran cerca del borde y los colores poco saturados son los que están cerca del centro del círculo.

· Luminosidad (brightness)

Describe la cantidad de luz reflejada. Se trata por tanto de una magnitud relativa, que se expresa también en forma de porcentaje, desde el 100% (luminosidad total) hasta el 0% (oscuridad total). 

 

Código hexadecimal de un color

Otra forma de identificar un color por un nombre único para él, es el código hexadecimal.  

El código hexadecimal se expresa por una serie alfanumérica (compuesta por números y letras) de 6 caracteres precedidos por el signo “#”.

Estos 6 caracteres son en realidad 3 grupos de 2 (3 parejas). Cada pareja corresponde a un color básico RGB (rojo, verde y azul, respectivamente): #RRGGBB (= #RRVVAA)

Un código hexadecimal puede tener números del 0-9 y letras de A-F. El negro sería #000000 y el blanco #FFFFFF.

Colores seguros para usar en páginas web.

A pesar de ser solamente 216, los colores seguros permitirán que se muestren de la misma manera en todos los navegadores.