Antetype 1.4.1

Antetype 1.4.1 was released today it contains  bug fixes and two minor enhancements, you can download the release from within the Antetype using “Check for Updates…” or you can download it fully from:

http://antetype.com/download

Enhancements

* AT-1928 Create / Edit Widget Group – Disable Save field unless at least one tag is present
* AT-1924 not possible to search for multiple tags – use space or comma to separate tags

Bug fixes

* AT-1919 Crash in style inspector
* AT-1843 Crash when container is a GDCompositeFigure
* AT-1922 Bug Width/Height attribute in big files – improved performance
* AT-1854 non sRGB colours cause Color Picker Palettes to not work.
* AT-1917 Crash in drawing style bar – checking now for invalid selections
* AT-1919 Crash in style inspector
* AT-1918 Crash while using widget tag-editor
* Changed Type to Name in edit widget sheet

Antetype 1.4.0

We are pleased to announce the release of Antetype 1.4.0.

The 1.4 release of Antetype has been focused on one theme – Widgets. In Antetype 1.3 the groundwork was laid to overhaul the way widgets are managed and in 1.4 we have overhauled the standard widgets, widget inspector and widget organisation.

New Widget Inspector

The most noticeable change in Antetype 1.4 is the new Widget Inspector. All areas of this inspector have been redesigned to make working with widgets faster and more intuitive.

Widget Inspector - Antetype 1.4Widget Inspector - Antetype 1.4

At the top of the inspector we have moved the filters and to a menu. The top of the inspector switches between two views of the widgets:

  • Widgets in the project
  • Widgets in widget library

At the bottom of the new widget inspector you can now change the background color for the inspector (using the Antetype Color Editor) and resize widget previews. Resizing of widgets no longer results in a blank space left to the right of the widget previews.

Widget Previews – no more red dots…

The preview that is displayed for each widget in the inspector have been updated to focus on the visual aspects of the widget.

 

Widget_Inspector-9

The aspect ratio of the previews has been change to a rectangle because we have seen that most widgets used in Antetype tend to be wider than they are tall. This change optimises the space per widget and more widgets can now be shown within the widget inspector.

 

Widget_Inspector-10

Another change to the previews is that the name of the widget been removed from the preview by default and only shows upon mouse over.

 

Widget_Inspector-11The dot that displayed the status of the widget in prior versions of Antetype has been updated. The red dot that was visible on widgets that did not match the widget library version, has been replaced with a new (non-red) sync icon. Clicking on this icon brings up the context menu for the widget preview.

 

If a widget matches the version in the widget library then only when the mouse is over a widget does a circle icon appear for the context menu.

Organisation – Tags and Groups

In Antetype 1.4 it is possible to add tags to widgets.

Screenshot 2014-02-11 14.28.23

All widgets in the standard widget library are setup with a set of predefined tags, but any tag can be applied to a widget. When tagging a widget, autocomplete will prompt the user with the details of similar tags.

Screenshot 2014-02-11 14.30.37

Now that widgets can be tagged we have added new widget groups to the widget inspector. Each widget group can be setup to group widget that contain specific tags. For example a widget group can be created to show only widgets tagged ios7 and tablet. When Antetype 1.4 is first installed the default widgets groups compliment the standard widgets in the widget library.

N.B. Empty widget groups are hidden by default – but this can be changed in the widget inspector menu.

We have chosen tagging as the organisation solution for widgets because tags provide an open ended and flexible way for designers to organise their widgets. With our standard widgets we have chosen to organise by platform and control type, but widgets can be organised in any way. For example you might want to organise by project, client, year or even widget status (draft, in-review, approved etc) the choice is now yours.

N.B. Widget groups are configured and stored locally for each computer, if you would like to copy widget groups to other computer please see the file:

~/Library/Application Support/Antetype/widgetCategories.plist

Filters

The filters are now available in the menu for the Widget Inspector:

Screenshot 2014-02-11 14.35.18

Remove unused widgets

An oft requested feature for Antetype has been to be able to remove unused widgets in a way similar to the resource inspector’s remove unused resources. This is now possible from the widget inspector menu – “Remove unused from Project”

Look & Feel – reduced functions

Antetype 1.4 no longer allows the creation of new Look & Feels. This change is part of our plan to eventually remove the Look & Feel functionality within Antetype. Existing documents that have multiple Look & Feels will continue to work, but newly created documents can not contain multiple Look & Feels.

All the standard widgets from Antetype 1.3 are in a single Look & Feel. Using a single Look & Feel for all our widgets means that it is now possible to use widgets from different platforms in a single Antetype document. For example screens for iOS and Android can now be created in a single document and not two separate documents with alternate Look & Feels.

It is our plan to remove all Look & Feel support in a future version of Antetype and we making these changes to the functionality over a series of releases to make the change easier. If you are currently using Look & Feels in your documents and would like to influence our future plans – please contact us so that we can understand how best to support your needs.

Widget Library not Shared Library

A more minor change in Antetype 1.4 is that some items within Antetype have now been renamed and relabelled to remove confusion about their purpose.

In Antetype 1.4 the Shared Library is no more and has become the Widget Library. We have made this change to remove any confusion about the sharing of widgets. Widgets stored in the widget library can only be used across projects on the same computer and we believe this is more easily understood with the new name.

In the new widget inspector we have also updated the terms used when using the widget library. The terms update and revert have been replaced with “Send Changes to Widget Library” and “Get Widget Library Version”.

Over 400 new widgets

All new standard widgets have been redesigned in a single Look & Feel. This has meant each widget can have a reduced number of elements because the element hierarchy for each widget no longer requires styling elements for flexibility across different Look & Feels.

We recreated all of our standard widgets in Antetype 1.3, but the widgets were contained within the templates for each platform. In Antetype 1.4 the provided widget library contains all of the new standard widgets so that they are accessible without opening a template from a specific platform.

Bonus Feature: Faster upgrades of existing files

We let our focus on widgets in Antetype 1.4 slip for one single bonus feature. This feature is that the upgrade process for files has been greatly improved and users of larger files should notice that files are converted to the new format in seconds rather than minutes.

Release notes (including bug fixes)

Version 1.4.0 (201402110820)

Enhancements

  • Updated Shared Library & Templates
  • AT-1913 widget search field should use tags in search too
  • AT-1904 web viewer hides Look & Feels when only 1
  • Updated web viewer with clearer message about compatibility
  • AT-1850 Widget inspector select background using AT Color Well
  • AT-1880 widget group expansion state is now saved across application sessions
  • AT-1881 templates auto expand widget groups that match set of tags
  • AT-1882 various visual changes to the widget inspector
  • AT-1848 New data model that includes tags for widgets and faster upgrades from previous versions
  • AT-1850 Updated Widget inspector – with groups, new layout, two views for project and widget library widgets.
  • Removed ability to add look and feels
  • AT-1848 Add tags to widgets

Bug fixes

  • AT-1912 States in Style bar are shown incorrectly after All States used
  • AT-1897 Meta data and undo issues with templates
  • AT-1908 crash after delete widget, change app and press OK
  • AT-1892 Crash while updating widget library
  • AT-1856 Inspectors go missing in OS X 10.9 – inspectors auto sense if they are not visible and correct the situation
  • AT-1865 System locks with too many threads when comparing shared library upon opening a document
  • AT-1869 Visibility command was not working with undo correctly
  • AT-1610 auto-extend a trial if a new version is installed
  • AT-1853 undo / redo broken is template screen is used or when starting from a template
  • AT-1885 icons of previews are not correct
  • AT-1855 corrupt screen cache / templates directory causes a crash
  • AT-1857 nesting problem

Antetype 1.3.2 released

Antetype 1.3.2 was released today it contains only bug fixes, you can download the release from within the Antetype using “Check for Updates…” or you can download it fully from:

http://antetype.com/download

Bugs fixed in this release:

  • AT–1630 different angle conversion for webkit
  • AT–1846 size popover doesn’t open for multiple states
  • AT–1847 multiple widgets with different state combinations break style inspector and style bar
  • AT–1844 range out of bounds exception
  • AT–1845 up / down arrows and mouse wheel value changes do not respect non-editable fields in color editor
  • AT–1842 multi-select exceptions
  • AT–1841 max and min width in style bar should not be enabled
  • AT–1830 moving objects to just over the edge of the canvas results in sudden jumps in the canvas.
  • AT–1833 stetted screens did not revert correct after in-place presentations
  • AT–1835 duplicate command is now deactivated for table cells and rows – selecting a row in the screen inspector now selects the children
  • AT–1834 Style bar should now allow the layout of table to be set
  • AT–1836 Tables can not be dragged because selection happens on mouse down – selection is now on mouse up and tables can be easily dragged
  • AT–1837 Style bar fill – paste option not always enabled
  • AT–1838 Shrink resizing has been disabled for Free layouts – group command for free layouts now uses manual resizing and calculates first values

Speed up interaction editing with Antetype 1.3

At Ergosign (our parent company and full of avid Antetype users) the biggest boost to productivity from Antetype 1.3 has been the new In-Place Presentation mode and accompanying interaction tool.

In this post we will explain more about how In-Place presentation mode and the interaction tool can significantly speed up your workflow when working with interactions.

Testing and debugging interactions prior to 1.3

Once a project contains a few interactions the interactions need to be tested and it is useful to also debug those interactions so that they work as expected when different interaction paths are used.

Interactions are often used to show hidden or collapsed elements in a screen elements and prior to 1.3 these elements would appear in Full Screen Presentation Mode only. When a designer returned to editing mode it would take them a while to locate the hidden elements, which would then have to be made visible, edited and again hidden before returning to presentation mode to test again.

In projects with many screens starting presentation mode can take a while because Antetype builds all of the screens upfront so that screen changes in presentation mode can happen quickly.

An idea, some tests and a new feature was born.

The original idea for In-Place presentation mode came from a conversation between Felix (one of the developers) and one of our Ergosign users. The conversation started around the frustrations regarding updating and testing interactions and soon the idea of the run mode was born.

Felix realised that with some quick changes to Antetype he could create a feature that enabled users to switch into a presentation mode without going full screen and without loading all the other screens. This test build was tried by our team and the original user and some changes were then made so that editing was possible.

The basic In-Place presentation mode was added into an EAP build for 1.3 and via our regular EAP webinars we gathered feedback about how useful the feature what problems there were.

From the feedback it became clear that the usage of In-Place presentation was confusing people so we discussed ways to make it simpler and a new feature was born.

Speeding it all up…

In Antetype 1.3 there is no longer a need to start the Full Screen Presentation Mode to test and debug interactions. Instead of a full screen presentation a designer can choose to start an In-Place Presentation.

The first advantage of the In-Place Presentation is that it starts much quicker than a Full Screen Presentation because it doesn’t build all the other screens for a project.

The next advantage of the In-Place Presentation is that once hidden or collapsed elements are revealed Via interactions the user can change their selection tool to Direct Selection and the elements will stay revealed for them to edit.

in-place-presentation-take2

This is not only relevant to hidden or collapsed cells, but also the hidden states of a widget that can be revealed and edited without having to reset the active state of a cell.

in-place-states

Usage of the In-Place Presentation will speed up the building, testing and debugging of interactions in a project. I hope it now clear to see why our colleagues at Ergosign found this feature to be the most beneficial in Antetype 1.3.

Related Posts


This post is part of a series of posts about Antetype 1.3.

Antetype 1.3.1 released

We are pleased to announce the release on Antetype 1.3.1.

This is a bug fix release only, we have a separate post which details the larger changes in Antetype 1.3.0.

Bug Fixes:

  • AT–1823 Export Selected Cell not working for nested cells without clipping
  • AT–1824 Drag an inspector from the inspector dock and it disappears
  • AT–1826 Stretch height % in Size Style Editor would take minimum value when that was larger than current value – results in invalid %
  • AT–1827 Antetype window lost focus when color picker takes color from another app & Color Picker gives Black screen in OS X10.7.5
  • Fixed various bugs in templates
  • AT–1828 Combo box in text bar should not open the window upon first click
  • AT–1826 Zoom to width doesn’t centre the screen if the screen is not selected.

You can download this version from http://antetype.com/download or check for updates in your app.

Other changes in Antetype 1.3

Our recent posts have highlighted a lot of larger changes in Antetype 1.3, but there have been a lot smaller changes too. This post covers some of the smaller changes like JPEG export, re-set presentation mode, screen numbering on export and more.

JPEG Export

One change that has been often requested is to export assets in the JPEG format so we have gone ahead and added it to all export dialogs as valid format.

Export as JPG

New Context Menu

Context Menu 1.3
We have reordered and reorganised the context menu in Antetype 1.3 to make it quicker to find the functions that you need.

When you have a widget selected the list starts with the states of the widget.

Next come the Style Editors with the most common on the main list and the others in the More Styles sub menu. N.B.all single letter keyboard shortcuts for the Style Editors are shown in this menu.

Next come the pasteboard operations.

Then sub-menus for Group and Arrange.

Styles can be copied and pasted or copy the CSS text to style with CSS like the current selection.

Export will export the current selection as an image.

Create Specification is only active when widgets are selected and will create a specification screen for the selected widget.

The final entries should be self explanatory some have been grouped into sub-menus to reduce the menu size.

Re-organised Menus & new default toolbar

The View menu in the application has been altered to reduce the height of the menu now the new Style Editors have been introduced. The changes are not large, but some of the shortcuts (especially for the inspectors) have changed.

The default toolbar has been reorganised and now contains some new buttons.

Default Toolbar Antetype 1.3

A significant change is that the present button is now on the left and is a menu with two options now. There are new buttons for widgets and text and the screens button is now a menu that works with Screen Templates.

Alt key to highlight cells

The status bar has been introduced in 1.3 and using this with the alt key elements can be highlighted on the canvas as the mouse moves over the element names in the status bar.

This facility has also been added to the screen inspector so that when alt is pressed and the mouse passes over an element in the screen inspector it is highlighted on the screen.

Reset / Reload Presentations

When presenting in Full Screen the state of the prototype is changed as various interactions trigger changes in the User Interface. When presenting it can be useful to revert the entire prototype to the state it was to begin with and restart a user journey through the prototype.

This is now possible from the View Menu – Refresh Prototype (⇧⌘P). This causes the entire presentation to reset to the start, back to the original screen and rebuilds all screens.

Screen Numbers on Export

An often requested feature has now been added to the screen export dialog.
It is possible for the names of exported screen images to be prefixed with a number indicating the order they are in the document.

Screenshot_06_08_2013_15_49

In the example above the screens would be exported as:

  • 1 Home Screen.png
  • 2 A Detail Screen.png
  • 3 A Further Screen.png

Performance updates

A few performance updates have been included in Antetype 1.3 including:

  • Screen switching – screens are built for display via a cache to reduce the time it takes to rebuild a screen
  • Faster import of resources into the Resource Inspector
  • Faster switching back to the application – there was a pause (up to 30 seconds) when the widget inspector was active.

Scrolling improvements

Antetype 1.3 is now using the fading OS X scroll bar on the main canvas so that the scroll bars do not take up any space when they are not needed.

Scroll positions are now accurately remembered when you switch between screens so that you should be able to jump between two screens and retain your position in each screen.

Related Posts

This post is part of a series of posts about Antetype 1.3.

New Color Editor – Antetype 1.3

In Antetype 1.3 the Antetype Color Picker right is embedded directly within Antetype. Color Picking is done within the main Antetype window, without a floating panel, and color information is presented alongside other styling information in the Style Editors.

This post goes through our reasons for making the color picker inline and look at some of the benefits now we have done so.

The OS X Color Panel

The OS X Color Panel lets all apps provide a single consistent interface for selecting and editing colors in OS X. This brings a great benefit to user’s in that color picker techniques and workflows can be used across apps. For developers the work needed to add a consistent UI is minimal and so in general it seems that the OS X Color Panel is a win-win for developers and users.

OS X Color Panel

Not only does the Color Panel work in any OS X app, it can also be extended and 3rd parties can develop alternate interfaces for picking colors. Using this feature we developed the free Antetype Color picker for OS X to add our own user interface to the OS X Color Panel and therefore users can pick colors the Antetype way in other apps.

OS X Color Panel with Antetype Color Picker

The OS X Color Panel is configurable only as a floating panel. The floating panel is the same in look across applications and a single panel can be used for all aspects of color picking within an app depending on the selection.

In Antetype the OS X Color Panel is used with the Style Inspector with Borders, Background Color, Text Color and Shadows. Clicking wherever a there is an option to select a color results in either the OS X Color Panel becoming visible or becoming the key window. The changes made in the OS X Color Panel are then reflected in the Style Inspector and subsequently the document.

This approach has some downsides for the user.

The first is that when editing a color the user’s focus flows from the design canvas to the Style Inspector to the OS Color Panel and then back to the document to check the change. The Color Panel opens in the same place it was last closed and this can result in searching for the panel especially with a multi-screen setup.

When trying out various colors on a unique undo item is created for each color value that is tried.

Another problem is that switching between documents can result in the OS Color Panel not being paired with the correct color control, which can be frustrating and confusing.

Inline Antetype Color picker

One of our aims for Antetype 1.3 has been to increase the productivity of our users by enabling them to focus more on their content and not on the process of editing the content. We have written already about the new task focused Style Editors which have been designed to pop-up right next to the content to be styled when a designer needs them. It was clear with the Style Editors that having to set colors in the OS X Color Panel was going to be country to our aims so we decide to create an embedded version of the Antetype Color Picker.

The embedded Color Picker is now used in the following Style Editors:

Fill – Color

Screenshot 2013-12-16 15.01.51

Fill – Gradient

Screenshot 2013-12-16 15.02.53

Border

Border Style Editor Antetype 1.3

Shadow (Drop, Inner and Text)

Screenshot 2013-12-16 15.04.39

The embedded Antetype Color Picker no longer creates a huge set of undo entries as the user plays with different colors, only a single entry is created when the relevant Style Editor is closed.

The embodied Antetype Color Picker also allows you to “scrub” through values using your scroll wheel or two fingers on track pad and has the same features as all Style Editor controls.

OS X Palette access

During the EAP we received a lot of positive feedback with regard to the new in-line Color Picker. The consistent negative feedback we received was that people would still need to use the OS X Color Panel because of the ability to store palettes.

Screenshot 2013-12-16 14.53.45

So we have provided access to the OS X Palettes from the in-line color picker too.

Screenshot 2013-12-16 15.02.04

Support for the OS X Palettes is only read-only so it is only possible to choose colors that have already been setup in an OS X Color Panel, we will write more about how to do this in a separate post.

Keyboard Shortcuts

The keyboard short cuts for all of the various color pickers are covered in the Style Editor post.

Using the OS X Color Picker

For those users who still need to access the OS X Color Panel this is still possible via the Style Inspector.

Related Posts

This post is part of a series of posts about Antetype 1.3.

Navigation changes – Antetype 1.3

In Antetype 1.3 we have updated the ways that you interact with and navigate documents.

This post reviews the updates to navigation in Antetype 1.3 and reveals some hidden features that can speed up productivity.

Widget single state selection as default

One of the most noticeable changes in Antetype for long time users is that the default state selection has changed.

Prior to 1.3 each time a selection was changed Antetype would re-select all the states of a widget. This meant that changes to properties would be applied to all the states of the widget. This was confusing because on the design canvas only a single state of the widget is shown, but changes were being applied to all the hidden states too. The majority of the time a user normally works on a single state but Antetype was always changing the selection back to all states. The default to all states was frustrating, especially if the user hasn’t noticed the change and then applied a change to multiple states by mistake.

To improve the experience, especially for new users, we have changed the default selection to be the active state of the widget. When you want to modify all states of a widget you can change the selection using the state control in Style bar or the States selector in the Style Inspector.

Canvas operations work on all states

For some operations it makes sense to work on all states of a widget we have identified the following operations:

  • Changing the position of a widget
  • Changing the size of a widget
  • Changing the text of a widget

Style Inspector - State Selector

These operations can all be performed directly on the design canvas and when performed on the canvas the changes will be applied to all states of a widget regardless of the active state of the widget.
Should you have reason to make changes to any of these properties on a state by state basis this is possible from the Style inspector.

Panning

Another change to navigation in Antetype 1.3 is that the Spacebar can now be used to pan the canvas.

panning-at13

Two finger scrolling with a trackpad is also supported.

New Zooming options

Two new zoom options have been added in Antetype 1.3 to enable you to zoom to the width or full screen size. These options can be accessed from the View Menu > Zoom or from the zoom drop down in the status bar.

  • ^⌘0 Zoom to width
  • ⇧⌘0 – Zoom to screen
  • ⌘0 – Actual size

Pinch to zoom

Another change in Antetype 1.3 is that you can now use the two finger pinch gesture on a trackpad to zoom. When you zoom with a trackpad the focus of the zoom will be the position of the mouse pointer.

Keyboard zoom to selected element

Keyboard zooming works with the same shortcuts as before (⌘+ & ⌘-) the only change now is that the zooming will now be centred around the selected element(s).

Presentation mode zooming

All of the changes to zooming that have been outlined in this document are also available in presentation mode.

Presentation mode will now remember across screens your preference for zooming, so if you choose fit to width – all screens will fit to width or if you choose 134% then all screens will be at 134%.

This post is part of a series of posts about Antetype 1.3.

Text bar – Antetype 1.3

Two new editing bars have been added to Antetype 1.3, the Style bar and Text bar.

We have previously written about the new Style bar and this post focuses on the new features in the Text Bar.

Text bar - Antetype 1.3

The editing bars that have been added to Antetype in version 1.3 have been designed with two goals:
1. Provide designers with a quick method of browsing the properties of selected elements
2. Provide a quick method to edit common properties without the Style Inspector.

Enabling the Text bar

The Text bar is only displayed for cells that have text associated with them.
An element can be converted to show text in three ways:

  • Select the element and press ⌘+⏎, which starts text editing mode
  • Double click the element to enter text editing mode
  • Using the Style Inspector, find the Text input area in the Text section and enter some text

At-a-glance information

The Text bar provides a designer with all the information about the text properties of a selected element.
From the example above the following information can be seen:

  • Untitled__New_Blank_copy_ The font family of the text in the selected elements is Lucida Grande
  • Untitled__New_Blank_copy_ The font style of the text in the selected elements is Bold
  • Untitled__New_Blank_copy_ The font size of the text in the selected elements is 12
  • Untitled__New_Blank_copy_ The color of the text in the selected elements is black
  • Untitled__New_Blank_copy_ The text of the selected elements is left aligned
  • Untitled__New_Blank_copy_ The text of the selected elements has no text shadow
  • Untitled__New_Blank_copy_ The line height of the selected elements is set to Auto
  • Untitled__New_Blank_copy_ The text is top aligned
  • Untitled__New_Blank_copy_ Text wrapping is switched off for the selected text
  • Untitled__New_Blank_copy_ The selected elements do not use Rich Text

3 separate type face controls

One important difference about using the Text bar from editing in the Style Inspector is that the font information is displayed in 3 separate controls.
Not only does this change mean that the information about selected fonts is displayed in a more standard way, this also means that changes to font attributes can be more rapidly made.

If you have 3 text elements that are using 3 different families it is now possible to edit their font size with a single change rather than having to change each element individually.

This is also works if you have 3 elements in the same font but using different font sizes you can now change the font family or style and preserve the various sizes.

Multi select

When multiple blocks of text are selected the information about the different selections is displayed in the drop down lists for font family, font style, font size and line height.

The lists will have a blank entry but when the list is displayed it is possible to see which values are active in the current selection. The currently selected values all have a dash to their left to indicate the selection.

Rich Text

When rich text is selected the information in the text bar is reduced because we can not easily configure and control all of the formatting information that is held in rich text.

Further Reading

Read more about Antetype 1.3.

Find some hidden secrets in the new Style bar in Antetype 1.3 or the new Style Editors.

Read about the new navigation and selection possibilities with the Status bar in Antetype 1.3.

This post is part of a series of posts about Antetype 1.3.

Style Editors – Antetype 1.3

The Style Inspector in Antetype contains all properties that can be edited for any element in Antetype. Unless you have an enormous monitor it is not possible to see all of the entries in the Style Inspector and styling tasks often involves at least one scroll of the inspector and often groups must be expanded and collapsed.

In Antetype 1.3 we have introduced pop-up Style Editors than can be shown either in-place next to your content (using a keyboard shortcut) or from the new style bar with a button press.

Border Style Editor

This post covers the details of the new style editors and uncovers a couple of hidden features that will speed up workflows with Antetype.

Focused

In an effort to help designers focus on their designs we have created the style editors so that focus on a single styling tasks. We have Style Editors for these styling areas:

  • Visibility
  • Size
  • Fill
  • Border
  • Layout
  • Rounded Corners
  • Margin
  • Padding
  • Drop Shadow
  • Inner Shadow
  • Float
  • Text Color
  • Text Shadow

Each editor focuses on just the task in hand, so for example the visibility editor only has two controls one to select the visibility mode (Visible, Hidden or Collapsed) and another to control opacity.

The editors can easily be accessed from the Style Bar in Antetype 1.3 by clicking on the relevant buttons.

There is another way to open the Style editors though…..

Open in-place

It is also possible to open Style Editors using Keyboard shortcuts. When a Style Editor is opened using a keyboard shortcut rather than from the Style Bar it will open right next to the element to be styled within the document. By opening the Style Editor next to the selection there is less distraction and focus remains on the design.

There are two types of Keyboard shortcuts that will trigger the Style Editors to pop-up, modifier shortcuts and single character shortcuts.

Screenshot 2013-12-06 14.06.44

The modifier shortcuts work as standard Keyboard Shortcuts in OS X – they can be seen in the View menu under Inline Editors. Modifier Shortcuts can also be customised in the System Preferences for OS X.

Screenshot_2013-12-06_14.07.04-2

The single character shortcuts will only work when the main window in Antetype has the focus and are not customisable you can find these shortcuts in the Context menu.

Using Arrow keys and Scrolling to manipulate number fields

Unlike the Style Inspector the Style Editors have custom behaviour that allow any number fields to be manipulated with arrow keys or with the scroll wheel on a mouse or two finger scrolling on a trackpad.

All number entry fields in the Style editors will increase or decrease their values using the up or down arrows respectively. Using the shift key will jump the value by 10 rather than single digits.

A number field does not need to be the focused control either to have the value manipulated with a mouse or trackpad you can change the value by hovering over the control. Once your pointer is over the control then you can use the scroll wheel on the mouse or a two finger scroll on the trackpad to increase or decrease the values.

Single Undo Entry each time you use a Style Editor

An advantage of making changes using a Style Editor is that all changes that are while the style editor is open are grouped together into a single undo entry. This enables designers to try out many different values for style properties such as the exact colours in a gradient without polluting their undo list with hundreds of entries.
While a Style Editor is open changes can be reverted to their state prior to opening the Style Editor using ⌘ – Z or ESC.

Changes can be committed by clicking outside of the Style Editor or by pressing ⌘-⏎ or just ⏎.

Enable keyboard access to all fields in the Style Editors

The default System Preferences in OS X do not allow all controls in the Style Editors to be able to take the focus. This means that keyboard manipulation of segmented controls and stepper controls is not possible.

If you open System Preferences in OS X and Choose Keyboard and then Shortcuts you will see a preference for Full Keyboard Access – ensure that his is set to All Controls – see below.

Screenshot 2013-12-06 14.42.03

Further Reading

Read more about Antetype 1.3.

Find some hidden secrets in the new Style bar in Antetype 1.3.

Read about the new navigation and selection possibilities with the Status bar in Antetype 1.3.

This post is part of a series of posts about Antetype 1.3.

← Older posts Newer posts →

Archives