Curso

Diseño de páginas web
Guía del curso
1. Introducción al diseño web.
Planificar y organizar el sitio. Principales elementos de las páginas web. PC Today nº 87 PC Today nº 88

2. Herramientas para el diseño web.
Introducción a las herramientas WYSIWYG. Trabajando con Sausage Hot Dog.

Crear una web no es un reto imposible. Con unos pocos conocimientos y algunas horas de práctica, verás que no es tan complicado y podrás plasmar tu imaginación en páginas que puede ver todo el mundo.

3. El color y las imágenes.
Psicología del color, el color en la web. Imágenes: tipología y características. Mapas de imágenes. Herramientas para el tratamiento de las imágenes y el color. The GIMP. PC Today nº 89

4. Usabilidad.
¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. Cómo saber si una web es usable. PC Today nº 90

L

5. Accesibilidad.
¿Qué se entiende por accesibilidad? Deficiencias y políticas. El diseño inclusivo. Consejos para diseñar una web accesible. Evaluar la accesibilidad. PC Today nº 91

6. Tecnologías multimedia en la Red.
Música y sonido. Imagen animada y películas. Integración multimedia: Macromedia Flash y Action Script. PC Today nº 92

7. Programación.
Razones para conocer los principios de la programación. PC Today nº 93

a idea de realizar un sitio web propio es un propósito que suele pasársele a muchos cibernautas por la cabeza. Sin embargo, debido a la aparente complejidad que conlleva hacerlo, muchas veces se queda en un simple proyecto. Con este curso queremos transmitir la idea de que convertirte en diseñador de tu propia web no tiene por qué ser una epopeya. Con una pequeña base de conocimientos y unas cuantas horas de práctica se puede llegar a hacer diseños muy interesantes. Lo primero que debemos tener muy claro cuando creamos un sitio web es saber qué y para qué lo estamos

creando. No es lo mismo diseñar un sitio personal pequeño para mostrar tus aficiones en unas pocas páginas que crear el portal corporativo de una gran empresa que pretende vender sus productos a través de la Red. Diseñar y mantener nuestras páginas, aunque sean personales, es una tarea que requiere cierto tiempo. Por eso es importante centrar primero los temas de los que vamos a tratar y ver hasta qué punto vamos a ser capaces de llevarlos a cabo. ¿Cuántas veces nos hemos encontrado en la Red con sitios que están a medio terminar? Esto no da una buena imagen de quien ha creado la página, da la sensa-

54

www.pctoday.es

Diseño web. Parte 1ª
ción de ser un tanto descuidado. Es mejor tener poco contenido pero completo, que mucho y no poder abarcarlo todo. cuerpo (<BODY>...</BODY >) donde se muestran todos los elementos en la pantalla. De los elementos que componen la cabecera, el más importante es el título <TITLE>...</TITLE>, que, como su nombre indica, especifica el título de la página web. Es muy importante que no se nos olvide ponerlo, ya que este título aparecerá en la barra de ventana identificando los contenidos de la ventana.

Planificar el sitio web
Lo segundo que debemos saber es qué es el diseño. Diseñar va más allá de hacer una página bonita. Diseñar es organizar los contenidos que se van a mostrar en un sitio web de tal forma que el visitante: primero, encuentre la información que busca; y segundo, que el entorno donde reside esa información sea agradable y ayude a la comprensión del contenido. Para conseguir que tu sitio web esté estructurado debes, antes de hacer nada, saber cómo va a dividirse esa información para que le llegue al visitante de la mejor manera. Los cibernautas, en su gran mayoría, visitan páginas web por la información que encuentran en ella, no por su diseño. Por eso, cuanto más claro sea ese aspecto, mejor cumplirá su labor de vehículo de contenidos. Una herramienta muy útil a la hora de comenzar con el planteamiento son los mapas del sitio, que no es otra cosa que un diagrama donde se muestra cómo va a estar estructurado el conjunto de páginas y servicios. No tiene por qué ser exhaustivo y, si quieres, puedes hacerlo a mano. La idea es tener una referencia de qué es lo que vas a decir y cómo. Recomendamos tenerlo siempre

Selecciona “Todos los archivos” y Codificación ANSI para que cualquier programa pueda entenderlo y sea totalmente compatible con el estándar HTML.

mente dicho de las páginas. Una de las mejores formas de aprender a diseñar páginas web es ver cómo lo hacen los demás y decidir si lo que estamos viendo nos gusta o no. Lo que sí conviene recalcar es que debemos hacer uso de esta técnica para aprender, no para “copiar y pegar” el trabajo de otros diseñadores.

utilizar siempre minúsculas o mayúsculas, pero nunca mezcladas, por la misma razón anterior. Es preciso tener unos breves conocimientos del lenguaje HTML (Hiper Text Mark-up Language) para empezar a diseñar páginas. HTML es un lenguaje de marcas, es decir, que se añaden una serie de marcas o etiquetas que definen

Si desde un principio tenemos claro qué es lo que queremos hacer, nos ahorraremos mucho tiempo.
la presentación gráfica de los elementos que componen la página. La mayoría de las etiquetas de HTML se presenta en parejas: una que indica el modo de presentación y otra que lo finaliza, como puedes ver a continuación: <etiqueta> texto </etiqueta>. Todo el documento HTML debe estar contenido dentro de las marcas <HTML> y </HTML>, que son las que indican el principio y el fin del mismo. La página web tiene dos partes: una cabecera (<HEAD>...</HEAD>) que es la que define el documento y un
Una página sin título resta identidad y, simplemente, queda mal.

Para empezar a crear páginas web no necesitamos de complicados editores de código HTML. Simplemente con la aplicación Bloc de Notas o cualquier otro editor de texto nos vale. Una vez que hayamos escrito nuestro código, en el cuadro de diálogo Guardar como, elegiremos “Todos los archivos” y codificación ANSI. A continuación, elegiremos un nombre para la página y luego añadiremos la extensión .htm o .html. Debemos saber que los nombres de página web no admiten algunos caracteres, como por ejemplo, la Eñe. Hay que limitarse a las letras utilizadas en inglés, números y guiones, tanto normales “-· como bajos “_”. Un mapa del sitio no deja de ser una vista esquemática Nuestro consejo es de cómo está organizada la información. que, a la hora de cerca al crear las páginas, sobre todo si guardar las páginas web que vayamos creando, usemos siempre una de estas el sitio contiene muchas. Cuando ya está claro qué es lo que dos extensiones, ya que es fácil olvidarqueremos trasmitir con nuestro sitio y se y luego, a la hora de enlazar las pácómo lo vamos a hacer, pasamos a la ginas, podemos volvernos locos bussegunda fase, que es el diseño propia- cando el error. También es aconsejable
Algunas extensiones que debemos conocer
.html .htm .css .js .asp .php .swf Páginas escritas con Lenguaje de Marcas de Hipertexto. Archivo externo de definición de estilos (Hoja de Estilo en Cascada). Archivo externo con comandos de javascript. Página dinámica que se ejecuta en el servidor. Es propiedad de Microsoft. Página dinámica que se ejecuta en el servidor, como ocurre con los .asp, pero de código abierto y que cualquiera puede modificar. Archivo realizado con el programa Macromedia Flash.

Elementos de una página web básica
Aunque cada vez se utilicen más imágenes en las páginas web, el texto sigue siendo el mejor comunicador que podemos utilizar. Dentro de pocos años veremos cómo se consolida la llamada “Web Semántica”, es decir, una extensión de la Web actual en la que el contenido se separará definitivamente del continente. Aunque HTML no será el lenguaje que se utili-

v

Plantillas de diseño
Si crees que la originalidad no es lo tuyo o necesitas un lugar donde poder inspirarte para crear la estructura de tus páginas, puedes utilizar una plantilla o template de otros diseñadores, que las regalan o venden, dependiendo de su complejidad. • www.freewebtemplates.com • www.steves-templates.com • www.freelayouts.com • freesitetemplates.com Lo que los diseñadores envían cuando descargas sus plantillas es, aparte de las imágenes y otros archivos vinculados como pueden ser las hojas de estilo, los archivos fuente para generar los diversos elementos que se visualizan. Por ejemplo, si contiene una animación Flash en .swf, también proporcionan el archivo .fla para que puedas abrirlo en tu equipo y modificarlo según tus preferencias. Estas plantillas simplifican la tarea de concebir el diseño de nuestra página, pero es necesario trabajarlas para que se adapten a lo que necesitamos, por lo que, si no elegimos una que se acerque mucho a nuestra

Puedes escoger entre una gran variedad de modelos que puedes modificar a tu gusto.

idea, al final, nos llevará más tiempo del que hubiéramos empleado en hacer una nueva desde cero. s

Nº 87

55

Curso
Código simple
En las páginas pequeñas, es muy fácil leer el código, pero, cuando vamos insertando imágenes, tablas, etc., se va complicando. Por eso, hemos de tomar unas pautas de trabajo, ya que si queremos modificar algo transcurridos unos días de la escritura de nuestro código, nos daremos cuenta de que no es tan sencillo como habíamos pensado. El primer consejo es utilizar comentarios para identificar las partes en que se divide la página, por ejemplo: <!— menu lateral —>. De este modo, cuando necesitemos modificar el menú, tardaremos menos en encontrarlo. También es recomendable insertar una nueva línea para cada nueva etiqueta HTML. Si escribiéramos todo el código seguido resultaría difícil de leer, por lo que es preferible insertar las etiquetas en diferentes líneas y, a ser posible, de forma tabulada. s Formato del párrafo <P>...</P> Sirve para delimitar la extensión de un párrafo. <BR> Salto de línea. <CENTER>...</CENTER> Permite centrar todo el texto del párrafo. <BLOCKQUOTE>...</BLOCKQUOTE> Para citar un texto ajeno. <PRE>...</PRE> Representa el texto con un tipo de letra de paso fijo.

Principales etiquetas de formato de texto
Formato de texto <BIG>...</BIG> Incrementa el tamaño del tipo de letra. <B>...</B> Pone el texto en negrita. <SMALL>...</SMALL> Disminuye el tamaño del tipo de letra. <I>...</I> Representa el texto en cursiva o itálica. <U>...</U> Para subrayar un texto, independientemente del formato. Formato de frase <CITE>...</CITE> Se utiliza para citar un texto ajeno. <EM>...</EM> Para dar énfasis. <STRONG>...</STRONG> Resalta un texto cambiando el tamaño y carácter. <ABBR>...</ABBR> Se usa para mostrar abreviaturas. <Hx>...</Hx> Si se sustituye x por un número del 1 al 6, se obtendrá distinta relevancia.

sobre fondo blanco. Las fuentes más cómodas de leer son las de tipo ‘sans-serif’, como la Arial o la Verdana, y su tamaño debería definirse de forma relativa (porcentajes), no absoluta (píxeles), para que los usuarios con cierta discapacidad visual o con una alta resolución de pantalla puedan aumentar (o disminuir) el tamaño de la fuente de la página desde su navegador. Las imágenes pueden comunicar mensajes de una manera que no es posible hacer por medio de palabras. Otra de las funciones de las imágenes es el sentido estético y decorativo. Sin embargo, en muchas ocasiones nos encontramos con páginas web repletas de imágenes que no cumplen ninguna de estas dos fun-

es a través del programa CGI, que será el que elabore el mensaje que nos llegará. La estructura de un formulario básico es la siguiente: <FORM ACTION=”mailto:correo _o_programa” METHOD=”POST” ENCTYPE=”TEXT/PLAIN”> [Campos del formulario para introducir datos.] <INPUT TYPE=”submit” VALUE= ”Enviar”> </FORM> Vamos a explicarlo: FORM abre y cierra el formulario. ACTION indica la acción, en este caso que los datos se envíen a la dirección indicada. METHOD=”POST” hace que los da-

zará en el futuro para este proyecto, sino XML y RDF, sí podemos hacer que nuestros textos estén insertos pulcramente dentro del código HTML. Con ello conseguiremos que los buscadores nos agreguen correctamente a sus bases de datos y así, ganar posiciones cuando muestran los resultados de las búsquedas.

Si no sabes programar no te asustes. Resulta más sencillo de lo que parece a simple vista.
tos se procesen con el botón de envío. ENCTYPE=”TEXT/PLAIN” indica que los datos se envíen sin codificación. Los enlaces son la esencia de las páginas web. De una forma muy breve se podrían definir como aquellas líneas de programación que, aunque no sean visibles al usuario o navegante de una página web, permiten o facilitan al mismo con un mero click sobre determinado texto, imagen o icono, acceder a otra parte de la misma página web, a otra

ciones, con lo que distraen la atención de lo que se quiere comunicar y aumentan el tiempo de descarga. Quizá lo más difícil de las imágenes sea conseguirlas. Lo ideal sería que las fabricáramos nosotros mismos, mediante el escaneo de las fotografías que queramos insertar, obteniéndolas con una cámara digital o creándolas mediante editores. No debemos preocuparnos si no dominamos alguno de estos programas generadores de imágenes, ya que existen en Internet muchos lugares donde se ofrecen gratuitamente imágenes para fondos de páginas, separadores, gifs Es difícil leer un texto que no presenta algún tipo animados, rótulos, barras, de divisiones o destacados. etc., como www.gifmania.com. Sin embargo, leer en la pantalla del Los formularios son la mejor maneordenador es mucho más incómodo ra de que nuestros lectores se comunique leer sobre papel. Debido a esto, se quen con nosotros. Hay dos formas de recomienda tomar como norma general realizar o recibir un formulario: generael uso de textos concretos, breves y do por el navegador o mediante un proseparados en varios párrafos. El an- grama CGI del servidor. La primera opcho de los párrafos no debería exceder ción es la más sencilla, ya que el navegade la mitad de la pantalla, y, preferible- dor generará automáticamente un menmente, conviene utilizar letras negras saje de correo electrónico. La otra forma

página del mismo sitio o incluso a otro sitio web distinto. Sin ellos, el concepto se vería reducido a una publicación de documentos de texto en Internet. La etiqueta básica de los enlaces es <a href=”direccion”>...</a> y, dependiendo de a dónde enlacen, podemos clasificarlos en varios tipos: • Hipervínculo dentro de la propia página: nos podemos mover de un lado a otro de la misma página con un simple click. Suele utilizarse con índices, pies de página o para subir al principio de la misma si es muy larga. Para hacerlo, es necesario especificar unas anclas, mediante la etiqueta <a name=”principio”></a>, a la que nos referiremos luego a través de <a href=”#principio”>...</a> • Hipervínculo a una página del propio sitio web (página local): esto significa que el archivo de la página web a la que se refiere el enlace se encuentra en el mismo servidor que lo contiene, de modo que, para referirnos a ella, basta con escribir la ruta relativa. Por ejemplo, supongamos que tenemos un enlace desde nuestra
Formatos de gráficos
.gif Archivo de imagen suele ser pequeña y de colores muy definidos. .jpg Archivo de imagen empleado habitualmente para fotografías. .png Archivo de imagen parecido al .gif, pero de código abierto.

Se pueden apreciar las diferencias de legibilidad y calidad de los tonos continuos entre los dos formatos de imagen más utilizados, .gif y.jpg.

56

www.pctoday.es

Diseño web. Parte 1ª
página “portada.htm” a otra llamada “informacion.htm” que está en la carpeta “nosotros”. El hipervínculo sería: nosotros/informacion.htm. • Hipervínculo a otro sitio web (página externa): es un enlace a una página fuera de nuestro sitio. Cuando especificamos un enlace externo, debemos escribir la dirección completa de la página incluido http://www. • Hipervínculo a una dirección de correo electrónico: al pulsar en él, automáticamente se abre el programa de correo que tenga instalado el usuario para poder escribir a la dirección de correo que especifiquemos. Para ello, escribiremos mailto:nombre@dominio.com dentro de href. Un elemento muy importante a la hora de organizar la información y darle forma a la página son las tablas. El empleo de las tablas facilita la distribución de la información con estabilidad, en los espacios y lugares de la pantalla que uno desea, sin riesgo de que se deforme. Como podemos imaginar, las tablas se dividen en columnas y filas, creando celdas, a las que podemos dar una serie de ca-

No te preocupes por aprender todos los códigos, ya que existen herramientas que permiten generar hojas de estilo de forma automática, como www.webexperto.com/herramientas/hojasdeestilo.php o www.webmastercuyo.com.ar/servicios/css.php.

web, mediante la asociación de un conjunto de propiedades de formato a los elementos del lenguaje HTML. Así, podemos separar la estructura de la página de los contenidos. El resultado final en pantalla es una mezcla entre las características predefinidas para cada comando HTML y la hoja de estilo. Lo mejor de esta técnica es que logramos una presentación muy uniforme, ya que basta con definir un estilo una única vez para que éste se aplique a todos los elementos del mismo tipo que existan en una página o en el sitio web entero. <TD>Celda 2</TD> racterísticas determinadas, como el Existen tres formas ancho, alto, color, tipo de letra, aline- <!— rowspan=”2” indica que esta Este es el resultado de las líneas de código que presen- de aplicar estilos a las ación, etc. Sin embargo, no debemos celda se expande 2 filas —> etiquetas HTML. La pritamos como ejemplo. <TD rowspan=”2”>Celda abusar de las tablas e introducir unas mera es la más sencilla: partes de la página estén siempre visi- se trata de redefinir la propia etiqueta dentro de otras de forma recurrente, 3</TD> bles con un menú de opciones situado a mediante el atributo STYLE. Por ejemplo pues los buscadores penalizan los </TR> un lado, mientras que las otras cambian. la etiqueta <a href=”pagina. textos que se encuentran en textos ro- <TR> <TD>Celda 4</TD> deados por muchas tablas, creyendo html”style=”color:red”>Enlace</a> Elementos de una <TD>Celda 5</TD> que son de poca relevancia dentro del generaría un enlace de color rojo, en vez </TR> contenido global de la página. página web intermedia de azul, que es el color predeterminado. A continuación, puedes ver un ejem- <TR> Las hojas de estilo permiten con- Una segunda forma consiste en definir el <!— colspan=”2” indica que esta trolar cómo se verán nuestras páginas estilo de todas las etiquetas de la página. plo de tabla: Si la hoja de estilo no se va a aplicar a Campos de formularios otros documentos, es más conveniente utilizar esta técnica para así tener la hoja <INPUT TYPE=”hidden” NAME=”xxx” VALUE=”yyy”> Campos ocultos, donde xxx es el nombre de la información introducida e de estilo y el contenido de la página en yyy la información en sí. un mismo lugar. Para hacerlo, incluiría<INPUT TYPE=”text” NAME=”xxx” VALUE=”yyy”> Cuadros de texto de una línea, donde xxx indica el nombre de la informos lo siguiente dentro de la cabecera: mación introducida e yyy indica si queremos que el formulario incluya <STYLE TYPE=”text/css”> a { coalguna información inicial. lor: red } </STYLE>. De este modo, <INPUT TYPE=”password” NAME=”xxx”> Cuadros de texto oculto, donde xxx es el nombre de la información introconseguiríamos que todos los enlaces de la página fueran rojos. Por último, el ducida. Ideal para contraseñas. tercer método consiste en escribir los <TEXTAREA NAME=”xxx” ROWS=”y” COLS=”z”></TEXTAREA> Cuadros de texto con desplazamiento, donde xxx es el nombre de la estilos en un archivo externo. Podemos información introducida, y el número de filas y z el número de columnas. hacerlo mediante el bloc de notas, <SELECT NAME=”xxx”> Listas desplegables, donde xxx es el nombre de la información introguardarlo como .css y luego vincularlo <OPTION>yyy ducida e yyy el nombre de cada opción de la lista. Se pueden añadir a las páginas mediante la orden <LINK <OPTION>yyy muchos de tipo yyy, aunque es necesario establecer un límite de REL=StyleSheet HREF=”estilo.css” <OPTION>yyy acuerdo con el tamaño de la pantalla y la dificultad para manejarTYPE=”text/css”>. Para que todos los navegadores reco</SELECT > los, crece con su extensión. nozcan los comandos, recomendamos <INPUT TYPE=”radio” NAME=”xxx” VALUE=”yyy”> Botón de opción, donde xxx es el nombre de la información introducida e seguir las indicaciones del Consorcio yyy es el nombre de cada opción en concreto. Ideal para seleccionar una W3C y sus especificaciones para las opción entre varias. CSS, que puedes encontrar en Casilla de verificación, donde xxx es el nombre de la información introducida. <INPUT TYPE=”checkbox” NAME=”xxx”> www.w3.org/Style/CSS.

<TABLE BORDER=”1”> <TR> <!— th indica que es una celda de cabecera —> <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> <TH>Cabecera 3</TH> </TR> <TR> <TD>Celda 1</TD>

celda se expande 2 filas —> <TD colspan=”2”>Celda 6</TD> <TD>Celda 7</TD> </TR> </TABLE> Los marcos son otra forma de organizar la página. En realidad se trata de una página que contiene otras páginas. Son muy útiles cuando queremos que unas

Existen muchos programas gratuitos que nos ayudarán a crear y editar nuestras imágenes.

v

Nº 87

57

se pueden En el fondo.una página HTML.mid”> . podemos crear películas o utilidades de En definitiva. su valor. un pequeño script que averigüe en qué insertarla en la página es muy sencillo. cuando hatrar una música de fondo es mediante yamos creado nuestra película Flash. en Internet Explorer.wav Los archivos WAV son en general muy grandes.compatibles entre sí. excepto para nuesdia Flash. mite Flash. como los vídeo estándar es 24 que se hallan en www. aunque. Algunos te capaz de interpretar <EMBED>. Para la gunas otras herramientas.metainformación. comprobaremos que que los buscadores leen estas etiquetas Los enlaces son los que marcan la diferencia entre la Red y los documentos de papel. pendiente con los controles de sonies decir. En general. información que se puede o no incluir en las etiquetas META. Para ello. como son los sonidos midi. ya que es un programa muy intuitivo. aunque obligaregramas se encargan de realizar acciones mos a que se abra una ventana indedentro del navegador de la página web. etiqueta <BGSOUND SRC=”musipensado para hacer las cosas rápida. sencilla es dejar al usuario la decisión Otro de los elementos que podemos de escucharlos o no.es . . las páginas web que incluyen sonidos los colocan en formato AIFF para las personas que tengan Macintosh y WAV para los usuarios de PC. pero requiere de nuestra creativi.mundojavascript. bien como sonido de fondo.incluir fondos sonoros utilizando la je de programación muy sencillo. aunque este número es muy variable Una vez más. Por ejemplo.ca. Las etinavegador: <OBJECT> para Internet quetas META se introducen dentro de Explorer y <EMBED> para Netsca. Al ser el formato nativo de Windows. Con un buen tutorial de la última ción (description) y las palabras versión y unas horas de práctica delan. Algunos tipos de archivo de sonido .Curso permiten agregarlos directamente a las páginas. . está ampliamente estandarizado. mas como agendas o calculadoras. tampoco visualización de esta tecnología se re. . ya te del ordenador. mientras que el programente. unas informaciones que no Al igual que con el sonido. Estos pro. Existen servidores de vídeo bajo queta de cierre. coLa tecnología Flash de Macrome. a continuación. incluir dentro de nuestras páginas son incluiremos el sonido en el parámelos scripts. basta con copiar y pegar el código navegador está instalado y discrimine. capaz de reproducir sonido con fidelidad graduada. los distintos navegadores.se visualizan pero que están integradas rio utilizar distintas etiquetas según el en la página web y la definen. podemos incluir efectos especiales en nuestras páginas. cluirlo como sonido de fondo.ra Real Audio es un formato ampliamente distribuido y usado. que utilizan un sistema que una declaración: nombre de la propiepermite la reproducción de vídeo di. puedes inventarte tus propias etiNo debe asustarnos la gran cantidad de recursos que nos perquetas META. La manera más El formulario más utilizado de toda la Web consta de un campo de entrada y un botón de envío. Lo usual En Internet podemos encontrar multitud de scripts ya heen una película de chos y listos para utilizarlos en nuestras páginas. no lo hace exactamente de la misma manera. en nuestras páginas es el vídeo. cuadros por segundo.clave (keyword) del documento.com. Podemos introducir el sonido de varias formas: bien activado por el usuario. El proEntre las acciones más habituales que blema es que se necesitan diversas facilita Javascript tenemos dos vertientes: etiquetas para hacerlo operativo en efectos e interactividad. tendremos que nido. Dado que ambas etiquetas son inSi lo que queremos es incluir so.tiene mucho sentido crear tu propia quiere del plug-in propio de Macrome. este lenguaje nos permite ejecutar instrucciones como respuesta a las acciones del usuario. El lenguaje HTML define la estructura de una etiqueta META. .mo no se visualizan en el navegador y dia nos permite crear páginas mucho sólo las utilizan los buscadores y almás interactivas y entretenidas. Para hacerlo. No existe ninguna regla acerca de la rectamente como si fuera la televisión. Su estructura es la de demanda.wav”>. Aunque el Explorer es formato de estos archivos. .s 58 www. se trata de un lenguaje de pro. pequeños programas escri. Uno de los mayores retos para los buscadores de Internet es encontrar la información que realmente están buscando los internautas. lo que permite crear páginas interactivas con progra.la cabecera de la página y no llevan etipe. mientras que otros requieren de plug-ins o programas asociados para reproducirse. que no es sino una mezcla de sonido e imagen en un sólo archivo digital.aiff Formato de sonido típico de Macintosh y estaciones de trabajo Silicon Graphics. Por un lado. tencia con sólo un poco de práctica.do. Usar Flash no es difícil. pero no sus valores. es necesa. la mejor manera de mos. se han introducido las etiquetas META o metatags. Además. uno puede decidir la calidad del sonido para así encontrar un equilibrio entre un archivo muy grande con alta fidelidad a uno muy pequeño de baja fidelidad.au Es el formato nativo de las estaciones de trabajo Sun y similares. Por eso. como elementos en movimiento o que cambian de color. es decir.mp3 Popular formato que ofrece una calidad muy alta en archivos pequeños. Es poco conocido fuera del ambiente UNIX.tro HREF de un enlace. Las dos etiquetas META más imporen los navegadores.dad y.mid Archivo de sonido muy básico. podemos aprenderlo etiqueta <EMBED hidden=”true” con facilidad y utilizarlo en toda su po.diversos navegadores. o bien extractores desde un CD audio.forma muy rápida. Incluso sin tener experiencia en ma Netscape Navigator utiliza la programación. primero tenemos que elegir el incluir las dos. Por el otro. aunque este formato permite variar la calidad del sonido para lograr archivos más pequeños. Otro elemento que podemos incluir HTML que genera automáticamente.src=”musica.pctoday. La segunda forma consiste en ingramación del lado del cliente. observaremos que hay etiquetas <OBJECT> y <EMBED> para en los formatos digitales. como si fuera tos en lenguaje Javascript. que se incluye en la mayoría tro propio uso. La fidelidad de la imagen de vídeo se mide por los mismos parámetros de audio e imagen que la componen.tantes son las que indican la descripdad.cda (archivos de un CD de música) a este formato. así como por una variable adicional que corresponde al número de cuadros que se exponen por segundo. Es fácil obtener conversores de . Javascript es un lengua.

s Los dos formatos de vídeo más conocidos.htm. charset=ISO-8859-1”/> <meta http-equiv=”refresh” content=”5” /> <meta http-equiv=”refresh” content=”5.Diseño web.com/otra_pagina. Imaginemos que tenemos un hotel y queremos que desde nuestra página web se puedan reservar habitaciones.html. Aquí significaría que es un documento texto-HTML y que usa un juego de carácteres ISO-8859-1. Con esta etiqueta podemos indicar al navegador que debe recargar la página una vez transcurrido el tiempo de segundos especificado. llevaría a la página especificada. tanto al visitante como sólo aparece un cuadro gris. ya que van a determinar la posición en la que aparecerá nuestra página en las búsquedas de los cibernautas. transmisión satelital directa y televisión de alta definición. En el segundo caso. Con ese resultado. follow”> Nº 87 59 . Si contiene fecha de expiración. pues son lenguajes muy diferentes. en pantalla ficará. Los applets son más difíciles de programar que los scripts y requieren unos conocimientos básicos o medios del lenguaje Java. por otro lado mandará a otra base de datos la información que nos ha pro. sino . Indicamos el tipo de documento que es nuestra página: documento HTML.mucho grafico. que indica que la página se debe indexar. es decir. www. un documento de texto plano. Sin embargo. lo que puede resultar muy útil cuando se trata de páginas dinámicas cuyo contenido cambia frecuentemente. de modo que obligue al navegador a cargar las nuevas versiones de la página que hay en el servidor y en lugar de la almacenada. Podemos dar instrucciones a los robots de los buscadores acerca de qué páginas pueden incluir en sus bases de datos y cuáles deben saltarse. notificará a la base de datos anterior que esa habitación queda ocupada. Junta audio.página donde se ejecutan. Pero supongamos que queremos que esa página muestre unos elementos u otros en función de lo que le pide el visitante. tan. No hay que confundir Java con Javascript. dedicado a crear este estándar para compact discs. que se ha multitud de applets gratuitos que poderealizado la reserva. PCToday. como por ejemplo www. Parte 1ª Principales tipos de archivo de vídeo . televisión por cable. qué precios tienen y cuándo van a estar libres.mpg Empresas de tecnología de todo el mundo forman el Grupo de Expertos en Imágenes en Movimiento. frente a frente. Se trata de mo los que puedes encontrar en s pequeños programas hechos en Java. además. mediante un formulario: quiero reservar una habitación del 1 al 5 de marzo. y califican la página en función de lo que dicen. 04 Dec 2000 21:29:02 GMT”> <meta http-equiv=”pragma” content=”no-cache” /> Informa acerca del editor que se ha utilizado para crear la página web. follow pide que siga los hipervínculos que existan en la página y que indexe las páginas resultantes. necesitaremos que la página escuche la petición del visitante. vídeo y capacidades interactivas. path=/” /> <meta name=”robots” content=”noindex. expires=fecha_valor. diseño.mov El formato QuickTime fue creado originalmente por Apple para su uso en los ordenadores Macintosh. interactúe con el resto de elementos que hay en el servidor si lo necesita y cree la página HTML que enviará al visitante que se la ha pedido. Este estándar lleva mucho más tiempo vigente que el MPEG. Sus valores son: index. por ejemplo. el navegador la conservará en el disco duro hasta dicha fecha y si no la borrará al terminar. En una base de datos albergada en el servidor podemos especificar estos datos. El formato MPEG es muy popular en PC compatibles. prueba” /> Puedes encontrar generadores automáticos de etiquetas META gratuitos en la Red. Veamos un ejemplo.es decir. nofollow indica lo contrario. Entonces esa petición se trasladará a la página dinámica que buscará en la base que se transfieren con las páginas web y que el navegador ejecuta en el espacio de la página. el visitante que desee reservar una habitación introducirá sus datos personales en un formulario que se enviará a una página dinámica que.qt .com/contenidos/metatags. Su principal ventaja consiste en que dependen en menor medida del navegador e incluso son independientes del sistema operativo Podemos hacer la búsqueda tan completa como deseemos dentro de las bases de datos del ordenador donde se ejecudisponibles en la Red.php. Otras etiquetas Meta Elementos de una página web avanzada Hasta ahora hemos estado viendo páginas que almacenábamos en el servidor y que éste nos enviaba cuando nosotros se las pedíamos mediante la introducción de una dirección en la barra del navegador. por un lado.mezclan con todos los componentes de na HTML que informe de que hay una la página. <meta name=”description” content=”Esta página es una prueba del curso de diseño web de PCToday”/> <meta name=”keywords” content=”curso. code la web son los applets.asp o .hasta que no se cargan por completo.misitio. Otra forma de programación dentro mos incluir en nuestra página HTML. que no usa caracteres cirílicos o árabes.com. En primer lugar el visitante nos dirá. creará una pági. a nosotros mismos. <meta name=”generator” content=”Sausage Hot Dog” /> <meta HTTP-EQUIV=”content-type” CONTENT= ”text/html. los applets son más lentos de procesar y de datos si hay habitaciones disponibles tienen un espacio muy delimitado en la para esa fecha. no se tenga de esa búsqueda. Para poder hacerlo. A esto le llamamos página dinámica. Con la respuesta que ob. Una de las principales utilidades de las páginas dinámicas es interactuar con las bases de datos.appletcollection.url= http://www.htm” /> <meta http-equiv=”expires” content= ”Tue. En la Red puedes encontrar habitación disponible para esas fechas y que el importe es de 100 € por noche. etc. Con esta etiqueta META informamos de la vigencia del documento. animación. noindex es justo lo contrario. Ordena al navegador que no almacene la página en la caché del navegador. . Hay que seleccionar con cuidado las palabras que vamos a utilizar dentro de estas dos etiquetas. Ya no tendrá la extensión . MPEG y qt. porcionado y por último noti. Necesitaremos que el visitante sepa qué habitaciones tenemos. Mediante esta etiqueta podemos enviar un archivo de información o cookie al navegador del usuario.Una de las desventajas de los applets es que. <meta http-equiv=”Set-Cookie” CONTENT=”nombre_ cookie=valor_cookie. dependiendo del lenguaje de programación que utilicemos.

Introducción al diseño web. Psicología del color. Programación. que permiten generar páginas web directaEstas dos pestañas nos permiten alternar entre las distintas vistas que ofrece el programa. Estos programas modernos y otros especialmente diseñados para el desarrollo web son las conocidas herramientas WYSIWYG (What you see is what you get: Lo que ves es lo que obtienes). Integración multimedia: Macromedia Flash y Action Script. Herramientas para el tratamiento de las imágenes y el color. Cómo saber si una web es usable.) insertados o enlazados dentro. PC Today nº 93 54 www. sonidos. Trabajando con Sausage Hot Dog. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. 7. toda página web se compone de código y una serie de elementos (textos. PC Today nº 92 Introducción a las herramientas La forma más fácil de crear una página web consiste en utilizar paquetes de programas como Microsoft Office. Razones para conocer los principios de la programación. Herramientas para el diseño web. Mapas de imágenes. llevó a la aparición de programas que les ayuda en esa ardua tarea facilitándoles su diseño. Sin embargo. todo es cuestión de saber utilizar las aplicaciones de las que disponemos y aprovecharlas para dejar volar la creatividad. hasta el editor de texto más sencillo puede ser la solución. Guía del curso 1. Música y sonido.es . Imagen animada y películas. PC Today nº 89 4. Tecnologías multimedia en la Red. C 3. Evaluar la accesibilidad. Elegir la herramienta más cara no tiene por qué significar diseñar mejor. el rápido crecimiento de la Red y la necesidad de que los usuarios no técnicos también pudieran crear sus propias páginas. PC Today nº 91 omo vimos en la entrega anterior. que es generado por el propio software. PC Today nº 87 PC Today nº 88 2. The GIMP. El color y las imágenes. Imágenes: tipología y características.pctoday. 6. PC Today nº 90 5. Planificar y organizar el sitio. El diseño inclusivo. Estas aplicaciones permiten una total interactividad gráfica con el usuario a través de una pantalla de diseño. Accesibilidad. Introducción a las herramientas WYSIWYG. el color en la web. Consejos para diseñar una web accesible. Usabilidad. Al principio todas las páginas web se construían introduciendo los comandos en un editor de textos. etc. mente publicables en la Red mediante el uso de aplicaciones indicadas para todo tipo de usuarios. como puede ser el Bloc de notas. donde podemos construir una página web. Principales elementos de las páginas web. siguiendo las instrucciones del programa y prescindiendo del código. ¿Qué se entiende por accesibilidad? Deficiencias y políticas. imágenes.Curso Trabajar con Sausage Hot Dog En cualquier ordenador es posible crear una página web.

escojamos el software que escojamos. es tremendamente intuitivo trabajar con Sausage Hot Dog. no los borres. las Hojas de estilo en cascada (CSS) o incluso lenguajes de programación de servidor. cubre todas las necesidades que puedas tener para la creación de páginas web y otros elementos. aunque. manteniéndolo pulsado. Ten en cuenta que. Sausage Hot Dog Hot Dog es un editor de HTML y una herraAunque de un aspecto un poco hosco. etc. administrar y publicar páginas web muy completas. La barra de archivo muestra las funciones comunes con el resto de programas. lo moveremos a la posición deseada. lo que permite una fácil plegará un mensaje explicativo de su función. No te preocupes si nunca has tenido contacto con HTML. Esta vista muestra los códigos que el programa genera al construir la página. ya que. La siguiente barra incluye una recopilación de los distintos recursos que ofrece el programa: formato.com. si te decides a comprarlo. colocamos el cursor sobre el extremo de la barra y. Para ello. Sin embargo. barras de herramientas que dan acceso rápido a las funciones más importantes (creación de tablas. que abre el panel flotante de administración de sitios. como puede ser Javascript. PHP. aunque puedas ir visualizando los resultados de lo que vayas haciendo en una pantalla del propio editor o en el navegador. creación en modo de asistente o de asistente automático. puedes acoplar el módulo de español. Dreamweaver Macromedia nos ofrece el programa más completo dentro de esta familia. con las que podemos acceder directamente a las funciones para dibujar y dar formato a los distintos elementos de la página. Verás que. s Nº 88 55 . Lo mejor de estos programas es que se pueden ver los resultados de lo que vamos haciendo en una pantalla del editor o bien pedirle que nos abra la página que estamos creando en un navegador de Internet. Para ello utiliza el comando File>Open Website. resaltado en distintos colores y bien tabulado. navegación. la marcamos partiendo de View>Toolbars. como pueden ser abrir. Puedes descargarte una ideal para diseñadores principianversión de demostración gratuita tes. dentro del sitio aparecen otros. pero a cambio incluyen multitud de ayudas para facilitar la lectura y escritura del código. Son archivos del sistema. No permiten la creación de la página en modo mienta avanzada de desarrollo de sitios web. Javascript.macromedia. tablas. como Javascript. etc. Lo primero que tenemos que hacer cuando vamos a crear un sitio web es crear una carpeta donde alojar las páginas. veremos que justo debajo se despliega una serie de opciones relativas al botón. maciones e imágenes. Para utilizarlos. La vista de edición es la que utilizaremos habitualmente para crear las páginas. etc. lo que permite subir y bajar archivos del servidor. Para situarlas de nuevo en la parte supe- rior colocamos el cursor sobre la barra y. lamentablemente. sonidos. que no respetaba el código que se introducía a mano en la pantalla de código. organizar. es un editor muy completo. Para pasar de una vista a otra pulsaremos en las pestañas que aparecen en la parte inferior derecha. guardar. Sin embargo. como el resto del programa. en cualquier caso. es necesario tener unos conceptos de programación de la web.). gráfico. vamos a trabajar en la vista de código. Una de sus principales características es la claridad del código que genera. Desde luego. Todas las barras de herramientas se pueden modificar y mover de un lado a otro de la pantalla. Con el asistente automático podemos configurar de una forma muy intuitiva el nombre del sitio en nuestro ordenador. formularios. HTML. están en inglés. Dos WYSIWYG frente a frente FrontPage 2003 Se trata de un buen programa que ha subsanado muchas de las críticas que se le hacían en versiones anteriores. colores. Otra de las funciones que ofrece es la capacidad de crear y vincular otros lenguajes distintos a HTML. sin soltarlo. es necesario tener algunos conocimientos de HTML. pero que. Sólo se vende como parte del paquete Office. En cualquier caso. unos programas que se encuentran a caballo entre los WYSIWYG y los editores de texto normales. sus virtudes no se quedan ahí. inserción de imágenes.. ya que contiene las principales en www. Es una herramienta completa y fácil de utilizar. v Este programa admite archivos CSS. Un truco: al colocar el ratón encima de cada botón. Podemos colocar las barras de forma flotante en medio de la página. como Flash o Fireworks para crear aniLos WYSIWYG más vendidos rivalizan en sencillez de uso versión tras versión. etc. Por ejemplo. Parte 2ª También tenemos los editores HTML. paneles de recursos. con la que podemos crear. pero pronto necesitaremos herramientas que nos hagan más ameno el trabajo. aunque se denominen editores de comprensión y manipulación. Algunas de las utilidades que podemos encontrar en este editor son. lo movemos a la posición deseada. También podemos personalizar las barras añadiendo o quitando botones. trabajarás normalmente en la página de código puro.Diseño web. se pueden utilizar otros lenguajes. imágenes. pero no tantas como para abrumar a los usuarios inexpertos. Otra de las virtudes de este programa es que lleva integrado un administrador FTP. Si hacemos click en cada una. Las utilidades del programa te ayudarán. aparte de tus archivos. quizás con demasiadas opciones. así como en el servidor. Es funciones. PHP. Ten en cuenta que. y botones de ayuda para cada opción. etc. La vista preliminar visualiza el aspecto aproximado que tendrá la En la parte superior de la pantalla se muestra la barra de menús desde la que se accede a las principales funciones. al fin y al cabo. lo que nos obliga a realizar un mayor desembolso. Las barras de herramientas que el programa muestra en pantalla pueden variar dependiendo de las que estén activadas. Para que aparezca o no una barra en la pantalla. por ejemplo. se nos despágina en los navegadores de Internet. imprimir.. Su potencia reside en cómo se complementa con otros programas de la misma empresa. Se puede utilizar el bloc de notas para páginas muy sencillas. pero no sustituirán el conveniente conocimiento de HTML.

ayudas y funciones de uso. Antes de deciva creando la página. sino desde el menú superior Format>Bold o pulsando Control+b. te darás cuenta de que Hot Dog no funciona así. éste se distribuye de forma continua y forma un párrafo hasta que pulsamos Enter.El Consorcio World Wide Web es el lugar de referencia poder disponer de las herrapara todos los diseñadores web. mejores.encontrar multitud de tutoriales en la mente vas a diseñar una web persorá crear páginas de forma rápida y nal. si te gusta.htm de la página. apariencia. comerciales de evaluación. tiempo suficiente para aprender el funcionamiento de los editores HTML en general. Del mismo modo que hemos modificado un texto convirtiéndolo en negrita. Ahora es cuando te vendrán bien los conocimientos de HTML. pequeñas correcciones o incluso Si el presupuesto lo permite. Las nuevas verdes encontrar en cualquiera de las aunque en sitios comerciales como siones suelen incluir muchos recursos herramientas es el resaltado en colowww. como Escojas el programa que escojas. Lo más útil que puewww. sin olvidar que todos estos datos pueden definirse en una hoja de estilos . texto. enlaces. conviene tener unos conocimientos Arachnophilia (www. Si únicagenerar la herramienta. s trarla en www. (www. aunque te recomendamos acusencilla gracias a sus recursos.arachnoid. según vayas profundizando ni que éstos sean los mejores o más oficial del lenguaje. no de- Cómo elegir la herramienta más adecuada En el mercado existen muchos editoUn buen sitio en el que encontrar un darás cuenta de que te resulta mucho res de HTML y WYSIWYG.. unos más listado de editores y herramientas es. Al escribir un texto.sausage . bien eligiendo una imagen o un color en el recuadro que nos lo indica. Estos datos puedes cambiarlos más adelante en Format>Document Properties. y sin granRed. Si haces click en él. No hay que confundir el nombre de la página con el nombre del fichero . es muy posible dir al World Wide Web Consortium dades. des decantarte por una gratuita. Tras crear el sitio. Existen múltiples direcciones en Internet como Puedes probar Hot Dog gratis durante treinta días. to adquirir una herramientas más adecuadas para mienta de estas características. un enlace. pero no desde el panel de acceso rápido. des deciden por ti en muchos casos. completas que sean. lada dentro de la página. como XML o TCL-TK.w3c. Para este tutorial vamos Conviene resaltar que no por a utilizar la aplicación disponer de unas herramientas Hot Dog de la compañía u otras vamos a crear páginas Sausage. más rápido y práctico escribir directade nuevo. se introducirá la dirección de Sausage en la página. de tal forma que la elección res del código y la posibilidad de ir de una u otra no dependerá sólo de lo viendo los resultados a medida que se (en español). bordes y fondos. El funcionamiento es similar al del formato de texto. Si estás habituado a trabajar con herramientas como Word.com o www. Sausage pone a nuestra disposición otro panel para insertar elementos. es decir. Puedes herramienta WYSIWYG. sino shareware o demostraciones también de su precio.acehtml.areas.org/WAI/group/AU/tools#HTM.com/products. vamos a empezar con las páginas. Con él puedes ahorrarte mucho tiempo si necesitas incluir una imagen. Todo depende de Puedes utilizarla durante cómo se utilice cada una. y luego escribiremos el texto entre ambas.Curso Para ponerle el título a la página. que nos ayudará a configurar los datos básicos del mismo. puenuestras necesidades. lo que generará dos etiquetas (<b> y </b>). listas de viñetas o incluso elementos multimedia incrustados. en la complejos que otros. utilides complicaciones. Un ejemplo de la sencillez del programa se puede ver a la hora de insertar los enlaces o las tablas. también El perrito verde es un huevo de Pascua dentro de este software. lo podemos transformar de tamaño. nos encontraremos con el panel de propiedades del documento.tucows. todos ellos mente los comandos. abre el panel y en el recuadro Título escribe el nombre deseado para la página. también puedes descargarte versiones gratuitas. En cualquier simples.com) o aspecto económico. Puedes enconen el conocimiento del código. Para aplicar formato a un texto determinado. Es importante ser ordenado y crear una carpeta para cada web y subcarpetas para los distintos apartados. ción de páginas web. el asistente automático te lo pone aún más fácil. bemos seleccionarlo con el ratón y hacer click en el botón de negrita. puedes utilizarla.org/MarkUp. La opción Format>Document Information nos permite establecer el título de la página y las etiquetas meta. se desplegará un menú con los distintos tipos de documentos que reconoce Hot Dog. detalles que Hot Dog no permite cambiar de forma automática.html). un comentario. Lo importante es caso. etc.es .pctoday.htm. color. si no tienes previs. evidentemente. Es interesante poner un título descriptivo puesto que es la guía que muchos internautas siguen para reconocer una web. También podemos cambiar el fondo de la página. sino que primero hacemos click en este botón. de pequeño tamaño. puedes facilitan el trabajo gozarán de adquirirla por un precio más simpatías que las más razonable. Sin que no necesites muchos programas (W3C) para conocer la última versión embargo. te caros del mercado. aunque se le podrían añadir otros lenguajes. para ajustar manualmente todos aquellos pequeños Hot Dog pone a nuestra disposición todos los componentes de un formulario al alcance de un click. podremos verlo al navegar por Internet justo en la parte superior izquierda de la pantalla. que te permiti.w3. el Consorcio W3C. es recoNo es lo mismo un principiante que corregir algún error que haya podido mendable que adquieras alguna un profesional del diseño. las que y. como los colores del fondo. Si elegimos HTML. Si estás más acostumbrado a la primera forma.softonic. En el caso 56 www. sin siguiente dirección: herramientas fantásticas para la creaayudas visuales. aun30 días de forma gratuita que. que disponen de fondos e imágenes gratis para insertar en las páginas web. A continuación. Si haces click en el pequeño triángulo situado junto a la hoja en blanco. así como otros datos que suele contener la cabecera de las páginas web.com/ Tu situación personal y tus necesidamínimos de HTML para realizar arachnophilia). Dar cuerpo a la página Aunque usar HotDog es sencillo.net/colorvivo/home. una línea horizontal. La opción Save as (Guardar como) permite ponerle el nombre deseado y seleccionar el tipo de archivo. dirte por alguna ten en cuenta el Acehtml (freeware. alineación.com y ayudas.css aparte y vincuwww.

Y todo ello. etc. o círculos.html. Haz un diagrama o mapa del sitio y coniespana permite utilizar algunos comandos de PHP y sérvalo cerca ofrece bases de datos. Cambia todos los datos a tu gusto y haz click en OK. aporta algo. aunque también la más agradecida. Hacemos click en File>Save As y Intenta no abusar de las transiciones. Elegimos el sexto icono (empezando por la izquierda). tal forma que. la distribución 3. vamos a utilizarlo para crear una sencilla página web. Esta es mi primera página web.com o www. el de las rayas horizontales. las opciones de accesibilidad. Vamos ahora a resaltar la frase en negrita e itálica. archivos. Antes que nada. Para llevarlo a cabo. el índice de tabulación. Te ayudará a no perderte. como el pionero www. así como el tipo de imágenes que deseamos incluir. corrígela y actualízala. Otras utilidades que puedes encontrar dentro de Sausage Hot Dog es un inspector de código accesible.es. para ver el administrador de sitios. haya fase es donde utilizarás las herramientas WYSIWYG o los editores HTML que quieras utilizar. el idioma. tanto Los 7 pasos para la gestación de una página web 1. Es recomendable seguir una pauta y guardar todos nuestros archivos bajo una misma extensión para no hacernos luego un lío a la hora de enlazarlos. Elegimos. En este cuadro de diálogo también podemos elegir el tamaño. El sitio en el que lo coloques.Diseño web.). una descripción. supervísala.geocities. En primer lu- Un ejemplo práctico Ahora que hemos visto las principales funciones de Sausage Hot Dog. basta con abrir una cuenta gratuita para acceder al panel de control. Parte 2ª de los enlaces. Aparecerá una ventana donde podremos elegir si queremos que la lista contenga números o imágenes. color de texto. Aunque estés familiarizado con el lenguaje HTML. en este caso. 6. 7. Vamos a centrar y hacer más grande la palabra "Bienvenidos". Marca las pautas del diseño gráfipena el esfuerzo que supone crear co. Es necesario recordar que hay que darle la extensión . las páginas web no son más que instrumentos para poner a las personas en contacto. Veamos ahora cómo podemos introducir una imagen para dar un poco de vida a nuestra página. contadores. vamos a introducir varios párrafos de texto y a resaltar determinadas palabras. de echarle un poco de imaginación. Con un doble click se abrirá un cuadro de diálogo. con información caducada. dos y tres" con el ratón y elegimos el menú Insert. Difunde o publica el sitio en Internet. gar. los tipos de fuente. la alineación. dores. Es de los distintos elementos. dos y tres. importante tener un menú siempre Recuerda utilizar hojas de estilo y visible con las grandes áreas. Traza el árbol de navegación. vamos a añadir dos elementos más complejos: una tabla y un v Nº 88 57 . 2. la ventana o marco a la que se destina. finalmente. la seleccionamos a continuación. aparecerá una ventana con el sitio web que has creado. Por último. vamos a ver cómo queda. Para Lo que observes en la Vista previa no tiene por qué coincidir con lo que luego se mostrará en el navegador. Con el asistente automático. hacemos click en H?. En esta nas más distantes del sitio. Ahora que está guardada. Para ello. Confecciona la interfaz. ya que nos presenta todas las opciones que pueden darse para cada campo del formulario. En primer lugar. ¿cómo hago para que los demás la puedan ver? Para ello necesitaremos alojarla en algún servidor que nos ofrezca espacio. En el menú Insert. visitantes. etc. Uno. los elementos más problemáticos del diseño web. hay que grabar la página. En este caso. Hacemos click en File>Open Website. libros de visitas. Hay demasiadas páginas en Internet como para prestar atención a una que no dice nada nuevo. Y ahora que tengo creada mi página. H1. guardamos la página en el ordenador y pulsamos F9. que evalúa cada etiqueta y nos dice si nos sobra o falta alguna propiedad para personas con alguna discapacidad. etc. Hacemos click en la hoja en blanco que se encuentra en la parte superior izquierda y aparecerá una ventana donde configurar las propiedades del documento (color de fondo. Préstale atención y haz caso a los correos que te lleguen a través de ella. que es el formato que reconocen los navega- Una vez allí. No hay nada más descorazonador que una página abandonada. identificado por líneas y puntos alineados de forma horizontal. vamos a crear una lista de guiones. Piensa en si merece la 4. en la vista del navegador. Es la etapa más laboriosa. gratis. etc. siendo el 1 el de mayor tamaño y el 6 el de menor. negrita). Tras construir una parte de la página. te llevará a la etiqueta exacta. Ahora que ya nos hemos familiarizado con los menús de formato e inserción. ya que cansan y ralentizan la carga de las páginas. y esta otra en itálica. Además puedes subir los ficheros a través de un administrador FTP. tenidos que quieres mostrar a tus dependerá de la siguiente fase. lo que abrirá una ventana del navegador predeterminado. en una sola ventana tenemos acceso a todas las variables que se pueden dar: la dirección. la tecla de acceso rápido. éste último en español. hacemos click en el primer botón y elegimos una imagen que tengamos almacenada en nuestro disco duro. Por último. Seleccionamos "Uno. Así mismo. allí alojaremos la página. elegiremos "circle". Esta frase está en negrita. Analiza la información que tendrá un máximo de 3 pulsaciones del y procura tener muy claro los conratón. en la vista de código como en la vista preliminar y. Dentro de las etiquetas <body> </body> introduciremos el siguiente texto: Bienvenidos. Al fin y al cabo. es recomendable utilizar el asistente automático. vamos a crear una web. Busca y estructura dichos contenidos. etc. En primer lugar. nos dirigimos al menú Format. Hay multitud de servidores que lo hacen gratis. mientras creas las páginas. así como la posibilidad de cambiar el orden de aparición. de ser necesarios. s Al hacer click en cada línea. lo que nos mostrará una ventana flotante con diversos números. creamos un sitio llamado "Pruebas" y lo guardamos dentro de "Mis documentos" en el ordenador. donde podrás administrar toda la información relativa a tu sitio dentro del servidor: estadísticas. seleccionamos "esta otra en itálica" y hacemos click en el icono marcado con una I (de "itálica"). centrar el texto debemos hacer click en el icono que hay justo al lado de H?.iespana.htm o . Es momento de comparar los resultados arrojados por el navegador con lo que ofrece la vista preliminar de Hot Dog y realizar los ajustes precisos en el código. Mantén la información viva. donde decides los colores. entre las dos pági5. seleccionamos "Esta frase está en negrita" y hacemos click en el icono marcado con una B (del inglés "bold". vamos a ver los formularios. Se trata de la parte creativa trauna página web y si aporta o te dicional.

y es aconsejable utilizar un tamaño mayor en los títulos o si quieres destacar alguna cosa. la alineación. etc. ya que se trata de uno de los elementos más complicados de controlar. para reducir así la complejidad de este ejemplo. Recomendamos una codificación lo más ajustada a los estándares para que sea legible en todas o en la mayoría de las circunstancias. podemos crear nuestras tablas de una forma mucho más rápida.pctoday. Lo malo de esta opción es que hay que configurar las propiedades a mano. Por último. Tampoco conviene utilizar imágenes gif animadas. escribir todo en mayúsculas equivale a gritar. Esto permitirá que la descarga de la información y la navegación a lo largo de los diferentes temas se haga más rápida para los visitantes del sitio web. existen algunas diferencias entre ellos. para introducir los campos de texto respectivos. bordes. podremos elegir el ancho y alto. A continuación. el código que hemos generado y manipulado. y un botón de envío (Submit). pero si quien este viendo la página no la tiene instalada. ya que pueden obtener una descripción detallada de lo que se muestra en un archivo separado y evitará ralentizar la carga de la página al ponerla en la etiqueta alt (ernativa). verás un icono de la imagen dentro de la ventana. • Procura que los colores se combinen bien y que el texto sea legible. se desplegará una rejilla que servirá de base para elegir el número de filas y columnas deseadas. • La página puede tener un aspecto en nuestra pantalla y otro muy diferente en las de los usuarios que la vean. s 58 www. haz click en el icono correspondiente del menú de inserción. Times New Roman. Dejemos un momento aparcado el formulario y centrémonos en la tabla. divídela en páginas separadas o incluye un enlace con un archivo diferente que contenga el texto en una sola página. En primer lugar. nuestra imagen. Entonces. al principio y final de la página. puede que con la fuente Staccatto el texto quede fabuloso para ti. examina la tercera pestaña. Podemos utilizarlas como herramienta de diseño. De este modo. Por ejemplo. • Si la información es muy extensa. ya que Hot Dog no es capaz de hacerlo a posteriori. Al Las herramientas incluidas en el paquete nos ayudarán a mejorar nuestra web de forma muy sencilla. Advanced. su navegador la visualizará con la fuente por defecto (que suele ser Times New Roman en equipos Windows). dentro de la ventana de código. y obtendrá un resultado no deseado y generalmente poco agraciado. hacerlo. los identificativos. Para insertar un formulario recomendamos utilizar el asistente automático. debemos saber que las etiquetas <tr> y </tr> delimitan las filas y <td></td>. s Tablas útiles Otro de los elementos de los que podemos hacer uso son las tablas. Para crear la tabla. • En Internet. Siempre puedes modificarlos según tus necesidades. Por ejemplo. Por lo naranja. te pedirá que introduzcas una dirección URL para la descripción de la imagen. que nos guiará paso a paso por las diferentes opciones que pueden configurar nuestra tabla: filas. con la opción Quick Table (Tabla rápida). En el menú Table utilizaremos el asistente automático. columnas. Una de las primeras lecciones que debemos aprender de HTML es que las etiquetas deben estar anidadas entre sí. colocaremos el botón de envío fuera de la tabla. Para evitarlo usa fuentes comunes o ampliamente extendidas como. debería ser: El asistente nos brinda la posibilidad de escoger entre alguno de estos modelos prediseñados. s forma automática. pero también para organizar la información. Son visualmente agresivos y cansan. Utilizaremos la primera columna para presentar un mensaje al visitante y la segunda. pero primero vamos a crear una nueva página para que quede más claro. Por último. Para añadir una tabla a nuestra página utilizaremos primero el asistente automático. Este formulario nos permite enviar un correo electrónico a la cuenta que nosotros elijamos. etc. no pongas el texto en Aquí introduciremos los datos más importantes. Internet Explorer o Netscape Navigator) o incluso sistemas operativos diferentes. • Recuerda que no todo el mundo tiene las mismas fuentes instaladas en su equipo. La mejor visibilidad se obtiene con el negro sobre blanco. anchura y texto descriptivo alternativo se han rellenado de con discapacidad visual. si va a llevar o no borde y a cuánta distancia de ella se tienen que colocar el resto de elementos de la página. es decir. ya que suelen irritar a todos los visitantes. que nos evitará muchos quebraderos de cabeza a la hora de configurar las etiquetas HTML. basta con que hagas click y arrastres el puntero del ratón mientras mantienes pulsado el botón izquierdo del mismo. Courier o Verdana. tenemos un formulario y una tabla. tanto. la etiqueta <form></form> debe ser la que envuelva toda la tabla. Procura que no superen los 10 o 12 puntos (tamaño 2 o 3) o Heading 4. los bordes. Por un lado. si utilizas el rojo como color de fondo. A continuación. formulario.es . Los usuarios ven las páginas con distintos exploradores web (por ejemplo. una posibilidad similar a la existente en programas como Word. los colores de fondo. y nuestro objetivo es entrelazarlos para dar formato visual. • Procura evitar los colores chillones como fondo de página. Esto resultará muy útil para aquellas personas Es recomendable rellenar estos datos para ayudar al navegador. por ejemplo. Búscalo en tu ordenador y acepta cuando lo hayas seleccionado. pos de texto: "nombre" y "apellidos". En esta sección podemos definir la alineación de y se debería ver así: Acordarnos de las personas con discapacidades es un deber moral de todos los diseñadores. pero también podríamos incluir una tercera columna y situarlo allí. Si haces click en la pestaña Accesibility. Por otro lado. Arial.Curso Insertar una imagen Veamos paso a paso cómo se inserta una imagen. incluidos los enlaces de navegación locales. y observarás cómo los datos relativos a la altura. vamos a crear una tabla de dos filas (rows) y dos columnas (columns) para albergar nuestro formulario. Aunque todos los navegadores admiten un único lenguaje HTML. aparecerá una ventana con multitud de campos que rellenar: el más importante es el que pide el nombre del archivo (Filename). Aproximadamente. <b><i>negrita e itálica correcta</i></b> y no <b><i>negrita e itálica correcta</b></i>. las diferentes celdas. Algunos consejos • Una buena regla general para escribir páginas web es que su longitud no supere dos o tres pantallas de 640 x 480. Sin embargo. • No uses tamaños de fuentes grandes para el texto. Guardamos y cerramos la que tenemos y creamos una nueva siguiendo los pasos anteriores. En este ejemplo insertaremos un formulario llamado "mi_formulario" con dos cam- Es ahora cuando deben entrar en juego nuestros conocimientos de HTML. es decir.

¿cómo funciona este sistema? La luz blanca está compuesta por par- tes iguales de tres colores. B=0 daría negro. Imágenes: tipología y características. En el sistema RGB (siglas en inglés de Red. Ya sabemos que R=255. PC Today nº 92 7. La imagen. The GIMP. Accesibilidad. el color en la web. los navegadores. lo normal es trabajar con millones de colores y con monitores de velocidad de actualización rápida y cualidades gráficas. G=0. ¿Cómo indicamos a la página el color que queremos? Utilizamos el sistema hexadecimal. aunque fuera decorativa. H 3. ¿Qué significa esto? Pues que en lugar de 10 dí- 54 www. Introducción al diseño web.Curso El color y las imágenes Las imágenes y los colores dan vida a nuestras páginas. Planificar y organizar el sitio. a veces demasiado recargadas de texto. no han evolucionado de la misma manera y. Actualmente. Consejos para diseñar una web accesible. Imagen animada y películas. PC Today nº 90 5. es decir. verde y azul. Guía del curso 1. azul) la cantidad de cada uno de estos colores puede ir desde 0 (ausencia total) hasta 255 (máxima cantidad). El color y las imágenes. B=255 daría blanco y que R=0. Evaluar la accesibilidad. ¿Qué se entiende por accesibilidad? Deficiencias y políticas. Música y sonido. hay que saber cómo utilizarlos y mezclarlos. debería cumplir alguna función. Herramientas para el diseño web.es . pero usando números en base 16. Psicología del color. Mapas de imágenes. Tecnologías multimedia en la Red. ya que muchas veces las páginas terminan siendo un collage poco cuidado. Ahora bien. La ausencia de los tres colores primarios da como resultado el negro. indicando la cantidad de cada uno de los colores primarios. Green. Trabajando con Sausage Hot Dog. que nos permite trabajar con millones de colores. Usabilidad. Lamentablemente. los programas encargados de mostrarnos las páginas web.pctoday. es decir rojo. Cómo saber si una web es usable. Blue. una mezcla en la que se encuentran la máxima cantidad posible de rojo. El diseño inclusivo. PC Today nº 87 PC Today nº 88 2. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. G=255. El sistema RGB indicará la cantidad de cada color entre 0 y 255 para así formar un nuevo color. ¿Y el hexadecimal? Funciona básicamente igual. llamados primarios: rojo. Introducción a las herramientas WYSIWYG. PC Today nº 89 4. Herramientas para el tratamiento de las imágenes y el color. Razones para conocer los principios de la programación. como consecuencia. como el color. El color blanco es pues. verde y azul. verde. PC Today nº 93 ace tan sólo unos pocos años la mayoría de los ordenadores de los que disponía el público en general funcionaban tan sólo con 256 colores. los millones de colores de los que se disponen para trabajar quedan reducidos drásticamente a la hora de crear páginas web. Integración multimedia: Macromedia Flash y Action Script. PC Today nº 91 6. Sin embargo. Principales elementos de las páginas web. Programación.

Los tres colores primarios representan los tres matices primarios. Por mucho que nos esforcemos en que los colores sean iguales para todos. esto producirá también su neutralización. La descripción clásica de los valores corresponde con: claro (cuando contiene cantidades de blanco). Nº 89 55 . se obtiene mayor número de variaciones de un color primario. También podemos diseñar con toda la gama de 24 bits. con lo que disponemos de 216. para obtener miles de colores necesitamos 16 bits (color de alta densidad) y para obtener millones de colores hacen falta 24 bits (conocido como color verdadero). sin el blanco o negro agregados. sólo podremos usar unos determinados colores. de distanciamiento. de continuidad de un objeto en el espacio. Pero esta paleta no es en realidad tan segura. De este modo. de dinamismo. podemos trabajar dirigiéndonos al mayor número de usuarios posibles. el naranja y el púrpura en Los colores oscuros crean espacios íntimos. ya que cada usuario que vea nuestra web. para indicar el color utilizamos seis valores: los dos primeros indican el rojo. El matiz se define como un atributo de color que nos permite distinguir el rojo del azul. Existe también otra profundidad de color. el verde y los dos últimos. el rojo. como ocurre con amarillos.. s La paleta Reallysafe o colores realmente seguros. por ejemplo. Parte 3ª mente de un navegador a otro y de un sistema operativo a otro distinto. en concreto 216. utilizaremos distintas paletas de colores. son el amarillo. En cuanto a los primeros. mezclándolos se obtienen los demás matices o colores. sino que los que usemos se muestran más rápido. Como consuelo. el rojo. es necesario mezclarlo con un gris de blanco y negro de su mismo valor. Por otro lado. es mezclarlo con su complementario. mientras que un cambio gradual en el valor de un color (gradación) da sensación de contorno. podemos combinar 6 tonos de rojo. sistemas y platafor- mas. pero con ella no se consiguen más colores. Se trata de una propiedad importante. Entre estas propiedades cabe distinguir: • Matiz: es el estado puro del color. la diferencia de los monitores nos desbaratará nuestra intención. y disponer así de millones de colores para trabajar. La intensidad de un color está determinada por su carácter de brillante o apagado. navegadores. También lo podemos identificar con un verde amarillento y un verde azulado. los dos siguientes. ambos distintos matices del mismo color. Para 256 colores se precisan 8 bits. • Saturación o intensidad: se refiere a la viveza o palidez de un color. el propio sistema operativo se queda con 40 para su gestión interna. Indica la pureza del mismo. es decir. representa lo claro u oscuro que es un color respecto de su color patrón. Los oscuros inspiran seriedad. Los mejores colores No existe una respuesta única para esta pregunta. Los claros inspiran limpieza. mientras que los luminosos dan sensación de apertura. de los colores corporativos que quizá estev Propiedades de los colores Todos los colores poseen una serie de propiedades que les hacen variar de aspecto y que definen su apariencia final. Si mezclamos un color. no sólo aumentará su valor sino que disminuirá su saturación.Diseño web. Para desaturar un color sin que varíe su valor. Visto lo anterior. ya que contribuye a crear sensaciones espaciales. perderá su saturación a medida que se añada blanco y se convierta en celeste. de tal forma que los nuevos navegadores los interpretan y los traducen internamente por su valor hexadecimal equivalente. piedades de contraste. y los segundos son el azul. pero como no hay más que diez números recurre a las seis primeras letras del abecedario: 0123456789ABCDEF. lo que nos permitirá tener cubierto el rango de usuarios con sistemas de color de 8 bits y de 24 bits. con el blanco. saturación. A más bits. los colores puros del espectro están completamente saturados. como es el caso de los tonos rojos. de alegría. jovialidad. de confianza y de amistad. el verde. dependiendo del sistema operativo en que trabajemos. el azul verdoso. verdes Tipos de colores Colores cálidos y fríos Una forma de dividir los colores es en cálidos y fríos. lo que borrará cualquier posibilidad de que nuestros colores se vean de la misma manera en dos dos dan sensación de actividad. monitores distintos. el verde. Otra forma de desaturar. Colores claros y oscuros Otra posible división de los colores es aquella que distingue entre colores claros o luminosos y oscuros. y naranjas. como el azul. pero entonces sólo apreciaran bien nuestras páginas los usuarios con sistemas de altas prestaciones. Con el paso del tiempo se ha adoptado una lista de colores con un nombre representativo. el azul. se refiere a la cantidad de luz percibida. pero sólo éstos se utilizados variarán ligeramostrarán en todos los navegadores. todo depende del público al que va destinada la página. y para ello podemos diseñar nuestras páginas usando bien la paleta de 216 colores. • Brillo: es la intensidad con más claridad u oscuridad en el color. azules y negro. 6 de azul y 6 de verde. luminosidad. madurez. Volvamos a los 256 colores básicos de 8 bits. cian. el violeta. si queremos trabajar con una gama de colores compatible con todas las profundidades. El brillo se puede definir como la cantidad de "oscuridad" que tiene un color. etc. y el celeste. de seriedad. mientras que los colores fríos dan sensación de tranquilidad. Así. Un color intenso. Los colores cali- Hay que tener en cuenta que. La profundidad de color marca la cantidad de bits de información de que disponemos para definir los colores derivados de los primarios. la de 32 bits. juventud. calma. y siempre deberemos tener en cuenta que los colores Existen más colores con nombre. tendrá configurado su monitor con unas determinadas pro- Utilizar colores cálidos puede dar dinamismo a la página. en HTML el color blanco sería "#FFFF" y el negro "#0000". porciones de un mismo color con fuertes diferencias de brillo (contraste) definen porciones diferentes en el espacio. menor medida. medio (cuando contiene cantidades de gris) y oscuro (cuando contiene cantidades de negro). gitos utiliza 16. de éstos 256 colores.

Es vibrante como la los anteriormente indicados. melanventud y suavidad. como colores secundarios o terciarios en tonos pastel o en una gama de grises. fuego. salud.. dad como para que se pueda leer cómodamente. como manuales y artículos: debemos tener especial cuidado en que el texto destaque adecuadamente sobre el fondo. Hay que para el ojo humano y que tiene poder jo puede ser atractivo y seductor cotener en cuenta que es el color que de curación. Sin embargo. limpieza.No es casual que los coches deportivos utilicen frecuentemente el rojo. Si es oscuro. de empresa o de instituciones: deben diseñarse de acuerdo con los colores identificativos de las mismas. jupágina. si el usuario quiere imprimir la página va a tener problemas por todos lados. de cada diseñador. gastará el cartucho de tinta de la impresora. No hay colores mejores o peores para crear páginas web. taca mucho sobre el entorno sexo. • Páginas destinadas a un público adulto: deben diseñarse con colores serios. ya que un diseñador es un creador. hay que recordar que no es aconsejable su uso para amarillo a la intelectualidad y al penque estas emociones asociadas una página sobre recetas de cocina. y si la tiene activada. frescura. prima la limpieza y claridad de las páginas. dicen que este color ayuda a memo• Naranja: simboliza alegría. siempre debe destacar el texto sobre el fondo con la suficiente clari- mos obligados a seguir y. seducción. Como consejo. con bajos contrastes entre fondo y conte- nido. como aplastante. alarma. Se citación apasionada o erótica. plantas. cielo. • Páginas orientadas a un público joven: pueden incluir colores vivos. Los buenos contrastes se obtienen con fondos claros y textos oscuros. Es el colores pueden expresar senticolor de la carne y del fuego mientos totalmente opuestos a del hogar. No podemos olvidar la accesibilidad que debemos dar a nuestras páginas. Un aspecto a tener en cuenta es el contraste creado cuando sobre un color o una imagen de fondo colocamos otro color diferente. fuerza. sensualidad. infancia. misterio.. así como de elegancia cuando no es muy oscuoptimista. haciéndolo disminuir.es . dinero. do a ver la mayoría de los usuarios. obteniendo de todas formas un mal resultado. por lo sangre. agitación. para las diferentes combinaciones de ro. verano. Como norma general. s cho cansa la vista. peligro. incluyendo siempre el logotipo de la empresa. fuerza. sin usar colores chillones que cansen la vista. También puede expresar tristeza. • Páginas corporativas. Puede llamar la atención. juya que en otras culturas los ventud.pctoday. Por otro lado.. y hay psicólogos que corresponden a la cultura occidental. dice que es el color más descansado aunque también la ira y enfado.. calor. ritualidad. delicadeza. intensiza. Otro aspecto que debemos tener en cuenta es si queremos que el usuario pueda imprimir nuestras páginas. o bien con fondos oscuros y textos claros. Es un color dad de un mismo color. moderno y denota alegría. fríos. o si lo cambiamos por lo menos dejar los enlaces subrayados. El color de los enlaces conviene que sea el azul estándar del navegador. Sin embargo. Si la respuesta es afirmativa. Es un color que influye sopeligro y si es muy suave. a mumo los labios pintados de una mujer o fatiga más a la vista. Debemos verlas con los ojos del posible visitante. paque un entorno amarillo brillante • El negro: implica elegancia. ya que es el color que está acostumbra- primarios. salvo que ésta sea de un color y to- 56 www. colía. amistad y desentusiasmo. Un entorno amarillo melleva asociado un conjunto de emoseguramente porque no hay ningún dio o pálido transmite comodidad. porque causa una estidable. sanque le rodea. za. y llega a ser chas personas les parece desagradesencadenar asco. En las sitios educativos. y esto también es importante en el caso de las imágenes de página. • Verde: recuerda la naturalegre. mal. y también con fondos fríos y textos cálidos. sin altos contrastes de tono. por lo que una lectura clara y cómoda es fundamental. no verá nada en la impresión. sugerir Normalmente. y por citar sólo unos cuanfrutas tropicales. mareo. en colores neutros. hay que evitar los colores muy oscuros. siempre que no sean análogos. Es contradictorio. puede indicar colores que se pueden dar. con la inclusión de pequeñas animaciones en Flash de tonos vistosos. paemocionales varían enormemente dad.Curso El color y las emociones Es bien sabido que las respuestas dad. fuerza. inocencia. elegantes. primavepara cada color y para cada intensifrescura e incluso frío. con altos contrastes entre fondo y contenido. masculini- fundamental de estas páginas es ser leídas. No debemos olvidar a los usuarios afectados por el daltonismo. ciones y asociaciones de ideas proalimento azul en la naturaleza. etc. que puedan gustar a la mayoría.. luz del sol. y a otras les sugiere pasión. ya que es un color pasional. dignidad. y por lo tanto nuestras creaciones están en gran medida inspiradas por nuestra personalidad. podemos seguir unas pautas generales que nos orientarán: • Páginas destinadas a un público general: deben estar basadas en colores más bien neutros. blancos o púrpuras-rojos. No olvidemos nunca que la misión principal de una página web es transmitir información. a quienes la navegación por nuestra página les resultará muy difícil si nos basamos únicamente en rojos y verdes. calor. tilidad. para que se pudieran visualizar. Está asociado con senticrecimiento. y estos ojos muchas veces no están en las mismas condiciones que los nuestros. dad. El rorizar datos a las personas. Si es muy pálido.• Azul: implica verdad. abundancia. estado de ánimo. Se ha asociado siempre el pio. incluso tirando a grises. comodi• Amarillo: comunica entusiasmo.. peligro. confianza. exótico como las Así. jugoso como tos colores. da sensación de espiSi es muy brillante. carácter belicoso. ra incitar a una acción o para marcar puede llegar a provocar una sensa• El blanco: está asociado a la purelos elementos más importantes de la ción de irritabilidad en las personas.. Siempre podemos recurrir en este caso al típico estándar de fondo blanco y letras negras o gris oscuro. puede inspirar sión. tristeza. en especial. sugiere informalicer lo siguiente: • Rojo: transmite pasión. Con este planteamiento.. dad en el trato. que destaquen muy bien. samiento claro. fermientos enérgicos y con la ex. por lo calor. Da sensación ra. podríamos establela naranja. bosques. inocencia. utilizar un fondo claro y letras oscuras. agua. • Páginas exóticas y a la vez elegantes: se pueden obtener con fondo negro o con color muy oscuro y letras o motivos dorados. ya que el objetivo Los colores alegres dominan las páginas juveniles y dirigidas a un público infantil. o al revés. no es recomendable usar imágenes de fondo en las páginas web. todo depende del contexto y del conjunto. ya que esto nos obligaría a dar colores claros a los textos. o al revés. ligereza. pero cuando se emplea mu. Si no tiene activada la opción de imprimir los colores de fondo. cuando se contempla un charco de mulación excesiva de los ojos. • Páginas divulgativas. cada color individual bre el apetito. o cuando situamos próximos en nuestra página dos o más colores distintos. calor.

Se caracteriza Cómo instalar The GIMP Podemos descargar el programa ciaciones de archivo se nos pregunta desde www2.rencia. En un principio se desarrolló para el sistema operativo Linux.zip. desde Windows 95 hasta Windows XP. mucho más avanzada. 32 Mb de Ram. su compresión es sin pérdida y perPara las fotografías es mejor utilizar el formato JPG. el portapapeles o por captura de pantalla. y los requisitos mínimos del sistema son los siguientes: Pentium I a 133 MHz. Es importante instalar los archi. los más extendidos en Internet son GIF y JPEG. etc. PNG es el acrónimo de Portable Network Graphics (Gráficos de Red Portátiles). Estos filtros se instalan por nos pide elegir una carpeta para insseparado. y le cuadro de diálogo Seleccionar asodecimos instalar. Cuando lo abrimos. Asímismo. la resolución una resolución con las características del equipo. JPEG es el acrónimo de Joint Photographic Experts Group (Grupo Unido de Expertos de Fotografía). Respecto al color. ya que permite 128 ó 256 de una paleta de 24 bits. que la ima. todavía no se admite en todos los navegadores. nos indica que GIMP setup-1.gif. de archivos . • Abrir: nos permite seleccionar una imagen desde una carpeta para poder trabajar en ella. por eso se dice que posee un formato de compresión con pérdida. Recomendamos cionales. para más adelante realizar varios ejercicios prácticos.mos asociar a GIMP. esta transparencia es que puede variar entre 2. es decir. porque elimina información. basándose en el hecho de que el ojo humano no es perfecto y no logra captar toda la información que se puede almacenar el una imagen de 24 bits. no muy apagado y con poco contenido gráfico por unidad de pantalla. descomprimimos el procedemos a la instalación. Una de las grandes diremos que soporta hasta 256 coloventajas de este formato es que permite res. la forma en que se visualizan las ventanas de GIMP. Fichero. pueden ser 24 bits en imágenes de color o solamente 8 en fotografía en blanco y negro. Sin embargo. del monitor y los de 800x600 el programa funciona sin plug-ins añadidos. extensiones y ayuda. Aceptamos los términos Ahora que tenemos instalado el prode la licencia y seleccionamos el grama. • Preferencias: desde donde se pueden cambiar los valores correspondientes al número de niveles de deshacer. En Seleccionar tareas aditalar el programa. tajas de este formato es que no permite la transparencia ni la animación.¿Que es GIMP? más. problemas.cl). mite la transparenpor el número de colores que utiliza. Su objetivo es proporcionar un formato de compresión de imágenes sin pérdida adaptable a cualquier tipo de imagen. 4. el más conocido dentro del mundo del software de libre distribución dedicado al retoque fotográfico y la composición y creación de imágenes. que contiene tres menús: El menú Fichero contiene los siguientes submenús: • Nuevo: despliega un cuadro de diálogo desde donde podemos escoger las medidas para una nueva imagen. es decir. ejecutaresolución de mos el programa pantalla no para configurarlo tenga de acuerdo a 1. aunque la patente ya ha prescrito en muchos países. vamos a acoplarle el módulo directorio donde lo queremos instalar. El formato JPEG intenta eliminar la información que el ojo humano no es capaz de distinguir. v El formato PNG es el que más futuro tiene. Recomendamos vos en el orden que indicamos.Diseño web. sión sin pérdida. aunque. 8.si/~sopjsimo/ qué tipos de archivos gráficos deseagimp. s Nº 89 57 . la resolución del monitor. presenta la desventaja la transparencia. Cuadro comparativo entre los dos principales formatos para web. Una vez que hemos archivos en formato gif y tiff compriaceptado los términos de la licencia . por ejemplo.zip y lo ejecutamos haciendo necesita filtros extra para exportar doble click . ya que despistan mucho al usuario y enmascaran excesivamente el texto. Formatos gráficos Una misma imagen puede almacenarse en diferentes formatos.poder instalar el plug-in . cia. Por contra.zip. al igual que éste. gen no tiene por qué ser cuadrada. 32. 16. opciones por defecto y por último. nuestras necesiel programa de dades.de que no permite la animación. los banners. un formato de compre. y descomdo. archivos. dejamos el predetermina. Su que sea variable. Funciona en todos las versiones de Windows. No funcionará con una configuración de 256 colores. Aquí eleinstalación desgiremos la carplegará un peta donde guarmensaje de daremos los advertencia . el ajuspero no te prete de rendimienConfigura el programa de acuerdo ocupes. Se pueden apreciar las diferencias de legibilidad y calidad de los tonos continuos (www. sino que puede tener un recorte. ción de Imágenes GNU (GNU. así como los demás elementos de la página. por ejemplo. Ade. Se caracteriza por conseguir una mayor compresión que el formato GIF (alrededor del 10%) y. archivo . A continuación. En el Simplemente pulsamos en él. 200 Mb de espacio libre en disco duro. ya que los desarrolladores de software libre se están volcando en él. Fue desarrollado para el intercambio de imágenes en Compuserve.arnes. Parte 3ª Manipulation Program). aunque los autores aclaran que esta versión aún presenta pequeños fallos. En caso de que nuestra Ahora que ya está instalado. Respecto a los colores. • Adquirir: bien sea por escáner.dispar. Una de las desven- Vamos a comenzar con la descripción de los menús y las herramientas. mido. La organización W3C recomienda el uso del formato PNG (Portable Network Graphic) para cubrir ciertas lagunas que dejan los otros formatos.024x768 ppp. como es de reciente aparición. Cierra GIMP para Igualmente. es decir. y hace ya algún tiempo que se encuentra disponible para Windows. • Diálogos: con las opciones que se muestran a conLa compatibilidad con LZW se encuentra separatinuación. dejar todas las casillas sin seleccioDescomprimimos gtk+-versionnar. elegimos la Instalación típica. Fue diseñado para la compresión de imágenes fotográficas. En el siguiente cuadro de diálogo primimos gimp-version-lzw-setup. da del programa por la vigencia de la patente. con to. resolución mínima de 800x600 ppp y color verdadero de 24 ó 32 bits. que podecompresión se basa en el algoritmo mos hacer un degradado de transpaLZW. sólo aparece la caja de herramientas. se pueden crear imágenes animaGIMP es el Programa de Manipuladas. dejamos seleccionadas las dejar la predeterminada. Image GIF es el acrónimo de Graphic Image File Format (Archivo de Formato Gráfico de Imagen).

Podemos descargar mapa.178.147.200.Dispositivos de entrada. Se puede abrir cualquiera de ellas desde aquí.247. Veamos el código: <img src="europa. Para ver los colores de esta paleta. etc.280. Cuenta GIMP es la alternativa gratuita a Adobe Photoshop. JPG.Curso con 56 patrones que se pueden usar para rellenar objetos. Este tipo de imágenes activas se denominan "Mapas de imágenes".222. que lo componen. aparecerá una mano para indicar que se trata de un enlace. Muestra el dispositivo de entrada por ejemplo. similar al administrador de archivos.Índice de documentos. patrones. Es el último de los submenús y. señala las coordenadas mos una imagen de nuestro sitio web y del mapa (coords) e introduce el con las herramientas cuadrado o polígocomentario (alt="España y Portugal") y no.com. Podemos localizar la carpeta donde esté guardada la imagen mediante la barra de desplazamiento y.. TIFF. Despliega el cuadro de diálogo Selección de patrón. se deberá tener abierta una imagen indexada. en algún lugar debajo de la etiqueta IMG. También se puede llegar a este cuadro de diálogo haciendo doble click en el icono Patrón activo. Abre el cuadro de diálogo Paleta de colores. GIF.Y donde se nos pedirá el nombre de la desde la esquina superior izquierda de página a la que queramos enlazar.205 dice que el área de fondo no tiene nin. • Debajo del menú Diálogos.269. Abre el cuadro de diálogo Brochas para escoger entre una colección de 50 diseños y tamaños. Abre el cuadro de diálogo Selección de gradientes. el que se abrió más recientemente. encuentran guardadas en nuestro ordenador.255.139. creamos áreas activas. . . Permite hacer cambios en los colores. Debajo de Directorios se encuentran las unidades de disco y las carpetas. Podemos hacer click en Salir si no deseamos guardar los cambios o en Cancelar. aparecerá un cuadro de diálogo e indica las coordenadas (en pares X. colocando el cursor en la unidad raíz. pero define un polígono el área.147. . abri(shape="rect"). Repetimos la operación Si ponemos el cursor encima de un área activa de la imagen. También se puede llegar a este cuadro de diálogo haciendo doble click en la herramienta deseada.189. 249.137. cierra el programa y cualquier archivo que esté abierto.re en www.173. • Salir. . aunque si la imagen contiene capas. se abre el cuadro de diálogo Selección de color. Abre el cuadro de diálogo Paleta de color indexado. PNG.157.220. GIMP despliega un men- Las las herramientas de selección.gif" <area shape= "rect"#España y Portugal coords= "1.268.149. que permite escoger entre cualquiera de los colores que se encuentran en una imagen indexada (generalmente un gif) para pintar o rellenar nuevos objetos.130.285. MapEdit es una aplicación muy sencilla que nos 174. aunque aún le quedan muchas diferencias por pulir.224.173.232.278. .Gradientes. Aquí podemos ver los valores RGB.215.269.htm" title= "España y Portugal"/> <area shape= "poly"#Italia y Grecia coords= "121.Brochas. . 4.296" href="espana_portugal.274.187. canales y caminos .245.196. brochas y gradientes cuando se tiene instalado algún dispositivo de entrada.277.237. La cuarta línea nos 177. También se puede llegar a este cuadro de diálogo haciendo doble click en el icono Gradiente activo. En el mismo el enlace al que se llamará. Abre el cuadro de diálogo correspondiente a las opciones de la herramienta que se encuentra activa. así la imagen) de cada uno de los puntos como otras opciones adicionales. ref" alt="Europa" /> podemos utilizar el programa Mapedit </map> de la empresa Boutell para crear un Este código define el funcionamiento del mapa de imagen. hacemos click en el menú Fichero y seleccionamos la opción Abrir.130. Para abrir una imagen.Capas.243.277. en donde se puede escoger un color para rellenar objetos (color de frente) desde las 39 paletas con que cuenta.259.es . éstas no se guardarán. hacemos doble click para visualizar las carpetas.182.134.169.291. .27 gún enlace y la última cierra el mapa.76. aparezca una página relacionada con ese país.Paleta.ayudarán en esta tarea. Cómo abrir y guardar una imagen Entre los formatos más conocidos que se pueden abrir y guardar con GIMP se encuentran: BMP.237. Muestra un informe de los errores producidos en el transcurso de la sesión de trabajo.243. como ya habrás deducido.226. .264.212.Estado de dispositivo. aparece una lista con los últimos cuatro archivos abiertos.266. 121. Éste cuenta con setenta y ocho diseños que se pueden modificar para crear más.264. s Este menú es equivalente al tradicional "Archivo" en otros programas. 233. al pulsar sobre determinado país. En caso de que no se hayan guardado los cambios de alguna imagen. momento en el cual se despliega el cuadro de diálogo Cargar imagen. Veamos el código necesario para hacer funcionar nuestro mapa: <map id="europa" name="europa"> 58 www. Al hacer doble click en el icono Color de frente.253. saje preguntando si realmente queremos salir. . La tercera momento en que terminemos de definir línea es similar. mano las coordenadas de cada uno de 220" href="italia_grecia" title="Italia los puntos que definen las áreas es muy y Grecia" /> engorroso.boutell.291. el número hexadecimal del color o escoger uno nuevo. edición y dibujo están en el centro.124.286.280. También se puede llegar a este cuadro de diálogo deshaciendo doble click en el icono Brocha activa. . Por ejemplo. Despliega la ventana Índice del documento. siendo el primero.Patrones.230. cuando se tiene instalada una tableta digitalizadora. para poder guardar el trabajo.pctoday.Paleta indexada.Consola de errores.1 Construir un mapa introduciendo a 71. Una vez que va correspondiente es un rectángulo hayamos instalado el programa. La primera línea incluye el nomuna copia de evaluación de este softwabre y la segunda indica que el área acti. TGA. Existen programas que nos <area shape="default" nohref="noh. pero a diferencia de éste muestra una lista de todas las carpetas que contienen imágenes y que se Mapas de imágenes Supongamos que tenemos un mapa de Europa y queremos que.157.Opciones de herramienta. usemap="#europa" alt="Europa" /> Será el atributo usemap= "#europa" el que nos va a indicar que las instrucciones de este mapa están guardadas en otro sitio.262. ayudará a crear mapas de imágenes. 298. También se puede leer y guardar archivos de Adobe Photoshop.

buscamos la imagen que deseamos abrir. arrastra la selección al punto deseado. uno de los métodos más sencillos de seleccionar objetos. mover o rellenar con un color el área que queda dentro de la selec- Una buena manera de conocer el programa es ”trastear”con todas las opciones que nos ofrece. La forma de hacerlo es mantener presionado el botón del ratón mientras deslizas el cursor sobre el contorno que quieres seleccionar. la calidad es más pobre. Con mayúsculas. o propiedades de la herramientan que mientras mantienes presionada la tecla Control.Diseño web. Coloca el cursor y luego lo arrástralo. pero en la Vista previa. buscamos la carpeta en la cual vamos a guardar la imagen y en el cuadro de texto que se encuentra arriba del botón Aceptar.gif. aplicarle y cuando cambie de forma.00 muestra la imagen selección circular. Una vez que la selección haya quedaEl área seleccionada queda enmarcado a tu gusto. utiliza regiones dibumuestreo y Método DCT y así lograr jadas a mano. arrástralo hasta encuadrar la imagen. Las herramientas de selección La selección rectangular nos permite seleccionar un área con esa forma en una imagen. Nº 89 59 . Para realizar esta selección haz click en el icono Selección rectangular ubicado en la barra de herramientas y luego. po. Ahora. escribimos el nombre que le vamos a dar a la imagen incluyendo la extensión. mientras muestra una flecha en diagonal. Para que GIMP pueda guardar las imágenes en formato . Parte 3ª en la carpeta correspondiente a la ubicación de la imagen. se desplegará Pulsa click sobre la imagen y. Para mover la ventana. con el botón izquierdo del ratón presionado. presiona la tecla Z. mejores resultados. coloca el cursor en una esquina de la imagen. podrás restar sondel programa. deberíamos proceder de la misma manera. desde el el cuadro de diálogo relativo a las menú Editar. Se requiere tener buen Recuerda que si te equivocas. con el botón izquierdo del ratón. Finalmente. bien sean contiguos o no. que incluye la información y en el que también puedes hacer los ajustes necesarios mediante la introducción de valores en píxeles. es necesario hacer click en cualquier punto exterior de la selección actual. a un valor mayor. se. haz click. Lo mejor de esta herramienta es que permite modificar la selección mediante los puntos de control que forman las aristas. en uno de los cuadros de las esquinas puedes moverla. Elige la extensión del archivo dependiendo de los colores y el tamaño. mueve el cursor hacia cualquiera de las otras esquinas. La selección circular nos permite realizar selecciones elípticas o circulares de una imagen. Probaremos con varios valores hasta que encuentres un punto adecuado. Para realizar una nueva selección. siempre puedes usar la opción Deshacer. debajo de Directorios. Para cancelar la selección actual. arrástralo en diaTransformación gonal para formar una ventana. Seleccionar regiones con curvas de Bézier es muy útil para elegir formas irregulares o con curvas. coloca el cursor de una imagen Una vez terminada la selección. Al soltar el botón. debajo de Archivos. hacemos click en el botón Aceptar. coloca el cursor fuera del área punteada y. selecciona el icono que se encuentra en la segunda fila y segunda columna (cuatro flechas cruzadas). la selección se cierra automáticamente. la calidad de la imagen es mejor pero también su tamaño en Kb. primero tenemos que indexar la imagen. Otra forma de seleccionar regiones continuas es mediante la herramienta llamada "varita mágica". Vuelve a poner el cursor encima de la selección y. podrás esta herramienta (sesumar selecciones gunda fila. podemos recortar. Hacemos click en Aceptar para guardar la imagen. s desplazan alrededor de la imagen. arrastra el cursor en diagonal para formar una ventana de selección. haz click dentro de ésta. cortarla.arrastras el cursor sobre la imagen. Para ajustar la selección. se formará una elipTrabajar con GIMP es similar a hacerlo con otro software. Progresivo y dejamos los valores por defecto para Sub. En el cuadro de diálogo Guardar imagen. quierdo del ratón. tenemos que ajustar la barra deslizable Calidad y el tamaño en bytes y Kb. a continuación. mantén presionanítida. Seleccionamos la imagen y aceptamos para abrirla. los iconos de selección. suelta luego el botón del ratón para terminar la selección. seleccionamos Fichero y luego Guardar como. Para mover la selección a otro punto. Con ella puedes acotar regiones de colores similares.de una imagen. arrástralo para cambiar el tamaño de la ventana. cuarta coparciales que estén lumna) se puede seen contacto y converleccionar con detalle tirlas en una sola. Se puede crear una vista previa de la imagen antes de abrirla si hacemos click en el archivo y luego otro en el botón Generar vista previa. Haz click trol. Ahora. de esta manera. ción. Para seleccionar formas irregulares nes Optimizar. para fijar la selección en su lugar. primero elige una zona de la imagen mediante cualquiera de las herramientas que has visto antes. al mismo tiemestás utilizando. Del lado derecho. pulso para no desviarse demasiado al realizar dicha selección. coloca el cursor en uno de los cuadros de las esquinas y cuando cambie de forma y muestre cuatro flechas. La forma de realizar la selección es exactamente igual a la selección rectangular. Si haces doble click en cualquiera de un color o cualquiera de las muchas opciones que nos ofrece GIMP. haz click dentro ésta da con líneas discontinuas que se para recortar la imagen. Si mantienes prePrueba ahora a corsionada la tecla de tar la imagen. tro en una esquina de la trozos de las selecimagen y mientras pulsas el botón izciones a una selección anterior. Para guardar una imagen en otro de los formatos disponibles. la imagen se da la tecla de mayúsculas mientras ve borrosa. Notarás que aparece el cuadro de diálogo Información de recorte y cambio de tamaño. Para realizar una un valor de 0. Si el área de una imagen ahora mantienes presionada la tecla Con. hacemos click con el botón derecho del ratón en cualquier parte de la imagen y en el menú que aparece. en la caja de herramientas. Mediante unos tiradores podemos determinar fácilmente el área que queremos recortar.Las herramientas de selección y realizar un recorte las más importantes dende la misma. Seleccionamos las opcio. A un valor bajo. La opción Suavizado tiene un efecto parecido al desenfoque. A un valor alto. Haz click en una de las esquinas y mantén pulsado el botón del ratón. selecciona Deshacer. Si quisiéramos guardarla en formato jpg.

Nos daremos cuenta de que la dura realidad es que el esfuerzo que se utiliza en crear una web se centra en ver y 52 www. Introducción al diseño web. eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico". Planificar y organizar el sitio. Para conseguir este objetivo. ¿Qué se entiende por accesibilidad? Deficiencias y políticas. Siempre que apa- recen las palabras efectivo y eficiente. Introducción a las herramientas WYSIWYG. PC Today nº 93 i acudimos a definiciones formales. Imagen animada y películas. hay una parte muy importante que muchas veces se pasa por alto: la usabilidad. hay que plantear el desarrollo de nuestra web de forma que básicamente sea rápida. Accesibilidad. Dejándonos de tecnicismos y normas (siempre necesarias). el color en la web. en condiciones específicas de uso".es . Cómo saber si una web es usable. Principales elementos de las páginas web. The GIMP. coloquialmente podemos definir "usabilidad" como la facilidad de uso aplicable a cualquier sistema que interactúa con un usuario.iso. Efectivo es aquello que produce resultados rápidamente a costa de utilizar los recursos necesarios y eficiente es aquello que genera los mismos resultados con un mínimo de recursos. El color y las imágenes. Razones para conocer los principios de la programación. Psicología del color. PC Today nº 90 5. www. En la primera parte ya dimos algunas pautas que se deben seguir y antes de ponerse a trabajar hay que planificar. La primera definición hace referencia a la necesidad de que exista un usuario para valorar si un producto es usable o no.Curso Usabilidad Hemos visto en las anteriores entregas todo lo relacionado con los elementos que podemos utilizar para crear nuestra web. • ISO/IEC 9241: "Usabilidad es la efectividad. El diseño inclusivo. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. Tecnologías multimedia en la Red. aprendido. PC Today nº 89 4. Evaluar la accesibilidad. Guía del curso 1. PC Today nº 91 6. Herramientas para el diseño web. Usabilidad. Imágenes: tipología y características. PC Today nº 92 7. PC Today nº 87 PC Today nº 88 2. Mapas de imágenes. Música y sonido. Pero no consiste sólo en encajar piezas. Trabajando con Sausage Hot Dog. Programación. Herramientas para el tratamiento de las imágenes y el color.org) dispone de dos: • ISO/IEC 9126: "La usabilidad se refiere a la capacidad de un software de ser comprendido. Consejos para diseñar una web accesible. La segunda hace referencia a cómo el usuario puede realizar un trabajo en un determinado escenario de forma efectiva. cómoda y fácil de navegar. Integración multimedia: Macromedia Flash y Action Script. la Organización Internacional para la Estandarización (ISO. S 3.pctoday. conviene indicar la diferencia. usado y ser atractivo para el usuario.

Aquí mostramos una serie de enlaces relacionados. Se perdieron más de 23 billones de euros debido a la falta de Interfaz Siempre que hablamos del término interfaz. No es v ¿Qué el IPO? Este término es más conocido por sus siglas IPO. Dentro de los sitios web en castellano. mos consultar los estándares de usabilidad. Si tuviéramos que definir el término. Más conocida como IPO. esto indica que una interfaz es ante todo. tendríamos que preocuparnos de sincronizar el motor con la caja de cambios para poder ir marcha atrás. Si a eso añadimos que si no fuese por la palan- Organización Internacional para la Estandarización. Muchas interfaces están diseñadas para trasladar herramientas del mundo real al virtual.info puede ser uno de los más interesantes donde obtener información. un intermediario de la comunicación con la audiencia. en inglés HCI (HumanComputer Interaction o interacción entre máquina y persona). una web puede ser más o menos usable dependiendo de una serie de cuestiones: • Para qué sirve la web (objetivo). s El quinto congreso sobre Interacción se celebrará entre el 3 y 7 de mayo de 2004 en la Universidad de Lleida. la mayoría de los diseñadores se conforman con que no existan restricciones en la comunicación. Hay muchos estudios que demuestran que los comportamientos de los usuarios con respecto a un sitio web determinan su usabilidad. no existen unas "reglas" de usabilidad que se deban seguir para utilizar los elementos de una interfaz web. lo mismo desarrollar una web para un astrónomo que para un diseñador gráfico. habría que decir que una interfaz es una serie de elementos que nos permite manejar algo complejo de forma sencilla.). Al final siempre es rentable emplear más tiempo en este punto. podríamos definirla como el intercambio de información entre personas y ordenadores. es decir. etc.com/manuales www. Nº 90 53 . un lápiz por el ratón y el bloc de dibujo por la pantalla. Su objetivo es que este intercambio sea más productivo en aquellas tareas en las que cooperan humano y máquina. Podemos ver la importancia del diseño de una interfaz en algo tan cotidiano como un coche (cuya interfaz ha mejorado a lo largo de los años desde su invención).ainda. prescindir a la hora de crear una página web. Evidentemente. una revista o un coche. pero la influencia y expansión de Internet han abierto un lugar creciente a los estudios sicológicos sobre sus contenidos y a la forma de actuar de sus "espectadores".Diseño web. sólo se piensa en los ordenadores.ch.desarrolloweb. Aunque generalmente vienen unidos: IPO/HCI. pero llevamos utilizando las interfaces desde la revolución industrial. Esto no significa que no haya una serie de principios que se debe seguir en cualquier diseño. sería un desastre o ni siquiera lo podríamos poner en funcionamiento. Pues bien. Algo tan sencillo como poner unas letras en el pomo de la palanca nos da una información esencial e indica las acciones necesarias para poder cambiar de velocidad.iso. ya sea una página web. la usabilidad y su estandarización vienen de una rama de Psicología Aplicada que es- www. www. Volviendo al concepto de la interfaz del coche.udl. listas desplegables. Pues bien. sería bastante complicado sacar el carné de conducir si todos tuviéramos que comprender el funcionamiento interno del mismo. El propio concepto no permite unas reglas fijas para estas preguntas. si la interfaz de un coche no fuese clara. Hay estudios que indican que la población que estuvo conectada a Internet en 2003 a nivel mundial ascendía a 450 millones de personas. cuadros de diálogo. • Dónde se utiliza o en qué contexto. necesitan o están de alguna forma relacionados con el contenido que se ofrece. Interacción Persona-Ordenador Haciendo un poco de historia. ca de marchas (elemento de la interfaz). Todos hemos tenido experiencia como usuarios en las miles de interfaces que existen. Incluso dentro del mismo contexto. para aquéllos que queráis profundizar en este tema. Aquí pode- En Internet podemos encontrar mucha información acerca de la usabilidad. Parte 4ª comprender el uso de la misma. Mientras los científicos se preocupan de cuantificar los comportamientos interactivos.es:8080/aipo www. • A quiénes va dirigida.htm (Este último en inglés). Acompañado de un pedal de embrague (otro elemento de la interfaz). Esto indica que no es simplemente un término del que se puede Procura ponerte en la piel de un usuario. A pesar de que existan estudios y especialidades en carreras universitarias.com/trump/ resources/standards. ¿Quién no ve regularmente docenas de interfaces a la semana? En muchas ocasiones (como es el caso de los buscadores) repetimos la visita regularmente. no es lo mismo desarrollar una web para un diseñador gráfico de 3D que para un diseñador de carteles de cine. Si el término lo llevamos a cualquier herramienta que usemos en nuestro PC. con una serie de adaptaciones que permite cambiar.usability. simplemente una interfaz es el conjunto de elementos que nos permite interaccionar con dicha herramienta (botones.info griho. ainda. se permite esta operación. Siempre se ha pensado que era un terreno al que sólo se dedicaban los ingenieros e informáticos. por ejemplo. Por deducción verás que el término se hace relativo.serco. enlaces. tudia la Interacción Persona-Ordenador. La mayoría de las personas sienten afinidad y familiaridad con una página web porque quieren.

más fácil será aplicar cambios. según su supone el 10%. pero es el peor consejo que se debe seguir. • Mantenimiento evolutivo: incor. utilizar herramientas de desarrollo evitará que necesitemos un conocimiento profundo del sistema operativo sobre el que trabajamos. • Mantenimiento perfectivo: mejoras que hay que realizar en la calidad del producto final (optimización de código. Volvemos a repetirnos: cuanto más sencillo sea un diseño y más clara la información suministrada al usuario. Pues 100%. Un presupuesto anual de mantenimiento debería ser al menos un 50% del coste inicial. quizá debamos emplear más presupuesto en el desarrollo. que no siempre funcionan según las normas. Los expertos opinan Dentro de los expertos en esta enlaces. Aún así. faz es el "feel". ya que es la que se En esta entrega no vamos a entrar comunica con el usuario por sí en programación. Si añadimos que depende de nuestra interfaz web que ganemos dinero. nal construida usuario. También está la opción más sencilla y que muchos hemos (nuevo hardware. visto en Internet: añadir en nuestra Home la línea típica que dice "Optimizada para XXXXXXX en 800x600".más reconocidos por su trabajo socional para el bre interfaces hombre-ordenador. pero podemos conseguir que su uso sea más agradable. siempre es preferible acudir a lo sencillo para obtener un resultado rápi- Dentro del consorcio internacional W3C podemos utilizar herramientas para validar el código de nuestras páginas. • Mantenimiento adaptativo: cambios y modificaciones que hay que introducir para que el producto se amolde al sistema en el que funciona usabilidad de los sitios de comercio electrónico y casi la mitad de las transacciones no se llegaron a completar. do. podemos cuanto al "user model". quiere decir que la inter. donde obtendremos información de los estándares que debemos seguir en nuestros desarrollos. será peor todavía.tres elementos. ya que la usabilimisma. Sólo podemos dar un consejo: prueba tus páginas sobre distintos navegadores. dad a la interfaz. cuándo y por qué usarán nuestros servicios? El tiempo final de desarrollo dependerá de la claridad de estos conceptos y de lo que queremos plasmar en nuestra web. El usuario es quien va a medir realmente nuestro trabajo final (por lo general nosotros mismos. Mantenimiento de una web Evidentemente.). como si hemos contratado a un profesional).w3c. 54 www. a no ser que nos dediquemos profesionalmente a ello).org/css-validador Verifica hojas de estilo CSS2 lenguaje que utilizamos y del navegador en el que se visualizará la página. etc. que se denomina user model) y los Por importancia se podría establecer visibles (look & que dentro de un feel). iceberg (look & Podrás deducir feel). Desde mi punto de vista. es muy difícil conseguir un diseño de página universal para todos los navegadores o dispositivos. el "look" bien. etc. pero hay que aunar los cimos esto. reestructuración del sistema. colores. Evidentemente. menús. ¿A quién queremos atraer con nuestra interfaz? ¿Cómo.w3. ampliaciones y mejoras. principalmente. por muy estricto que haya sido nuestro trabajo de desarrollo. Sausage Hot Dog o Hot Metal Pro (que ya vimos en una entrega anterior). habrá que evitar el uso de ciertos elementos de interfaz o hilar fino con las diferencias que surgirán al y eliminar partes para cubrir las nuevas necesidades del usuario. podemos seguir la analogía que Dick Berry decir que es lo que le da funcionali(IBM) hace entre ésta y un iceberg. crecer y ampliar sus funcionalidades.) Enfrentarnos a los cambios de un sitio web vendrá condicionado por la forma en la que se haya desarrollado. Lo que influye de manera fundamental son las soluciones tecnológicas que vamos a emplear en nuestro desarrollo. Si la práctica o experiencia nos lo permite. Para asegurarnos un mantenimiento con bajo coste de nuestro sitio web (tanto si lo hemos desarrollado nosotros. no hay un sitio web perfecto.org/Style/CSS/Test Tests para verificar hojas de estilo CSS1 jigsaw. La consecuencia de romper la familiaridad con el usuario es que nuestro sitio web no se visite.). de su programación. pero lo que los cimienque se encuentos de un protra bajo el agua yecto web están se compone de basados en crear una estructura Dick Berry esuno de los expertos una interfaz funmultidimensio. podemos trabajar directamente en un editor de texto o echar mano de las herramientas de diseño como El mercado de nuestra web El primer paso siempre es identificar el mercado que va a cubrir nuestro sitio web. A la hora de trabajar. s Como todo en esta vida.org Ayuda a convertir el código de las páginas a HTML válido www.Hay herramientas como Macromedia Coldfusion permiten porar. mientras que el "look" es dad depende más de las convenciocómo se muestran los contenidos nes y estándares de la interfaz que dentro de ella (estructura. cambio de sistema operativo. acudir al consorcio internacional W3C. postulado. Cuando digo sencillo. del visualizarlos en distintos navegadores. etc. Si trabajamos directamente con código.es . bases de datos. las páginas web deben evolucionar para adaptarse a nuevas tecnologías. solucionar problemas de uso. En materia de la usabilidad. Si traduindispensable. etc. sobre todo en la parte inicial del mismo. Podemos encontrar herramientas de validación de código y.Curso Para validar tus páginas web Tipo HTML CSS1 CSS2 URL Acción validator. hace que sea comUna interfaz se compone de dos prensible para el usuario y permite partes: los elementos invisibles (lo resolver sus tareas (¿familiaridad?). no significa "sin calidad". el el "feel" un 30% usuario sólo ve y el "user la punta del model" un 60%.w3. tipografía. no podemos olvidar la cantidad de sistemas y navegadores existentes.pctoday. Esto es en función de los usuarios. En esta evolución tenemos varios tipos de mantenimiento: • Mantenimiento correctivo: cambios que hay que realizar para corregir errores del software. Quiere decir que la relación interfazusuario no estaba resuelta adecuadamente. modificar trabajar con todas las posibilidades de un desarrollo web.

sino que establecemos un posible universo de trabajo. • Ley de Fitts: indica que el tiempo para alcanzar un objetivo mediante el ratón depende de la distancia y tamaño del objetivo (clicks de ratón para llegar a un punto o para realizar una tarea y éste debe ser mínimo). Después de todo lo comentado.Diseño web. • Limitemos las acciones de nuestra página al objetivo de la misma. Todo lo hagamos en una página web repercute en el desarrollador y sobre todo en el usuario. Bruce Tognazzini. lo que indica la importancia y preocupación por crear una interfaz correcta. • Consistencia: las aplicaciones deben ser fáciles de comprender. se facilita su uso.com) experto en usabilidad.ainda. contribuye a la comprensión de las funcionalidades de la página web.html) explica los principios que son necesarios pa- • Aprendizaje: es necesario crear interfaces que no impliquen un largo proceso de aprendizaje. Es fácil saber qué hará que el mantenimiento de una interfaz sea más o menos costoso. jar. En definitiva. que serían imposibles de cumplir dada la diversificación de plataformas en las que se visualizaría una web. . • Nuestra web debe proporcionar información de lo que suceda en las acciones (feedback). las páginas estaban saturadas de información.com de Jacob Nielsen. ya que se utilizó más tiempo en introducir cambios que en escribir código. es más fácil deducir qué es lo apropiado o inapropiado en una interfaz.useit.info/persona _escenarios. Qué debemos hacer La inmediatez de crear una web puede hacernos caer en la tentación de pasar por alto los planteamientos que expondremos aquí. ra diseñar e implementar interfaces con éxito. costes de mantenimiento. evitar tiempos de espera al usuario diseñando páginas ligeras. Nº 90 55 . ¿pero es tan importante y tiene tanto peso la usabilidad? Aunque sea para uso propio. • Debemos evitar el trato hostil al usuario. cofundador de N.asktog. • Protección del trabajo: debemos asegurar que los usuarios no pierdan el trabajo por un error.html) a la hora de diseñar la estructura de nuestra web: . se abusó de los enlaces de texto en formato gráfico (GIF). pero no hay que olvidar: • Seguir los principios de usabilidad. Lo más preocupante es que desde 1996 a 1999 se siguen cometiendo los mismos fallos. • Metáforas: deben existir similitud entre las funciones de la interfaz y los objetos de la vida real. Podríamos dar miles de consejos. Norman. El mantenimiento tuvo un gran coste posterior. • Al final eñ que manda es quien visita nuestra página. Si intentamos cubrir las necesidades de todos los usuarios estamos cometiendo un error. no de normas rígidas o reglas.com/tog. Por ejemplo. La cantidad de errores que se comenten en el diseño web es mayor que las recomendaciones que se pueden dar. se saltaron muchas reglas básicas del diseño de la interfaz. normalmente no se hace con propósitos generales y para todo el mundo. tenemos que marcar los objetivos de nuestros visitantes para poder establecer el entorno de trabajo.asktog. siempre puedes contar con algún diseñador experimentado que te aconseje en los puntos clave. • Autonomía: los usuarios tienen que sentir la familiaridad con el sitio web de forma que lo vean como un sitio finito y controlable. perteneciente a Nielsen Norman Group (Jakob Nielsen y Donald A. En cierta ocasión la interfaz fue creada por una empresa de diseño con poca experiencia en interfaces informáticas. • Legibilidad: al proporcionar contrastes en la interfaz. Se utilizó una tipografía propietaria. Jacob Nielsen (www. • Colores: hay que tener en cuenta la accesibilidad de un buen porcentaje de usuarios con problemas de distinción de colores (hemos dedicado toda una entrega a los colores). a nadie se le ocurriría pensar que es para dibu- Si es tu trabajo profesional. usabilidad y gráficos multimedia sofisticados. es un experto en HCI. Conocido por todos es la metáfora de la papelera de reciclaje: nadie pondría una canasta de baloncesto como icono para acciones de eliminación.El enfoque "persona". Parte 4ª Además del coste económico está el coste humano. Hemos hablado de principios. de este modo se evitan reacciones insospechadas de la interfaz. Evita la navegación inútil. Si llevamos a la práctica estos princi- v En www. Aquí están resumidos: • Anticipación: debemos anticiparnos a las necesidades del usuario. com). La única forma de definir un escenario es mediante entrevistas u Herramientas como Flash permiten resultados conjugables de tecnología. realiza estadísticas anuales desde 1996 para informar de los 10 errores más frecuentes en el diseño web. evitando los tecnicismos.. no sólo para la propia web. • Reversibilidad: una página web debe permitir anular las acciones que se realicen. Tenemos que ser capaces de facilitar al usuario el alcance de sus objetivos con un mínimo esfuerzo y unos resultados máximos. • Eficiencia: las páginas web deben ser productivas para el usuario. Pensar y planificar ahorrará muchos quebraderos de cabeza."Escenarios". Después de definir nuestro universo de usuarios. • Conviene emplear técnicas como las de enfoque "persona" y creación de "escenarios" (www. incluso rehacer todo el trabajo. Si se produce un error. Nielsen Group. En su página web (www.useit. • Reducción del tiempo de latencia: en lo posible. Cuando decidimos crear una página web. pios conseguiremos reducir los tiempos de desarrollo. Otra de las mejores páginas sobre usabilidad es www.nngroup. Si un usuario entra en una web y no sabe por dónde empezar a leer. Esta web recibe más de 17.com puedes ver consejos a seguir para diseñar una página web. Consiste ni más ni menos que en restringir los perfiles de nuestros posibles usuarios. • Valores por defecto: de este modo se obtendrá una interfaz más ágil. si una aplicación tiene aspecto de talonario.. www. es que está sobrecargada de información. aumentaremos la calidad final del producto y crearemos una interfaz que nos asegurará muchas visitas. Se han dado casos bastante demostrativos de los problemas que puede ocasionar una interfaz de la página mal diseñada o con falta de rigor en su desarrollo. no está mal que empleemos algún tiempo en estas cuestiones. La consecuencia positiva será la satisfacción de nuestros clientes.000 visitas mensuales. tenemos que proporcionar opciones o soluciones. y no un simple mensaje o página con el error.

colores y estar delimitados. Impiden conocer la estructura de la web. pero es necesario pensar en el usuario. indica que se dedica más atención. etc. Simplemente. Si tu web no está enfocada a este fin. • Textos deslizantes (efecto marquesina): la lectura de un texto que se desplaza es incómoda y limita la atención sobre la página. Conviene evitar el uso de menús con rollover. • Uso de direcciones complejas: sobre todo cuando quieres aconsejar una página a un amigo. • Los botones de la interfaz han de tener un tamaño proporcionado. Aquí incluyo los banners. número. Lo más seguro es que nuestro visitante se marche a otra de las cientos de webs que le ofrecen la misma información. Qué errores no hay que cometer Lo primero: el tiempo es muy importante para todos nosotros.. • Es recomendable al 100% acogernos a los 216 colores estándar del siste- Las normas son flexibles . sería conveniente reducirlos a un logotipo. calle. Algunos autores no los recomiendan. actualizaciones. páginas caducadas o trasladadas. hay que indicar claramente el destino mediante la etiqueta TITLE. • Cuando usemos combos deberían ser de selección única. es mejor especificar los tama. etc. Los botones han de tener formas. • Ruptura de continuidad dentro de una web: operaciones que obliguen al usuario a desviar su atención (descargar plug-ins. que es donde se centra la atención. hay que tener un poco ciones (algunos expertos indican como máximo siete). • Reduce el peso de tus páginas adaptándolas lo más posible al código HTML. yados de los enlaces. escalera. ¿Qué hacer para que nuestra interfaz tenga criterios de usabilidad? Veamos: • Los formularios han de ser simples y a ser posible con pocos campos. géneas y de corta duración. • HTML tiene suficientes recursos para diseñar una web sofisticada. Qué hacer en la interfaz Después de un chequeo general de la web. más se comprime. Si son menús de coherencia.es . • La tipografía puede estar perfectamente limitada a la que te ofrece el sistema. Han de forma en cualquier navegador (colocumplir su función claramente anres seguros). puedes permitirte ciertos lujos para hacer tu web más vistosa o con ciertos efectos que la hagan atractiva. • Cuando se usan las hojas de estilo (CSS).• Si incluyes vídeo en tu web. en lo posible evitarema que se visualizarán de la misma mos los de autopromoción. vídeos. La te dinero acceflecha indica el orden de lectura. procura que el formato sea siempre ños de las fuentes en porcentaje y no comprimido. Divide la información en más páginas y no intentes aglutinar todo en una.pctoday. más rojo = más atención. Debemos tener en cuenta: • Uso de marcos: en determinados navegadores no funcionan bien. el usuario pasará al siguiente punto en el orden de lectura que se muestra en la imagen de la derecha. 56 www. • No abuses de los gráficos. El error típico de la dirección fragmentada (según para que uso): tipo de calle. • Combinaciones ilegibles de texto y fondo. y lo fundamental en Internet es ahorrar tiempo (sobre todo porque el coste de las comunicaciones en España sigue siendo caro). • Los menús han de incluir pocas op- • Texto parpadeante: resta importancia visual al resto de los elementos de la página. lo aconsejable es que si nuestra web está a la última. • Por defecto es aconsejable utilizar los enlaces y botones del sistema. der a ella. sesiones expiradas. sólo el 25% de los usuarios recuerdan el El enfoque persona nos ayudará a adaptar el diseño al banner visto en tipo de visitantes que vamos a tener. que tenga la funcionalidad que espera. su última visita. aprovéchalos. son más cómodos los que se abren al hacer click. imprimir la página correctamente y guardarla en el disco duro (depende del navegador). búsquedas que no ofrecen resultados. • Evita que la página de inicio sea para usuarios registraDel amarillo al rojo. Más dos o que cuesamarillo = menos atención. El usuario no va a valorar desplegables. Los usuarios terminan gravitando por la página en busca de hipervínculos. sonido. • Usa páginas de tamaño fijo. Esto puede parecer contradictorio cuando lo que se ve en Internet está lleno de imágenes. • Animaciones cíclicas inútiles: retrasan la visualización de la página y distraen la atención del usuario. puerta. Debemos tener muy claro para qué solicitamos la información y agrupar los datos que se van a validar. de imágenes homoen cifras absolutas. • En los enlaces de texto. tes de entrar en florituras. A veces es mejor un solo campo. piso. No abu• No es aconsejable quitar los subrases del color. valorará no se cierren si el usuario no quiere. • Páginas con errores: enlaces rotos. para así ayudar al usuario. Será más intuitivo y el usuario los reconocerá. • Evita que la información esté muy fragmentada.Curso observando el trabajo que realizan los usuarios a los que vamos a dar servicio. Sus formas también influyen: es más fácil hacer click en un botón cuadrado que en uno redondo. Algo de lo que no gozan muchas de las webs que podemos encontrar en la Red: la posibilidad de elegir entre varios idiomas de visualización. • Errores de código: otro de los problemas que no debemos dejar pasar en una web. Si los usamos.) reducen la velocidad de conexión. pero todo en esta vida es relativo. entre menos colores.

s • Muchos enlaces están rotos. sin entrar en detalle.4. buenos.desarrollo nuestra conexión. Finalmente. Por ejemplo testacceso.es. Estos errores pueden provocar la huida automática de nuestro visitante. Consistencia y estándares. URL para validarla.com web. members. tiempo de realización y análisis. sumen mucho tiempo y gran cantipaso a paso. Ayudar a reconocer. se Sin hacer un repaso exhaustivo hace imposible volver a cargar la vemos lo siguiente: página.• Test con grupos de usuarios: ra llegar a una solución.htmlhelp. Control y libertad del usuario. Este tipo de evaluaciones es complejo. Se registran el alizar por un usuario o por un rendimiento y la opinión de los misequipo multidisciplinar (incluyenmos en una reunión final donde se do los desarrolladores y expertos ponen en común estos datos. no sólo la coherencia. ya que implica más preparación. guir unas pautas de usabilidad son 5. usabilidad. con• La apertura automática (Popups)de nuevas ventanas en el navegador disgusta a los usuarios. Hay diversos métodos que se pueden 8. cuenta con las opiniones y consejos de alguien experimentado en estos temas. se obtuvieron • Toda la web es una única página. Emparejamiento entre el sistema y Cómo saber si una el mundo real.validadores_html.tdatacenter. El trabajo de estos expertos en usabilidad se centra en la interpretación de las acciones realizadas por los usuarios y su propia navegación por el sitio web Antes de arriesgarte. sólo para los desarrolladopero es peor enfrentarse a la factura res. complacencia de la marca o estructura empresarial. de HTML • La fotografía utilizada como pre(www. De esta foreste tipo de pruebas son caras. • El fondo utilizado dificulta la visibilidad de los textos empleados. en usabilidad). Parte 4ª Estudio rápido de una web Hay muchos ejemplos con los que • Hay demasiados espacios vacíos podemos ilustrar cuáles son págien la web. de pruebas no se da ninguna pauta a los usuablecidos durante el diseño web. • Textos intermitentes. podemos llegar a un resultado final y detectar hasta un 42% de problemas de diseño graves y un 32% de problemas menores. aunque sin mostrarlos dad de recursos. discernir si una web es usable o no.html. • No hay una distribución de la información que permita en un solo vistazo saber qué contiene la págiUna web que incumple bastantes criterios de na y su objetivo.ainda. 3. Esrios para que exista un comportate tipo de evaluaciones se puede remiento espontáneo. utilizar.com/ supera los 15 segundos. queda de menús que orienten al Podríamos continuar. Los diez criterios más conocidos son: 1.Diseño web. pero proporciona mucha información. exámenes o aproximaciones pa. 2. pero lo más usuario sobre la localización de sencillo es que juzgues por ti mismo alguna información. web es usable Todos los consejos ofrecidos para se. y en el conjunto genenas buenas y cuáles malas. pero también hay que saber 6. • El texto en marquesina que aparece debajo del título • Después de utilizar un validador de la página no aporta nada. Visibilidad del estado del sistema.com/directorio/ /informacion. nales. • Logotipos: deben tener una resolución y peso adecuados incluso para las conexiones más lentas. pero que la mayoría de las veces no incluye criterios de usabilidad. 7. • Cuando se produce un error. Ayuda y documentación. Aquí tienes un enlace donde podrás encontrar muchas de estas herramienHay sitios web que nos permiten medir la velocidad de tas: www. que obliga a permitido por la herramienta de desplazarse por toda ella en búschequeo online).aol. • Basar la interfaz sólo en su aspecto estético. Prevención de errores. • Cambios de resolución del monitor: nadie cambia la resolución del monitor por una página. programacion/html/ criterios): consiste en utilizar prue. NRPolice/nrpdhomepage. Flexibilidad y eficiencia de uso. • Banners pesados. Se utilizan los escenarios estaque nos pueden hacer pasar los usuarios. Uno de los mayores expertos mundiales en el estudio de En este tipo IPO/HCI es Jakob Nielsen. ma. • Elementos de apariencia publicitaria: la "ceguera a los banners" (www. Analizan página por página siguiendo una lista de criterios y redactan un informe posterior que ponen en común. Es el método de menor coste y como mínimo se emplean tres evaluadores (según Nielsen de tres a cinco evaluadores es suficiente). Reconocimiento sobre recuerdo. • Faltan demasiadas imágenes que el explorador ha sustituido por el icono de imagen no localizada. Aquí ral “pesan”. diagnosticar y • Evaluación heurística por exsolucionar errores.com/tools/validator) que nos permite introducir una sentación es oscura. Estética y diseño minimalista. (cada experto trabaja por separado). pertos (también denominada por 10. No obstante permite ahorrar trabajo posterior. Una empresa tarda de forma abierta a los usuarios fien decidirse a realizar estos tests.htm) hace que muchos usuarios ignoren contenidos de la página.info/ceguera_banners. El tiempo empleado reseñamos una. bas.html. sin conocer unos datos base exactos. 9. más de 68 errores (el máximo totalmente continua. Existe también una evaluación automática que se realiza con herramientas de validación. que por sus caracpor una conexión de banda terísticas podemos considerar una ancha de 256Kbps a las siete de página web pésima: North Royalton la tarde para cargar la página Police (en Ohio). se rea• Simulación cognitiva: consiste liza una puesta en común de todos en la puesta en práctica de forma los problemas encontrados y plasdetallada de todos los procesos mados en un formulario establecis existentes en un sitio web seguidos do para este fin. Nº 90 57 .

w3. PC Today nº 91 6. Razones para conocer los principios de la programación. aun siendo el mundo más maleable y moldeable. mucho aparcamiento y centros comerciales. Tecnologías multimedia en la Red. inventor de la World Wide Web y presidente del W3C (www. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. los que tienen ciertas minusvalías… y ¿cómo no? de nuestro amigo al que le compramos de vez en cuando un cupón.org/People/Berners-Lee/) dice: “El poder de la Red está en su universalidad. Timothy John Berners-Lee. Cómo saber si una web es usable. Integración multimedia: Macromedia Flash y Action Script. El diseño inclusivo. Evaluar la accesibilidad. y accesible es aquello “que tiene acceso”. Planificar y organizar el sitio. Introducción a las herramientas WYSIWYG. sigue estando “adaptado” mayormente a los que podemos disfrutar de gráficos y sonidos impactantes y. Introducción al diseño web. The GIMP. Deficiencias que limitan el acceso a la Red Podemos distinguir distintas deficiencias y minusvalías que condicionan el uso de los sistemas informáticos: • Visuales. Guía del curso 1.Curso Accesibilidad Siempre hemos oído hablar sobre “un mundo sin barreras”. Herramientas para el tratamiento de las imágenes y el color. inteligible”. Música y sonido. L 3. Usabilidad. El acceso para todos sin tener en cuenta sus discapacidades es un aspecto esencial”. En el mundo virtual también existen dificultades y barreras. PC Today nº 89 4.pctoday. nos imaginamos grandes avenidas. “de fácil acceso o trato” y “de fácil comprensión. PC Today nº 90 5. Bajo estas premisas. Mapas de imágenes. Accesibilidad. Imágenes: tipología y características. Los menos nos acordamos de los que van en silla de ruedas. Principales elementos de las páginas web. Consejos para diseñar una web accesible. Trabajando con Sausage Hot Dog. Psicología del color. Todos sabemos y comprendemos las dificultades que entraña pasear por la calle a las personas con discapacidad.es . ¿Qué se entiende por accesibilidad? Deficiencias y políticas. aun siendo más moldeable y maleable que la vida real. Herramientas para el diseño web. Vamos a pensar en ese mundo virtual que. donde no haya obstáculos y todos tengamos las mismas oportunidades. de información. PC Today nº 92 7. Afectan principalmente a los elementos de textos. Programación. El color y las imágenes. Este no va a ser un artículo crítico de la política del mundo sin barreras que puede estar haciendo el ministerio de trabajo y asuntos sociales. el mundo real siempre se ha basado en esos términos de forma literal y siempre que pensamos en algo accesible. ante todo. el color en la web. gráficos y uso 52 www. PC Today nº 93 a Real Academia de la Lengua Española la define como “cualidad de accesible”. Imagen animada y películas. PC Today nº 87 PC Today nº 88 2.

s sofisticado del mundo. dispositivos con salida en Braille. re. sino conocerlas para obtener mejores resultados. mejorará para el usuario tradicional. Parte 5ª del ratón.01 Transitional//EN"> <html> <head> <title>Ejemplo de columna</title> <meta http-equiv="Content-Type" content="text/html. una página web accesible para un invidente deberá tener una interfaz hablada.org/WAI). Para reducir esta dificultad. Afectan a la comprensión. etc. a su vez. pantalla. se utilizan ampliadores de imagen.. En cuanto al software.Diseño web. • Auditivas. Y sobre todo. por ejemplo. en habla En una sociedad mundial en donde hispana. existe la necesidad de proporcionarles las mismas oportunidades de acceso a estos serviSeminario Iberoamericano sobre Discapacidad y Accios. Desde el punto de vista del hardwa<tr> <td height="30" colspan="2" bgcolor="#CCCCCC"> <h4><font color="#000000">Diario del PC.a: 25 de abril del 2004</font></h4></td> </tr> <tr> <td height="85" colspan="2" bgcolor="#E2FBFE"> <h1><font color="#003399">El mejor PC del mercado</font></h1> <h2>Despu&eacute. lectores de pantalla.w3. Clientes diferentes requieren necesidades distintas. Una interfaz accesible para daltónicos. los expertos en desarrollo deben “ponerse las pilas” para diseñar aplicaciones que sean accesibles para todos.</p> <p>Y en esta parte de la tabla se sigue</p></td> El consorcio internacional W3C contiene un apartado dedicado a promocionar la accesibilidad en la Red (www. y promover el acceso a la mejora de la accesibilidad de los Red por parte de las personas con discapacitados estará bien acogido necesidades especiales”. si les añadimos las barreras informáticas (elementos de hardware o software) que crecen continuamente. accesibilidad y fomentarla para dar un acceso igualitario a la información. Sobre cesibilidad en la Red.os de espera se pone a la venta </h2></td> </tr> <tr> <td width="63%" height="281" valign="top" bgcolor="#F4F4F4"> <p>Por fin se encuentra en el mercado el ordenador m&aacute. s Interfaz simple Aquí proponemos un ejemplo de código HTML de una página de noticias: Los elementos más cotidianos se convierten en ayuda para unos y en barreras para otros. pieza.. cualquier elemento por su diseño (incluso el más básico) se convierte en una barrera para algunos discapacitados y. En este sentido. Cualquier tenidos de la Red.s de a&ntilde. herramientas y normas fundación que se centra en la de accesibilidad en Internet”. Impiden o dificultan oír las señales de alerta o alarma y todos los elementos relacionados con el sonido. elemento. bli. pación activa en sus actividades.n. mación e investigación. Para paliar estas deficiencias se utilizan sistemas de reconocimiento de voz y dispositivos que sustituyen al teclado o ratón. requiere que los colores rojo y verde no se empleen juntos. y más en Internet. L&iacute. la fundación permite la particien Internet”. obtención de recursos. Nº 91 53 . agradece es que el idioma de comuSu principal cometido es dar a cononicación es el español.. pero una interfaz bien diseñada en cuanto usabilidad y accesibilidad. Crear aplicaciones accesibles para todos no implica renunciar a las nuevas tecnologías. con sonido y texto para la información contenida. en ayuda para otros.. este contexto.</p> <p>Bla. etc. charset=iso8859-1"> </head> <body> <table width="78%" height="406" border="1"> v Todos tenemos derecho a la información sin barreras de ningún tipo. llegan a convertirse en una verdadera preocupación para los profesionales y sobre todo para las entidades gubernamentales. Pensamos que la accesibilidad está ligada exclusivamente a personas con minusvalías. • Motrices. muchas empresas apuestan por sus inventos y sustitutos de hardware. Para estos usuarios deben utilizarse interfaces claras y sencillas (sobre todo usables). surge el foro DISTEC dentro de la directrices. aprendizaje y comunicación. por eso los diseñadores pueden anticiparse a to- <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4. • Cognitivas y de lenguaje. las administraciones deben hacer políticas de dos estos problemas y que en sus herramientas finales exista la flexibilidad y la configuración propia para cada caso. dispositivo técnico como en el ético y en el de o servicio que se pueda utilizar en la estilo. En este caso se usan sistemas de conversión de los archivos de audio a texto. investien castellano que podemos encongadores y colaboradores. cer todo lo existente sobre accesibiliSus objetivos principales: dad a la Sociedad de la Información y • “Estimular el diseño accesible principalmente a Internet. Tecnología de la Rehabilitación (TR) • “Contribuir a la calidad de los cony en la Ayuda Técnica (AT). Todo es configurable a las necesidades del usuario. ni rat&oacute. sobre la evolución de las más de 175 millones de usuarios están afectados por alguna discapacidad.neas del d&iacute. tanto en el orden sistema. Además de (Diseño para Todos) en la Red y proporcionar información sobre legisla presencia de la discapacidad lación. blo. No requiere teclado. A estas deficiencias. como son el teclado y el ratón. trar en Internet es la web de la funLo más interesante y que siempre se dación SIDAR – Acceso universal. tra• “Estimular el intercambio de inforbajos. Fundación SIDAR Una de las páginas más interesantes en este foro de diseñadores.. Principalmente afectan al uso de elementos que requieren movimientos.

Gráficos no cargados dad a revisar el resultado de los . pero si lo realiza linealmente la interpretación será errónea. Son más fáciles de diseñar y cumplen mejor los objetivos de la accesibilidad. Aunque la definición de requerimientos se hace <p>Por fin se encuentra en el merpensando en el usuario medio. La alternativa es intentar hacer páginas lo más lineales posible.neas del d&iacute.. que revise la claincluso antiguos) con: ridad del texto escrito. lecdor.es .adir alguna imagen. visualizador pequeño. navegador de audio. pero es más funcional para una interfaz hablada. s <td width="37%" valign="top" bgcolor="#F4F4F4"> <p>la noticia pero podr&iacute. Quien utilice un sintehojas de estilo.). auditiva y cognitiva incluyen: de interacción de todos los usua• Imágenes sin texto alternativo. será más fácil corregirlos. táctil. pantalla. tizador de voz puede malinterpre• Utiliza un navegador sólo-texto tar el resultado de la lectura.es. hay que establecer escenarios para aunar interacEs un ejemplo. charset=iso8859-1"> </head> <body> <table width="55%" height="524" border="1"> <tr> <td bgcolor="#CCCCCC"> <h4><font color="#000000">Diario del PC. las necesidades del a&ntilde.s de desarrollar.a romperse al a&ntilde. • Ausencia de información alternativa para usuarios que no pueden acceder a los marcos o a scripts. <tr> <td bgcolor="#F4F4F4"> • Modelado del usuario.os de espera se pone a la usuario medio.a romperse al a&ntilde.• Diseño conceptual. En esta premisa se especifican los mercado</font></h1> objetivos del producto que se va a <h2>Despu&eacute.Marcos. etc. blo. Si detectamos los errores desde el principio. Todo el 2004</font></h4></td> proceso de diseño asume la partici</tr> pación del usuario y de los expertos en <tr> <td bgcolor="#E2FBFE"> discapacidades. Si puedes lador.0). Cuando el lector está preparado para leer tablas lo hará perfectamente. hay cado el ordenador m&aacute.</p> ticas comunes (información.Curso Validación de una web Es aconsejable utilizar métodos de validación desde el principio del desarrollo de una web.</p></td> </tr> <tr> <td bgcolor="#F4F4 F4"><img src="imagenbuena.gif" w i d t h = " 1 9 2 " height="220"></p></td> </tr> </table> </body> </html> El resultado como interfaz no es muy profesional. Algunos de los métodos de validación más importantes son los Ejemplo de una web accesible y con mucha que exponemos aquí: información: Ayuntamiento de Pinto accesible.. </body> ciones.Sonidos no cargados documentos. .. nal//EN"> <html> <head> <title>Ejemplo de columna</title> <meta http-equiv="Content-Type" content="text/html. • Verifica la sintaxis del lenguaje de • Presta atención a la ortografía y programación empleado y las gramática. Asegúrate de que las herrator de pantallas (JAWS). El formato de la interfaz de este ejemplo podríamos encontrarlo en cualquier web de noticias. y adaptar la forma y presentación de los contenidos conforme se suceden. cilitar el contexto global de estos gruTodo es configurable a las necesipos de usuarios. • Sonidos no subtitulados o imágenes no descritas. Esto acarrea dificultades técnicas. la disposición es bastante escabrosa. • Utiliza una herramienta de accesibi.browser. Diseño inclusivo Bajo este término subyace una metodología que se basa en el diseño de aplicaciones centrado en el usuaEl resultado no parece tan brillante.. No requiere cer las necesidades de todos. vi. • Tablas difíciles de interpretar cuando se alinean (el ejemplo). Ante la dificultad de satisfacer las necesidades sual. Si un invidente visita la página con un lector de pantalla. scripts. • Sitios con contraste de colores pobre. pero puede ser una de las miles que nos encontramos en Internet. L&iacute. ya que habría que detectar si un usuario está accediendo mediante un navegador convencional. (por ejemplo Lynx • Revisa el documento para obtener http://lynx.n.adir alguna imagen. blemas de accesibilidad. pero las barreras que ción-persona.Sin ratón gran ayuda. Para fateclado. bli. 54 www.a: 25 de abril del rio (conocido como DCU). se buscan caracterísdades del usuario.</p> <p><img src="imagenbuena.. El proceso incluye varios pasos: <h1><font color="#003399">El mejor PC del • Definición de requerimientos.. ni rat&oacute. contar con la ayuda de un editor • Utiliza distintos navegadores (e experimentado.</p> <p>Y en esta parte de la tabla se sigue la noticia pero podr&iacute.gif" alt="Imagen del nuevo superordenador" w i d t h = " 1 9 2 " height="220"></td> Por 155 euros podemos obtener un teclado cu</tr> yas letras tienen un tamaño cuatro veces más </table> grande que el normal. etc.ayto-pinto. Un código más efectivo sería: <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4. limita<p>Bla. • Uso incorrecto de los elementos estructurales en las páginas. patrones de conducta. pueden encontrar en las páginas web las personas con discapacidad física. </html> Como en la usabilidad. hojas de estilo y lidad automática y una herraapplets no cargados mienta de validación del navega• Utiliza un navegador por voz.pctoday. el contexto de uso y venta </h2></td> los requerimientos técnicos para sa</tr> tisfacer estas necesidades. camente a las necesidades de cada uno. rios. se buscan alternativas para di• Ausencia de texto alternativo en los señar interfaces adaptables dinámipuntos sensibles de mapas de imagen. te proporcionarán .s soque definir perfiles y así poder satisfafisticado del mundo. software mientas verifican todos los prode magnificación (MAGic 9.org) o un emuclaridad y simplicidad. etc.01 Transitio- Muchas empresas apuestan por hardware que sustituya a dispositivos de entrada/salida tradicionales.Sonidos y gráficos cargados • Invita a personas con discapaci.

htm" ALT="Grá. 6.org.gif" LONG. Asegura al usuario el control sobre los cambios de los contenidos tempodependientes. Diseña para la independencia del dispositivo. hay muchas páginas adaptadas.org/WAI/wcag-curric/ overchk. En cuanto al software. cada punto de verificación tiene asignado un nivel de prioridad: v I+D en España Aunque en España el I+D no se prodiga mucho. y sólo tendremos que añadir el código apropiado que suministra la dirección www. Puntos de verificación que el desarrollador tiene que satisfacer.gif " type="image/gif" height=100 width=100>Aquí una pequeña descripción o enlace a una página explicativa</OBJECT> Texto explicativo para un applet <APPLET code="textoparpadeante.org/ WAI/WCAG1-Conformance. En la segunno de acceso a página de inicio"> da llega un amigo que le invita al ciTexto explicativo de enlace <A HREF= ne"</NOSCRIPT> "paginainicio. etc. habrá personas que encontrarán muchas dificultades para acceder a la información. El desarrollador puede satisfacerla. Siguiendo estas recomendaciones. Exponemos los puntos de verificación con Prioridad 1 que son los más importantes.Identifica claramente los cambios DESC="explica_gráfico. 14. algunas personas serán incapaces de acceder a la información.htm: • Elementos de interfaz en general: . 9. 5. El desarrollador debe satisfacerla. • Nivel triple A: incluye las prioridades 1. 3. Identifica el idioma empleado. 11. El seguimiento.en el idioma original del texto del dofico estadístico en barras"> cumento y en cualquier texto equivalente El gran inconveniente del hardware adaptado es el coste: un ratón para tetrapléjicos puede salir por 745 euros.) o por situaciones que dificulten condiciones de acceso normal (centros de operación poco iluminados. De lo contrario. podemos jactarnos de que la tecnología es digna de mención. entornos con mucho ruido. Utiliza las tecnologías y pautas W3C. • Prioridad 1. Texto alternativo a imágenes o animaTexto explicativo de una imagen incluida en un objeto <OBJECT data=" paginainicio.por una ventana al vacío.. si no. Parte 5ª Si seguimos estas recomendaciones podremos colocar unos logotipos que definen el nivel de adecuación de la página web. Podemos encontrar muchas empresas que apuestan por una sociedad igualitaria mediante sus inventos. www. WebTV. es un buen ejemplo de una web diseñada para personas con una discapacidad intelectual. A su vez. 2.). software de rehabilitación para personas con Todos los que nos dedicamos a la Sociedad de la Información debemos poner nuestro granito de arena. etc.Diseño web. No te bases sólo en el color. exploradores convencionales. no implica que no sea atractiva. Utiliza soluciones provisionales. Crea tablas que se transformen correctamente. las recomendaciones y los ejemplos para los puntos de Prioridad 2 y 3 se pueden consultar en la página www. Muchos colectivos necesitan formar parte de la “internetización”. visita la página www. Pautas para crear una web accesible Todo está muy bien. patrocinado por la Diputación de Guipúzcoa y de la Caja Kutxa. 12.org. Asegúrate de que las páginas que incorporen nuevas tecnologías se transformen correctamente. Según los elementos que se vayan a utilizar en el diseño de nuestra interfaz. etc. 2 y 3. • Prioridad 3. 10. Existen catorce recomendaciones que se aconseja seguir: 1. La solución implica separar contenidos. Diferentes usuarios necesitarán diferentes formas de presentación. de lo contrario algunas personas hallarán dificultades para acceder a la información..gif" ALT="Iniciativa de accesibilidad a la Red"> Uso del elemento NOSCRIPT para describir cualquier código incrustado <SCRIPT type="text/javascript">…código de un script que visualiza una tira cómica como consecuencia de un evento. problemas motrices.htm"><IMG SRC="pagi.gif" ALT="Ico. personaje mira ciones <IMG SRC="pagini. Hay un error que no hay que cometer: hacer una web accesible. software que sustituye los clicks del ratón a través de una imagen. la especificación tiene tres niveles de adecuación y son: • Nivel A: incluye los puntos de verificación de la prioridad 1.</SCRIPT> < N O S CRIPT>En la primera secuencia. podría ver un texto parpadeante en lugar de este párrafo</APPLET> Texto para imágenes de efectos de texto <IMG SRC="WAI. 13. que dispone de varias soluciones para resolver el trabajo en el ordenador para personas con problemas motrices. Para obtener más información. Otro proyecto denominado NI4.Proporciona un texto equivalente para todos los elementos no textuales.w3. 4. pero ¿cómo podemos poner en práctica la accesibilidad en nuestro diseño de páginas web? Lo primero que hay que tener claro es que las pautas establecidas por el consorcio W3C/WAI están pensadas para los desarrolladores de contenido y para los desarrolladores de herramientas. cas. Para facilitar la referencia por otras organizaciones. pero en concreto la del proyecto Atzegi.atzegieskuetara.w3. Ofrece alternativas equivalentes para el contenido visual y sonoro.gif" ALT="Enlace a la página de transmitida mediante colores también inicio"></A> esté disponible sin color (por contexPágina de texto explicativo ampliada to o marcadores). presentación y estructura de los elementos. class" width="128" height="32" alt="Applet de Java: texto que parpadea">Si utiliza un explorador con Java habilitado. <IMG SRC="estadístico. Asegura la accesibilidad directa de las interfaces incrustadas. • Nivel doble A: incluye las prioridades 1 y 2. Proporciona información de contexto y orientación. Asegúrate de que los documentos son claros y simples. El ejemplo que exponemos es la firma Irdata. surge con la finalidad de facilitar a las personas con discapacidad intelectual el acceso a las nuevas tecnologías y al uso de Internet. estos son los criterios que se deben seguir basándonos en el nivel de prioridad de los puntos de verificación. el Estos iconos nos resultarán familiares a partir de ahora. Integración de personas con discapacidades cognitivas y de lenguaje. pero también elementos de interacción adaptados. también conseguiremos que la web sea más accesible por otros dispositivos que navegan en Internet (móviles. s Nº 91 55 . • Prioridad 2. agendas electróni- 7. Utiliza marcadores y hojas de estilo de forma apropiada. Hardware para acceder al ordenador mediante los movimientos de cabeza. 8.Asegúrate de que toda la información nainicio. Proporciona mecanismos claros de navegación.ni4. Cada recomendación incluye uno o dos puntos de verificación que describen cómo aplicar esa pauta a las características particulares de las páginas web.

Madame plaisante!"</SPAN> . tenga información rrez y Restrepo.mas. . • Exige el juicio personal del revisor. Dentro de la web lidad de un sitio web. utiliza marcadores para asociar las celdas de encabezamiento y las celdas de datos. tiene que ser posible leerlo.Hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente de la banda visual. evita provocar parpadeo en la pantalla. La ventaja de utilizar las hojas de essultados es compleja y exige conocer los tilo es que facilita la revisión de la acprincipios básicos de accesibilidad.existencia de una utilidad “hermana” ca. • Imagen y mapas de imagen: . o descarsu funcionamiento. creadas para ello e indica qué es lo Proporcionan un análisis global de la que hay que revisar con respecto a página.php.net.*. será necesario proporcionar un vínculo a otra página al.Para toda presentación multimedia dependiente del tiempo (película o animación). . proporciona una descripción sonora de la información importante de una presentación multimedia. </TR> </TABLE> . .otra con el resultado visual de las mismular como lo haría un discapacita. El nombre mitolówww. pregunta que a dónde va.org/edipo/selector. • Es la única forma en la que podemos revisar las adecuaciones de textos alternativos. ya que se actúa directamente con el diseño. applets u otros objetos de programación. aunque el resultado positivo de las basada en la aplicación de hojas de esticomprobaciones no implica que una lo para facilitar la revisión de la accesibiweb sea accesible. colaboración con Emmanuelle Gutiésea accesible. • Para las pruebas hay que disponer de los distintos navegadores y sus configuraciones. Lo puedes encontrar en www.páginas aplicando unas hojas de estilo mático (son los verificadores online).desarrollada por Carlos Benavídez en ternativa que use tecnologías W3C.pctoday. • Las pruebas emulando ciertas características pueden ser difíciles de realizar si no se dispone de hardware especializado o si la formación del equipo de revisión no es la adecuada.Hasta que las aplicaciones de usuario permitan controlarlo. www. SMIL de W3C y SAMI de Microsoft (más información en w w w."> <FRAME SRC="f2. información de los gráficos.sibilidades de nuestra hoja de estilo. o r g / WA I / w c a g .Fundación Sidar. Los códigos de representación de los idiomas se encuentran en www.dad.htm" title="Marco con la tabla de contenidos "> <FRAME SRC="f3.sidar.es .c u r r i c / mmsoftwr. etc. Podemos utilizar navegadores al.Organiza el documento de forma que pueda leerse sin hojas de estilo.*. • Tablas: .Para las tablas de datos que tienen dos o más niveles lógicos de cabeceras de fila o columna.garlo como un fichero.Asegúrate de que los equivalentes de un contenido dinámico se actualicen cuando cambia. Uso del elemento langMadre. <FRAMESET ROWS="20%.Si finalmente no puedes Herramienta de creación de hojas de estilo Edipo. Hera localiza los errores de las nemos un funcionamiento rápido y siste. diseñada y Este es el resultado del código descrito con cabeceras de tabla. de Opciones de estilo).Curso right"> </FRAMESET> • Applets y scripts: . si un documento HTML se interpreta sin hoja de estilo asociada. Por citar algún ejemplo de herramienta manual tenemos a Hera. para traductores.Proporciona vínculos de texto redundantes con cada zona activa de un mapa de imagen del servidor. ponlas en práctica. Una vez elegidas las opciones y podo. títulos de marcos. crear una página accesible.Utiliza el lenguaje apropiado más claro y simple para el contenido de una página web. .En las tablas de datos.net hay diversas herramien.</CAPTION> <TR> <TD></TD> <TH>Cabecera de columna 1 </TH> <TH>Cabecera de columna 2 </TH> </TR> <TR> <TH>Cabecera de fila 1</TH> <TD>C1F1</TD> <TD>C1F2</TD> </TR> <TR> <TH>Cabecera de fila 2</TH> <TD>C2F1</TD> <TD>C2F2</TD> No son tantas normas que permiten que una web sea accesible. sincroniza alternativas equivalentes (subtítulos o descripciones) con la presentación.Asegúrate de que las páginas siguen siendo utilizables cuando se desconecten o no se admitan los scripts. se ternativos o programas que simulen puede ver el código. • Si no hay alternativas: . Dentro de la página web www. veremos ventajas sobre la automática: 56 www. La utilidad La mejor forma de verificar la ac. Generalmente se utilizan herra.htm" title="Marco con la vista de contenidos"> </FRAMESET> <FRAME SRC="f4. etc. para la creación Evaluar la accesibilidad de hojas de estilo personales. Mediante la revisión automática obte.<SPAN lang="fr"> "Allons. Si esto no es posible.Proporciona mapas de imagen controlados por el cliente en lugar de por el servidor.tawdis. me de Apple. identifica las cabeceras de fila y columna: <TABLE border=1> <CAPTION>Ejemplo de una tabla de datos sencilla que identifica cabeceras y filas.html. (leyendas). • Marcos (frames): . copiarlo y pegarlo en cualquier editor de texto.30%"> <FRAME SRC="f1.htm" title="Marco de título y barra principal de navegación"> <FRAMESET COLS="20%. Es decir. Está diciendo. Si optamos por una revisión manual.oasis-open.org/recur/aplica/index.rramienta viene como consecuencia del lanzamiento de Edipo (Editor Personal ginal) inaccesible.htm" title="Marco secundario de navegación y copy- TAW es una herramienta de verificación online de accesibilidad en castellano. especialmente para la equivalente (o funcional) y se actuali. cesibilidad y usabilidad de una web durante su desarrollo. pero la interpretación de los re.tawdis. diseñadores y desarrolladores.unos puntos de control. excepto donde las zonas sensibles no puedan definirse con una forma geométrica.org/cover/iso 639a.Titula cada marco para facilitar la identificación y navegación de los mismos. • Permite comparar distintas soluciones mediante pruebas reales. Pero también tiene sus problemas: • Es un proceso costoso y requiere tiempo.htm). • Multimedia: . Los tres formatos o lenguajes que admiten una pista de audio descriptiva son: Quickti• Se comprenden mejor los problemas de la página. w 3 . que implica falta de objetividad en algunos aspectos. . Era necesaria la mientas de verificación automáti.gico es un acrónimo de Hojas de Estilo para la Revisión de la Accesibilitas de verificación online. proporciona información equivalente en una página alternativa accesible. El nombre de la hece tan a menudo como la página (ori.sidar.php podemos encontrar toda una serie de recursos dedicados a la accesibilidad: aplicaciones para usuarios de la Red.consta de una página con opciones y cesibilidad de una página web es si.

Un desarrollador de consatisfacer este punto de verificatenidos de páginas Web debería sación. www. ya que es el único que interpreta adecuadamente algunas propiedades de la especificación CSS. vicios. nistraciones públicas españolas no cualquier sitio web se considera como El grupo de iniciativa de accesibilidad son accesibles. y normalización. dad a Internet mediante cinco áreas las “barreras” se requiere de la partiEn 1998. derechos de los discapacitados están los productos y servicios digitales En lo que respecta a España. 2002) incluye entre sus plaSin embargo en los paínes de acción el eses desarrollados. Ya hemos dicho al principio que prácticamente son similares en las exigencias de diseño. Otra herramienta de revisión de accesibilidad que podemos utilizar vía online es Bobby. obliga a las empresas proveededicado a accesibilidad y alfabetizacidad en los lugares públicos y obliga doras a seguir estos criterios de acce. www.El navegador Opera permite visualizar las páginas mas de tipo automático y sin imagen. Satisfaciendo este punto de verificación faciendo este punto de verificación mejorará la accesibilidad de los doeliminará importantes barreras de cumentos Web. aundisponibilidad de los servicios y redubles para personas con discapacidad. investigación e prestación de estos ser.htm. Satisfaciendo este punto de verificación es un requerimiento básico para que algunos grupos puedan usar estos documentos Web . s po automático y 69 de tipo manual”. De cualquier manera. • “[WAI] Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de verificación.com/bobby/ html/en/advanced.es/webceoe/ceoe/cesi/p6_1 a la adaptación de éstos para asegusibilidad. establece una serie de estándares. la Sección 508 de la de trabajo esenciales: tecnología. Mozilla. herramientas. siempre hay una serie de principios e instrucciones para configurar cualquier navegador para usarlas correctamente. por lo tanto las nes en el acceso a la diferencias son mínimas. Opera. Satisla información del documento. e investigación y desarrollo. de tipo 3. uno o más grupos enguna dificultad para acceder a la contrarán dificultades en el acceso a información del documento.org/recur/usuar/nav/config.ceoe. formación y organismos gubernamentales. Mediante la herramienta Taw (www.com). sugiriendo la forma de conseguirlo. información para todos En cuanto a la Unión los ciudadanos (artículo Europea. exige que los sitios web mante.watchfire. Se 35 problemas de tipo automático y han encontrado 35 problemas de ti69 de tipo manual”. www. Por el momento son de habrá incrementado la carácter no legislativo.gov/ innovación. Nestcape. La aplicación de 2001. bobby. que de cumplir con estas normas y.watchfire. por lo Miembros y de tener un presupuesto prohíbe la discriminación por discapa. En la Fundación Sidar se dan las claves para parametrizar los navegadores más utilizados: Internet Explorer..jsp. como para decir ción que no tienen alternativa de texto. • “[WAI] Problemas accesibilidad 248 de tipo manual”. y un largo etcétera. telecomunicaciones con Entre sus objetivos se el objetivo de incremenencuentran políticas de tar la competencia en la fomento. Nº 91 57 . bobby. Amaya.tanto.Diseño web. cipación de los afectados y de los Rehabilitation Act Amendments directrices. Se han encontrado 124 proble. s local público y debe cumplir ciertas del W3C (WAI) persigue la accesibili- Bobby permite seleccionar dentro de una gran lista de navegadores y sus versiones. uno o más tisfacer este punto de verificación. Un desarrollador de • “[WAI] Problemas accesibilidad contenidos de páginas Web puede de tipo 2. Políticas de accesibilidad Partimos de la base que para reducir normas de accesibilidad.opera. sólo con el texto alternativo. Parte 5ª Hay una particularidad para el uso eficaz de Hera: se aconseja el uso del navegador Opera (www. más de 164 líneas utilizan en el código colores para dar informa- Es importante recordar que no siempre la imagen vale más que mil palabras. que a largo plazo sec508/508standards. De otra forma.com/bobby/ html/en/index.ción digital (plan Info XXI www. 23 líneas de código que no especifican cabeceras para las tablas existentes. Las requiere que todas las agencias fededifusión.net) de revisión online el resultado de verificación es más sorprendente. Se han encontrado acceso a los documentos Web. la Accessibility.jsp. Esto cido su coste. uno o más grupos de usuarios encontrarán imposible acceder a la información del documento. ya que todos sas muy esperanzadoras a día de hoy.sidar. Sólo tienes que probar los resultados por ti mismo con la web que más te guste. se ha demostrado por estudios de consultoras dedicadas al análisis esta ley en Internet se hizo en 1996. Hemos hecho la prueba de un conocido portal como es Terra y el resultado ha sido bastante demostrativo.htm). los Tiene gran repercusión.sidar. ya que encuentra más fallos Herramienta de verificación de accesibilidad a través de las de accesibilidad que Bobby: hojas de estilo Hera.información empleadas sean accesiAccesibilidad del W3C. cuyo fin es política gubernamental conseguir que todos los ciuse ha orientado hacia la dadanos disfruten de la desregulación de las Sociedad de la Información. administraciones tienen la obligación rales de Estados Unidos obliguen y La Sección 508 es una extensión y/o de fomentar la accesibilidad universal aseguren que las tecnologías de la modificación de las Directrices de para asegurar la igualdad de condicio. nidos por organismos federales y sus de la accesibilidad que la gran mayocuando el Departamento de Justicia intranets estén en conformidad con ría de las páginas web de las admide Estados Unidos dictaminó que las normas establecidas. que no se descarta en un futuro. Desde el 25 de junio de rar su accesibilidad.access-board. grupos de usuarios encontrarán alDe otra forma. Sólo en la que el sitio web es inaccesible para personas con discapacidades: 122 imágenes que no proporcionan texto alternativo (Prioridad 1). el plan de acción 20 de la Constitución e-Europe 2005 (comenzó en Española). página de inicio se producen suficientes incumplimientos de las recomendaciones de accesibilidad. que nos permite elegir la revisión a realizar: la Sección 508 americana o las recomendaciones de la WAI.La Sección 508 norteamericana. De otra forma.org/hera. a pesar protegidos por la Americans with adquiridos por la Administración han de formar parte de los Estados Disabilities Act (ADA) de 1990. quiere decir que no son unas premiEn el caso de Estados Unidos.taw dis.

PC Today nº 87 PC Today nº 88 2. Música y sonido. Programación. vídeo y conexión a la Red. Razones para conocer los principios de la programación. No queremos ocupar un artículo hablando de la trilogía. en Inglaterra y la conexión se realizaba mediante satélite y fibra óptica. Integración multimedia: Macromedia Flash y Action Script. Tecnologías multimedia en la Red. Guía del curso 1. El derroche de imaginación reside ahora en permitir que cualquier usuario vea esas imágenes y esos sonidos sin necesidad de estar a la última en hardware. PC Today nº 92 7. la capacidad es incomparable. Consejos para diseñar una web accesible. por las tardes podía repasar la banda sonora en tiempo real con su compositor Howard Shore. ¿Qué se entiende por accesibilidad? Deficiencias y políticas. si disponemos de la suficiente capacidad económica. Herramientas para el diseño web. una conexión de Internet puede realizarse. The GIMP. si nos ponemos.Curso Tecnologías multimedia La tecnología ya permite que la imagen y el sonido usados en situaciones imposibles y escenas espectaculares se trasladen a Internet. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. PC Today nº 90 5. Habrás oído hablar de la superproducción de cine El Señor de los Anillos. el color en la web. ver mediante una webcam la orquesta que lo interpreta. sino de la capacidad que pueden proporcionar los medios tecnológicos. Evaluar la accesibilidad. rodando. Evidentemente. Mapas de imágenes. Para el usuario medio. llenas de color. mediante un módem de 56 Kbps y. de sonido y de todo aquello que las hagan atractivas a sus potenciales clientes. Usabilidad. Trabajando con Sausage Hot Dog. condiciones indispensables para poder disfrutar de la información difundida en la Red. L 3. Cómo saber si una web es usable. podremos llegar a incluir sistemas que transmitan desde nuestra página web música en tiempo casi real y. PC Today nº 91 6. por lo tanto. Los profesionales intentan que sus páginas web sean cada vez más sofisticadas. Herramientas para el tratamiento de las imágenes y el color. PC Today nº 93 a mayoría de los usuarios de Internet poseemos un equipo multimedia con una razonable tarjeta de sonido. 54 www. El diseño inclusivo. Introducción al diseño web. La particularidad es que el director de orquesta se encontraba a unos miles de kilómetros.es . Imágenes: tipología y características. Psicología del color. Introducción a las herramientas WYSIWYG. Principales elementos de las páginas web. Cada vez más se hace necesario (o recomendable) que los diseñadores dispongan también de conocimientos acerca del sonido y sus propiedades para adaptarlos a las limitaciones que aún existen en Internet. El color y las imágenes. Planificar y organizar el sitio. Accesibilidad. incluso. Mientras su director Peter Jackson se encontraba en Nueva Zelanda.pctoday. Imagen animada y películas. PC Today nº 89 4.

lista. Por si queda alguna duda. v Conceptos básicos de sonido Una representación muy básica de lo que sería una conversión de sistema analógico a digital. frecuencia es de 250 Hz. Si encuentran obstáculos 20. a una velocidad constante cercana a ciclos por segundo. los 340 metros por segundo y en puede percibir un rango entre 20 y • 15 Susurro.000 con el paso de los años y El período es inverso a la frecuencia. la cuerda de un lios (dB). Puede guardar puede comprimir los datos hasta que no le quede más remedio que desechar información. disminuyendo hasta • 0 Umbral de audición. unas ondas se absor16. la representación analógica del sonido se produce como consecuencia de las variaciones de la señal eléctrica del reproductor. surge la necesidad de estudiar técnicas que permitan reducir los costes de transmisión o almacenaje de gráficos y sonidos sin pérdida de calidad. Hay muchos métodos y estrategias para comprimir los archivos multimedia hasta un tamaño práctico. • Compresión con pérdida: este tipo de técnicas desecha datos para obtener una cantidad de bits inferior. los datos del coche de un fotograma se almacenan y se vuelven a utilizar en los fotogramas siguientes (“redundancia de datos estadísticos”). Cada vez que se guarda un archivo de esta forma.Diseño web. la esa onda. es decir. El caso más representativo es el disco de vinilo. www. de 440 Hz. Un CD lleva directamente grabados estos datos. Esta es la piano) vibra. y se expresa en segundos • 90 Martillo neumático. moléculas del aire a moverNuestro oído abarca. con la diferencia de • Frecuencia: es el número de veces • 70 Calle con mucho tráfico. positiva o negativa. el sonido se representa por una cuantización y el muestreo de una señal analógica (en los conversores analógico/digitales) en cifras que dividen la señal en función del tiempo y la resolución. aplicamos el algoritmo de descompresión el archivo será exactamente idéntico al original. es decir. estas vibraciones se convierten en una señal eléctrica que oscila en tensión. Con la compresión de vídeo psicovisual. A efectos prácticos. cuyos surcos hacen que se desplace una aguja.000 Hz. MPEG y otros formatos.004 segundos oyente mezcladas. aunque sea con el mismo formato. Con el audio tenemos otra posibilidad: que viajen los datos como un archivo de comandos y que la tarjeta de sonido de nuestro cliente los interprete. se genera cuando se tira una piedra o milisegundos (1. Está relacionada con nuestra mentos musicales tiene una frecuencia Los elementos que la forman son: sensación dinámica del sonido. Es uno de los trucos matemáticos que utilizan WMV.upf. produna altura tonal. Sólo El éxito de algunas páginas web reside en la riqueza de los gráficos y sonidos que muestran a los usuarios. Un oído normal • 30 Casa en el campo. • Compresión de vídeo psicovisual: similar al sonido. Los más comunes: • Compresión de sonido psicoacústica: todas las formas de sonido comprimido utilizan algoritmos para desechar la información sonora que el cerebro ignora. la compresión sólo concentra los datos en menos espacio. sonora. el coche se repite en la misma posición en cada fotograma. s Nº 92 55 . Esta oscilación es la que transracterísticas ocupará menos que el original y lo “oiremos” igual. La compresión psicoacústica y la psicovisual son tecnologías con pérdidas que consiguen archivos más pequeños. según la intensidad de que a su vez empujan a la fuente sonora: otras moléculas contiguas y así suce. • 75 Fábrica ruidosa. se de la misma manera. es cionada con nuestro oído necesario conocer algunos y se define como la conceptos de acústica. como consecuencia. Parte 6ª Dadas las características de Internet. En el apartado digital. forma el amplificador de nuestro equipo en sonido a través de los altavoces. de la onda nota “la” utilizada para afinar instrucada repetición. si En el Panel de control>Dispositivos de sonido>Hardware.un sonido de 0. Otros suministran una utilidad propietaria que se encarga de reproducirlos. se desechan más datos. Esta vibración característica que nos produce un movimiento de hace determinar un sonivaivén que obliga a las do débil o uno fuerte. Es similar al efecto que en un ciclo. El primer proceso que se requiere. La propagación del sonido se realiza y se expresa en herzios (Hz) o • 40 Radio ligeramente alta.es/mtg/clam. se cos. un archivo de estas ca- Para poder comprender • Intensidad: es una magciertas técnicas de sonido nitud directamente relaempleadas en Internet. ciclo. se debe utilizar un formato con pérdidas sólo como paso final del trabajo que se realiza. pero con menos datos que los archivos originales. es la conversión a formato digital. • Compresión sin pérdida de datos: esta técnica conserva el 100 por 100 de los datos. su senoidal y. hay que repetirlo 250 La vibración más simple tiene forma ves o agudos es lo que se denomiveces para completar 1s. de 0 a 130 dB.iua. que se repite un ciclo por segundo. que las ondas son esféricas. según estudios estadístiComo consecuencia. por lo que simplemente se necesita un reproductor que convierta esa señal digital en oscilaciones de tensión. Cuando se repite • Amplitud: es la variación de la preTrasladando esta teoría a la música. en un estanque. para que a través de los altavoces salga sonido (el mismo proceso de un conversor digital/analógico). ejemplo.000 ms = 1 s). Si en una película aparece un coche aparcado durante un minuto. sivamente. en su camino.• Período: es el tiempo que transcurre •120 Umbral del dolor. Por ben y otras se reflejan. llegando al por el maltrato acústico. se denomina periódica y sión. energía de la onda sonoEl sonido se produce cuanra por unidad de superfido una fuente sonora (por cie: se mide en decibeejemplo. vídeo una y otra vez sin perder calidad. ce un sonido puro. seleccionamos Codecs de audio para poder ver los codecs que se encuentran instalados. Cuando escuchamos sonidos grade duración. en este modelo se descartan los datos que los ojos no necesitan. Todos los inventores de nuevos formatos ofrecen códecs (codificadoresdecodificadores) que permiten a nuestros reproductores interpretar los archivos de audio codificados. • 65 Conversación a un metro. Como regla. producen unas zonas de Podemos establecer una Herramienta para analizar todos los elementos que forcompresión y de depresión man un sonido. línea recta.

Free Lossless Audio Codec. Para los que tengan ordenadores Mac de Apple.876. o con Mayús y el ratón seleccionarlas todas (en la opción predeterminada se marcan todas). lo único que falta es probar distintas configuraciones hasta dar con la que más nos agrade. Para cada muestra se utilizan 8 bits de resolución a una velocidad de 64 Kb/s. y se mide en bits. ción aparezca en español mediante Options>Select Language>Spanish.000 bytes (unos 16 Mb). más grande será el archivo.51 está disponible en la web cdexos. reproducción.com/ theory. Linear Prediction Audio Codec. Es el nuevo formato de la casa Monkey: www. www. software de Audio no comprimido • RIFF. Los iconos de la derecha de la interfaz nos permiten realizar conversiones entre formatos. Si se amplía a 16 bits. Winamp. Si la resolución es de 8 bits.Reeves en 1939. un CD se graba a 44.es .nue. de ahí su amplia difusión. • MAC. Este formato introducido por las empresas Apple y Sun Microsystems tiene una versión comprimida denominada AIFC. el software gratuito que genera este formato está disponible en la web sun. La lista es bastante amplia y abarca la mayoría de los formatos mencionados. • ADPCM (Adaptative Diferencial PCM): posterior al anterior. aplicados como enlace entre satélites.html. 24 y 32 Kb/s.net. (Sample Editor). Su aplicación comercial era integrarlo en una red mixta de transmisión digital y centros analógicos de conmutación. etc. utilizado sobre DVD-A y de tecnología 56 www.com. Explicar los algoritmos de cada uno Extraer pistas de un CD a otros formatos de audio Vamos a explicar paso por paso cómo utilizar una aplicación gratuita que nos sirva de reproductor y que además nos permita extraer el audio de un CD en formato WAV o MP3.100 muestras/s x 2 bytes/muestra (estéreo)= 15. audacity.es/software/mac/soun/ soundutil/sampleeditor1. El reproductor se llama CDex y su versión 1.536). • PCM (Pulse Code Modulation): formato de audio creado para telefonía y patentado por A. más conocido como WAV (WAVE. WAV a formato comprimido.1 KHz y a 16 bits de resolución. Compresión de audio sin pérdida Son los formatos de audio denominados “lossless”. es un reproductor gratuito que permite grabar nuestros archivos de sonido.1 KHz. Dentro del código abierto tenemos Audacity.1 KHz) con 16 bits de resolución estéreo ocupan 775 Kb.gz. Cuanta mayor sea la calidad del sonido. La resolución hace referencia a la exactitud de las medidas de frecuencia. Es decir. Ahora seleccionamos las pistas que queremos extraer.03. K.rediris. Cuatro segundos en calidad Compact Disc (44. De arriba abajo: CD a formato WAV. Seleccionamos el tipo de extracción con los iconos que se encuentran a la derecha de la interfaz. Requería de conversores analógico-digital y digital-analógico en Cada formato tiene sus algoritmos de trabajo para conseguir esa compresión.535 (2^16=65. cada sección de transmisión.com. forma parte del formato Ogg de dominio público y es similar al MP3: flac. 8 bits y en mono ocupan 140 Kb (calidad radio FM). Ambos tipos pueden contener información MIDI de hasta 6 canales. Aquí exponemos la lista de los formatos más conocidos y los sitios donde se puede obtener información acerca de su funcionamiento. Se trata del antiguo formato de Monkey. Y ya está. su compresión es más efectiva que la utilizada en los compresores de tipo ZIP. Lo primero que hay que comprobar es que la aplicaratón podemos marcar/desmarcar las pistas.net.cpt. • AIFF (Audio Interface File Format). Mediante F4 accedemos a la configuración avanzada. • FLAC. Aquí podemos determinar el tipo de archivo comprimido al que queremos convertir las pistas del CD. Waveform Audio). la pantalla inicial es la típica de un reproductor de archivos multimedia con sus iconos de avance y retroceso de canción. El mismo archivo a 22 KHz. el rango se extiende a 65. tanto de compresión con pérdida como sin pérdida.winamp. ocupará 3min x 60 s/min x 44.sourceforge.sourceforge. pausa. la extracción al formato comprimido será sobre el tipo de archivo configurado en F4>Codificador. Lossless Audio: www.tu-berlin. que reducen los tamaños de los archivos y permiten que la decodificación sea idéntica al original.html.sourceforge. es el predecesor del nuevo formato MPEG4 Audio Lossless Coding (ALS): www. s podría suponer un libro completo. Extraer un fragmento de CD.losslessaudio. CD a formato comprimido. Meridian Lossless Packaging. pero el resultado va perdiendo calidad. Al ser formatos específicos de audio. Con Control y el Formato comprimido a WAV. etc. álbum.net. Al aplicar códecs podemos reducirlo aun más. Leer información del CD en una Base de Datos remota (si se consultan los diversos servidores de Internet pueden obtenerse datos del artista. pero vamos a detenernos en Codificador. Todas las pestañas son importantes. del CD) y Configuración. permite codificar canales telefónicos con velocidades de 16. edición de Wav y otros formatos.pctoday. • APE.hqx. Después de instalarlo. y a una resolu- El derroche de imaginación ya no está tan reñido con el coste y prestaciones de nuestra conexión a la Red. En los programas de codificación se puede definir la frecuencia de muestreo (Hz) y el número de bits por muestra. • LA.Curso ción de 16 bits.Cattermole en 1962 propuso la ley A de codificación para PCM. Es el formato desarrollado por Microsoft y empleado de forma generalizada en su sistema operativo Windows. • MLP. Evidentemente. Si quieres digitalizar 3 minutos de música a un muestreo de 44. teniendo en cuenta una frecuencia de muestreo de 8 KHz. • LPAC.de/wer/ liebchen/lpac.monkeysaudio. tenemos 255 niveles posibles (2^8=256).

bastante complicado. MPEG-1 Layer I: www.sony. Al contrario que el resto de na comparativa. MPEG-1 Layer com/products/aacPlus.caper. Para componer melodías sobre Coding. en la web flac. Advanced Audio ción.msoftware.compressconsult. MPEG-1 Layer II: www.ch/ trev_293-ribas. Este manda mato ECAM.vorbis. duración.php.com/tech/ac-3mult. combinaciones de ellos en multitud de También en www.edu/ mpeg4. • MPEG4 Audio Lossless Coding (ALS). MPEG-1/2 Layer III.html.html de la Universidad Politécnisultado de la descodificaca de Madrid. • SHN. aún teniendo gran ficada en ciertos anchos repercusión como formatos de interde banda de ecualización cambio. Formato de Dolby. Musepack.com/tech/highqual.org encontraremos hofer. son los formaimpresora interpreta para poder plasempresas/solidyne. codificación alteran el contenido del • MP1. una tarjeta que admite el protocolo y • WMA. Desde 1983 más de 300 compañías han adaptado este un ratio de bits de 64Kb (un MP3 de www. instrumentos Coding.upm.dolby.meridian-audio. una señal decodide las páginas web. Existen otros formatos especializa. Utilizado en renocido de los formatos dentro del in. instrupor orden alfabético son: mentos.de/project/mpeg/ la misma calidad necesita un ratio audio. También conocido como concretas que el instrumento intercomparison. formato pensado para la compresión de archivos de sonido digital DAT: www. En www.de/forschung/ projekte/lossless/mpeg4als.uni mucha información sobre estos compositores basados en muestras de sonido. Adaptive Transform Acoustic • RA. • AAC+ o aacPlus.• AC-3.hace las veces de secuenciador).htm.php.tnt.html podemos ver una bueInc: www.tnt. Compresión de El símil es el funcionamiento entre • ECM. utilizado por Sony en sus www. que no es gratuito: www. archivo de sonido para poder reducirtos están interconectados entre sí mediante un cableado específico para transportar el protocolo. technical_literature.ebu. Todos funcionan mediante una sonará con ruido.aspx. ted Interleave Vector Quantization): formatos. • MP3Pro.html. y podemos ver Acrobat para ver el documento). Formato RealAudio: señal de audioMIDI virtuales. MPEG4: www. Dentro de este conjunto hay un “maestro” que lleva el control sobre el resto de “esclavos”. String Sort ZIP.htm.com/ Para poder seleccionar el compreprotocolo en sus instrumentos elecgrabadores de Minidisc (MD): products/codecs/realaudio. todavía.com.microsoft. Digital Theatre System de la compañía Digital Theater Systems • VQF. com/products/mp3pro.html. Para obtener información técnica debemos acudir a la página www.die. Shorten.es/indexlo. más conocido como AC3: audio sin patente comertuito y que permite utilizar múltiples Hay software profesional para el tratamiento de la www. WMA pertenecía al grupo de formatos con pérdida.com.com. refiriéndonos al audiosound. • MP4. llo.html. www. los reproductores más conocido.Diseño web.org. La versión 9 permite una codificación sin pérdida. La mayoría de los formatos tienen plug-ins o complementos para uno de Encontrar buen software gratuito para desarrollar tecnologías Flash es.com/technology/ TwinVQ (Transform-domain Weigh. Básicamente funciona menuestras necesidades. y para trabajar • ATRAC.net/Products/ATRAC3. audio. directamente con www.com. no se pensó originalmente para sonido pero por sus excelentes resultados a nivel de compresión se ha adaptado: www. sor/decompresor más adecuado a www.php.ebu.de/amm/ techinf/aac/index.• OUT: es por donde un instrumento envía la información. III combinado con Spec• AC-2. www. cial: www.html. El formato RK Audio. sólo transporta mensajes.03.com. desarrollado por Sosonido con pérdida mensajes con instrucciones que la lidyne en los años 80: www.sourceforge. propietaria. etc. MPEG-4 AAC -hannover. se ha tardado tres años en desarrollar: www. • MPC.die. Parte 6ª ma dentro de lorien.upm. gustos y bolsidiante mensajes con instrucciones www. nunca idéntico. • WavPack. media.de/project/mpeg/audio.uni-hannover.com/ welcome. impresora y ordenador. lorien.com/szip.html. denominado formalmente MP+ o MPEGplus: www. y se crean estándar para MPEG2 y desarrolladores así verdaderas obras sin pentagrama.fraun Lospara profundizar de codecs ofrecen kits de desarrollo en sus formatos dentro del MSDN.iis.codingtechnologies. desde su finaliellos es necesario utilizar códigos de zación en 1997 es el nota musical. • RKAU. Versión 2 del Audio Coding tral Band Replication: de los laboratorios Dolby: www. Esto implica que el ree. tos de audio que por sus algoritmos y mar en un papel lo que deseamos. Los conectores MIDI son de tres tidio de Microsoft: www. patrones y listas de reproduc• AAC.dtsonline.wavpack.codingtechnologies.net/ comparison.sdds. MIDI es uno de los protocolos más combinado con Spectral Band • MP3.nue.vqf.utilizados y conocidos por los músiproducción de audio calidad CD con tercambio de música en Internet: cos profesionales.htm.realnetworks.Wave Packer es un compresor de archivos de tipo WAV: www. Variantes del • THRU: es un puente.preta. hay más nal. • WMA. Sony Dynamic Digital Sound: trónicos. v Nº 92 57 . Formato Windows Media Au. Out y Thru. De tipos de audio que no se utilizan dentro hecho.tu-berlin. • MP2. los datos simEl trabajo que se realiza para las aplicaciones sin ánimo de lucro sobrepasa muplemente “pasan” y no son procesaPCM.sourceforge.pdf (requiere Adobe pos: In.org/ Denominados “lossy”.de/project/mpeg/audio. podemos profundizar en este techas veces a los profesionales flac.nl/mpcworld. formatos de audio: Winamp 5.ch/en/index.winamp. de 128 Kb): www. el más coReplication (SBR). ción será similar al origiAdemás de los especificados. MPEG-4 AAC.uniEn un equipo MIDI los instrumenhannover.dolby.madtracker.tnt.htm.heibrink.co. Compresión de sonido en forwww.es contiene informaNormalmente es una caja de ritmos o ción sobre formatos dedicados a la un secuenciador (o un PC dotado con voz humana y su reconocimiento. Versión 3 del Audio Coding de • Ogg Vorbis. • SZIP.com/win aparatos dedicados al sonido: dows/windowsmedia/9series/codecs/ • IN: el instrumento recibe la información por este conector. • SDDS.mit. dos en la estructura de audio para tratar la voz humana. gra.etree. serie de canales de información que inLos más conocidos y corporan muestras de sonido.nz/ index.net/ • DTS.

de vídeo y sonido. Alcanza resoluciones de 320x240 píxeles y 30 fotogramas por segundo. es decir. Bajo este primer ción de la página cuando no nos inteParece limitado. No se necesita ningún códec para Una herramienta gratuita para crear GIF animados de Microsoft. En este tipo de archivos los datos de audio Si es la primera vez que oyes hablar de secuenciadores. La segunda de sonido en nues.prod keys. xores que permiten controlar más de bles de cada parámetro: El GIF animado es un archivo de ima1. Para ello. Imagen animada sintetizadores. Como un enlace: en el escenario está perfectamente orposteriormente.org portante de una web. con MIDI sólo viajan datos. OUT y THRU son habituales en tras páginas web? progresiva permite detener la ejecucualquier instrumento que admita MIDI. Src ruta archivo de audio para reproducir (incluso URL) si tienes nociones de música y tienes Loop número veces que se va a repetir el audio algún teclado MIDI. la visualización que aparecen.que se reproducen consecutivamente. Este sería el código para poner un sonido de fondo (sólo Internet Explorer): < b g s o u n d src="ruta_archivo" loop="l" balance="0" volume="0">Este suena una vez</bgsound> Ver tabla 2 vídeo más conocidos y que permiten hacer streaming. y vídeo se almacenan consecutivamente en capas.dida con 8 bits de información por nectar un módulo sintetizador a tu cada píxel y admite un máximo de 256 tarjeta de audio/MIDI para que sea el intérprete de los mensajes. un segmento de datos de vídeo va seguido inmediatamente por otro de audio. La primera no ¿Cómo podemos re. etc. Acostumbrados a y algunos enlaces de las compañías las imágenes estáticas. Conforme llegan los datos se va presentando en pantalla. dispone de un servidor especial que se encarga de transmitir los datos del vídeo de modo secuencial. fondos transpaferenciar cualquier rentes ni formato entrelazado (carga formato de archivo la imagen en varias fases). preguntarás qué pinta todo esto como Dentro de los gráficos animados formato de audio en la Red. bastante Comandos HTML relacionados con el sonido (tabla 2) limitada. cajas de ritmo. y permite una sincronización. Puedes montar una verdade. se que crear la serie completa de imágePodemos repetir el código como tan.avi. Exponemos los formatos de cuantización internacionales. con “tal duración”.tratan de reducir el tamaño de los arinterno que cumple unas normas de norá. sea la parte más imque visites la página web www.za un sistema de compresión sin pércolo. mediante esos mensajes. Si eres un sibarita.nes (con un editor de imágenes) y así emplea un PC o Mac que hace de maestro de ceremonia. pero su carga Los conectores IN. para sincronizar tart=FALSE> Ver tabla 1 Para crear un GIF animado. pero hay multiple.es .pctoday. Parámetro Valores Descripción No es un protocolo pasivo. visualizarlo. no sonido. hoy en día los gen único e internamente se compone <EMBED src="tocataRE. El instrumento se encarga de interpretar esos datos y el resultado sigue saliendo por sus conectores estéreo normales. Hay que dejarlo muy claro.</a> chivos.000 canales. un formato MIDI necesita que tu conocidos son los GIF.resa el contenido. Dentro de los formatos de vídeo MIDI incorpora un sistema de ción. etc.htm. unirlas con un ganizado.LE loop=TRUE volume=50 autos. puedes distribuir la información mediante 16 canales (del 0 al 15). poder componer la secuencia y.jos animados tradicionales.midi.mp3" target="_blank">Has.com. pero al no estar comprimido se necesita bastante espacio de almacenamiento. Además. Audio Vídeo Interleave (Audio y Vídeo Intercalado) es un formato desarrollado por Microsoft. vamos a dar los valores posi. efectos y demás elementos. los más bien. que reproduzca “tal nota”.mid" de una secuencia de imágenes estáticas instrumentos musicales electrónicos permiten interpretar hasta 64 notas de hidden=”false” controls=CONSO. de gráficos en movimiento es quizá lo Después de toda esta parafernalia te que más nos engancha. utilide sonido que interprete este proto.. tienes luces. es como un múltiple en el que se enchufan varios aparatos a la electricidad.ejemplo. una técnica de distribución de vídeo en Internet que permite la transmisión en directo del contenido sin necesidad de descargarlo completamente para su visualización. menos que cualquier gráfico JPEG que puedas encontrar por colores por imagen. ra orquesta con pocos instrumentos. Lo que va a suceder tos reproductores queramos a la vez. www. GIF87 y GIF89a. • AVI.jhepple. te recomendamos Posiblemente.000 y 0 0 es el valor máximo periférico conectado.también encontramos tecnologías que control de tiempo a través del reloj ta que no pulse el enlace no so. Pues que nos podemos encontrar. width=192 height=70 El sistema es similar al de los dibupolifonía. Llevan la extensión . es decir. En los conciertos. añadirle “reverberación”.com/gif_animator. Formato creaPC incluya una tarjeta especializada o do y patentado por Compuserve. premeditado y guardado en editor de GIF. Internet es una escuela inmensa y hay miles de recursos de todo tipo para ampliar todo lo aprendido.ocupa un poco más. En resumen. <a href="archivos/UnaCanel disco duro.permite animación. dos por el instrumento. tes.Curso Comandos HTML relacionados con el sonido (tabla 1) Parámetro Src Hidden Controls Width Height Loop Volume Autostart Starttime Endtime Valores fuente de sonido true/false CONSOLE/SMALLCONSOLE/ PLAYBUTTON número de píxeles número de píxeles true/false/número valor de 1 a 100 true/false formato MM:SS formato MM:SS Descripción archivo que se va a reproducir ocultar/no ocultar la consola consola grande/consola pequeña/ botón de “play” únicamente anchura reservada para la consola altura para la consola repetición indefinida/al menos una vez/número de veces volumen de reproducción con/sin autoarranque inicio de reproducción en minutos/segundos fin de reproducción Podemos crear nuestro pequeño estudio MIDI gracias a innovaciones hardware como éstas de www. hacer que un instrumento interprete los datos que van por uno o varios canales y ordenarle. puedes co. mientras que en la parte cliente un plug-in especial o el reproductor se encarga de ir recomponiendo los datos y visualizar el vídeo en pantalla.000 y 10. Por decirlo de alguna manera. Enviar por Internet cinco minutos de una tocata de Bach puede suponer 4 Kb de datos.000 0 sería un sonido centrado en ambos altavoces pieza puede transmitir órdenes a otro Volume valor entre -10. Hay dos varianla Red. y se visualizan directamente sobre Windows con el reproductor Windows Media Pla- 58 www. al ejecutar una Balance valor entre -10.

tipo de archivo de vídeo que indica al navegador el programa o plug-in adecuado para la visualización (“video/avi”. utiliza las mismas frecuencias de muestreo que los CD o los DAT (44.1112" standby="Cargando fichero.asp ?DispLang=es. Posteriormente..com yer: www. repetición indefinida/al menos una vez. muestra o no la barra de control de la consola de vídeo (Netscape 4x). Todos estos formatos de archivo tienen una forma de utilizarse en las páginas web similar a la del sonido. La tecnología es similar a la del MPEG. identificador que debe ser único en la página.080 píxeles. Un vídeo de 60 minutos a pantalla completa requiere 550 Mb de almacenamiento.com/windows/ windowsmedia/intl/download/default. la página web donde se puede descargar. todas con una resolución de 16 bits). requiere tener el reproductor QuickTime.7. Creado por Moving Pictures Expert Group (empleados de Sony y Apple unidos desde 1988). /activex/controls/mplayer/en/nsmp 2inf. • RTV. MPEG2 es un estándar para transmisiones de vídeo de alta calidad a pantalla completa.avi"> <param name="showcontrols" value="0"> <param name="showdisplay" value="0"> <param name="showstatusbar" value="0"> <param name="autosize" value="0"> <param name="autostart" value="1"> </object> v Comandos HTML relacionados con archivos de vídeo MOV (tabla 4) Parámetro Src Loop Type Valores ruta del vídeo true/false tipo archivo Descripción localización del archivo (incluso una URL completa).apple. 32 KHz. con una codificación de 1.gif" dynsrc="peliculas/boda.net.. procedentes del formato QuickTime. “video/quicktime”. MPEG4 es un estándar para vídeo-telefonía sobre entornos GSM. “video/mpeg”.920x1.4. que utiliza entre 3 y 10 Mb/s para resoluciones que oscilan entre 352x480 y 1. 48 KHz. número de píxeles altura para la consola. El ratio alcanzado de resolución y reproducción es el mismo que el AVI. etc. muestra o no la barra de información sobre el vídeo (Netscape 4x). mientras que en las versiones 6x se visualizan también los ficheros MPEG. un excelente sitio web relacionado con documentación técnica sobre códecs de audio y vídeo es www. Parte 6ª Comandos HTML relacionados con archivos GIF animados (tabla 3) Parámetro Src Dynsrc Loop Start Controls Loopdelay Width Height Descripción GIF animado que saldrá en la ventana de reproducción. Formato creado por Intel permite alcanzar ratios de hasta 150:1 de compresión. <embed src="ejemplos/ mov1. La calidad obtenida con MPEG es la que se utiliza en los DVD. fileopen/mouseover cuándo se reproduce el vídeo: al abrir la página o al pasar con el ratón sobre él. Ver tabla 4 <object width="110" h e i g h t = " 8 2 " classid="CLSID:22D6F312-B0F611D0-94AB-0080C74C7E95" codebase="http://activex.com. A través de la ISO crean un formato de vídeo estándar para comprimir ficheros audio/vídeo en formato digital.microsoft. alineación en la página de la consola. MPEG utiliza la codificación de imágenes en formato JPEG. Para descargar el reproductor QuickTime: www. Nº 92 59 .mpg. en caso de ser necesario un plug-in.). número/INFINITE número de veces que se debe visualizar y por defecto es 1. Requiere el reproductor Realplayer: www. MPEG1 es un estándar para el CD audio/vídeo. Formato desarrollado por Apple (inicialmente para el entorno Macintosh). Los archivos de este formato son de menor tamaño que los AVI y permiten incluir interacción.elisoft. en las versiones 4x de Netscape Navigator sólo se visualizan bien los ficheros AVI. Actualmente se encuentra operativa la versión MPEG2 mejorada y se está perfeccionando la versión MPEG4 (difusión a través de Internet). Para referenciar nuestros archivos de imagen o vídeo tenemos las siguientes posibilidades: <img src= "imagen/ animado." type="application/x-oleobject"> <param name="filename" value="ejemplos/lavida. En cuanto al audio. Las extensiones asociadas son . anchura reservada para la consola. CONSOLE/SMALLCONSOLE/ consola grande/consola pequeña/botón PLAYBUTTON “Play” únicamente.cab#Version=6. Pluginspage URL Showcontrols 1/0 Showdisplay 1/0 Showstatusbar 1/0 Name nombre Volume Width Height Align valor de 0 a 100 número de píxeles número de píxeles top/bottom/center/ left/right/middle Real Player es uno de los reproductores más difundidos. número de píxeles anchura reservada para la consola.mov. Tras descargar e instalar el Siempre hay algún amigo en Internet que puede aportarnos trucos para mejorar nuestra técnica. número milisegundos entre una y otra reproducción de vídeo.com/es/quicktime/download. ciona bien en sus navegadores. que permite conseguir una calidad próxima a la del DVD y una compresión considerablemente mayor. • MOV. después de Windows Media de Microsoft. Al intentar ver un vídeo con esta etiqueta suele salir el típico mensaje de necesidad de instalación de un plug-in especial. por lo que sólo aparecerá el GIF animado en lugar del vídeo. ruta del vídeo localización del archivo (incluso una URL completa).Diseño web.mpg" loop="2"> Ver tabla 3 plug-in Quick Time.mpeg o . aplica simplificaciones usando compresión de vídeo psicovisual.5 Mb/s y una resolución de 352x240 píxeles. todos los navegadores necesitan un plug-in que se puede instalar de manera automática.qt o . volumen de reproducción (Netscape Navigator). muestra o no la barra de estado (Netscape 4x). y se pueden visualizar con Microsoft Windows Media Player y Apple QuickTime. para referenciar por lenguajes de script. vos de este formato tienen la extensión .realnetworks.microsoft. • MPEG. La versión MPEG7 está recién desarrollada. altura para la consola. El resultado es una cierta pérdida de calidad visual pero con una notable reducción en el tamaño del archivo.mov" type="video/quicktime" autostart="True" width="320" height="240"> Esta etiqueta la introdujo Netscape a pesar de que en la práctica no fun- Para los ficheros de tipo MOV.1 KHz. Los archi- Juzga por ti mismo. Valores ruta imagen Netscape no acepta este modelo.

lo hacen apto para sistemas de almacenamiento portátiles de cualquier tipo.Práctico Como solución a los problemas de compatibilidad entre las etiquetas anteriores y los diferentes navegadores web.0. reproducción de audio/vídeo y mos para ver cómo es esta tecnología y MIDI. param name="showdisplay" value="1/0" muestra o no la barra de información sobre el vídeo (Internet Explorer). Primero decidimos cuantos fotogramas o imágenes independien- nuestra animación. sos se pueden “hacer” cosas.Flash parte de una tecnología que adquirió Macrojando de ser un simple media a partir del desarrollo de otra empresa. tes va a tener nuestra animación. Opciones disponibles con PARAM (tabla 6) Parámetro Valores Descripción param name="filename" value="ruta_fichero" establece la ruta del archivo de vídeo.cgi?P1_ Prod_Version=ShockwaveFlash&Lang= Spanish lo obtendremos.org. Ver tabla 5 Para los parámetros pertenecientes al comando PARAM.com/ shockwave/download/download. se parametrizan los valores que necesita para el correcto funcionamiento o para la configuración deseada. la utilización de la etiqueta OBJECT. Nos situamos en el primer fotograma y con la herramienta de texto seleccionamos el color de la letra y el tamaño que va a ocupar. Para ver una prueba de 60 www. URL del objeto o componente externo necesario para reproducir el archivo. etc. Por dar una tenida en www. que en el caso de Internet Explorer es alguna clase de control perteneciente al tipo ActiveX. Si no hemos utilizado el entorno de Flash. gráficos de alta calidad. Es una desde 17 euros a 150 euros según las herramienta que te permite obtener características del software. que como el posibilidades son infinitas. seleccionamos Create Motion Tween y nos situamos en el fotograma 1. Otra característica destacada del programa. Sobre la línea de tiempo con el botón derecho de ratón. en el fotograma deseado con el botón derecho de ratón seleccionamos Insert frame (40 fotogramas en el ejemplo). Hay un proyecto de software gratuito en marcha. Se crea una instancia del objeto. los Nada más abrir la aplicación aparece un escenario donde están casi todas las herramientas necesarias. Para guardar la animación en formato swf. De todos modos. con la que se podrían incluir archivos de vídeo (igual que para todo tipo de archivos incrustados).mación para que veas que en pocos pacript. donde se puede encontrar mucha información acerca del funcionamiento de Flash. declara el tipo de archivo de vídeo. Vamos a crear un texto que se va a deformar a lo largo del tiempo. a continuación. DHTML y de Javas. con/sin autoarranque. pero a un precio desorbitado. que es el único que permite editar las películas creadas. la herramienta dispondrá de algún reproductor. param name="showstatusbar" value="1/0" muestra o no la barra de estado (Internet Explorer). así que los aprovechatos. Sus programas shareware. param name="showcontrols" value="1/0" muestra o no la barra de controles (Internet Explorer). basta con pulsar la tecla Intro del teclado numérico y se reproducirá la animación en nuestro espacio de trabajo. éste intentará descargarla sin que el usuario deba preocuparse demasiado. Los podemos encontrar una forma sencilla y eficaz. seleccionamos con el ratón la línea de tiempo de la primera capa y.php?subcat=10. conexión a bases de da. la organización W3C sugirió a partir del lenguaje HTML 4. es la facilidad con que permite la actualización del software de reproducción de manera automática. En el fotograma 40 eliminamos lo que queda de texto para dar la sensación de que ha desaparecido por completo.macromedia. Hasta la fecha. de la lista obcarga para la conexión. Además. El software de Flash instala el plug-in para visualizar las películas Flash en nuestros navegadores y también el programa ejecutable de Flash Player. Internet Explorer es el único navegador que admite correctamente la etiqueta OBJECT. visualizador de animaciones es Flash de Macromedia. param name="autostart" value="true/false" con/sin autoarranque La herramienta de transformación es de las más utilizadas en Flash. Haremos una sencilla anicódigo HTML. param name="autosize" value="1/0" autoajusta o no el tamaño de la consola (Internet Explorer).producto de Macromedia permiten des posibilidades de inversión y baja un periodo de prueba. aparece en pantalla un mensaje dirigido al usuario mientras se carga el archivo.pctoday. ver tabla 6.lycos. parecen racon Flash no se puede “piratear” de zonables. En intervalos de 5 fotogramas repetimos el paso anterior reduciendo cada vez más el texto de prueba. Sólo tendremos que hacer doble click sobre nuestra animación Flash y comenzará a reproducirse. Otra característica muy importante de este formato es la facilidad con que se pueden crear animaciones y películas para su posterior distribución en disco. s Flash Una de las herramientas que está de. en www. se declara su URL y las principales propiedades generales y. Un buen contrincante del su entorno. formularios Macromedia permite usar el software interactivos. altura para la consola. en las producciones profesionales que llenan multitud de CDROMs promocionales. Para profundizar sobre los parámetros y opciones disponibles. Esta etiqueta define un objeto o componente externo encargado de la reproducción del fichero de vídeo.es . el código que se genera ads/listado. Si no es así. mediante un conjunto de etiquetas especiales PARAM.org.openswf. con gran. El tamaño reducido y la gran extensión del programa que permite su reproducción. Si se tiene en cuenta que el precio de la herramienta de desarrollo estándar Flash MX 2004 es de casi 600 euros y el profesional de 840.webexperto.es/re ferences/html/ content. para ello.w3c. seleccione en el menú File>Export Los descodificadores de archivos Flash deben usarse con intención de aprender y no de robar código ajeno. su condición multiplataforma lo hacen idóneo para todo tipo de sistemas informáticos. alineación en la página de la consola. en la dirección www. se incluye el programa reproductor Flash Player para que el usuario que carezca de conexión a Internet también pueda visualizar el contenido multimedia. Pero se requieren conocimientos de programación avanzados. Las posibilidades para exportar la película incluyen el formato AVI y QT. que es la animación reproducible con Flash Player. Seleccionamos el fotograma 5 y deformamos el texto.com/downlo pincelada. Si una película está creada con una versión más moderna de Flash Player que la instalada en el ordenador. anchura reservada para la consola. Seleccionamos la caja del texto y la opción de menú Modify>Transform>Free Transform. se puede obtener información extra en webmaster. Parámetros asociados a OBJECT (tabla 5) Parámetro Classid Codebase Type Width Height Align Autostart Standby Valores "identificador_objeto" "URL" tipo archivo número de píxeles número de píxeles top/bottom/center/left/ right/middle true/false "mensaje" Descripción fija el identificador CLSID de los controles ActiveX necesarios.durante 30 días. Movie.phtml#object o en www.

No hablamos de HTML ni de las hojas de estilo. El color y las imágenes. PC Today nº 93 rogramar nuestra página web no consiste sólo en abrir una herramienta de desarrollo del tipo Hot Metal Pro o similar y colocar texto e imágenes aquí y allá. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. The GIMP. Cada uno tiene sus labores dentro de un proyecto. profundicemos en algunos conocimientos.pctoday. ¿Qué se entiende por accesibilidad? Deficiencias y políticas. cuando los visitantes la vean. Principales elementos de las páginas web. No hace falta decir que los factores fundamentales van a ser los presupuestos y el tiempo disponible. génesis de 52 www. lo primero que encontrarán es la interfaz. PC Today nº 89 4. Introducción al diseño web. por nuestro sentido artístico. ¿Cuál es su cometido? ¿Debería tener conocimientos de programación? Evidentemente. Hemos visto a lo largo de las entregas anteriores que hay que conocer bien el medio en el que vamos a trabajar y no dejarnos llevar. Trabajando con Sausage Hot Dog. Puede que el diseño no permita ciertas libertades en programación. El diseño inclusivo. Consejos para diseñar una web accesible. exclusivamente.Curso Programación El entorno de programación se ha convertido en algo tan sencillo. Programación. Herramientas para el tratamiento de las imágenes y el color. accesibilidad y navegación. PC Today nº 92 7. el color en la web. Cómo saber si una web es usable. Guía del curso 1. junto a esos textos y fotos que hemos mencionado. Psicología del color. dio paso a una serie de avances en los sistemas.es . el diseñador web. Introducción a las herramientas WYSIWYG. precisamente. nos referimos al código realizado sobre un lenguaje de programación y que aumenta las posibilidades de la página web. y viceversa. La parte más oscura del desarrollo es la programación en sí. Imágenes: tipología y características. Herramientas para el diseño web. Imagen animada y películas. incluso para un proyecto doméstico. PC Today nº 87 PC Today nº 88 2. Hemos comentado la importancia que tiene y sobre todo su usabilidad. De ahí. PC Today nº 90 5. para trabajar “detrás de la cámara”. que cualquiera podría crear una página web en un abrir y cerrar de ojos. Tecnologías multimedia en la Red. Uno de los conceptos más ambiguos del desarrollo es. Mapas de imágenes. Pero también se requiere que. PC Today nº 91 6. Razones para conocer los principios de la programación. con la red ARPANET. Principios de programación El origen militar de Internet. P 3. más rápido será el desarrollo. pero no está de más que el diseñador sepa de qué le hablan los programadores. Música y sonido. Integración multimedia: Macromedia Flash y Action Script. Accesibilidad. Planificar y organizar el sitio. que si el diseñador ya sabe cuáles son las limitaciones de una interfaz. Evaluar la accesibilidad. Usabilidad.

lo que demuestra su influencia.red en dos lados. el protocolo TCP se plo. Como todo lo que se encuentra en Internet. crear una red. es decir. el modelo de programación divide el diseño de una aplicación en tareas del cliente y tareas del servidor. que da respuesta a las peticiones de miles de clientes. Una vez estatan tareas de comunicación (por ejem. modelos ISO/OSI.blecida la conexión. el que solicita y el que sirve. un lugar y permitía su consulta desde cualquier punto.Diseño web. Cada uno de estos red en 1972.cita información o servicios del lado net en mayúsculas nació a partir de AR.isoc. En otras pala20. entre la impresora y el PC) y los encarga de mantener la comunicaservicios de impresión del sistema ope. En la literatura sobre redes casi siempre Para profundizar en el origen de las primeras redes de se hace mención a los ordenadores podemos encontrar buen material en www. londinense e ingeniero de programación. Parte 7ª diseño o los aspectos del sistema no están patentados. Internacional Standards Organization). hará las veces de cliente y solicitará la información a otro servidor. las operaciones dependen de un protocolo: HTTP o Protocolo de Transferencia de Hipertexto. documento prefabricadas y las librerías del siste. Por ejemplo. en 1989. El modelo cliente/servidor consiste en dividir una aplicación de red en dos lados. una base de datos distribuida proporciona a las compañías aéreas información sobre las reservas.HTML. Open Systems Interconnection). el modelo cliente/servidor de mación entre los científicos del centro. cada objeto de la WWW. El lado cliente solinet”. las propias funciones an. Todas las operaciones pueden adjuntar Generalmente en la programación un objeto o recurso sobre el que actúcliente/servidor. en espera de otra aplicación cliente. proporciona una funconstruir redes de área amplia (WAN – cionalidad específica o una serie de Wide Area Network) o redes de área servicios a la capa subyacente. Una aplicación servidor casi forma que el resto de los servicios cosiempre se inicia ella misma y luego munes de entornos en red: un propermanece latente.El modelo ISO/OSI utiliza capas para das al unirse centros universitarios y organizar una red en módulos funciohacerse pública la existencia de dicha nales bien definidos. Este modelo de red ha dado lugar al local (LAN – Local Area Network). El objetivo principal era módulos o capas. Entre 1977 y 1984 los profesionales de redes diseñaron un modelo de referencia para Interconexión de Sistemas Abiertos (OSI.pendientes: solicita información y formación se encontraba localizada en responde a esas peticiones. se reconoce por su URL (Universal profundidad el funcionamiento de la red. El sistema emplea un proceso servidor que accede a una base de datos distribuida y da respuesta a todas las empresas.servidor y éste a su vez responde a las PANET. En un sistema abierto el Se puede diseñar una aplicación que cumpla las dos funciones. La cuna de la World Wide Web fue el laboratorio europeo de física de partículas CERN.org/rfcs/rfc1945. Para comprender el concepto de programación en Internet. se pueden obtener todos los detalles sobre el sistema y utilizarlos con entera libertad. que contiene el estado rativo se encargarían de realizar las de la operación y su posible resultado. Un cliente establece una conexión con un servidor y envía un mensaje con los datos de la solicitud. La especificación completa del protocolo HTTP 1/0 propuesta por su creador. En la web del laboratorio de física de partículas CERN. se puede comprobar el origen real de la World Wide Web. fichero multimedia o aplicación ma hacen innecesario conocer en CGI. protocolos y arquitecturas muy varia. Muchas personas han considerado a la World Wide Web como el prototipo para crear esa base de datos. usaremos las mismas ideas que si programamos para una red local.cern. admite los servicios de coconexión es el cliente y qué lado es el nexión TCP/IP y funciona de la misma servidor.org/internet/history/cerf. El hecho de conectar dos o más orde. Esto nos evita tener que saber qué hace nuestro navegador a través de una página web cuando realiza una consulta en un servidor.es. funciones de servidor.html. v Programación de formateo Durante mucho tiempo los científicos e ingenieros se han centrado en la idea de desarrollar una base de datos universal. la in. Siempre nos En cualquier servicio de compra por Internet. la orientó como herramienta de trabajo para el intercambio de infor. como este imaginamos un de Iberia. public.html. se encuentra recogida en el documento de referencia RFC 1945. Inter. y es la Red de Redes con más de solicitudes del cliente.uso del mismo en la programación de nadores para que se comuniquen es redes: el modelo cliente/servidor. pero sólo desde hace poco han contado con los medios para crearla.ceso servidor escucha en un puerto de ro internamente nuestro propio PC comunicaciones TCP (por defecto. se puede experimentar el funciogran ordenador namiento del modelo cliente/servidor. con la “i” en minúscula. El servidor responde con un mensaje similar. Conectar dos o más re. Nº 93 53 . Hay una serie de diferencias que nos Desde el punto de vista de las comuniayudan a determinar qué lado de una caciones. Los servidores de páginas web se suelen relacionar con grandes grupos de ordenadores.shtml. El modelo OSI se derivó de un modelo propuesto por la Organización Internacional de Normas (ISO.de los clientes de la WWW.Consiste en dividir una aplicación de des a nivel mundial forma una “inter. el funciona como un cliente/servidor.faqs. Su creador.web. Dentro de este modelo se puede dar la siguiente situación: el cliente realiza una petición y si el servidor no puede satisfacer la respuesta. una aplicación de red cumple dos sin necesidad de descargar documen. Tim Berners-Lee. www. De esta forma.iberia.funciones bien diferenciadas e indetos mediante FTP.bras. Pe.ción y garantizar un intercambio de datos libre de errores. Tim Berners-Lee. con sede en Ginebra. HTTP se basa en operaciones sencillas de solicitud/respuesta.000 redes enlazadas en 130 países. Como en el modelo de red y su división en capas. Los 80) y espera las solicitudes de conexión clientes serían los procesos que solici. www.ch/public/ index.

En Internet. Al contrario. Este sería un nivel. a pesar de estar referenciada en la sintaxis de esquema. Para una arquitectura cliente/servidor de tres niveles tendríamos: un servidor de base de datos. necesitaremos un gestor de base de datos en nuestro servi- Las capas de una red El modelo ISO/OSI se divide en estas capas funcionales: • Física. conectados en una intranet. de cómo queremos distribuir la información y sobre todo de cómo queremos repartir la carga de trabajo entre los servidores. Para aprovechar ciertas capacidades de la red. Siempre varía en función de la seguridad establecida en nuestra red. Además. son los que intercambian los datos. Cuando se accede a una red. un servidor de aplicaciones y un servidor web. quizá haya que crear algún módulo especializado. Incluye varias rutinas de conversión de datos.htm. más fácil aún. Un ejemplo sería aprovechar las capacidades de la red y utilizar varios ordenadores como centros de almacenamiento de datos. • De transporte. la capa física determina el tipo de cable que utilizará la red. las redes en Internet no incluyen una capa de presentación estándar. Hoy en día está bastante superado este tema por las grandes compañías de software especializado en comunicaciones. sólo tiene que mantener esta conexión durante el transcurso de la transferencia del archivo. La dirección en la que encontrarás todo lo referente al protocolo corresponde al consorcio internacional del W3C y que ya hemos mencionado en más de una ocasión: www. Además. Es la asignación. No obstante. 54 www. Para ejecutar una operación. Si creamos varias sesiones con un sistema. Este dor. URL y URI (Universal Resource Identifier).w3. en la superficie de Internet siempre estará nuestro querido HTML. Los documentos HTML contienen mucha información que un cliente Web de- be interpretar. Cuando se establece la comunicación entre dos ordenadores a través de una red. Este sería otro nivel. El esquema URL para HTTP sólo identifica recursos de Internet sobre los que se puede utilizar el Protocolo de Transferencia de Hipertexto. Desafortunadamente. si dos ordenadores del mismo tipo están • De red. Por lo tanto.Curso Resource Locator). en realidad hay dos programas que proceso se denomina registro. Incluso. Hay mucha bibliografía relacionada con la teoría de redes que abarca todas las cuestiones relacionadas con arquitectura. ¿Qué queremos decir con esto? Dentro de la arquitectura cliente/servidor podemos establecer niveles que van a estar determinados por los componentes de la arquitectura. son relativamente sencillas. se incorpora un servidor de aplicaciones que se encarga de la ejecución de los programas internos y de preparar la información para el servidor web. tenemos que distinguir aplicaciones que se ejecutan en la parte cliente y las que lo hacen en la parte servidor. Las capas de red El diseño de nuestra web y su programación va a depender también de los niveles o las capas del mismo. Pero las verdaderas operaciones de red en la WWW. pero en el nivel de capa de enlace y física son formatos completamente distintos. un URL identifica un objeto específico de dicho equipo y el método de acceso para el objeto al que hace referencia. • De presentación. en lugar de identificar un ordenador anfitrión.pctoday. realizadas con HTTP. a efectos prácticos puede ver un URL como un tipo especial de dirección de red. uno en una red de tipo Ethernet y otro en una de tipo Token Ring. etc. Transforma los datos binarios puros en información inteligible para la capa de red. Este tipo de operaciones son mucho más simples que las operaciones de FTP (File Transfer Protocol). en el nivel de capa de red los datos parecen idénticos. Una vez localizado el objeto. Si vamos a almacenar datos que posteriormente se utilizarán para alimentar la web (una página de noticias. Es el sistema de entrega primario dentro de la red. podemos imaginar cuantos niveles queramos según el diseño de la arquitectura. y son los programas de aplicación los que se encargan de las funciones de esta capa. De ahí que nuestro reto sea utilizar bien las posibilidades que nos permita la aplicación que funcione como navegador. por lo que puedes ignorarla. s La mejor fuente de información en cuanto a protocolos es www. Es la que transmite los datos a través del canal de comunicación de la red. te recomendamos que consultes la página web cdec. el URL no desempeña ninguna función. crear una aplicación que interprete y despliegue de forma adecuada el contenido de un documento HTML es bastante complicado. aunque está totalmente en inglés. Permite buscar la mejor trayectoria entre el ordenador anfitrión y cualquier destino en la red.es/libro/HTTP. El único propósito de un URL es encapsular información que pueda utilizar un programa con el fin de localizar un objeto en Internet. • De sesión.unican. Esta capa determina cómo se presentan los datos al usuario.org. La arquitectura cliente/servidor puede desglosarse en capas. Por ejemplo. la parte objeto de búsqueda no se utiliza. Estas funciones incluyen la interfaz de red con impresoras. etc. la tipología de la misma. esta capa envía paquetes individuales de datos que contienen la dirección de destino y fuente para el enrutamiento. • De enlace (de datos). En la capa de aplicación se incluyen todos los detalles relacionados con programas diseñados para usuarios de red. protocolos. Cuando se diseña un sitio web y se dimensiona por número de visitas. la capa de sesión negocia y establece las conexiones entre los procesos y las aplicaciones en diferentes anfitriones para cada sesión. el programa sólo debe manejar una conexión TCP. generalmente hay que identificarse y conectarse. Esta capa es la que los conduce al programa correcto. monitores y formatos de archivos. Generalmente es la parte servidor la que se divide en “n” niveles. por ejemplo). Esta capa contiene funciones comunes que la red utiliza repetidamente durante las comunicaciones. El modelo ISO/OSI es el más estandarizado y se caracteriza por la conversión que se establece entre las capas que lo componen. para reducir el trabajo del servidor web (encargado de servir las páginas web a Internet). en la actualidad. que es el predeterminado. determina las propiedades mecánicas y eléctricas de este canal.org/Protocols. Si salimos un poco de estas profundidades. • De aplicación.w3c. La sintaxis sería: http://anfitrión:puerto/ruta? objeto de búsqueda Si los programas omiten el puerto se opta por el 80.es . Por ejemplo. Si además quieres comprender con algún ejemplo el funcionamiento de los comandos de este protocolo basado en solicitud/respuesta entre cliente y servidor. Dentro de las capas. generalmente en tramas de datos. Esta capa asegura la entrega de los datos de forma correcta. Es decir. metodologías.

se ha creado un nuevo objeto cuyo URL de acceso se encuentra en el cuerpo de la respuesta. lo mismo que cualquier CGI.. el servidor se limita a responder a nuestra petición con un archivo que viaja por Internet. Principalmente.css”) </STYLE> </HEAD> <BODY> .. En caso de tener suficiente capacidad. simplemente es una forma de es- Dentro de www. Se le dio ese nombre porque en esos momentos Java era un lenguaje muy utilizado por los programadores. La dirección URL solicitada no existe. que está actuando como proxy o pasarela. </BODY> </HTML> o referenciando al archivo CSS mediante la etiqueta @IMPORT <HTML> <HEAD> <STYLE TYPE=”text/css”> @IMPORT URL(“Mi_hoja_estilos. aunque tienen muchas cosas en común. 204 301 No Content Moved Permanently 302 Moved Temporarily 304 400 401 403 404 500 501 502 503 Not Modified Bad Request Unauthorized Forbidden Not Found Internal Server Error Not Implemented Bad Gateway Service Unavailable En concreto. El servidor proporciona la nueva dirección URL en la variable Location de la respuesta. y simplemente estaba de moda en la Web. se devuelve este código de estado. ha encontrado un error al acceder al recurso que había solicitado el cliente. El objeto al que se accede se ha movido a otro lugar de forma permanente. El nuevo objeto no está disponible por el momento. ingeniero de Netscape. en 1995 Brendan Eich. es la única forma de llegar a comprender y dominar su sintaxis. El cliente no debe modificar ninguna de las referencias a la dirección URL errónea. document. por ejemplo. Esto no significa que sería mejor incluir todo directamente en el HTML y olvidarnos. Algunos navegadores acceden automáticamente a la nueva dirección URL. pero hoy en día no existen problemas para utilizar incluso la última versión 1. una para el documento HTML y otra para el documento CSS enlazado.. CSS y JavaScript han dado lugar a la tecnología denominada Dynamic HTML o DHTML.. el servidor no tiene capacidad suficiente para llevar a cabo la petición del cliente. Puede utilizarse en sistemas de edición de documentos.. Se ha producido un error interno en el servidor y no puede continuar con el procesamiento. se codifica de esta forma para que el código fuente del archivo referenciado permanezca en el anonimato. Con la opción Ver código fuente de un navegador se pueden ver los entresijos de una web. Este lenguaje ha sido la base para lograr la animación de las páginas web sin necesidad de estudiar herramientas difíciles o lenguajes que requieran mucho tiempo de aprendizaje.. El cliente no deberá modificar el documento que se muestra en este momento. <HTML> <HEAD> <LINK REL=”stylesheet” TYPE=”text/css” HREF=”Mi_hoja_estilos. Dadas sus características. Como resultado. como todos los lenguajes orientados a objetos. Nº 93 55 . Este nuevo objeto ya está disponible.. que no es el editor de HTML. En una colaboración entre Netscape y Sun Microsystems se terminó la sintaxis del que sería rebautizado como JavaScript.css”> </HEAD> <BODY> . inventó un lenguaje de programación llamado Livescript. Java y JavaScript no tienen nada que ver. además. Vamos a crear un ejemplo sencillo: <html> <head> <title>Primer Javascript</title> </head> <body> <h1>Típico ejemplo de…</h1> <script language=”javascript”> <!— de esta forma ocultamos el código JavaScript para los antiguos navegadores. El servidor. el navegador de nuestro PC recopila la página que ha solicitado al servidor y posteriormente interpreta las etiquetas y el contenido para visualizarla. Microsoft no adaptó Internet Explorer hasta 1996 para interpretar JavaScript. Se ha aceptado la operación. Como resultado. El servidor proporciona la nueva dirección URL en la variable Location de la respuesta. HTML. este lenguaje requiere el uso de un editor de texto. En el cuerpo de la respuesta se debe informar sobre la disponibilidad de la información.. Existen dos tipos de JavaScript: • JavaScript cliente: se desarrolla y aplica en el navegador del cliente.write(“Hola. La petición requiere una autorización especial. Este ejemplo. HTML/CSS. • JavaScript servidor: menos conocido. mundo”) //—>fin de ocultar </script> </body> </html> v provocará dos peticiones al servidor. al ser un lenguaje interpretado.. Operación realizada correctamente.com podemos encontrar muchos recursos que nos ayudarán a desarrollar páginas no dependientes del explorador. No es posible utilizar una clave para modificar la protección.6 de JavaScript. Ya lo hemos mencionado anteriormente. pero más sencillo. siempre se ejecuta en la parte cliente. Parte 7ª Códigos que envía el servidor al explorador Código 200 201 202 Mensaje OK Created Accepted Descripción Operación realizada satisfactoriamente. El objeto al que se accede se ha movido a otro lugar de forma temporal. En el cliente Haciendo un poco de historia. </BODY> </HTML> tructurar la información. La petición tiene un error de sintaxis y el servidor no la entiende. que normalmente consiste en un nombre y una clave que el servidor verificará. El servidor está actualmente deshabilitado y no es capaz de atender el requerimiento. El campo WWW-Autenticate informa de los protocolos de autentificación aceptados para este recurso. Está prohibido el acceso a este recurso. se ha creado un nuevo objeto cuyo URL de acceso se encuentra en el cuerpo de la respuesta. y el documento no ha sido modificado.. Cuando se ejecuta un comando “get” condicional. se ejecuta en el servidor.htmlhelp. Quien se lleva el trabajo es nuestro PC. los ingenieros de Netscape vieron que con un poco de preparación se podían adaptar los navegadores para interpretar este código. el cliente puede actualizar la dirección URL incorrecta en la agenda de favoritos. Operación realizada correctamente.Diseño web. Algunos navegadores acceden automáticamente a la nueva dirección URL. pero no ha producido ningún resultado de interés. Ante la posibilidad de realizar muchas operaciones sin necesidad de un servidor de aplicaciones. Por su diseño interno.

Write “<BR>Has servidores de automatización OLE y pulsado <B> Aceptar</B>” utilizar Java. Else La versión en VBS del primer ejemDocument. Por ejemplo.com/cen </TITLE> tral/javascript. 25).0 JavaScript 1. por eso se añade language=”Javascript”. If I = vbOk then Document. JavaScript 1.htm. hay que escribir el código cerca de ella. Es document. la única diferencia es que uno es estándar para cualquier navegador y el otro es exclusivo de Internet Explorer. constantes y posibilidades <HTML><HEAD> que nos ofrece JavaScript.}//—> </script> </head> <body onload=’cambia_texto()’ bgColor=’#EEEEEE’> <span class=’posicion’ id= ’id_texto0’ style=’z-index:1.fontsize:20’></span> <span class=’posicion’ id= ’id_texto1’ style=’zindex:1. cript.4 sin ajustarse a ECMA-335 (*) Internet Explorer No aceptado JavaScript 1. x+=1. }—> </style> <script language=”JavaScript” type=”text/javascript”> <!—var message=”Texto que se cambia en tres colores”. recomenda<TITLE>PC Today . • Si se refiere a que hay que realizar alguna acción al cargar el documento.0 JavaScript 1. font-weight:bold.org/ publications/standards/Ecma-262.fontsize:20’></span></left> </body> </html> Esta página de error indica que hay una mala programación de la web que las origina. Embeber el código dentro de un documento HTML no es difícil. La decisión de dónde colocarla dependerá de varios factores.internet. top:100. habrá que tener cuidado cuando se escriban las palabras reservadas.Write “Un ejemplo con MsgBox” dor. La ventaja que tiene VBS es que permite ser Versión navegador 2 3 4 5 6 Netscape JavaScript 1. aplica un efecto de neón entre rojo.2 está debidamente descrito en el documento ECMA-262: www. con Notepad podremos ver las posibilidades que nos otorga el control de ciertas características. javascript. }} setTimeout(“cambia_texto().netscape. se encarga de propagar la forma en que se deben usar las altas tecnologías.htmlweb.i-=1. y uno de sus atributos es el lenguaje en que está escrito.0). Algunas </HEAD> páginas en las que recopilar ejemplos y <BODY> más información son: www.0). Este ejemplo. www. Tienen el mismo significado que la etiqueta <!— …. • Se ha añadido la etiqueta <!—.getElementById (‘id_texto2’). ActiveX. Arial”> script. Dentro del software libre y aprovelogo de mensajes tíchando el estándar SQL. Para aquellos que están familiarizados con Visual Basic.write(). por lo tanto.Write “<BR> Has plo de JavaScript sería así: <html> <head> <title>Mi primer Visual Basic Script</title> </head> <body> <h1>El típico ejemplo de…</h1> <script language=”VBScript”> Document. donde encontrarás ma<BASEFONT SIZE=3> nuales y guías sobre este tema. MySQL es la más extendida.3 sin ajustarse a ECMA-334 (*) JavaScript 1.elguruprograma Document.MsgBox” Visual Basic Script es un subconjunto Document. etc. así se oculta el código JavaScript para los antiguos navegadores.2 sin ajustarse a ECMA-262 (*) JavaScript 1.color:red.inn erHTML=message.getElementById (“id_texto1”).com. 56 www.} else { x=0.vbQuestion + vbOkCancel + sólo lo pueden ejecutar navegadores vbDefaultButton2. verde y azul: <html> <head> <title>PC Today .2 ajustándose a ECMA-262 JavaScript 1. también está ejemplo”. es mejor ponerla en BODY. los identificadores.substring(i. • Dentro de este breve script tenemos una línea de comando que escribirá la frase en pantalla. La etiqueta <script></script> puede incluirse tanto entre las etiquetas <head></head> como dentro de <body></body>.ciones que funcionan sobre Windows: ciones. Today .1 JavaScript 1. • Pero si la función se pude invocar desde cualquier punto de BODY.es . function cambia_texto() { if(x<=message.com. • La etiqueta de cierre del comentario HTML se antecede con las dos barras de comentario de JavaScript. Conjuntamente al W3C.pctoday. El texto tiene que ir necesariamente entre comillas.ge tElementById(“id_texto0”). La desventaja es que . var x=0. MsgBox “Esto es un Además de JavaScript.mundojava <FONT FACE=”Verdana. www. mundo!” </script> </body> </html> pulsado <B>Cancelar</B>” End If </SCRIPT></FONT> </BODY></HTML> Se parecen bastante. la European Computer Manufacturers Association. No sirve sólo para navegadores antiguos.substring(x. y nos permite manejar todos los elementos de la interfaz mediante estos lenguajes.ecma-international.Curso • La doble barra inclinada // se utiliza en JavaScript para indicar comentarios que serán ignorados por el navegador.Write “<BR> Has de Microsoft Visual Basic.innerHTML=messa ge.”PC Today de Microsoft y sus principales posibiliMsgBox”) dades son utilizar controles ActiveX. Veamos un ejemplo en el que se muestra cómo se pueden utiliLa base de datos es un eje fundamental para alimentar zar los cuadros de diánuestras páginas.length) {document.texto que cambia de color</title> <style type=”text/css”> <!—. picos de las aplicaPara profundizar más sobre las fun. —> en HTML. } else { if(i>=0) {document.MsgBox mos consultar devedge.Write “Hola.color:green. Esto es necesario para que el navegador no se confunda e interprete erróneamente el cierre —>. No olvidemos que dado el origen de VBS.ar o www.document. sensible a las mayúsculas.vbInformation.length.”PC Visual Basic Script. es un lenguaje bastante exclusivo para utilizarlo con software de la casa Microsoft. sino para los navegadores más modernos en los que el usuario ha decidido desactivar el intérprete JavaScript. pero cuando se trata en detalle objetos Com.com. <SCRIPT LANGUAGE=”VBScript”> programacion. lo mejor será colocarla dentro de HEAD. aparte de nuestro gusto. vemos que el script de VBS es mucho más “denso” que el de JavaSLas versiones de JavaScript Los únicos requisitos necesarios para utilizar ambos lenguajes de scripting es tener un navegador y un editor de texto que nos permita crear nuestro código.net.3 ajustándose a ECMA-334 JavaScript 1.com. etc. que ha pulsado <B> Aceptar</B>” heredado parte de las funcionalidades I = MsgBox (“Otro ejemplo” de este lenguaje.innerHTML=messa ge.posicion {position:absolute. y dentro del paréntesis de este comando se escribe entre comillas el texto que queremos que aparezca en pantalla. • Para navegadores con el intérprete JavaScript habilitado. Ya sabes. i=message. se ejecutará el código tras leer una etiqueta de script. VBScript o VBS.i=message.fontsize:20’></span> <span class=’posicion’ id= ’id_texto2’ style=’zindex:2.color: blue. • La etiqueta <script> … </script> permite al navegador reconocer que se inicia en este punto un script o programa a interpretar.length. JavaScript tiene la particularidad de ser CASE SENSITIVE. Si se transcribe el siguiente ejemplo en un documento HTML. es muy fácil codificar script potentes para una página web. Lo aconsejable será seguir estas pautas: • Si la función es corta y actúa sobre un elemento del documento.4 ajustándose a ECMA-335 (*) ECMA. en concreto.”.

0. Para obtener transformaciones.com. • Windows 95/98 con El lenguaje JavaScript ofrece la posibilidad de crear PWS (Personal Web Server) aplicaciones sencillas y compatibles con cualquier instalado. HTML por ejemplo.com/ directorio/programacion/asp han realizado un gran trabajo de comparativas entre estos tipos de tecnologías de scripting. el servidor de páginas web es un componente más del sistema. Dentro de las opciones que presentan los script que se ejecutan en el servidor. XML no es sólo un lenLa característica esencial de XML es guaje. La página web donde obtener información y poder descargar su intérprete es www. Todo lo que queremos ejecutar en el servidor irá dentro de las etiquetas <% …… %>.visualbasicscript. a continuación. • Windows 2000 Server con IIS. el lenguaje de script es muy manejable y. Estos entornos publican docuadquiriendo gran auge como medio mentos XML que antes de enviarse al de comunicación entre distintas tec. se indica mediante la etiqueta <%@ Language En el caso de Windows XP. o lenguaje de anotación sitos pertinentes. y una dirección de muchísimos recursos de VBScript es www. el más difundido y eficiente es Apache. Dentro de los servidores web gratuitos. mentos. visita html. mucho más potente a la hora de utilizar las características de un lenguaje de programación. Es necesario tener encontrar en www.cliente sufrirán una serie de transfornologías es XML (eXtensible Markup maciones para adaptarse a los requiLanguage). también está PHP (PHP: Hypertext Preprocessor). sumamente complejo para poder servir documentos web. no lo pases por alto. Por lo tanto.visualbasicscript.net/ ciertas nociones de la parte servidor. tercambiar información. es una manera de especificar que permite estructurar la informalenguajes. un standard para documentos estructurados. Un buen tutorial para montar nuestro servidor web desde En el servidor Hemos comentado la parte que se cero con Windows XP PRO se puede ejecuta en el cliente. sobre todo. pero además puede conectarse a una base de datos para in- Frente a las posibilidades de Flash. XML no es un lenpara su visualización. es gratuito. Al igual que el resto de los lenguajes de script vistos hasta ahora. extensible.0 ha dado servidor y se sirva lugar a XHTML 1. En www. Si guia25-1.compuayuda. Structured Generalized Markup Language.Diseño web.desarrolloweb. cliente VBS. s se use dentro de entornos de aplica- Se pueden obtener programas ya hechos en páginas españolas. sino mación de una base de datos. su recomendación es utilizar como servidor web Apache 1. pero de extensión . Documentación en castellano: otro tipo de doculeo. Una página ASP es como un documento HTML. y la base de datos MySQL.com.es/jlgranad/xhtml/xhtml1. que se obtienen a base de el formato solicitado. Recupera inforguaje para crear páginas web.htm. El resultado de esta página sería: Hoy es 5/10/2004 10:01:59 AM Existen bastantes variaciones entre VBScript y ASP. com/asp/tutorial/vbscript. </head><body> ASP (Active Server Pages) es la tec<H1>Hoy es <%= now %></H1> nología de servidor desarrollada por </body></html> Microsoft.com/manuales/8 hay un buen tutorial sobre ASP y PWS. ASP se compone de páginas en formato ASCII. está basada en la programación de Visual Basic. principalmente sobre Linux. Lo normal es que XML se utilice en el La reformulación de HTML 4.asp (aunque lo que contenga sea código HTML).worldonline. para empezar. pero una de las más completas es www.org. Al igual que VBScript.programacion.apache. ha<html><head> brá que saber qué necesitamos para <title>PC Today</title> dar servicio a nuestros clientes. Un buen tutorial sobre VBS lo podemos encontrar en www.net/xml.php. www. la XML nació como subconjunto de transforma para servirlo al cliente en SGML. Homóloga a su versión En la página www. Un ejemplo de página ASP sería: alguna vez montamos nuestro propio negocio sin alojamientos contratados y <%@ Language = VBScript %> nuestro PC se convierte en servidor. de ahí que sea extensición y luego aplicar transformaciones ble. permite el uso de componentes ActiveX.net. la información autodescrita.php. ordenador. www. La gran diferencia de funcionamiento es que ASP se ejecuta en el servidor y el resultado lo envía al cliente.net/manual/es/.htm#toc. Parte 7ª XML/XHTML Un lenguaje de marcas que está ción. Al ser gratuito.mysql. Esto hace que XML información más detallada.desarrolloweb. s Nº 93 57 .x.3. La parte dedicada a información y manuales en español se encuentra en www. La versión homóloga de ASP en versión gratuita.programacion.com.0 a XML 1. = VBScript %> que vamos a utilizar Visual Basic Script en el servidor. convierte a XML y. Para poder ejecutar páginas ASP debemos disponer como mínimo de: • Windows XP PRO con IIS (Internet Information Server) instalado (es un componente del sistema operativo).

Trucos avanzados y filtros. Objetos múltiples. Muchos profesionales y aficionados han optado por un programa que. PC Today nº 97 5. con las que podrás seguir y practicar los ejemplos de este curso. Introducción al retoque fotográfico. Selección avanzada. Fotógrafos digitales. Guía del curso 1. Selección avanzada. Adobe Photoshop y Paint Shop Pro. Adquisición de imágenes. ofrece posibilidades casi infinitas y no para de evolucionar. Photoshop.softonic. Composición de escenas.Curso Introducción al retoque fotográfico Las cámaras digitales ya son mayoría dentro del mercado de la fotografía y su compañero ideal es el ordenador. Conceptos básicos. Máscara rápida. 4. Este título de Adobe. Canales y trazados.es.com. Edición fotográfica.pctoday. Trabajar de cara a la web. www. Eliminación de desperfectos. Diseño de una interfaz. Selecciones sencillas. Filtros. y en www. Opacidad. Modificación del color. En esta primera entrega. Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. puede ofrecernos muchas posibilidades sin grandes desembolsos para poder corregir o añadir efectos a nuestras fotos. PC Today nº 94 E 2. PC Today nº 98 PC Today nº 99 6. a pesar de su precio. Diseño para Internet. Trabajo avanzado con capas. En el curso también utilizaremos el programa Paint Shop Pro 7. Modos de color. se ha conver- tido en todo un referente.jasc. PC Today nº 95 PC Today nº 96 3. Dispones de una versión de evaluación de ambos programas en su página web. The GIMP. Composición avanzada. Pronto sabrás cómo sacarles el máximo partido con los dos programas que te ayudamos a dominar en este nuevo curso. Una buena cámara y un software potente pueden ofrecer resultados mucho más satisfactorios que si te limitas a apretar el botón y mostrar las fotos en el televisor. gracias a la difusión de las cámaras digitales. sin embargo. Ésta es la última versión en castellano del mismo. s 60 www. Texturas.es . Curvas de Bezier. Extraer. www. El ordenador se ha adueñado de un hobby aparentemente caro y complicado de dominar que.com.adobe. l mundo de la fotografía ha sufrido una transformación espectacular en sólo una década. Efectos especiales. hasta que a finales de año esté disponible la versión 8. puedes ver una descripción escueta de la barra de herramientas de ambos y algunas de las acciones básicas que serán muy importantes en las siguientes lecciones. Trabajo básico con capas.

14 Eliminar rayaduras. permite elegir otras formas. 4 Recortar. Medición mide la distancia entre dos puntos. Se utiliza para crear trazados complejos y poder seleccionar elementos de una imagen de forma sencilla y precisa. Cambia un color de la imagen por otro que se seleccione. 20 Cuentagotas. Permite mover la imagen v Nº 94 61 . 6 Sector y seleccionar sector. 9 Gotero.alzada. tanto de texto como sonoras. 18 Rectángulo. Para completar la lista. 11 Pincel de copia. Copia una zona de la imagen a otro lugar. forma y transparencia. Además de la selección a 7 Lazo. Selecciona una zona de la imagen que comparte un color similar. 4 Varita mágica. etc. La segunda lo contrario. cambiar de tamaño y deformar de forma libre una capa o selección. 19 Notas.Retoque fotográfico. 20 Diseño. 10 Pincel de historia y pincel histórico. 17 Aerógrafo. 3 Deformar. 5 Mover. Ir a ImageReady. Si dejas el botón izquierdo pulsado. Desplaza zonas de la imagen para darle distintos efectos como difuminado o enfoque. a mano alzada. a modo de tampón. hay algunas comunes en Photoshop 7 y Paint Shop Pro 7. horizontal. fi- ral. Copian una zona de la imagen en otra lugar para corregir desperfectos. ofrece otras opciones de selección por capas. Herramienta de dibujo natural. como líneas rectas o flechas. 2 Zoom. selección horizontal y vertical. 16 Sello de imágenes. Suaviza pequeñas zonas de la imagen para quitar desperfectos. El primero pinta con el color de fondo. Con la tercera se simula la acción de arrastrar un dedo sobre pintura húmeda. línea y forma personalizada. para dividir las páginas en varias zonas. Sirve para mover capas. Permite averiguar y utilizar un color al hacer click en una zona. lazo Permite seleccionar magnético. borrador de fondos y borrador mágico. vertical. 23 Selector de color. Permite altermáscara nar entre el escritorio de trabajo normal o uno con el que crear selecciones complejas con las herramientas de dibujo habituales. Muchas tareas se pueden realizar con resultados similares en ambos casos. estilo y texturas. los objetos prediseñados de una lista. guías o marcas de selección de una imagen. 19 Texto. La tercera se emplea para aumentar o disminuir la saturación del color. 15 Borrador. Selección de trazado y selec15 ción directa. selecciones 6 Seleccionar. Como se puede comprobar en sus paletas de herramientas. Se utiliza para desplazar capas u objetos de una imagen. Para escribir texto en horizontal o vertical y para crear selecciones con forma de texto. que acompaña a Photoshop. Se utilizan para seleccionar todo o parte de un trazado pero sin modificarlos. 7 Pincel corrector y parche. 14 Sobreexponer. 5 Recortar. Ofrece otras herramientas para manejar los elementos de los trazados. entre capas y entre varios documentos. La segunda sirve para colorear zonas. La primera rellena una zona con un degradado de color. La diferencia entre ellos consiste en que al utilizar el segundo se añaden a la zona modificada efectos propios de una pintura. La primera aplica un efecto de desenfoque a una zona. Permite eliminar de la imagen la zona que queda fuera de la selección. Se usa para crear notas recordatorias. 21 Formas. como botones de navegación. 13 Desenfocar. Si dejas el botón izquierdo pulsado. El pincel se utiliza como herramienta de dibujo natu- 1 Marco rectangular. Bloqueo. 18 Bote de pintura. 12 Reemplazar color. rectángulo redondeado. La única diferencia consiste en el número de pasos necesarios en cada una de las aplicaciones. Permite seleccionar zonas de una imagen. Se utiliza para seleccionar un color que aparezca en cualquier lugar de la pantalla. Sirven para crear diseños poligonales fáciles de modificar. Tampón de clonar y tampón 9 de motivo. elipse. polígono. Permite elegir el color que se usará con cada herramienta de dibujo. 11 Borrador. Aumenta o disminuye la zona visible de una imagen. Además de recortar zonas a mano. 10 Pincel. dedicada al control del color y con las siguientes zonas: Selector de color. 17 Pluma. Dibuja formas sencillas. Parte 1ª Paleta de herramientas Adobe Photoshop 7 Paint shop Pro 7 1 2 1 3 5 7 9 11 13 15 17 19 21 23 2 4 6 8 10 12 14 16 18 20 22 15 16 17 18 24 25 26 19 20 21 22 11 12 13 14 9 10 5 6 7 8 3 4 ran u oscurecen zonas de la imagen. Dibuja partículas con una separación variable y produce un efecto de spray. utilizar varias formas como flechas. 2 Mover. Se emplean en la construcción de webs. Paint Shop Pro 7 también dispone de una paleta flotante. Permite dibujar con puntos y curvas fáciles de modificar en cualquier momento. Selecciona zonas de una imagen que comparten color u otras características. muestra de color y medición. Dibuja. 22 Zoom. 22 Objeto vectorial. 21 Mano. poligonal y lazo 3 Lazo. Las dos primeras acla- Paint Shop Pro 7 seleccionada dentro de la ventana. Crea forma de la y permite variar la 1 Flecha. Con ambos se deshacen operaciones. zonas de una imagen. 16 Texto. además del marco rectangular. Ofrece varios estilos de escritorio donde se muestra una porción mayor o menor de la zona de diseño y las herramientas. que se puede colocar en cualquier lugar de la pantalla. 8 Pincel y lápiz. Es el lugar donde elegir el color que se aplicará a cada una de las herramientas de dibujo y el modo en que aparecerá. Lanza la apli26 cación de diseño para la Red ImageReady. 13 Retoque. enfocar y dedo. subexponer y esponja. Acerca o aleja la imagen en función de si se usa con el botón izquierdo o derecho del ratón. elíptico. Copia una zona de la imagen a otro lugar. anotación sonora. Se utiliza para rotar. Tiene un efecto similar a la herramienta pincel pero quita zonas de la imagen en lugar de pintar. 25 Modos de pantalla. 8 Varita mágica. Ofrece muchas opciones en su paleta de configuración asociada. Crea objetos poligonales y diseños más complicados. El borrador de fondos sirve para destacar elementos de una imagen y el mágico hace lo mismo pero de forma automática. Indica si se utilizan las características típicas de un pincel o las que se encuentran seleccionadas en el instante de dibujar. círculos. 12 Degradado y bote de pintura. Rellena zonas de la imagen y permite aplicar diferentes efectos de fusión. Admite distintas opciones de tamaño. muestra el lazo poligonal y el magnético. Permite introducir texto en las imágenes. ofrece una versión mano inteligente y otra con manejadores. edición estándar y 24 Modo derápida. Mueve la imagen o capa seleccionada dentro de la ventana principal. Photoshop 7 la y columna única.

Al abrir una fotografía en Photoshop. en conjunto. Sobre el lienzo se colocan las capas. aumenta la resolución que aparece en la casilla siguiente. hay que tener muy en cuenta el tamaño o la cantidad de píxeles que la forman. Escribe el nombre que tendrá el archivo de la imagen. En la venta que se abre a continuación. El formato en que se guardará la imagen se aplicará en el momento de guardarla. Para crear un documento desde cero. La última característica que debes elegir es el tipo de fondo que mostrará el documento. Elige un lienzo a tu medida 1 Photoshop El lugar donde se colocan las imágenes de Photoshop se llama lienzo. hasta por lo menos 300 ppp. se pueden elegir los parámetros del nuevo lienzo. la zona elegida aumentará de ta- Resumiendo.. con lo que hará más sencillo el trabajo con elementos transparentes. Para elegir otro tipo de medida. Si no aparece ninguno que se adapte a tus necesidades. Selecciona el color blanco en la casilla Color de fondo de la zona Características de la imagen. 1 Elige la opción nuevo que se encuentra en el menú Archivo de la barra superior de herramientas. La máxima resolución que se puede obtener sin perder detalle es la que tenga el original en su medio de origen. La resolución que aparece por defecto es 72 pí- xeles por pulgada. Así. De esta forma. una imagen única o fondo. se podrá ver en su totalidad sin necesidad de moverla.Curso Imágenes de mapa de bits Las fotografías digitales se encuentran en un formato llamado bitmap o mapa de bits. por ejemplo. Si vas a imprimir la imagen. éstos no se consideran parte de la imagen y no se imprimirán. ahora no es necesario tenerlo en cuenta. pulsa en las flechas situadas a la derecha de cada casilla. Procura ver las fotografías en su tamaño real. elige un ancho y alto de imagen que se ajuste a tus necesidades. 3 Para alejar en Photoshop pulsar Alt y sobre la imagen. Selecciona un tamaño para el lienzo en la lista. Si vas a imprimirlas con buena calidad. selecciona la opción CMYK. 2 Para alejar en Paint Shop Pro 3 Botón derecho y arrastrar el puntero. lo que realmente se abre es un lienzo donde la única imagen corresponde al fondo de la misma. es reducir la resolución de una imagen hasta que encaje en la pantalla del ordenador o en una página web. 2 Paint Shop Pro Consejo Una imagen no gana calidad si se aumenta su tamaño. más resolución y calidad podrá tener la imagen. ya que es la que más se acerca a la forma de trabajar de las impresoras. Haz click con el botón derecho sobre la imagen y ésta se reducirá de tamaño en Paint Shop Pro. 1 Abrir menú Archivo 3 Seleccionar nuevo. La vista se reducirá y podrás ver una zona más extensa de la misma. Lo que sí es posible. 1 2 1 Para agrandar 3 Pulsar zoom 3 Pinchar en la imagen. lo cual indica que están formadas por multitud de pequeños puntos o bits. Se refiere al número de puntos de la imagen o bits que caben dentro de la unidad de medida elegida. 1 3 Resumiendo. con las herramientas de zoom. Cuanto mayor sea la cifra. Para ello. Selecciona Blanco en la lista desplegable y pulsa aceptar. una vez dentro del programa. Aunque en la pantalla aparezca un tramado de cuadros. no mostrará ningún color. Puedes comprobarlo con la herramienta zoom de cualquiera de las aplicaciones. Pulsa en el icono de la herramienta zoom. Selecciona la opción nuevo.pctoday. Por defecto es 72 ppp (píxeles por pulgada). maño. los objetos o. En Photoshop 7.es . Si lo haces con el botón izquierdo. 3 Pulsa con el botón derecho del ratón sobre la imagen y arrastra el puntero. abre el menú Archivo de la barra superior de herramientas. pulsa la techa Alt del teclado y sin soltarla. tendrás un fondo blanco que destacará y te permitirá saber si los ele- 2 62 www. como un tablero de ajedrez. introduce los datos en píxeles en las casillas de Anchura y Altura. dan la sensación de ser una imagen única. en el que poder importar cualquier fotografía. Éstos muestran un color cada uno y. que es equivalente a la que muestra un monitor de ordenador. 3 Seleccionar fondo blanco. una cámara de fotos digital.. para asegurarte antes de usar la impresora. un vídeo o la televisión para mostrar tus imágenes. Selecciona el modo de color con la flecha de la siguiente casilla. simplemente. Elige 2 RGB si vas a utilizar el monitor. pulsa en las flechas que hay junto a las casillas Ancho y alto o introduce la cantidad directamente en ellas.. Consejo Aunque una imagen ofrezca una calidad muy buena en la pantalla y sea difícil apreciar los puntos que la forman. Éste se transformará en una lupa con la que podrás pinchar sobre la imagen. ésta se agrandará. En la ventana que se abre a continuación. La opción Color de fondo utilizará el color que se encuentre seleccionado en la barra de herramientas y Transparente. 2 Escribir el nombre 3 Seleccionar tamaño 3 Seleccionar el modo de color. Aquí es donde puedes colocar todas las imágenes que quieras y modificarlas a tu antojo. pincha sobre cualquir lugar de la imagen.. a la hora de imprimirla. Elige 300 ppp si vas a imprimir.

*. 1 Eligir la opción nuevo 3 Eligir ancho y alto de imagen. Selecciona las casillas Centrar la imagen horizontal y verticalmente. *. se crea una capa nueva de forma automática cada vez que utilizas el comando pegar algún conteni- 4 1 Photoshop Elige una imagen con la que desees practicar. *.TGA) Windows Clipboard (*. Parte 1ª mentos de tu lienzo han encajado correctamente con el fondo. *.CT) Truevision Targa (*. 3 Pulsar Aceptar.PIC) Macintosh PICT (*. incluso si vas a utilizar sólo unos pocos.AI. Pulsa cerca de la esquina superior izquierda de la imagen y sin soltar el bo- 2 v Nº 94 63 . Halo (*.HGL.BW. tón del ratón.BMP) Mapa de Bits WordPerfect (*.emf) Windows Meta (*. Elige la opción Pegar del menú Edición de la barra de herramientas. Selecciona elementos de una imagen En una fotografía.PS) Raw File Format (*. Dirígete al menú Archivo y crea un nuevo documento de la manera que explicamos al principio de la lección.PSD) Portable Greymap (*. Si te fijas en la ventana de la derecha. *. se situará en el centro del mismo. *. verás que hay dos iconos.DCX) Zsoft Paintbrush (*.jpg que está en la carpeta de muestras de Photoshop. dispones de varias herramientas de selección.KDC) Tagged Image File Format (*.RLE) Windows u OS/2 DIB (*.CLP) Windows o Compuserve RLE (*.RAW) Sun Raster Image (*. *. un recuadro blanco y otro con el contenido de la imagen.SGI) Kodak Digital Camera (*. antes de modificarlo.JLS.GEM) Dr.CUT) FlashPix (*.7 millones de colores. si no cambias las opciones.MSP) Paint Shop Pro – Imagen (*. 3 tidades de la zona inferior para elegir el lugar en que quedarán los gráficos que hubiera en tu lienzo. En este caso usaremos Pimientos. sólo aparecerá con un tamaño mayor.HPG. en la sección con el título Capas.PCT) MacPaint (*.PCX) en blanco y negro o ilustraciones. Deja las opciones como aparecen en la pantalla de configuración y pulsa 3 aceptar. Vamos a ver algunas que son comunes a ambas aplicaciones.RGBA.. ya que siempre se puede reducir la cantidad de éstos en el último paso de la edición.PBM) Mapa de Bits Windows u OS/2 (*. La imagen que has elegido aparecerá en pantalla. no tienes por qué estar disconforme con todos los elementos de la misma.Retoque fotográfico.DIB) WordPerfect Vector (*. *.CMX) Deluxe Paint (*. Utiliza la herramienta zoom hasta que la imagen ocupe casi toda la pantalla. 4 Seleccionar agrandar 3 Cambiar resolución 3 Seleccionar Centrar imagen.WPG) Zsoft Multipage Paintbrush (*. puedes elegir una cantidad inferior de colores. Selecciona la opción Copiar.JPG. *.JIF. 2 Seleccionar blanco como color de fondo 3 Elegir 16. Pulsa Aceptar y tendrás un lienzo en blanco donde poder experimentar con las herramientas que ofrece el programa. dispones de una capa que es el fondo de color blanco y otra que contiene la imagen que acabas de pegar.SCT.IFF) SGI (*.PGL) Lotus Pic (*. *. ya que es la máxima profundidad de color que permite el programa.TIF.RAS) Tono contínuo SciTex (*.GIF) Computer Graphics Metafile (*.TUB) PC Paint (*. 1 Pincha en la herramienta Marco rectangular de la barra de herramientas principal. *.. Si tienes una imagen en tu lienzo.7 millones de colores.CDR) Dibujo Ventura/GEM (*. Suelta el botón del ratón y la selección aparecerá rodeada con una línea discontinua que parpadea. Pulsa aceptar cuando la hayas encontrado. El contenido del recuadro de la selección aparecerá dentro. pero es muy importante saber cuál se adapta mejor a cada situación y al tiempo disponible. *.CGM) Corel Clipart (*. Selecciona la opción Abrir del menú Archivo y búscala en el disco duro. Habrás creado un nuevo documento con las medidas exactas de la selección que has hecho.PFR. Cambia las cifras que muestran la cantidad de píxeles que tiene el lienzo.IMG) Kodak Photo CD (*.LBM) Dibujo Corel Draw (*. Para seleccionar lo que realmente te disgusta o lo que más te interesa y modificarlo a tu gusto. Accede al menú edición de la barra de herramientas superior.PSP.PNG) Portable Pixelmap (*.PGM) Portable Network Graphics (*. todavía puedes ampliar o reducir el tamaño del lienzo. Algunas son más precisas que otras. En documentos Si la imagen se queda pequeña para tus necesidades.PCD) Lenguaje gráfico HP (*. Elige 16.JPEG) Compuserve Graphics Interchange (*. En este caso.0\Muestras\. Si no había nada en el lienzo.WPG) Micrografx Draw (*.PPM) PostScript Encapsulado (*. *.RGB. Es recomendable elegir una cantidad alta de colores.WMF) Autodesk Drawing Interchange (*. En Photoshop 7.PIC) Photoshop (*. Varía las can- 4 Formatos admitidos por Paint Shop Pro 7 Amiga iff (*. desplaza el puntero hasta que el recipiente del ejemplo esté dentro del recuadro.MAC) Mapa de bits Portátil (*.DRW) Microsoft Paint (*. *. C:\Archivos de Programa\Adobe\Photoshop 7. Las capas contienen los elementos que colocas dentro del lienzo.TIFF) Windows Enhanced Meta (*. Resumiendo.FPX) GEM Paint (*. Selecciona la opción agrandar del menú Imagen que se encuentra en la barra de herramientas superior.dxf) Compatible con JPEG y JFIF (*.EPS.

Curso
do. Otro método, mucho más rápido, de quedarte con una zona rectangular de la imagen y deshechar el resto, es la herramienta recortar. Selecciónala en la barra de herramientas, pulsa y arrastra en un punto inicial de la imagen, Suelta el botón y una vez que tengas dentro del rectángulo el área elegida, haz doble clik en el interior de la selección.

Resumiendo...
1 Abrir menú Archivo 3 Buscar imagen 3 Pulsar aceptar 3 Utilizar
zoom.

2 Pinchar en Marco rectangular 3 Seleccionar el área rectangular. 3 Copiar 3 Crear documento. 4 Pegar nueva capa.

2 Paint Shop Pro
Acerca la imagen con la herramienta zoom. Pincha en la herramienta lazo de la barra principal. El cursor se transformará en la herramienta que has seleccionado. Haz

1

al punto de inicio, deja de apretar el botón y comprueba que la línea de selección se corresponde con el objeto que deseas. Una vez que has hecho la selección, siempre puedes añadir o quitar zonas al contorno que has dibujado. Incluso puedes crear agujeros y zonas independientes dentro de una imagen. Para poner

2

un ejemplo, vamos a eliminar el trozo de tallo y a añadir el tallo verde de la zona superior. Pulsa la tecla Alt y sin soltarla, comprueba que junto al puntero del ratón ha aparecido un símbolo menos. Esto quiere decir que el contorno que definas con la herramienta se restará del que ya tengas seleccionado. Rodea el tallo del centro de la misma forma que lo has hecho con el tomate en el paso anterior. Cuando termines, verás que hay una nueva línea discontinua dentro de la anterior. Ahora la selección comprende sólo la zona roja del tomate.

Pulsa cualquiera de las dos teclas de Mayúsculas que hay en el teclado. Sin soltarla, rodea el tallo verde que está encima del tomate. Suelta primero el botón del ratón y después la tecla mayúscula. El tallo ya forma parte de la selección.

3

Resumiendo...
1 Hacer zoom 3 Seleccionar lazo 3 Seguir contorno 3 Soltar botón. 2 Pulsar Alt 3 Rodear el tallo. click con el botón izquierdo e intenta seguir el contorno de una de las piezas que aparecen en la imagen sin levantar el dedo. Cuando hayas llegado 3 Pulsar Mayúsculas 3 Rodear el tallo 3 Soltar botón del ratón 3 Soltar
mayúsculas.

Uso de la máscara rápida
Photoshop
El modo máscara rápida que ofrece Photoshop permite utilizar las herramientas típicas del dibujo, como pinceles, para crear selecciones. Se trata de una forma rápida y sencilla de hacer que los bordes de las áreas seleccionadas sean más suaves o que ofrezcan un estilo más natural y perfecto. Crea una selección en Photoshop con cualquiera de las herramientas especiales de la barra principal y el método explicado en pasos anteriores. Selecciona el botón Máscara rápida que se encuentra en la zona inferior de la caja de herramientas principal. Comprueba que la zona seleccionada anteriormente, es la única que conserva los colores originales. El resto, muestra un tono rojizo, que indica que no está dentro de la selección. Cualquier acción que realices con las herramientas de dibujo, hará que varíe la selección actual. Un buen ejemplo es el pincel, que permite dibujar selecciones y aprovechar sus posibilidades de grosor, trasparencia o dureza. Con el borrador, se puede eliminar la selección, algo también muy útil y rápido. Pulsa el botón Editar modo estándar, que se encuentra junto al de Máscara rápida. Así volverás a la situación original con las áreas seleccionadas delimitadas por líneas discontínuas. Ahora, ajustaremos

que deseas seleccionar, lo haces con la que quieres eliminar. Para cambiar las propiedades de la imagen que indica la máscara, haz doble click en el botón máscara rápida y aparecerá una ventana de opciones. Elige ahí, el color que tendrán las áreas que quedarán en la zona de máscara, el de las seleccionadas y la transparencia. Pulsa Ok. un poco las selección, haz click en la herramienta pincel de la barra principal, y pinta el borde de la imagen hasta que toda la zona que deseas delimitar esté libre de color. El método de trabajo es mucho más sencillo si en lugar de pintar la zona

1

Resumiendo...
1 Crear una selección 3 Seleccionar Máscara rápida. 2 Pulsar Editar modo estándar de la máscara rápida 3 Seleccionar
herramienta pincel 3 Elegir las opciones de la máscara rápida 3 Pintar las zonas que delimitan la selección.

2
64

www.pctoday.es

Curso

Selecciona más rápidamente
Photoshop
Una de las herramientas más avanzadas de Photoshop 7 es el filtro Extraer. Éste permite seleccionar perfiles y zonas de una imagen que, de otra forma, requerirían mucho trabajo y paciencia. Te mostramos cómo seleccionar el fondo de una imagen, para poder eliminarlo o sustituirlo por otro. Es aconsejable que elijas una fotografía que contenga una silueta bien definida, por ejemplo, la del águila que se encuentra entre las muestras de Photoshop, aguila.psd. Selecciona la opción Extraer del menú Filtro que se encuentra en la barra de herramientas superior. Pulsa en la herramienta Resaltador de bordes que se encuentra en la barra de la izquierda, o la tecla B del teclado, para activarla. En la sección Opciones de herramienta, que se encuentra a la derecha de la ventana, elige el tamaño 15 de pincel. Con el botón izquierdo del ratón, pulsa y arrastra el cursor alrededor de la figura que deseas seleccionar, como muestra la

Atajos de teclado
La mayoría de las acciones que se realizan con el ratón, tanto en Photoshop como Paint Shop Pro, se pueden acelerar mediante el uso del teclado. La pulsación de algunas combinaciones de teclas, no sólo ahorran tiempo, sino que enriquecen los resultados, ya que permiten acciones más complejas. Algunas de las más utilizadas durante el curso són: Ctrl + N – Nuevo documento. Ctrl + O – Abrir documento. Ctrl + S – Guardar documento. Ctrl + C – Copiar. Ctrl + V – Pegar. Ctrl + X – Cortar. Mayus + Herramienta selección – Añadir a la selección. Alt + Herramienta selección – Restar a la selección. Ctrl + Z – Deshacer acción. s

2

1

combinación de teclas Ctrl+Z o elige Deshacer del menú Edición de la barra superior. Cuanto más estrecha y ajustada sea la línea trazada, más precisa será la operación y la selección saldrá mejor. También puedes activar la casilla resaltado suavizado para que la línea se ajuste sola. imagen. Si deseas que el color sea diferente y que se distinga mejor del fondo, cámbialo en la sección resaltar. Puedes dejar de hacer click en cualquier momento y retomar el trazado después, la nueva línea se añadirá a la anterior. Si te equivocas, utiliza la Selecciona la herramienta relleno en la columna de la izquierda, que está representada por un bote de pintura. Elige un color para el trazado y

3

para el fondo, que se diferencie bien del resto de colores de la imagen, con los botones Resaltar y Rellenar. Pincha en la zona que deseas conservar de la imagen y pulsa en el botón previsualizar. Pulsa el botón aceptar si estás de acuerdo y podrás ver la imagen libre del fondo y lista para continuar con la siguiente entrega del curso. s

Resumiendo...
1 Abrir imagen 3 Seleccionar filtro Extraer 3 Pulsar la tecla B. 2 Elegir tamaño pincel 15 3 Pulsar y arrastrar. 3 Seleccionar la herramienta relleno 3 Elegir colores 3 Pulsar en la
zona a conservar 3 Previsualizar 3 Aceptar.

The GIMP, la alternativa gratuita
Las herramientas que utilizaherramienta predilecta para remos durante el curso, no este tipo de trabajo. son las únicas disponibles. Respecto a los formatos gráJunto a desarrollos de granficos que acepta, incluye los des compañías de software, más habituales como PSD de también se pueden encontrar Photoshop, aunque éste sólo buenos programas gratuitos para adquirir datos. Es capaz como the GIMP, de crear animaciones en forwww.gimp.org. Es un programato MPEG y los habituales ma que no para de mejorar, GIF o PNG de cara a Internet. gracias a su código abierto y En cuanto a las caracterísque cualquiera puede modifiticas y herramientas de edicar con total libertad. ción, admite capas y canales Además, ofrece versiones, filalfa para trabajos avanzados. tros y complementos nuevos Todo esto, con unos requisicada pocos días. Otro punto The GIMP, www.gimp.org, utiliza ventanas flotantes tos que no exigen una a su favor es que no sólo se para mostrar todos los elementos del programa. máquina demasiado potente limita al sistema Windows o o moderna, a partir de edición en castellano y en otras lenMac, sino que está disponible también Windows 98 y 64 Mb de RAM. guas diferentes al omnipresente para Linux y otros sistemas operativos También puedes encontrar el prograinglés. Esto es fruto del trabajo de menos habituales. Es muy importante, miles de entusiastas que lo consideran ma en www.softonic.com, con una pequeña explicación de cómo descardestacar que al poco tiempo de lanel mejor software para la edición de garlo, totalmente en castellano. s zarse una nueva versión, aparece su imagen. Éstos lo han convertido en su

Formatos admitidos por Photoshop 7 Photoshop (*.PSD, PDD) Archivo PICT (*.PCT, *.PICT) BMP (*.BMP, *.RLE, *.DIB) Compuserve GIF (*.GIF) Photoshop Encasulated PostScript (*.EPS) Photoshop DCS 1.0 (*.EPS) Photoshop DCS 2.0 (*.EPS) Filmstrip (*.FLM) JPEG (*.JPG, *.JPEG, *.JPE) Mapa de bits inalámbrico (*.WBMP, *.WBM) PDF genérico (*.PDF, *.PDP, *.AI) EPS genérico (*.AI3, *.AI4, *.AI5, *.AI6, *. AI7, *. AI8, *. PS, *.EPS) PCX (*.PCX) Photoshop PDF (*.PDF, *.PDP) Retocar imagen de Acrobat (*.PDF, *.AI, *.PDP) Photo CD de Kodak (*.PCD) Pixar (*.PXR) PNG (*.PNG) RAW (*.RAW) Scitex (*.SCT) Targa (*.TGA, *.VDA, *.ICB, *.VST) TIFF (*.TIF)

Nº 94

65

Curso

Corrige tus fotos
Tanto Photoshop como Paint Shop Pro son poderosas aplicaciones que permiten realizar sorprendentes efectos visuales, pero además ambos poseen excelentes herramientas para el control de la imagen, con las cuales podrás mejorar notablemente el aspecto de tus fotografías digitales.

Guía del curso
1. Introducción al retoque fotográfico.
Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. Conceptos básicos. Selecciones sencillas. Máscara rápida. Extraer. The GIMP. PC Today nº 94

L

2. Corrige el aspecto general de tus fotos.
Brillo y contraste, capas de ajuste, tono, exposición y color. PC Today nº 95

3. Técnicas de reparación de fotos (I).
Reparar manchas y texturas, corregir polvo y rascaduras, eliminar el moiré. PC Today nº 96

4. Técnicas de reparación de fotos (II).
Eliminar arañazos rectos, borrar elementos no deseados, minimizar manchas. PC Today nº 97

5. Recreando fotos creativamente.
Fondos personalizados, bordes y marcos creativos, modificar personajes. PC Today nº 98

6. Embellecer y refinar retratos.
Eliminar defectos de la piel, enfoque suavizado, disimular el paso del tiempo, mejorar los retratos con luz. PC Today nº 99

a mayoría de los usuarios que han probado alguna vez Photoshop o Paint Shop Pro, seguramente han jugueteado a intentar hacer montajes fotográficos (por ejemplo, reemplazar un personaje por otro, eliminar algún elemento no deseado, etc.). Son características espectaculares que hoy en día están al alcance de cualquier persona con un ordenador y un poco de habilidad. Pero muchos pasan por alto algunas funciones muy sencillas de ambos programas, con las cuales es posible mejorar notablemente el aspecto general de las fotografías, tanto de las tomadas digitalmente como las escaneadas del papel.

La sutileza al iluminar una foto, puede crear un clima y una atmósfera muy particular; una composición sosa o sin interés, puede transformarse en una imagen hermosa, en un placer para la vista, con una correcta iluminación. La disposición de los elementos de una imagen también se puede modificar ligeramente, sin que se note, para corregir los efectos de la improvisación o la falta de tiempo cuando hiciste una foto. En este capítulo del curso de Fotografía Digital aprenderás a utilizar estas sencillas herramientas, pero sobre todo a entrenar tu ojo y tu buen gusto para conseguir los mejores resultados en las fotos digitales. s

54

www.pctoday.es

Retoque fotográfico. Parte 2ª

Trabajar con brillo y contraste
Si ajustamos correctamente los niveles de brillo y contraste, podemos mejorar de un modo notable el nivel de detalle y nitidez de cualquier fotogafía. Son parámetros que afectan radicalmente a la calidad de cualquier imagen. Incluso pueden "salvar" algunas fotografías tomadas en malas condiciones, como interiores con escasa iluminación, o contraluces al aire libre. Antes de conocer su funcionamiento, es importante definir claramente qué significan: • Brillo: Es la luminosidad u oscuridad relativa al color, y se mide habitualmente mediante un porcentaje comprendido entre 0 (negro) y 100 (blanco). • Contraste: Es el ajuste de las luces y las sombras de la imagen. Los píxeles más claros y los más oscuros, se convierten a blanco y a negro, respectivamente; así mejora notablemente el aspecto de imágenes fotográficas.

Consejo
En Photoshop 7, los valores de brillo y contraste pueden funcionar de manera automática, con el uso de parámetros estandarizados. Para ello vé al menú Imagen, selecciona Ajustes y abre Niveles Automáticos (o pulsa el atajo de teclado Mayús.+Ctrl+L). Ten en cuenta que esta característica, al ser "estandarizada", funciona de manera similar sobre todas las imágenes, con lo que no siempre obtendrás unos resultados óptimos. Si no estás seguro de haber obtenido un buen resultado con Niveles Automáticos, mejor utiliza Brillo y Contraste manualmente, según tu propio criterio.

cación Previsualizar para ver cómo afectarán los cambios introducidos a la imagen final. Intenta que la imagen sea nítida, con un buen contraste, y que se observen los detalles con gran claridad.

4

Haz click en el botón Aceptar para que los cambios se apliquen a tu fotografía.

Para modificar los valores de Luminosidad y Porcentaje de contraste, introduce la cantidad directamente en la casilla correspondiente, pulsa en las flechas hacia arriba o hacia abajo o despliega el menú representado por los triángulos y eli-

3

con algo de tiempo y práctica conseguirás resultados cada vez mejores.

Photoshop

Paint Shop Pro
Desde el menú Archivo, selecciona Abrir. Luego elige una imagen, selecciónala, y haz click en el botón Abrir.

1
Existe un ejemplo muy sencillo de aplicación de brillo y contraste en la vida cotidiana: el control de iluminación del televisor. Ambos parámetros se ajustan en forma independiente, pero se aplican con la misma intensidad en toda la imagen. Los controles de brillo y contraste trabajan con cualquier modo de color, pero para el siguiente ejemplo práctico, es recomendable que utilices alguna foto que encuentres, en blanco y negro (escala de grises), o incluso alguna instantánea que consideres muy oscura, para comprender mejor su funcionamiento. En ambos casos, observa la imagen detenidamente, e intenta conseguir un equilibrio entre las zonas iluminadas y las más oscuras; los blancos no deben estar sobreexpuestos (exceso de luz), ni las zonas oscuras deben aparecer como grandes manchas totalmente negras. Lo ideal es conseguir el mayor nivel de detalle y "suavidad" posibles en la foto. Experimenta y entrena tu ojo,

En el menú Archivo, selecciona Abrir y escoje la imagen de tu disco duro o CD. Haz click en Abrir.

1

ge una de las cifras de la barra que aparecerá. Puedes ampliar o reducir el área que quieras visualizar para poder observar los detalles que tú prefieras. También puedes pulsar en la flecha que se encuentra a la izquierda del icono del ojo y, así, verificar los cambios que se produzcan en la fotografía, de forma automática. Haz click en el botón Aceptar de la zona inferior para aplicar las modificaciones que hayas elegido en el paso anterior.

Abre el cuadro Brillo y Contraste desde el menú Imagen, luego elige Ajustes y finalmente selecciona el apartado Brillo y Contraste. Se abrirá el cuadro de diálogo.

2

Accede al menú Colores de la barra de herramientas superior. Despliega las opciones que cuelgan de la sección Ajustar. Luego selecciona Luminosidad/Constraste (o pulsa la combinación de teclas Mayúsculas+B); se abrirá un cuadro de diálogo.

2

4

v

Resumiendo...
Photoshop
Una vez en la nueva ventana, desplaza ambos reguladores hacia la derecha, cada uno en forma independiente (también puedes teclear los valores); marca la casilla de verifi-

3

1 Abrir menú Archivo 3 Seleccionar imagen 2 Ir al Menú Imagen 3 Seleccionar Ajustes 3 Abrir Brillo y Contraste 3 Mover los dos reguladores hacia la derecha 3 Previsualizar 4 Click en Aceptar para aplicar los cambios

Paint Shop Pro
1 Elegir Ir al Menú Archivo 3 Escoger Abrir 3 Seleccionar fotografía 3
Abrir

2 Ir al Menú Colores 3 Escoger Ajustar 3 Luminosidad y Contraste 3 Aumentar la luminosidad haciendo click en las flechas 4 Click en Aceptar para aplicar los cambios

Nº 95

55

En la solapa General. patrones o degradados. y selecciona Luminosidad / Contraste. sin preocuparnos por estropear el resto. la capa queda 4 Ir al menú Ventana 3 Elegir Capas 3 Observar Capa de Ajuste 5 Modificar opacidad de la capa buscando nitidez 4 Paint Shop Pro 1 Ir al Menú Capas 3 Nueva Capa de Ajuste 3 Luminosidad/Contraste 2 Nombrar Capa 3 Opacidad 100% 3 Aumentar Luminosidad 3 Click en Aceptar 4 Ir a la Paleta Capas 3 Reducir la opacidad de la Capa 56 www. a través del cual podemos ver las capas inferiores. editar y modificarl el texto. Tu misión siempre es conseguir una imagen que no sea borrosa.es . Tras verificar los cambios pulsa el botón Aceptar. y no a la imagen “real”. En la solapa Ajuste del mismo cuadro de diálogo. saturación. Abre el menú Ventana. Es posible mover los objetos que se encuentran en cada capa. Los cambios se aplican sólo a la capa de ajuste y afectan a la capa subyacente. Más adelante aprenderás a utilizar las capas de ajuste combinadas con los modos de fusión. Este procedimiento es muy útil para comparar cómo era la imagen antes de los cambios. Lo que estaba abajo puede moverse arriba. o cambiar el orden de apilado. moviendo el regulador (desplazando el regulador a la derecha. selecciona Nueva capa de ajuste y finalmente elige Brillo / Contraste. Tono y Saturación. de tal manera que si se trabaja sobre una de ellas. como Niveles. Cuando hayas conseguido que la imagen sea lo suficientemente nítida. elige Nueva capa de ajuste. Aplicar variables simples como brillo y contraste (o algunas más complejas como niveles. etcétera. En la Paleta Capas observa la capa de ajuste que has creado. y obtendrás cada vez más herramientas para retocar y corregir tus fotos digitales. Equilibrio de Color. etc. que pueden apilarse unas sobre otras. podemos eliminar cuando queramos la capa de ajuste. modifica los parámetros de Luminosidad y Constraste moviendo los reguladores. opacidad 100%). 3 4 2 • Capas vectoriales: Permiten crear trazados y formas vectoriales. • Capas de relleno: En éstas se pueden aplicar motivos. Evita contrastar demasiado la imagen. Se abrirá el mismo cuadro de diálogo de Brillo y Constraste que ya conoces. Puedes modificar su opacidad. En otras palabras. ya que los cambios son aplicados sólo a la capa elegida. y cómo ha quedado después de los cambios. pulsa en Aceptar para aplicar los cambios a la fotografía. Consejo Las capas de ajuste pueden modificar también otras variables. Si haces click en el icono del ojo. Si la opacidad está por ejemplo al 50%. momentáneamente oculta. Photoshop 1 Abre el menú Capa.pctoday. Modifica la opacidad de la capa de ajuste.. sin necesidad de modificar sus píxeles constantemente. o bien modificar los valo- Paint Shop Pro 1 2 Ve al menú Capas. De esta manera. Céntrate en la claridad de los detalles. En Photoshop y Paint Shop Pro puedes encontrar varios tipos de capas: • Capas de texto: Permiten escribir. • Capas de ajuste: Son las que más nos interesan para manipular fotografías digitalmente. Mueve los reguladores hacia la derecha buscando la mayor nitidez posi- 3 Se abrirá la ventana Propiedades de capa. pon un nombre a la capa. Intenta conseguir siempre una imagen nítida y pura. y minimiza el margen de error. Cada una de esas capas es independiente. Opacidad 100%. gozamos de una enorme libertad para retocarlos o reubicarlos.Curso Utilizar capas de ajuste Antes que nada: ¿Qué son las capas y cómo se utilizan? Las capas funcionan como si fueran hojas transparentes. la casilla de verificación. moviendo el regulador que aparece en el sector derecho de la ventana. tono. o viceversa. y moviéndolo hacia la izquierda los cambios serán más leves). res que hemos ingresado si el aspecto general no es satisfactorio. nos dan la posibilidad de experimentar con variaciones de tono y de color. la capa de ajuste funciona como un "filtro". Curvas. los cambios serán mas intensos. deja el Modo de Mezcla en Normal. el resto de capas no se modifican. ya que puede pixelarse y perder sutileza.. en lugar de efectuar cada retoque por separado. Las capas de ajuste afectan a todas las capas ubicadas debajo. y elige Capas para observar la capa de ajuste que has creado. Al tener aislados los distintos elementos que componen una imagen.) mediante las capas de ajuste. y tilda Resumiendo. Photoshop 1 Ir al Menú Capa 3 Nueva Capa de Ajuste 3 Elegir Brillo y Contraste 2 Nombrar la nueva Capa 3 Dejar valores por defecto 3 Aceptar 3 Mover reguladores hacia la derecha 3 Verificar cambios 3 Aceptar ble en la imagen. Las capas de ajuste permiten modificar la información de color de los píxeles ubicados por debajo de ellas. pero el resultado de este trabajo será distinto ya que lo aplicarás a una Capa de Ajuste. y podrás ver la imagen sin los cambios que has aplicado. algo súmamente útil ya que podemos corregir varias capas a la vez con un solo ajuste. los ajustes de brillo y contraste se reducirán y serán más leves. Corrección selectiva. otorga un mayor control. 5 Ponle un nombre a la nueva capa (por ejemplo “Brillo Nuevo”) y deja el resto de valores exactamente igual que como aparecen por defecto (modo normal.

En la línea diagonal (aparece por defecto) todos los pixeles tienen los mismos valores de entrada y salida. las sombras ahora son más oscuras. haz click en el punto de control y sin soltar el botón izquierdo desplázalo hacia abajo. haz click en una zona inferior de la diagonal. Photoshop 1 Ir al Menú Imagen 3 Seleccionar Ajustes 3 Abrir Curvas 2 Hacer Ctrl + click en zonas claras 3 Mover punto de control para aclarar aún más 3 Observar cambios Curvas. 4 Modo Curva / Modo Mapa Arbitrario: con ellos puedes 5 6 7 8 9 cambiar entre los distintos modos de trabajo con curvas. La herramienta Curvas puede ajustar la gama de tonos de una imagen. 3 Entrada / Salida: permite ver los valores de entrada y de salida del punto de la curva. El cuadro de diálogo curvas 4 Photoshop Abre el menú Imagen. y las luces más claras. cogidas por los manejadores. En el cuadro de diálogo Curvas. de manera que necesite mas iluminación. sin soltar el botón izquierdo del ratón. Las sombras deben haberse oscurecido. 2 la corrección de brillo y contraste a un canal determinado. Parte 2ª El tono. luces. y escala de grises: muestrea los tres valores a partir de la imagen. Punto blanco. de manera que la fotografía está más contrastada y tiene mejor definición. Observa los cambios en la fotografía. y el vertical. Luego haz otro click en una zona superior de la misma diagonal. Ésta nos permite controlar cada una de las 256 sombras en forma independiente.Retoque fotográfico. los nuevos valores de luminosidad (de salida). De esta manera se consigue un control aún mayor que con la herramienta Niveles. negro. y sin soltar el botón izquierdo del ratón muévelo hacia arriba para aclarar las luces de la foto. Muy útil en el modo Mapa Arbitrario. consiguiendo una mejor nitidez y mayor contraste en la imagen. y las luces deben ser más claras. para luego aplicarla en otra imagen. modificando cualquier punto de la escala tonal entre 0 y 255. agregando otra marca. haz click en el punto de control que acabas de crear. las curvas y el contraste Photoshop y Paint Shop Pro cuentan con un arma aún más poderosa para modificar los ajustes de brillo y contraste de una imagen: la herramienta Curvas. ya que ésta trabaja solamente en tres variables. 2 Gráfico de curva: el eje horizontal representa los valores de luminosidad originales (de entrada). Como resultado. Previsualizar: muestra el resultado parcial del efecto de nuestros cambios. Cargar / Guardar: carga o guarda una configuración de curvas. sombras y medios tonos.. Finalmente elige Curvas. Nuevamente añadirás otro punto de control al gráfico. para oscurecer las sombras. 3 Mover marcas para formar una S 4 Click en O j o para ver modificaciones 3 Aceptar Nº 95 57 . A continuación Mueve ambas marcas en forma independiente (primero una. 2 Pulsa el icono que representa un ojo para ver cómo afectan los cambios a la imagen. Pulsa Ctrl y haz click click en un área oscura que necesites ens o m b r e c e r. v Resumiendo. despliega el submenú Ajustes y luego elige Curvas (o si prefieres pulsa el atajo de teclado Ctrl + M). Finalmente haz click en Aceptar cuando el equilibrio entre las lu- 4 ces y las sombras sea parejo. Auto: el programa realiza los ajustes automáticamente. para dejar una marca en ella. Para mover las marcas debes hacer 3 3 Ctrl + click en zonas oscuras 3 Mover punto de control para oscurecer aún más 3 Observar cambios 3 4 Click en Aceptar para aplicar los cambios Paint Shop Pro 1 Ir al Menú Colores 3 Seleccionar Ajustar 3 Abrir Curvas 2 Click dos veces la diagonal 3 Dejar dos marcas click en ellas y luego arrastrarlas. Pulsa Aceptar. conseguirás que la línea recta se curve formando una S. 1 1 Canal: con él puedes restringir Paint Shop Pro 1 Pulsa Ctrl y haz click simultáneamente en un área clara de la imagen que veas opaca. Esto añadirá automáticamente una marca (llamada punto de control) en el gráfico de Curvas. a medida que los vamos realizando.. En el cuadro de diálogo Dirígete al menú Colores y selecciona la opción Ajustar. Suavizar: permite suavizar la curva creada. y luego la otra).

varía su opacidad del 100% al 70% desplazando el regulador hacia 5 Resumiendo. ya sea con una cámara tradicional o con una digital. selecciona el color Gris 50% haciendo click en la muestra. pueden dañar tus viejas fotografías en papel. Selecciona toda la superficie del lienzo de la nueva capa. escanea siempre el negativo. Busca y selecciona Subexponer Color. el paso del tiempo. Sitúa el puntero del ratón sobre las muestras. para ello te dirígete al menú Selección y elige Todo (o la combinación de teclas Ctrl + A). 2 4 Photoshop Ve al menú Capa. 4 Consejo Si deseas mejorar alguna vieja foto impresa en papel. Photoshop 1 Ir al Menú Capa 3 Crear N u e va Capa 3 Ponerle nombre 2 Paleta Muestras 3 Seleccionar Gris 50% 3 Ctrl + A para seleccionar todo el lienzo 3 Ir al menú Edición 3 Rellenar capa con Gris 4 Cambiar Modo de Fusión 3 Subexponer Color la izquierda. para rellenar automática- mente la capa de color gris. te has quedado decepcionado con el resultado. selecciona el Gris al 50%. ni demasiado oscura). Unas líneas punteadas rodearán toda la superficie de la imagen. Puede que hayas tomado fotografías en condiciones forzadas. escribiéndolo en el mismo cuadro de diálogo. En el cuadro de diálogo Rellenar. Demasiada luz u oscuridad han arruinado tus fotos. haz click en el icono de la esquina superior izquierda. de manera que quede impreso. Siempre es conveniente comenzar a trabajar con una fotografía bien expuesta. 1 Sin salir del mismo cuadro de diálogo. estando equilibrados los tonos oscuros y los tonos claros. Por eso siempre es bueno conservar los negativos. Busca y selecciona la opción Sombra. Haz click en Aceptar para validar los cambios. En fotografía tradicional. para crear una nueva Capa. En la Paleta Colores. Ve a la Barra de Herramientas.es . los recuerdos imborrables de tu vida se desvanecen. También.. o tecleando los valores. Como consecuencia. y selecciona la capa que has creado haciendo click en su nombre: “Capa para oscurecer”. es posible mejorar o corregir muchos de estos problemas de exposición con las herramientas adecuadas. o el clima puede resultar adverso. mostrándote toda el área seleccionada.. Esto oscurecerá la imagen de un modo muy pronunciado. Nombra la nueva Capa como “Capa para oscurecer”. las pilas de la cámara se agotan. Incluso un negativo extremadamente sobreexpuesto o subexpuesto. Esto se debe a problemas en la exposición. Ahora haz click en cualquier punto de la imagen (recuerda que estás trabajando sobre la nueva capa que has creado). además de las impresiones fotográficas. El resto de opciones no son importantes en este momento y las dejaremos como están. selecciona Nueva Capa (te interesa ponerle un nombre para identificarla. y selecciona el Bote de Pintura. ya que con él obtendrás mejores resultados (muchos escáneres actualmente cuentan con esta utilidad de serie). completa las modificaciones de la opacidad inroduciendo el número 70 en la casilla correspondiente. La imagen debe haber mejorado notablemente. nómbrala por ejemplo “Capa para oscurecer”). Sin salir de la ventana actual. Cuando recibe demasiada luz.pctoday. y cuando es demasiado oscura está subexpuesta. 1 3 Ir a Paleta Colores 3 Seleccionar Gris 50% 4 Seleccionar Bote de Pintura 3 Click en la imagen 3 Rellenar la capa con gris 58 www. Paint Shop Pro En la paleta Capas. en el Modo de Fusión. se dice que está sobreexpuesta. o la humedad. sin embargo a veces el fotómetro puede fallar. o bien que por alguna razón no se haya encendido el flash en el momento de la instantánea. y un menú emergente te informará del valor de cada color. 3 3 En la misma ventana de Propiedades de la Capa. La imagen ahora debe tener una correcta exposición (no debe estar demasiado iluminada. Aunque la tecnología no suele hacer milagros. la luz solar.Curso Corregir y mejorar la exposición Más de una vez te debe haber sucedido que después de sacar una gran cantidad de fotos de momentos irrepetibles de tu vida. como un contraluz. abre el menú contextual. Ve a la paleta Capas. siempre contendrá más información y detalles que la copia que hayas hecho en papel. Finalmente rellena la nueva capa con el color Gris 50% del siguiente modo: ve al menú Edición y selecciona Rellenar. selecciona Color Frontal. la exposición es el tiempo que debe permanecer a la luz una placa fotográfica o un papel sensible. abre el menú desplegable Modo de Mezcla. Cuando halles el Gris 50% seleccionalo haciendo click. en el apartado Opacidad. 5 Ir a Paleta Capas 3 Seleccionar Capa 3 Reducir Opacidad al 70% Paint Shop Pro 1 Ir a Paleta Capas 3 Click en icono para Crear Nueva Capa 3 Nombrar Capa 2 Abrir Modo de Mezcla 3 Seleccionar Sombra 3 Completar Opacidad: 70 3 A c e p t a r 2 En la paleta Muestras. y dispones además de su negativo.

1 Ve al menú Capas. ¿Te preguntas para qué sirve este “trabalenguas”? Pues para algo importantísimo: comprender esta relación opuesta. Otra alternativa es crear varias Capas de Ajustes. elige Nueva Capa de Ajuste. por ejemplo. con lo cual puedes eliminar la capa y crear una nueva. los colores de tu monitor son aditivos ya que utilizan la luz como fuente. Observa el resultado parcial en la fotografía que has modificado: de esta manera. claro está). elige Nueva Capa. etcétera) es un ejemplo de color sustractivo. agudizar la vista. Photoshop 1 Ir al Menú Capa 3 Crear nueva Capa de Niveles 3 Ver Histograma 2 Buscar zona blanca 3 Hacer click con cuentagotas blanco 3 Dominante de color eliminada 3 Aclarar los semitonos Paint Shop Pro 1 Menú Capas 3 Nueva Capa de Ajuste 3 Elegir Niveles 2 Elegir canal saturado 3 Click en ojo para ver cambios 3 Mover reguladores para quitar saturación 3 Aceptar Nº 95 59 . guir un efecto más acorde con tus intenciones. o en el icono de Gafas (en Paint Shop Pro). • Colores sustractivos: El color se determina por la absorción de la luz. se aclara moviéndolo hacia la derecha.Retoque fotográfico. desliza el pequeño triángulo correspondiente al medio tono gris. verás que aparece la solapa correspondiente a la sección Ajuste. Recuerda que puedes ocultar y mostrar cualquier capa pulsando en el icono del Ojo (en Photoshop).. Cuando la corrección de una fotografía mediante el uso de Capas de Ajuste comienza a complicarse. y seguramente encontrarás alguna foto que haya salido muy oscura. Pero para conseguir negros puros y sombras más intensas. Mediante la combinación de los colores primarios aditivos. En el menú correspondiente a las capas. y selecciona el apartado Niveles. Primero puedes hacerlo de forma drástica para ver el efecto y.. magenta y amarillo) se combinan. accede al menú Capa. crean el negro (com o muestra la imagen). seguramente podrás aplicar retoques y mejoras a tus fotografías con mucha más calidad. La superior representa los tonos del original. Si el resultado aún es una imagen algo oscura. El resultado: ¡una imagen con menos azul y mucha más calidad! Rebusca entre tus álbumes familiares. de manera que puedas comparar entre un resultado y otro. se obtienen los colores primarios sustractivos. Cuando la foto luzca colorida y brillante (los colores deben ser nítidos y bien diferenciados entre sí). se añade tinta negra en el proceso de impresión. después. y realizar paso a paso el siguiente ejemplo práctico para aprender a corregir tus fotos utilizando los Niveles: Paint Shop Pro muestra los cambios que se vayan produciendo mientras modificas los valores siguientes. Cuando los colores primarios se suman (de ahí el nombre de aditivo) crean el color blanco. Si comprendes profundamente los rudimentos del color y de la luz. 3 Photoshop Crea una nueva capa de Niveles: para ello. y selecciona Niveles. Recuerda que al trabajar solamente en una capa. si en una imagen predomina demasiado el color azul. el Histograma (el gráfico que muestra el cuadro de diálogo Niveles) se muestra muy cargado en la parte izquierda. Existen básicamente dos tipos de color: el aditivo. Por ejemplo. Debes observar detenidamente la gama de colores y utilizar el sentido común para decidir cuál elegir. no estás modificando los pixeles “reales” de la foto. Las barras de colores que se encuentran en la zona inferior de la pantalla sirven para mostrar las modificaciones que se producen en la zona seleccionada. Ten en cuenta que en el apartado Nivel de Entrada. mientras que la inferior lo hace con los nuevos valores que hayas aplicado. haz click s en el botón Aceptar. periódicos. con distintos niveles y variaciones cada una. sobre la zona potencial de blanco puro. los colores se aclaran si desplazas el regulador hacia la izquierda. dentro del mismo cuadro de diálogo) y con dicha herramienta haz click en la fotografía. y el siguiente Nivel de Salida. con algún color dominante. Por lo tanto. El amarillo neutraliza al azul ya que éste es su opuesto. y el sustractivo. o bien la más iluminada. en intervalos suaves para conse- 1 da de color. con pequeños incrementos hacia la izquierda. es importante que conozcas algunos fundamentos básicos de su mundo. • Colores aditivos: Se forman a partir de una fuente de luz. habrás eliminado la dominante de color. y combinando los primarios sustractivos se obtienen los primarios aditivos. Haz click en el icono que representa una flecha y un ojo para que a continuación se active la opción y que te 2 Consejo 2 Busca alguna zona de la foto que pudiera ser originalmente de blanco puro. hay que aumentar el amarillo (además de disminuir el azul. verde y azul dan por resultado el blanco. Si no has modificado la configuración por defecto del programa. 3 Resumiendo. Coge la herramienta Cuentagotas Blanco (el tercero cuentagotas de la derecha. Como la imagen está satura- Desplaza los reguladores hasta quitarle saturación al color. Observa la imagen en que la suma del rojo. Cuando los colores secundarios (cian. La impresión de tinta sobre papel (revistas. observa los canales de color y selecciona el que se encuentre más saturado. Ahora es cuestión de observar detenidamente la imagen. Parte 2ª Optimizar el color Seguramente la mayoría de tus fotos (tanto en papel como digitales) son a todo color. lo mejor es volver a empezar.

pctoday. Guía del curso 1.es . abuelos y demás ancestros. las posibilidades de los programas de retoque fotográfico hacen que este tipo de correcciones se pueda resolver en unos cuantos y sencillos pasos. Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. minimizar manchas. PC Today nº 99 uede que guardes aún muchas fotos familiares. A menudo suele ser un trabajo duro y fatigoso corregir este tipo de problemas en las viejas fotografías impresas en papel. The GIMP. Puedes salvarlas con tan sólo escanearlas y seguir los pasos que te mostramos. Conceptos básicos. reemplazando los viejos negativos por pequeñas tarjetas de memoria. Sólo habrá que aislar el problema y actuar con la herramienta más adecuada para cada situación. Reparar manchas y texturas. Técnicas de reparación de fotos (I). PC Today nº 94 P 2. El primer paso para salvarlas es digitalizarlas. Técnicas de reparación de fotos (II). PC Today nº 98 6. disimular el paso del tiempo. Eliminar arañazos rectos. PC Today nº 97 5. Para el siguiente paso te servirás de tres herramientas: Adobe Photoshop. decoloridas y llenas de polvo. PC Today nº 96 4. Jasc Paint Shop Pro… y PC Today. Selecciones sencillas. Extraer. Introducción al retoque fotográfico. Máscara rápida. capas de ajuste.Curso Técnicas de reparación Las actuales cámaras digitales permiten tomar instantáneas. Corrige el aspecto general de tus fotos. Embellecer y refinar retratos. Fondos personalizados. Sin embargo. con manchas de humedad. Brillo y contraste. 58 www. Eliminar defectos de la piel. corregir polvo y rascaduras. eliminar el moiré. cientos de instantáneas de tus padres. modificar personajes. mejorar los retratos con luz. Te mostraremos cómo solucionar los problemas de “limpieza” de cualquier foto que esté deteriorada. tono. Con la ayuda de un escáner es muy sencillo convertir esos frágiles trozos de papel o diapositivas en ficheros de nuestro ordenador. Recreando fotos creativamente. tampoco hay que olvidar que es posible que por diversas razones también las fotos tomadas con una cámara digital muestren defectos parecidos a los que aparecen en antiguas fotografías. Finalmente. enfoque suavizado. En ese caso el proceso de restauración es el mismo. PC Today nº 95 3. Pero es muy probable que tus viejas y más preciadas fotos (impresas en papel) estén dañadas por el paso del tiempo. bordes y marcos creativos. exposición y color. borrar elementos no deseados. Sin embargo es muy posible que las fotos estén sucias.

5 derecha y de arriba abajo. Son herramientas Dirígete una vez más a la Barra de Herramientas y escoje la herramienta Tampón de Clonar. árboles. utilizando el Navegador de Photoshop. luz y contraste. la reconocerás enseguida ya que es el icono de la lupa. A grandes rasgos. Luego desde la Barra de Propiedades. y marca la opción Alineado.) ceder a ella pulsando la letra Z. y elige Navegador para que se abra la paleta. Mientras pintas. objetos en primer plano. y comienza a pintar sobre el área dañada. amplía el área sobre la cual trabajarás. Puedes también ac- A continuación trabajarás en detalle. para trabajar en detalle: haz click con la lupa. Busca una zona de la foto en buen estado. para tomar una muestra de la imagen. desplázalo de izquierda a zando para pintar. cha o textura como marcas de dedos. y haz click en el icono de la lupa (herramienta 2 v Photoshop Desde el menú Archivo. imprescindibles a la hora de retocar cualquier fotografía. y sin soltar el botón del ratón. y desplazando sin soltar el Nº 96 59 . valores de brillo. y una cruz que indica la zona de muestra. Se dibujará un recuadro delimitador. Nos referimos al Pincel Corrector y el Tampón de Clonar (en Photoshop) y el Pincel de Copia (en Paint Shop Pro). Te mostrará una miniatura de la fotografía por la que podrás desplazarte moviendo el rectángulo rojo. Para ello. Flujo 100%. y pintar con ellas en un área distinta o incluso en otra imagen. Luego suelta la tecla Alt. Con la Herramienta Tampón haz click mientras presionas la tecla Alt.Retoque fotográfico. Haz click en Abrir. Luego escoge alguna fotografía manchada que hayas escaneado previamente. Amplía el área de la foto que vas a corregir. En cuanto al Pincel Corrector de Photoshop (incluído desde la versión 7). También puedes pulsar el atajo Ctrl + O para abir imágenes. Una vez abierta la imagen. y al soltar te habrás acercado al detalle como si hubieras colocado una lupa sobre esa zona. etcétera. Debes elegir zonas cercanas y similares (en cuanto a luz y textura) para que el retoque sea prácticamente impreceptible Desplázate por la imagen.. etcétera) y reproducirlas en la zona donde sea conveniente.. huellas. o bien pulsar el icono de la carpeta abierta en la Barra 1 de Herramientas Estándar. algunas de ellas podrían ser clasificadas como “mágicas”. en Modo selecciona Normal. Abre el menú Ventana. El funcionamiento de estas herramientas es similar. 2 Desde la Barra de Herramientas de Photoshop (suele encontrarse a la izquierda del área de trabajo) elige la Herramienta Zoom. Opacidad 100%. y las reproducirás sobre las partes dañadas. aunque cada una posee algunas características que las diferencian entre sí. Puedes utilizar estas técnicas para reparar detalles que no aparecen en la foto por otro tipo de problemas (mal encuadre. Tomarás muestras “sanas” de la imagen. en el menú desplegable elige Abrir. Intenta elegir alguna foto vieja. Ahora debes acercarte a la zona en donde se encuentra la mancha. Parte 3ª Reparar manchas y texturas Tanto Adobe Photoshop como Jasc Paint Shop Pro poseen una innumerable cantidad de herramientas para el retoque digital de fotografías. buscando zonas defectuosas. dirígete a la Paleta de Herramientas. haciendo click con la lupa. con éstas herramientas es posible tomar muestras de la imagen. piel. o que tengas almacenada en tu disco duro. que tenga alguna man- 1 Acercar). Sin embargo. Photoshop te muestra dos cursores: el que estás utili- 4 Paint Shop Pro Abre el menú Archivo. éste no solamente toma como fuente una muestra de la imagen. En el siguiente ejercicio aprenderás a eliminar una gran mancha utilizando algunas de las herramientas de clonación. ya que consiguen unos resultados increíblemente sorprendentes con una gran sencillez en su uso. sino que además compara la textura. selecciona Abrir y escoje la imagen que hayas escaneado en tu disco duro. realiza la siguiente configuración: despliega el menú Pincel y escoje un grosor 3 de 15 píxeles y bordes suavizados. De este modo podemos copiar zonas de texturas (como cielos. tejidos.

lo ideal es usar un paño limpio. El resto de solapas de la Paleta de Configuración. se han tomado muestras de la misma. selecciona Nueva. En la ventana que eparece. Paso 25. para usarlas en forma combinada. como regla general. se han utilizado como muestra partes “sanas” de la pared. 3 A continuación elige la herramienta Pincel de Copia desde la Paleta de Herramientas. Aunque muchas viejas fotos ya estan dañadas o sucias por el paso del tiemo. déjalas tal cual vienen por defecto. y del menú desplegable elige Capa. Tambien puedes pulsar el atajo de teclado Ma- 1 60 www.. es conveniente que utilices pinceles pequeños y trazos cortos para clonar. Haz click en Abrir. 2 Crea una nueva capa de la siguiente manera: dirígete al menú Capa. para trabajar con gran detalle. Photoshop En primer lugar abre el menú Archivo y selecciona la opción Abrir. utiliza una cifra menor para el tamaño del pincel. si mantienes limpio el cristal de tu escáner. Modifica el grosor del pincel desde la Paleta de Configuración.Curso botón del ratón. así conseguirás copiar texturas de una manera más fiel. Comienza a tomar muestras de zonas que no estén dañadas en la imagen. El trabajo de clonar y pintar con zonas clonadas requiere de mucha paciencia.. Debes tener bien claro algo muy importante para minimizar los problemas antes de tiempo: la limpieza de tu escáner.es . producirlas tapando la mancha. Para limpiar tu escáner sigue los consejos del manual del fabricante. para re- 4 Para corregir la mancha sobre la chupa de cuero. te permitirá trabajar con más detalle.pctoday. Una cifra cercana a 10 seguramente te servirá. para la parte superior del hombro. lo cual producirá que el efecto del truco sea muy visible. y sobre todo horas y horas de práctica para lograr resultados óptimos. En cualquier caso y dependiendo de la textura a corregir es posible que tengas que ajustar el grosor del pincel. ya que laz zonas son más intrincadas y poseen más detalle. Definición 70. Opacidad 100. Si estás trabajando con una foto muy pequeña. Por ejemplo. Tamaño 20. En la Paleta de Configuración. Jamás utilices sustancias abrasivas como limpiacristales o alcohol. Para ello pulsa mayúsculas mientras haces click en la zona elegida de la imagen. do un pincel mucho mas fino.. sino que se ha depositado a lo largo del tiempo sobre los negativos o en las copias de papel. lueta del pincel que has configurado. Al pasar el cursor corregirás los defectos. utilizan- 5 Resumiendo. escoje una imagen que se encuentre en tu disco duro o CD. y Densidad 100. completa con los siguientes parámetros: forma Redonda. lo ideal es conocer la mayoría de ellas. y que posean tonos y texturas similares a los dañados. o inclusive zonas con iluminación diferente. de acuerdo al problema particular de cada foto. te ahorarrás mucho tiempo en el posterior tratamiento digital que realices. y evitarás defectos como copiar zonas no deseadas. Photoshop 1 Archivo 3 Abrir 3 Seleccionar imagen 3 Abrir 2 Herrramienta Zoom 3 Hacer click y desplazar el cursor3 Ampliar zona defectuosa Paint Shop Pro 1 Menú Archivo 3 Abrir 3 Seleccionar fotografía 3 Abrir 2 Herramienta Acercar 3 Hacer cl i c k y desplazar 3 Ampliar zona defectuosa 3 Tampón de Clonar imagen 3 Ir a Barra de Propiedades 3 Configurar Ta m p ó n 3 Ir a Paleta de Herramientas 3 Elegir Pincel de Copia 3 Ir a Configuración 3 Definir parámetros del pincel 4 Click + Alt para tomar muestras válidas 3 Pintar sobre área dañada 5 Abrir Navegador 3 Desplazarse por la imagen 3 Seguir corrigiendo 4 Mayúsculas + Click para tomar muestras 3 Pintar zonas defectuosas 5 Paleta Configuración 3 Modificar grosor del pincel 3 Seguir corrigiendo Corregir polvo y rascaduras Existen muchas y muy variadas técnicas para eliminar el polvo y las manchas de las viejas fotos. que no forme pelusas. Una miniatura te mostrará la si- Consejo Tanto en Photoshop como en Paint Shop Pro. utilizándolo apenas humedecido con muy poco agua (nunca mojado). Recuerda que el polvo nunca se encuentra en los archivos digitales.

. sin soltar el botón del ratón. De esta manera aplicarás filtro fotográfico digital sobre el área que 4 marcas de polvo aún se ven. + Ctrl + N. así trabajarás con gran presición. vuelve a seleccionar la Herramienta Desenfocar (como en el 5 6 Hacer click sobre cada mancha 3 Pulsar más tiempo para desenfocar más Paint Shop Pro 1 Archivo 3 Seleccionar Imagen 3 Abrir 2 Paleta de Herramientas 3 Seleccionar Lupa 3 Acercar imagen 3 Paleta de Herramientas 3 Seleccionar Lazo 3 Realizar selección 4 Herramientas Foto 3 Seleccionar Quitar polvo 5 Tamaño de granos 3 3 Sensibilidad 5 3 Previsualizar 3 Aceptar Nº 96 61 . y elige la herramienta Zoom (puedes pulsar la tecla Z para seleccionarla). Cuanto más tiempo dejes pulsado el botón. y así desaparecerán las manchas de polvo. y desplazando sin soltar el botón del ratón. En el mismo cuadro de diálogo puedes ver un antes y un después de aplicar Quitar Polvo. Si las manchas de polvo son muy visibles aún. que se encuentra en la parte superior del área de trabajo. A continuación debes ampliar todo lo que puedas el área sobre la cual trabajarás. y desplazando el cursor 4 Paint Shop Pro 1 Desde el menú Archivo. intentando que el área corregida sea lo más homogénea posible. Ahora es el momento de trabajar directamente sobre las manchas de polvo. ajusta las variables de la 5 3 En el cuadro de diálogo Quitar Polvo haz lo siguiente: en Tamaño de los granos (pixeles) escribe 3. A continuación. 3 has seleccionado con la herramienta de lazo en el paso anterior. haciendo click con la lupa.Retoque fotográfico.. marca el apartado Acción Agresiva. Intensidad 100% y activa Usar todas las capas. Luego te desplázate con el cursor sobre la parte ampliada de la foto. y en la Barra de Propiedades despliega el menú Pincel y define el grosor (puedes escribir el tamaño. De esta manera podrás trabajar con mucha presición sobre las manchas. Ten en cuenta que de acuerdo a cada foto. deja todos los valores por defecto. ya que la imagen podría quedar con unas salpicaduras de desenfoque. rodeando el área defectuosa de la foto. Tómate tiempo para aprender esta técnica. y haces click en el botón Abrir. y selecciona la Herramienta Desenfocar (también puedes pulsar la tecla R). Eso que estás haciendo es realizar una selección. modifica los números y previsualiza el resultado. haz click sin soltar el botón en cada mancha. Debes encontrar el equilibrio justo entre un desenfoque sutil y uno exagerado. Con la Herramienta Desenfocar seleccionada. Acude al cuadro de herramientas. herramienta de la siguiente forma: Modo Normal. Parte 3ª yús. Photoshop 1 Archivo 3 Seleccionar Imagen 3 Abrir 2 Capa 3 Crear nueva Capa 3 Ponerle nombre 3 Aceptar 2 3 Seleccionar Herramienta Desenfocar 3 Configurar sus propiedades 4 Herramienta Zoom 3 Hacer cl i c k y desplazar 3 Ampliar área de corrección 5 Herramienta Desenfocar 3 Ir a Barra de Propiedades 3 Configurar tamaño de pincel Ahora debes configurar el tamaño del pincel. La clave es encontrar el punto justo del suavizado. Para ello. Si las Consejo desenfoque será mayor. En la Barra de Propiedades. 6 Manchas”). Realiza la tarea con paciencia. y haz click sobre el icono del ojo para observar el resultado parcial. Procura no desenfocar demasiado las manchas. Cuando el resultado sea satisfactorio. pulsa Aceptar para aplicar los cambios. Amplía el área de la foto que vas a corregir. ponle un nombre a la capa (por ejemplo “Corrección de paso 3). de manera que a continuación puedas trabajar solamente sobre dicha área. sin que se note ningún tipo de retoque ni corrección. y haz clicken el icono de la lupa (la herramienta se llama Acercar). ya que sólo requiere práctica y un buen ojo observador. En el cuadro de diálogo que se abrirá. la seleccionas. Luego elige una imagen. v Resumiendo. seleccionas Abrir (o pulsa la combinación Ctrl + O). para que coincida aproximadamente con el tamaño de las manchas. el En la Paleta de Herramientas. haciendo click con la lupa. y pulsa OK. Amplía el área de la foto que vas a corregir. Dirígete al Cuadro de Herramientas. haz click sobre el icono llamado Quitar Polvo. y realiza una selección a mano alzada. Procura adaptar el tamaño del pincel a cada mancha. dirígete a la Paleta de Herramientas. en lugar de las manchas de polvo. Para ello. elige la herramienta Lazo. en Sensibilidad 5. o desplazar el regulador). en la Barra de Herramientas Foto. las variables cambian por lo cual deberás probar con el viejo método de “ensayo y error” hasta obtener un buen resultado. mientras el resto de la foto queda intacto.

en algunos casos). Completa con los siguientes parámetros el cuadro de diálogo de tu escáner: Modo > Fotografía a color. dependiendo del software que utilices (habitualmente. En el cuadro de diálogo Máscara de Enfoque. notarás que la imagen ha quedado cubierta por unos molestos patrones de color. En el cuadro de diálogo llamado Mediana. Pónle el nombre que quieras a tu foto. completa los siguientes valores: Canti- 2 Después de escanear la foto. tipeando el número 300. este truco es para ti. las imágenes se conforman de unos muy pequeños puntos. Escalar: 100%. y selecciona Guardar para aplicar y conservar en un archivo los cambios que acabas de realizar en tu fotografía. debido a la separación de los cuatro Ahora abre el menú Filtro. Pue- 3 Vé al menú Efectos. el molesto efecto moiré. selecciona TWAIN y finalmente Adquirir para iniciar el proceso de digitalización. Se abrirá un cuadro de diálogo. Debes hacer click en la casilla Tamaño real / de impresión. y selecciona de la lista el Filtro Mediana. y abre el menú Archivo. y solamente modificar 4 Paint Shop Pro Coloca la foto en tu escáner. modifica solamente los siguientes valores: Resolución: tipea 300 (pixeles por pulgada). abre el menú Archivo. y selecciona finalmente Máscara de Enfoque. para escanear debes ir al menú Archivo. haz click en Aceptar.pctoday.Curso Elimina el efecto Moiré Si tienes alguna foto impresa (ya sea de una revista. y abre Redimensionar. Escalar: 100%. o pulsa la tecla F12. y selecciona Tamaño de Imagen. Completa el cuadro con el nombre de archivo que te apetezca. RGB. Si tienes un escáner y quieres digitalizar alguna foto previamente impresa. periódico. Al escanear páginas impresas y abrirlas en la pantalla de tu ordenador. 5 colores durante el proceso de impresión. y se llama “efecto moiré”. y guárdala en formato TIF. Conserva los ajustes por defecto del resto de variables. Finalmente. En cualquier revista (incluída la que tienes entre tus manos). y luego seleccionar 6 1 Dirígete al menú Imagen. Finalmente. Pulsa el icono del ojo para previsualizar el resultado. finalmente habrás logrado eliminar (o reducir. elige Ruido. Completa el cuadro de diálogo tecleando 2 en el apartado Apertura de Filtro. Resolución / Entra- Importar).es . Umbral: 5 niveles. En el cuadro de diálogo Tamaño de Imagen. 1 Coloca la fotografía impresa sobre el cristal de tu escáner. esto empeora la calidad de la foto. Conserva los ajustes por defecto del resto de variables. Deja intactos los demás valores. completa la variable Radio con el número 2. Completa con los siguientes parámetros el cuadro de diálogo de tu escáner: Modo: Fotografía a color. Dirígete al menú Filtro. Vé al menú Imagen. y selecciona Guardar Como. RGB. Deja como están el resto de los valores de la ventana. luego elige Importar. des marcar la casilla Ver para previsualizar el resultado. Acepta pulsando el botón OK. Con este filtro de enfoque. folleto. Marca las casillas de verificación de Restringir Proporciones. Resolución / Entrada: 718 dpi (pixeles por pulgada). el apartado Resolución. elige Enfocar. 3 Photoshop dad: 50%. 62 www. elige Ruido. Inicia el proceso de digitalización. y finalmente selecciona Mediana. y Remuestrear la Imagen. vé al menú Archivo. y en Tipo selecciona TIF. 4 da> 718 dpi (pixeles por pulgada). dirígete al menú Archivo y selecciona Guardar Como. 2 Una vez escaneada la imagen. Radio: 3 pixeles. etcétera) y deseas conservarla en formato digital. lleva a cabo los siguientes pasos.

El de- 1 Abre la foto escaneada (desde el menú Archivo.. y finalmente haz click en Descubrir todas. En el cuadro de diálogo. es un poco laborioso y lleva tiempo dominarlo. nombre por defecto. deja Fondo Copia como nará un poco la imagen.Retoque fotográfico. En el cuadro de diálogo. luego elige Acentuar. Parte 3ª Consejo Aunque la técnica descripta en este paso a paso logra excelentes resultados. Debes “pintar” con el pincel las zonas más importantes de la foto (como los rasgos de la cara. elige Añadir máscara de capa. y selecciona Desenfoque gaussiano. En el cuadro de diálogo. desde el menú Archivo selecciona Guardar para así aplicar los cambios realizados y conservarlos en tu fotografía. Luego pulsa sobre el botón OK. v Nº 96 63 . y selecciona Duplicar Capa. Diferencia: 5. elige Desenfocar. 5 Reducir la textura del papel A principios del siglo XX. eligiendo Abrir). que difícilmente pueda suprimirse por completo. completa con los siguientes valores: Radio: 3. Resumiendo. deberás conformarte con mejorar y enfocar un poco la imagen. o elementos en primer plano). Vé a la Barra de Propiedades y configura un grosor de 3 senfoque aplicado en el paso anterior hará que la textura sea menos perceptible. sólo debes completar el apartado Radio tecleando el número 2. y selecciona Máscara de desenfoque. Utilízalo para mejorar aún mas tus resultados. A continuación. Luego vé al menú Capa. Una última sugerencia: mira detenidamente el software de tu escáner. Hay fotos que tienen una trama tan marcada. No te desanimes con los primeros resultados y sigue practicando hasta devolver a tus viejas fotos el esplendor de hoy. Cuando la foto no esté borrosa. comenzaron a ofrecer un tipo de papel texturado. lamentablemente no es infalible ni milagrosa. y hará la textura del papel menos perceptible. seguramente en tu cajón encontrarás alguna foto de tu abuelo en un papel con esas características. Esto difumi- 2 pincel de 70 pixeles. La textura del papel proyecta sombras en la imagen que dificultan su visión y claridad. Tu tarea a continuación es la más delicada. Mediana 3 Radio 2 3 Aceptar 4 Imagen 3 Tamaño de imagen 3 Completar 300 dpi 5 Filtro 3 Enfocar 3 Aplicar Máscara de Enfoque 3 Aceptar 6 Archivo 3 Guardar 6 Para finalizar tu trabajo con la imagen. En algunos casos. elige un pincel más fino. vé al menú Archivo y haz click en Guardar. Haz click en Aceptar para aplicar los cambios. Deja intactas las zonas secundarias como el fondo del retrato. Paint Shop Pro 1 Colocar foto en el escáner 3 Configurar la digitalización 3 Escanear 2 Archivo 3 Guardar como TIF 3 Nombrar archivo 3 Efectos 3 Elegir Ruido. Potencia: 50.. muy original y avanzado para esos tiempos. Photoshop 1 Colocar foto en el escáner 3 Configurar la digitalización 3 Escanear 2 Archivo 3 Guardar Como 3 Nombrar archivo 3 Filtro 3 Elegir Ruido. desde la Paleta de Herramientas elige el Pincel. ya que algunos incluyen la opción de “destramar” al digitaliza. Al hacer click y mover el cursor sobre la foto. las antiguas empresas de fotografía (florecientes en aquella época). notarás que las zonas pintadas se oscurecen y enfocan. Pero hoy. A continuación te ofrecemos un truco para corregir el texturado del papel. Photoshop Vé al menú Filtro. Para aplicar los cambios pulsa el botón OK. estas fotos suelen resultar bastante problemáticas a la hora de escanear. y las zonas importantes queden bien destacadas. Filtro Mediana 3 Tipear 2 3 Aceptar 4 Imagen 3 Redimensionar 3 Tipear 300 dpi 5 Efectos 3 Máscara de Desenfoque 3 Tipear valores 3 Aceptar 6 Archivo 3 Guardar A continuación haz click en el menú Efectos. en el siglo XXI. Si tu foto es muy pequeña. y en Opacidad teclea 50%. 4 Abre el menú Capa. En este momento el efecto moiré debería haber desaparecido.

Es divertido y estimulante crear pinceles personalizados con texturas. vé al menú Archivo y selecciona Guardar. Si observas que el pincel es muy fino o Ahora haz click y mueve el cursor sobre las zonas destacadas de la foto. Definición: 0. Cuando la foto quede equilibrada y la textura del papel se haya atenuado. desde tu disco duro o cualquier otro soporte. seguramente 1 Abre el menú Archivo. en lugar de 2 escribe 1. Debido a que el escaner hace un barrido con su haz de luz. puedes crear un pincel a partir de una textura de piel.. Tamaño: 32. O tomar muestras de cielo o césped. completa tecleando el número 2 en el apartado Radio.pctoday. Si muy grueso. Céntrate sobre todo en el La configuración de un pincel nos permitirá realizar retoques con mucha precisión. cambia su valor desde el apartado Tamaño. Densidad: 100. para que puedas localizarlo con mayor rapidez (por ejemplo “Pincel suave con textura de piel”) y optimizar tu trabajo. y recuerda almacenarlos correctamente para su posterior utilización (en el caso de Photoshop puedes utiliza el Gestor de Ajustes Preestablecidos para organizarlos). etcétera). Y lo más importante. Consejo Un truco interesante (al tiempo que divertido) a la hora de digitalizar fotos con papeles texturados: prueba inclinar las fotos en distintos ángulos. es utilizar las herramientas habituales de retoque (como el Tampón de Clonar) en conjunto con un pincel personalizado: puedes clonar la textura de una tela. y reproducirla en otro sitio agregándole un toque personal con la textura que has utilizado en tu pincel. 2 Dirígete al menú Efectos. sobre el cristal del escáner. Aunque al principio los resultados serán algo imprevisible. Marca el fichero que contiene la foto escaneada previamente. investiga y aprende a configurar sus variantes (¡son casi infinitas!) para explotar al máximo sus posibilidades en el retoque fotográfico. Opacidad: 40. El azar también existe en el mundo digital… en la previsualización observas que la foto está demasiado borrosa. Por ejemplo. Desplaza el cursor sobre la fotografía. selecciona Desenfoque y luego elige Desenfoque de Gauss. tipo de bordes del pincel (nunca deben ser muy duros).Práctico Paint Shop Pro Personalizar pinceles para retoque Aunque Photoshop y Paint Shop Pro ofrecen una enorme cantidad de pinceles y variantes de los mismos. 3 Vé a la Paleta de Herramientas. En algún caso te sorprenderás ya que la textura se puede tornar casi imperceptible. probablemente ilumine de manera distinta de acuerdo a la inclinación del papel. Hazlo con tranquilidad. en Modo de Retoque selecciona Oscurecer RVA. como rasgos (en el caso de un retrato). luego selecciona la opción Abrir. algo tremendamente útil en cualquier tarea de retoque fotográfico.es . Paso: 25. en un paisaje). Tanto en Photoshop como Paint Shop Pro tienes la posibilidad de dar un nombre a cada pincel: aprovecha esta posibilidad dando a tus pinceles algún nombre descriptivo. Puedes crear tantos pinceles como te apetezca.. y recuerda que lo más importante al editar digitalmente una foto es que el resultado sea lo más natural posible. o elementos en primer plano (por ejemplo. Finalmente. y sin preocuparte por el resto que resultará algo difuminado. s 4 con la práctica podrás controlar a fondo tus propios pinceles. En el cuadro de diálogo. para luego digitalizarlas. marcas de acné. para corregir defectos en un rostro (arrugas. y corregir fotos de paisajes. luego crear tus pinceles personalizados. y completa con los siguientes datos: Forma: Redonda. A continuación vé a la Paleta de Configuración. también es posible crear pinceles personalizados. Photoshop 1 Abrir archivo 3 Ir al menú Capa 3 Duplicar Capa 3 O K 2 Filtro 3 Elegir Desenfoque Gaussiano 3 Tipear 2 3 O K 3 Capa 3 Añadir máscara de capa 3 Click en Pincel 3 Configurar propiedades Paint Shop Pro 1 Archivo 3 Elegir foto 3 Abrir 2 Click en menú Efectos 3 Desenfoque de Gauss 3 Escribir 2 en el campo de cantidad 3 Elegir Pincel de Retoque 3 Paleta Configuración 3 Configurar pincel 4 Pintar zonas destacadas 3 Enfocar áreas 3 Menú Archivo 3 Guardar 4 Pintar zonas destacadas 3 Enfocar áreas 3 Archivo 3 Guardar 64 www. y elige el pincel Retoque (es el icono de la mano). Algo muy interesante y sorprendente. s Resumiendo. buscando que sólo se destaquen los elementos primordiales.

exposición y color. PC Today te enseña todas las claves y trucos en este curso. bordes y marcos creativos. y que además entorpecen la armonía de la composición. Brillo y contraste. hay veces que en las fotos encontramos elementos que no aportan nada a la escena. Todos son problemas habituales tanto en la fotografía tradicional como en la digital. tu misión es combinar las técnicas que has aprendido. minimizar manchas.es . PC Today nº 95 3. o su mensaje sería mucho más claro. Fondos personalizados. disimular el paso del tiempo. PC Today nº 98 6. arañazos. tono. Máscara rápida. pero si no estuvieran allí. Selecciones sencillas. puede haber desde pequeños defectos que empobrecen la imagen. PC Today nº 97 5. eliminar el moiré. Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. Eliminar defectos de la piel. mejorar los retratos con luz. Corrige el aspecto general de tus fotos. como en instantáneas escaneadas. hasta grandes errores como objetos o elementos que entorpecen la armonía de la composición. y descubrir errores y defectos a golpe de vista: manchas. Embellecer y refinar retratos.Curso Técnicas de reparación II Tanto en fotografías tomadas digitalmente. verás trucos muy puntuales para resolver problemas concretos que presentan muchas fotografías. Te enseñamos más trucos y secretos para manipular tus fotos digitalmente. Pero agudizando un poco más la observación. y a ti te corresponde poner creatividad e ingenio para combinar todas estas técnicas y obtener los mejores resultados. Con la práctica podrás conseguir resultados espectaculares en muy poco tiempo. PC Today nº 94 L 2.pctoday. modificar personajes. enfoque suavizado. Conceptos básicos. etcétera. capas de ajuste. zonas borrosas o desenfocadas. PC Today nº 96 4. Ten siempre en tu mente lo más importante: en este curso. Introducción al retoque fotográfico. Guía del curso 1. Extraer. Reparar manchas y texturas. s 56 www. borrar elementos no deseados. probablemente la fotografía gozaría de una mayor belleza. corregir polvo y rascaduras. Eliminar arañazos rectos. ojos rojos. estos no son considerados como “errores”. Técnicas de reparación de fotos (II). PC Today nº 99 a mayoría de la gente puede observar fotografías. Los programas Adobe Photoshop y Paint Shop Pro te dan las herramientas necesarias para que puedas corregir este tipo de errores. Recreando fotos creativamente. The GIMP. Técnicas de reparación de fotos (I). Una vez que los aprendas.

y tendrá sólo un píxel de alto. 3 y 4 para corregir los demás arañazos. se formará una selección que abarcará todo el ancho de la imagen. Haz click en Abrir. que te permitirá corregir este tipo de defectos. También puedes pulsar el atajo Ctrl + O. creando algunas finas líneas rectas. Recuerda que al realizar la selección con Marco Fila Única. debes usar las flechas del teclado para acercarte lo más posible al área dañada. 1 valor de 2 píxeles. hasta dar con el grosor de herramienta que más se ajuste a las rayaduras. En la Paleta de Configuración.Retoque fotográfico. Utiliza las teclas de flecha de tu teclado. También puede suceder que simplemente el negativo se encuentre rayado. Parte 4ª Eliminar arañazos rectos Es muy común que al escanear fotografías. desplázate gasta el otro extremo de la raya- 4 v Desde la Barra de Herramientas de Photoshop (la encuentras a la izquierda del área de trabajo) elige la Herramienta Marco Fila Única. dirígete a la Paleta de Herramientas. y recuerda: si no estás del todo conforme con tus resultado. Si es necesario. continuación debes copiar “información sana” de los píxeles más cercanos al a las rayaduras. Para ello. Amplía el área de la fotografía que vas a retocar. y 2 Ahora debes “dibujar” con la herramienta Eliminar Rayaduras. haciendo click con la lupa. y en el menú desplegable elige Abrir. elige Abrir y escoge la imagen que presente algún arañazo en forma de líneas más o menos rectas. y desplazando sin soltar el botón del ratón. para acceder a ella debes pul- 2 haz click en el icono que representa una lupa (herramienta Acercar). ya que éste es el grosor de la rayadura. Photoshop Desde el menú Archivo. debes utilizar la herramienta Eliminar Rayaduras. cualquier mínimo rastro de polvo estropee la digitalización de la imagen. En cuanto a Paint Shop Pro. 5 Consejo Tanto en Photoshop como en Paint Shop Pro. No escatimes en ampliar la imagen con el zoom todo lo que haga falta. de manera que el revelado presentará algún arañazo. sar el icono de Marco Rectangular durante un segundo. Nº 97 57 . Allí radica la clave de este truco. y Eliminar Rayaduras) con un grosor similar al de las rayas. amplía el área sobre la cual deseas trabajar a continuación. así podrás trabajar con mayor precisión que con la vista general. y haz click. Ten paciencia e inténtalo varias veces. para moverte hacia arriba o Abre el menú Archivo. debes escribir el Ancho 3 mientas Estándar. es mejor que utilices las herramientas de este ejercicio (Marco Fila Única. Repite los pasos 2. en cantidad de píxeles que quieres dar a la herramienta . y sin soltar el botón del ratón. amplía la vista pulsando la combinación de teclas Ctrl + + para trabajar con precisión. Paint Shop Pro 1 que crea una selección de tan sólo un píxel. Para eliminar arañazos rectos. 4 Con la imagen que acabas de abrir en pantalla. Luego escoge alguna fotografía rayada que hayas escaneado previamente. Finalmente pulsa con cuidado la combinación de teclas Ctrl + Alt + Flecha Abajo. tanto en forma vertical como horizontal. ya que así obtendrás la precisión necesaria para que el retoque sea perfecto. En el ejemplo hemos utilizado un hacia abajo y localizarlos. Sigue paso a paso el ejercicio para resolver este tipo de problemas. haz click en un extremo del defecto. Abre el menú Archivo y elige Guardar para salvar los cambios. sobre las rayas de la foto. y haz click en Abrir. si no se utilizan con ingenio y creatividad. para obtener resultados óptimos. De nada valen las mejores herramientas. o que tengas guardada en tu disco duro. combina ésta técnica con otras que has aprendido en el curso. dejándolos invisibles. Ahora acércate con el cursor lo más que puedas al arañazo. Photoshop provee una herramienta sumamente útil (y muy poco utilizada): la herramienta Marco Columna Única. Esto duplicará los “píxeles sanos”. y cubrirá los arañazos. o bien pulsar el icono de la carpeta abierta en la Barra de Herra- 3 A continuación elige la herramienta Eliminar Rayaduras desde la Paleta de Herramientas (icono de espátula).

es . Dicho elemento debe haber desaparecido. en la que todo parece correcto… salvo por un objeto que estorba y distrae la atención. . De ésta manera la selección que has creado ahora tiene sus bordes muy suavizados. si es por medio de un escáner. Ahora con la herramienta Lazo. de manera que ajusta sus píxeles para que su ancho sea igual al de las rayaduras. Vé a la Paleta de Herramientas. Photoshop 1 Ir al menú Archivo 3 Abrir 3 Seleccionar imagen 3 Abrir 2 Ir a Barra de Herramientas 3 Elegir Marco Fila Única 3 Click en el arañazo Paint Shop Pro 1 Ir al Menú Archivo 3 Escoger Abrir 3 Seleccionar fotografía 3 Abrir 2 Seleccionar Herramienta Acercar 3 Hacer click y desplazar 3 Ampliar zona defectuosa 3 Copiar información sana 3 Mover con las flechas del tecl a d o 3 Ampliar vista 3 Ir a Paleta de Herramientas 3 Elegir Eliminar Rayaduras 3 Ir a Configuración 3 Grosor de 2 píxeles 4 Pulsar Ctrl + Alt + Flecha Abajo 3 Duplicar píxeles sanos 3 Cubrir arañazos 4 Click + desplazar ratón sobre rayaduras 3 Trazar línea bien recta 5 Corregir más arañazos 3 Ir al menú Archivo 3 Guardar cambios 5 Corregir más arañazos 3 Ir al menú Archivo 3 Guardar cambios Borrar elementos no deseados ratón. Photoshop 1 Abre el menú Archivo. 3 icono de la lupa). tapando el elemento que deseas ocultar. Haz click en Abrir. para activar el modo Máscara Rápida (la imagen protegida por la selección se pondrá de color rojo momentáneamente). y selecciona la Herramienta Zoom (el 2 Pulsa nuevamente la letra Q de tu teclado para salir del modo Máscara Rápida.. y activar la selección suavizada. Observa la paleta Capas. Dirígete a la Paleta de Herramientas. Sin soltar el botón del 4 58 www. haz click en la selección. repite los pasos 2. En el ejemplo que damos a continuación. Pulsa la letra Q de tu teclado.Curso dura . A continuación rodea el objeto que deseas eliminar. copiando la selección de píxeles sanos. y píxeles sanos para cubrir el objeto. selecciona Abrir y escoge la imagen de tu disco duro o CD. Cuanto más tiempo dediques a este tipo de procesos. desplaza la selección hacia una zona que no tenga obstáculos. y sin soltar el botón del ratón. distrayendo la atención del tema de la fotografía: la niña recibiendo su vela de cumpleaños para soplar. completa con un valor de 3. alzada. En el cuadro de diálogo. “coge” la selección de píxeles sanos y muévelos. mejor resultado se apreciará. con la mayor resolución. Ya que no podemos eliminar los objetos físicamente. dibujando una selección libre a mano 5 Pulsa la combinación de teclas Ctrl + J para crear una nueva capa. Aunque sería exagerado considerarlo un “error”. y selecciona la Herramienta Lazo. Haz click en la imagen. Procura que la línea sea lo más recta posible. Finalmente vé al menú Archivo y elige Guardar para conservar los cambios realizados. La herramienta Eliminar Rayaduras dibuja el contorno de su grosor. y verás en una nueva capa el trozo de píxeles sanos que acabas de crear. Procura dejar algo de espacio alrededor del objeto. y elige Desenfoque Gaussiano.0. Para corregir los demás arañazos. rodea el área donde se encuentra el elemento no deseado. 3 y 4 . lo que harás a continuación con Photoshop o Paint Shop Pro será cubrir los elementos no deseados. hay un globo que aparece por detrás de la cabeza de un personaje. Es muy probable que alguna vez hayas tomado una bella fotografía. y escoge Herramienta Mover. Vé al menú Filtro.pctoday.. y así embellecer la composición final. Ahora vé a la Paleta de Herramientas. podemos recurrir a las técnicas digitales para subsanar este tipo de problemas. abre Desenfocar. También es importante que la imagen llegue con la mejor calidad al ordenador. 5 Resumiendo.

según el caso. la selección pegada. dibujando una selección libre a mano selección (pulsa el atajo Ctrl + E) y coloca la selección en un área de la pared con píxeles sanos. Intenta dejar algo de espacio alrededor del objeto. rodea el área donde se encuentra el elemento no deseado. 1 3 Vé al menú Edición. y sin soltar el botón del ratón. a lo que respondes pulsando el botón Sí. para que desaparezcan los halos que aparecían alrededor de la zona que estás tratando de reparar. y luego la combinación Ctrl + E para pegar lo que has copiado como una nueva se- 5 tas. para finalmente superponerlos y ocultar el objeto no deseado. luego utilizar dicha selección para copiar píxeles sanos de la imagen (en este caso de una pared). Dirígete a la Paleta de Herramien- mes si deseas eliminar la capa activa. lección. la iluminación del área copiada no coincide exactamente con la zona donde la has pegado: echa mano de las herramientas de brillo y contraste para ajustar las luces. Finalmente abre el menú Archivo y elige Guardar. puedes usar la herramienta pincel para que pase desapercibido. o repetir el proceso con selecciones del tamaño de un punto. y elige la opción Quitar Selección. Ten en cuenta que. y ahora selecciona Pegar Como nueva Ya tienes lo que necesitas: una selección que ocupa la misma superficie que el área que deseas cubrir.Retoque fotográfico. y selecciona Guardar para conservar los cambios. De esta manera copias la selección al Portapapeles. Arrastra. y selecciona Copiar (o pulsa la combinación Ctrl + C). y selecciona Acoplar Imagen. rás la selección que has creado. seleccionas Abrir (o pulsa la combinación Ctrl + O). Dirígete a la Paleta de Herramientas. 6 v Consejo El procedimiento que has realizado es muy sencillo: consiste en copiar el área del objeto que quieres eliminar. A continuación colócala sobre el área del objeto que deseas eliminar y sustituir por la selección correcta. Abre nuevamente el menú Edición. y selecciona la Herramienta Acercar (icono de la lupa). y haz click en Selección Flotante. Haz click en el botón Abrir.. y selecciona la Herramienta Lazo. Luego elige una imagen y selecciónala. y si hiciera falta de las herramientas de clonación para ocultar los bordes pegados. Un cuadro de diálogo te pedirá que confir- menú Seleccionar. Parte 4ª Dirígete al menú Capa. Haz click en la imagen. Paint Shop Pro Desde el menú Archivo. Photoshop 1 Ir al Menú Archivo 3 Seleccionar Imagen 3 Abrir 2 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Rodear el objeto con selección Paint Shop Pro 1 Ir al Menú Archivo 3 Seleccionar Imagen 3 Abrir 2 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Rodear el objeto con selección 3 Pulsar Q para Máscara Rápida 3 Ir al menú Filtro 3 Aplicar Desenfoque Gaussiano 3 Ctrl + C para copiar selección 3 Ctrl + E para pegar selección 3 Colocar en píxeles sanos 4 Pulsar Q para salir de Máscara Rápida 3 Desplazar selección con el Lazo 4 Ir a Paleta Capas 3 Click en Selección Flotante 3 Click en Papelera para eliminar selección 5 Ctrl + J crea nueva capa 3 Ir a Paleta de Herramientas 3 Elegir Mover 3 Tapar el objeto no deseado 5 Ctrl + C copia píxeles sanos 3 Ctrl + E pega nueva selección 3 Colocar sobre el objeto 3 Quitar selección 6 Ir al menú Capa 3 Acoplar Imagen 3 Ir al menú Archivo 3 Guardar 6 Ir al menú Archivo 3 Elegir Guardar Nº 97 59 . A continuación rodea el objeto que deseas eliminar. pero conserva- 4 Resumiendo. con el mismo cursor y sin cambiar de herramienta. y luego en el icono de la Papelera en la misma paleta. 2 Ahora en tu imagen debe aparecer el objeto que quieres eliminar por duplicado. para ello. Pulsa nuevamente Ctrl + C para copiar los píxeles sanos de la pared con tu selección. 6 alzada. vé a la Paleta Capas. Vé al Finalmente abre el menú Archivo. para conservar los cambios. a continuación vas a eliminar el contenido de la imagen. Si algún pixel concreto presenta un color que resalta frente a los demás..

elige Rectángulo en el apartado Tipo de Selección. debes manipular. y escoge la Herramienta Marco Rectangular.pctoday. Dirígete a la Paleta de Herramientas. haz click y sin soltar el botón del ratón. desplaza para crear una selección de un tamaño parecido 2 Vé al menú Capa. Paint Shop Pro Vé al menú Archivo. para que la selección encaje perfectamente con la mancha. Abre el menú Edición y selecciona Copiar (o pulsa la combinación Ctrl + C) para copiar los píxeles sanos al portapapeles. 1 3 al de la mancha. Ahora vé al menú Edición. en la cual una mancha de humedad ha dañado la zona de la pared. recurre a las herramientas de clonación combinadas con pinceles pequeños. Configuración. En este caso hemos utilizado una vieja fotografía. Con la Herramienta Marco Rectangular. etc.es .Curso Minimizar las manchas El siguiente truco es muy útil en fotografías que poseen grandes superficies de un color y textura relativamente homogéneos. El trozo sano anteriormente copiado ahora se ha pegado dentro del área de la mancha. También lo encontrarás muy útil para restaurar fotografías donde aparezcan grandes cielos. y escoge la Herramienta Seleccionar. A continuación dibuja una selección libre alrededor de la mancha que deseas corregir. Dirígete a la Paleta de Herramientas. Vé al menú Edición y selecciona Copiar (o pulsa la combinación Ctrl + C) para copiar los píxeles sanos al portapapeles. para aplicar los cambios. Y finalmente abre el menú Archivo. y escoge la fotografía de tu disco duro o CD. Busca un área de la pared donde los píxeles sean sanos y parejos. Cuando encaje correctamente. sencillamente pegando el trozo de píxeles sanos en una nueva capa. y escoge la fotografía de tu disco duro o CD. Photoshop En el menú Archivo. una selección de un tamaño parecido al de la mancha. pulsa la tecla Enter. césped. En la Paleta de Consejo Recuerda que éste truco funciona de manera óptima cuando en la fotografía existen grandes zonas de imagen sana que puede reemplazar al trozo dañado o manchado. elige Abrir. Realizando selecciones muy simples a mano alzada puedes obtener muy buenos resultados. Como casi siempre. montañas. y escoge la opción Transformación Libre. haz click y sin soltar el botón del ratón. 5 En la Paleta de Herramientas haz click en el icono del Lazo. En éste caso recurrirás al auxilio de las capas. elige Abrir. Si tu fotografía contiene manchas en zonas que no están claramente despejadas. Con la Herramienta Seleccionar. la técnica consiste en hallar y copiar píxeles útiles que remplacen el área dañada. utilizando el comando Pegar Dentro. desplaza para crear 2 Dirígete al menú Edición y escoge Pegar Dentro (o la combinación Mayús + Ctrl + V). 1 Busca un área de la pared donde los píxeles sean correctos. y escoge Guardar (o la combinación Ctrl + S). Alrededor del trozo pegado aparecerán unos manejadores que 4 60 www. y elige Acoplar Imagen.

A continuación debes fijarte en la Paleta de Herramientas y escoger la Varita Mágica. Si la superficie de selección excede los límites del cielo. y busca en tu ordenador la fotografía que vas a utilizar. Parte 4ª En la Paleta de Herramientas haz click en el icono de selección que contiene un Lazo. o elementos que dificulten su selección. en cualquier punto de la zona del cielo que necesitas modificar. En la Barra de Propiedades escribe 50 en el apartado Tolerancia. El trozo sano anteriormente copiado ahora se ha pegado dentro del área de la mancha. si la selección no cubre todo el cielo. escoge Pegar. utilizarás la varita mágica y el agregado de una capa. Aparecerán unas líneas punteadas que marcarán el área que haya sido seleccionada. Alrededor del trozo pegado aparecerán unos manejadores y un recuadro que debes utilizar para manipular la forma de la selección. nosotros podemos contradecirlos… ¿que a qué nos referimos? Muy sencillo: si has tomado algunas fotografías en tu último fin de semana. 3 Dirígete al menú de Edición. 1 2 Con la Herramienta Varita Mágica. Photoshop Vé al menú Archivo. Para decirlo en otras palabras: puedes transformar un día frío y gris. Resumiendo. para modificar el color del cielo y así realzar la belleza de una fotografía. debes poner una Tolerancia mayor. A continuación dibuja una selección a mano alzada alrededor de la mancha que deseas corregir. y el tiempo no era bueno. De esta manera es muy simple seleccionar el área a modificar con la varita mágica. 4 Ahora vé al menú Seleccionar. haz click sobre la fotografía. con Photoshop y Paint Shop Pro puedes corregirlo. Por el contrario.Retoque fotográfico. v Nº 97 61 .. En el siguiente práctico. y no se vé interrumpida por cables. gracias a las herramientas digitales que tienes en tu ordenador. la gran ventaja es que el cielo ocupa un área contínua. para aplicar los cambios realizados. y marca las casillas de verificación de Suavizado y Contiguo. Finalmente abre el menú Ar- 5 chivo y elige Guardar. del maravilloso mundo de Walt Disney. elige Abrir. reduce el valor que hayas dado en el campo Tolerancia. Photoshop 1 Ir al Menú Archivo 3 Abrir Foto 3 Ir a Paleta de Herramientas 3 Escoger Marco Rectangular Paint Shop Pro 1 Ir al Menú Archivo 3 Abrir Foto 3 Ir a Paleta de Herramientas 3 Elegir Rectángulo 2 Buscar píxeles sanos 3 Crear selección 3 Pulsar Ctrl + C para copiar selección 2 Buscar píxeles sanos 3 Crear selección 3 Pulsar Ctrl + C para copiar selección 3 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Crear selección rodeando la mancha 3 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Crear selección rodeando la mancha 4 Ir al Menú Edición 3 Pegar Dentro 3 Ir al Menú Edición 3 Elegir Transformación Libre 3 Manipular la selección hasta encajar. y el Servicio Meteorológico cada día son más precisos. En la fotografía utilizada en este ejemplo. y luego En la selección (o la combinación Mayús + Ctrl + L). En la Paleta de Herramientas elige Deformar.. y escoge Promover a Capa. para que ésta encaje perfectamente con la forma de la mancha. 4 Pulsar Mayús + Ctrl + L para pegar dentro 3 Ir al Menú Seleccionar 3 Elegir Promover a Capa 5 Ir al Menú Capa 3 Acoplar imagen 3 Ir al Menú Archivo 3 Guardar 5 Ir a Paleta de Herramientas 3 Elegir Deformar 3 Manipular la selección 3 Ir al menú Archivo 3 Guardar Remplazar el fondo Aunque el hombre del tiempo en la TV. en un cálido atardecer de verano.

es . haz click sobre la fotografía.pctoday. más intenso será el efecto aplicado). De esta manera. guarda los cambios desde el menú Archivo. y selecciona el Bote de Pintura. 5 Haz click con el Bote de Pintura en cualquier punto del cielo. abre el menú y elige la opción Color. selecciona Color. Simplemente debes hacer click en el color elegido. primero nombra la nueva 3 5 2 Paleta de Configuración. Debes completar con un nombre (por ejemplo “Nuevo Cielo”). dirígete a la Paleta de Herramientas y escoge la Varita Mágica. Si el área de selección excede los límites del cielo. y busca entre las carpetas de tu ordenador la fotografía que quieres utilizar. y en Opacidad escribe 80%. y finalmente selecciona Capa en el menú que se despliega (o pulsa la combinación Mayús + Ctrl + N en el teclado). capa (por ejemplo.. y escoge Rellenar. haciendo click en Guardar. A continuación pulsa OK. guarda los cambios desde el menú Archivo. elige Abrir. Photoshop 1 Ir al Menú Archivo 3 Abrir Fotografía 3 Ir a Paleta de Herramientas 3 Escoger Varita Mágica 3 Configurar Propiedades Paint Shop Pro 1 Ir al Menú Archivo 3 Abrir Fotografía 3 Ir a Paleta de Herramientas 3 Escoger Varita Mágica 3 Configurar Propiedades 2 Clickear con la Varita en la foto 3 Líneas punteadas marcan la selección 3 Mayús + Ctrl + N para crear Capa 3 Configurar Capa 3 O K 4 Ir a Paleta Muestras 3 Elegir Naranja 3 Ir al Menú Edición 3 Rellenar 3 OK 2 Clickear con la Varita en la foto 3 Líneas punteadas marcan la selección 3 Ir a Paleta Capas 3 Click en Crear Capa 3 Configurar Propiedades de Capa 4 Ir a Paleta Colores 3 Elegir Naranja 3 Ir a Paleta de Herramientas 3 Escoger Bote de Pintura 3 Configurar Propiedades 5 Si el resultado no es óptimo ir a Paleta Capas 3 Variar la opacidad 3 Ir al menú Capas 3 Acoplar Imagen 3 G u a r d a r 5 Click con el Bote en la foto 3 Rellenar con Naranja 3 Si el resultado no es óptimo ir a Paleta Capas 3 Variar Opacidad 3 Fusionar todo 3 G u a r d a r 62 www. en Modo de Mezcla 3 al menú Capas. en Progresivo escribe 1. elige Fusionar y luego Fusionar Todo. y selecciona un color cálido como el Naranja Puro. debes poner una cantidad superior en la Tolerancia. La capa se habrá llenado de Naranja y habrás obtenido el efecto buscado. reduce el valor de la Tolerancia. más intenso será el efecto aplicado). Finalmente abre el menú Capas. completa con 100%. en el cuadro de diálogo completa con los siguientes valo- seleccionado. unas líneas punteadas marcarán el área que se ha Abre el menú Capa. En Modo de Fusión.. en Correspondencia elige Valor RVA. En el apartado Modo. Pulsa OK para que se cree dicha capa. Si el resultado no te convence del todo. si la selección no cubre toda la zona del cielo. Por último. y haz doble click en una muestra cualquiera. Después de pulsar Abrir. En la 4 Con la Herramienta Varita Mágica. 1 Abre la Paleta Capas. s Resumiendo. y selecciona Acoplar Imagen. abre la paleta Capas. Deja intactos el resto de valores. y modifica el porcentaje de Opacidad de la capa (cuanto mayor sea la opacidad. Deja el resto de valores como han aparecido por defecto. En el cuadro de diálogo. abre la paleta Capas.Práctico res: en Usar. elige Oscurecer en el apartado Combinar. para abrir el cuadro de diálogo Color.. y en Opacidad. para crear una nueva capa. en una capa de fusión Color que mantiene la textura y el brillo originales del cielo. habrás rellenado el área del cielo con un color Naranja. “Nuevo Cielo”). En la Paleta de Configuración escribe 50 en el apartado Tolerancia. y le agrega simplemente un tono cálido. y haz click en el icono Crear una Capa. y modifica el porcentaje de Opacidad de la capa (cuanto mayor sea la opacidad. por el contrario. pon Normal. Dirígete a la Paleta Colores. Se abrirá el cuadro de diálogo Propiedades de la Capa. elige la opción Nueva. Abre el menú Edición. y en Opacidad escribe 80. Si el resultado no te convence del todo. elige Color Frontal (el Naranja que ya habías seleccionado). Luego vé a la Paleta de Herramientas. Finalmente vé 4 Paint Shop Pro Vé al menú Archivo. Allí selecciona un color cálido como el naranja. Ahora abre la Paleta Muestras. Por último. y marca la casilla Muestra Fusionada. en cualquier punto del cielo que vas a modificar. haciendo click en el botón Guardar.

PC Today nº 99 e apetecería pintar tu coche de otro color? Es algo demasiado caro para realizar. Técnicas de reparación de fotos (II). pero recuerda siempre lo más importante: no existe solamente un camino para obtener buenos resultados en fotografía digital. crear tus propios fondos personalizados y mucho más. Corrige el aspecto general de tus fotos. PC Today nº 95 Reparar manchas y texturas. Conceptos básicos. eliminar el moiré. PC Today nº 97 Fondos personalizados. The GIMP. Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. Introducción al retoque fotográfico. Extraer. y deseas “borrarlo literalmente” de tus fotografías? Con las herramientas digitales que tienes entre manos. y lo mejor de todo. 52 www. no sólo son excelentes herramientas que hacen verdaderos milagros con tus fotografías. Técnicas de reparación de fotos (I). modificar personajes. minimizar manchas. tono. borrar elementos no deseados. es que para llevarlos a cabo sólo necesitas un poco de práctica… ¡y te divertirás en grande! Es la combinación perfecta para realizar cualquier tarea creativa: trabajo. capas de ajuste. exposición y color. Adobe Photoshop y Jasc Paint Shop Pro. Recreando fotos creativamente. 5. sino que son una fuente inagotable de diversión: en esta entrega aprenderás unos trucos con los que te divertirás en grande. Selecciones sencillas. agregar marcos de las formas más variadas. bordes y marcos creativos. Brillo y contraste. Embellecer y refinar retratos. 3. Eliminar arañazos rectos. será una tarea muy sencilla quitar de tus recuerdos fotográficos a quien quieras olvidar… Adobe Photoshop y Paint Shop Pro son dos poderosas herramientas con las cuales puedes realizar trabajos mi- lagrosos con tus fotografías. Retoques creativos Guía del curso 1. y luego arrepentirte… Con Photoshop y Paint Shop Pro puedes modificar el color de tu automóvil en tan solo cinco minutos… ¡y no necesitas llevarlo al taller! ¿Te has enfadado con un viejo amigo. lo mejor es combinar distintas técnicas de un modo práctico y creativo. Máscara rápida. PC Today nº 98 Eliminar defectos de la piel. mejorar los retratos con luz. corregir polvo y rascaduras. PC Today nº 94 T 2. entretenimiento y placer. 6.Curso Los programas de retoque fotográfico que utilizas en este curso. PC Today nº 96 4.es .pctoday. En este capítulo aprenderás algunos trucos para reparar fotos que se han roto. disimular el paso del tiempo. enfoque suavizado.

De ésta manera. este truco es para ti: puelores: Tolerancia: 50. Se abrirá un cuadro de diálogo. y selecciona Guardar Como. deben estar muy bien delimitados. pulsa la tecla Mayúsculas y sigue haciendo click simultáneamente en distintas zonas del fondo hasta que la selección lo abarque todo. Ahora ve a la Paleta Muestras y haz click en 4 en el paso anterior. o ciones para personalizar el filtro. para ello. y convertirlo en una máscara. sin que esto afecte a la fotografía original. 1. y marca la casilla de verificación Muestra Fusionada. Puedes basarte en los parámetros de este ejemplo. Valor RVA. pulsa el botón Aceptar. Presta atención a los bordes de la forma . y lo aplicará en la totalidad de la nueva capa. ya que de esto depende que el resultado sea lo más realista posible. y selecciona Azulejos. 6 3 Abre el menú Archivo. Dirígete al menú Efectos. finalmente. así previsualizas los resultados. y más tarde experimentar aplicando tus propias variantes. Luego escoge alguna fotografía cuyo fondo deseas reemplazar. y estás a gusto con la figura principal. ponle un 2 Desde la Barra de Herramientas de Photoshop (la encuentras a la izquierda del área de trabajo) elige la Herramienta Varita Mágica . seguramente más impactante que el original. 50. Contiguo. elige Abrir y escoge la imagen que desees utilizar para cambiar su fondo. Si la selección que ha creado la varita no abarca todo el fondo. Parte 5ª Crear fondos personalizados Si has tomado una fotografía. pero prueba tus propias variantes. pero no con el fondo. haz click con la varita mágica en alguna zona del fondo donde el color sea homogéneo. 5 Paint Shop Pro 1 Abre menú Archivo. pulsa la tecla Mayúsculas y sigue haciendo click simultáneamente en distintas zonas del fondo hasta que la selección lo abarque todo. Tolerancia. luego pulsa las teclas Ctrl + Mayús. Una vez que el resultado te agrade. situado en la parte inferior derecha de la paleta. como la máscara rápida en combinación con los pinceles. Haz click en el apartado Capas de las Opciones de Guardado. Tanto Photoshop como Paint Shop Pro poseen herramientas para crear texturas de un modo muy simple. en el futuro podrás acceder al archivo y 4 modificar la capa con el fondo personalizado. con el fondo intacto. Si utilizando la varita mágica no consigues que la selección se ajuste al fondo y a la figura. y al blanco como color de fondo.Retoque fotográfico. Un dato importante: pon especial cuidado al realizar la selección donde aplicarás la textura. Luego ve a la Paleta de Configuración. De esta manera darás a tu fotografía otro aspecto. escoge la Varita Mágica. lo más importante en este truco es la perfección de la selección que debes crear para el fondo. Nº 98 53 . También puedes realizar un trazado alrededor de la figura. haz click en el icono del ojo. abre Efectos de Textura. 1 Dirígete a la Paleta Capas. A continuación haz click con la varita en alguna zona del fondo donde el color sea parejo. y selecciona las casillas Suavizado. Finalmente haz click en el botón Guardar. des eliminar el fondo de una manera muy sencilla. El límite lo pone tu creatividad. haz click en el botón Nubes. donde encontrarás muchas op- 2 Photoshop Desde el menú Archivo de la barra superior de herramientas. Ahora abre el menú Filtro de la barra superior de herramientas. Dicho filtro creará un efecto nombre al archivo y en Formato selecciona Photoshop (*. Se abrirá un cuadro de diálogo. completa los siguientes va- cualquier color azul oscuro. También puedes pulsar el atajo Ctrl + O. Si la selección que ha creado la varita no abarca todo el fondo. y haz click en el icono Crear una capa nueva. Escoge el camino que te otorgue mayor rapidez y precisión. Ahora haz click en Abrir. mientras haces click en el color blanco. El fondo y la figura deben fundirse de un modo suave y natural. y reemplazarlo por una textura propia. de nubes que combina los colores azul y blanco que has seleccionado En la Paleta de Herramientas. para agregar o quitar zonas de selección. escoge la opción Interpretar y. echa mano de otras herramientas. en la Barra de Propiedades. puedes utilizar las que son creadas en forma automática (como en este caso). y haz click en Abrir. bien pulsar el icono de la carpeta abierta en la Barra de Herramientas Estándar. has configurado al azul como color de frente. De ésta manera. Debes buscar que el fondo quede bien diferenciado de la figura. y completa con los siguientes valores: Correspondencia. y Usar todas las capas.PSD). Consejo Tanto en Photoshop como en Paint Shop Pro. y en el desplegable elige Abrir . 3 A continuación. Progresivo.

ya que siempre podrás volver un paso atrás pulsando la combinazión Ctrl+Z. y no te desanimes si al principio no estás satisfecho con los resultados. + Click hasta abarcar todo el fondo 4 Abrir menú Efectos 3 Efectos de Textura 3 Seleccionar Azulejos 3 Configurar cuadro de diálogo 3 Aceptar 5 Ir al menú Filtro 3 Escoger Interpretar 3 Click en Nubes 6 Ir al menú Archivo 3 Guardar Como 3 Nombrar el archivo 3 Formato PSD 3 Click en Capas 3 Guardar 5 Pulsar Ctrl + D para soltar selección 3 Menú Archivo 3 Guardar como 3 Elegir TIFF 3 Escribir nombre 3 Guardar Reconstruir y mejorar retratos Aunque no puede decirse que la informática haga verdaderos milagros. estamos hablando de técnicas digitales. rodea toda la parte inferior de la 2 foto. y escoge Invertir (puedes pulsar la combinación Ctrl + I). Pulsa la combinación de teclas Ctrl + D para “soltar” la selección. para seleccionarla. + Click 3 Agregar zonas de selección 4 Ir a Paleta Capas 3 Crear Capa 3 Ir a Paleta Muestras 3 Seleccionar azul para el frente 3 Seleccionar Blanco para el fondo 3 Click con la varita en el fondo 3 Pulsar Mayús. de entre las que se ofrecen a la hora de guardar. Utiliza la compresión LZW.Curso Ahora el fondo de la imagen se ha convertido en un motivo personalizado. Puedes unir digitalmente dos trozos de una foto. por supuesto. 1 pulsa la tecla Suprimir (o Retroceso) para borrar el fondo. y escoge la Varita Mágica. hacen falta bastantes horas de práctica. En este momento has invertido la selección. ya que así puedes volver a esitarlas cuantas veces lo desees. y para eso tienes en Photoshop y Paint Shop Pro a dos aliados extraordinarios.. de manera de “restar” esta área de la selección. Ve a la Paleta de Herramientas. es la de reconstruir una fotografía que se ha roto. Ahora tienes seleccio- marca las casillas de verificación. 3 Ahora abre el menú Selección. y en el cuadro de diálogo escribe un nombre para el archivo. a veces lleva a cabo tareas que en otras épocas hubieran sido inimaginables.pctoday. Puedes dejar como fondo el color negro de la tapa del escáner. y Usar todas las capas. y has “cogido” ambos trozos de la foto. Resumiendo. Photoshop 1 Ir al menú Archivo 3 Escoger Abrir 3 Seleccionar imagen 3 Abrir 2 Ir a Barra de Herramientas 3 Elegir Varita Mágica 3 Configurar Propiedades Paint Shop Pro 1 Abrir Menú Archivo 3 Escoger Abrir 3 Seleccionar fotografía 3 Abrir 2 Ir a Paleta de Herramientas 3 Elegir Varita Mágica 3 Configurar Propiedades 3 Click en el fondo 3 Pulsar Mayús. y sin soltar el botón del ratón. Finalmente. una de ellas. sin que se vean marcas ni huellas. configura sus parámetros desde la Barra de Propiedades. Guarda el archivo en formato TIF con una buena resolución (300 dpi serán más que suficientes). 54 www. sin perder calidad en el proceso. todas las cosas son difíciles antes de hacerse fáciles… ¿Verdad? Sigue paso a paso este ejercicio. Luego haz click con la varita en la zona negra que ha quedado por detrás de la foto. 5 y luego pulsa el botón Guardar. o empezando desde el principio con el archivo original. y nado solamente el trozo superior de la foto.es . Photoshop Procura escanear la foto con los trozos colocados cerca uno del otro. Siempre te interesa guardar este tipo de imágenes en formato Tiff. de la siguiente manera: Tolerancia. abre el menú Archivo. de más está decir que para que el trabajo sea perfecto. Ve a la Paleta de Herramientas. 20. escoge Marco Rectangular. sin llegar a tocarse. como una selección flotante que podrás mover libremente. Pero recuerda. en Suavizado. Relájate y experimenta todo lo posible sin temor a equivocarte. en el apartado Tipo elige TIFF. Contiguo. para que no se produzca pérdida de información pero el tamaño del archivo sea menor.. pulsa la tecla Alt. escoge Guardar como.

Una vez que hayas acabado. y escoge Invertir (puedes pulsar la combinación Mayús + Ctrl + I) Paint Shop Pro tijera. 2 6 Aprovecha que estás usando el Tampón de Clonar. Acércate con el ratón a la zona rota de la fotografía. como el lazo. Guarda el archivo en formato TIF con una buena resolución (300 dpi serán más que suficientes). Ve a la Paleta de Herramientas y escoge nuevamente la Herramienta S e l e c c i o n a r.. hasta cubrirla totalmente. y sin soltar el botón del ratón. y has “cogido” ambos trozos de la foto. allí es donde radica la clave del éxito en este tipo de retoques. y marca Muestra Fusionada. y verás que el cursor se transforma en una pequeña 4 la fotografía. haz click en el trozo y sin soltar el botón del ratón. 20. Una vez que hayas acabado. 1 5 Ahora ve a la Paleta de Herramientas y escoge el Tampón de Clonar. Acércate con el ratón a la zona rota de la fotografía: haz click en el trozo y sin soltar el botón del ratón. modifica el tamaño del pincel con que trabajas. Aprovecha que ya estás utilizando la herramienta Pincel de Copia. arrástralo literalmente hasta “pegarlo” al trozo inferior de la foto. Si lo deseas. 1. A continuación debes ir copiando información con píxeles sanos de la imagen (pulsando Mayús + Click). de la siguiente manera: Correspondencia. y de esta manera mejorar el aspecto general de Ve a l a Paleta de Herramientas. Resumiendo. abre el menú Archivo y elige Guardar para aplicar los cambios. y escoge la Varita Mágica. pulsa la tecla Alt. Cuando tengas algo más de práctica. para evitar que se note. rodea toda la parte inferior de la foto. edita sus parámetros desde la Paleta de Configuración. Ahora tienes seleccionado solamente el trozo superior de la foto. y Procura escanear la foto con los trozos colocados cerca uno del otro. adaptándolo a cada zona estropeada. abre el menú Archivo y elige la opción Guardar para aplicar todos los cambios. En este momento has invertido la selección. para corregir otros desperfectos en la foto como manchas y arañazos. sin llegar a tocarse. Puedes dejar como fondo el color negro de la tapa del escáner.. para corregir otros desperfectos en la foto como manchas y arañazos y de esta manera mejorar el aspecto general de la fotografía. Consejo Procura realizar la tarea de clonar píxeles sanos con la mayor dedicación posible. 4 6 pintar sobre la “cicatriz” de la unión de ambos trozos de foto. para aplicar correcciones con más detalle. Luego haz click con la varita en la zona negra que ha quedado por detrás de la foto. y pulsa la tecla Suprimir para limpiar el fondo. y pintar sobre la “cicatriz” de la unión de ambos trozos de foto. Ve a la Paleta de Herramientas. Es algo que requiere bastante tiempo y dedicación. escoge Seleccionar. de manera de “restar” esta área de la selección . Es algo que requiere bastante tiempo y dedicación. Progresivo. Parte 5ª Ve a la Paleta de Herramientas y escoge la Herramienta Mover. A continuación debes ir copiando información con píxeles sanos de la imagen (pulsando Alt + Click). 3 Ahora abre el menú Seleccionar. Photoshop 1 Escanear foto rota 3 Dejar fondo negro 3 Guardar en TIFF a 300 dpi 2 Ir a Paleta de Herramientas 3 Escoger Varita Mágica 3 Editar Propiedades 3 Click en fondo negro 3 Suprimir el fondo Paint Shop Pro 1 Escanear foto rota 3 Dejar fondo negro 3 Guardar en TIFF a 300 dpi 2 Ir a Paleta de Herramientas 3 Escoger Varita Mágica 3 Configurar Propiedades 3 Click en fondo negro 3 Suprimir el fondo 3 Abrir menú Selección 3 Escoger invertir 3 Ir a Paleta de Herramientas 3 Escoger Marco Rectangular 3 Alt + desplazar para restar selección 3 Menú Seleccionar 3 Escoger Invertir 3 Ir a Paleta de Herramientas 3 Escoger Seleccionar 3 Alt + desplazar para restar selección 4 Ir a Paleta de Herramientas 3 Escoger Mover 3 Click en trozo roto 3 Mover y pegar hacia abajo 4 Paleta de Herramientas 3 Seleccionar 3 Seleccionar el trozo a reparar 3 Mover y pegar hacia abajo 5 Ir a Paleta de Herramientas 3 Escoger Tampón de clonar 3 Alt + click para copiar píxeles sanos 3 Pintar sobre la unión 5 Paleta de Herramientas 3 Escoger Pincel de copia 3 Mayús + click para copiar píxeles sanos 3 Pintar sobre la unión 6 Corregir manchas y arañazos 3 Abrir menú Archivo 3 Guardar 6 Corregir manchas y arañazos 3 Menú Archivo 3 Guardar Nº 98 55 . arrástralo literalmente hasta “pegarlo” al trozo inferior de la foto Ahora ve a la Paleta de Herramientas y escoge el Pincel de Copia. puedes realizar el mismo procedimiento con otra herramienta de selección. RVA. pa- 5 ra evitar que se note. Tolerancia.Retoque fotográfico. para seleccionarla. hasta cubrirla totalmente.

4 Abre el menú Colores. sin alterar otras variables como su brillo. y la modificación del tono y la saturación de una imagen. Cuando el color sea el elegido. y el cursor se transformará en un gotero. completa la información con los siguientes valores: en Editar. y muy pocos podrán darse cuenta que la foto ha sido manipulada digitalmente. La ventaja de este método radica en que puedes modificar la coloración de cualquier objeto. Luminosidad. y la Luminosidad agrega Luz. y escoge la que representa la de Saturación. Una vez que hayas localizado la foto en tu disco duro. y elige Gama de Colores. En el apartado Editar. Cuando la selección sea correcta. Deja el resto de valores intactos. luego haz click con el gotero en una zona de color pleno del coche. en blanco y negro. pulsa en Abrir. Ahora puedes desplazar 4 los reguladores de Tono. pulsa caso los valores han sido: Tono. dirigiéndote al menú Archivo y seleccionando Abrir. En el cuadro de diálogo que aparezca. y Luminosidad. www. elige Muestrea- 2 Abre el menú Imagen. y haz click en Guardar. En la Paleta de Configuración. Una vez que la hayas localizado en tu disco duro. pulsa el botón OK. pero imagínate todos los casos en que también te podrá ser útil… ¡son casi infinitos! Abre el menú Selección. En este una Varita Mágica. Ten en cuenta que la Saturación agrega intensidad de color. Si la selección que ha creado la varita no abarca todo el color del coche. selecciona Ajustes y luego elige Tono / Saturación (o pulsa la combinación Ctrl + U). Finalmente abre el menú Archivo. textura o reflejos. Saturación. elige Guardar la tecla Mayúsculas y sigue clickeando simultáneamente en distintas zonas del color del coche. Si observas que la selección no abarca la totalidad del vehículo. hasta que la selección lo abarque todo. -6. escribiéndolo en la casilla de texto o desplazando la barra del cuadro de diálogo.Curso Colorizar y entonar Si estás pensando en cambiar de coche. y –3 en Luminosidad. 1 Ahora verás unos halos rodeando el área del coche que has seleccionado (el color dominante).pctoday.es . Marca la casilla de verificación Ver. Paint Shop Pro guna. Con herramientas tan sencillas como la selección por gama de colores. y escribe 40 como valor en el apartado Tolerancia. Un valor cero deja intactas estas variables. 3 A continuación haz click con la varita en alguna zona del coche donde el color sea homogéneo. También puedes pulsar la combi- 3 Como (o pulsa la combinación Mayús + Ctrl + S). selecciona Tinte del apartado Correspondencia. ponle un nuevo nombre al archivo. y no te has decidido por ningún color en particular… este truco es para ti. El cuadro de diálogo te mostrará una previsualización de la selección que 5 Photoshop 1 Comienza por buscar la foto de tu coche o de otro elemento habitual que tenga buena calidad. Pulsa el icono del ojo para previsualizar el resultado en la foto original. selecciona Todos. puedes subir el nivel de tolerancia. selecciona la opción Maestro. pulsa el botón abrir. Escoge alguna en donde el color sea bastante nítido y no haya otros elementos que lo tapen de forma al- has creado. Saturación. escoge Ajustar y finalmente abre la opción Tinte/Saturación/Luminosidad. podrás obtener unos resultados impactantes en el retoque de tus fotografías. De esta manera el resultado es muy realista. Luego escribe 135 en la casilla Tinte. para previsualizar el resultado en la fotografía. -6 en 2 56 ve a la Paleta de Herramientas. exactamente igual que aparecen por defecto. dos. Se abrirá un cuadro de diálogo. En este caso hemos aplicado la técnica sobre la foto de un automóvil. Comienza por buscar la foto de tu coche. pulsa el botón OK. Dirígete al menú Archivo y selecciona la opción Abrir. nación de teclas Mayús+H. -3. Deja el apartado Colorear sin marcar. En el apartado Seleccionar. +135.

abre el menú Archivo. Resumiendo. ya sea PSD de Photoshop o PSP de Paint Shop Pro. el tamaño del archivo será más liviano y se descargará más rápido desde Internet.. De esta forma se conservará toda la información de capas y efectos que se hayan aplicado sin merma de calidad y con posibilidad de volver atrás sobre los cambios realizados.. y sin soltar el botón del ratón. pero por detrás aparece un personaje anónimo que (sin querer) estropea la escena. además de ser compatible con la mayoría de los navegadores de Internet. Para la Web. Photoshop 1 Ir al menú Archivo 3 Elegir imagen 3 Abrir 2 Abrir menú Selección 3 Elegir Gama de Colores 3 Tomar muestra de color Paint Shop Pro 1 Ir al menú Archivo 3 Elegir imagen 3 Abrir 2 Paleta de Herramienta 3 Elegir Varita Mágica 3 Configurar propiedades 3 Click con la varita en el coche 3 Seleccionarlo todo 4 Menú Colores 3 Ajustar 3 Tinte/Saturación 3 Editar valores 5 Aceptar cuando el color sea óptimo 3 Abrir menú Archivo 3 Guardar como 3 Nombrar archivo 3 Guardar 3 Aumentar Nivel de Tolerancia 3 Pulsar OK 4 Abrir menú Imagen 3 Elegir Ajustes 3 Tono y Saturación 3 Editar valores 5 Pulsar OK cuando el color sea óptimo 3 Abrir menú Archivo 3 Guardar como 3 Nombrar archivo 3 Guardar 6 Conservar el original en Tiff. Para ello. agregar. elige la opción Guardar Como o pulsa la tecla F12. 3 1 2 Nuevamente ve a la Paleta de Herramientas. Seguramente al principio te costará un poco. elige Jpeg. te divertirás en grande. A continuación. Repite el mismo procedimiento tantas veces como sea necesario.en el aparatado Formato. Finalmente abre el menú Archivo. y elige Borrar. A continuación realiza con sumo cuidado una selección a mano Ahora abre el menú Edición. pero ahora escoge la Herramienta Lazo. sin dejar siquiera una huella. De esta manera. puedes empezar nuevamente. guardar como Jpeg. En el cuadro de diálogo ponle un nuevo nombre al archivo para que no sustituya al original y puedas volver a éste en otra ocasión. en la Barra de Propiedades. Aunque tú no seas un fotógrafo profesional. debes utilizarlas con cautela y buscar que al transformar colores. nuevamente Guardar como y .Retoque fotográfico. has eliminado a la persona y en su lugar queda un espacio en blanco. escribe 2 px en el apartado Calado. en la zona que deseas copiar. hasta cubrir toda la zona blanca. Si te equivocas y la selección desaparece. y más pronto que tarde estarás retocando fotos como un verdadero artista. y marca la casilla de verificación Suavizado. de manera que el truco sea imperceptible y realista. procura dejar un margen suficiente para observar algo del entorno. 100%. Opacidad: 100%. Pero recuerda que todo es cuestión de horas de prác- Photoshop Desde el menú Archivo. con la muestra que has tomado. pintando sobre el área que ha quedado en blanco. pulsa el botón de Aceptar. Con Photoshop y Paint Shop Pro es muy sencillo eliminarlo de la composición. comienzas a pintar en la zona blanca. También es muy útil si deseas imprimir la imagen en cuestión. 5 Como siempre. es muy sencillo Modificar y eliminar personajes tica y experiencia. elige Abrir y escoge una fotografía en la que puedas eliminar algún personaje. hazlo con paciencia y tranquilidad. y quedarán algunas marcas en la zona donde se encontraba el personaje eliminado. Haz click en Guardar. Haz click en Abrir. Debes intentar que el blanco Nº 98 57 . puedes aprender el siguiente truco y comenzar a experimentar con tus propias fotografías. pulsa la tecla Alt y haz click simultáneamente con el Dirígete a la Paleta de Herramientas. Gif o PNG. Hoy en día. escoge Consejo Las herramientas de Tono y Saturación son armas muy sutiles y extremadamente sensibles. ya que conservará más detalle que si utili- 6 zas métodos de compresión. y marca las casillas Alineado y Usar todas las capas. Como consecuencia. Flujo. Pero si deseas enviar la imagen por correo electrónico o colocarla en una página web. selecciona el área donde se encuentra la persona que eliminarás. Has ampliado la vista de la zona que editarás. y configura sus propiedades de la siguiente manera: Modo. conserva la versión original del archivo en formato Tiff o en el original del programa que estés utilizando. también puedes pulsar la tecla Retroceso de tu teclado. Normal. tampón de clonar. 4 5 Tu tarea ahora consiste en ir clonando partes del fondo del paisaje. quitar o modificar personas que aparecen en las fotografías. los resultados no sean excesivamente notorios ni artificiales. y escoge la Herramienta Zoom (el icono de la lupa). con los avances de la informática (y en particular del retoque digital de imágenes). Parte 5ª Cuando el color se haya transformado en el verde del ejemplo. Ahora desde la Paleta de Herramientas elige el Tampón de Clonar. Ahora haz click alzada alrededor del sujeto que vas a eliminar. Imagínate cómo se aprovechan los fotógrafos profesionales de estas herramientas: han capturado una instantánea perfecta e irrepetible de una celebridad mundial. sobre la imagen. Evita llegar a saturación que produzca colores “fluo”: intenta conservar el brillo y la textura de los colores originales.

Dirígete a la Paleta de Herramientas. A continuación. y elige Limpiar. puedes empezar de nuevo. A continuación. que no elimine información que deseas conservar. Finalmente abre el menú Archivo. y configura sus propiedades de la siguiente manera: Forma. comienza a pintar en 5 la zona de color blanco. Haz click en el botón guardar. Y como siempre: practica. donde se encuentra la persona que eliminarás. 100. Lo óptimo sería que el fondo fuera homogéneo. también puedes pulsar la tecla Suprimir de tu teclado.Práctico se fusione con el fondo.. elige la opción Guardar Como. 1. Como consecuencia. Ahora desde la Paleta de Herramientas elige el Pincel de Copia. Procura dejar un margen suficiente para observar algo del entorno. de manera que el truco sea natural y no queden “cicatrices” del retoque. hazlo con paciencia y tranquilidad. De esta forma podrás conservar el original intacto. Has creado un pincel redondo con los bordes suavizados. ya que será una referencia básica en el proceso que viene a continuación. Para ello tendrás que pintar sobre el área que ha quedado en blanco. una selección ajustada.. pero no es imprescindible porque con las herramientas adecuadas se puede inventar lo que falta. y escoge Acercar (el icono de la lupa). Opacidad. 50. inventarte lo que debería haber detrás del personaje eliminado.. o pulsa la tecla F12. ponle un nuevo nombre al archivo (para conservar el original intacto). 20. Consejo Aquí hay dos factores muy importantes que determinarán la calidad del retoque digital. con la muestra que has tomado. Tamaño. Es tan fácil como parece. de manera que el truco sea natural y no queden “cicatrices” del retoque . en la casilla Nombre. de bordes suaves. Ahora haz Dirígete a la Paleta de Herramientas. escoge la Herramienta Lazo. Debes intentar que el blanco se fusione con el color del fondo. Si te equivocas y la selección desaparece. haz click en Abrir. en primer lugar. De esta forma. A continuación realiza con sumo cuidado una selección a mano alzada alrededor del sujeto que vas a eliminar. selecciona el área Ahora abre el menú Edición. 4 necesario. el ingenio y buen ojo que hacen falta para escoger acertadamente las zonas ideales para clonar. Por otro lado. en la Paleta de Configuración. y practica… 3 Finalmente abre el menú Archivo. cielo y paisajes lejanos (como en este ejercicio) la tarea se simplifica. de tal forma que no se note en exceso. ya que los defectos se disimulan muy fácilmente. Redonda. dife- 6 rente al de la imagen original. escribe 2 en el apartado Progresivo. pero tendrás una versión retocada el mismo. y marca la casilla de verificación Antiarrugas. Pulsa la tecla Shift y haz click simultáneamente con la herramienta del Pincel de Copia. Definición. elige Guardar Como (o pulsa la combinación Ctrl + Mayús + S). hasta cubrir toda la zona del color elegido.es . selecciona la opción A mano alzada. escribe un nuevo nombre para el archivo.pctoday. 100. y haz click en Guardar. Tu tarea ahora consiste en clonar partes del fondo del paisaje. en la zona que deseas copiar. elige Abrir y escoge una fotografía en la que aparezca algún personaje que desees eliminar. Photoshop 1 Ir al menú Archivo 3 Elegir Abrir 3 Seleccionar fotografía 3 Abrir 2 Abrir Paleta de Herramientas 3 Escoger Zoom 3 Click y desplazar 3 Ampliar imagen Paint Shop Pro 1 Ir al menú Archivo 3 Elegir Abrir 3 Seleccionar fotografía 3 Abrir 2 Abrir Paleta de Herramientas 3 Escoger Acercar 3 Click y desplazar 3 Ampliar imagen 3 Ir a Paleta de Herramientas 3 Escoger Lazo 3 Configurar Propiedades 3 Realizar selección a mano alzada 3 Ir a Paleta de Herramientas 3 Escoger Lazo 3 Configurar Propiedades 3 Realizar selección a mano alzada 4 Abrir Menú Edición 3 Borrar 3 Ir a Paleta de Herramientas 3 Elegir Tampón de Clonar 3 Configurar Propiedades 4 Abrir Menú Edición 3 Borrar 3 Ir a Paleta de Herramientas 3 Elegir Pincel de copia 3 Configurar Propiedades 5 Click + Alt para tomar muestras 3 Pintar clonando hasta cubrir las zonas blancas 5 Click + Mayúsculas para tomar muestras 3 Pintar clonando hasta cubrir las zonas blancas 6 Abrir menú Archivo 3 Elegir Guardar Como 3 Nombrar archivo 3 Guardar 6 Abrir menú Archivo 3 Elegir Guardar Como 3 Nombrar archivo 3 58 www. 6 1 2 Paint Shop Pro En el menú Archivo. o lo que es lo mismo. En la ventana que se abre. Cuando se trata de árboles. Repite el mismo procedimiento tantas veces como sea click sobre la imagen. practica. y sin soltar el botón del ratón. has ampliado la vista de la zona que editarás. Resumiendo. Densidad. has eliminado a la persona y en su lugar queda un espacio en blanco. Paso.

abrirá el Asistente de Enmarcado. Para agregar marcos a tus fotos desde Photoshop. A partir de allí. en formato TIFF. puede que tengas muchas imágenes en papel que quieras almacenar junto a las primeras. Este dispositivo explora la información de tu fotografía con un haz de luz. lista para archivar o para retocar en la aplicación que has utilizado o en cualquier otra compatible con el formato en que la has guardado. en Original selecciona 3 + S. en Entrada (o Resolución) escribe 300 dpi. ya que ambos aprovechan el software que viene incluido con el escáner o el propio de Windows XP. el enfoque y la gama de colores. En cuanto a Photoshop. planos. como en las viejas fotos de tus abuelos. que puedes aprovechar al máximo antes de escanear: parámetros como el brillo y el contraste. En Paint Shop Pro. Los bordes también pueden ser suavizados. algo que ya es habitual en casi la totalidad de los productos. aplicando los infinitos efectos de capa que encontrarás dentro Resumiendo. pero básicamente estos son los valores importantes: en Modo de Color escoge RGB. habitualmente puedes configurarlos desde el software del escáner. Suelta el botón izquierdo del ratón que quede seleccionada el área que deseas adquirir. Y guarda el archivo con un nombre diferente. En el apartado Formato escoge TIFF para que la imagen no pierda calidad. Aplicar bordes y marcos creativos Algo muy interesante es la aplicación de marcos personalizados a las fotos. Coloca los bordes de la foto junto a cual- Abre el menú Archivo. para conservar intacto el original. se del menú Capa. elige un destino de tu disco duro. Consejo Los controladores de la mayoría de los escáneres traen de serie potentes funciones. lista para archivar o retocar con las herramientas de tu programa. además de las típicas fotografías o documentos en papel.Curso Escanear fotografías Aunque ya sólo utilices tu cámara digital. Luego puedes crear el marco en una nueva capa. en un CD o en el propio disco duro del PC. Podrás volver a editarlo en cualquier momento. que ofrecerá algunos estilos predefinidos. ■ Configura los parámetros de exploración de la imagen.. hazlo en una nueva capa así preservas los píxeles “reales” de la foto. Luego pulsa el botón Digitalizar. El nombre de los apartados puede variar de acuerdo a cada software. y finalmente haz click en Guardar. necesitarás un escáner. Pon la imagen hacia abajo para que el haz de luz pueda capturarla. Incluso los hay específicos para escanear objetos en tres dimensiones. Paint Shop Pro y Adobe Photoshop Apoya la foto que desees digitalizar sobre el vidrio de tu escáner o la bandeja de entrada del mismo. El proceso es muy similar en ambos programas. se abrirá la fotografía en una nueva ventana de Photoshop o de Paint Shop Pro. escribe un nombre descriptivo para tu fotografía. o imprimirlas para sorprender a tus familiares y seres queridos. te ahorrarás mucho tiempo en el tratamiento posterior de la fotografía. Pulsa el botón Previsualizar 2 Opaco. Puedes crear marcos rectangulares o elípticos. o pulsa la combinación Ctrl 4 quier ángulo del escáner.. ¡Eso es todo! Ya tienes tu foto en formato digital. y luego en Estilo de Capa. o en relieve. Algunos modelos incluso pueden realizar el proceso con diapositivas. Ahora coloca el puntero del ratón en un ángulo de la fotografía. También puedes aplicarlos para colocar en un álbum de fotografías en la web. Luego baja la tapa del escáner si es necesario o procede a activar el botón de preparado si es un escáner de bandeja. traduce esa información a unos y ceros para que la entienda el ordenador y la vuelca a tu programa favorito de tratamiento de imágenes. con los que seguramente llegarás a resultados sorprendentes. debes abrir el menú Imagen y luego escoger la opción Marcos. selecciona la opción Importar. no es todo tan sencillo ya que no posee una herramienta automatizada (como Paint Shop Pro) que lleve a cabo esta tarea. transparencias y otros tipos de representaciones. y sin soltar el botón arrastra hasta 1 para que el escáner haga un barrido y te muestre lo que has colocado sobre la bandeja. Éste ha de ser compatible con el estándar TWAIN. Para hacerlo. Si aprendes a manejar a fondo estas funciones. para que la foto quede correctamente alineada con la dirección de lectura. El límite lo pone tu creatividad. Se abrirá la ventana del software de tu escáner. primero debes ampliar el tamaño del lienzo para crear unos bordes blancos alrededor de la fotografía. Ya tienes tu fotografía en formato digital. escoge TWAIN y luego la opción Adquirir. abarcar toda su superficie. y en Escalar escoge el 100%. el cual es un periférico dedicado expresamente al proceso de digitalizar imágenes. 1 Apoyar la foto en el escáner 3 Ajustarla a un ángulo 3 Bajar la tapa 2 Abrir menú Archivo 3 Elegir Importar 3 Elegir TWAIN 3 Click en Adquirir 3 Se abre ventana del controlador 3 Click en Previsualizar 3 Configurar parámetros de exploración 3 Seleccionar fotografía 3 Click en Digitalizar 4 Se abre la foto 3 Abrir menú Archivo 3 Escoger Guardar 3 Formato TIFF 3 Nombrar foto 3 Click en Guardar Nº 98 59 . Recuerda algo importante: siempre que apliques marcos personalizados a tus fotografías. Abre el menú archivo y escoge Guardar. Una vez que finalice la exploración de la imagen. Puedes aplicar los marcos para enviar tarjetas de felicitación a través del correo electrónico.

pctoday. Máscara rápida. muchos de estos problemas pueden solucionarse casi mágicamente. ya que deseamos que en el futuro nos recuerden como bellas personas… en el más amplio sentido de la expresión. Gracias a las fabulosas herramientas que ofrecen Adobe Photoshop y Paint Shop Pro. 3. bordes y marcos creativos. Eliminar arañazos rectos. Conceptos básicos. PC Today nº 98 Eliminar defectos de la piel. ya que aprenderás básicamente a embellecer los retratos de tus seres queridos . Corrige el aspecto general de tus fotos. borrar elementos no deseados. PC Today nº 94 En esta última entrega del curso de retoque fotográfico digital. Extraer. Brillo y contraste. corregir polvo y rascaduras. Es posible que muchas de las fotografías que nos han tomado a través de los años. capas de ajuste. enfoque suavizado. el protagonista es el retrato. el ser humano es el protagonista. minimizar manchas. mejorar los retratos con luz. También podrás corregir el típico problema de ojos rojos que ha estropeado tantas fotografías. Recreando fotos creativamente. tono. Esta actitud es muy comprensible. lee atentamente los trucos que te enseñamos a continuación… ¡y tus nietos te recordarán como una hermosa persona! En este capítulo del curso. Técnicas de reparación de fotos (I). 6. 5. no nos muestren muy agraciados. eliminar el moiré. No hace falta que escondas ni Q 2. y aprenderás a usar efectos de desenfoque e iluminación para dar a tus retratos el toque de refinamiento que hará que se vuelvan inolvidables. exposición y color. Técnicas de reparación de fotos (II). ante el disparo de una cámara fotográfica? Todo el mundo desea aparecer con su mejor rostro en cualquier fotografía. Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. Introducción al retoque fotográfico. PC Today nº 97 Fondos personalizados. Embellecer y refinar retratos. Te transformarás en un “cirujano plástico digital”. Aquí te enseñamos los mejores trucos para que puedas embellecer y mejorar las fotografías de tus seres queridos y eliminar así las marcas del paso del paso del tiempo o corregir defectos de la piel. PC Today nº 99 rompas ninguna foto. en muy pocos pasos.es . The GIMP. 54 www. PC Today nº 96 4. PC Today nº 95 Reparar manchas y texturas. uién no se ha peinado o ha puesto una hermosa sonrisa.Curso Embellecer retratos Guía del curso 1. disimular el paso del tiempo. Selecciones sencillas. podrás eliminar arrugas y marcas del paso del tiempo. modificar personajes.

Desde la Paleta de Herramientas de Photoshop. Si el resultado te convence. 5 2 Desde la Paleta de Herramientas de Paint Shop Pro elige la Herramienta Acercar. elige la Herramienta Zoom. selección elíptica. y cuando el aspecto de los ojos sea lo más natural posible. para sumar las selecciones. y Todas las Capas. Luego varía la saturación del canal rojo. elige la opción Abrir y escoge una imagen que contenga alguna figura con el problema de ojos rojos. Haz click en el botón Abrir. 2 mayor distancia. sigue sumando áreas de selección con la herramienta que mejor manejes (lazo. para acercarte tanto como puedas . y sin soltar el botón. elige Abrir. o pulsa la combinación Ctrl + O y escoge la imagen con el problema de ojos rojos. la composición y la iluminación son casi perfectas. Luego haz click en la imagen y. en el apartado Editar. ya que logra buenos resultados. La técnica es muy sencilla y se basa principalmente en restarle saturación al canal del color rojo. En la Barra de Propieda- 1 des configura la Tolerancia con un valor de 35. etcétera). y haz click con la varita en la parte roja de los ojos. para obtener resultados aún más naturales. Haz click en el botón Abrir. apreciarás los efectos del proceso a realizar. para previsualizar el resultado. Escoge la Varita Mágica desde la Paleta de Herramientas. y todo parece estar fenomenal. solamente en la zona de las pupilas. sin soltar el botón. para corregir selectivamente dicho canal. haz click en el botón OK. desplaza el ratón abarcando el 3 Photoshop Desde el menú Archivo. En la Paleta de Configuración escoge Valor 3 Consejo Tanto en Photoshop como en Paint Shop Pro. selecciona Ajustes y finalmente escoge Tono / Saturación (también puedes pulsar el atajo Ctrl + U). salvo por un problema… los protagonistas parecen estar “endemoniados” ya que sus ojos presentan un extraño color rojizo. y marca las casillas correspondientes a Suavizado. pulsa SHIFT en tu teclado y haz click ahora sobre el otro 4 Paint Shop Pro Desde el menú Archivo. Si con la varita mágica no logras una selección correcta con el primer click. Deja el resto de valores intactos. despliega el menú correspondiente y escoge Rojos. Algunos programas de retoque fotográfico ya incorporan herramientas que solucionan éste problema de forma automática con muy buenos resultados. y mantener los valores de brillo y contraste inalterables. para ver el resultado de tu obra con una RVA en Correspondencia. para que su aspecto sea absolutamente natural. 1 Es casi imposible que nunca te haya sucedido lo siguiente: la fotografía que has tomado es preciosa. abre el menú Archivo y selecciona la opción Guardar. desplaza el ratón abarcando un área que encierre los ojos. Contiguo. A continuación debes seleccionar sólo el área defectuosa de los ojos. marca la casilla Muestra Fusionada. Se ha abierto el cuadro de diálogo Tono / Saturación. A continuación abre el menú Imagen. luego haz click en la imagen. y escribe 35 como valor de Tolerancia. normalmente situada a a la izquierda del área de trabajo.Retoque fotográfico. y escoge Encajar en pantalla. A continuación debes seleccionar el área defectuosa de los ojos. 6 Abre el menú vista. Haz click en la casilla de verificación Ver. buscando que el ojo mantenga su brillo y textura. para crear una selección. Pero aquí aprenderás a utilizar tu sentido común y hacerlo en forma manual. De esta forma podrás ver mejor la zona en la que vas a trabajar y ojo. De esta forma se aplicarán los cambios en tu imagen de forma definitiva. Dirígete al apartado Saturación y desplaza el regulador hacia la izquierda. Nº 99 55 . Parte 6ª Corregir ojos rojos Dirígete a la fotografía ampliada. área de los ojos. Manos a la obra. la clave en este truco (como en muchos otros) consiste en lograr una selección ajustada y precisa. Escoge la herramienta Varita Mágica desde la Paleta de Herramientas. Define un valor aproximado de –50.

El resultado dependerá mucho de la calidad de la imagen original. y haz click con la varita en la parte roja de los ojos. selecciona Ajustar y finalmente escoge Tinte / Saturación / Luminosidad. Opacidad 50%. y llámala “Eliminar Defectos. y configura un pincel suave de 15 píxeles. 6 Resumiendo. para verlas más en detalle. y sin soltar el botón. Haz click en el icono del Ojo. Deja el resto de valores intactos. pulsa SHIFT en tu teclado y haz click ahora sobre el otro ojo. Luego dirigete a la Paleta Capas. para que puedan tener un aspecto perfecto. Escoge la foto que deseas corregir de tu disco duro o de cualquier otro dispositivo de almacenamiento. copiando información buena de la piel y aplicándola sobre una capa vacía. y escoge Alejar x 5. para aplicar los cambios en tu imagen. Photoshop 1 Ir al menú Archivo 3 Escoger Abrir 3 Seleccionar imagen 3 Abrir 2 Ir a Paleta de Herramientas 3 Elegir Zoom 3 Click y arrastrar 3 Ampliar imagen Paint Shop Pro 1 Ir al menú Archivo 3 Escoger Abrir 3 Seleccionar imagen 3 Abrir 2 Ir a Paleta de Herramientas 3 Elegir Acercar 3 Click y arrastrar 3 Ampliar imagen 3 Ir a Paleta de Herramientas 3 Escoger Varita Mágica 3 Configurar Propiedades 3 Ir a Paleta de Herramientas 3 Escoger Varita Mágica 3 Configurar Propiedades 4 Click en zona defectuosa 3 Abrir menú Ajustes 3 Escoger Tono / Saturación 4 Click en zona defectuosa 3 Abrir menú Ajustar 3 Escoger Tinte / Saturación / Luminosidad 5 Editar Cuadro de diálogo 3 Restar Saturación 3 Previsualizar el resultado 3 Click en OK 5 Editar Cuadro de diálogo 3 Restar Saturación 3 Previsualizar el resultado 3 Click en OK 6 Abrir menú Vista 3 Encajar en Pantalla 3 Abrir menú Archivo 3 Guardar 6 Abrir menú Ver 3 Alejar x 5 3 Abrir menú Archivo 3 Guardar Eliminar defectos de la piel Nadie esta exento de tener pequeñas marcas en la piel: desde el acné juvenil hasta las arrugas de la vejez.. 3 Desde la Paleta de Herramientas de Photoshop elige la Herramienta Zoom (el icono de la Lupa). para sumar las selecciones. 4 Se ha abierto el cuadro de diálogo Tinte / Saturación / Luminosidad. sino en copiarla de otro sitio donde sea más perfecta.Curso Dirígete a la fotografía ampliada. deja el resto de valores que queden intactos. Si el resultado te convence. haz click en el botón Aceptar. Luego dirígete a la Barra de Propiedades. y haz 56 www. y pulsa el botón Crear una capa nueva. Photoshop Desde el menú Archivo haz click en Abrir. Vamos a hacer de cirujanos plásticos. despliega el menú y escoge Rojos. ¡Muchas de ellas suelen aparecer “horribles” en las fotos! De esta manera podremos eliminar sus espinillas y pequeñas marcas en el rostro. para ver el resultado de tu obra con una mayor distancia.es . Dirígete a la 1 Ve a la Paleta de Herramientas y selecciona el Tampón de Clonar. A continuación abre el menú Colores. puedes hacerlo también pulsando la tecla S.. las Capas. 2 Modo Normal. en el apartado Editar. En este ejemplo veremos como quitar pequeñas espinillas del rostro de una adolescente. Luego haz doble click en el nombre de la capa. 5 Abre el men ú Ve r. abre el menú Archivo y escoge Guardar (o pulsa la combinación Ctrl + S). y cuando el aspecto de los ojos sea lo más natural posible. desplaza el ratón abarcando la zona de las espinillas. para corregir selectivamente dicho canal. nuestra piel va registrando diversos cambios que reflejan los acontecimientos a lo largo de nuestra vida. y marca Usar Todas Paleta Capas. ya que no consiste en inventar piel. un valor aproximado de –60 logra buenos resultados.pctoday. la técnica consiste en utilizar el tampón de clonar. luego haz click en la imagen. para crear una selección. para previsualizar el resultado. Ve al apartado Saturación y desplaza el regulador hacia abajo. Tanto en Photoshop como en Paint Shop Pro.

para tomar muestras de piel sana con valo- 4 pelera de la Paleta Capa y volver a comenzar nuevamente. haz click + Shift en zonas cercanas a las espinillas. hasta que las marcas sean imperceptibles. para ocultarlas bajo la “nueva piel”. para tomar muestras de piel sana con valores de brillo y color similares. En el cuadro de diálogo que se abre. abre el menú Capas y selecciona be “Eliminar Defectos” como nombre para la capa. Ve a la Paleta de Herramientas y selecciona el Pincel de Copia. de las espinillas. A continuación ve a la Paleta click en la capa de Eliminar Defectos para activarla. haz click directamente sobre las espinillas.. Repite el paso 4 sobre cada una de las marcas que encuentres en la piel.. Desde la Paleta de Herramientas de Paint Shop Pro elige la Herramienta Acercar (el icono de la Lupa). Una vez tomada la muestra. La diferencia radica en elegir acertadamente las zonas de piel sana. Con la herramienta Pincel de Copia. La gran ventaja de realizar la tarea sobre una capa vacía. para que el retoque sea imperceptible. para ocultarlas bajo la “nueva piel”. si no estás conforme con el resultado. y configura un pincel suave de 15 Acoplar Imagen. Repite este procedimiento dos o tres veces. Definición 50 y Opacidad 50. es que luego puedes editarla independientemente. y haz click en Aceptar. deja el resto de valores intactos. Finalmente Guarda tu archivo pulsando Ctrl + S para conservar los cambios. selecciona Fusionar. desplaza el ratón abarcando la zona 5 5 3 el menú Capas. para verlas más en detalle. si no estás conforme con el resultado. Cuando las espinillas hayan desaparecido. y sin soltar el botón del ratón. Una vez tomada la muestra. deja el resto de valores como vienen por defecto. Forma Redonda. Resumiendo. hasta que las marcas sean imperceptibles . Con la herramienta Tampón de Clonar. Repite este procedimiento dos o tres veces. o defectos y arrugas del papel. y luego haz click en Fusionar Todo (aplanar). luego haz click en la imagen. Repite el paso anterior sobre cada una de las marcas que encuentres en la piel. y pulsa res de brillo y color similares. haz click directamente sobre las espinillas. Finalmente Guarda tu archivo pulsando Ctrl + S para conservar los cambios. puedes borrar la capa Eliminar Defectos haciendo click en el icono de la pa- 1 el botón Crear una capa nueva.Retoque fotográfico. y haz click en la capa Eliminar Defectos para activarla. para que el resultado sea aún más perfecto. Dirígete a la Paleta Capas. Parte 6ª Consejo Esta técnica es similar a otras en las que has aprendido a eliminar manchas de humedad en fotos antiguas. abre 4 Paint Shop Pro Desde el menú Archivo haz click en Abrir y escoge la foto que deseas corregir de tu disco duro. Luego dirígete a la Barra de Propiedades. Photoshop 1 Abrir menú Archivo 3 Abrir foto 3 Ir a Paleta Capas 3 Crear capa 3 Nombrarla “Eliminar defectos” Paint Shop Pro 1 Abrir menú Archivo 3 Abrir foto 3 Ir a Paleta Capas 3 Crear capa 3 Nombrarla “Eliminar defectos” 2 Ir a Paleta de Herramientas 3 Click en Tampón de Clonar 3 Configurar Propiedades 2 Ir a Paleta de Herramientas 3 Click en Pincel de copia 3 Configurar Propiedades 3 Ir a Paleta de Herramientas 3 Elegir Zoom 3 Click y arrastrar para ampliar defectos 3 Ir a Paleta Capas 3 Activar capa “Eliminar defectos” 3 Ir a Paleta de Herramientas 3 Elegir Acercar 3 Click y arrastrar para ampliar defectos 3 Ir a Paleta Capas 3 Activar capa “Eliminar defectos” 4 Click + Alt con Tampón de clonar 3 Tomar muestras de piel 3 Click y pintar sobre espinillas 3 Repetir procedimiento 4 Click + Shift con Pincel de copia 3 Tomar muestras de piel 3 Click y pintar sobre espinillas 3 Repetir procedimiento 5 Borrar capa “Eliminar defectos” 3 Abrir menú Capas 3 Acoplar Imagen 3 Guardar archivo 5 Borrar capa “Eliminar defectos” 3 Abrir menú Capas 3 Fusionar todo 3 Guardar archivo Nº 99 57 . escripíxeles. haz click + Alt en zonas cercanas a las espinillas. cambiando su opacidad. Cuando las espinillas hayan desaparecido. 2 Capas.

Dirígete al menú Capas y selecciona la herramienta Duplicar. escribe 15 píxeles en el apartado Radio. vuelve atrás con Ctrl + Z. para apreciar mejor el efecto global. y enfocar sólo una zona. selecciona la opción Guardar del menú Archivo o pul- 6 Herramienta. 4 Dirígete a la Paleta de Herramientas y escoge la Herramienta Degradado (puedes pulsar la letra G de tu teclado). Vuelve a intentarlo. pulsa Ctrl + Z o elije la opción deshacer del menú Edición en la barra superior de la aplicación. e inténtalo una vez más. ya que allí está la clave de este truco. sino que también transmite una estética glamorosa muy particular. escoge Desenfocar. Esto sirve para 58 www. escoge Círculo en el apartado Tipo de Selección y escribe el valor 30 en el apartado Progresivo. y elige Desenfoque Gaussiano. Abre el menú Capa. Deja el resto de valores por defecto. Prueba varias veces. en cuanto a la zona desenfocada. 1 2 cuadro de diálogo que se abre.es . arrastra la herramienta hasta la zona más alejada de dicho centro. Selecciona la opción Añadir máscara de capa y haz click en Descubrir todas. Si el resultado del efecto no te convence. Pulsa la tecla D de tu teclado para escoger el blanco como color de 3 Dirígete a la Paleta de Herramientas y pulsa en el icono correspondiente a la de Seleccionar. Paint Shop Pro Desde el menú Archivo haz click en la opción Abrir y escoge la fotografía a la que deseas aplicarle el efecto de enfoque selectivo. Si observas estas revistas detenidamente. por los recuerdos que te transmite. sobre la cual deseamos centrar la atención del espectador. En el cuadro de diálogo que se abre.pctoday. En la Paleta de Configuración. donde la fotografía no solamente cumple una misión informativa. y desde el menú asociado la paleta escoge Duplicar Capa. y en Destino selecciona el mismo archivo que estás utilizando. selecciona Degradado Radial. Finalmen- A continuación haz click en el centro de atención de la fotografía. hasta que haya un equilibrio entre la zona enfocada y desenfocada. En el caso del ejemplo escogido serían los rostros del bebé y su madre. En la Capa para desenfocar debe haberte quedado un círculo 5 Consejo No tengas miedo en intentar varias veces el efecto del degradado. en la sección colores de la barra de herramientas. debe tener un equilibrio tal que no se vea demasiado borrosa. 2 Photoshop Desde el menú Archivo haz click en Abrir y escoge la foto a la que deseas aplicarle el enfoque selectivo. Debes lograr que la atención del espectador vaya directamente a la zona enfocada de la imagen. No te asustes si la imagen queda totalmente borrosa. Marca la casilla de verificación Ver para pre- sa la combinación de teclas Ctrl + S para aplicar los cambios a la imagen que acabas de editar. los brillos en las modelos. consiste en desenfocar solamente una parte de la imagen. el efecto es correcto. En el 1 visualizar el efecto. Dirígete a la Paleta Capas.Curso Efectos de enfoque suavizado Este truco resulta tan sencillo como sorprendente. fondo y el negro como color de frente o selecciónalo con el botón del ratón suavizado que va desde el color negro hasta el blanco. Puedes aplicar este efecto sobre una fotografía que aprecies especialmente. para aplicarle un toque aún más refinado. la coloración de los vestidos y el tono en general. Sin soltar el botón del ratón. Luego haz doble click en OK para duplicar la capa. Por último. Este efecto es muy utilizado en revistas de moda y belleza. escribe “Capa para desenfocar”. notarás que sus fotografías son casi perfectas. Podríamos llamarla “Técnica de enfoque selectivo. A continuación abre el menú Filtro. te pulsa OK para aplicar el filtro. (Captura 3010) En la Barra de Propiedades de la Abre el menú Capas y selecciona la opción Acoplar Imagen. Aléjate de tu monitor y observa el resultado con cierta distancia. transmiten un clima apacible y confortable a la vez.

Ahora busca el centro de atención de la fotografía (en este caso los rostros del bebé y su madre). haz click y sin soltar el botón del ratón. Photoshop 1 Desde el menú Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3 Duplicar Capa Paint Shop Pro 1 Desde el menú Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3 Duplicar 2 Abrir menú Filtro 3 Desenfocar 3 Desenfoque Gaussiano de 15 píxeles 3 Previsualizar efecto 3 Pulsar OK para aceptar 2 Ir a Paleta de Herramientas 3 Escoger el botón Seleccionar 3 Abrir Paleta de Configuración 3 Escoger la herramienta Círculo 3 Escribir 30 en Progresivo 3 Abrir menú Capa 3 Añadir máscara de Capa 3 Pulsar tecla D para configurar negro y blanco como colores de frente y fondo. y no eliminarlas totalmente. Aprende la técnica que desarrollamos a continuación y luego aplícala en forma combinada con las que has aprendido a lo largo del curso. 5 Abre el menú Capas. pulsa el icono del ojo pa- 4 zona enfocada y desenfocada. vuelve a intentarlo escribiendo otros valores. y en el apartado Radio escribe un valor alto como 15. Photoshop Desde el menú Archivo haz click en Abrir y escoge el retrato en el cual deseas minimizar las arrugas. selecciona Fusionar. Como siempre. y desde el menú asociado a la paleta escoge Duplicar Capa. Finalmente Guarda tu archivo pulsando Ctrl + S para aplicar los cambios.. 3 ra previsualizar el resultado. y haz click en Fusio- Resumiendo. Así conseguirás realizar retoques digitales totalmente imperceptibles. Se abrirá un cuadro de diálogo. arrastra para crear una selección elíptica de bordes suavizados. o pulsa la combinación de teclas Mayús + Ctrl + I. 3 Click + arrastrar para crear selección 3 Abrir menú Seleccionar 3 Escoger invertir 4 Ir a Paleta de Herramientas 3 Escoger Degradado 3 Ir a Barra de Propiedades 3 Click en Degradado Radial 4 Abrir menú Efectos 3 Elegir Desenfoque 3 Click en Desenfoque de Gauss 3 Escribir 15 en cuadro de diálogo 3 Click en Aceptar 5 Click + arrastrar desde el centro de atención 3 Intentarlo hasta lograr equilibrio 5 Abrir menú Capas 3 Escoger Fusionar 3 Click en Fusionar Todo 3 Ctrl + S para guardar los cambios 6 Menú Capas 3 Click en Acoplar Imagen 3 Ctrl + S para aplicar cambios Disimular el paso del tiempo Esta técnica también es muy utilizada en los medios escritos de comunicación.Retoque fotográfico. En el 1 Nº 99 59 . lo más importante es que el resultado final del retoque sea casi imperceptible y natural. ya que se utiliza para “rejuvenecer” a las personas fotografiadas. de manera que en este ejercicio intentaremos suavizar las arrugas. Si el resultado del efecto no te convence. A continuación abre el menú Efectos. de manera que una cara sin una sola arruga es algo imposible. elige Desenfoque y luego haz click en Desenfoque de Gauss. Parte 6ª Dirígete al menú Seleccionar y escoge Invertir. quitándoles algunas arrugas y suavizando marcas de la piel. crear una selección circular de bordes suavizados. Finalmente pulsa Aceptar para aplicar los cambios. Dirígete a la Paleta Capas. hasta que haya un equilibrio entre la nar Todo (aplanar). aún la persona más joven genera arrugas en su rostro con tan sólo reírse o gesticular..

se aplanarán las capas que formen la imagen y pasarán a ser un archivo más fácil de exportar a otras aplicaciones. y en Destino selecciona el mismo archivo que estás utilizando. En la Paleta de Configuración. Consejo Cuando realices este retoque digital. Opacidad 20. para verlas más en detalle. Guarda tu archivo de trabajo pulsando Ctrl + S para y se aplicarán los cambios realizados en la versión que tengas abierta en ese momento. para 5 Abre el menú Capas. Una vez que hayas finalizado la operación. 4 las más en detalle. Es importante hacia adentro. con paciencia y dedicación: sobreexponer la parte oscura de las arrugas. Luego haz doble click en OK para duplicar la capa. modifica las opciones del pincel que estés utilizando para que se adapte totalmente al grosor de cada 5 que el grosor del pincel sea similar al grosor de las arrugas de la piel. Abre el menú Capas y selecciona la opción Acoplar Imagen. modifica tu pincel adaptándolo al grosor de cada una de ellas. Con tan solo suavizarlas. dad ++. desde afuera hacia adentro. luego haz click en la imagen. y escoge un Pincel con bordes suavizados de 10 píxeles. selecciona la opción Fusionar y haz click en la opción Fusionar Todo. A continuación debes realizar el trabajo más fino. lo que corresponde al pliegue. haz doble click en “Copia de Capa de 1 abarcando la zona de las arrugas.es . si no las pinceladas se notarán y estropearán el efecto. Luego ve a la Paleta Capas. Si algunas arrugas son más gruesas que otras. desde afuera 4 Dirígete a la Paleta de Herramientas y escoge la correspondiente a Retoque. Debes ir aclarando de esta manera cada una de las arrugas. Es importante que el grosor del pincel sea similar al grosor de las arrugas de la piel. desde el cuadro de diálogo.Práctico cuadro de diálogo que se abre. Paso 25 y Densidad 80. 3 Desde la Paleta de Herramientas de Photoshop elige la Herramienta Zoom (el icono de la Lupa). con paciencia y dedicación: sobreexponer la parte oscura de las arrugas (el pliegue). además de ocupar bastante menos espacio en el disco. Debes ir aclarando de esta manera cada una de las arrugas. y haz click en Duplicar. una vez acoplada la imagen. lograrás que la persona retratada tenga una apariencia más fresca y lozana. Adapta el grosor de tu pincel a cada una de ellas. Y ten presente este consejo: busca siempre la naturalidad. elige Forma Redonda. Dirígete al menú Capas. y haz click en la capa Minimizar Arrugas para activarla. 60 www. Tamaño 8. Por último. elige Rango de Medios Tonos. Deja el resto de variables intactas. una con todas las capas en el formato original de Paint Shop Pro (PSP) y otra ya acoplada en cualquera de los tipos de archivo que permite la aplicación. Sin embargo. Si algunas arrugas son más gruesas que otras. no será posible modificar los cambios que se corresponden a cada capa de una forma sencilla. Luego ve a la Paleta Capas. 2 Ve a la Paleta de Herramientas y escoge el modo de Sobreexponer. que el relieve no se note en exceso. y sin soltar el botón. Repite el procedimiento hasta cubrir todas las arrugas. elije la opción Guardar tu archivo en disco o pulsa la combinación de teclas Ctrl + S para aplicar los cambios. A continuación debes realizar el trabajo más fino. Ahora ve a la Paleta Capas. para ver- 3 Paint Shop Pro Desde el menú Archivo haz click en Abrir y escoge el retrato en el cual deseas minimizar las arrugas. luego haz click en la imagen. En la Barra de Propiedades configura una Exposición del 15%.pctoday. desplaza el ratón una de ellas. y sin soltar el botón. desplaza el ratón abarcando la zona de las arrugas. no elimines las arrugas por completo ya que el rostro parecería “de plástico”. Despliega el menú inferior para seleccionar Luminosi- 2 De esta forma. hazlo con la mayor paciencia posible. Desde la Paleta de Herramientas de Paint Shop Pro elige la Herramienta Acercar (el icono de la Lupa). puedes guardar dos versiones de la imagen. Para evitarlo. Un formato estándar que ofrece alta calidad y permite el uso de capas es TIFF. Fondo” y renómbrala “Minimizar arrugas”. escribe “Minimizar arrugas”. Repite el procedimiento hasta cubrir todas las arrugas. trabajando individualmente sobre cada arruga. y haz click en la capa Minimizar Arrugas para activarla. para que el relieve no sea tan notorio.

ya que las pinceladas serán casi imperceptibles. También puedes iluminar el pelo y el contorno de la figura. una de ellas es agregando una capa neutra a la imagen. Muchas veces sacamos fotografías que no resultan muy malas… pero tampoco son lo suficientemente buenas. 4 Variar la opacidad de la capa. con una presión muy leve. 1 2 Herramienta Aerógrafo 3 Ampliar zona 3 Elegir color blanco. A continuación selecciona la herramienta Aerógrafo del panel principal. Photoshop 1 Desde el menú Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3 Duplicar Capa 3 Renombrar Capa 3 Pulsar OK Paint Shop Pro 1 Desde el menú Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3 Duplicar Capa 3 Renombrar Capa 3 Pulsar OK 2 Ir a la Paleta de Herramientas 3 Click en Sobreexponer 3 Configurar Propiedades del pincel 2 Ir a la Paleta de Herramientas 3 Click en Retoque 3 Configurar Propiedades del pincel 3 Ir a la Paleta de Herramientas 3 Elegir Zoom 3 Click y arrastrar para ampliar arrugas 3 Ir a Paleta Capas 3 Activar capa Minimizar Arrugas 3 Ir a la Paleta de Herramientas 3 Elegir Acercar 3 Click y arrastrar para ampliar arrugas 3 Ir a Paleta Capas 3 Activar capa Minimizar Arrugas 4 Retocar cada arruga 3 Aclarar las zonas más oscuras 3 Adaptar pincel al grosor de cada arruga 4 Retocar cada arruga 3 Aclarar las zonas más oscuras 3 Adaptar pincel al grosor de cada arruga 5 Abrir menú Capas 3 Click en Acoplar Imagen 3 Ctrl + S para guardar los cambios 5 Abrir menú Capas 3 Click en Fusionar 3 Fusionar todo 3 Ctrl + S para guardar los cambios Mejorar los retratos con luz es iluminar las partes más destacadas de la cara. Determina los valores que mejor se adapten a tu método de trabajo y no olvides ampliar la zona a tratar. Con Photoshop y Paint Shop Pro puedes solucionar este tipo de inconvenientes de varias maneras. que se corresponde con el fondo. 1 Paleta Capas 3 Crear capa neutra 3 Seleccionar Superponer 3 Relleno al 50%. 3 Iluminar las partes más destacadas de la cara. El método es muy sencillo y a la vez exige de ti algo de habilidad. Dirígete a la Paleta Capas o al menú de la barra superior de la aplicación y crea una nueva capa neutra. Nº 99 61 . sigue pintando sutilmente. no todo está perdido. De otro modo. con lo que no te aburrirás.. así ganarás precisión.. la nariz y la boca. sólo tienes que utilizar la función Guardar del menú Edición. Si utilizas una tableta digitalizadora con ta que el resultado sea satisfactorio. No te asustes. elige blanco como color principal. Comienza a pintar sobre la capa neutra y resalta las zonas que encuentres más oscuras. Éstas características se aplicarán para toda la superficie. En la herramienta selector de color. Parte 6ª Resumiendo. para que todo tu trabajo quede registrado. dirígete al menú Capas y selecciona la opción acoplar imagen. Elige un pincel suave y grande. como los ojos. pueden aparecer halos en torno a la figura. Tu tarea Cuando estés satisfecho con el resultado. Un problema muy común es el de la iluminación. Verás que las capas que has creado se han solidificado y convertido en una sóla. Indica un relleno al 50% en el campo correspondiente para el relleno de la capa de color gris. que puede llegar a estropear bonitas composiciones. los resultados serán aún mas agradables y naturales. Resumiendo. un lápiz óptico. Dirígete a la ventana de capas y desliza la barra que marca la cantidad has- 4 Ahora.Retoque fotográfico. Si el retrato que has tomado resulta un poco soso debido a una mala iluminación. Selecciona el modo Superponer en las opciones de la herramienta. de forma que el resultado sea más acorde con las tonalidades del rostro a tratar. 5 2 3 Una vez que termines de pintar. 5 Menú Capas 3 Acoplar 3 Guardar. intenta conseguir siempre una gran naturalidad y utilizar la luz para destacar las áreas más importantes de la fotografía pero de forma que no haya un contraste excesivo con lo que rodea a la zona retocada. sin que lleguen a notarse manchas o pinceladas en la piel. Enseguida notarás que la foto se ha realzado notablemente. Recuerda.. El color blanco sobre la capa neutra actúa como una fina cortina que ilumina el rostro. puedes variar la opacidad de la capa neutra para que la iluminación sea mayor o menor..

Sign up to vote on this title
UsefulNot useful