Archivo etiquetas: fireworks

Tutorial: Crea un recortable con cualquier imagen

9 jun 2009

Ayer estuve investigando la forma de crear un recortable (ponerle unos bordes recortables a una imagen) con algún editor de imágenes como Photoshop, Illustrator o Fireworks. Lo único que encontré fue un tutorial para Illustrator que no conseguí hacer funcionar. Tocaba investigar. Después de un ratillo jugando a “prueba y error” obtuve un resultado bastante satisfactorio. Aquí tienen un pequeño tutorial de cómo crear un recortable con Fireworks.

  1. Abre la imagen que quieras convertir en un recortable con Fireworks, en mi caso la mascota de PisitoenMadrid.
  2. Utiliza la “varita mágica” para seleccionar todo el fondo y a continuación pincha en Seleccionar-> Seleccionar inverso. Tendrás seleccionado sólo lo que quieres hacer recortable.
  3. Vete a Seleccionar-> Expandir Recuadro. Esto hará que la selección se amplíe un número de píxeles, dibujando un contorno fuera de la imagen. Introduce, por ejemplo, 14px.
  4. Pincha en Seleccionar->Convertir recuadro en trazado. Esto convertirá el contorno en un trazado muy fino y continuo.
  5. Cambia la herramienta “varita mágica” por la herramienta de “seleccion” (flechita negra). Selecciona el trazado y en el menú inferior cambia el fondo a trasparente, el color de línea a gris oscuro, el grosor de la misma a 3 y el trazado a Línea discontinua-> Guión básico.
  6. Finalmente dirígete a Word o Pages (u Open Office) para insertar un símbolo. Selecciona la fuente Wingdings, e inserta el cuarto o quinto símbolo que es una tijera cortada. Cambia el tamaño de la fuente por una bastante grande (dependiendo del tamaño de la imagen), y copia y pega el símbolo en Fireworks. Sólo tendrás que ubicarla donde quieras y listo, ¡tendrás un recortable!

Aunque el tutorial es específico para Fireworks, en Photoshop y editores similares se puede hacer de la misma forma ya que todos tienen la herramienta “varita mágica”. ¡Espero que les sea útil!

Tip: transparencia en PNG para Internet Explorer

27 oct 2008

Una de las grandes pesadillas de todo diseñador que se precie es el Internet Explorer. Normalmente se maqueta para un navegador como Firefox o Safari y luego se “adapta” para que se vea bien en Internet Explorer. El proceso contrario es mucho más desastroso.

Algo que trae de cabeza son las transparencias, ya que el Internet Explorer no las detecta como tales, añadiéndoles un antiestético cuadrado gris alrededor de la misma. Todos sabemos que con los gif se pueden conseguir transparencias pero se sacrifica calidad. ¿Se podría conseguir lo mismo con los png? Pues sí. Para ello hay que guardar la imagen como PNG 8, paleta adaptable, 256 como número máximo de colores (así preservamos calidad) y finalmente con transparencia alfa.

De esta forma todo lo que hayamos puesto como transparente aparecerá transparente en todos los navegadores incluidos los Internet Explorer (incluso en el Internet Explorer 6 xD). El proceso en Fireworks sería así:

  • Accedemos a Archivo
  • Luego a Asistente de exportación
  • Escogemos Seleccionar formato de exportación
  • Seleccionamos La Web
  • Pinchamos en Salir
  • Y finalmente configuramos las opciones anteriormente dichas.

En otros programas de diseño y retoque seguro que tendrán un proceso similar. De esta forma tan sencilla obtendremos transparencias en nuestras imágenes png, reconocibles para todos los navegadores.


    Hazte Fan

  • facebook
  • twitter