ForeUI is an easy-to-use UI prototyping tool, designed to create mockup / wireframe / prototypes for any application or website you have in mind.

All posts tagged V4.0

ForeUI V4.0: Apply Shadow on Elements

Since version 4.0 beta, ForeUI supports shadow on all elements. In the tools panel you will see a new “Shadow” category, and there is a “Paint Shadow” checkbox that allows you to enable the shadow rendering. Once you enable shadow on element, you can also change the shadow color, opacity, offset, blur and spread.

shadow_options

All elements, including basic shapes and interactive controls can have their shadow. The shadow will also be applied in HTML5 simulation (thanks to the shadow attributes in CSS).

shadow_examples

Some UI themes may also apply shadow to certain elements by default, such as Window, Post-It and Balloon elements.

ForeUI V4.0: New Collapsable Tools Panel

If you are familiar with ForeUI, you will notice the tools panel is completely different once you open ForeUI V4.0. The picture below shows the differences.

new_tools_panel

 

We have to admit the old tools panel is more compact and can place more buttons within the same area. However, the new tool panel is better organized and allows you to collapse the categories that you are not frequently used.

collapse_category

ForeUI will remember the collapse state of the category, and will not expand it until you manually do so.  Depends on how you use ForeUI, you will have different preferences to show/hide certain categories.

The “Current Selection” category might be the most commonly used category, it is refactored in V4.0 and become more easy to use. Here you can see the number of elements that are currently selected, all their ids, who is the leading element etc. You can also rename the leading element here. By clicking the element id you can set it as the leading one. By clicking the small cross button you can remove the element from selection. The animation below shows the details.

change_selection

If you select a container element (Group, Window, Table, Tree, Tabs, Scrollable Container etc.), you will see another bar below the leading element id. Here you can choose the embedded element within the container by clicking the small right arrow beside the container name. Clicking on the embedded element can choose its sibling element (if any).

select_embed

We wish you like the new tools panel. If you have any question, please feel free to contact us 🙂