Your SlideShare is downloading. ×
0
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Optimizar imágenes para web con Fireworks

7,334

Published on

Utilizando el programa Fireworks, vamos a optimizar imágenes para bajar peso y calidad.

Utilizando el programa Fireworks, vamos a optimizar imágenes para bajar peso y calidad.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
7,334
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Imágenes<br />
  • 2. Introducción<br /><ul><li>Para trabajar con imágenes para Web debemos considerar el peso y la definición. Es importante tomar en cuenta que las medidas a utilizar son píxeles, ya que es la unidad de los monitores. No podemos traspasar de centímetros a píxeles ya que dependerá de la resolución del monitor y esto varía dependiendo de la configuración de cada usuario.
  • 3. Habitualmente se utilizan un ancho de 960 píxeles para el diseño de una página Web pero no es una regla.
  • 4. Las imágenes deben usarse del tamaño que necesitamos en la página Web. No se recomienda usar imágenes grandes para luego ajustar el tamaño ya que estas quedan pesadas.
  • 5. Siempre se recomienda procesar primero las imágenes antes de subirlas a nuestro sitio. Podemos utilizar un editor de imágenes como Photoshop, Fireworks o el que sea de su conveniencia.</li></li></ul><li>Formatos de imagen: Gif<br />Gif:- Este formato trabaja con una máximo de 256 colores. Es recomendable usar gif cuando tenemos una imagen con colores sólidos como textos y logotipos o ilustraciones sin degradados.<br />
  • 6. Abrimos esta imagen con Fireworks<br />Luego vamos a Archivo / Presentación preliminar de la exportación<br />Se abre la siguiente ventana:<br />
  • 7. En formato seleccionamos gif como formato y vemos el peso que va a tener el documento con una resolución de 128 colores.<br />Si nuestra imagen tiene solamente 3 colores, 128 es mucho, así que selecciono 8 colores y así mi imagen será mas liviana y mantendrá una buena calidad.<br />Como regla, si una imagen tiene 2 colores seleccionar 4 en la exportación. Si tiene 5 colocar 16. Siempre la opción superior que sea el doble o más del doble. Esto permite tener una imagen liviana y clara en los archivos gif.<br />
  • 8. En la opción Archivo podemos cambiar el tamaño de nuestra imagen según nuestra necesidad<br />Para mantener la proporción tanto en ancho como en alto debe estar seleccionado el cuadro de Restringir.<br />Una vez que estemos de acuerdo con el peso del documento, el tamaño y su resolución, podemos proceder a exportar. Dentro de nuestro sitio creamos una carpeta de nombre imágenes (no utilizar tildes) y guardamos el documento con un nombre corto, claro y sin tildes ni espacios. En nuestro ejemplo podemos llamarlo logo.gif<br />
  • 9. En Dreamweaver<br />En Dreamweaver, en la ventana Files, donde tenemos configurado nuestro sitio se verá así:<br />
  • 10. Formatos de imagen: Jpg<br /><ul><li>Las imágenes jpg son muy útiles para trabajar con fotografías o imágenes con degradados. Trabaja muy bien con sombras y cambios de tonalidad. </li></li></ul><li>Esta imagen debemos seleccionar jpg y la calidad podemos disminuirla hasta 60 y no notaremos que se písela, manteniendo un buen peso y calidad.<br />En la pestaña archivo se ha seleccionado un tamaño de 250 pixeles de ancho.<br />Posteriormente exportamos y guardamos en la carpeta imagenes de nuestro sitio.<br />
  • 11. Insertar una imagen<br />Para insertar una imagen, abrimos nuestro documento index.html y arrastramos la imagen desde la ventana Files sobre el área de diseño de nuestro documento.<br />
  • 12. Aparecerá la siguiente ventana:<br />Donde dice Alternate text debemos poner un texto que describa la foto, por ejemplo; Cielo. Este texto es importante al momento de validar nuestro html en la página w3.org.<br />
  • 13. Etiqueta img<br />Una vez insertada la imagen podemos ver que el código es el siguiente:<br /><imgsrc="imagenes/cielo.jpg" alt="Cielo" width="250" height="188" /><br /> <br />La etiqueta <img /> es una etiqueta vacía ya que solamente tiene una parte. Abre y sierra al mismo tiempo. Fíjense como mantiene el cerrado luego de sus parámetros.<br /> <br />Los parámetros de una imagen principalmente son cuatro:<br />src=”” es la instrucción que llama a la imagen. Si tenemos configurado el sitio llamará desde el directorio raiz donde se encuentra el archivo HTML. Entre comillas se escribe la ruta. En nuestro ejemplo entra en la carpeta imágenes y encuentra nuestro documento: imágenes/cielo.jpg<br /> <br />alt=”” es el texto alternativo. Si por alguna razón la ruta del llamado a la imagen se encuentra roto y no se muetra la imagen correctamente, aparecerá el texto que describe a la imagen.<br /> <br />width="" y height="" determina el ancho y la altura en pixeles.<br />
  • 14. Conclusión<br />Dreamweaver, así como otros editores HTML coloca colores a las etiquetas y sus parámetros para una mejor lectura. <br />En nuestro ejemplo las etiquetas y los parámetros son violetas, las comillas y su contenido es azul<br /> <br />El formato PNG es ahora muy común en el diseño de sitios Web, pero al ser de un peso superior y sus usos son diversos, veremos este tema cuando trabajemos con CSS.<br />

×