Xara Xone May 15 Guest Tutorial - Web Designer Templates - FREE

[gwpriester]

May 15 Xara Xone Guest Tutorial 85
The May 15 Xara Xone


Bill Taylor (soquili) has come up with a timely Guest Tutorial for creating your own reusable template in Web Designer. (The same steps can also be used in the newer versions of Xtreme).

Covered are:

• Creating a NavBar
• Creating custom colors
• Adding new pages
• A gallery of popup images
• And more

A big round of Kudos for Bill.

[steve.ledger]

Great tut' Bill - have another bowl of Kudos

[Soquili]

Thanks Steve.

[cursor]

Thanks for taking time to put together the great tutorial on custom template creation, Bill. Very nice stuff, indeed. I'd like to offer an observation that would simplify the navbar creation for anyone creating custom templates.

Within Part 2 of the tutorial, you note that the button creation process could have been simplified a bit:

NOTE: After I completed the buttons, I realized that it might have been easier to create the first button rectangle center and center align the text, group the two, then do the duplicate (Ctrl + D) four times. All of these grouped buttons could then be copy and pasted onto the MouseOver layer in one step. This would eliminate four extra steps (nine steps if you count the MouseOver buttons).

I believe it could be simplified even further by first creating one complete button (including text, grouping, layer assignments, color differentiations [per layer identity], soft-grouping, and link assignment) prior to any duplication. Consider:

1. Make single rectangle on MouseOff.
2. Apply Shade of Theme Color 3.
3. With Text tool, click once within the rectangle, click the center justify button, then type your button text. Using a temporary placeholder word that sports both an ascender and a descender letter works best. Consider "Option", for example.
4. Select both the rectangle and its text.
5. Do Arrange > Alignment.
   Set Horizontal positions to Align Centrally.
   Set Vertical positions[/b] to Align Centrally.
   Click Apply.
6. Group the two elements together.
7. Copy the group, then Paste in place the group to the MouseOver layer.
   (or Clone [ctrl+k] the group, activate the MouseOver layer, then click the Move button)
8. Lasso select both groups (on two layers) & Arrange > Apply Soft Group.
9. Ctrl+click the selected group's rectangle & change its color for mouseover effect.
10. Hit the Esc key to deselect.
11. Ctrl+click the group's text & change the text color for mouseover effect.
12. Enter # (or javascript;) into the Web Properties > Link (tab) > Link to address field. Click Apply.
13. NOW ... horizontally duplicate & position any additional buttons.
14. Change button text as needed.

[Soquili]

Thanks Curtis.

Applying a softgroup too early in the design (before making duplicates) will cause all buttons to have the same text. Edit button one text and all buttons update.

[cursor]

Actually, Bill, that's not quite right ... at least not from my limited experience. I've attach a sample .web file (about as simple as it can be) that contains a single soft-grouped, functional button :: 2 groups (Soft Group) on 2 layers. If I right-mouse-click & drag this single button to the right, it will create a duplicate soft-group of button elements. The two buttons are not nested within the same soft-group. Changing the text on either button's MouseOver layer will change its complementary MouseOff text string accordingly ... but the other button's text is independent. Note when both buttons are lasso-selected, the status bar reads 2 groups (Soft Groups) on 2 layers (note the plural groups).

[Soquili]

Thanks Curtis. When I tried that during the making of the tutorial the results were very different.

I did need to do a complete uninstall and reinstall of Web Designer a week or so after making the tutorial. Perhaps there was a 'glitch' in my previous install.