Table Of Contents

Previous topic

File Manipulation

Next topic

Presentation

This Page

Mockup Edit

Mockup editing in EasyMockup is easy to learn, it won’t take too much time before you can work on your own to create a beautiful mockup.

Content and Styling

Add Content

Content is actually different symbols in EasyMockup. Symbols are manipulate by stencil panel, floating on the right of the canvas by default. There are two ways to add symbols:

  • Add it from the sentil panel. Scroll or filter to find the symbol wanted, then press and drag it to the canvas for adding.
  • <CTRL+F> to focus the quick add edit, then input keyword filters, a list of filtered symbols pop up, now you can select the symbols to be added by clicking the item.

Style

Style can be applied to specified symbols. Customizable properties include background color, selection color, rounded corner, borders etc.

Text

The text of symbols can be styled by clicking the Text button on the toolbar.

Page Stacks

Page stack is a critical concept and symbol of EasyMockup. Page Stack is a symbol can hold multiple pages inside. It contains at least one Page. A page is actually a logical concept, it manages a group of symbols belong to the stack.

For example, you want to create a mockup for a website. The website contains four sub channels: Home, Download, Purchase, About us. Then you can use a Page Stack contains four Pages.

Page stack can be added to the canvas in two ways:

  • Click Page Stacks button on the main toolbar.
  • Drag it to the canvas from the stencil panel.

Pages can be added to or removed from the page stack by clicking the Plus or Minus button on the property toolbar. Please note that, when delete a stack page, the symbols inside it will also be deleted.

Add Symbols to Page Stack

Add symbols is quite easy.

  • Select all the symbols on the canvas you want to add to a page stack.
  • Draw them over the page stack instance.
  • When the page stack’s border is turned to BLUE lines, means the page stack is ready to accept all the symbols.
  • Drop the dragged symbols, then they all become part of the page stack.
Remove Symbols from Page Stack

Remove symbols from the page stack is much like the reverse procedure of Adding them.

  • Select the symbols you want to remove from the Page Stack.
  • Drag them out of the page stack, util you see a RED border shows up on the boundary of it, then drop.
Edit Different Pages

Stack means the page stack can contain multiple Pages. When you want to edit different Page inside the Stack, just click the drop menu on the property toolbar floating right beside the page stack selection.

On the page switching, the current edit page’s content (the symbols) will be hidden while the symbols belongs to the page switched to will show up.

Symbols inside a page stack are just like the children elements, you can just drag the page stack to move all the symbols belong to it.

Skins

EasyMockup supports two skins for all symbols. Sketch skin makes all the symbols look sketchy, just like human hand-draw, which is much useful to motivate the imagination. While Wireframe skin is more clean and reality(More like the real website), and it is often used to demostrate the final result of the mockup process.

Skins of symbols can be switched in two ways:

  • Click the menu View -> Sketch Skin, or View -> Wireframe Skin.
  • Right click on the blank area of the canvas, a menu pops up, select the Sketch Skin or Wireframe Skin option.

The change of the skin will also make the stencil library to alter the styles of the symbols inside the panel.