diseno_grafico_web[1]

7/21/2019 DISENO_GRAFICO_WEB[1]

1/197


2/197

2

Formatos vectoriales

Formatos grficos clsicos

Consejos

Ejercicios

Test de autoevaluacin

Conclusin

3. CAJA DE HERRAMIENTAS

Introduccin

Objetivos

Apartados

Herramientas software

Herramientas hardware

Ejercicios


Conclusin

4. EDITORES GRFICOS

Introduccin

Objetivos

Apartados

Qu son?

Adobe Photoshop (PS)

Adobe image ready (IR)

Adobe Fireworks

Paint shop pro

Gimp

Ejercicios


Conclusin

5. ENTORNO Y MTODOS


3/197

3

Introduccin

Objetivos

Apartados

Equipos de desarrollo

Entornos de desarrollo

Sistema de trabajo

Ejercicios


Conclusin

6. HERRAMIENTAS AUXILIARES

Introduccin

Objetivos

Apartados

Catalogadores de imgenes

L-View

Futuris

IrfanView

AhaView

XnView

AcDeSee

Ejercicios


Conclusin

7. FASES DE CREACIN DE UN WEBSITE

Introduccin

Objetivos

Apartados

Fases de creacin de un website

xito en la web


4/197

4

Usabilidad

Ejercicios


Conclusin

8. DISEO Y COMPOSICIN

Introduccin

Objetivos

Apartados

Fuentes de diseo grfico

Diseo web

Elementos bsicos

Limitaciones del diseo

La composicin

Ejercicios


Conclusin

9. EL COLOR Y OTROS ATRIBUTOS

Introduccin

Objetivos

Apartados

El color en la naturaleza

El entorno visual

Componentes del color (HSB)

Profundidad de color

Modo de color

Color en HTML

Temperatura del color

El lenguaje de los colores

Ejercicios


5/197

5


Conclusin

10. TCNICAS DE SELECCIN. CAPAS

Introduccin

Objetivos

Apartados

Tipos de seleccin

Herramientas de seleccin

Usos selecciones

Herramientas de seleccin avanzadas

Capas

Ejercicios


Conclusin

11. TCNICAS BSICAS DE RETOQUE

Introduccin

Objetivos

Apartados

Mover una seleccin

Rellenar una seleccin

Deformar una seleccin

Herramienta de clonacin

Colocar una sombra

Uso de filtros

Ejercicios


Conclusin

12. FONDOS

Introduccin


6/197

6

Objetivos

Apartados

HTML de fondos

Posibilidades creacin de fondos

Ejercicios


Conclusin

13. IMAGEN INSTITUCIONAL

Introduccin

Objetivos

Apartados

Conceptos bsicos

Imagen institucional en las administraciones pblicas

Elementos que caracterizan una imagen institucional

Botones, lneas y banners.

Botones y lneas en HTML

Ejercicios


Conclusin

14. TEXTOS Y TIPOGRAFAS

Introduccin

Objetivos

Apartados

Caractersticas de la lectura en monitores

Consejos generales

Tipografas

Caractersticas

Cmo conseguimos fuentes?

Efectos sobre textos


7/197

7

Ejercicios


Conclusin

15. SECTORES

Introduccin

Objetivos

Apartados

Sectores

Guardar sectores

Importancia del tamao del fichero

Ejercicios


Conclusin

16. EFECTOS WEB

Introduccin

Objetivos

Apartados

Rollover o MouseOver

Animaciones

Mapas de imagen

Ejercicios


Conclusin

17. FLASH

Introduccin

Objetivos

Apartados

Posibilidades de Flash

Aprendizaje


8/197

8

Espacio de Trabajo

Animaciones

Ejercicios


Conclusin

18. DREAMWEAVER

Introduccin

Objetivos

Apartados

Espacio de trabajo

Mi primera pgina web

Elementos

Ejercicios


Conclusin

19. CMO SEGUIR?

Introduccin

Objetivos

HTML

Introduccin

Objetivos

Limitaciones HTML

Consejos generales

Mtodo de trabajo

Lenguaje de etiquetas

Elementos HTML

Conclusin

FUENTES DE REFERENCIA

Introduccin


9/197

9

Libros y Revistas

Internet y Cursos

Conclusin

Conclusin

PRCTICA FINAL DE CURSO (OBLIGATORIA)

BIBLIOGRAFA

GLOSARIO


10/197

10

INTRODUCCIN GENERAL

Internet es un mundo en continua evolucin y desarrollo, y que no est exento de la influcia de determinadas

modas. En la actualidad algunos de los servicios ms utilizados son el correo electrnico y las redes. Esto sefundamenta en la cooperatividad de Internet, una gran red dnde todo el mundo puede aportar o intercambiarmaterial con otras personas. A ello se suman las facilidades que otorga el medio, ya que para comunicarse conotra persona o transferir material, no es necesario que esas dos personas estn en un mismo lugar, slo bastacon conectarse a la red.

Cada vez hay ms y mejores formas de acceder a Internet, los dispositivos van avanzando y hoy en dapodemos tener acceso casi desde cualquier punto del planeta.

Campos en continuo desarrollo como el diseo eficiente de pginas web, la caducidad de la informacin, labsqueda de contenidos, el posicionamiento en buscadores, ... estn haciendo que se creen fructuosos negociosen torno a ello.

OBJETIVOS Y DESTINATARIOS

En este curso, el objetivo fundamental es la navegacin web y nos centraremos en ello explicando la manera deconseguir un buen diseo web para nuestras pginas web.

Este curso va destinado a una variedad de usuarios que no necesariamente tendrn que ser conocedores dellenguaje HTML. Si se recomienda para un mayor aprovechamiento del curso que se posean un mnimoconocimiento de internet y alguna herramienta de tratamiento de imgenes como Adobe Photoshop aunque

tampoco es imprescindible, ya que a travs de las diferentes lecciones se irn explicando desde loscomponentes necesarios para realizar una pgina a los programas que se utilizarn para el diseo.

Por tanto, no se requieren conocimientos avanzados informticos para comenzar el curso, ni manejar editoresgrficos con soltura. El curso comienza desde un nivel inicial y llega hasta un nivel medio-alto.

MATERIALES Y MTODOS

El curso se podr seguir con los materiales didcticos compuestos por:

Textos temticos, son las Unidades Didcticas (UD) que contienen la parte terica. Estarn disponiblesen la plataforma de virtualizacin.

Viewlets, elementos dinmicos flash de demostracin de procedimientos y tcnicas, son como fragmentosde vdeo, que podremos manejar mediante botones de activacin o doble clic. Cuando se recomiende visualizarun viewlet dentro de la clase terica se precisar el player de Flash para poder verlos. Cada uno consta de unfichero html que maneja el elemento flash embebido. La mayora vienen denominados por la UD (unidaddidctica) a la que corresponden.

Prcticas y ejercicios:

Propuestas en las Unidades Didcticas (voluntarias).

Prcticas que se propondrn en el foro de seguimiento del curso.

Prctica final del curso (obligatoria).


11/197

11

Autoevaluaciones de cada UD, que se aconsejan realizar para un correcto asentamiento de la informacinaprendida.

Participacin activa en el foro de discusin.

Correo electrnicopara contactar con el tutor y con otros alumnos.

Pueden utilizarse sesiones programadas de chatsi se considera de inters.

Se puede combinar con alguna clase o tutora presencialsi se considera necesario.

Los alumnos deben preguntar cuantas cuestiones consideren al tutorpor cualquiera de los medios a sudisposicin. Aunque se trata de un curso a distancia no es un curso sin tutor.

Aunque el curso est ordenado de una manera lgica, se aconseja a aquellos alumnos sin experiencia previa eneditores grficos, que alteren el orden de captulos, adelantando los de seleccin, capas y retoque. Quedarapues as: 1, 4, 10, 11 y luego seguir el orden habitual de captulos. Se aconseja que estudien los viewlets todas

las veces que precisen, y que hagan las preguntas al tutor que crean convenientes (a travs del foro o del email).Como material adicional, en la Unidad Didctica 19 se cuenta brevement el lenguaje HTML aunque es totalmenteopcional y ms bien se plantea como material de ampliacin.

Necesidades para cubrir el curso

Las mejores herramientas que podemos utilizar, y que necesitamos para seguir este curso son:

El cerebro, muchas veces minusvalorado, ... porque no slo tenemos manos y dedos. Hay que pensar lascosas antes de lanzarnos como locos a teclear o mover el ratn y hacer clics.

Lpiz y papel, imprescindibles para planificar correctamente y no andar improvisando continuamente. Sisomos genios, alguno habr, se pueden conseguir resultados correctos sin planificar, pero el resto de mortalesslo conseguiremos chapuzas.

Una mente abierta, curiosidad, perseverancia y paciencia en elevadas dosis. Sobre todo paciencia.

Un equipo informticotipo PC, con una versin trial de Photoshop, que se puede descargar desde la webde Adobe , versin en ingls que ocupa 329 MB, o bien, conseguir una versin trial de revistas o una comercial si se disponede ella. En realidad no es necesaria la ltima versin del producto, es vlida cualquiera a partir de la 5.5 (laprimera en la que ya viene integrado Image Ready). Adobe suele sacar bastantes versiones, y muy rpidamente;siempre es mejor tener la ltima que se pueda, pero los fundamentos del diseo grfico web no cambian por ello.

Podemos utilizar otros editores grficos para seguir el curso si no disponemos de Photoshop, como Fireworks,

PaintShop Pro (Shareware) o Gimp (Freeware). No siempre todas las opciones que oferta el lder estarnrepresentadas en los dems, pero las principales si.

El Player de Flashpara los Viewlets.

Aunque el curso se puede seguir con otros equipos y S.O., nos centraremos para que las explicaciones seadapten a equipos tipo Pentium IV o similar, con 512 MB de RAM y S.O. Windows XP (entorno ms utilizado enla actualidad), aunque puede seguirse con Linux, y otros equipamientos, probablemente su equipo sea superior.


12/197

12

INTRODUCCIN AL DISEO GRFICO WEB

INTRODUCCIN

En este primer tema vamos a ver conceptos generales correspondientes al diseo grfico web. Se verbrevemente como ha sido la evolucin de internet y en especial la de las pginas web, la importancia que tieneen la actualidad tener una buena web, as como lo que debe contener dicha web.

Por otro lado, vamos a ver temas relacionadas con el diseo, colores, formas, textos ... y en especial noscentraremos en todo el curso en el tema de las imgenes.

OBJETIVOS

Este material ha sido preparado como soporte de un curso a distancia, por lo que es autoexplicativo.

El objetivo principal consiste en revisar, de forma sistemtica, las peculiaridades de las imgenes en la web,utilizando como herramienta principal de diseo Adobe Photoshop, con su complemento Image Ready, aunquese usarn tambin otros programas (como veremos Image Ready est cayendo en desuso, siendo sustituida por

la aplicacin Adobe Fireworks).

Se aprender a construir fondos, logos, banners, tipografas grficas, elementos de navegacin, botones,separadores, ...

Un curso de diseo grfico tiene un componente prctico muy elevado, por ello se ha reducido al mnimoimprescindible el contenido terico, siendo incluso opcional en algunos apartados, y se ha hecho hincapi en elaspecto prctico. Se propondrn multitud de ejercicios prcticos que tienen como finalidad aprender a utilizar uneditor grfico, como ejemplo de uso de otros, puesto que posee muchas caractersticas comunes con los msdifundidos y utilizados, y revisar las particularidades de las imgenes que utilizamos en nuestras pginas web.

Se revisar la utilizacin de grficos e imgenes, con especial detenimiento en: la composicin, la utilizacin delcolor, las combinaciones de fondo y primer plano, la preservacin de tipografas especiales pasndolas a grfico,los tipos de formatos grficos ms utilizados en internet, cmo conseguir animaciones y efectos especiales,

cmo optimizar la carga, ... y acabaremos con una prctica completa.

Mostraremos un mtodo de trabajo aplicable a la preparacin de imgenes para web y a la construccin depginas web en general.

El alumno dispondr de una visin amplia de todo lo relacionado con el Diseo Grfico Web. En principio, losalumnos no necesitan tener conocimientos de HTML, ni de editores grficos porque los necesarios se adquirirndurante el curso.

Creemos importante destacar lo que NO es este curso:

No es un curso de Photoshop, aunque se utilizar ampliamente y se mostrarn sus funciones principales, enconcreto las orientadas al diseo de imgenes para web.

No es un curso de HTML, aunque se revisarn las etiquetas relacionadas con los contenidos multimedia ygrficos.

No es un curso de Diseo Web, aunque gran parte de los conocimientos adquiridos podrn aplicarse en dichosmenesteres.

No es un curso de Flash, aunque se mostrarn algunas de sus funcionalidades y posibilidades

APARTADOS

CONOCIMIENTO DEL MEDIO: INTERNET

Primer medio de comunicacin interactivo en tiempo real, que ha tenido un crecimiento exponencial desde finalesde los aos 80 y que ha revolucionado la manera y las posibilidades de difundir informacin y servicios.


13/197

13

La simplicidad de sus protocolos de transmisin, la omnipresencia de elementos de acceso a la red y laexpansin de sta, han hecho que se utilice cada vez ms.Dentro del mundo internet, en continuo desarrollo y evolucin, funcionan distintos servicios que vanreconfigurando las posibilidades del medio. Un medio no exento de la influencia de las modas. El servicio msutilizado actualmente (el que ocupa ms ancho de banda y genera mas paquetes de informacin circulantes) esel de correo electrnico, el segundo servicio mas difundido es el de navegacin web, pero hay otros comotransferencia de ficheros, blogs, chats, P2P, foros, elearning, webservices y aplicaciones, wiki, redes sociales ...

y continuamente van surgiendo nuevos servicios.

Nuestro objetivo es el de navegacin web, y por tanto, nos centraremos en conseguir buenos diseos grficospara nuestras pginas.

No vamos a citar la historia de sus inicios y de su extraordinario crecimiento. Gran parte de ella se sigueescribiendo. Tecleando historia de internet en Google aparecen ms de 93.000 referencias en castellano, losinteresados en profundizar en ello disponen, pues, de abundante documentacin. En cuanto a dimensiones ytrficos se recomiendan las URL , .

Pero s comentaremos que el ncleo duro de internet se basa en la utilizacin de unos protocolos muyestablecidos, a la par que sencillos, y en el uso de tecnologas de hipertexto fusionadas con multimedia.

Internet consiste en la interconexin de millones de equipos (hosts segn su terminologa), identificados

inequvocamente mediante una direccin (IP), que se mandan la informacin troceada en paquetes (TCP) quepueden viajar por millones de circuitos distintos segn sean encaminados y enrutados (electrnica de red,routers) y que se juntan en destino.

Hay internets pblicas, a las que puede acceder cualquiera, e internets privadas que limitan los usuarios quepueden acceder (intranets).

Internet proporciona distintos, y variados, servicios. Uno de ellos es la navegacin web por pginas, construidaspor miles de desarrolladores, en continuo crecimiento exponencial, que constituyen la mayor fuente deinformacin disponible en la actualidad, mayor que todas las bibliotecas del mundo juntas. Mas de 8.000 millonesde pginas estn indexadas en buscadores, pero ello no es ms que la punta del iceberg y se habla de unainternet oculta de mas de 100.000 millones de pginas que, por supuesto, no estn siempre on -line odisponibles y que no siempre poseen la calidad, actualizacin y validez suficiente para merecer la pena suvisualizacin, pero ah estn. Todas y cada una de ellas respetan el protocolo HTML y se transmiten entre losequipos que las almacenan y los usuarios mediante el protocolo HTTP. Otro servicio muy utilizado, el de correo

electrnico, genera trficos de mas de 12.000 millones de correos diarios. Estamos pues ante unas dimensionesmuy elevadas y un gran inters econmico asociado.

Las formas de acceder van mejorando y diversificndose.

Aspectos como: el diseo eficiente de pginas, la caducidad de la informacin, la bsqueda de contenidos, elposicionamiento en buscadores, ... estn generando nuevos y prsperos negocios.

El futuro, probablemente, nos deparar una diversificacin de los medios de acceso a la red (integracin contelfonos mviles, PDA, ...); una consolidacin de una internet alternativa para negocios con prdida delanonimato, mayor control y mayores anchos de banda; una mejora sustancial en las infraestructuras de lainternet actual que no desaparecer; un aumento de la brecha digital y un aumento de la regulacin legal del uso.

Conceptos importantes

Internet es el primer medio interactivo en tiempo real.

El servicio ms utilizado actualmente es el correo electrnico.

El ncleo duro de Internet est en sus protocolos.

Internet interconecta millones de ordenadores que se identifican mediante la IP y se mandan informacinmediante TCP.

Las redes de internet privadas se llaman intranets.

Existen millones de pginas de internet indexadas por los buscadores pero tambin millones de ellas que estn"ocultas".


14/197

14

PRESENCIA WEB

El inters por estar en Internet es indiscutible, y el nmero de pginas existentes es muy elevado yexponencialmente creciente. Ello ha originado nuevos mercados, como los servicios de bsqueda (Google,Yahoo, ...) y los recopilatorios de informacin como Wikipedia ... )

Las organizaciones y los particulares suelen construir su presencia web mediante pginas HTML que residenfsicamente en los equipos de un proveedor de hosting. Si la presencia es mayor o menor, distinguimos entre:

pginas, si se limita a unas pocas pginas, normalmente de carcter personal.

sitio, si hablamos de un grupo de pginas con actualizacin frecuente y con algunos servicios ofertados, coninteractuacin incluso con los usuarios. Por ejemplo .

portales, cuando se constituyen en una agrupacin de servicios y ofertas que pueden ser, a su vez, accesosa otras partes de internet, con buscadores dentro y fuera del portal. Normalmente son temticos como, porejemplo, la edicin digital de los peridicos de tirada nacional o grandes distribuidores de informacin y servicios,o las presencias de los grandes organismos pblicos (ms informacin en enlaces)

Para conseguir esa presencia, se utilizan estndares y protocolos:

El lenguaje HTML (HiperText Markup Languaje) para elaborar su contenido.

El protocolo FTP (File Transfer Protocol) para enviar los contenidos al host una vez desarrollados.

El protocolo HTTP (HiperText Transfer Protocol) para la transmisin de esos contenidos entre proveedor(hosting) y usuario (navegante).

Enlaces

.

.

.

.

.

.

.

.

..


Los sitios web son grupos de pginas con actualizaciones frecuentes.

Los portales son los grupos de servicios y ofertas que pueden ser, a su vez, accesos a otros sitos de internet.

Para elaborar el contenido de las pginas web se utiliza el lenguaje HTML.

Los protocolos FTP sirven para enviar los contenidos al host.

Los protocolos HTTP sirven para la transmisin de contenidos entre el proveedor y el usuario.


15/197

15

CONTENIDOS WEB

En una primera aproximacin, los contenidos web podemos clasificarlos en Textos y multimedia, pero siprofundizamos un poco podemos encontrar:

Textos

Hiperenlaces

Elementos Interactivos

Imgenes y Grficos

Ttulos

Subttulos

Fondos

Banners

Elementos de navegacin

Separadores

Enlaces a Bases de Datos

Sonido

Elementos embebidos

Enlaces a correo electrnico

Imgenes mviles

Vdeo

Flash


16/197

16

...

Todos estos elementos deben elaborarse para su introduccin en las distintas pginas, para ello utilizaremoseditores y software especfico para cada uno de ellos. Este curso se centra en los contenidos de carcter grficoy multimedia.

TAREAS BSICAS DEL DISEO GRFICO WEB

Hasta hace relativamente pocos aos, es decir una vida hablando de Internet, todo lo que se aplicaba dediseo grfico a la web se poda aprender, holgadamente, en una semana. En la actualidad, existen postgradosuniversitarios y titulaciones especializadas en la materia.

Las tareas bsicas a dominar sern:

Captura de imgenes ya existentes, mediante aparatos especiales (escner, cmaras digitales, videocmaras, ...

), o creacin de imgenes desde cero (tabletas grficas, editores grficos, ... ), composicin y mejora de lasmismas.

Modificacin de las mismas: formato, colores, retoque, utilizacin de capas ...

Adaptacin y preparacin para web: peso, troceo, composicin, efectos especiales.

Publicacin: tamao, posicionamiento, interaccin.

Revisin y Mantenimiento: Eficacia y Eficiencia.

Lo ms importante para realizar dichas tareas es mantener una mente abierta y poseer una buena imaginacin,tener capacidad de observacin, paciencia, perseverancia, algo de mtodo (objetivo fundamental de este curso)y algunos, pocos, conocimientos tericos (tambin nos aproximaremos a ello en este curso). Las dems son untema de disposicin y aptitud.

No olvidar nunca que diseo sin contenido NO es nada. Prestaremos atencin al diseo y a la manera demostrar los contenidos de nuestras pginas, pero tendremos siempre presente que lo importante es ofrecercontenidos de calidad: aunque la mona se vista de seda, ... mona se queda.

Para disear una web hay que saber capturar imgenes ya existentes, crearlas desde cero, hacercomposiciones, modificarlas, adaptarlas y prepararlas para la web, publicarlas, revisaralas y mantenerlas.

Diseo sin contenido no es nada.

CONFIGURACIN DEL ENTORNO TRABAJO

A la hora de construir diseos grficos, si es algo que nos apasiona, podemos caer en la tentacin de utilizar unentorno de trabajo excepcional: grandes monitores con altsimas resoluciones, equipos de alta gama cargadosde RAM y procesador/es, tarjetas grficas con MB y MB de memoria ... Todo ello har que diseemos mscmodamente y mejor, ... pero nos aparta de la realidad excesivamente.

Aunque es cierto que no debemos despreciar dichas mejoras, tambin es cierto que, probablemente, el pblicoobjetivo de nuestros diseos no dispondr de tales maravillas y NO podr apreciar nuestro trabajo debidamente.Eso sin contar con las limitaciones del medio, que tambin nos van a condicionar. Es mejor, por tanto, colocarnosen la silla del usuario tipo y disear para l.

Para comenzar, podemos adaptar nuestra configuracin del sistema al estndar ms utilizado en nuestraorganizacin.


17/197

17

Aunque las resoluciones de pantalla van mejorando y aumentando con el tiempo, la mayora de los internautasestn todava con resoluciones de 800 x 600 pxeles, o de 1.024 x 768. As que deberemos ajustar nuestraspginas para que se vean bien, al menos, con esas resoluciones. Por tanto conviene disear desde un principioas, colocaremos el monitor con resolucin 800 x 600 para el curso (la peor de las normales), o bien la otra, anuestra eleccin.

Para ello suele bastar pulsar el botn derecho del ratn en nuestro escritorio y escoger propiedades >configuracin > rea de pantalla. Tambin aprovecharemos para escoger color verdadero antes de aceptar.

Tambin haremos que el rea de trabajo sea lo ms amplia posible, para ello configuraremos la barra de tareasdel escritorio para que se oculte automticamente. Debemos tener en cuenta que, para el diseo grfico web,hay que contar en pxeles y que los espacios disponibles deben estar bien controlados.

Conviene desactivar las barras auxiliares (Yahoo, Google, ...) de nuestro navegador, por los mismos motivos.

Conviene instalar Acrobat Reader, el Player de Flash (entre otras cosas para seguir los viewlets demostrativos) yel de Shockwave, si no lo estn ya.

Deberemos ajustar las pginas a una resolucin de 800 x 600 pxeles o de 1.024 x 768.

Para ajustar nuestro monitor a sta resolucin hay que ir al escritorio propiedades > configuracin > rea depantalla.

Para que el rea de trabajo sea lo ms amplia posible:

Estableceremos la ocultacin automtica de la barra de tareas de nuestro escritorio podr tener msespacio.

Desactivaremos las barras auxiliares de nuestro navegador. Es conveniente instalar Acrobat Reader, el Player de Flash y el de Shockwave.

DISEO

Se puede aplicar a todo y siempre lo mejora funcional o estticamente posible. As, un buen diseo puedemejorar el consumo del combustible de un vehculo, pero tambin puede hacerlo ms deseado. Ambos aspectosson aplicables a nuestras pginas web y a nuestras imgenes.

Los objetivos del diseo sern mejorar la eficacia y/o la eficiencia de nuestras pginas e imgenes. Adems, sepersiguen aspectos tales como: agradar, impactar, provocar ... es decir, evocar reacciones subliminales delusuario.

Cuando omos que un avin est bien diseado, probablemente se refiere a la eficacia, el avin hace lo que seespera que haga y lo hace bien. Cuando hablamos de diseo en un logotipo probablemente nos referimos a laeficiencia, el logotipo es pegadizo, sencillo e identifica claramente lo que se desea.

El diseo se ha utilizado en todas las pocas y, curiosamente, con soluciones repetitivas peridicamente. Porejemplo el diseo piramidal en la construccin, o la ropa femenina por piezas, ... es lo que llamamos modas.Las modas van y vienen, y siempre hay un grupo de gurs que las impulsan. Hay momentos en que se imponelo sencillo y otros en que domina lo recargado y, sin motivo aparente, desaparece lo anterior e incluso demuestraobsolescencia a aquel que no se adapta a la nueva tendencia. En muchas ocasiones, no existen motivos depeso para el cambio, de hecho, suele haber un diseo clsico que no pasa de moda, que se considera elegantey de otro nivel.

En internet el diseo ha entrado con gran fuerza, y no invertir esfuerzos en l es apostar por el fracaso denuestro site.


18/197

18

Los objetivos del diseo son la eficacia y/o la eficiencia de las pginas e imgenes.

Otro objetivo del diseo es evocar reacciones subliminales en el usuario.

GRFICO

El objetivo de todo lo grfico es ser visto. Ello tiene connotaciones importantes.

Cmo ser visto?, Con qu dispositivos? Eso va a condicionar nuestros diseos.

Lo habitual es que se utilice un monitor, de determinadas caractersticas, pero se van diversificando los mediosde acceso a nuestras pginas continuamente. No es lo mismo disear para tecnologa WAP que para monitoresde ordenador personal o para PDAs.

Los dispositivos de visualizacin van a restringir, y mucho, las posibilidades de nuestros diseos grficos.

CONCEPTOS IMPORTANTES

Lo habitual es utilizar un monitor con unas caractersticas determinadas, aunque actualmente se estdiversificando el acceso.

Los dispositivos desde los que se va a visualizar limita los diseos grficos

WEB

La web se ha convertido en un medio de comunicacin ms, en el medio por excelencia al permitirinteractividad y adaptacin al usuario, al ser casi instantnea y a su reducido coste y amplia disfusin.

Introduce reglas nuevas, pero puede, y lo hace, utilizar reglas clsicas de otros medios de expresin ycomunicacin. Veremos que el nmero de oro, la regla de los tercios, etc. de la pintura del Renacimiento, que sepueden aplicar perfectamente a nuestros diseos grficos en la web.

Adems, nuestros diseos web tambin podrn valer para otras formas de comunicacin, como los soportes dealmacenamiento digital (DVDs, CDs, ...) e, incluso, la publicidad y el espectculo. Por ejemplo, un diseo en flashpuede convertirse en un anuncio de una bebida de xito o del ltimo modelo de coche o en un videoclip

promocional de un cantante. Un logo que realicemos puede acabar representando toda una filosofa.

Podemos hablar de webismo, un movimiento o cultura basado en:


19/197

19

El uso del hipertexto, que da tridimensionalidad a nuestros contenidos.

El uso amplio de elementos multimedia.

La inclusin de autntica interactividad instantnea con el usuario.

La web representa una nueva manera de hacer las cosas y de entender la comunicacin.

Cada vez que surge un nuevo medio (sucedi con la radio, con el cine, con la televisin, con el vdeo y contantos otros) existe una primera fase de exploracin de sus posibilidades. Los pioneros intentan hacer todo loque se les ocurre con l, adems de adaptarlo para hacer lo que se haca con otros. Internet sigue en esta fase.

Posteriormente hay una segunda fase de establecimiento de estndares, normas y procedimientos, ms omenos obligatorios, que marcan las formas de actuar. Internet tambin est en esta fase.

Cierto, parece ambiguo, pero algunos usos de Internet ya estn ms que probados y asentados (por ejemplo: elcorreo electrnico, la navegacin web, ...), mientras que todos los das surgen nuevas y variadas posibilidades(podcasting, weblogs, P2P, chat, elearning, wiki, ...).

En principio, y centrndonos slo en el diseo grfico web, el que interpretar todos nuestros esfuerzos y los

mostrar al usuario, es el navegador, es decir, un software instalado en su dispositivo de visualizacin. Estesoftware interpreta lo que le llega y traduce segn su configuracin, parametrizacin y posibilidades deldispositivo. Ello, por supuesto, tambin va a condicionar nuestros diseos.

La web es el medio por excelencia de comunicacin por su interactividad y adaptacin.

Los diseos web tambin servirn para soportes de almacenamiento digital.

Internet todava est en una primera fase de exploracin de sus posibilidades aunque tambin se estnestableciendo estndares y normas que corresponderan a una segunda fase.

El navegador interpretar nuestros diseos para mostrrselos a los usuarios.

EJERCICIOS

El alumno debe haber recibido una clave de acceso y unas instrucciones para acceder a la plataforma. Si ello noes as, debe ponerse en contacto con el INAP, o con el tutor del curso, bien de forma directa o a travs de otrocompaero.

1. Entrar en el foro y saludar a los compaeros ( Cursos OnLine). Este mensajeseala el punto de inicio del curso para cada alumno, y significa que se han recibido correctamente las claves deacceso y que se sabe cmo acceder a la plataforma. No se considerar a un alumno activo hasta que publique elmensaje (y por tanto NO se superar el curso correctamente sin este requisito).

2. Conseguir una versin trial de Photoshop.

Bien desde:

La web de Adobe.

La propia plataforma del curso, en donde se intentar colgar (si es posible por su tamao).

Una revista.

Una de la que ya se disponga.

3. Mandar un correo electrnico a los tutores (la direccin estar en el foro en el mensaje de bienvenida)

con:


20/197

20

Nombre del alumno.

Email de contacto que se desea (personal, oficial, ...).

Si se dispone ya de una versin de Photoshop y cul, si es trial o completa.

Conocimientos de Photoshop o de otros Editores Grficos (nulos, iniciales, medios, altos).

Si el alumno trabaja en un departamento de desarrollo y mantenimiento web o no.

Qu otras herramientas web se conocen y el nivel de conocimiento (Dreamweaver, Adobe GoLive,FrontPage, ...).

No olvidar que los tutores pueden ir adaptando el nivel del curso al de los alumnos, por ello esimportante que se conozca.

Con carcter general, los tutores se ofrecen a profundizar en todas aquellas cuestiones que sean deinters para los alumnos


21/197

21

TEST DE AUTOEVALUACIN

1. La mayor parte de Internet est indexada por los llamados buscadores como Google.

Verdadero

Falso

2. HTTP es el protocolo que permite construir pginas web.

Verdadero

Falso

3. Para utilizar un Editor grfico se requiere una buena cantidad de RAM, pero la potencia de la CPU noes un elemento decisivo porque no requieren mucho clculo matemtico.

Verdadero

Falso

4. El diseo no consiste slo en innovar, muchas veces se aplican diseos antiguos que vuelven a estarde moda.

Verdadero

Falso

5. Una pgina web puede adaptarse a las preferencias del usuario y, en la prxima visita, ser diferente.

Verdadero

Falso

6. Conviene utilizar siempre el mejor equipo disponible para el diseo grfico web, configurndolo a susmayores prestaciones para conseguir mejores diseos.

Verdadero

Falso

CONCLUSIN

Nos encontramos ante un nuevo medio de comunicacin que, adems, introduce nuevas maneras de entender elaprendizaje, el ocio, la consulta, ...

Su caracterstica diferencial es la interactividad y adaptacin al usuario. Ofrece muchos servicios, uno de los msdifundidos es la navegacin web.

En el curso nos centraremos en aprender las tcnicas del diseo grfico aplicables a nuestras pginas.


22/197

22

FORMATOS GRAFICOS

INTRODUCCIN

En la web, los grficos inicialmente no estaban soportados, la web era exclusivamente textual y ningn elementomultimedia era manejado por los primeros navegadores. Eso cambi con MOSAIC, el precursor de Netscapeque, en 1.993, permiti visualizar grficos GIF en la web. Este simple hecho contribuy en gran medida a larevolucin posterior del medio.

La necesidad de soportar otros formatos grficos se convirti en una guerra entre navegadores y entreestndares. Y dada la importancia que tiene los grficos en la web los desarrolladores tuvieron que llegar aacuerdos para conseguir introducirlos.

OBJETIVOS

Revisar las distintas maneras que tenemos de almacenar nuestros grficos.

Ver qu ventajas tienen unas con respecto de otras.

Combinar formatos.

USOS DE LAS IMGENES EN LA WEB

Las imgenes en nuestras pginas web se pueden utilizar como fondos, como elementos de navegacin,botones flechas, bolos y lneas, como grficos e imgenes tal cual, como fotografas que aaden informacin alnavegante (una imagen vale ms que mil palabras), como logotipos y pequeos grficos institucionales,

bneres publicitarios o de noticias, mapas de imagen y mens, hiperenlaces, botones 3D, metforas y temas, y,por ltimo, como una manera de mantener formatos textuales complejos.

Existen webs con un uso profuso de grficos, como las de cantantes famosos o de museos por ejemplo, mientrasque otras los usan muy comedidamente. Sea como sea, siempre transmiten informacin adicional y tambinsensaciones subliminales en las personas que los visualizan. Si aprendemos a utilizarlos correctamente,podremos hacerlo fcilmente.


Hay diferentes formas de utilizar las imgenes en internet:, por ejemplo, como fondo, como elemento denavegacin, como grfico, como fotografa, como logotipo, como banner, como mapa de imgenes o mens ...

VENTAJAS E INCONVENIENTES DE LOS GRFICOS EN LA WEB

Ventajas

Mejoran la comprensin.


23/197

23

Dan un aspecto ms interesante.

Permiten dar formato.

Informan.

Entretienen.

Evocan sentimientos subliminales.

Inconvenientes

El gran problema de las imgenes, y en general de los elementos multimedia, dentro de nuestras webs es queocupan mucho espacio y ralentizan su descarga. Todo lo que podamos hacer para reducir ese peso de lasimgenes redundar en beneficio para el tiempo de respuesta y carga de las pginas, por tanto, debe ser unelemento fundamental de nuestros diseos el optimizar nuestras imgenes.

Hay que ajustar el nmero, tamao y calidad de imgenes con el peso de su carga, inflacin de imgenes vs

ram.No se ven igual en todas las plataformas, y ya no hablamos de una minipantalla de un telfono mvil de ltimageneracin comparada con un monitor de 21 pulgadas, sino de entornos casi similares. Por ejemplo en equiposMAC la visualizacin es ms clara y en entornos Windows ms oscura, debido a que utilizan un distinto ajuste degamma.

Se habla de que slo existen unos cuantos colores comunes entre plataformas, los colores seguros, alrededorde 212 colores.


Incluir imgenes en nuestros diseos es muy ventajoso ya que mejoran la comprensin, el aspecto, informan,

entretienen, permiten dar formatos y evocan sentimientos, pero habr que tener mucho cuidado, ya que elproblema de las imgenes es que ocupan mucho espacio y ralentizan la carga de la pgina web. Adems, no seven igual en todas las plataformas.

EL ALMACENAMIENTO

Las imgenes se generan, se almacenan, viajan y se visualizan. Para ello es necesario guardar la informacingrfica de alguna manera. Desde casi el comienzo de la informtica, se han desarrollado procedimientos ms omenos ingeniosos para conseguirlo. En este curso veremos muchas tcnicas para ello.

En definitiva, consiste en guardar la informacin de todas y cada una de las caractersticas de una imagen,

mediante un algoritmo que las codifica normalmente mediante una matriz de nmeros, de manera que unprocesador pueda reconstruirla y mostrarla en un dispositivo de salida. Este algoritmo es la base de undeterminado formato grfico, y muchas veces se mantiene oculto o se patenta.


Las imgenes se almacenan guardando toda la informacin de las caractersticas propias de ellas mediante unalgoritmo que las codifica.


24/197

24

TIPOS

Hay dos tipos de imgenes digitales:

De intensidad: fotografas, vdeos, ...

De alcance: radares, queratometra, ...

En este curso nos centraremos en las primeras.

Existen dos formas de almacenar la informacin grfica:

Mapas de pxeles.

Sistemas vectoriales.

Vamos a ver detenidamente ambas.


Los tipos de imgenes digitales son las de intensidad y las de alcance.

Las formas de almacenar la informacin grfica son en mapa de pxeles o en sistemas vectoriales.

FORMATOS DE MAPAS DE PXELES

Los Mapas de Pxelesse basan en que las imgenes digitales, todas ellas rectngulos (aunque existen tcnicaspara disimular esto), se pueden almacenar guardando la informacin asociada a todos y cada uno de los pxelesque las componen.

Los pxeles son pequeos puntitos, generalmente pequeos rectangulitos, que mediante una determinadaluminosidad, color, tono y brillo, transmiten al ojo humano las imgenes, el ojo agrupa la informacin y ve lospxeles en conjunto, y el cerebro interpreta el resultado.

Cuanto ms grande es la imagen, mayor es la informacin a almacenar. Cuanto ms compleja es la imagen,mayor es la informacin. As, si guardamos 24 bits de informacin por cada pxel, una imagen de 640 x 400

pxeles ocupar alrededor de 1 MegaByte. Una de 800 x 600 1.44 MB.

El nmero de bits por pxel es la profundidad de bit, y cuanto mayor sea, mejor podremos reconstruir despus eloriginal. 24 bits se considera ya color real y permite utilizar una paleta de 65 millones de colores.


25/197

25

La solucin a estas enormes cantidades de espacio necesarias para almacenar imgenes es el uso de tcnicasde compresin.

Existen:

Formatos, algoritmos, que comprimen sin prdida, es decir, que podremos reconstruir la imagenconsiguiendo una copia perfecta del original. Un ejemplo de compresin sin prdida es el formato GIF.

Formatos de compresin con prdida, de manera que la reconstruccin de la imagen no ser perfecta,aunque podemos conseguir similitudes tan grandes que el ojo humano no las distinga en un monitor.Normalmente conseguiremos mayor compresin con stos ltimos. Un ejemplo de compresin conprdida es el formato JPG.

El formato de mapas de pxeles tiene algunos inconvenientes, como el efecto de pixelado al ampliarimgenes. Los pxeles son tan pequeos que, habitualmente, no se ven, pero al ampliarlos acabanvindose. Son los tpicos dientes de sierra en las curvas.

Tambin tienen ventajas, entre otras que suelen conseguir una mayor calidad, llegando a ser autnticasfotografas.


Los mapas de pxeles guardan las imgenes asociando informacin a cada uno de los pxeles que lascomponen.

Los pxeles son pequeos rectngulos que mediante el color, la luminosidad, el tono y el brillocomponen las imgenes.

Cuanto ms grande es la imagen mayor es la informacin a almacenar.

El nmero de bits por pxel es la profundidad de bit.

Para solucionar el problema del espacio en el almacenamiento de imgenes se utilizan tcnicas decompresin.

Existen formatos de compresin con prdida como el JPG y sin prdida como el GIF.

El formato de mapa de pxeles tiene el inconveniente del pixelado al ampliar las imgenes.

Las imgenes en mapa de pxeles suelen ser de mayor calidad.

FORMATOS VECTORIALES


26/197

26

Los formatos vectoriales utilizan un mtodo completamente distinto para guardar la informacin de una imagen,lo hacen mediante primitivas geomtricas y frmulas matemticas. As, una figura la descomponen en pequeospolgonos regulares de los que almacenan su posicin, coordenadas de los vrtices o puntos clave (por ejemploel centro y el radio de un crculo), las texturas de las superficies, etc. Cuando se visualiza la imagen basta coninterpretar las frmulas e ir recomponiendo el puzzle. Todo ello permite, habitualmente, que se utilice un menorespacio de almacenamiento.

Los problemas de pixelado al escalar desaparecen, porque a la CPU le da lo mismo dibujar un crculo de 3 deradio que de 37. Ocupa lo mismo sea cual sea el tamao de la imagen reconst ruida (resolucin infinita).

Recomponer una figura mediante polgonos no consigue calidades tan reales como los mapas de pxeles.Adems, la mayora de los formatos vectoriales no son interpretados directamente por los navegadores,debiendo utilizarse pluings adicionales, por ejemplo el Acrobat Reader para interpretar ficheros PDF, o el playerde Flash para ese tipo de ficheros. Se ha calculado que el 96% de los internautas habituales disponen de esoscomplementos en sus sistemas por lo que no precisan descargarlos sobre la marcha cuando visitan pginas quelos precisen. An as, esta tcnica es habitual, de forma que las pginas hechas con flash o que utilicen estosformatos suelen colocar un hiperenlace de descarga al software adicional necesario.

Nada impide que en lugar de polgonos, se utilicen poliedros con volumen, primitivas de volumen. Hablaremos

entonces de vxels en lugar de pxels y los poliedros almacenarn informacin de todas sus caras, lo que nospermitir, por ejemplo, rotar elementos de la imagen que pasar a simular que est en tres dimensiones (3D).Ello facilita enormemente el desarrollo de videojuegos y de pelculas pues basta con cambiar un parmetro de ungrupo de frmulas para ver por detrs un objeto o personaje que estbamos viendo por delante. Tambinsimplifica mover zonas de la imagen., redimensionarlas, modificar sus texturas, sus comportamientos ante lasfuentes de luz, ... Con estas tcnicas se suelen almacenar tambin datos sobre las fuentes lumnicas, como suposicin espacial y sus caractersticas.

Los intentos de engaar al ojo humano y que ste piense que es una imagen real se han sofisticado tanto y contanto xito que hoy en da es casi imposible diferenciar a simple vista (y menos en un monitor) una imagen demapa de pxeles de una imagen vectorial.

Una de las tcnicas es la utilizacin de fractales, que no son ms que grficos confeccionados mediante laaplicacin de valores crecientes a determinadas frmulas matemticas. Ello hace que se vayan juntandoelementos iguales para construir formas idnticas, pero mayores, y as sucesivamente. El uso de fractales paratexturas por ejemplo, simula completamente a la naturaleza, pudiendo obtener textura el agua, las cortezas, la


27/197

27

tierra, el cielo, las hojas, y cualquier otro elemento que se nos ocurra. Los ms conocidos, pero hay miles, sonlos de Mandelbroty el de Julia, que describimos a modo de ejemplo:

Mandelbrot.xnew = a + bx + cx2 + dy + ez + f sin(pi t/8), ynew = x, znew = y, donde a y f sonconstantes.

Julia. z^2 + c.

Tambin se usan vectores que indican direcciones, as se consigue mover objetos.

FORMATOS GRFICOS CLSICOS

Aunque aparecen continuamente nuevos formatos, y otros muchos caen en el olvido, hay algunos que se hanmantenido durante mucho tiempo. La potencia de las empresas que los han respaldado no han sido ajena a ello,existiendo incluso una rivalidad entre los pesos pesados de la industria por imponer sus formatos de

propietario.

Se suelen denominar por las tres letras del tipo de fichero que generan, y se reconocen por ello, adems de quela mayora incluye informacin sobre formato y versin en la cabecera del fichero y podremos acceder a lamisma mediante un editor hexadecimal. Es un error frecuente denominar como un formato a un fichero de otroformato, por ejemplo cambiar GIF por JPG en la extensin, lo que lo hace irreconocible por el sistema operativo.Basta con leer la cabecera del mismo y asignarle la extensin correcta del nombre para que pueda manejarse.

Los formatos ms difundidos son:

PIC. Picture File. Utilizado por Lotus 1-2-3. Vectorial.

PCX. Paint Brush de Z-Soft. Vectorial.

BMP. BitMap de Microsoft. Como su nombre indica, mapa de pxeles.

TIFF. Taged Image File Format. Es el utilizado por la mayora de escneres. Mapa de pxeles.

PCD. Kodak Photo CD. Mapa de pxeles.

PSD. Photoshop de Adobe. Mapa de pxeles.

PDF. Adobe Acrobat de Adobe. Vectorial.

TGA. Targa.

IFF. Amiga.

WMF. Windows Metafile Format. De Microsoft. Vectorial.


28/197

28

EPS. Encapsulated Postscript. El utilizado por las impresoras postscript. Vectorial.

GIF. Graphic Interchange Format de Compuserve. Mapa de pixeles.

JPEG/JPG. Joint Photographic Experts Group. Mapa de pxeles.

FLA/SWF. El de Flash y el de Shokwave de Macromedia. Vectoriales.

Vamos a estudiar un poco ms a fondo los ms importantes para el diseo grfico web. Los ms utilizados enInternet, precisamente por sus caractersticas como la compresin alcanzada, son el GIF, el JPG y el PNG.Tambin nos encontraremos con PDF, TIFF y FLA para usos muy concretos.

Formato BMP

Formato de mapa de pxeles creado por Microsoft, nativo para los sistemas operativos Windows (se dice que esnativo porque el sistema operativo es capaz de manejarlo sin ayuda de otro software, es decir, que poseeinstrucciones de bajo nivel embebidas que lo manejan). Por tanto carga muy rpidamente.

Es compatible con Windows y con OS2.

Buena calidad puesto que utiliza 24 bits por pxel, llegando a los 16,7 millones de colores.

Permite transparencia en el color blanco. sto es importante para nosotros, porque podremos hacersobrevolar imgenes con fondo transparente sobre otras, sin que aparezca el efecto rectngulo de lasmismas.

Slo Internet Explorer lo maneja de forma nativa. Aunque las ltimas versiones de otros navegadoresadmiten cada vez mas formatos.

Formato TGA

El formato TGA es un formato de mapa de pxeles, de uso profesional, que compite con el TIFF y consigue unagran calidad.

Utiliza 32 bits de profundidad por pxel.

Muy extendido en Artes Grficas e Infografa.

Compatible con SGI, MAC y PCs.

Formato PDF

PDF (Portable Document File) es el programa utilizado para leer este formato es el Adobe Acrobat Reader(gratuito).

No es exclusivo de imagen, tambin soporta texto.

Ocupa poco espacio.

Compatible con pc y mac

Formato GIF

Es uno de los ms difundidos en Internet por su flexibilidad. Es muy utilizado para: logos, iconos, pequeosgrficos animados....

Mapa de pxeles con compresin 10:1 sin prdida de calidad.

Admite una paleta de hasta 256 colores, aunque son variables y seleccionables entre todos los demspara cada grfico. Ello se debe a que slo almacena 8 bits por pxel.

Los colores utilizados se almacenan junto con la imagen en una tabla especial, latabla CLUT.


29/197

29

Como compresin utiliza el algoritmo LZW, el mismo que utiliza WinZip (algoritmo Lempel-Ziv-Welch)que, desgraciadamente, posee copyright.

Una modificacin del formato original, el GIF89a, se ha impuesto para aadir la posibilidad detranspariencia, entrelazado y animacin. El original, el GIF87 no los soportaba, y deberemos tenerprecaucin al guardar nuestros grficos para escoger el bueno.

Resultado de calidad Web ms predecible.

La visualizacin de los colores en los monitores y en las distintas plataformas no siempre es idntica. Enla web se habla de los 212 colores seguros, que seran los nicos que garantizaran unatransportabilidad entre sistemas.

El formato GIF utiliza esquema de codificacin de compresin run-lenght que funciona bien congrandes superficies de color uniforme y horizontales.

En cuanto a la transparencia:

Permite asignar transparencia a un color. Se solapa mejor con fondos: efecto flotante. Muy usado paracollages. La transpariencia usa un bit para definir el color.

Como los pxeles son cuadrados, las lneas curvas salen con dientes de sierra, para mejorarlo se rellenanparcialmente los pixeles del borde (antialiasing) que NO se hacen transparentes junto con el resto, lo quecomplica la transparencia GIF89a: Efecto de halo.

Hay varias soluciones:

Fondo de la imagen igual al color de fondo de la pgina.

Crear una imagen sin antialiasing.

Utilizar transpariencia de canal alfa.

Elentrelazado es una tcnica consistente en la que la carga del fichero se hace por franjas horizontalesalternas de 8 pxeles de alto, de manera que se entrev el resultado final de la imagen mucho antes de queest totalmente cargada. A cambio ralentiza un poco la carga total. La ventaja es que los grficos no debendescargarse por completo para que el usuario pueda ya saber si le interesa esperar o ya puede hacer clic y saltara otra pgina.


30/197

30

En cuanto a la animacin:

Se almacena como un librillo de imgenes e informacin sobre el tiempo de transicin entre ellas y el nmerode repeticiones. Como es de imaginar son ficheros grandes, puesto que poseen en su interior variasimgenes. Se puede optimizar, guardando solo las diferencias entre una imagen y la anterior, as si haypartes comunes no deben almacenarse ni ocupar espacio.

Latabla CLUTes la tabla de colores utilizados por el grfico, para ello se recurre al indexado.

Ejemplo:Si partimos de una imagen 100x100 pixeles con 24 bits: 240.000 bits.

Se basa en que pocas imgenes precisan 16 M de colores, por lo que se eligen 256para cada imagen y sealmacenan en una tabla (256 como mximo). Cada color mantiene su profundidad de 24 bits, pero sereferencia, por la tabla, con slo 8 bits, en nuestro ejemplo: 86.144 bits.

Ocupa un poco ms de un tercio que el original porque la propia CLUT tambin necesita espacio.

En cuanto al tramado:

El tramado es una tcnica que mejora la calidad final. Calcula tonos intermedios entre cada dos colores deCLUT, sin necesidad de almacenar un tercer color. Es ajustable y hace la compresin mas eficaz.

Jugar con el n de colores CLUT y con la cantidad de tramado consigue los ficheros menores con mscalidad. Se pueden tramar slo partes de una imagen (canales alfa).

Emplea el algoritmo LZW, desarrollado por Lempel, Ziv y Welch, recorriendo la imagen de lnea en lnea(como una mquina de escribir). Guarda los cambios de color. Cuantos menos colores tenga la CLUT, mejorcomprime LZW.

Ejemplo:15 pix rojos seguidos = 15 x rojo, en lugar de: rojo, rojo, rojo, rojo, ....

La mayora de editores grficos poseen algoritmos ms o menos optimizados para guardar las imgenes. Lacantidad de compresin alcanzada y la calidad del resultado dependen de la bondad de los algoritmosutilizados y stos mejoran de versin en versin de los productos. Por supuesto son secretos de lasempresas y todos no funcionan igual.

Por ejemplo existen diferencias entre Adobe Photoshop e Image Ready, estando este ltimo ms optimizadopara su uso en la web. Por tanto se recomienda su utilizacin en el ltimo paso de cualquiera de nuestrostrabajos.

Guardar para web: evita tener que pasar previamente de RGB a Indexado y calcula la tabla CLUTmnima (adaptable) y LZW automticamente.

Guardar comoobliga a cambiar de formato previamente.

Los problemas del formato GIF son obvios, slo maneja 256 tonos de color o gris.Ejemplo:Ilustraciones planas

GIF89a(reglas tcnicas de 1989 que explican como pueden ponerse juntos los GIFs) posee algunascaractersticas muy tiles.

Formato JPG / JPEG

Formato apropiado para fotografas (


31/197

31

Prdida acumulativa con cada compresin. Es decir, si guardamos varias veces hay una prdida decalidad en cada guardada, de forma acumulativa. Conclusin: slo guardaremos en este formato en elltimo momento. Mientras tanto trabajaremos con un formato ms potente, como el PSD, que nospermitir adems guardar informacin adicional de capas, selecciones, trazados, canales, historia, etc.Esta recomendacin es con carcter general, siempre trabajaremos durante la fase de depuracin enformatos potentes y sin prdida, y slo al final, cuando ya colocamos las imgenes para su envo al

host, utilizaremos formatos de compresin.

MPEG es el formato jpg en movimiento (M-JPEG, MPEG-1, MPEG-2).

Puede almacenarse en formato RGB y CMYK.

Utiliza compresin DCT (Transformacin Discreta de Coseno).

Soporta un formato progresivo (la imagen va ganando resolucin poco a poco segn se va enfocando)semejante al entrelazado.

Se basa en que el ojo humano es menos sensible a los cambios de color que a las variaciones de brillo.

Se separa la informacin de color y brillo de cada pixel y los comprime por separado.

Utiliza bloques de 8x8 pixeles.

Funciona mal con cambios de color extremos, bien con degradados.

Una imagen desenfocada comprime mejor (est ms suavizada).

La imagen descomprimida no es igual que el original a nivel binario (el ojo no lo percibe).

La calidad de la compresin vara de programa en programa segn los algoritmos utilizados.

JPEG 2000: emplea algoritmos distintos (transformada Wavelet) y bloques de imagen de 64x64 pix.Puede hacerse totalmente reversible. Se puede organizar por capas (varias imgenes en una), ymuchas mas ventajas, pero no ha acabado de ser aceptado e implantado.

Tiene Copyright y Compresion Labs y ya est cobrando a fabricantes como Sony (patente 4.698.672de 1986, 10 aos antes de la difusin de JPEG, se crea que no tena, reclamada el 5-7-2002).

Formato PNG

El formato PNG (Portable Network Graphic Format) nace para sustituir al GIF en Web, debido a que el algoritmoLZW est patentado. Tiene algunas ventajas de GIF y de JPEG.

Compresin sin prdidas (Deflacin), pero menor.

16,7 millones de colores (24 bits).

Permite transpariencia (256 niveles), capas y canales Alfa.

Hay navegadores que todava no soportan bien sus caractersticas.

No permite animacin.

No se ha impuesto como era de esperar.

Formato TIFF

TIFF ( Tag image file format.) ofrece alta calidad y comprensin sin perdida pero es incompatible con muchosnavegadores.


32/197

32

Profesional: MAC.

Photoshop lo difundi: WIN.

Rpido en la carga.

Indicado para la impresin.

JPG comprime 10 veces ms.

Para algunas cosas es bueno: negro sobre blanco (BOE).

Formato FIF

FIF (Fractal Image Format) se comenta como curiosidad, para ver cmo algunos formatos diseadosespecficamente para un determinado tipo de grficos consiguen grandes compresiones, pero que fuera de eseentorno no son aplicables.

Sonda espacial galileo (nasa):

o Miles de imgenes del sistema solar.o Antena principal inutilizada.o Antena de baja frecuencia.

Compresin brutal sin prdida, varios megas en pocos kb.

Formato FLA

Fla es un formato vectorial utilizado por FLASH (el de Shokwave, predecesor de flash, es el SWF). Est indicadopara animaciones y est muy de moda, ha generado una legin de fans provocando una revolucin esttica en

Internet aunque algunos gurs dicen que "despista" (Jackob Nielsen).

Estndar de facto.

Alto nivel de compresin.

Precisa plugin.

Se ha convertido en un soporte artstico: Online Flash Film Festival (OFFF), FlashForward, ...

Formato VML

VML (Vector Markup Language) es un formato creado para Microsoft (IE 5 y posteriores, MS-Office 2000 y

posteriores).

No precisar plugin run-time (si es apoyado).

Basado en XML.

Herencia del formato a compatible CSS2 (combinacin muy potente).

Formato SVG

SVG (Scalable Vector Graphics) aade zoom, tipografas, bsquedas, interaccin con usuario, ...

World Wide Web Consortium (W3C) .

No precisar plugin run-time.


33/197

33

Basado en XML (integracin CSS2 y DOM).

Apoyado por Adobe.

De momento Plugin para IE y Netscape: .


El formato BMP:

o Es un formato de mapa de pxeles para los sitemas de Windows y tambin compatible conOS2.

o Utiliza 24 bit por pxeles y llega a los 16,7 millones de colores.

o Permite transparencia en el color blanco.

El formato GIF:

o El formato GIF es un fomato de mapa de pxeles sin prdida de calidad.

o Tiene una paleta de color de hasta 256 colores.

o Almacena 8 bits por pxel.

o Para comprimir usa el el algoritmo LZW.

o Se utiliza para para logos, iconos y pequeos grficos animados.

o Es un formato que permite transparencias.

o El entrelazado es una tnica que permite entrever el resultado final de una imgen antes deque se descargue totalmente, ya que almacena franjas horizontales.

o Permite animaciones. Las imagenes se almacenan como un librillo y guarda la informacinsobre el tiempo de la transicin entre ellas y el nmero de repeticiones.

o En Adobe Photoshop e Image Ready se pueden guardar las imgenes para la web.

El formato JPEG:

o Comprime con prdida progresiva en cada compresin.

o Tiene 16, 7 millones de colores.

o No admite transparencia.

o El formato MPEG es el JPG en movimiento.

o Se puede almacenar en RGB y en CMYK.

o Es un formato apropiado para fotografas.

o No permite ni animacin ni transparencias.


34/197

34

o Usa compresin DCT.

o Soporta un formato de carga "progresivo".

EJERCICIOS

Actividades

1. Generar una imagen RGB, con fondo transparente, de 300 x 300 pxeles.

Guardar como GIF con el nombre E1-Transp.gif.

Rellenar de blanco.

Guardar como GIF con el nombreE1-Blanco.gif.

Aadir franjas horizontales de 3 pxeles de color rojo.

Guardar como GIF con el nombre E1-Horizontal.gif.

Girar 90, las franjas se vern ahora en vertical.

Guardar como GIF con el nombreE1-Vertical.gif.

Comprobar las diferencias en tamao, con el administrador de archivos.

GIF funciona mejor con superficies uniformes, con cambios bruscos de color y con distribucin horizontal demasas. As, un fondo uniforme de 300x300 pix ocupa 1 KB.

Si aadimos franjas horizontales de otro color, ocupa 1.4 KB. Con las mismas franjas, pero verticales ocupa 2.7

KB. Esto es debido a que GIF almacena la imagen en franjas de izda. a dcha. y almacena los cambios de color.

2. Abrir una imagen nueva, fondo blanco.

Utilizar el pincel para crear manchas de color, alternando los colores.

Cuando tengamos el lienzo bien embadurnado, guardamos como PSD.

Luego guardamos como GIF, como JPG y como PNG.

Comparamos los tamaos de los ficheros.

3. Guardar una imagen en formato JPG a calidad mxima.

La misma imagen a calidad media y baja.

Comparar el resultado visual de las tres imgenes.


35/197

35


1. Uno de los formatos grficos ms utilizados en Internet es el BMP.

Verdadero

Falso

2. El formato GIF y el JPG se usan tanto porque no tienen copyright.

Verdadero

Falso

3. GIF funciona mejor con cambios bruscos de color.

Verdadero

Falso

4. JPG funciona mejor con cambios graduales de color.

Verdadero

Falso

5. PNG comprime ms que JPG, por ello acabar imponindose.

Verdadero

Falso

6. SVG y VML son formatos antiguos, ya en desuso.

Verdadero

Falso

CONCLUSINLos formatos grficos tienen sus ventajas y sus inconvenientes, no existe el formato perfecto.

Utilizaremos unos u otros en funcin de las caractersticas concretas de la imagen a almacenar. Siempre que sepueda, se deben utilizar formatos de compresin sin prdida.

Conviene guardar siempre una copia de nuestros trabajos en un formato potente, como PSD y luego pasarlas aldefinitivo


36/197

36

CAJA DE HERRAMIENTAS

INTRODUCCIN

En esta leccin desglosaremos las diferentes herramientas que se utilizan para el diseo de pginas web.Haremos recomendaciones sobre cules nos parecen ms adecuadas para un tipo de trabajo y cules para otro.Tambin expondremos programas destinados para el mantenimiento de la web que creemos. En el mercadoexisten muchisimas aplicaciones para el diseo de pginas web, mucho de este software es shareware ofreeware lo que nos facilitar bastante su adquisicin

OBJETIVOS Distinguiremos entre herramientas software y herramientas hardware que nos pueden ser tiles en

nuestro trabajo.

Repasaremos las herramientas ms importantes.

Aprenderemos tcnicas que puedan mejorar su uso.

APARTADOS

HERRAMIENTAS SOFTWARE

Dentro del diseo web se utilizan masivamente una serie de aplicaciones y programas que cubren las diversastareas del mismo: edicin HTML, edicin grfica, elementos multimedia, transferencia de ficheros, ...

A continuacin describiremos los grupos ms importantes.

Edicin html

Se trata de aplicaciones que nos facilitan la tarea de escribir cdigo HTML y, por tanto, de construir pginas web.Muchos de ellos se pueden integrar con herramientas complementarias como editores grficos y suelen venir enpaquetes completos o suites, como Visual Studio o Go Live.

Editores html (1995) 1 poca, Notepadde windows, Word, Hot dog, Aracnophilia, Coffecup html,1-4-all, y tantos otros. Se trata de programas que permitan, y permiten, escribir cdigo ASCII HTML

con algunas ayudas. La mayora shareware y freeware. Se deba estar continuamente abriendo elnavegador para comprobar el resultado final. El NotePad de Windows y el WordPad, siguen utilizndosemucho para trabajos sencillos y pequeas modificaciones de cdigo o adaptaciones, por ejemplo paracambiar una fecha, o una descripcin.

Editores visuales html 2 poca, 1997. Surge el concepto wysiwyg (What You See is What You Get),de manera que mientras se trabaja en pantalla ya se dispone del aspecto aproximado final. Estemovimiento no slo afect a este tipo de programas, sino a todo el software Ofimtico en general.Algunos ejemplos son: Microsoft Front Page 2.002, Hot dog, Ulead webrazor,Liquid fx, Hot metal 6y posteriores, Macromedia dreamweaver, Adobe golive, ... La mayora de estos editoresevolucionaran hacia los wysiwyg.

Las etiquetas HTML, y ms segn los estndares de W3C, tienen sus normas de construccin, y estosprogramas ayudan mucho a evitar errores como dejar abiertas etiquetas, o dejarnos algn carcter.

El mercado profesional se reparte:


37/197

37

1. Dreamweaver de Adobe (80% del mercado).

2. Adobe Golive.

3. Front Page.

La fusin de las dos empresas Adobe y Macromedia, asegura un completo control del Mercado salvo que surjan

nuevos competidores o Microsoft apueste seriamente por su propio editor.

Desarrollo de aplicaciones web

Si queremos que nuestras pginas sean ms dinmicas y disponer de mayores posibilidades, debemos superarlos lmites de HTML. Para ello surgen otros lenguajes de programacin embebidos en HTML que amplianenormemente sus posibilidades: CSS, DHTML con CGIs, JavaScript, Perl, Pitn, ASP, PHP, JAVA, ColFusion.

Hay aplicaciones que nos permiten gestionarlos, al mismo tiempo que nuestro HTML: Macromedia dreamweaverstudio, Visual studio, Visual interdev, Visual j++, Visual c++, Microsoft c.net (c#), Jbuilder Borland, Lotus devpackesuite (applets).

JavaScript aadi muchas posibilidades. Hoy en da si queremos aadir opciones de foros, chat, weblog ... a

nuestras webs, utilizamos PHP. Y si queremos incluir aplicaciones completas usamos JAVA.

Gestores de contenido

Si queremos interaccin con Bases de Datos en tiempo real, con actualizacin de contenidos, existen un grupode aplicaciones muy potentes, autnticas plataformas para construir y mantener nuestros websites, y con preciosajustados a sus posibilidades. Son entornos modulares, en donde adquirimos lo necesario y que estn encontinuo desarrollo y crecimiento: Vignette, Documentum, ...

Editores grficos

Se trata de aplicaciones orientadas al manejo y modificacin de imgenes. A continuacin se muestra una lista

de los editores grficos. Adems, veremos alguno en detalle durante el curso (editores grficos).

Paint shop pro, una gran alternativa shareware.

Photoshop, el ms utilizado y la referencia indiscutible.

Image ready, el complemento web de Photoshop.

Fireworks, era un excelente editor de Macromedia, competencia de Photoshop,hasta que se produjo launin, es el sustituto de ImageReady.

Corel Draw, el nmero uno en vectoriales.

Adobe in Design, la alternativa vectorial de Adobe.

Flash, autnticas pelculas de Macromedia.

Kaiss power.

Bryce.

Micrograf picture publisher 8.

Painter, para algunos una excelente herramienta de creacin grfica.

Picture it.

Photodraw.

GIMP, freeware, muy bueno.


38/197

38

Editores grficos 3d:

3d studio max.

Maya.

Pov ray.

Lightwave.

Editores grficos web. Los ms usados a nivel profesional:

Adobe photoshop + image ready.

Adobe flash.

Otros de calidad profesional:

Adobe fireworks.

3d studio.

Buenas alternativas (econmicos):

Paint shop pro(shareware).

Gimp(freeware).

Generalidades editores. La mayora de los editores grficos poseen:

Herramientas de seleccin, para extractar zonas de una imagen del resto.

Herramientas de retoque para modificar esas zonas seleccionadas.

Manejo de formatos y tipos de almacenamiento grfico.

Trabajo en capas (layers) como si de una pila de hojas transparentes se tratara, pudiendo colocarobjetos en capas y trabajar sobre ellos sin afectar al resto.

Utilizacin de texturas (patterns), o mtodos prediseados de relleno de zonas con texturas naturaleso muy elaboradas.

Utilizacin de filtros y efectos especiales con unos pocos clics, ahorrando un gran esfuerzo y tiempo.

Manejo de las caractersticas de tono, saturacin y luminosidad de las imgenes.

Opciones de guardado y transformacin de formatos


Para disear una pgina web necesitamos editores de HTML que nos facilitan la tarea de escribir elcdigo.

El concepto wysiwyg permite ver en pantalla de manera aproximada el resultado del trabajo.

Actualmente el mercado de los editores de texto se reparte entre Macromedia Dreamweaver, Adobe

Golive y Front Page.


39/197

39

Existen aplicacioneas que nos permite hacer ms dinmicas nuestras pginas web. Utilizan lenguajesde programacin "embebidos" en HTML. Ejemplos: CSS, DHTML con CGIs, JavaScript, Perl, Pitn,ASP, PHP, JAVA, ColFusion.

Existen gestores de contenido que nos permite una interaccin con bases de datos en tiempo real.

Tambin hay una gran variedad de editores de grficos: Paint Shop Pro, Photoshop, Image Ready,Fireworks, Corel Draw, Adobe in Design, Flash, Kaiss Power, Bryce, Micrograf Picture Publisher 8,Painter, Picture It, Photodraw y GIMP.

Navegadores

Internet explorer(tras tener un 98% del mercado, hoy no pasa del 50%).

Netscape navigator.

Mozilla, aumentando mucho por ser GNU (linux).

Opera.

Google Chrome,nuevonavegador de la empresa google,es freeware.

Linx, slo textos.

Servidor web

Ms internet information serveriis ( windows).

Apache(mundo unix), domina la web.

Otras herramientas multimedia

Multimedia: Adobe Flash(Player). Director(Shockwave).

Editores Vdeo: Adobe Premiere.

Editores De Texto: Ms Word.

Editores de pginas web: Dreamweaver.

Banners: Ulead Gif Animator.

Maquetadores: Pagemaker, Quarkxpress.

Animacin: Adobe Livemotion.

Crear Publicaciones: Neobook Pro, Director.

Ocr: Omnipage, Textbridge Pro.

Traductores: Babylon, Power Translator.

Gestin Web: Web Site Traffic Builder.

Adobe Indesign.

Adobe Illustrator.

Adobe Type Manager.

Adobe Web Collection.


40/197

40

Go Live.

Photoshop.

Illustrator.

Livemotion.

Catalogadores de imgenes

Como Acd-see, thumbplus, vueprint, Xnview, Lview,

En realidad hacen dos funciones:

1. Facilitan la clasificacin de imgenes visualizando pequeas muestras (thumbnails o uas del pulgar) deforma que al ver la imagen pequeita podemos moverla, renombrarla, etc con mayor comodidad. Estafuncionalidad ha sido reemplazada por el sistema operativo, que ya permite ver el contenido de directorios enformato imgenes en miniatura.

2. Transforman entre distintos formatos grficos.

Algunos aaden posibilidades de edicin y retoque.

Un buen sitio para descargarnos versiones de prueba y versiones freeware de los mismos es.

Herramientas auxiliares

Ws-ftp pro, cute ftpy otras aplicaciones para transferir ficheros de una mquina a otra.

Dicer, para trocear las imgenes.

Winzip, pkzippara comprimir los ficheros.

Real player.

Adobe acrobat (reader).

Ms-office, Corel-wordperfect, Lotus smartsuite, Star-office, paquetes ofimticos

Galeras de imgenes

Son colecciones de imagines prediseadas libres de copyright y que podemos utilizar en nuestros proyectos.Existen muchas:

Gallery.

Corel gallery1.300.000, 380.000.

Art explosion600.000, 250.000,

Colecciones clip arts.

Adobe design collection,

Adobe font folio 8.0(2.300 fuentes).

Enciclopedias,

Internet.


41/197

41

Fases diseo pelcula

Como ejemplo se exponen las fases del diseo de una pelcula de animacin:

1. Papel: dibujos desde todos los ngulos.

2. Arcilla: para conseguir referencias espaciales.

3. Modelado 3d: Maya. Realista pero con la menor geometra posible. Especial hincapi en manos y cara(rasgos personales).

4. Set-up: preparacin de movilidad de esqueletos, gravedad, interfaces, .

5. Animacin: Adobe Premiere. Desglose del movimiento.

6. Texturas: vestir el modelo 3d.

7. Acabadoy montaje.


Entre los navegadores que han tenido ms relevancia estn: Internet Explorer, Netscape Navigator,Mozilla, Opera y Linx.

Como servidores web: Ms internet information server y Apache.

Tambin existen otras herramientas multimedia orientadas a la edicin de vdeo, de texto, debanners,maquetadores, traductores, creadores de animacin, de publicaciones, OCR y gestin web.

Otra aplicacin importantes son los catalogadores de imgenes.

Existen galera de imgenes prediseadas en internet que estn libre de copyright.


42/197

42

HERRAMIENTAS HARDWARE

Espectro electromagntico

Slo una pequea parte del espectro electromagntico corresponde a luz visible por el ojo humano. Parahacernos una idea:

Rayos gamma: 10241020 (frecuencia: c/s)

Rayos x: 10201017

Ultravioleta: 10171015

Visible: 1015 (violeta, ..., rojo)

Infrarrojo: 10151011

Microondas: 1012108

Ondas de radio: 108 - 102

Espectro visible

Violeta: 400 nm longitud de onda

Azul: 460 nm

Verde: 520 nm

Amarillo: 580 nm

Naranja: 640 nm

Rojo: 700 nm

Cualquier instrumento que utilicemos para capturar imgenes, o visualizarlas, se ajustar mas o menos alespectro visible por el ojo, pero NO exactamente. Habrn diferencias, a veces significativas. Las cmarasdigitales, los monitores, etc, no pueden ver tanto como el ojo.

Capturar imgenes

Utilizaremos diversos instrumentos y aparatos capaces de capturar una imagen ya existente en la naturaleza(cmaras), en otro soporte (escneres), o en vdeo (tarjetas digitalizadoras).

Tambin podemos conseguir imgenes ya hechas desde diversas fuentes como Internet o cds / dvds (galerasde imgenes).

Debemos tener siempre presente los derechos de Copyright, y respetarlos escrupulosamente. Nunca sabemos sila prxima vez, proteger, nuestros propios trabajos.

Cmaras digitales

Poseen tres elementos:

1. Un sensor de imagen (fotosensores de tecnologa ccd o cmos) que transforma luz en electricidad. Cuantosms photosites ms resolucin espacial.


43/197

43

2. Un convertidor analgico/digital.

3. Un filtro rgb o cmyk que aade color.

Caractersticas a tener en cuenta a la hora de adquirirla:

Resolucin. Mnimo 2 Megapixeles para nuestros objetivos (3.2 Mp para usos ldicos y ms para usos

profesionales). Actualmente no contaremos con esos problemas ya que las cmaras cuentan conalrededor de 10 Mp, simplemente hay que ajustarla segn la necesidad.

Cada imagen ocupar bastante (ej. 1.024x768 = 786.432). Al interpolar por software se aumenta.

Sensibilidad (expresada en iso).

Calidad del objetivo (Zeiss, Nikon).

Intensidad de color: bits por pixel (24).

Forma de conexin (usb o firewire) y software.

Tipo de tarjeta almacenamiento y tamao.

Posibilidades de disparos en rfaga, de almacenar audio y vdeo, de gestionar la edicin de imgenes,de utilizar ajustes manuales, zoom ptico, ...

Las mejores a nivel profesional son las Nikon y Canon, aunque existe una gran variedad en el mercadocon muy buenas prestaciones.

Algunos clculos:

Una imagen de 1.024 x 768 x 24 = 2,5 mb.


44/197

44

Una imagen de 800 x 600 x 24 = 1,37 mb.

Una imagen de 640 x 480 x 24 = 0,88 mb.

Para almacenarlas se comprimen (jpg), pero siempre podemos decirle a la cmara (si sta es de calidad) que lasguarde en formato RAW, sin comprimir.

Las memorias ,actualmente, suelen ser de 1-8 GB, con lo cual es un tamao ms que suficiente para usodomstico aunque para uso profesional se recomienda comprar las de mayor tamao o llevar varias tarjetas dememoria. Tampoco es mala idea comprar una segunda batera y un cargador rpido.

Para usos profesionales, grandes viajes, etc, conviene disponer de un disco duro porttil donde ir descargandolas imgenes (autnomo). Con uno de 40-60 GB estaramos muy bien, actualmente la capacidad de los discosduros es muy superior a nuestras necesidades, con lo cual el propio disco duro lo podemos utilizar para estafuncin ms de una vez.

Cmaras digitales y fotografa: .


45/197

45


Los instrumentos que utilicemos para la captura de nuestras imgenes se ajustarn al espectro de luzvisible por el ojo humano.

Hay diferentes maneras de capturar imgenes desde cmaras, escneres o tarjetas digitalizadorashasta conseguirlas de internet.

A la hora de adquirir una cmara se ha de tener en cuenta la resolucin, la sensibilidad, la calidad delobjetivo, la forma de conexin, el tipo de tarjeta de alamcenamiento, la posibilidad de disparos enrfagas, de almacenar audio y vdeo, de gestionar la edicin de imgenes, de utilizar ajustes manualesy de usar zoom ptico.

Escneres

La Intefaz TWAIN propia de cada modelo, nos va a condicionar enormemente la utilizacin del aparato, puestoque aunque tenga prestaciones superiores slo podremos utilizar las que estn disponibles en TWAIN.

Debemos fijarnos en aspectos como:

Color.

Resolucin + interpolacin (2.400 ppp y 48 bits es ofertado por la mayora, y es ms de lo quenecesitaremos).

Forma de conexin (usb).

Software que le acompaa.

Existen de Sobremesa y mquinas industriales, capaces de escanear documentos a gran velocidad (cientos porminuto).

Fases escaneado

Suele haber un pre-escaneado.

Ajustamos las posibilidades de TWAIN (resolucin) y encuadramos.

Escaneamos.

Guardamos comotiff (es el formato habitual), bmp, jpg, gif.


46/197

46

Podemos necesitar otro programa para convertir a otro formato.

Creacin de imgenes

Consiste en el uso de aparatos que nos simplifican la tarea de crear imgenes

Tabletas digitalizadoras.

Ratones de alta precisin.

Pens especiales.

Visualizacin de imgenes

Monitores.

Impresoras.

Plotters: diseo tcnico y publicidad.

Tarjetas de vdeo.


47/197

47

Monitores

CRT: tubo de rayos catdicos (obsoletos)

LCD, TFT y Led.

Impresoras

Lser

Chorro de tinta

Apis aceleradores 3d

Direct 3d directx


A la hora de elegir un escaner debemos fijarnos en las posibilidades que tenga de color, resolucin einterpolacin, la forma de conexin y el software que le acompaa.

Para la creacin de imgenes hay que tener en cuenta intrumentos como el monitor, la impresora, losplotters y las tarjetas de vdeo.


48/197

48

EJERCICIOS

Actividades

1. Utilizar un catalogador de imgenes freeware / shareware tipo Xnview, ACDsee o similar para pasar

una imagen de un formato a otro.

Photoshop no puede abrir todos los formatos de almacenamiento grfico, en ocasiones deberemos transformarpreviamente un formato ilegible como puede ser el DIB, muy utilizado en galeras de cuadros, a otro manejable.

2. Si se dispone de una cmara digital, capturar imgenes que puedan servir de textura (suelos, cortezasde rbol, cielos, empedrados, ...), as como otras imgenes utilizables para otros ejercicios de este curso.Veremos que la mayora de cmaras guardarn las imgenes en formato JPG.

3. Si se dispone de un scanner, utilizarlo para capturar algunas imgenes de folletos publicitarios, libroso revistas.


49/197

49


1. Los catalogadores de imgenes ya no tienen uso porque el propio sistema operativo les hareemplazado.

Verdadero

Falso

2. Las webcams utilizan alrededor de 3 Megapxeles de resolucin.

Verdadero

Falso

3. Un scanner consigue buenas resoluciones con 24 puntos por pulgada.

Verdadero

Falso

4. La mejor manera de utilizar a fondo un scanner es disponer de una buena interface TWAIN.

Verdadero

Falso

5. Las galeras comerciales de imgenes no son utilizables porque las imgenes poseen copyright.

Verdadero

Falso

6. Una buena calidad de partida, es utilizar una resolucin de 3.2 Megapxeles.

Verdadero

Falso

7. Fireworks es un magnfico editor HTML.

Verdadero

Falso


50/197

50

CONCLUSIN

Hemos visto que existen multitud de herramientas de apoyo para nuestro trabajo, no consiste en conocerlastodas y a fondo, sino en saber que estn ah por si las llegamos a necesitar.

Las herramientas evolucionan y mejoran con el tiempo. No podemos estar a la ltima en todo.

Lo habitual es que cada uno se acostumbre a un par de ellas, o ms, porque las tiene disponibles o porque lasconoce un poco mejor.

Todo el esfuerzo invertido en conocerlas mejor, redundar en una mejor calidad de nuestros resultados.


51/197

51

EDITORES GRFICOS

INTRODUCCIN

En esta leccin haremos un breve repaso por los editores grficos ms importantes. Algunos de los que veremosen nuestro recorrido son freeware y shareware. Pero dedicaremos una gran espacio a Adobe Phtoshop,programa muy potente de tratamiento de imagen que ofrece una amplia gama de posiblidades de trabajo.Aunque evidentemente no podremos ver en toda su extensin las utilidades de este programa, nos servir comotoma de contacto y abriremos la posibilidad al alumno de seguir explorndolo.

Hay que considerar que utilizaremos slo algunas de sus funcionalidades, y no sern las nicas aplicaciones quenos pueden ayudar.

OBJETIVOS

Conocer los editores grficos que utilizamos en el curso y ver que no existen grandes diferencias conotros.

Repasar las reas principales de la pantalla y los elementos ms utilizados.

Ver las funciones ms habituales que se realizan con ellos

QU SON?

Son herramientas software capaces de manejar grficos de diversos formatos y efectuar con ellos operacionesde apertura, edicin y modificacin, cambio de formato, guardado, ...

Habitualmente, cada programa posee su propio mtodo (algoritmo matemtico) de almacenamiento, su formatoespecfico. Lo habitual es que sean capaces de abrir ficheros grficos de formatos muy variados.

Los hay vectoriales, como el Corel Draw, por ejemplo, y de mapa de pxeles, como el Photoshop. Aunque lasltimas versiones son capaces de combinar y mezclar ambos.

Para el curso utilizaremos Photoshop, cualquier versin a partir de la 5.5, en la que ya se incorpora ImageReady. Cuanto ms avanzada sea la versin mejor. Podemos usar una versin trial, limitada en el tiempo, o unade aprendizaje.


Los editores grficos sirven para manejar grficos de varios formatos y modificarlos.

Cada programa usa su propio mtodo de almacenamiento.

Hay formatos de grficos vectoriales y de mapa de pxeles.

ADOBE PHOTOSHOP (PS)


52/197

52

Es el editor grfico profesional por excelencia, el ms utilizado y el lider indiscutible del mercado. Nace paratransformar formatos grficos. En el entorno MAC (MacIntoshApple), y colabor en la difusin y popularizacinde este entorno para el diseo grfico.

Los equipos MAC, pioneros en las interfaces de usuario grficas y en el uso del ratn, disponan deprocesadores dedicados para sonido y vdeo, descargando la principal de esas tareas y obteniendo as un mayor

rendimiento y superioridad sobre el entorno X86. Hoy en da las diferencias han desaparecido e, incluso, essuperior en X86, con los procesadores de doble ncleo y las tarjetas grficas cargadas de megas de RAMpropia.

A pesar de ello, sigue teniendo una gran presencia en el mundo del diseo grfico, mas basado en la inercia y endotarlo de algo especial, ms cercano a los gurs y expertos, que a cualquier otro motivo concreto.

Photoshop se incorpor posteriormente en arquitecturas X86 y ah obtuvo una inmensa difusin. El uso decapas, la herramienta historia y sus capacidades le convirtieron en lider indiscutible del mercado profesional. Ytambin que fuera imitado por muchos otros.

La competencia le hizo ir aadiendo nuevas opciones, los filtros, los trazados, las acciones, ... y la inclusin decapas vectoriales entre otras de mapa de pxeles.

En realidad no deja de ser una agrupacin de cientos de programas, la mayora basados en algoritmosmatemticos ms o menos optimizados, que hacen determinadas cosas, por ejemplo, ampliar una imagen oreducirla, quitar un trozo, copiar, aislar, modificar, etc. Muchos de estos programas son casi aplicacionesinformticas complejas por la cantidad de opciones y parmetros que manejan. Todo ello hace que elaprendizaje de Photoshop tenga, al menos, 3 niveles. Un nivel inicial, en el que se consigue una visin generaldel producto (el que daremos en el curso, adaptado hacia el diseo grfico web, dejando en el tintero cientos deopciones no tan necesarias para el mismo). Un nivel intermedio y uno avanzado. A partir de ah, los expertosprofundizan en determinados aspectos, como el balance de blancos o el manejo de las curvas, que requierenseminarios especficos.

Como Photoshop es un editor de carcter general, puede aplicarse a salidas impresas, desde diseos pararevistas y magazines, hasta posters y grandes paneles publicitarios, siendo la mas utilizada en Artes Grficas.Tambin est entrando con fuerza en el mercado del retoque de fotografas digitales, y ya no hay fotgrafoprofesional, y casi ningn aficionado, que no lo maneje. Otro posible uso es el de salidas por monitor, lasnuestras, que se vern habitualmente mediante un ordenador. Ello significa que muchas opciones para un

entorno tendrn poca o nula utilizacin en otros. Aunque no debemos negar que cuanto mejor se conozca,mejores resultados se obtendrn.

Photoshop permite tambin generar imgenes desde cero, veremos algn ejemplo de ello.

La enorme popularizacin de Internet en los ltimos aos, y la necesidad de incorporar elementos grficos a laspginas web, hizo que apareciera una herramienta complementaria primero, e integrada despus: Image Ready.Muy til por las caractersticas actuales de internet y el gran problema de las imgenes web, su tiempo dedescarga. Aunque actualmente est cayendo en desuso, siendo sustituida por la aplicacin Adobe Fireworks.

Las caractersticas ms importantes de PS, y las que le dieron una merecida fama son:

Posibilidad de hacer Selecciones, aislando zonas de una imagen para aplicarles modificaciones demanera independiente.

Uso de Capas, las imgenes pasaron a ser pilas de rectngulos transparentes, de manera que semiraban desde arriba de la pila y dejaban ver zonas de abajo. Simplificaron mucho los diseos, con laposibilidad de aplicar efectos slo a una capa, sin incidir sobre las dems y la posibilidad de tratarlas porsepar

diseno_grafico_web[1]

Documents