Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 7 de 7

Tema: Optimizar imagenes con Fireworks [Tutorial]

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    02 jun, 07
    Mensajes
    251
    Poder de Reputación
    12

    Optimizar imagenes con Fireworks [Tutorial]

    Optimizar Imagenes con Fireworks

    Hola a todos.. aca tratare de explicar como optimizar imagenes, espero que les sirva..

    Nos referimos a Optimizar a la accion de hacer que las imagenes que tengamos sean mejorada y ayuden a nuetro fin, que puede ser:

    * Si hemos hecho una web o estamos intentando hacerla, uno de los pasos importantes a seguir es optimizar nuestra imagenes, para asi no espantar a nuestros posibles visitantes ya que nadie le gusta esperar mucho tiempo para poder ver una sola imagen verdad?

    * Tambien nos puede ser util si queremos subir una imagen a internet, recuerden que una imagen optmizada demora menos en abrir o en subir.

    * O tambien si queremos poner una imagen de firma en el correo o en un foro, pues la optimizamos antes y nuestra imagen se ve mejor ;).

    La optimizacion de imagenes nos perdmire agrandar y achicar imagenes son que estas pierdan su calidad y/o nitidez.

    Hay muchos programas con los que podemos optimizar imagenes pero en este caso usaremos Fireworks 8.0 por las siguientes razones:

    1- Quizas estes haciendo tu pagina web y quiza tambien uses el Dreamweaver y es posible que tengas el Fireworks ya que ambos son productos de Macromedia.

    2- Por su simplicidad para hacer lo requerido. optimizar imagenes.

    3- Pues porque es el que tengo ahora y pues por alguno tenia que empezar verdad? je je

    Bueno vamos ahi...

    Abrimos el Fireworks, nos saldra su presentacion caracteristica y todo eso, en seguida le damos a Archivo + Abrir.. buscamos y seleccionamos la imagen a optimizar.




    Ahora, ya tenemos nuestra imagene en el panel de FireWorks, nesesitamos ver las caracteristicas de nuestra imagen actual, para asi saber lo que hay que mejorar para estar satisfechos. Arriba de nuestra imagen hay unas pegueñas pestañas que son: Original | Vista previa | 2 copias | 4 copias. Le damos click avista previa y vemos como queda.








    1- Aca podemos ver el peso de la imagen que en mi caso es de 65.54 k lo que es demasiado pesada y logicamente cambiaremos y 10seg. a 56kbps quiere decir que nuestra imagen se visualizara en 10segundos con un modem de 56kb/s. tambien nos dice que la imagen es de extencion JPG.







    2- En esta imagen vemos el menu de la pestaña optimizar, vemos que hay un primer recuadro que esta e blanco, si gustas dejalo ahi o prueba lo que tiene, ese recuadro te viene valores predeterminados para tu imagen.

    Luego abajo hay otro recuadro, en mi caso esta en JPEG, que es la extencion que menos pesa, y mas conveniente para imagenes de una web. Quiza tu imagen esta en GIF o en PNG, pero te recomiendo que si vas a utilizar esa imagen para ua web la cambies a JPEG. Mate esta en Blanco lo dejamos ahi por ahora y enseguida viene Calidad que en mi imagen esta 82, diremos que la calidad se refiere a cuan mejor se ve nuetra imagen, el intervalo es de 0 a 100, mi consejo es que le des un valor medio, es decir entre 45 a 55, esto reducira considerablemente el peso de tu imagen, que es lo q buscamos, recuerda a mayor calidad, mayor peso.

    El suavisado viene a ser la nitides de la imagen, el 0 te da a decir que la imagene se ve lo mas nitida posible, y mientras mas subas el suavisado tu imagen se pondra mas y mas borrosa cada vez, a mayor suavisado, menos peso.





    Ahora si miras nuevamente en vista previa el peso de tu imagen como hemos visto arriba, veras que el peso se ah reducido de una manera considerable, al menos la mia ah bajado desde 65.54k a 23.38, un poco menos de la tercera parte del peso original.

    Ahora vamos a ver el tamaño de nuestra imagen, para eso volvemos a la pestaña de Original, ya saben al costado de vista previa y luego le damos click a la imagen.

    Vemos ahora que en la parte inferior, abajo de nuestra imagen, esta una pestaña llamada propiedades donde podemos ver:







    Como ven ahi nos dice el tamaño actual de nuestra imagen que en mi caso es de 640 de ancho x 480 de alto.

    Esto podemos cambiar a la nesesidad que queramos y les dire como.

    En las pestañas de arriba le damos a MODIFICAR + LIENZO + TAMAÑO DE LA IMAGEN, tal como vemos abajo:






    Ahora nos saldra una ventana en la que vemos nuevamente el tamaño de nuestra imagen de anchao y de alto, lo unico que hay que hacer para retocar el tamaño es cambiar el numero de el ancho ya que el alto se transforma inmediatamanete a la medida adecuado para no perder su calidad.







    Bueno al hacer esto ya estara lista tu imagen para ser usada para lo que quieras ;)

    OJO para usar nuestra imagen, debemos exportarla no guardarla ya que si no es asi, no se veran los cambios. Te digo como

    Ve a ARCHIVO + PRESENTACION PRELIMINAR DE LA IMAGEN, te tiene que salir esto







    Como vemos en la ultima imagen, nos dice todos los datos finales de nuestra imagen, lo unico a hacer es darle click a Exportar y wualaaa.. tenemos una imagen optimizada.


    Bueno este es el primer tutorial que hise, tambien lo tengo en mi pagina pero kise ponerlo aca, ojala que no este tan mal.. bueno es el primero disculpen los errores jeje

  2. #2
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,701
    Poder de Reputación
    64
    está muy bueno el tutorial, solo que no se ven las imagenes

    y tengo una preguntita

    el firewoks es un programa verdad?, porque tendré que conseguirlo, porque no lo he visto en los porgramas de office

    saludos
    ______________________________________

    reparacion de rines


    _____________________________________

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    02 jun, 07
    Mensajes
    251
    Poder de Reputación
    12
    No es un programa de Office.. es u programa de la linea de Macromedia al igual que el Dreamweaver..

    Y no se ven las imagenes??.. io lo veo normal

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    02 jun, 07
    Mensajes
    251
    Poder de Reputación
    12
    Es cierto no se ven :S .. yo las eh pegado como [img] link...[/img].. esa no es la forma??

  5. #5
    Administrador CCTW Webmaster de CCTWHabitante
    Fecha de Ingreso
    11 ago, 05
    Ubicación
    Cartagena, España
    Mensajes
    3,721
    Poder de Reputación
    10
    Yo si que las veo y están muy bien. Muchas gracias por compartir el tutorial con nosotros! Está muy bien!

  6. #6
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,701
    Poder de Reputación
    64
    Siii, ya se pueden ver las imagenes


    gracias
    ______________________________________

    reparacion de rines


    _____________________________________

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    02 jun, 07
    Mensajes
    251
    Poder de Reputación
    12
    Si.. que raro.. yo habia puesto el url de la imagen de mi pagina y asi no salia.. luego lo subi en la pagina que Jorgens dio en el apartado de como subir imagenes y asi salio.. bueno el es el genio jeje.. me alegro que les guste

Temas Similares

  1. Optimizar un sitio web para posicionar en Google
    Por aymaraa8166 en el foro Posicionamiento de páginas web
    Respuestas: 7
    Último Mensaje: 24/07/2010, 20:30
  2. Optimizar web para IE y Firefox
    Por neburss en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 1
    Último Mensaje: 02/01/2008, 23:09

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •