When you’re working in Fireworks — be it for a website design, mobile design or graphic asset for a project — one need you will undoubtedly have is support for textures. While Fireworks is an amazing tool in other areas, the usability of the textures feature could definitely be improved. In this article, we’ll look at an extension that does just that — the Texture Panel. (Editor’s note (2013/Dec/05): For some reason, Matt’s website seems to be down. We recommend to all our readers to download the Texture Panel extension from SourceForge1.)
Currently in Fireworks, you can apply textures (which are pulled from your “Textures” folder) to whatever vector shape you’re working on. Unfortunately, the way Fireworks lists textures isn’t as intuitive (or fast) as it could be. As it is, you’re presented with a text listing of all of your textures. When you mouse over a name, a preview window of that texture pops up, but there is no easy way to get to or to quickly identify your most commonly used textures, and if you often use a lot of textures (like I do), your workflow can get cramped a bit.
Applying a texture in Fireworks (using the Properties panel).
Being a Fireworks user myself, after noticing this issue, I got right to work on finding an improvement. OK well, not right to work — I had never made a Fireworks extension before, and this kind of thing always has a learning curve, right?
A Dedicated Texture Panel To The Rescue Link
First, I did some research to see whether an extension of such sort had been made before. I found a few, but many of them were unmaintained or not up to my standard of quality. So, I said “Why not? It’ll be fun!” (which I think every developer should say now and then), and started developing my own extension. I wanted to create something that would do the following:
- Sort textures into lists,
- Optionally display the textures as thumbnails,
- Provide an intuitive interface to manipulate textures,
- Allow you to add your own textures and refresh the current list,
- Make you coffee (OK, maybe not, but that would be a nice feature).
My work resulted in what I call the Texture panel. (A pretty creative name, don’t you think?)
The Texture panel
After some brief instructions, we’ll highlight the features and options of the panel.
Downloading And Installing Link
First, download the Texture panel.
After downloading the installation MXP file, double-click it, and the Adobe Extension Manager should take over from there. I’ve tested this extension only with Fireworks CS5 and CS6, but there should be no issues with other versions.
Note: While we’re discussing application versions and compatibility, it’s worth noting that in Fireworks CS6, you can place textures located in the “Textures” folder into subfolders, and Fireworks will automatically load them in its textures list. This differs from the behavior of Fireworks CS5.1 and older, where texture files in subfolders aren’t read and, when placed there, remain unlisted (i.e. “invisible” to Fireworks). Now in Fireworks CS6+, the panel adapts to this and will list subfolder textures.
Using The Panel Link
After installing the extension, you can open the panel via the menu
Window → Texture Panel. If you use the default workspace layout in Fireworks, I recommend dragging the panel into the panels sidebar on the right.
The Texture panel icon in the panels sidebar
The Texture panel’s interface is divided into three main areas: display area, bottom toolbar, top toolbar. Let’s look at each in detail.
Display Area Link
Texture panel: display area
The most immediate and important part of the panel is the display area. By default, it displays your textures as thumbnails. Clicking a thumbnail applies that texture to whatever object (or objects) is currently selected.
Applying a texture in the panel
Note: Make sure that your texture’s opacity is greater than zero, or you will not notice the added texture. Secondly, make sure that the object you’re applying a texture to has a stroke or fill; otherwise, you’ll get an error message. Below, for example, we’re trying to apply a fill texture to an object that doesn’t have a fill.
You’ll get an error message if an object does not have a fill. A similar message shows up if you try to apply a stroke texture to an object that does not have a stroke.
The display area has two views, list and tiled, which you can toggle with a button in the bottom toolbar.
Switching between list and tile view is very easy: just click the dedicated button at the bottom of the panel.
The size of the thumbnails can be changed in the panel’s settings area:
Settings → View → Texture Size: [enter size in pixels] → Save.
Bottom Toolbar Link
Texture panel: bottom toolbar
The settings button takes you to the settings (which we’ll look at later). With the opacity control, you can enter a specific level (0 to 100) or use the pop-up slider. The miscellaneous button opens a menu with a few simple options to add and reload textures. (We covered the button for the list and tile view, to the left of the miscellaneous button, in the previous section.)
Top Toolbar Link
Texture panel: top toolbar
The lists button shows a menu that lets you switch between whatever lists you’ve created. The search field lets you search all of your textures by keyword. The “Fill” and “Stroke” toggle lets you choose whether the texture you click on is applied to the fill of the object or to the stroke.
Playing With Settings Link
When you click the settings button, you’re taken to a dialog that gives a couple of options.
Settings in the Texture panel
Under the “View” tab, the only option, “Texture size,” is fairly straightforward. Changing it to 30, for example, would make the thumbnails in the list view 30 × 30 pixels and would make the tiles in the tile view 30 pixels in height.
Enter any value here that suits your needs.
Here we’re changing the size of the thumbnails to 30 × 30 pixels. What are these, thumbnails for ants?!
The “Other” tab has just one option, “Auto-select texture.” If it’s enabled, then whenever you select a vector object in Fireworks, the panel will update to whatever texture the object has.
The Auto-select option
Once you’re ready, clicking the “Save Settings” button will do the obvious. Then, you will automatically return to the main view of the panel.
Organizing Textures: Using Lists Link
By clicking the “Edit Lists” button, a dialog window will pop up, where you can create and delete lists and perform a few other tasks.
The list dialog has three main areas: display area, sidebar, toolbar.
Display Area Link
Like the Texture panel itself, the list dialog has a display area.
List dialog: display area.
The process of organizing textures into lists is pretty intuitive. It works in a drag-and-drop Explorer-type way: select (i.e. click on) a thumbnail, and then drag it to whatever list you want to assign it to.
To add a texture to a list, click on its thumbnail, and then drag it to a list on the left.
Dragging multiple textures to a list is easy, too. Just select the ones you want using the standard
Shift shortcuts. You can also use the
Delete key to remove a texture from a list. (Note that the
Delete command does not remove the texture from your computer, only from the list.)
Lists Sidebar Link
The sidebar displays all of your lists. Clicking on a list name will display all of the textures contained in that list.
Viewing textures in the “Stripes” list
You can also perform certain tasks on a list. When you mouse over a list’s name, a little arrow will pop up to its right, containing a menu with several options.
Clicking this arrow will open a menu with a few options: “Empty” the list of all items, “Delete” the list, and “Edit” the list’s name.
Also, double-clicking a list lets you quickly change its name.
To delete a list, either select the “Delete” option in the menu or press the
Lists Toolbar Link
Lists dialog: toolbar (at the top)
Let’s go through what clicking these buttons will do:
- “New List”
Create a new list. (Surprise!)
- “Show all textures”
Show all textures (as opposed to the textures in whatever list is currently selected).
- “Show unsorted textures”
Show all textures that haven’t been assigned to a list.
Once you’re done making changes to your lists and organizing the textures in them, click “Save Changes” (in the top right of the lists toolbar), and you’ll return to the main view of the Texture panel.
List dialog: “Save Changes” button
(Of course, exiting the lists dialog without saving your changes is also possible. Just close it by clicking the “x” in the top right, and you’ll return to the main view of the panel.)
Accessing the List Menu Link
In the Texture panel, you can easily open the list menu by clicking the “Lists” button in the top left. From there, you can switch between displaying textures in a selected list and showing all available textures.
The list menu in the Texture panel
Conclusion (And Future Plans) Link
Fireworks can be extended and adapted to suit your needs. I have built the Texture panel to enable me to work more easily with textures; hopefully, the extension will help you, too.
In the future, I plan to add more features to the panel. One feature is the ability to export and import lists; if you use many custom textures and spend a lot of time organizing them into lists, then this option would come in very handy — it will be probably added in version 2.2. So, your suggestions, ideas and bug reports are more than welcome.
Once you’ve tried the panel, I’d be happy to answer any questions you have about using its features.
Additional Resources Link
Many other free extensions created by the Fireworks community will increase the power and versatility of this screen design tool. Here are some of my favorite collections by developers:
And a couple of helpful resources:
- Fireworks Interviews10
Interviews with a variety of Fireworks designers.
- Fireworks Police11
An updated collection of Fireworks resources.
Further Reading Link
- Interactive Prototypes And Time-Savers With Adobe Fireworks14
- The Whys And The Hows Of Textures In Web Design15
- Developing A Design Workflow In Adobe Fireworks16
- 1 http://sourceforge.net/projects/texturepanel/
- 2 http://johndunning.com/fireworks/about/JSMLLibrary
- 3 http://www.adobe.com/products/flex.html
- 4 http://www.adobe.com/devnet/actionscript.html
- 5 https://www.smashingmagazine.com/wp-content/uploads/2012/08/List-Dialog.png
- 6 http://fireworks.abeall.com/extensions/
- 7 http://johndunning.com/fireworks/
- 8 http://www.mattstow.com/
- 9 http://phoenix-project.posterous.com/
- 10 http://fireworksinterviews.com/
- 11 http://fwpolice.com/
- 12 http://johndunning.com/fireworks/about/JSMLLibrary
- 13 http://fireworks.smashingmagazine.com/
- 14 http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
- 15 https://www.smashingmagazine.com/2011/10/03/whys-hows-textures-web-design/
- 16 http://fireworks.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.