lunes, 25 de febrero de 2013

ANATOMÍA DE UNA PÁGINA WEB

Cómo centrar una página web con FIREWORKS

1.- Exportar archivos HTML
2.- Se crearán un cierto número de archivos HTML dependiendo del número de páginas de nuestro sitio
3.- Abrir CADA archivo HTML con el programa NOTEPAD
4.-Localizar al inicio la etiqueta Body y reemplazarla con la siguiente etiqueta <body><div align="center">
5.- Localizar al final la etiqueta Body y reemplazarla por </div></body>
6.-LISTO

jueves, 14 de febrero de 2013

¿TAMAÑO DE MI SITIO WEB?

When a visitor to your Website is viewing your pages through a browser, you want them to be able to see the entire width of the page without having to scroll left and right. People don't mind scrolling up and down, but they can get aggravated when they also have to scroll left and right.

As a Web designer, you want to design your pages to work with as many browsers and screen resolutions as possible, but you have to find a "happy middle ground" since there are a variety of screen resolutions and sizes in use.

Many popular sites are set up to display a full 1024 pixel page width with Graphics and Content.
Others will even go beyond 1024 pixels.
Some sites keep their pages to a narrower 750 to 800 pixel width.
Still, others sites will hold their Graphics and Content within the 750 to 800 pixel width, but will place advertisements beyond the 800 pixel width on the right hand side of the page.
You will even find a few sites that still use a page width of 640 pixels.

Now days, most all computer users have a monitor that can display a resolution of 800 x 600 pixels or higher and a majority of them have 1024x768 or higher resolutions. There are very few people who still use a 640 x 480 resolution screen.

Many Web designers design for a screen width of around 750 pixels. This page size will fit on an 800 x 600 screen and allows a little extra room for borders. This width will also work for all higher resolutions as there will just be a little more space between the edge of the Web page and the edge of the screen.
There is no "right or wrong" answer to the question. You'll have to decide which size you want to design for, but the 750 to 800 pixel width page will fit onto the most screens without users having to scroll left and right, although a wider 1024 pixel page allows for more information.
I recommend that you don't go wider than the 1024 width and don't go narrower than the 750 pixel width. The pages for Web Builder's Cafe are constructed at a width of 900 pixels.

lunes, 28 de enero de 2013

Formatos de archivos de gráficos

http://msdn.microsoft.com/es-MX/library/at62haz6(v=vs.80).aspx

Hay muchos formatos estándar para guardar mapas de bits en archivos de disco. GDI+ admite los formatos de archivos de gráficos que se describen en los párrafos siguientes.

BMP (Bit MaP, mapa de bits)

BMP es un formato estándar que Windows utiliza para almacenar imágenes independientes del dispositivo e independientes de la aplicación. El número de bits por píxel (1, 4, 8, 15, 24, 32 o 64) de un archivo BMP determinado se especifica en un encabezado de archivo. Los archivos BMP con 24 bits por píxel son muy comunes. Los archivos BMP no suelen comprimirse y, por tanto, no son muy apropiados para su transferencia a través de Internet.

GIF (Graphics Interchange Format, formato de intercambio de gráficos)

GIF es un formato común de las imágenes que aparecen en páginas Web. Los archivos GIF funcionan bien para dibujar líneas, imágenes con bloques de color sólido e imágenes con límites definidos entre colores. Los archivos GIF se comprimen, sin que se pierda información durante el proceso de compresión; una imagen descomprimida es exactamente igual que la imagen original. En un archivo GIF se puede especificar un color como transparente, de forma que la imagen tenga el color de fondo de cualquier página Web en la que se muestre. Una secuencia de imágenes GIF puede almacenarse en un único archivo para formar un GIF animado. Los archivos GIF almacenan como máximo 8 bits por píxel, por lo que se limitan a 256 colores.

JPEG (Joint Photographic Experts Group, grupo conjunto de expertos en fotografía)

JPEG es un esquema de compresión que funciona muy bien para escenas naturales como fotografías escaneadas. Durante el proceso de compresión se pierde algo de información, pero la pérdida suele ser imperceptible para el ojo humano. Los archivos JPEG almacenan 24 bits por píxel, por lo que son capaces de mostrar más de 16 millones de colores. Los archivos JPEG no admiten transparencia ni animación.

El nivel de compresión de las imágenes JPEG puede configurarse, pero cuanto mayor sea el nivel de compresión (archivos más pequeños), mayor será la pérdida de información. Una razón de compresión de 20:1 suele generar una imagen que el ojo humano apenas distingue de la imagen original. En la siguiente ilustración se muestra una imagen BMP y dos imágenes JPEG que se han comprimido a partir de dicha imagen BMP. La primera imagen JPEG tiene una razón de compresión de 4:1 y la segunda imagen JPEG tiene una razón de compresión en torno a 8:1.

La compresión de archivos JPEG no es apropiada para el dibujo de líneas, bloques de color sólido o límites definidos. En la siguiente ilustración se muestra un archivo BMP junto con dos archivos JPEG y un archivo GIF. Los archivos JPEG y el archivo GIF se han comprimido a partir del archivo BMP. La razón de compresión es de 4:1 para el archivo GIF, de 4:1 para el archivo JPEG más pequeño y de 8:3 para el archivo JPEG más grande. Tenga en cuenta que el archivo GIF mantiene los límites de las líneas nítidos, mientras que los archivos JPEG tienden a difuminar los límites.

JPEG es un esquema de compresión, no un formato de archivo. El formato de intercambio de archivos JPEG (JFIF) es un formato de archivos comúnmente utilizado para almacenar y transferir imágenes que se han comprimido conforme al esquema JPEG. Los archivos JFIF que muestran los exploradores Web utilizan la extensión .jpg.

EXIF (Exchangeable Image File, archivo de imagen intercambiable)

EXIF es un formato de archivo utilizado para las fotografías que se capturan con cámaras digitales. Un archivo EXIF contiene una imagen comprimida conforme a la especificación JPEG. Un archivo EXIF contiene también información acerca de la fotografía (fecha de toma, velocidad de obturación, tiempo de exposición, etcétera) e información acerca de la cámara (fabricante, modelo, etcétera).

PNG (Portable Network Graphics, gráficos de red portátiles)

El formato PNG conserva muchas de las ventajas del formato GIF pero también aporta más funciones que las del formato GIF. Al igual que los archivos GIF, los archivos PNG se comprimen sin que se pierda información. Los archivos PNG pueden almacenar colores con 8, 24 o 48 bits por píxel y escalas de grises con 1, 2, 4, 8 o 16 bits por píxel, mientras que los archivos GIF sólo pueden utilizar 1, 2, 4 u 8 bits por píxel. Un archivo PNG puede almacenar también un valor alfa para cada píxel, que especifica el grado de mezcla de ese píxel con el color de fondo.

El formato PNG supone una mejora con respecto al formato GIF por su capacidad para mostrar una imagen progresivamente; es decir, para mostrar aproximaciones cada vez mejores de la imagen a medida que ésta llega a través de una conexión de red. Los archivos PNG pueden contener información sobre la corrección de gamma y la corrección de color para que las imágenes puedan mostrarse con precisión en varios dispositivos de presentación.

TIFF (Tag Image File Format, formato de archivo de imágenes con etiquetas)

TIFF es un formato flexible y extensible, compatible con una amplia variedad de plataformas y aplicaciones de procesamiento de imágenes. Los archivos TIFF pueden almacenar imágenes con un número arbitrario de bits por píxel y pueden emplear varios algoritmos de compresión. Se pueden almacenar diversas imágenes en un único archivo TIFF de varias páginas. La información relacionada con la imagen (marca del escáner, equipo host, tipo de compresión, orientación, muestras por píxel, etcétera) puede almacenarse en el archivo y organizarse mediante el uso de etiquetas. El formato TIFF puede extenderse cuando se precise con la aprobación y adición de nuevas etiquetas.

The biggest photoshop disasters / fails !!

Extreme Photoshop Makeover

EJERCICIO II

https://docs.google.com/file/d/0B9iUe7UvfkpHNzdhaUphR0RiTGc/edit

jueves, 24 de enero de 2013

¿QUÉ ES CSS?

Puede que ya hayas oído hablar de CSS sin saber realmente qué es. En esta lección aprenderás más cosas sobre CSS y qué puede hacer por ti.

CSS es el acrónicmo de CascadingStyle Sheets (es decir, hojas de estilo en cascada).

¿Qué puedo hacer con CSS?

CSS es un lenguaje de estilo que define la presentación de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas. ¡Espera unos segundos y ya verás!

Es posible usar HTML, o incluso abusar del mismo, para añadir formato a los sitios web. Sin embargo, CSS ofrece más opciones y es más preciso y sofisticado. CSS está soportado por todos los navegadores hoy día.

Después de unas cuantas lecciones de este tutorial serás capaz de crear tus propias hojas de estilo usando CSS para dar a tu sitio web un aspecto nuevo y genial.

¿Qué diferencia hay entre CSS y HTML?

HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido previamente estructurado.

Vale, suena un poco técnico y confuso... pero sigue leyendo; pronto todo tendrá sentido.

Allá en los buenos tiempos en que Madonna era una "Virgen" y un tipo llamado Tim Berners Lee inventó el World Wide Web, el lenguaje HTML sólo se usaba para añadir estructura al texto. Los autores podían marcar sus textos diciendo "esto en un título" o "esto es un párrafo", usando las etiquetas HTML <h1> y <p>, respectivamente.

A medida que la Web fue ganando popularidad, los diseñadores empezaron a buscar posibilidades para añadir formato a los documentos en línea. Para satisfacer esta reclamación, los fabricantes de los navegadores (en ese momento, Netscape y Microsoft) inventaron nuevas etiquetas HTML, entre las que se encontraban, por ejemplo, <font>, que se diferenciaba de las etiquetas originales HTML en que definían el formato... y no la estructura.

Esto también llevó a una situación en la que las etiquetas estructurales originales, por ejemplo, <table>, se usaban cada vez más de manera incorrecta para dar formato a las páginas en vez de para añadir estructura al texto. Muchas nuevas etiquetas que añadían formato, por ejemplo, <blink>, sólo las soportaban un tipo determinado de navegador. "Necesitas el navegador X para visualizar esta página" se convirtió en una declaración de descargo común en los sitios web.

CSS se inventó para remediar esta situación, proporcionando a los diseñadores web con sofisticadas oportunidades de presentación soportadas por todos los navegadores. Al mismo tiempo, la separación de la presentación de los documentos del contenido de los mismos, hace que el mantenimiento del sitio sea mucho más fácil.

¿Qué beneficios me ofrece CSS?

CSS fue toda una revolución en el mundo del diseño web. Entre los beneficios concretos de CSS encontramos:

control de la presentación de muchos documentos desde una única hoja de estilo;
control más preciso de la presentación;
aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.);
numerosas técnicas avanzadas y sofisticadas.

¿Cómo funciona CSS?

En esta lección aprenderás a crear tu primera hoja de estilo; conocerás el modelo básico de CSS y qué código es necesario para usar CSS en un documento HTML.

Muchas de las propiedades que se usan en las hojas de estilo en cascada (CSS) son parecidas a las de HTML. Así pues, si estás acostumbrado a usar HTML para cuestiones de presentación, lo más probable es que reconozcas gran parte del código usado. Examinemos un ejemplo concreto.

La sintaxis básica de CSS

Digamos que queremos un bonito color rojo como fondo de nuestra página web:

Usando HTML podríamos haberlo conseguido así:

<body bgcolor="#FF0000">

Con CSS el mismo resultado puede lograrse así:

body {background-color: #FF0000;}

Como verás, el código usado es más o menos idéntico para HTML y CSS. El ejemplo anterior te muestra además el modelo CSS fundamental:

Imagen explicativa de los términos selector, propiedad y valor

Pero ¿dónde se sitúa el código CSS? Eso, precisamente, es lo que vamos a estudiar ahora mismo.

Aplicando CSS a un documento HTML

Podemos aplicar CSS a un documento HTML de tres maneras diferentes. Todos estos métodos se explican a continuación. Te recomendamos que te centres en el tercero, es decir, el externo.

Método 1: En línea (el atributo `style`)

Un modo de aplicar CSS a HTML es usando el atributo de HTML style. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar así:

	<html>
	  <head>
		<title>Ejemplo</title>
	  </head>
	  <body style="background-color: #FF0000;">
		<p>Esta es una página con fondo rojo</p>
	  </body>
	</html>

Método 2: Interno (la etiqueta `style`)

Otra forma es incluir el código CSS usando la etiqueta HTML <style>. Por ejemplo, así:

	<html>
	  <head>
		<title>Ejemplo</title>
		<style type="text/css">
		  body {background-color: #FF0000;}
		</style>
	  </head>
	  <body>
		<p>Esta es una página con fondo rojo</p>
	  </body>
	</html>

Método 3: Externo (enlace a una hoja de estilo)

El método recomendado es enlazar con lo que se denomina hoja de estilo externa. A lo largo de este tutorial usaremos este método en todos nuestros ejemplos.

Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.

Por ejemplo, digamos que tu hoja de estilo se llama style.css y está localizada en una carpeta que se llama style. Esta situación se puede ilustrar de la siguiente manera:

La carpeta "style" que contiene el fichero "style.css"

El truco consiste en crear un vínculo desde el documento HTML (por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo se puede crear con una sencilla línea de código HTML:

	<link rel="stylesheet" type="text/css" href="style/style.css" />

Fíjate cómo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo href.

La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta <head> y </head>. De esta manera:

	<html>
	  <head>
		<title>Mi documento</title>
		<link rel="stylesheet" type="text/css" href="style/style.css" />
	  </head>
	  <body>
	  ...

Este vínculo indica al navegador que debería usar la presentación del fichero CSS al mostrar el fichero HTML. Lo realmente bueno de este método es que se pueden vincular varios documentos HTML con la misma hoja de estilo. En otras palabras, se puede usar un único fichero CSS para controlar la presentación del muchos documentos HTML.

Imagen que muestra cómo varios documentos HTML se pueden vincular con la misma hoja de estilo

Esta técnica puede ahorrarte mucho trabajo. Si quisieras cambiar, por ejemplo, el color de fondo de un sitio web compuesto por 100 páginas, un hoja de estilo puede ahorrarte el tener que cambiar de forma manual los 100 documentos HTML. Con CSS, el cambio se puede llevar a cabo en unos segundos modificando parte del código de la hoja de estilo principal.

Vamos a llevar a la práctica lo que acabamos de aprender.

Pruébalo tú mismo

Abre el Bloc de notas (o el editor de texto que utilices) y crea dos ficheros - un fichero HTML y un fichero CSS - con el siguiente contenido:

Fichero default.htm

	<html>
	  <head>
		<title>Mi documento</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	  </head>
	  <body>
		<h1>Mi primera hoja de estilo</h1>
	  </body>
	</html>

Fichero style.css

	body {
	  background-color: #FF0000;
	}

Ahora coloca los dos ficheros en la misma carpeta. Recuerda grabar los ficheros con las extensiones correctas (".htm" y ".css", respectivamente).

Abre el fichero default.htm con el navegador y observa que la página tiene un color de fondo rojo. ¡Enhorabuena! ¡Acabas de crear tu primera hoja de estilo!

http://es.html.net/tutorials/css/lesson1.php

http://es.html.net/tutorials/css/lesson2.php

DISEÑO WEB Y TIPOGRAFÍA

http://catarsisheuristica.blogspot.com/2010/04/tipografia-diseno-web.html

Antes de adentrarnos en el tema, sería interesante si pensaras por un minuto los diferentes tipos de letra que se usan en la red, desde grandes encabezados hasta pequeños que se muestran en el pie o incluso en el cuerpo de diversos artículos de algunos blogs conocidos.

La tipografía es el uso de tipos de letra o fuentes en el diseño. Las tipografías o fuentes son una parte muy especial del diseño, una parte integral y esencial. Desde que se inició internet ha pasado mucho tiempo, aún así, el uso una tipografía que sea lo suficientemente llamativa y vistosa sigue siendo muy importante.

Lo que busca la tipografía es crear una mayor significación mediante la selección deliberada y reflexiva de fuentes, tamaño, color, alineación, y otros factores que afectan el diseño de la fuente en una página.

Clases de fuentes

Las fuentes o tipos de letra se clasifican en dos grandes clases: fuentesSerif y Sans Serif

Las fuentes Serif tienen serifas o adornos extra (son como unas especies de colitas o patitas al final de cada línea de la fuente)

Un ejemplo de fuente Serif es Times New Roman, que se muestra a continuación:

Las fuentes Sans Serif no tienen serifas, no tienen ningún detalle extra al final de cada letra. Un ejemplo es la fuente Impact:

Cosas a considerar sobre la tipografía web

Hay algunas diferencias entre manejar fuentes para imprimir y para la web. Cosas a tener en cuenta acerca de escribir en la web son contraste, color, legibilidad y tamaño.

Los colores en la pantalla del monitor son creados por luz, y es más importante pensar en el contraste porque fuerza mucho a la vista leer con un mal contraste o un contraste pobre.

Texto negro sobre un fondo blanco es más fácil de leer porque proporciona un mayor contraste. La teoría del color y la elección del mismo juega un papel importante en la tipografía web.

Se ha demostrado que las fuentes Sans Serif son más fáciles de leer en línea en el cuerpo del texto porque las serifas son más difíciles de seguir para el ojo, mientras que es al revés en el texto impreso.

Aunque en un incremento de tamaño y con mayor interlineado las fuentes Sans Serif pueden trabajar bien el texto del cuerpo en la web. Las Serif funcionan bien en encabezados y titulares porque le dan un toque especial al titular y porque las fuentes Sans Serif son fáciles de leer cuando se tratan de pequeñas cantidades de texto.

El tamaño es un factor importante a considerar cuando se eligen los estilos de fuente. Un texto demasiado pequeño es difícil de leer, pero un texto demasiado grande ocupa mucho espacio. Hay que encontrar un tamaño que trabaje bien con el diseño y que sea fácil de leer.

Tomando el control de las fuentes

Hay muchos ajustes que pueden controlar la forma en que la fuente aparece en una página web. El tamaño de la fuente, como ya se dijo previamente, es sin duda importante.

Las tres unidades de medida más populares son: em, porcentaje (%) y píxeles (px)

Declarar tamaños de fuente en CSS es fácil, a continuación un ejemplo de elementos párrafo al que se le asigna una unidad de 1em:

p {font-size: 1em;  }

Em es una tipo de medida tipográfica ampliamente usada para diseño web porque escala bien y pueden darse incrementos más finos de tamaño (por ejemplo, 1.35em).

Los píxeles (px) se miden en relación a la resolución y da un poquito menos de control ya que sólo podés elegir números enteros (por ejemplo 12px).

A algunas personas les gusta usar porcentajes para los tamaños de fuente porque dan al usuario un control diferente del tamaño. El tamaño es determinado por las configuraciones de tamaño de fuente de sus navegadores.

El espaciado y el interlineado también se pueden controlar con CSS. El espaciado es el espacio entre caracteres y se pueden controlar con la propiedad letter-spacing. El interlineado se puede controlar usando la propiedad CSS line-height. Las dos muy buenas formas de controlar el aspecto de tu texto.

Otras unidades de medidas posibles y menos populares son:

Puntos (pt)
Picas (pc)
Pulgadas (in)
Centímetros (cm)
Milímetros (mm)
Espacio X (ex)

Usar puntos (pt) es bueno para hojas de estilo impresas porque los pt son una unidad de medida de impresión. Los puntos no deben ser usados en tus páginas web porque hay una gran diferencia entre navegadores cuando se usan puntos; las computadoras Mac OS tienden a mostrar el texto 25% más pequeños que las PCs con Windows.

Las Fuentes Seguras para la Web

¿Qué es una fuente segura para la web o fuente web estándar? Esas fuentes conforman un grupo selecto de fuentes que están disponibles en la mayoría de las computadoras. Esto es lo que actualmente limita la elección de fuentes en la web bajo las especificaciones CSS2.

La elección de fuentes seguras para la web disponibles garantizan un mejor control sobre cómo tu texto se verá en todos los navegadores y sistemas operativos. Según el consenso, las fuentes más populares son:

Arial (Su equivalente en Mac OS es Helvetica)
Times New Roman (Su equivalente en Mac OS es Times)
Verdana
Georgia
Courier

Otras fuentes populares son:

Impact
Lucida Console (en Mac OS su equivalente es Mónaco)
Lucida Sans (Su equivalente en Mac OS es Lucida Grande)
Palatino
Tahoma (en Mac OS es Geneva)
Comic Sans
Trebuchet MS

Cuando uses cualquiera de estas fuentes (en especial las de la segunda lista) es buena idea incluir unas pocas opciones a las que pueda recurrir en tu CSS, tal como se explica a continuación.

Configurando tus fuentes

Hay varios métodos a elegir para mostrar fuentes en tus sitios web. Si usás una fuente web segura podés declararla mediante CSS como en el ejemplo siguiente:

font-family: Helvetica, Arial, sans-serif;

Es importante incluir varias fuentes sólo en caso de que alguien no tenga tu primera opción. Esto da al navegador del usuario algo a que recurrir en caso de no tener esa fuente en su sistema.

Ahora bien, es posible redefinir las fuentes seguras para la web con CSS3

Las especificaciones actuales de CSS3 te permiten elegir cualquier fuente con licencia OpenType o TrueType a tu disposición. Podés hacer esto usando@font-face, como se muestra en el siguiente ejemplo:

@font-face {font-family: "MiFuente; src: url(mifuente.ttf) format("truetype");}h1 {font-family: "MiFuente", sans-serif;}

Pero no todos los navegadores aceptan CSS3 (con el ejemplo más notorio del más usado Internet Explorer)

Para aquellos que no están seguros de usar @font-face en sus diseños, hay varias herramientas para reemplazar fuentes.

Hay bastante información en la red sobre cómo usarlas, yo sólo procederé citar un par:
Cufón: Permite reemplazar fuentes con un script, el script renderiza una fuente y la convierte en una imagen que puede mostrarse en el navegador. Más información de cómo usarlo en Blogger
sIFR: Similar a Cufón pero basado en flash.

Errores en la tipografía web

La falta de coherencia a la hora de usar tipografías es una de los mayores errores que hacen los nuevos diseñadores web. Las propiedades de las fuentes se controlan mejor globalmente, y es una buena práctica asignar elfont-family, el tamaño, color, altura y ancho de líneas para el elemento del cuerpo de todas tus páginas a través de CSS, como en el siguiente ejemplo:

body { font: 1em/1.3em Helvetica, Arial, sans-serif; color: #000; }

Tenés que establecer los estilos de los títulos globalmente, así como para h1, h2, y h3. Los estilos de los enlaces también deben ser establecidos globalmente.

Elegir fuentes que son demasiado similares no es una buena opción, y se debe evitar cuidadosamente mirando el estilo de las fuentes y el diseño del sitio para elegir algo que sea apropiado. La mayoría de los encabezados Serif se emparejan bien con fuentes sans serif en el texto del cuerpo. Juntar dos fuentes Sans Serif es un poco complicado pero es una opción viable.

Por mi parte esto es todo por el momento. Trataré de ir aplicando estos conocimientos incluso en este mismo blog. :)

miércoles, 23 de enero de 2013

MANUAL DE ADOBE CS5

https://docs.google.com/file/d/0B9iUe7UvfkpHbmx0SzY2SmhDSlE/edit

VECTORES Y PIXELES

Vectores y píxeles

Llamamos imagen digital a la representación en dos dimensiones de una imagen (fotografía, dibujo, gráfico, etc.) utilizando bits (unos y ceros) que:

1. Se obtiene por medios electrónicos (cámaras, escáneres, etc.) o a partir de programas de diseño.

2. Puede ser editada en una computadora por medio de programas de diseño.

3. Puede ser impresa en un soporte material, con aspecto similar al de cualquier imagen obtenida por medios analógicos.

Existen dos tipos de imágenes digitales: las que se describen como mapa de píxeles y las que se definen por medio de vectores.

Píxeles

Una imagen digital compuesta por píxeles es una superficie rectangular dividida en pequeñas celdas cuadradas o rectangulares, llamadas píxeles, cada una con un color propio. Con este método de digitalización es posible representar imágenes fotográficas y texturas, pues permite obtener tonos continuos y representar degradados sutiles de sombras y de color. Cada píxel tiene una posición y un color determinados.

Para editar imágenes de píxeles se utilizan programas como Adobe Photoshop, Corel PhotoPaint, Painter, Gimp, etc.

Estas imágenes tienen una característica propia: la resolución, que determina sus posibilidades de impresión y ampliación. Toda imagen de píxeles tiene un tamaño óptimo de impresión. Si es impresa a mayor tamaño su calidad disminuye.

Vectores

Las imágenes vectoriales son gráficos digitales compuestos por formas geométricas independientes (segmentos, polígonos, arcos, etc.), con información de posición, tamaño, color, etc. La tecnología más usada para la descripción de estas formas o “vectores” son las curvas de Bézier que estudiaremos más adelante.

Por ejemplo un círculo quedaría definido por la posición de su centro, su radio, el grosor de línea del contorno y su color interior o de relleno. Estas imágenes son completamente distintas a las formadas por píxeles.

Los programas más usuales que generan y editan gráficos vectoriales son CorelDraw e Adobe Illustrator.

La característica principal de los gráficos vectoriales es su capacidad de admitir ampliaciones ilimitadas de tamaño sin perder calidad. Por ejemplo: se puede tomar un logotipo vectorizado, imprimirlo en una tarjeta personal, y luego agrandarlo e imprimirlo en una gigantografía. En ambas imágenes la calidad de impresión será la mayor disponible en la impresora.

Los formatos de documento más usuales de este tipo de imágenes son:

• Programas Adobe: .AI (Illustrator), .PDF (Acrobat, InDesign, Illustrator, Photoshop) y los archivos .PS, .EPS, relacionados con el lenguaje PostScript.

• Otros programas: CorelDraw (.CDR).

Ventajas y desventajas de cada tipo de imagen digital

• Una imagen vectorial suele tener menor peso que otra similar conformada por píxeles.

• Los vectores son la mejor elección para gráficos de colores planos o degradados sencillos.

• Las imágenes de píxeles pierden calidad si son ampliadas demasiado. En cambio, las imágenes de vectores imprimen bien en cualquier tamaño.

• Los objetos definidos por vectores pueden ser guardados y modificados en el futuro.

• Algunos programas permiten realizar animaciones con vectores. Esta se realiza de forma sencilla y genera documentos livianos

• Los gráficos vectoriales no sirven para representar fotografías.

En la figura 1 vemos la diferencia entre una imagen vectorial y otra de mapa de bits.

Píxeles	Vectores
Representan mejor texturas y fotografías	Representan mejor gráficos de colores planos y degradados simples
Tienen una medida máxima de impresión	Se pueden ampliar ilimitadamente
Sus archivos pueden ser muy pesados	Sus archivos son, en general, livianos
Fotografías e imágenes fotorrealistas	Dibujos y gráficos
La calidad de impresión depende de su resolución	La calidad de impresión depende de la impresora

Páginas