 |
Entrega Nº : II
Fecha : 6/10/97 Autor: Jordi Fosch Web: www.arrakis.es/~jfosch E-Mail: [email protected] |
 |
|
Entrega Nº : II
Fecha : 6/10/97 Autor: Jordi Fosch Web: www.arrakis.es/~jfosch E-Mail: [email protected] |
|
Nota
del Guille:
Debido a la extensión de esta segunda entrega, me he tomado la
libertad de "partirla" en dos.
Pero no te preocupes, no vas a esperar a final de mes para verla
completa, ya que están las dos partes de esta segunda entrega,
lo que ocurre es que he tenido que dividirla para que no te
aburras esperando, porque con tanto gráfico y con un
modem/conexión lenta puede llegar a ser desesperante...
Lo siento Jordi, pero creo que lo entenderás.
Link a la siguiente parte.
Para los que tienen un modem rápido pueden linkar aquí para bajar la página
completa.
Introducción
Buenas, pues ya estamos aquí, para darle “caña” a todo el tema del diseño gráfico. Si habéis leído la entrega anterior estaréis al corriente, esta vez seguimos con el Photoshop, sin parar hasta terminar de “desguazarlo”.
He intentado sacar el tiempo de debajo de las piedras, y he encontrado un poco, lo justo para poder pasarme más de 20 horas escribiendo y pensando lo que vosotros leéis en 10 minutos, intentando hacerlo de la mejor forma posible para que todos lo entendáis fácilmente sin grandes esfuerzos de “coco” pensando siempre en los que no entienden “ni papa” de informática ni diseño.
Este cursillo está enfocado, aunque no lo parezca, a los programadores que quieren dar un toquecillo artístico y gráfico a sus programas, ¿ cómo ?, pues simplemente reforzando las pantallas de presentación, de ayuda, de acerca de…, lo que se os ocurra y claro, eso sirve para todo que no sepa de programación pero no tenéis excusa, pues mi buen amigo Guille tiene en esta, su Web, un cursillo de programación que él mismo confecciona, ¡ no dejéis de hecharle un vistazo !.
Todo depende de vosotros pero si seguís atentamente estos cursillos prácticos, tenéis paciencia, sois emprendedores, consultáis libros y os espaviláis (casi ná) podréis llegar a hacer virguerías:
 |
 |
 |
 |
Si sigues atento a este cursillo aprenderás de todo un poco, lo suficiente como para que tengas unas ideas de lo que significa todo esto del diseño y para que sirve en realidad, evidentemente no puedo abarcar el amplio abanico de posibilidades que brinda el fascinante mundo del diseño gráfico, esto sería largo y quizás llegaría a hacerse pesado, entonces la habría “pifiado”.
Manos a la obra… a ver, intentare ser lo más claro, breve y eficaz posible en cuanto al texto, por eso aplicaré el esquema que en la entrega cero hacía mención, un poco de teórica, un poco de práctica, ejemplos, pantallas y a poco a poco, sin prisas llegaremos a explicar el Photoshop.
Seguimos, sin más pretexto, a continuar con esta entrega.
Repaso
En la primera entrega expliqué un poquito las ventanas, o paletas, según Photoshop, de ajuste de herramientas, color ... También vimos el menú Window que hacía referencia a la visibilidad de ciertas fichas de cada ventana de ajuste de herramientas.
Empecemos
Las herramientas son necesarias para trabajar con el Photoshop si queremos editar una imagen o un gráfico.
Todas las herramientas que proporciona el Photoshop son prácticas y útiles por lo que es importante hacer un buen resumen y una buena explicación, pues de no ser así, el programa solamente serviría para abrir y aplicar algún filtro a la imagen. El Photoshop es potente por sus herramientas y por sus filtros pero especialmente, insisto, por sus herramientas de trabajo.
Para empezar, abriremos una imagen cualquiera de nuestro siempre apurado disco duro, para “torturarla” (metafóricamente hablando, por supuesto) y aplicar sobre ella todos los ejemplos que haremos en esta entrega.
Abrir una imagen
File + Open, o, si lo preferís la combinación de teclas Control + O, para los comodones un doble clic en el área libre ("escritorio") del Photoshop.
Escoged ahora una unidad de disco, hasta encontrar una fotografía o imagen. Como podéis ver, el Photoshop 3 acepta, para abrir, unos 19 formatos gráficos.
Al abrir una imagen con el Photoshop, guarda una copia en la RAM (que es con la que trabajamos) y otra copia en disco duro, que es la original y no la toca hasta que le decimos expresamente que la actualice al salvarla.
La caja de herramientas (y sus herramientas)
 |
La caja de
herramientas del Photoshop esta formada por 20
herramientas diferentes, una sección de color, otra de
creación de máscaras, y para terminar una de
visualizaciones o presentación de la imagen en nuestro
monitor. Al trabajar con la caja de herramientas observaréis que : El puntero del ratón Al pinchar sobre cada herramienta y pasar el puntero del ratón sobre la imagen adopta la misma forma que el dibujo del icono representativo (si no se le especifica lo contrario). La ventana de ajuste de herramientas Al “pinchar” en cada herramienta, cambia automáticamente el contenido de la ventana de ajuste de herramientas, permitiendo un total control de sus acciones. Posteriormente se detallará el efecto de cada herramienta sobre dicha ventana. Después de estos detalles aquí tenéis la caja de herramientas y unas tablas explicando “por encima” cada herramienta que la compone. |
Después de ver un poco para que sirve cada herramienta pasaré a mostrar unas cosillas que se pueden hacer con las ventanas (ajuste de herramientas, color..).
Coged una ventana cualquiera (por ejemplo la de ajuste de herramientas); ¿ verdad que tiene unas pestañas ?, pues pinchad con el ratón hasta arrastrarla a una zona libre del Photoshop.
La pestaña de la ventana se ha independizado de su ventana original. Podemos coger cualquier pestaña y formar una ventana a nuestro gusto para trabajar cómodamente; pero cuidado, si queremos que todo vuelva a ser como antes hay que devolver cada una (pestaña) a su sitio de origen, simplemente, invirtiendo el proceso. |
 |
| TRUCO: Podéis hacer desaparecer y aparecer de golpe la caja de herramientas y las ventanas restantes si pulsáis el tabulador (TAB), de esta forma, podréis trabajar más a gusto con las imágenes y proyectos que realicéis en el Photoshop. |
Concretamente, esta ventana de ajuste (Brushes) tiene algunas opciones escondidas..., doble clic en la zona en que no hay ningún grosor definido (zona en gris):
Aparecerá una ventana para crear un grosor personalizado, si en cambio hacemos el doble clic encima de un grosor definido podemos modificarlo.
|
Diameter Diámetro (grosor). Hardness Spacing Angle Roundness |
Además de estos detalles "escondidos" si pulsamos con el botón derecho encima aparece un menú flotante que contiene, normalmente, una mezcla de varios menús del Photoshop (cortar, pegar, copiar, mostrar paletas ...), se detallará su contenido en su día.
Las herramientas
Antes de empezar debería responder a esta pregunta: ¿ Para qué sirve una zona seleccionada ?
Una zona previamente seleccionada sirve, principalmente, para trabajar en ella, aplicando cambios en los colores, efectos y otras opciones que brinda el Photoshop ignorando el resto (lo no seleccionado).
Veamos
primero, cómo seleccionar parte de una fotografía.
Después de
“pinchar” en el icono correspondiente dirigimos el
ratón hacia el punto de origen y lo arrastramos hasta formar
(por defecto) el rectángulo, englobando en él la zona en que
queramos trabajar.
Veamos las opciones que nos ofrece la ventana de ajuste.
|
Shape Rectangular Elliptical Single
Row Single
Column |
| TRUCO: Si al trazar con cualquiera de las opciones una selección queremos que nos quede igual en todos sus lados, es decir, que el polígono sea regular (todos los lados iguales) simplemente pulsaremos la tecla SHIFT mientras arrastramos el ratón. |
Style
| Normal Selección libre. Constained Aspect Radio Fixed Size |
 |
Feather
Yo lo llamo opción de calado. Este efecto es realmente impresionante si se utiliza bien, pues permite crear unos degradados de color curiosos.
Si hemos seleccionado ya una parte de nuestra imagen y queremos cambiar el polígono por otro (por ejemplo) o decidimos meterle un calado, NO funcionara, se necesita, aplicar los cambios convenientes y volver a crear la selección.
En esta pantalla he “pillado” una zona rectangular con un calado de 20 pixeles, i el efecto es curioso, es como si se “comiera” un pedazo de la imagen y respetase unos bordes degradados, ojo, en el ejemplo he decidido eliminar la zona pulsando SUPR para “cargarme” lo seleccionado, dando paso al calado y al color de segundo plano (el blanco).
Herramienta de selección a mano alzada
| Parecida a la anterior solo que en vez de definir la selección exacta, tenemos la posibilidad (para los casos que así lo requieran) de dibujar la zona a nuestro "aire", además, las opciones de polígono (Shape) desaparecen, evidentemente. |  |
Esta herramienta conserva la opción de FEATHER, o "calado":
En esta última pantalla, podéis ver como he abierto una foto de un ciclista, y me he dirigido a la herramienta de selección a mano alzada para ponerle un “calado” de 10 pixeles.
En la caja de color rápido tengo definido como color de segundo plano el blanco por lo el “calado” pilla este color para presentarse.
Acto seguido me he dedicado a englobar la zona que me interesaba.
Podéis combinar la herramienta de ampliación, el zoom ó lupa, para ampliar en todo momento la zona sin perder la selección.
Una vez definida la zona la he cortado para meterla en el portapapeles (CONTROL + C) y he creado una imagen nueva para pegarla (este proceso se detallará en su día).
Antes de pegar la imagen he pintado el fondo de negro para que resalte la fotografía.
Una vez pegada la imagen (CONTROL + V) se puede observar perfectamente su efecto.
Herramienta de selección al azar
Esta herramienta se utiliza para seleccionar zonas fijas o bloques de un mismo color, observad el ejemplo atentamente pues es la única forma de comprender su uso:
 |
He cogido la herramienta y he “pinchado” en la zona inferior izquierda de la fotografía del rayo, la “varita” ha aceptado la tolerancia de 32 colores (se define por ventana) y se ha “comido” hasta llegar a estos, seleccionado todo el bloque de (en este caso) oscuros y “derivados”. |
Si en vez de seleccionar la zona inferior izquierda hubiésemos seleccionado la superior derecha, observad…
…y si “pinchamos” en el cuerpo del rayo…
Ha quedado bastante claro ¿ no ?, ahora veamos en su ventana, la única opción interesante, la de la tolerancia de colores.
Mediante esta opción podemos definir el número de variaciones de color que queremos que nos “pille” al “pinchar” en la imagen; si el número es bajo, se limitará a seleccionar de la zona “pinchada” el número definido, si el número es alto, rodeará mayor área, pues “traga” más colores.
| TRUCO: Podemos "capturar" varias zonas a la vez si pulsamos la tecla SHIFT. |
Sirve, simplemente para desplazar una imagen por su ventana. Si desplazamos la imagen fuera de los bordes de su ventana, quedará cortada y en el los lugares “desocupados” nos mostrará, de la caja de color rápido, el color de segundo plano. |
 |
| ATENCIÓN: Cuando trabajemos con capas, y apliquemos esta herramienta, su efecto no será el mismo, la única diferencia será que no nos mostrará el color de segundo plano sino que lo ignorará, como si fuese transparente. |
| Útil si tenemos una fotografía grande y no cabe en pantalla, automáticamente aparecerán las barras de desplazamiento típicas y si utilizamos además, esta herramienta podremos movernos más libremente; su funcionamiento es muy sencillo: se “pincha” y se arrastra por la imagen, haciendo “scroll” automáticamente. |  |
Veamos ahora sus dos únicas opciones interesantes de la ventana de ajuste de herramientas:
 |
Hace un “zoom” o ampliación hasta que cubra parte de la pantalla. |
 |
Permite representar la imagen en su tamaño original. |
Amplía y disminuye la
visualización de una imagen cargada en el Photoshop para, por
ejemplo, poder trabajar mejor con los detalles.
Distintas formas de ampliar y disminuir la vista de una imagen
| Con el botón izquierdo del ratón se amplía, con el izquierdo y el ALT pulsado se disminuye la vista. |
| Podemos utilizar esta herramienta de forma rápida sin tener que “viajar” a la caja de herramientas pulsando CONTROL + BARRA ESPACIADORA y sin soltar las teclas “pinchar”, pero si queremos disminuir podemos emplear ALT + BARRA ESPACIADORA. |
| CONTROL + signo “+” para ampliar, CONTROL + signo “-“ para disminuir la vista. |
| Si damos con un doble clic sobre la herramienta de “zoom” la imagen se presentará en su tamaño original (escala 1:1). |
| La ventana de ajuste de esta herramienta no muestra gran cosa, excepto de la posibilidad de definir un recorte exacto que se activa pinchando en el botón de selección Fixed Target Size. |  |
Si queremos definir una área de recorte perfecta, podemos introducir las medidas en las cajas de texto, "Width" para el ancho y "Height" para el alto, teniendo en cuenta la posibilidad de entrar, escoger un tipo de resolución y una unidad de medida.
El botón Front Image sirve para trabajar con un ancho y un alto proporcional a la imagen en cuestión.
| Un programa de
este "calibre" debe tener una herramienta que
nos permita introducir texto correctamente. El Photoshop
no tiene nada que envidiar a los procesadores de texto,
claro que no tiene punto de comparación pero si tiene
unas opciones realmente interesantes que seguidamente
pasaré a detallar y que ningún otro programa ha sabido
imitar tan bien. Tras escoger la herramienta y
pinchar en una zona de la imagen (zona donde aparecerá
el texto) nos mostrará esta ventana |
 |
En esta caja combinada encontraremos todas las fuentes TTF que residen en nuestro ordenador, debemos escoger una para poder escribir.
En esta caja de texto entraremos el tamaño que queramos que tenga la fuente escogida (4 mínimo, 240 máximo).
Podemos escoger una unidad de medida, en puntos o el pixeles.
Espacio que dejará entre Intro e Intro (ente párrafo y párrafo para que nos entendamos).
Espacio que dejará entre letra y letra (podemos introducir valores negativos).
El estilo del texto puede ser:
Bold - Negrita. | |
Italic - Cursiva. | |
Under line - Subrayado. | |
Out line - Linia exterior, aunque yo prefiero llamarlo filete. | |
Strike out - Tachado. | |
Anti-Aliased - Observad este gráfico: |
 |
Esta opción siempre ha de estar activada a no ser que nos guste el pixelado que se produce al escribir un texto y ampliarlo. |
Esta interesante opción hace que el Photoshop acepte la fuente como escalable, y simule un texto "vectorial"; por el contrario si no utilizamos esta opción al escribir una fuente y escalarla manualmente, aparece el típico pixelado, aunque un poco difuminado, característico del Photoshop.
Caja donde debemos introducir el texto.
Este cuadro nos presenta dos opciones:
Font - Si desactivamos esta casilla, la fuente no se nos presenta con el tipo escogido de la lista, sino que lo cambia por una fuente por defecto. | |
Size - Tiene el mismo efecto que la anterior pero afecta solamente al tamaño. |
Desmarcar en alguna de estas dos últimas casillas y pulsar en Aceptar, los cambios no afectan al texto final pues estas solamente sirven por si tenemos mucho texto que escribir, por ejemplo, de esta forma no nos tendremos que molestar en buscar una fuente y reducir el tamaño.
El cuadro Alignment nos ofrece una completa gama de alineación de texto, veámoslo:
| |
| |
| |
| |
| |
|
| Recordad que podéis
escoger el color de la fuente mediante la caja de
selección de color rápido que hay exactamente debajo de
la de herramientas. En la próxima entrega estudiaremos la caja de selección de color rápido más detalladamente. |
 |
Una vez entrado el texto y pulsado en OK, el texto escrito se transportará a la imagen pero observad que esta protegido con una selección, esto sirve para aplicar efectos, por ejemplo un efecto de degradado, pero esto lo veremos dentro de poco, cuando expliquemos dicha utilidad.
Además, con la selección del texto podemos aplicar todo tipo de filtros del programa, tenedlo en cuenta para su día.
Aquí tenéis un ejemplo de degradados aprovechando la selección del texto:
Todos insinuamos la utilidad de esta herramienta. Sirve para "rellenar" espacios con colores planos, es decir, (por ejemplo) no podemos aplicar degradados, al menos que no utilicemos la herramienta pertinente.
Esta herramienta juega con la ventana de color, pues, es la que nos ofrece los colores.
Veamos este ejemplo que seguiremos paso a paso para ver cómo pintar figuras y evitar los errores más frecuentes:
| Imagen original | Imagen final |
 |
 |
Para remediar este tipo de imperfecciones tenemos que hacer un zoom con la lupa en la zona indicada para trabajar con más detalle:
Seguimos, y pinchamos sobre la zona que no ha quedado cubierta.
Ahora pintaremos todo el pincel:
Hasta ahora hemos aprendido a pintar zonas cerradas y detalles, pero ¿ que pasará con la camiseta ?, ¿ os lo imagináis ?, adelante...
¡ La pintura se ha esparcido por resto del dibujo !. ¿ porqué ?, muy fácil... la zona de la camiseta estaba formada por líneas sin cerrar, por eso al derramar la pintura se ha "comido" el fondo.
Basta con cerrar estas lineas y volver a intentarlo; para deshacer esta "metedura de pata" pulsa la combinación de teclas CONTROL + Z, o si lo prefieres puedes viajar hasta el menú y: EDIT + UNDO.
Este EDICION + DESHACER solo funciona una vez, así que cuidado.
Ahora dibujaremos el resto de camiseta que hace falta para cerrar las líneas.
Pulsa en la herramienta de lápiz, aunque todavía no la hemos explicado veremos un poco una de sus utilidades.
Escoge el color negro de la paleta de colores para dibujar a mano el resto de camiseta.
Haz un zoom en la zona que nos interesa:
Intenta pinchar y arrastrar el ratón hasta terminar de dibujar lo que falta, el aspecto que debe tener la caricatura debe ser este (aproximadamente):
¿ Que tal ahora ?.
Ya podemos pinchar otra vez en el cubo de pintura, escoger el color para la camiseta e intentarlo de nuevo:
Pues ya tenemos prácticamente coloreada la caricatura, ¿ nos olvidamos de algo ?, del fondo, podemos pintar el fondo de color que más rabia nos de:
Con la excusa de seguir este ejemplo paso a paso, ya he dicho que hemos visto cómo colorear zonas de una imagen, hacer zoom para los detalles, y dibujar una línea para cerrar las zonas abiertas.
Si quieres ver la imagen original para bajártela, es decir la misma que yo he escaneado para seguir mejor el ejemplo puedes pinchar aquí (JPG de 10K.).
Recordad que podéis pintar todo tipo de imágenes no solo caricaturas en blanco y negro, he puesto este ejemplo porqué resulta más fácil ver el efecto.
Seguimos ahora con algunas opciones interesantes de la ventana de ajustes.
 |
Destacamos algunos
detalles, otros por su pobre contenido o escasa
funcionalidad no se comentan (este es un manual práctico
NO PROFESIONAL). Opacity Tolerance |
Con una opacidad media conseguimos que el color aplicado tenga una transparencia débil por el contrario si subimos la opacidad al máximo, obtenemos un color opaco.
 |
 |
La tolerancia afecta al
"esparcimiento" de la pintura por la zona a la que
hacemos clic.
En vez de utilizar el cubo de pintura, también podéis utilizar
la herramienta de selección al azar (la varita) que casualmente
también tiene esta propiedad.
 |
 |
Si empiezas a dudar con eso de la tolerancia, mete un número inferior a 50, por ejemplo el 30.
Pulsa este link para pasar a la segunda parte de esta entrega.
Texto
alineado a la izquierda.
Texto
centrado.
Texto
alineado a la derecha.
Texto
vertical alineado a la derecha.
Texto
vertical centrado.
Texto
vertical alineado a la izquierda.