MX
Table Of Contents
- Purchasing and unlocking Web Designer MX Premium
- Support
- What is new in Web Designer MX Premium? (v8)
- Introduction
- Getting Help
- Getting Started
- Program Layout
- Objects On The Page
- Object Based Web Design
- The Selector Tool
- Website Toolbar
- Creating a website
- Previewing Your Website
- Using Templates, Clipart & Widgets
- The Designs Gallery
- Website Colors
- Photos
- Text
- Selecting a page size
- Automatic page resizing
- Saving Your Work. Creating A Website
- Stretchy Objects
- Groups
- Repeating Objects
- Links, Buttons & Navigation Bars
- Displaying your own icons in browser tabs: favicons
- Drawing Tools
- Right-click menus
- Layers, Mouseover (Rollover) & Pop-ups
- Creating Buttons, Banners And Other Web Graphics
- Publishing Your Website
- Document handling
- Starting a new document
- Opening an existing document
- The Web Designer MX Premium window
- Opening a second window
- Changing the zoom value
- Sliding the document within the window
- Changing the page size
- Multiple pages in the document
- Saving the document
- Support folders
- Closing the document
- Automatic Backups
- On-screen grid
- Rulers
- View quality
- Galleries
- Undo and Redo
- Object Handling
- The Selector Tool
- Moving objects
- Removing objects from the document
- Duplicating and cloning
- Moving objects forward and backwards
- Rotating using the mouse
- Scaling (resizing) objects
- Flipping objects
- Stretching and squashing objects
- Skewing objects
- The Mold tool
- Snapping
- Guide Objects and Guidelines
- Summary of shortcuts on the numeric keypad
- Grouping and ungrouping objects
- Soft Groups
- Alignment
- Copying Styles: Paste Attributes
- Naming objects
- Repeating Objects
- Footers and objects that stretch with the page
- Drawing Lines and Shapes
- Drawing a line or shape
- The Freehand & Brush Tool
- Editing lines/shapes with the Freehand & Brush Tool
- The Straight Line & Arrow tool
- The Shape Editor tool
- Extending the line
- Finishing the line
- Adding a new point handle
- Selecting multiple point handles
- Deleting points
- Moving point handles—Shape Editor Tool
- Smoothing a line
- Constraining the line
- Changing curves
- Changing a straight line to a curve (and vice versa)
- Joining lines
- Splitting a shape
- Line Gallery
- Closing a shape
- Changing the line width (thickness)
- Shape Handling
- Color Handling
- The color line
- Applying fill & line colors by drag & drop
- Editing an object’s color
- The Color Editor
- Local colors and Theme colors
- Theme color schemes
- Creating your own color schemes
- Creating new named colors
- Editing named colors
- Normal colors, Tints, Shades and Linked colors
- Creating a Tint, Shade or Linked color
- Text Handling
- Introduction
- Terminology
- The Text Tool
- The Font Menu
- Simple text
- Text in a column
- Text areas
- Text along a curve
- Editing text
- Spell checker
- Find & Replace
- Synchronising Text using Soft Groups
- Tabs, Margins and Indents
- Repelling text objects
- Anchored Graphics
- Embedded Graphics
- Text Styles
- Applying text attributes
- Text links
- Text inside groups for websites
- Copying text appearances
- Copying/Pasting formatted text (RTF)
- Seeing fonts in use
- Document font embedding
- Website font embedding
- Browser text compatibility
- The Fill Tool
- Transparency
- Shadows
- Bevels
- Masks
- Web Properties Dialog
- Live Effects
- Photo Handling
- Introduction
- Photo Objects
- Photo Groups
- Importing Photos
- Zero-memory Copies
- The Bitmap Gallery
- Embedded JPEG files
- Blending & Merging photos
- Photo display quality
- Saving & Exporting Photos
- Photo Edit Attributes
- Editing the outline of Photos
- Cropping photos
- Cropping photos with a mask
- Cutting objects out of photos
- Screen capture utility
- Coloring photos
- Resize, rotate and position a photo within its frame
- Horizon Straighten
- Viewing a scaled photo at its full size
- Making a photo its full size
- Optimizing Photos and Bitmaps
- Converting objects or drawings to bitmaps
- Photo Documents
- Editing Photo Files
- The Photo Tools
- 3D Extrude Tool
- Navigation Bars
- Using template Navbars
- Navigation bar properties dialog
- Site navigation bar
- Buttons & Menus
- Updating your Navbar across all pages
- On canvas editing
- Changing the font on Navbar buttons
- Importing & pasting Navbars
- Creating your own Navigation Bars
- Button margins
- Advanced - Editing a Navbar button design
- Navbars with different first or last buttons
- Website Presentations
- The Presentation toolbar
- Creating a presentation
- Managing presentation steps
- Adding new presentation pages
- Creating Number and Bullet lists
- Deleting presentation pages
- Linking to next/previous step
- Applying transitions to presentation step links
- Applying presentation step transitions
- Applying presentation page transitions
- Advanced presentation information
- Hosting remote presentation sessions
- Website Widgets
- Page & Layer Gallery
- Animations
- Introduction
- Core Principles
- Your First Animation
- Exporting a Flash File
- Exporting animations as AVI
- The Animation Frame Gallery
- Photos
- Animation Frame Rate and Tween Steps
- Cropping, Clipping and Animation Size
- Animation Speed
- Animation smoothness
- Rotation
- Groups
- What Web Designer MX Premium features does Flash support?
- Color Transforms—Animating Color Changes
- Transparency
- URLs in Flash
- Advanced Flash Commands
- Web Designer MX Premium Flash Animation Summary
- Creating animated GIFs
- Animation properties
- Importing and Exporting
- Printing
- Customizing Web Designer Premium
- Changing the blank template document
- Options in the Utilities menu
- General tab
- Recent file list size
- Current layer always visible and editable
- Ask before setting current attribute
- Make groups be transparent as a whole.
- Maintain imported layer names
- Marquee Object Selection
- Angle constraint
- Document is intended to be a website
- Show Windows compatible text lengths
- Nudge size
- Duplication distance
- Grid and Ruler tab
- Mouse tab
- Page Size tab
- Backups Tab
- Effects & Plug-ins tab
- Control bars
- Galleries
- Displaying a gallery
- Moving and docking a gallery
- Grouping galleries
- Using galleries
- Selecting items
- Re-ordering items in the gallery
- Searching for an item name
- Adding to a gallery
- Deleting sections from a gallery
- Closing a gallery
- Removing a gallery from the workspace
- Restoring the default control bars/galleries
- Menus and Keyboard Shortcuts
- Introduction
- File menu
- New (Standard control bar or Ctrl+N)
- New from Designs Gallery
- Open (Standard control bar or Ctrl+O)
- Open recent
- Close (Ctrl+W)
- Save (Standard control bar or Ctrl+S)
- Save As
- Save All
- Save Template
- Import (Ctrl+Alt+I)
- Export (Ctrl+Shift+E)
- Export JPEG
- Export PNG
- Preview web page (Shift + F5)
- Preview Website (F5)
- Export Website
- Publish Website
- Preview Flash
- Export Animation
- Document Info
- Page Options
- Printer Setup
- Print Options
- Print (Ctrl+P)
- Exit
- Edit menu
- Undo (Standard control bar or Ctrl+Z)
- Redo (Standard control bar or Ctrl+Y)
- Cut (Edit control bar or Ctrl+X)
- Copy (Edit control bar or Ctrl+C)
- Paste (Edit control bar or Ctrl+V)
- Delete (Edit & Standard control bars or Delete)
- Select All (Ctrl+A)
- Clear Selection / Reset current attributes (Esc)
- Duplicate (Edit control bar or Ctrl+Alt+D)
- Clone (Ctrl+K)
- Pages
- Arrange menu
- Move to Layer in Front (Arrange control bar or Ctrl+Shift+U)
- Bring to Front (Arrange control bar or Ctrl+F)
- Move Forwards (Arrange control bar or Ctrl+Shift+F)
- Move Backwards (Arrange control bar or Ctrl+Shift+B)
- Put to Back (Arrange control bar or Ctrl+B)
- Move To Layer Behind (Arrange control bar or Ctrl+Shift+D)
- Group (Arrange control bar or Ctrl+G)
- Ungroup (Arrange control bar or Ctrl+U)
- Apply soft group (Ctrl+Alt+G)
- Remove soft group (Ctrl+Alt+U)
- Alignment (Ctrl+Shift+L)
- Fit Text to Curve/Remove Text From Curve
- Repelling and Anchoring
- Create Navigation Bar
- Repeat on all pages (Shift+Ctrl+Alt+R)
- Stop updating (Shift+Ctrl+Alt+O)
- Utilities menu
- Window menu
- Clear Selection / Reset current attributes (Esc)
- Multiple Page View
- New View
- Arrange Views
- Animation
- Show Scrollbars
- Show Rulers (Ctrl + L)
- Control Bars
- Quality (Standard control bar)
- Show Document Tabs
- Full Screen (8 on numeric keypad)
- Show Grid (#)
- Show Guides (1 on numeric keypad)
- Snap to Grid (. on numeric keypad)
- Snap to Guides (2 on numeric keypad)
- Snap to Objects (* on numeric keypad)
- Documents Loaded
- Help menu
- Key shortcuts
- More about Xara Group
- Legal
Saving & Exporting Photos
Selecting the Save option will always save a native .web file. To save a photo as a JPEG, PNG or other
image file type, it's necessary to use the Export
option, or the shortcut "Ctrl + Shift + E".
There are two icons available on the top bar that are short-cuts to
save the selection as JPG or PNG. These are in the flyout bar
shown when you move the mouse pointer over the Export HTML
icon.
For photos we recommend saving as JPEG (sometimes called JPG) as this offers the greatest
compatibility and the best size / quality compromise.
When you export a JPEG or PNG, there is a Settings
option on the Save Dialog. Selecting this provides many advanced export options, as well as compare
side-by-side alternative settings or even alternative file types such as PNG.
When you export a JPEG, an export preview dialog is shown where you can adjust many export options,
as well as compare side-by-side alternative settings or even alternative file types such as PNG.
The Export Preview dialog allows you to adjust the size, resolution, JPEG quality and even select from 3
alternative export file types if you so wish. The default values should be fine for all normal purposes and
you can just click the export button to save your photo.
Things to remember when exporting:
First select the object or objects you want to export
The default exported size of the image will be the size you see on screen at 100% zoom.
The Export Preview dialog
is described in more detail here.
Tip
: You can control the JPEG quality in the Export Settings dialog on the Options tab. The default and
recommended value is 85%
The JPEG system is designed that a
setting of 85 is the optimum value. We
recommend you do not save JPEGs at
100% quality, as the results are visually
identical to the 85% quality, only the file
size and memory use is dramatically
increased with no benefit.
When saving for use on the web it's quite possible to reduce the quality below 85 to increase page view
speed. The preview window shows the quality of any value you select.
Tip
: If you expect you may want to perform any further edits on your exported image, for example to create
the image again at another size, we strongly recommend saving the .web file as well. This will preserve
the lossless master image along with all its edits and changes.
Example: To resize a photo and save as a new JPEG
This process is very quick and simple:
Drop your photo onto Web Designer Premium (either onto a blank page or onto the title bar to
create a new document)
In the Selector Tool either drag a corner handle to resize the image, or enter the required width
or height into the "W" or "H" field on the InfoBar. Check the image size is correct at 100%
Page 870










