Using The Texture Panel In Adobe Fireworks

Advertisement

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 Panel1. (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 SourceForge2.)

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.
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

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).

I built my first prototype with the help of John Dunning’s JSML Library163, which makes it a snap for anyone looking to develop a panel. It basically enables you to write the panel in JavaScript. Ultimately, though, I had to use native Flex4 and ActionScript 35 — neither of which I knew — to make the panel into what I wanted. I had to figure out a lot of stuff for myself, but I was right about one thing: the experience was fun! Mostly.

My work resulted in what I call the Texture panel. (A pretty creative name, don’t you think?)

Texture panel screenshot
The Texture panel

After some brief instructions, we’ll highlight the features and options of the panel.

Downloading And Installing

First, download the Texture panel6.

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

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.

Sidebar with panels in Fireworks
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

Display area
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 with the Texture panel
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.

Error message
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 views
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

Bottom toolbar
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

Top toolbar
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

When you click the settings button, you’re taken to a dialog that gives a couple of options.

Settings in the Texture panel
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.

Texture size setting
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.

Auto-select option
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

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.

List dialog
The list dialog (large view7)

The list dialog has three main areas: display area, sidebar, toolbar.

Display Area

Like the Texture panel itself, the list dialog has a display area.

List dialog - 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.

List dialog - drag-and-drop example
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 Control/Command or 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

The sidebar displays all of your lists. Clicking on a list name will display all of the textures contained in that list.

List dialog - list example
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.

List menu screenshot
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 Delete key.

Lists Toolbar


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.

Lists menu (Save Changes button)
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

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.

List menu
The list menu in the Texture panel

Conclusion (And Future Plans)

Fireworks can be extended and adapted to suit your needs. I have built the Texture panel8 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

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:

Finally, if you’re interested in developing extensions for Fireworks, I highly recommend John Dunning’s JSML Library163, which makes panels a snap to build.

In the coming weeks I plan to write another article that looks in depth at developing Fireworks extensions, so keep an eye on Smashing Magazine’s Fireworks section17.

Further Reading

(mb) (al)

Footnotes

  1. 1 http://matt-curtis.me/fw/texture-panel/
  2. 2 http://sourceforge.net/projects/texturepanel/
  3. 3 http://johndunning.com/fireworks/about/JSMLLibrary
  4. 4 http://www.adobe.com/products/flex.html
  5. 5 http://www.adobe.com/devnet/actionscript.html
  6. 6 http://matt-curtis.me/fw/texture-panel/
  7. 7 http://fireworks.smashingmagazine.com/wp-content/uploads/2012/08/List-Dialog.png
  8. 8 http://matt-curtis.me/fw/texture-panel/
  9. 9 http://fireworks.abeall.com/extensions/
  10. 10 http://johndunning.com/fireworks/
  11. 11 http://www.mattstow.com/
  12. 12 http://orangecommands.com/
  13. 13 http://phoenix-project.posterous.com/
  14. 14 http://fireworksinterviews.com/
  15. 15 http://fwpolice.com/
  16. 16 http://johndunning.com/fireworks/about/JSMLLibrary
  17. 17 http://fireworks.smashingmagazine.com/
  18. 18 http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  19. 19 http://www.smashingmagazine.com/2011/10/03/whys-hows-textures-web-design/
  20. 20 http://fireworks.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/

↑ Back to topShare on Twitter

Advertising
  1. 1

    This is a great extension! It’ll make it so much easier to keep textures organized. Thanks for taking the time to develop it and share it!

    2
  2. 3

    Nice I didn’t realise Fireworks could have such an extensive pattern palette for customisation. I’ve not really got into Fireworks I’m not a massive fan of the way the layers work (I do all my web work in Photoshop). The only thing better in Fireworks as far as I can tell is saving things for web using Export Wizard… that is one impressive piece of software! Photoshop needs something like that. Also working both agency and client side no one seems to use Fireworks all that much from my experience, does anyone here use it as software of choice over Photoshop? Am I missing out or slowing my workflow down by using Photoshop? Also I’ve noticed when working with developers they prefer me to work in Photoshop.

    Deano

    0
    • 4

      Hey, Deano,

      You might be interested in reading some of our other articles in the Smashing Fireworks section:
      http://fireworks.smashingmagazine.com

      It may give you some pretty good insight at what Fireworks is, how it works, and how it can save you time (when working on designs for web, screen and mobile).

      Also this site — http://fireworksinterviews.com — may be interesting, too, since you can read the first-hand experience with Fireworks, shared by many designers who use it daily.

      6
      • 5

        You guys have convinced me I’m going to start using Fireworks more often when I’m designinig onscreen graphics, although I don’t how I would cope without having my Photoshop fix… haha

        1
    • 6

      Personally also use fireworks and everyone in the office does too, fireworks was originally designed as a web tool and its been maintained as such, however the popularity of photoshop has forced adobe to include FW’s web features into it, this does however make it somewhat bloated.

      The only time we ever open PS is to do actual photo editing, and then its rite back to FW, hek, even if clients send over PSD files I open them up in FW. Unlike you I cannot stand the way PS handles its layers. With FW i can select anything on any layer weather or not said layer is selected, which comes in really handy if you receive a file from a client where the layers where named by a baboon. All well and good sending a nice organized layered structure with 30+ layers, then leaving them all named layer [no]. Sometimes even with names its not much help as names are relative to the user creating them and are not always as obvious and descriptive to other people.

      1
      • 7

        You can do similar thing on Photoshop as long you have some sort of layer structure for the next person who uses the file or if you need to go back to it later. The way I select layer isn’t through the the layer palette or using the horrible auto-select I simply hold CMD (CTRL on a PC) and click which layer I want. Using this method you can quickly set up folders by holding CMD+Shift (CTRL+Shift on PC) and click what ever you want to be in the group the group the just press CMD+G (CTRL+G on PC) and you all your items you need in one place. This is useful for when your making a nav bar or if your designing an email you can name each section and the main thing is that it keep the PSD neat and tidy.

        0
  3. 8

    Cheers, great article and extension. Keep them coming! :)

    4
  4. 9

    Fireworks all the way. Please keep them coming. The day Adobe pull the plug on Fireworks (god forbid) I will quit web designing for good.

    4
  5. 10

    Great addition to FW, Matt!

    0
  6. 11

    MIND BLOWN. Awesome, Thanks so much!!!

    1
  7. 12

    Now this is a swell tool really. Need some polishing but I will use it for sure. WTG.

    1
  8. 14

    Looks fantastic, will definitively use it! Great work!

    1
  9. 15

    Great idea, crude extension. Doesn’t work for me at all (FW CS6).

    -1
    • 16

      Hello Bom,

      As said by Jonas below, unless your texture opacity is set greater than 0, it will not show. In retrospect, this might not have been the smartest decision – in fact I didn’t even know. I automatically knew to increase the opacity, but people who don’t use the textures feature often wouldn’t.

      3
  10. 17

    I wonder if everyone understands that selecting a texture won’t have visible effect, unless you have already increased the texture opacity from the default value of 0.

    This should probably be explained in this blog post, I can see how people not used to using textures in FW would miss this.

    (Plugin works perfecftly for me in FW CS6)

    4
    • 18

      I agree with Jonas Ohlsson and I would offer a easy way to manage Lists.
      These are my suggestions by now. But this is a great improvement working with textures in FW.
      Thank you

      0
      • 19

        An easier way to manage lists? What do you feel the current implementation is lacking?

        0
        • 20

          Currently I have to click in the gear icon at bottom and then click in “Edit Lists” at top. At first it’s a bit boring because we are always accessing to check if the Lists are correct. In short I meant offer a direct button to access the “Edit List panel”.

          0
          • 21

            Hmm. Maybe there should be, but that doesn’t seem like too much of an inconvenience to me. Currently the UI doesn’t really offer space for another button.

            And I’m slightly confused by “always accessing to check if Lists are correct”?

            0
  11. 22

    I wish we had such a great extension for Symbols :)

    0
  12. 24

    At first, I was accessing to check if all of my “Lists” are ok, with appropriate textures, correct named as so on. But I agree with you that the UI doesn’t offer space enough. It was bothered me a bit and I thought that will be useful give you this feedback. But I can accomplish all that I need so do not worry so much about it.

    0
  13. 25

    Great and much needed enhancement for Fireworks. Would also love to see a quick px dimension in case you are cutting for a tiled background or something.

    3
  14. 26

    Something I’ve never quite understood is why there isn’t the ability to adjust the colour of the texture that overlays the background colour – is there a feature i’m missing that does this?

    Nevertheless thanks for the extension!

    0
  15. 27

    Excellent. Please continue to make great extensions and encourage Smashing Magazine to continue to publish great articles about Fireworks.

    0
  16. 28

    Thanks so much, the up and down arrows of my keyboard were consuming in the search for a specific texture! As Nate said, it would be great to have a dimension in px of the original texture (perhaps on mouseover), without having to open the Texture folder. However, great extension. Thank you again!

    0
  17. 29

    Hi Matt, thanks for your contribution to make Fireworks better. As an interaction designer, Fireworks is my most trusted tool, so every improvement is welcome.
    I gave your extension a quick try and I do see the benefits of this extension.
    A few remarks though (and don’t take this wrong, it is just constructive criticism)
    - I miss mouse hints when I hover over buttons. The Guide extension by Eugene Jude for instance has helpful mouse hints that really support the icons. Luckily you do have mouse hints when hovering over the textures.
    - I had trouble recognizing Settings button, the radar visual was not very clear to me.
    - In the Settings dialog, there is no Cancel button. I have to press Save Settings, whether I have made changes or not.
    - In the Settings dialog, when clicking ‘Edit Lists’, I am stuck in the List Dialog and I can’t escape from it. Everything is greyed out and non-clickable. I can’t even quit Fireworks and have to force quit the program.

    But other than the issues I mentioned, it’s a great extenstion.
    Gijs

    3
    • 30

      Hello Gijs,

      Thanks for the feedback!

      You said that the Settings button wasn’t noticeable, but what did you think it was? Maybe I should try another icon.

      About the dialog – that’s worrying, but it’s the second time today I’ve heard. Weird we didn’t run over it in our beta testing. In Windows, all the dialogs have close button, but in Mac they do not. It didn’t occur to me that the only way out would be the ‘Save Changes’ button. I’ve added it to my investigation list. Also, you said that everything is greyed out and unclickable…I think this might be another Mac issue, as I haven’t seen any reports of it in Windows. Just to be sure, can you redownload and ensure you’ve downloaded version 2.1? This comes as a surprise to me, since I thought we got rid of this in beta testing.

      Interface hints are going to be in the next version, along with a few other features.

      All in all, thanks for the feedback again, glad to have it.

      Thanks, Matt

      0
  18. 31

    ..one more thing; You mentioned this yourself. Setting the ‘Amount of texture’ to zero can be confusing indeed. I like Fireworks’ approach to show 50%.

    0
  19. 32

    It looks like the site is down, but I was able to find the extension on sourceforge at http://sourceforge.net/projects/texturepanel/ and it seems to work flawlessly in 5.1

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top