Krypton Solid

Uso del panel de textura en Adobe Fireworks – Smashing Magazine

Uso del panel de textura en Adobe Fireworks – Smashing Magazine

Cuando trabaje en Fireworks, ya sea para el diseño de un sitio web, un diseño móvil o un recurso gráfico para un proyecto, una necesidad que sin duda tendrá es la compatibilidad con texturas. Si bien Fireworks es una herramienta increíble en otras áreas, la facilidad de uso de la función de texturas definitivamente podría mejorarse. En este artículo, veremos una extensión que hace precisamente eso: el Panel de textura.

Actualmente, en Fireworks, puede aplicar texturas (que se extraen de la carpeta «Texturas») a cualquier forma de vector en la que esté trabajando. Desafortunadamente, la forma en que Fireworks enumera las texturas no es tan intuitiva (o rápida) como podría ser. Tal como está, se le presenta una lista de texto de todas sus texturas.

Cuando pasa el mouse sobre un nombre, aparece una ventana de vista previa de esa textura, pero no hay una manera fácil de acceder o identificar rápidamente las texturas más utilizadas, y si a menudo usa muchas texturas (como yo), su flujo de trabajo puede ser un poco estrecho.


Aplicar una textura en Fireworks (usando el panel Propiedades).

Siendo yo mismo un usuario de Fireworks, después de notar este problema, me puse manos a la obra para encontrar una mejora. Ok bueno no derecho para trabajar: nunca antes había creado una extensión de Fireworks, y este tipo de cosas siempre tiene una curva de aprendizaje, ¿verdad?

Un panel de textura dedicado al rescate

Primero, investigué un poco para ver si se había hecho antes una extensión de ese tipo. Encontré algunos, pero muchos de ellos estaban sin mantenimiento o no estaban a la altura de mi estándar de calidad. Entonces, dije “¿Por qué no? ¡Será divertido!» (que creo que todo desarrollador debería decir de vez en cuando), y comencé a desarrollar mi propia extensión. Quería crear algo que hiciera lo siguiente:

  • Clasifica texturas en listas,
  • Opcionalmente, muestre las texturas como miniaturas,
  • Proporcionar una interfaz intuitiva para manipular texturas.
  • Le permite agregar sus propias texturas y actualizar la lista actual,
  • Prepararte café (está bien, tal vez no, pero sería una buena característica).

Construí mi primer prototipo con la ayuda de John Dunning Biblioteca JSML, lo que hace que sea muy fácil para cualquiera que desee desarrollar un panel. Básicamente, le permite escribir el panel en JavaScript. Al final, sin embargo, tuve que usar nativos Flexionar y ActionScript 3 – ninguno de los cuales sabía – para convertir el panel en lo que quería. Tuve que descubrir muchas cosas por mí mismo, pero tenía razón en una cosa: ¡la experiencia fue divertida! Principalmente.

Mi trabajo resultó en lo que llamo el panel Textura. (Un nombre bastante creativo, ¿no crees?)

Captura de pantalla del panel de textura
El panel Textura

Después de unas breves instrucciones, destacaremos las características y opciones del panel.

Descarga e instalación

Primero, descargue el panel Textura.

Después de descargar el archivo MXP de instalación, haga doble clic en él y Adobe Extension Manager debería tomar el control desde allí. Probé esta extensión solo con Fireworks CS5 y CS6, pero no debería haber problemas con otras versiones.

Nota: Mientras discutimos las versiones de la aplicación y la compatibilidad, vale la pena señalar que en Fireworks CS6, puede colocar texturas ubicadas en la carpeta «Texturas» en subcarpetas, y Fireworks las cargará automáticamente en su lista de texturas. Esto difiere del comportamiento de Fireworks CS5.1 y versiones anteriores, donde los archivos de textura en subcarpetas no se leen y, cuando se colocan allí, permanecen sin listar (es decir, «invisibles» para Fireworks). Ahora, en Fireworks CS6 +, el panel se adapta a esto y mostrará una lista de texturas de subcarpetas.

Usando el panel

Después de instalar la extensión, puede abrir el panel a través del menú Window → Texture Panel. Si usa el diseño del espacio de trabajo predeterminado en Fireworks, le recomiendo que arrastre el panel a la barra lateral de los paneles a la derecha.

Barra lateral con paneles en Fireworks
El icono del panel Textura en la barra lateral de los paneles

La interfaz del panel Textura se divide en tres áreas principales: área de visualización, barra de herramientas inferior, barra de herramientas superior. Veamos cada uno en detalle.

Área de visualización

Área de visualización
Panel de textura: área de visualización

La parte más inmediata e importante del panel es el área de visualización. De forma predeterminada, muestra sus texturas como miniaturas. Al hacer clic en una miniatura, se aplica esa textura a cualquier objeto (u objetos) que esté seleccionado actualmente.

Aplicar una textura con el panel Textura
Aplicar una textura en el panel

Nota: asegúrese de que la opacidad de su textura sea mayor que cero, o no notará la textura agregada. En segundo lugar, asegúrese de que el objeto al que está aplicando una textura tenga un trazo o relleno; de lo contrario, recibirá un mensaje de error. A continuación, por ejemplo, intentamos aplicar una textura de relleno a un objeto que no tiene relleno.

Mensaje de error
Recibirá un mensaje de error si un objeto no tiene relleno. Aparece un mensaje similar si intenta aplicar una textura de trazo a un objeto que no tiene trazo.

El área de visualización tiene dos vistas, lista y en mosaico, que puede alternar con un botón en la barra de herramientas inferior.

Cambio de vistas
Cambiar entre la vista de lista y mosaico es muy fácil: simplemente haga clic en el botón dedicado en la parte inferior del panel.

El tamaño de las miniaturas se puede cambiar en el área de configuración del panel: Settings → View → Texture Size: [enter size in pixels] → Save.

Barra de herramientas inferior

Barra de herramientas inferior
Panel de textura: barra de herramientas inferior

La ajustes le lleva a la configuración (que veremos más adelante). Con el control de opacidad, puede ingresar un nivel específico (0 a 100) o usar el control deslizante emergente. La diverso El botón abre un menú con algunas opciones simples para agregar y recargar texturas. (Cubrimos el botón para la vista de lista y mosaico, a la izquierda del botón de varios, en la sección anterior).

Barra de herramientas superior

Barra de herramientas superior
Panel de textura: barra de herramientas superior

La liza muestra un menú que le permite cambiar entre las listas que haya creado. La buscar El campo le permite buscar todas sus texturas por palabra clave. La «Relleno» y «Trazo» alternar le permite elegir si la textura en la que hace clic se aplica al relleno del objeto o al trazo.

Jugando con la configuración

Cuando haces clic en el botón de configuración, se te lleva a un cuadro de diálogo que ofrece un par de opciones.

Configuración en el panel Textura
Configuración en el panel Textura

En la pestaña «Ver», la única opción, «Tamaño de textura», es bastante sencilla. Cambiarlo a 30, por ejemplo, haría que las miniaturas de la vista de lista fueran de 30 × 30 píxeles y los mosaicos de la vista de mosaicos tuvieran una altura de 30 píxeles.

Introduzca aquí cualquier valor que se adapte a sus necesidades.

Configuración de tamaño de textura
Aquí estamos cambiando el tamaño de las miniaturas a 30 × 30 píxeles. ¿Qué son estas miniaturas de hormigas?

La pestaña «Otro» solo tiene una opción, «Seleccionar textura automáticamente». Si está habilitado, siempre que seleccione un objeto vectorial en Fireworks, el panel se actualizará a la textura que tenga el objeto.

Opción de selección automática
La opción de selección automática

Una vez que esté listo, hacer clic en el botón «Guardar configuración» hará lo obvio. Luego, volverá automáticamente a la vista principal del panel.

Organizar texturas: usar listas

Al hacer clic en el botón «Editar listas», aparecerá una ventana de diálogo, donde puede crear y eliminar listas y realizar algunas otras tareas.

Diálogo de lista
El cuadro de diálogo de la lista (gran vista)

El cuadro de diálogo de lista tiene tres áreas principales: área de visualización, barra lateral, barra de herramientas.

Área de visualización

Al igual que el panel Textura en sí, el cuadro de diálogo de lista tiene un área de visualización.

Diálogo de lista - área de visualización
Diálogo de lista: área de visualización.

El proceso de organizar texturas en listas es bastante intuitivo. Funciona de una manera de tipo Explorador de arrastrar y soltar: seleccione (es decir, haga clic en) una miniatura y luego arrástrela a la lista a la que desee asignarla.

Cuadro de diálogo de lista: ejemplo de arrastrar y soltar
Para agregar una textura a una lista, haga clic en su miniatura y luego arrástrela a una lista a la izquierda.

Arrastrando múltiples texturas a una lista también es fácil. Simplemente seleccione los que desee utilizando el estándar Control/Command o Shift atajos. También puede utilizar el Delete para eliminar una textura de una lista. (Tenga en cuenta que el Delete El comando no elimina la textura de su computadora, solo de la lista).

La barra lateral muestra todas sus listas. Al hacer clic en el nombre de una lista, se mostrarán todas las texturas contenidas en esa lista.

Cuadro de diálogo de lista: ejemplo de lista
Ver texturas en la lista «Rayas»

También puede realizar determinadas tareas en una lista. Cuando pase el mouse sobre el nombre de una lista, aparecerá una pequeña flecha a su derecha, que contiene un menú con varias opciones.

Captura de pantalla del menú de lista
Al hacer clic en esta flecha, se abrirá un menú con algunas opciones: «Vaciar» la lista de todos los elementos, «Eliminar» la lista y «Editar» el nombre de la lista.

Además, hacer doble clic en una lista le permite cambiar rápidamente su nombre.

Para eliminar una lista, seleccione la opción «Eliminar» en el menú o presione el botón Delete clave.

Barra de herramientas de listas


Cuadro de diálogo Listas: barra de herramientas (en la parte superior)

Veamos qué hará al hacer clic en estos botones:

  • “Nueva lista” Crea una nueva lista. (¡Sorpresa!)
  • “Mostrar todas las texturas” Muestra todas las texturas (a diferencia de las texturas en cualquier lista que esté seleccionada actualmente).
  • “Mostrar texturas sin clasificar” Muestra todas las texturas que no se han asignado a una lista.

Una vez que haya terminado de realizar cambios en sus listas y organizar las texturas en ellas, haga clic en «Guardar cambios» (en la parte superior derecha de la barra de herramientas de listas), y volverá a la vista principal del panel Textura.

Menú de listas (botón Guardar cambios)
Cuadro de diálogo de lista: botón «Guardar cambios»

(Por supuesto, salir del cuadro de diálogo de listas sin También es posible guardar sus cambios. Simplemente ciérrelo haciendo clic en la «x» en la parte superior derecha y volverá a la vista principal del panel).

En el panel Textura, puede abrir fácilmente el menú de lista haciendo clic en el botón «Listas» en la parte superior izquierda. Desde allí, puede cambiar entre mostrar texturas en una lista seleccionada y mostrar todas las texturas disponibles.

Menú de lista
El menú de lista en el panel Textura

Conclusión (y planes futuros)

Los fuegos artificiales se pueden ampliar y adaptar a sus necesidades. He creado el panel Textura para poder trabajar más fácilmente con texturas; con suerte, la extensión también te ayudará.

En el futuro, planeo agregar más funciones al panel. Una característica es la capacidad de exportar e importar listas; Si usa muchas texturas personalizadas y dedica mucho tiempo a organizarlas en listas, esta opción sería muy útil; probablemente se agregará en la versión 2.2. Por lo tanto, sus sugerencias, ideas e informes de errores son más que bienvenidos.

Una vez que haya probado el panel, me complacerá responder cualquier pregunta que tenga sobre el uso de sus funciones.

Recursos adicionales

Muchas otras extensiones gratuitas creadas por la comunidad de Fireworks aumentarán el poder y la versatilidad de esta herramienta de diseño de pantalla. Estas son algunas de mis colecciones favoritas de desarrolladores:

Y un par de recursos útiles:

Por último, si está interesado en desarrollar extensiones para Fireworks, le recomiendo encarecidamente John Dunning Biblioteca JSML, lo que hace que los paneles sean fáciles de construir.

En las próximas semanas planeo escribir otro artículo que analice en profundidad el desarrollo de extensiones de Fireworks, así que esté atento a la sección de Fireworks de Smashing Magazine.

Otras lecturas en SmashingMag:

Deja un comentario