Qué hace un ordenador

Un ordenador es una máquina que sirve para una sola cosa, aunque la haga de mil maneras: procesar información. Recibe datos, los transforma siguiendo unas instrucciones (los programas) y devuelve un resultado. Todo lo que hace, desde mostrar una web hasta retocar una foto, sigue el mismo esquema:

1. 01EntradaLos datos entran en el ordenador a través de los periféricos de entrada: el teclado, el ratón, una cámara, un escáner…
2. 02ProcesoEl procesador trabaja con esos datos siguiendo las instrucciones del programa: calcula, compara, transforma.
3. 03SalidaEl resultado sale por los periféricos de salida: la pantalla, la impresora, los altavoces…
4. 04AlmacenamientoLos datos y los resultados se pueden guardar en el disco para usarlos más adelante.

Un ejemplo de diseño

Retocar una foto antigua para un cartel recorre todo el esquema:

• Entrada: digitalizas la foto con un escáner y eliges los ajustes con el ratón o con una tableta gráfica.
• Proceso: Photoshop calcula, píxel a píxel, cómo cambian los colores al subir el contraste o al quitar una mancha.
• Salida: ves el resultado en la pantalla y, al final, lo imprimes.
• Almacenamiento: guardas el archivo de trabajo y la versión final en el disco o en la nube.

Datos e información

Se suelen usar como sinónimos, pero hay un matiz: los datos son la materia prima (números, letras, el color de cada píxel), y la información es lo que esos datos significan una vez procesados y organizados (una foto, un texto, una página web). El trabajo del ordenador es convertir unos en otra.

Idea clave: el ordenador no entiende lo que procesa. No sabe que está retocando una foto ni escribiendo un texto: sólo maneja datos, que por dentro son números. Cómo se convierte todo en números es justo lo que veremos en el apartado del sistema binario.

Hardware y software

Un ordenador tiene dos partes que funcionan juntas:

• El hardware es la parte física, lo que se puede tocar: el procesador, la memoria, la pantalla, el teclado…
• El software son los programas: las instrucciones que le dicen al hardware qué hacer. Photoshop, el navegador o el propio sistema operativo son software.

Un vistazo al ordenador

Así se ve un ordenador de sobremesa por dentro, con sus periféricos alrededor. Pulsa cada pieza para saber qué es:

En un portátil está todo esto, pero mucho más compacto: la pantalla, el teclado, el panel táctil, los altavoces y la cámara van integrados en el mismo aparato. En un móvil, aún más: casi todo va en un único chip.

Los componentes principales

Fíjate: cuando Photoshop va lento con una imagen grande, casi siempre es por la memoria RAM: la «mesa» se queda pequeña y el ordenador tiene que ir y venir al «armario». Para diseño gráfico se recomienda un mínimo de 16 GB de RAM.

Periféricos

Son los aparatos que se conectan al ordenador para meter y sacar datos, las puertas de entrada y de salida del esquema que acabamos de ver:

• De entrada (le damos información): teclado, ratón, tableta gráfica, escáner, cámara, micrófono.
• De salida (nos da información): pantalla, impresora, altavoces.
• De almacenamiento: discos externos, memorias USB, tarjetas de memoria.

El sistema operativo

Es el programa principal, el que se pone en marcha al encender el ordenador. Gestiona el hardware y hace de intermediario entre él y el resto de programas. Los más usados son Windows y macOS en ordenadores, Linux en servidores, y Android e iOS en móviles. El resto de programas (Photoshop, Illustrator, el navegador) se llaman aplicaciones y funcionan sobre el sistema operativo.

El sistema binario

Por dentro, un ordenador está hecho de millones de interruptores diminutos (transistores) que sólo pueden estar en dos estados: apagado o encendido. Por eso toda la información (textos, imágenes, música, programas) se guarda con sólo dos símbolos: el 0 (apagado) y el 1 (encendido). Es el sistema binario.

• Cada 0 o 1 es un bit (binary digit, dígito binario): la unidad mínima de información.
• Ocho bits forman un byte.

Contar en binario

En el sistema decimal, cada posición vale diez veces más que la anterior (unidades, decenas, centenas…). En binario, cada posición vale el doble: 1, 2, 4, 8, 16, 32, 64, 128. Para saber qué número es, se suman los valores de las posiciones que están encendidas.

Pruébalo: pulsa los interruptores de este byte para encenderlos y apagarlos.

Con los ocho interruptores apagados, el byte vale 0; con todos encendidos, 255 (128 + 64 + 32 + 16 + 8 + 4 + 2 + 1). Un byte puede guardar, por tanto, 256 valores distintos, del 0 al 255.

Fíjate en el cuadrado gris: en una imagen en escala de grises, cada píxel se guarda en un byte, donde 0 es negro, 255 es blanco y los valores intermedios son los grises. Así es como un número se convierte en un color. En el Tema 2 veremos que con tres bytes, uno para el rojo, otro para el verde y otro para el azul, se pueden formar más de 16 millones de colores. Es exactamente lo que significa un color como #576F6F en CSS.

Todo son números

Si todo se guarda como ceros y unos, ¿cómo se guarda una letra? Con un código acordado: cada letra tiene asignado un número. Por ejemplo, la «A» mayúscula es el 65, que en binario es 01000001. Lo mismo pasa con los colores, los sonidos o los vídeos: siempre hay una forma acordada de convertirlos en números.

Unidades de medida

Como un byte es muy poco, para medir el tamaño de los archivos se usan múltiplos. Cada unidad equivale a 1.024 de la anterior (que es 2 elevado a 10, un número redondo en binario):

Ojo: por comodidad, muchas veces se redondea a 1.000 en lugar de 1.024. Por eso un disco que se vende como «1 TB» aparece en el ordenador con algo menos de capacidad: no te han engañado, se está contando de dos formas distintas.

Megabits y megabytes

La velocidad de internet se mide en megabits por segundo (Mbps, con b minúscula), y el tamaño de los archivos en megabytes (MB, con B mayúscula). Como un byte son 8 bits, con una conexión de 100 Mbps se descargan, como mucho, unos 12,5 MB por segundo.

Archivos, carpetas y extensiones

Un archivo es un conjunto de datos guardado con un nombre: una foto, un documento, un programa. Las carpetas sirven para ordenarlos, y pueden contener otras carpetas. El camino desde la carpeta principal hasta un archivo se llama ruta.

Extensiones

La extensión son las letras que van después del último punto del nombre de un archivo. Indican qué tipo de archivo es y con qué programa se abre:

Truco: por defecto, Windows y macOS esconden las extensiones. Actívalas: en Windows, Explorador → Ver → Extensiones de nombre de archivo; en Mac, Finder → Ajustes → Avanzado → Mostrar todas las extensiones. Así sabrás siempre con qué tipo de archivo trabajas.

Organizar tus archivos

Trabajarás con muchos archivos: originales, versiones, exportaciones. Una estructura clara desde el primer día te ahorrará muchos disgustos:

medios-i/
├── tema-1/
├── tema-4-photoshop/
│   ├── originales/
│   └── exportados/
└── tema-5-illustrator/

• Nombres en minúsculas, sin espacios, tildes ni eñes, con guiones: cartel-festival-v2.psd.
• Separa los originales (los archivos de trabajo, como .psd o .ai) de los exportados (las imágenes finales, como .jpg o .png).
• Guarda versiones numeradas en lugar de sobrescribir siempre el mismo archivo.

Local, nube y copias de seguridad

Un archivo local está guardado en tu ordenador; uno en la nube está guardado en un servidor de internet (Google Drive, iCloud, OneDrive…) y se puede abrir desde cualquier dispositivo. Ningún sistema es infalible: los discos se estropean y los portátiles se pierden.

Idea clave: la regla de las copias de seguridad dice que tengas al menos tres copias de lo importante, en dos soportes distintos y una fuera de casa (por ejemplo, en la nube). Un trabajo de todo un trimestre no debería existir en un único sitio.

Práctica

1. Conoce tu ordenador. Averigua el procesador, la memoria RAM y el almacenamiento de tu ordenador (en Windows: Configuración → Sistema → Información; en Mac: menú Apple → Acerca de este Mac). ¿Es suficiente para trabajar con Photoshop?
2. Del binario al decimal. Convierte a decimal 00001010, 01100100 y 11111111. Después, al revés: escribe en binario tu edad. Comprueba los resultados con el ejemplo interactivo.
3. ¿Cuánto ocupa? Busca en tu móvil u ordenador una foto, una canción y un vídeo, y anota cuánto pesa cada uno. ¿Cuántas fotos como esa caben en una memoria USB de 32 GB?
4. Organízate. Activa las extensiones de archivo y crea la estructura de carpetas para la asignatura, con nombres bien escritos. Configura una copia de esa carpeta en la nube.

Mapa de bits y vectorial

Antes de nada, hay que distinguir los dos grandes tipos de imagen digital. Se guardan de formas completamente distintas, se editan con programas distintos y se comportan de forma distinta al cambiar de tamaño.

Dos palabras que oirás mucho: rasterizar es convertir una imagen vectorial en mapa de bits (pasa, por ejemplo, al exportar un logotipo a PNG); vectorizar es lo contrario, redibujar un mapa de bits con formas vectoriales, a mano o con herramientas como el Calco de imagen de Illustrator.

La diferencia más clara se ve al ampliar. Usa el control:

El círculo de mapa de bits está hecho de 24 × 24 píxeles: al ampliarlo, los píxeles se hacen grandes y el borde se vuelve escalonado. El vectorial se vuelve a dibujar a cada tamaño y siempre se ve nítido.

Por eso se dice que una imagen vectorial es reescalable: se puede ampliar o reducir todo lo que haga falta sin perder calidad. Para el ordenador, ampliar un círculo vectorial al doble es sólo multiplicar por dos su radio y las coordenadas de su centro, y volver a dibujarlo. Una imagen de mapa de bits, en cambio, tiene los píxeles que tiene: al ampliarla, el programa tiene que inventarse los que faltan.

Usos más frecuentes

En muchos trabajos se combinan los dos: un cartel lleva una foto (mapa de bits) con el logotipo y el texto en vectorial; una web, fotos en JPG o WebP e iconos en SVG. Programas como Illustrator, InDesign o Figma, y formatos como el PDF, admiten las dos cosas a la vez.

Antes de empezar: ¿cuál necesito?

Antes de abrir ningún programa, hay que decidir con qué tipo de imagen se va a trabajar. Esa decisión marca el programa, la forma de trabajar y el formato final, y equivocarse al principio obliga a repetir el trabajo. Hazte estas preguntas:

1. ¿Parte de una fotografía, o necesita texturas, sombras y degradados complejos? Mapa de bits.
2. ¿Se va a usar a tamaños muy distintos, como un logotipo, que irá en una tarjeta, en una web y en una lona? Vectorial.
3. ¿Está hecho de formas y colores planos, como un icono, un pictograma o una infografía? Vectorial.
4. ¿Se va a producir con una máquina que sigue trazados, como un plóter de corte de vinilo o una cortadora láser? Vectorial, obligatoriamente.
5. ¿Dónde y a qué tamaño se va a usar? Si es mapa de bits, de esto dependen las dimensiones y la resolución con las que hay que crearlo desde el principio (lo vemos en los apartados siguientes).

Una fotografía, por su naturaleza, siempre es un mapa de bits: la cámara registra la luz punto a punto. Las tres dimensiones que vemos a continuación (dimensiones, resolución y profundidad de color) son las de las imágenes de mapa de bits.

Idea clave: un logotipo debe diseñarse siempre en vectorial, porque se usará a tamaños muy distintos: desde el icono de una pestaña hasta una lona. De un vectorial siempre se puede sacar un mapa de bits del tamaño que haga falta; al revés no, o no con buena calidad.

Dimensiones

Toda imagen de mapa de bits se describe con tres dimensiones:

Una imagen de mapa de bits es una cuadrícula de puntos de color. Cada uno de esos puntos es un píxel (de picture element, elemento de imagen): la unidad mínima de la imagen, un cuadradito de un único color. Si amplías mucho una foto, acabas viéndolos.

Las dimensiones de la imagen son cuántos píxeles tiene de ancho y de alto: por ejemplo, 4000 × 3000 píxeles. Multiplicando las dos cifras se obtiene el total: 4000 × 3000 = 12.000.000 de píxeles, es decir, 12 megapíxeles, la cifra que se usa para hablar de las cámaras.

Es la dimensión más importante: decide cuánto detalle cabe en la imagen y, en pantalla, a qué tamaño se ve.

Idea clave: agrandar una imagen no añade detalle. Si una foto tiene pocos píxeles, al ampliarla el programa se inventa los que faltan (eso se llama interpolación) y el resultado se ve borroso. Por eso hay que partir siempre de imágenes con suficientes píxeles para el uso final.

Resolución

La resolución indica cuántos píxeles caben en cada pulgada (2,54 cm) cuando la imagen se imprime. Se mide en ppp (píxeles por pulgada, en inglés ppi; en impresión también se habla de dpi, puntos por pulgada).

• Para imprimir con buena calidad se necesitan unos 300 ppp: los píxeles quedan tan juntos que el ojo no los distingue.
• En pantalla, lo único que importa son las dimensiones en píxeles. El valor de ppp guardado en el archivo no cambia nada.

Con las dimensiones y la resolución se calcula a qué tamaño se puede imprimir una imagen:

tamaño de impresión (cm) = píxeles ÷ ppp × 2,54

4000 px ÷ 300 ppp × 2,54 = 33,9 cm de ancho
3000 px ÷ 300 ppp × 2,54 = 25,4 cm de alto

La misma imagen a 150 ppp se imprimiría al doble de tamaño, pero con los píxeles el doble de separados: se verían. La resolución no cambia los píxeles que hay, sólo cómo se reparten sobre el papel.

Ojo: verás muchas veces que «las imágenes para web tienen que estar a 72 ppp». Es un mito heredado de las primeras pantallas: en web sólo cuentan los píxeles. Una imagen de 1200 px de ancho se ve igual de grande en una web esté guardada a 72 o a 300 ppp.

Profundidad de color

¿Cómo se guarda el color de cada píxel? Con bits, como todo en el ordenador (Tema 1). La profundidad de color es el número de bits que se usan para cada píxel, y decide cuántos colores distintos puede haber en la imagen:

Cada bit más duplica el número de tonos posibles. Con 8 bits (un byte) hay 256 tonos: lo justo para que una escala de grises se vea continua.

Del gris al color: 24 bits

Una imagen en color usa tres canales, rojo, verde y azul, y cada uno tiene 8 bits (256 niveles). En total, 3 × 8 = 24 bits por píxel, que permiten 256 × 256 × 256 = 16.777.216 colores. A esto se le suele llamar «color de 8 bits por canal» o «color real».

• 8 bits por canal es lo habitual para web y para la mayoría de trabajos.
• 16 bits por canal se usa en fotografía y retoque profesional: da margen para hacer ajustes fuertes sin que aparezcan escalones (llamados bandas) en los degradados.

Las tres juntas: cuánto pesa una imagen

Con las tres dimensiones ya se puede calcular cuánto ocupa una imagen sin comprimir: píxeles totales (dimensiones) por bytes por píxel (profundidad de color). La resolución no interviene: cambiar los ppp no cambia el peso, porque no cambia el número de píxeles.

4000 × 3000 píxeles = 12.000.000 píxeles
12.000.000 × 3 bytes (24 bits) = 36.000.000 bytes ≈ 34 MB

Y sin embargo, la misma foto en JPG puede ocupar 4 MB. La diferencia es la compresión, que vemos en el último apartado.

Formatos y compresión

Una imagen sin comprimir ocupa muchísimo (ya vimos que una foto de 12 megapíxeles pasa de 30 MB). Los formatos de imagen se diferencian sobre todo en cómo comprimen los datos y en qué guardan además de los píxeles.

Compresión con pérdida y sin pérdida

• Sin pérdida: reduce el tamaño reorganizando los datos de forma más eficiente, sin cambiar ni un píxel. Al abrir la imagen, es idéntica a la original. Es como guardar una carpeta en un archivo .zip.
• Con pérdida: elimina información que el ojo apenas percibe para reducir mucho más el tamaño. Cuanto más se comprime, más se nota (aparecen manchas y bloques, llamados artefactos), y cada vez que se vuelve a guardar se pierde algo más.

Los formatos más habituales

Idea clave: distingue siempre el archivo de trabajo (PSD, AI), que conserva capas y se puede seguir editando, del archivo final (JPG, PNG, SVG, PDF), que es el que se entrega o se publica. Guarda los dos. En los temas de Photoshop e Illustrator veremos cómo exportar cada formato con los ajustes adecuados.

Práctica

1. Píxeles y tamaño de impresión. Abre una foto de tu móvil y busca sus dimensiones en píxeles (en las propiedades o la información del archivo). ¿Cuántos megapíxeles tiene? ¿A qué tamaño máximo podrías imprimirla a 300 ppp?
2. Peso sin comprimir. Calcula cuánto ocuparía esa foto sin comprimir a 24 bits y compáralo con lo que ocupa realmente. ¿Cuántas veces la ha reducido la compresión?
3. ¿Mapa de bits o vectorial? Para cada caso, decide qué tipo de imagen y qué formato usarías, y por qué: la foto de un producto para una tienda online, el logotipo de un festival, un icono para una web, un cartel para imprimir en una imprenta, una ilustración con transparencia para una red social.

Color luz y color pigmento

Cuando hablamos de color, en realidad hablamos de dos cosas distintas, que se comportan de forma opuesta:

• El color luz es el de todo lo que emite luz: el sol, una bombilla, un foco, un proyector y, sobre todo, las pantallas (del ordenador, del móvil, de la tele).
• El color pigmento es el de la materia: pinturas, tintas, tintes, el color de los objetos. Un pigmento no emite luz: refleja parte de la que recibe y absorbe el resto.

Fíjate: en pintura seguramente aprendiste que los primarios son rojo, amarillo y azul. Es el modelo tradicional de los pintores. El cian, el magenta y el amarillo son una versión más precisa de esos mismos primarios, y con ellos se consigue una gama de mezclas mucho más amplia: por eso los usan las impresoras.

En Gráfica Interactiva trabajamos sobre todo para pantallas y dispositivos digitales, así que en este tema nos centramos en el color luz. El color pigmento aparecerá cuando haya que preparar un trabajo para imprimir, al convertirlo de RGB a CMYK.

La luz y el espectro

El color no está en los objetos: es una percepción, lo que nuestro cerebro interpreta a partir de la luz que llega a los ojos. Por eso, sin luz, no hay color.

La luz es una forma de energía que viaja en ondas. Según la longitud de esas ondas (medida en nanómetros, nm, milésimas de milésima de milímetro), la percibimos como un color u otro. El conjunto de todas las longitudes de onda es el espectro electromagnético, y sólo una pequeña parte, entre unos 380 y 750 nm, es visible para el ojo humano: el espectro visible.

El espectro abarca desde las ondas de radio, que pueden medir kilómetros, hasta los rayos gamma, con ondas más pequeñas que un átomo. Todas son la misma clase de energía; lo único que cambia es la longitud de onda. La luz que vemos es una franja estrechísima en medio:

• Las ondas más cortas se ven violetas y azules; las más largas, naranjas y rojas.
• Por debajo del violeta está la luz ultravioleta y por encima del rojo, la infrarroja: existen, pero no las vemos.

La luz blanca contiene todos los colores

En el siglo XVII, Isaac Newton hizo pasar un rayo de sol por un prisma de cristal y comprobó que la luz blanca se descomponía en los colores del arcoíris, y que al volver a juntarlos se obtenía de nuevo luz blanca. La luz blanca es, por tanto, la suma de todas las longitudes de onda visibles. Un arcoíris es exactamente eso: las gotas de lluvia hacen de prisma.

Por qué vemos un objeto de un color

Cuando la luz blanca ilumina un objeto, éste absorbe unas longitudes de onda y refleja otras. Las que refleja son las que llegan a nuestros ojos y determinan el color que vemos. Un tomate se ve rojo porque absorbe casi toda la luz menos la roja; una hoja de papel se ve blanca porque las refleja todas, y una camiseta negra, porque las absorbe casi todas.

Cómo vemos el color

En la retina del ojo hay dos tipos de células sensibles a la luz:

• Los bastones, muy sensibles a la cantidad de luz pero no al color. Son los que usamos con poca luz, por eso de noche lo vemos todo en tonos grises.
• Los conos, que perciben el color. Hay tres tipos, sensibles sobre todo a las longitudes de onda largas, medias y cortas: a grandes rasgos, al rojo, al verde y al azul.

El cerebro compara cuánto se estimula cada tipo de cono y a partir de ahí «construye» todos los colores. Esta es la clave de todo el color digital: como el ojo sólo tiene tres tipos de receptores, basta con mezclar tres luces (roja, verde y azul) para engañarlo y hacerle ver cualquier color. Es lo que hacen todas las pantallas.

Fíjate: acerca mucho la vista a una pantalla, o mírala con una lupa o con la cámara del móvil ampliando al máximo. Verás que está formada por diminutos puntos rojos, verdes y azules. El blanco de la pantalla no existe: son los tres encendidos a la vez.

El daltonismo

Cuando uno de los tres tipos de conos no funciona o funciona de forma diferente, la persona confunde algunos colores, sobre todo los rojos y los verdes. Es el daltonismo, y afecta aproximadamente a 1 de cada 12 hombres y a 1 de cada 200 mujeres. Lo tendremos en cuenta al hablar del color en pantalla.

Propiedades del color

Cualquier color se puede describir con tres propiedades. Juega con los controles para ver cómo afecta cada una:

• Tono (o matiz): el color en sí, lo que lo hace rojo, amarillo o azul. Se mide en grados (de 0 a 360°) sobre el círculo cromático: el 0° es rojo, el 120° verde y el 240° azul.
• Saturación: la pureza o intensidad del color. Al 100 % es el color más vivo; al bajarla, se va agrisando hasta quedar en gris al 0 %.
• Luminosidad: lo claro u oscuro que es. Al 0 % es negro y al 100 %, blanco.

Esta forma de describir el color se llama HSL (Hue, Saturation, Lightness). Es la más intuitiva para crear variaciones: para hacer una versión más clara de un color sólo hay que subir la luminosidad, sin tocar el tono. Por eso la usan los selectores de color de Photoshop, Illustrator o Figma (a veces con una variante llamada HSB, de brightness, brillo).

Fíjate: el selector empieza en el color de acento de esta web. Debajo de la muestra verás cómo cambian su código hexadecimal y su RGB: son tres formas de escribir el mismo color.

Colores cálidos y fríos

Según su tono, los colores se perciben como cálidos (rojos, naranjas, amarillos), que parecen acercarse y transmiten energía, o fríos (azules, verdes, violetas), que parecen alejarse y transmiten calma. Es una de las razones por las que los botones de acción suelen ser de colores cálidos y saturados: llaman la atención.

Síntesis aditiva y sustractiva

Al principio del tema vimos que el color luz y el color pigmento se mezclan de forma opuesta. Ahora que sabemos cómo vemos el color, veamos cómo funciona cada mezcla: la de la pantalla, que emite luz, y la del papel, que la refleja.

RGB: el color de la luz

Las pantallas forman los colores mezclando luz roja, verde y azul (Red, Green, Blue). Es una síntesis aditiva: cuanta más luz se suma, más claro es el resultado. Los tres al máximo dan blanco; los tres apagados, negro.

CMYK: el color de la tinta

En imprenta, los colores se forman con tintas cian, magenta, amarillo y negro. Es una síntesis sustractiva: cada tinta absorbe (resta) parte de la luz, y cuanta más tinta, más oscuro. En teoría, cian, magenta y amarillo juntos darían negro; en la práctica dan un marrón oscuro, y por eso se añade una tinta negra.

¿Por qué K? La explicación más aceptada es que viene de key, «clave» en inglés: en imprenta, la plancha del negro es la que lleva los detalles y sirve de referencia para encajar las demás. También se dice que es la última letra de black (negro), para no confundirla con la B de blue (azul). Sea cual sea el origen, la K es el negro.

Mezcla tú las luces

Tres focos, uno rojo, uno verde y uno azul, apuntando a una pared negra. Sube y baja la intensidad de cada uno y fíjate en el color del centro, donde se suman los tres:

Así es exactamente como funciona tu pantalla: cada píxel tiene tres pequeñas luces, y el color que ves es la mezcla de sus intensidades. Los números que acabas de mover son los mismos que se escriben en RGB o en hexadecimal.

Ausencia y suma de todos los colores

Las dos síntesis funcionan al revés, y se ve muy claro en sus extremos:

Primarios y secundarios

Al mezclar dos primarios a partes iguales se obtiene un secundario. Y aquí está lo más curioso: los secundarios de una síntesis son los primarios de la otra.

Compruébalo en los círculos de arriba: donde se cruzan dos luces aparecen el cian, el magenta y el amarillo, y donde se cruzan dos tintas, el rojo, el verde y el azul. Cada primario aditivo tiene enfrente su complementario, que es el secundario formado por los otros dos: el rojo y el cian, el verde y el magenta, el azul y el amarillo.

Idea clave: ahora se entiende por qué: la pantalla suma luces partiendo del negro (pantalla apagada), como hace el ojo con sus tres conos. El papel parte del blanco y cada tinta quita una parte de la luz que refleja.

Modelos y espacios de color

Un modelo de color es una forma de describir los colores con números. Ya conoces los principales:

• RGB: para pantallas. Cantidad de rojo, verde y azul.
• CMYK: para imprenta. Porcentaje de cada tinta.
• HSL / HSB: tono, saturación y luminosidad. Una forma más intuitiva de expresar los colores RGB.
• Escala de grises: sólo la luminosidad.

Cada dispositivo, su modo de color

Cada dispositivo capta o reproduce el color a su manera, con su propio modo de color. Lo que emite luz o la capta trabaja en RGB; lo que pone tinta sobre papel, en CMYK:

Por eso una imagen cambia de modo a lo largo de su vida. Piensa en una foto para un cartel: la tomas con el móvil (RGB), la retocas viéndola en el monitor (RGB) y, para llevarla a imprenta, hay que convertirla a CMYK. En cada paso, el color se traduce de un sistema a otro, y en esa traducción puede cambiar. En Photoshop, el modo de un documento se cambia en Imagen › Modo.

Fíjate: aunque dos dispositivos usen el mismo modo, no tienen por qué ver el color igual. Un iPhone y un portátil barato trabajan los dos en RGB, pero el iPhone reproduce colores más saturados (usa un espacio llamado Display P3, más amplio que el sRGB). Lo vemos un poco más abajo, en los perfiles de color.

Formas de escribir un color RGB

Un mismo color RGB se puede expresar de varias formas, y las encontrarás en todos los programas de diseño y en el código:

Si quieres ver en detalle cómo se lee un color hexadecimal, lo tienes en Programación I, Tema 5.

Escala de grises

Una imagen en escala de grises tiene un solo canal en lugar de tres: cada píxel guarda sólo su luminosidad, de 0 (negro) a 255 (blanco). Ocupa un tercio que la misma imagen en color.

Por qué un color no sale igual impreso

No todos los colores que se ven en una pantalla se pueden imprimir. El conjunto de colores que puede reproducir un medio se llama gama (en inglés, gamut), y la del CMYK es más pequeña que la del RGB: los verdes, azules y naranjas muy saturados de la pantalla salen más apagados en papel.

• Para pantalla (web, redes, vídeo): trabaja en RGB.
• Para imprenta: el archivo final debe estar en CMYK, y conviene revisar los colores al convertirlo, porque pueden cambiar.

Perfiles de color

Cada pantalla y cada impresora reproducen los colores de forma algo distinta. Los perfiles de color son descripciones que permiten que un color se vea lo más parecido posible en todos los dispositivos. Por ahora, basta con conocer éstos:

• sRGB: el estándar para pantallas y para la web. Si dudas, usa éste.
• Adobe RGB: una gama más amplia, usada en fotografía profesional.
• Display P3: también más amplia que el sRGB; es la de las pantallas de Apple y de muchos móviles actuales.
• Perfiles CMYK de imprenta (en Europa es muy habitual uno llamado FOGRA39): te lo indicará la imprenta.

El color en pantalla

Al diseñar para pantalla, el color no sólo tiene que ser bonito: tiene que funcionar para todo el mundo y en cualquier dispositivo.

• Contraste suficiente: el texto debe destacar bien sobre su fondo. Las pautas de accesibilidad piden una relación mínima de 4,5 : 1 para el texto normal. Puedes comprobarlo con el comprobador de contraste de Recursos.
• No depender sólo del color: por el daltonismo, si algo se comunica con color (un error en rojo, un acierto en verde), comunícalo también con texto o con un icono.
• Cada pantalla es distinta: el mismo color puede verse algo diferente en un móvil, un portátil o un monitor calibrado. Revisa tus diseños en varios dispositivos.
• Modo claro y modo oscuro: muchas webs y aplicaciones tienen las dos versiones. Un color de acento que funciona sobre blanco puede necesitar una versión más clara sobre fondo oscuro.

Temperatura de color y calibrado

La temperatura de color

La luz «blanca» no siempre es igual: la de una vela es anaranjada, la del mediodía es neutra y la de un día nublado, azulada. Esa diferencia se mide con la temperatura de color, en grados kelvin (K):

• Las temperaturas bajas (2000–3500 K) dan una luz cálida, anaranjada.
• Las temperaturas altas (7000 K o más) dan una luz fría, azulada.
• La luz de día neutra está entre 5000 y 6500 K.

Ojo: es al revés de lo que parece. Lo que llamamos «colores cálidos» (naranjas) corresponde a temperaturas bajas, y los «fríos» (azules), a temperaturas altas. El nombre viene de la física: un metal calentado pasa del rojo al blanco y al azul a medida que sube su temperatura.

Por qué hay que calibrar el monitor

Cada pantalla sale de fábrica con su propia temperatura, brillo y forma de mostrar los colores, y además va cambiando con el uso. Casi todas vienen demasiado brillantes y algo frías (azuladas), porque así llaman más la atención en la tienda. Las consecuencias para quien diseña:

• Si tu pantalla es muy brillante, oscurecerás tus imágenes sin darte cuenta, y al imprimirlas saldrán oscuras.
• Si tiende al azul, corregirás tus fotos hacia el naranja y en otras pantallas se verán amarillentas.
• Lo que ves no es lo que ve tu cliente ni lo que sale de la imprenta.

Si trabajas con un portátil

La mayoría de portátiles tienen pocas opciones de ajuste: no permiten cambiar la temperatura de color ni el contraste desde la propia pantalla, sólo el brillo. Además, muchas pantallas de portátil, sobre todo las de gama económica, no son capaces de mostrar todos los colores del estándar sRGB: los ven algo apagados aunque estén bien ajustadas. Y el color y el brillo cambian según la inclinación de la tapa. No se puede conseguir una pantalla perfecta, pero sí mucho más fiable:

• Pon la pantalla de frente, siempre con una inclinación parecida, y el brillo en un nivel medio y fijo.
• Si el sistema o el fabricante ofrecen un modo de color (por ejemplo «sRGB» o «estándar»), elígelo en lugar de los modos «vivo» o «cine».
• Pasa el asistente de calibración del sistema operativo: no hace milagros, pero corrige lo más evidente.
• Comprueba tus trabajos en otros dispositivos (tu móvil, un ordenador del aula) antes de darlos por buenos. Si en todos se ve razonablemente bien, vas por buen camino.
• Para trabajos de color exigentes (fotografía, imprenta), conecta el portátil a un monitor externo de calidad, que sí se puede calibrar bien.

Qué quiere decir que una pantalla «no muestra todos los colores»

Recuerda la gama (gamut) del apartado de modelos de color: el conjunto de colores que puede reproducir un dispositivo. El estándar para pantallas y web es el sRGB, y las características de una pantalla indican qué parte de él es capaz de mostrar, en porcentaje:

Por eso calibrar una pantalla corrige el tono, el brillo y el contraste, pero no puede añadir colores que la pantalla no tiene.

Por qué cambia el color al inclinar la pantalla

Depende del tipo de panel. En los paneles más baratos (llamados TN), el color y el brillo cambian mucho según el ángulo desde el que se miran: basta con inclinar un poco la tapa para que todo se vea más claro o más oscuro. Los paneles IPS y OLED mantienen mucho mejor el color desde cualquier ángulo, y son los recomendables para diseñar.

Truco: si vas a comprar un portátil para el ciclo, busca en sus características el tipo de panel (IPS u OLED) y la cobertura de color (cerca del 100 % sRGB). Son dos datos que casi nunca aparecen en la publicidad, pero que importan más para diseñar que el procesador.

El entorno de trabajo también cuenta

• Desactiva los modos de luz nocturna (Night Shift en Mac, Luz nocturna en Windows) mientras trabajas con color: vuelven la pantalla anaranjada a propósito.
• Desactiva el brillo automático y el ajuste automático del color de la pantalla (True Tone en algunos Mac).
• Trabaja con una luz ambiente neutra y constante, sin reflejos ni luz directa sobre la pantalla.

Para saber más: calibrar el monitor paso a paso

Las pantallas también tienen una temperatura de color: la de su blanco. El estándar para pantallas y para la web es 6500 K (se le llama D65), y para revisar trabajos que se van a imprimir se usa a menudo 5000 K (D50), más parecido a la luz con la que se mira el papel.

Calibrar es ajustar el monitor a unos valores de referencia; perfilar es medir cómo reproduce los colores y guardar esa información en un perfil de color (un archivo ICC) que el sistema usa para corregirlos. Se hace con un colorímetro: un pequeño aparato que se coloca sobre la pantalla mientras un programa muestra colores y los mide.

Ajuste	Valor habitual	Qué significa
Punto blanco	6500 K (D65)	La temperatura de color del blanco de la pantalla.
Luminancia (brillo)	100–120 cd/m²	Más bajo que el de fábrica. Para revisar trabajos de impresión, incluso algo menos.
Gamma	2,2	Cómo se reparten los tonos entre el negro y el blanco. Es el estándar de Windows y macOS.

Sin colorímetro también se puede mejorar bastante: Windows y macOS incluyen un asistente de calibración que guía para ajustar el brillo, el contraste y la gamma a ojo.

• En Windows: busca «Calibrar el color de la pantalla» en el menú Inicio.
• En Mac: Ajustes del Sistema → Pantallas → Perfil de color → Calibrar (en algunos modelos aparece como opción del menú del perfil).

Las pantallas cambian con el tiempo, así que conviene recalibrar cada uno o dos meses.

Idea clave: no puedes controlar las pantallas de quien vea tu trabajo, pero sí la tuya. Una pantalla calibrada es tu referencia fiable: si el color es correcto en ella, estará lo más cerca posible de ser correcto en todas partes. Y para imprenta, nada sustituye a pedir una prueba de color impresa antes de la tirada.

Práctica

1. El prisma. Busca un CD, un prisma o un vaso de agua al sol y consigue un pequeño arcoíris. Fotografíalo y explica qué está pasando con la luz.
2. Los píxeles de tu pantalla. Fotografía de muy cerca una zona blanca de una pantalla con la cámara del móvil ampliada. ¿Qué ves?
3. Colores de marca. Busca el color principal del logotipo de tres marcas conocidas con el cuentagotas de cualquier programa o con una herramienta como Coolors. Anota cada uno en hexadecimal, en RGB y en HSL, y descompón el hexadecimal en sus tres canales.
4. Variaciones. Elige uno de esos colores y, con el selector de este tema, crea una versión más clara y otra más oscura cambiando sólo la luminosidad. Anota los tres códigos hexadecimales.
5. Contraste. Comprueba con el comprobador de contraste si el color de cada marca se podría usar para texto sobre fondo blanco.
6. Tu pantalla. Activa y desactiva la luz nocturna de tu ordenador mirando una foto con blancos: fíjate en cuánto cambia. Después, pasa el asistente de calibración de tu sistema operativo y compara la foto antes y después.

Primeros pasos

El espacio de trabajo

Al abrir un documento, la pantalla de Photoshop se organiza siempre igual:

• Barra de menús: todas las órdenes del programa, agrupadas.
• Barra de herramientas: a la izquierda. Las herramientas con un triangulito en la esquina esconden otras parecidas: mantén pulsado para verlas.
• Barra de opciones: arriba, debajo del menú. Muestra los ajustes de la herramienta que tienes seleccionada (el tamaño del pincel, la opacidad…). Mírala siempre: muchas veces lo que «no funciona» es una opción que se quedó cambiada.
• Paneles: a la derecha. El más importante es el de Capas. Si desaparece alguno, búscalo en el menú Ventana. Si se te desordena todo, Ventana › Espacio de trabajo › Restaurar.

Crear un documento nuevo

En Archivo › Nuevo eliges las características del documento. Son las de los temas 2 y 3:

Moverse por el documento

Antes de dibujar nada, conviene manejar con soltura la vista. Ampliar o alejar no cambia la imagen, sólo cómo la miras:

Truco: el panel Historia (menú Ventana) guarda los últimos pasos que has dado. Puedes volver a cualquiera de ellos con un clic.

Tamaño de imagen y tamaño de lienzo

Son dos órdenes del menú Imagen que se confunden mucho, y hacen cosas muy distintas:

• Tamaño de imagen cambia la imagen entera: la amplía o la reduce, con todo lo que contiene.
• Tamaño de lienzo cambia el «papel» sobre el que está la imagen, sin tocar su contenido: añade espacio alrededor o recorta por los bordes.

La casilla «Remuestrear»

En Imagen › Tamaño de imagen aparecen las tres dimensiones del Tema 2. La casilla Remuestrear decide qué pasa con los píxeles:

Idea clave: para web, reduce la imagen a las dimensiones en píxeles con las que se va a ver (por ejemplo, 1600 px de ancho para una imagen a todo lo ancho), con Remuestrear activado. Y nunca la amplíes por encima de su tamaño original: la interpolación no inventa detalle.

Recortar

La herramienta Recortar (C) elimina lo que queda fuera del marco. En la barra de opciones puedes fijar una proporción (1:1, 16:9…) y enderezar una foto torcida. Si desactivas Eliminar píxeles recortados, lo que recortas queda oculto, no borrado, y podrás recuperarlo después.

Capas

Las capas son como hojas de acetato transparente apiladas: cada una contiene una parte de la imagen, y donde una capa es transparente se ve la de debajo. Trabajar en capas separadas permite mover, cambiar o borrar cada elemento sin estropear los demás.

Prueba: oculta capas con el ojo y cambia su orden con las flechas.

Fíjate en que el panel se lee de arriba abajo: la capa que está más arriba en la lista es la que queda delante en la imagen. La capa Fondo está bloqueada (el candado): no se puede mover ni tener transparencia. Si necesitas editarla, haz doble clic sobre ella para convertirla en una capa normal.

Tipos de capa

• Capas de píxeles: las normales, donde se pinta o se pega una imagen.
• Capas de texto (T): el texto sigue siendo editable mientras no la conviertas en píxeles.
• Capas de forma: rectángulos, elipses, polígonos. Son vectoriales, así que se pueden escalar sin perder calidad.
• Capas de ajuste: cambian el color o el tono de las capas de debajo sin modificarlas. Las vemos más abajo.

Trabajar con capas

• Pon nombre a las capas (doble clic sobre el nombre). Con veinte capas llamadas «Capa 1 copia 3», no encontrarás nada.
• Agrupa las capas relacionadas en carpetas: selecciónalas y pulsa Ctrl/Cmd + G.
• Duplica una capa antes de hacerle un cambio arriesgado: Ctrl/Cmd + J.
• Opacidad: en la parte de arriba del panel. Hace la capa más o menos transparente.
• Transformar (escalar, girar): Ctrl/Cmd + T. Pulsa Intro para aplicar.

Ojo: si pintas y no pasa nada, o pasa en otro sitio, casi siempre es porque tienes seleccionada otra capa. Mira cuál está resaltada en el panel antes de hacer nada.

Para saber más: objetos inteligentes y modos de fusión

Objetos inteligentes. Si conviertes una capa en objeto inteligente (clic derecho › Convertir en objeto inteligente), Photoshop guarda el original dentro. Así puedes reducirla y volver a ampliarla sin perder calidad, y los filtros que le apliques se pueden editar o quitar después. Cuando colocas una imagen con Archivo › Colocar, entra ya como objeto inteligente.

Modos de fusión. El menú desplegable que hay junto a la opacidad decide cómo se mezclan los píxeles de una capa con los de debajo. Los más útiles:

• Multiplicar: oscurece; el blanco desaparece. Sirve para poner un dibujo escaneado sobre un color o una textura.
• Trama: aclara; el negro desaparece. Útil para luces, destellos o texturas claras.
• Superponer: aumenta el contraste mezclando las dos cosas. Se usa mucho con texturas.
• Color: aplica el tono y la saturación de la capa manteniendo la luminosidad de debajo. Sirve para colorear una foto en blanco y negro.

Selecciones y máscaras

Una selección delimita la zona de la imagen en la que vas a trabajar: lo que hagas sólo afectará a lo que está dentro. Se ve como una línea discontinua en movimiento (las «hormigas»).

Para añadir a una selección, mantén pulsada Mayús; para restar, Alt/Opción. Para deseleccionar, Ctrl/Cmd + D.

Máscaras de capa

Para quitar el fondo de una foto, lo primero que se te ocurre es borrarlo. Pero lo borrado no se puede recuperar. La alternativa es una máscara de capa: una imagen en escala de grises unida a la capa que decide qué partes se ven y cuáles no, sin borrar ni un píxel.

Idea clave: en una máscara, el blanco muestra y el negro oculta. Los grises dejan ver la capa a medias.

1. Selecciona lo que quieres conservar (por ejemplo, con Seleccionar sujeto).
2. En el panel Capas, pulsa el botón Añadir máscara (un rectángulo con un círculo). Lo seleccionado queda en blanco y el resto, en negro.
3. Para corregir, pinta sobre la máscara con el Pincel (B): en negro para ocultar más, en blanco para recuperar. Con X intercambias los dos colores.

Trabajar así se llama edición no destructiva: todo se puede corregir después, porque la imagen original sigue intacta.

Ajustes de color y tono

Los ajustes cambian la luminosidad, el contraste y el color de una imagen. Están en Imagen › Ajustes, pero es mejor aplicarlos como capas de ajuste (Capa › Nueva capa de ajuste, o el círculo mitad negro, mitad blanco del panel Capas): afectan a todo lo que queda debajo, se pueden cambiar en cualquier momento y traen su propia máscara para aplicarlos sólo en una zona.

El histograma

El histograma es un gráfico que muestra cuántos píxeles hay de cada luminosidad, de las sombras (a la izquierda) a las luces (a la derecha):

Los ajustes más útiles

Idea clave: menos es más. Un ajuste bien hecho no se nota. Activa y desactiva el ojo de la capa de ajuste para comparar el antes y el después, y si el cambio canta, baja su opacidad.

Retoque

Retocar es eliminar lo que sobra en una imagen: manchas, polvo, granos, cables, una persona que pasaba por detrás. Para no estropear el original, crea una capa vacía encima, retoca en ella y activa en la barra de opciones Muestrear todas las capas.

Ojo: con el tampón, cambia a menudo el punto de origen. Si copias siempre de la misma zona, se notan las repeticiones.

Las herramientas de inteligencia artificial (como el relleno generativo) añaden contenido nuevo a partir de una descripción escrita. Son útiles para ampliar un fondo o quitar un objeto, pero lo que generan no es real: úsalas con criterio y nunca para engañar con una foto documental o periodística.

Guardar y exportar

En el Tema 2 vimos la diferencia entre el archivo de trabajo y el archivo final. En Photoshop:

• Guardar (Ctrl/Cmd + S) en formato PSD: conserva las capas, las máscaras, los textos editables y las capas de ajuste. Es tu original: guárdalo siempre.
• Exportar crea una copia final, aplanada (todas las capas fundidas en una), en el formato que se va a usar. El PSD no cambia.

Exportar para pantalla y web

Usa Archivo › Exportar › Exportar como. En la ventana eliges el formato, las dimensiones y la calidad, y ves el peso del archivo antes de guardarlo:

Antes de exportar, comprueba también:

• Las dimensiones en píxeles son las que se van a usar, ni más ni menos.
• El espacio de color es sRGB (opción Convertir a sRGB).
• El nombre del archivo está en minúsculas, sin espacios ni tildes: cartel-festival-1600.jpg.
• El peso es razonable: para una foto grande en web, por debajo de unos 300 KB.

Exportar para imprimir

Para imprenta se suele entregar un PDF (Archivo › Guardar como › Photoshop PDF) o un TIFF, a 300 ppp y en el modo de color que pida la imprenta. Pregunta siempre antes: cada imprenta tiene sus especificaciones (perfil de color, sangrado, formato).

Práctica

1. Tamaño de imagen. Abre una foto de tu móvil. Con Remuestrear desactivado, ponla a 300 ppp y anota a qué tamaño se imprimiría. Después, con Remuestrear activado, redúcela a 1600 px de ancho y expórtala en JPG. Compara el peso del original y el exportado.
2. Composición en capas. Crea un documento de 1080 × 1350 px (el formato vertical de Instagram) y monta una composición con una foto de fondo, una forma de color y un texto, cada uno en su capa y con nombre. Prueba al menos un modo de fusión.
3. Quitar el fondo. Recorta a una persona u objeto de su fondo con una selección y una máscara de capa, sin borrar nada, y colócalo sobre otro fondo. Corrige los bordes pintando en la máscara.
4. Corregir una foto. Elige una foto oscura o apagada y corrígela sólo con capas de ajuste (Niveles o Curvas y Tono/saturación). Elimina alguna imperfección con el pincel corrector o el tampón, en una capa aparte.
5. Entrega. Entrega el PSD con las capas ordenadas y con nombre, y el archivo exportado para web con la lista de comprobación de arriba.

Primeros pasos

Mesas de trabajo

La interfaz se parece mucho a la de Photoshop: menús arriba, herramientas a la izquierda, barra de opciones (en Illustrator se llama Control) y paneles a la derecha. La gran diferencia está en el centro: en lugar de un lienzo de píxeles, hay una o varias mesas de trabajo.

• Una mesa de trabajo es como una hoja de papel: la zona que se exporta o se imprime. Lo que queda fuera de ella se ve en pantalla, pero no sale en el archivo final.
• Un mismo documento puede tener varias mesas de trabajo, de tamaños distintos: por ejemplo, el logotipo, su versión en negativo y el icono para redes, todo en un mismo archivo. Se crean y se ajustan con la herramienta Mesa de trabajo (Mayús + O).

Crear un documento nuevo

En Archivo › Nuevo elige primero el tipo de documento en las pestañas de arriba: Web o Móvil (en píxeles y RGB) o Imprimir (en milímetros y CMYK). Como el dibujo es vectorial, aquí no hay que preocuparse por la resolución: se podrá exportar a cualquier tamaño.

Ver el esqueleto del dibujo

Con Ver › Contorno (Ctrl/Cmd + Y) desaparecen los colores y sólo se ven los trazados, como líneas finas. Es la mejor forma de entender cómo está construido un dibujo y de encontrar objetos escondidos o puntos que sobran. Vuelve a pulsar el atajo para recuperar la vista normal.

Truco: los atajos para moverse por el documento son los mismos que en Photoshop: Ctrl/Cmd + 0 para encajar la mesa en pantalla, la barra espaciadora para desplazarse y Ctrl/Cmd + Z para deshacer.

Objetos, relleno y trazo

En Illustrator todo es un objeto: un rectángulo, una línea, un texto. Cada uno se puede seleccionar, mover y cambiar por separado, sin afectar a los demás.

Dos flechas para seleccionar

Formas básicas

Con las herramientas Rectángulo (M), Elipse (L), Polígono y Estrella se dibuja arrastrando. Mantén pulsada Mayús para conseguir cuadrados y círculos perfectos, y Alt/Opción para dibujar desde el centro. Si haces clic sin arrastrar, se abre una ventana para escribir las medidas exactas.

Relleno y trazo

Cada objeto tiene dos colores, que se ven en los dos cuadrados de la parte de abajo de la barra de herramientas:

• El relleno es el color del interior de la forma.
• El trazo es el contorno: tiene color y también grosor, que se cambia en el panel Trazo.

Cualquiera de los dos puede estar vacío (el cuadrado con una línea roja en diagonal). Con X eliges cuál de los dos vas a cambiar, con Mayús + X intercambias sus colores y con D vuelves a los de por defecto: relleno blanco y trazo negro.

Organizar los objetos

• Agrupar (Ctrl/Cmd + G): une varios objetos para moverlos juntos. Para editar uno sin desagrupar, haz doble clic sobre el grupo y entrarás en él.
• Orden de apilamiento: como en las capas de Photoshop, los objetos se apilan unos sobre otros. Objeto › Organizar los trae al frente o los envía detrás.
• Alinear: el panel Alinear coloca los objetos seleccionados centrados o alineados entre sí o con la mesa de trabajo. Nunca alinees «a ojo».
• Bloquear (Ctrl/Cmd + 2): fija un objeto para no moverlo sin querer, por ejemplo un boceto de fondo.

La pluma y las curvas de Bézier

Como vimos en el Tema 2, una imagen vectorial se guarda como puntos con sus coordenadas y las líneas y curvas que los unen, calculadas con fórmulas matemáticas. Esas curvas se llaman curvas de Bézier, por el ingeniero francés Pierre Bézier, que las usó en los años sesenta para diseñar las carrocerías de los coches Renault. Hoy están en todos los programas de diseño, en las fuentes tipográficas y en el SVG.

Una curva de Bézier tiene tres tipos de elementos:

• Puntos de ancla: los puntos por los que pasa el trazado. Se ven como cuadraditos.
• Segmentos: las líneas, rectas o curvas, que unen dos puntos de ancla.
• Manejadores (o tiradores): las líneas que salen de un punto de ancla y terminan en un círculo. No se ven en el dibujo final, pero deciden la forma de la curva: hacia dónde sale y con cuánta fuerza.

Pruébalo: arrastra los cuadrados (puntos de ancla) y los círculos (manejadores).

Debajo del dibujo ves cómo se escribe esa misma curva en SVG: la M indica el primer punto de ancla, y la C, los dos manejadores y el punto final. Son sólo coordenadas: por eso el dibujo se puede ampliar sin perder calidad.

Dibujar con la pluma

La herramienta Pluma (P) es la más potente de Illustrator, y la que más práctica necesita:

1. Clic: crea un punto de esquina. Varios clics seguidos dibujan líneas rectas, como un polígono. Con Mayús, las líneas van a 45° o 90°.
2. Clic y arrastrar: crea un punto suave, con manejadores, y el segmento sale curvo. Arrastra en la dirección hacia la que quieres que siga la curva.
3. Para cerrar la forma, vuelve a hacer clic sobre el primer punto (verás un circulito junto al cursor). Para dejarla abierta, pulsa Intro o Esc.
4. Mientras dibujas, mantén pulsado Alt/Opción y arrastra un manejador para romperlo: así la curva cambia de dirección de golpe, como en la punta de un corazón.

Para corregir después, usa la Selección directa (A) para mover puntos y manejadores, y las herramientas para añadir (+) y eliminar (-) puntos de ancla.

Idea clave: cuantos menos puntos, mejor. Un trazado con pocos puntos bien colocados da curvas más suaves y es más fácil de editar. Coloca los puntos en los extremos de las curvas (arriba, abajo y a los lados de una forma redondeada), no en mitad de ellas.

Si la pluma se te resiste, la herramienta Curvatura (Mayús + ~) es más intuitiva: vas haciendo clic y ella sola calcula curvas suaves. Y para practicar la pluma como si fuera un juego, prueba The Bézier Game.

Construir formas

Muchos logotipos e iconos no se dibujan con la pluma, sino combinando formas básicas: un círculo menos otro círculo da una luna; un rectángulo y un triángulo, una casa. Es más rápido y el resultado es geométricamente perfecto.

El panel Buscatrazos

En Ventana › Buscatrazos. Selecciona dos o más formas superpuestas y pulsa uno de sus botones. Prueba los cuatro más usados:

El Generador de formas

La herramienta Generador de formas (Mayús + M) hace lo mismo de forma más visual: selecciona las formas superpuestas, y luego arrastra por encima de las zonas que quieres unir. Con Alt/Opción pulsado, haz clic en las zonas que quieres eliminar.

Truco: antes de diseñar un logotipo o un icono, piensa en qué formas geométricas se puede descomponer. Muchas marcas famosas están construidas sólo con círculos y rectángulos.

Texto y color

Texto

Con la herramienta Texto (T) hay dos formas de escribir:

• Texto de punto: haz clic y escribe. El texto sigue en una sola línea hasta que pulses Intro. Es el adecuado para títulos y palabras sueltas, como el nombre de un logotipo.
• Texto de área: arrastra para dibujar una caja y escribe dentro. El texto salta de línea solo al llegar al borde. Es el adecuado para párrafos.

Cuando el texto esté terminado, sobre todo en un logotipo, conviértelo en formas con Texto › Crear contornos (Ctrl/Cmd + Mayús + O). Así deja de depender de la fuente: se verá igual en cualquier ordenador, aunque no la tenga instalada, y podrás retocar la forma de las letras con la selección directa.

Ojo: un texto convertido en contornos ya no se puede editar como texto. Guarda antes una copia con el texto vivo, por si hay que cambiar algo.

Color: las muestras globales

El panel Muestras guarda los colores del proyecto. Si al crear una muestra marcas la casilla Global, todos los objetos que la usen quedan enlazados a ella: al cambiar el color de la muestra, cambian todos a la vez. Es como las variables de color de CSS, y es imprescindible para trabajar con una paleta de marca.

Recuerda lo que vimos en el Tema 3: si el diseño es para pantalla, trabaja en RGB y anota los colores en hexadecimal (el selector de color de Illustrator te lo muestra); si es para imprenta, en CMYK.

Calco de imagen

En el Tema 2 vimos que vectorizar es convertir un mapa de bits en un dibujo vectorial. Illustrator puede hacerlo automáticamente con el Calco de imagen:

1. Coloca la imagen (Archivo › Colocar) y selecciónala.
2. Abre Ventana › Calco de imagen y elige un ajuste preestablecido: Blanco y negro, Siluetas, 3 colores, Bocetos…
3. Ajusta el umbral, el número de colores y el nivel de detalle hasta que te guste el resultado.
4. Pulsa Expandir (en la barra de Control) para convertirlo en trazados que puedas editar.

Funciona muy bien con imágenes de contraste alto y formas claras, como un dibujo a tinta escaneado. Con una fotografía, el resultado suele tener cientos de puntos y es poco útil.

Idea clave: para un logotipo, el calco automático sirve como punto de partida, pero no como resultado final. Lo profesional es redibujarlo con la pluma y las formas básicas, con pocos puntos y curvas limpias.

Guardar y exportar

Igual que en Photoshop, distingue el archivo de trabajo del archivo final:

• Guarda siempre el original en formato AI, que conserva las capas, las mesas de trabajo, los textos editables y las muestras.
• Exporta una copia en el formato que se va a usar.

Antes de exportar un SVG

• Los textos están convertidos en contornos.
• La mesa de trabajo está ajustada al dibujo, sin márgenes de más: Objeto › Mesas de trabajo › Ajustar a los límites del arte.
• No hay objetos ocultos, vacíos o fuera de la mesa (revísalo con la vista Contorno).
• Los colores están en RGB.
• En las opciones de exportación, el estilo está en Atributos de presentación, y están activadas Minimizar y Adaptable (para que el SVG se adapte al ancho de su contenedor).
• El nombre del archivo está en minúsculas, sin espacios ni tildes: logo-festival.svg.

Un SVG es en realidad un archivo de texto con código, muy parecido al HTML. Ábrelo con VS Code y verás las coordenadas de cada punto. En Programación I verás cómo insertarlo en una página web, como cualquier otra imagen.

Práctica

1. Calentamiento con la pluma. Juega a The Bézier Game hasta completar todos los niveles. Después, redibuja con la pluma tres formas sencillas: una hoja, un corazón y una gota, con el menor número de puntos posible.
2. Iconos con formas básicas. Diseña una familia de cuatro iconos (casa, sobre, lupa y engranaje, por ejemplo) usando sólo formas básicas y el Buscatrazos o el Generador de formas. Todos con el mismo grosor de trazo y el mismo estilo, en mesas de trabajo de 48 × 48 px.
3. Vectoriza un dibujo. Haz un dibujo sencillo a tinta, escanéalo o fotografíalo, y vectorízalo con el Calco de imagen. Compara el número de puntos con el de la misma forma redibujada a mano.
4. Un logotipo. Diseña el logotipo de un festival o un comercio inventado: un símbolo y el nombre, con los textos en contornos y los colores en muestras globales. Prepara tres versiones en mesas de trabajo distintas: en color, en negro y en negativo (blanco sobre fondo oscuro).
5. Entrega. Entrega el AI y los logotipos exportados en SVG y PNG, revisados con la lista de comprobación. Abre el SVG con VS Code y localiza en el código la M y la C de alguna curva.