What's the best workflow to design active menu points on different pages in Adobe Fireworks?
Can you explain a bit more what you mean by "active menu points"? Do you mean having a consistent set of links that exist across multiple pages?
I think it will be a few sections of a site where each section will comprise of a few different pages. Within each section, the active menu points will unique to the other section but they all share the same menu.
I think this will be dependent heavily on each individual's preference and the project in question. From what I'm understanding, it sounds like you're asking a question similar to..."which navigation would fit this layout" and you're not sure what the layout looks like to begin with.
Agree that it varies based on individuals and type of layout. I see this question to all as in all the navigation menus are used across whole site, but on each section, 1 of the navigation menu will need to be given the active state. With regards to master page, shared layers and symbols, what is your views on this.
So what is the process or approach is based on - 1) The navigation asset is consistent and maintain as much to all the pages 2) Still able to sub-divide the active state from the global navigation menus to showcase the different section of pages.
Thx for staring the discussion about originally my question.
In Photoshop I did different pages (Home, Products Overview, Product Detail for ex) with Layer Comps. So If my main navigation is text only I set the active link color with a color overlay filter in each Layer Comp.
In Foreworks I do all the fix navigation design in a shared layer. But how can I set now for ex. the different active state of one menu point on my different pages?
Oh, now I understand. In Fireworks you can control the position of the shared layer relative to layers on a page, so I'll draw navigation on a shared layer (or on the Master page, which is always the lowest layer on a page to which it is shared), then create another layer above the shared layer and draw "on top" of the shared layer. You can use a color-filled rectangle with a blend mode (or transparency) or you can draw a completely new graphic on top of the navigation. You can even draw nav states on their own layers, share each nav state to specific pages, and control layer stacking order to get the correct "selected state" appearance.
Is this what you're trying to do?
Hm. Okay. Your solition works with (shared) layers stacking. I'm not shure if this is the best way. Blend modes for text color? So if I try to get the CSS-Color I get the wrong one? And what if the client want to add or rename menu points during the design process? So this way I have to rearrange and fiddle with a lot of menu point states around my pages?
My best solution so far is to do each menu point/link as a button. All I put in a shared layer. Then I design the active states of each button and check the checkbox "show down / active state on load" of the right one at my pages. This way I can do quickly changes, renaming or adding / remove menu points.
But: cant see it while designin or export the pages as static images.
I didn't realize that you wanted to pull specs from the file.
Try creating a page for just the navigation. Place the default navigation on one layer, then create more layers, one for EACH navigation item and draw the selected state for that nav item on that layer (one nav item per layer.)
Share the "all navigation" layer to all pages, then use "Share Layer to Pages" to selectively share each nav state layer to the corresponding pages. Adjust the layer order on each page to ensure that selected states appear above the full navigation layer.
With ALL of the navigation states on a single page, any edits happen ONCE on ONE page, and since you're drawn the different states individually, you can pull the design specs as needed.
Dave, is this what you are referring to?cl.ly
If I understand your diagram correctly, then yes, that is what I mean. Put all of the navigation into separate layers on one page, then share those layers as needed. This way all of the nav styles are in one place and can be edited quickly and easily without having to touch every page in the document.
cool. I think Dave's suggestion is the closest to work with such workflow.
If only Fireworks have some flagging option to set Page as section and use variables to check other sub pages to use certain states as active menus.
Thx all. I built a file to test it. First: I had also to do all navigation points in the default state. So with 5 nav points I get 11 layers (with the default nav bg layer). So I have a lot of layers on each page (ok, thats not bad but a little bit ugly). Also the editing of the nav is still a bit tricky (but can be optimizeed with styles). For ex. adding a menu point and rearrangin all. But thx, this is a solution!
But: wouldn't be something possible with the "states" panel for pages?
David.
Another way is Rich symbols. With that, you can set default and selected color for menu items. And use them inside symbols so you just need to change once for each section. So if you have 5 nav, you should have 5 such symbols for the 5 sections.
Turn on the active menu to "Active". By doing this, there is no need to maintain too much shared layers.
Tip. if you want to maintain these symbols in a clever way, export the symbols. For example give them a name like "nav_about.graphics.png" and import them back in again. This time, they will appear in the document library as imported graphics symbols.
This workflow has an advantage. You can edit the symbols like an external file and track the assets with the Document panel.
to add on. Actually you can just maintain ONLY 1 symbol. Toggle the nav menu item respectively and export out 5 individual symbols for import to main document.
Doing this way, you can manage all the nav in 1 file.
Love to hear what you guys think.
Thx Linus. Okay, rich symbols are cool for the off/active states. But I have to do the positioning on each page and if my client want me to add a menu point I have to rearrange and add this point on all my pages (I did a ecommerce design with over 30 pages...).
Also its a little bit struggling to export / import symbols to do the rich symbols.
Hm. There's no better way?
hmm not quite understand. i assume the positioning are the same for all pages except the active menu item is not.
okay: if I use rich symbol then I do that:
1. I create my rich symbol with two states (off + active)
2. I create a navigation with instances of the rich symbol and rename the labels
3. I arrange / positioning them as my navigation in my design
4. I copy and paste this set on all my pages and set the different active states
So if I wanna add a menu item or want do rearrange the menu items I had to do that on each page. Right?
And if I put the rich symbol in a shared layer it dont work with the rich symbol states...
Here are my steps:
1. create rich symbol of the states 1 menu item
2. lay into a navigation menu
3. set 1st menu with active state. for e.g. Product
4. Take all and convert into a symbol. e.g nav_product
5. Share Layer to Pages for all related pages.
6. Repeat the same step until you get other menu items as symbol and share to its group of pages. Use the same X and Y of the first symbol for the other symbols to ensure same position.
if the menu name changes or need add a new menu item, repeat the above step and update only the "Share to Layer" layers.
But i will prefer to use export and import symbol workflow because this way i only need to maintain one master set of navigation asset.
Hope i make it more clear for you.
Thx Linus. This is shure another solution with the rich symbols!
I did a sample mockup supporting what i just explain.
All the individual nav is imported as symbols and all the pages under About section has the "nav_about" symbol with active item using the Share Layers to Pages feature.
So if there is any rename or reorder, you just change the master symbol one and export and re-import all the nav symbol again.
some corrections. there is no need to export and re-import symbols.
In the document panel, there is a refresh icon. Hit it and all the pages will be updated accordingly.
