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.

HSB. Código hexadecimal. Colores seguros para Web

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.

Cada color está ubicado en el extremo opuesto a su complementario, es decir, el magenta está en el extremo opuesto al verde, el amarillo al azul y el cyan al rojo. 

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º)

Para añadir la proporción de un color en una zona de la imagen, lo que hace es rebajar la cantidad de su complementario.

· 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).

En la imagen se ve cómo evolucionan los colores con la luminosidad, desde los colores poco luminosos, en la parte inferior, hasta los colores muy luminosos, en la parte superior.

  

 

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 “#”.

Por ejemplo, el color RGB (164, 25, 25) tendría el código hexadecimal #a41919.

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.

Es importante saber que cada navegador puede representar el código “a su manera”. Para ello existen los denominados colores seguros, que se representarán igual en todos los navegadores.
En el caso entonces, de que las imágenes vayan a ser publicadas en la Web, se suele marcar la opción Sólo colores Web, que son 216.

 

Modos de color

 

Modos de color

El modo de color de un archivo depende de la cantidad máxima de datos de color que puede almacenar. Su elección depende del objetivo que se tenga para la imagen, por ejemplo: para imprimirla, para publicarla en Internet, para mostrarla en una presentación multimedial, etc.

Los modos de color determinan el número de colores, el tamaño de archivo, las herramientas, los formatos de archivo disponibles, etc.

Photoshop puede trabajar con varios modos de color, siendo los más usados: RGB (rojo, verde y azul) y CMYK (cyan, magenta, amarillo y negro), aunque también suele ser de utilidad la aplicación de HSB, los Códigos Hexadecimales de color y Colores seguros para Web.

 

El modo 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).
En otras palabras, si se coloca el máximo posible de cada uno de los colores, o sea 255 de rojo, 255 de verde y 255 de azul, entonces tendremos blanco, estaríamos viendo la intersección de los tres conjuntos en el gráfico. 

Por ejemplo, se puede describir un color RGB amarillo fuerte con las cifras (255, 252, 5), o sea con  el máximo de rojo, casi el máximo de verde y un poquito de azul, ser hace ese tono de amarillo.

Es el modo por defecto en las imágenes de Photopea y de Photoshop.

Es el modo que emplean los monitores.

Esto significa que si se trabaja en modos de color distintos a RGB, como CMYK, Photoshop o Photopea cambia la imagen CMYK a RGB para poder visualizarla en la pantalla.

Este modo muestra en pantalla colores que no pueden ser impresos, algo que es muy importante tener en cuenta

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) 

Usa 32 bits por píxel (esa sería la profundidad máxima) y aplica un sistema sustractivo del color, basado en las mezclas de las tintas. 

Por ejemplo si se mezcla cian con verde, se crea amarillo.

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. A modo de ejemplo: el rojo oscuro no estará compuesto de rojo, sino de una mezcla de magenta, amarillo, algo de cian y algo de negro. (Vayan mirando el gráfico para tener una idea - fíjense en las intersecciones de los conjuntos, que representan los colores)

Una mancha de tinta cyan dejará pasar las longitudes de onda azules y verdes (que son las que componen el color cyan), pero bloqueará la luz roja.

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). 
Por ejemplo, un rojo podría tener 2% de cian, 93% de magenta, 90% de amarillo y 0% de negro.

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 preferido cuando hay que ajustar el color para imprimir una imagen sobre papel. De hecho es el modo utilizado en las imprentas bajo el nombre técnico de cuatricromía.

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