Introduction
Here is the manual for Interface Designer (ID). Please note, you should always use ID in palette mode. You can toggle between palette and normal modes by clicking the topleft orange square.
When you first open ID, it inserts a frontscript so you can know when you are in selection mode and an object is selected. You can toggle this frontscript on/off by clicking the small right triangle at the far right of the interface.
Clicking the small triangle at the top left of the interface allows you to turn off frontscripts and shrink the interface as well.
When in select mode, the 'ARROW' shows an orange background and the name of the object selected is displayed next to it.
When you first open ID, it inserts a frontscript so you can know when you are in selection mode and an object is selected. You can toggle this frontscript on/off by clicking the small right triangle at the far right of the interface.
Clicking the small triangle at the top left of the interface allows you to turn off frontscripts and shrink the interface as well.
When in select mode, the 'ARROW' shows an orange background and the name of the object selected is displayed next to it.
Interface Libraries
With version 2.0 of Interface Designer (ID), the content for ID is no longer stored withing the stack. You can now save and load different interface libraries as you like.
Use the New button to clear out all of the content in ID then add it using the different buttons in each tab. To learn more about adding content, please see the notes below for the tab you are wishing to add to. When you are finished, you can press the Save button to save you content to a named stack.
If you alt or option click on the Save button, it then acts as a Save As button.
To load a library different from the one you are using, press the Load Library button.
When ID launches, it looks for a stack called DefaultInterfaceLib.rev in a folder called altInterfaceLibs in the same directory as ID. If it finds it, it will then automatically load it. If there is none, it will prompt you to go online and download the default Altuit library. If you want, you can substitute the default stack with your own, just remember NOT to update it when pressing the Update This Stack button. When you press the Update This Stack button, ID will first look online for a newer version of the ID stack, then it will prompt you if you wish to replace the current default Interface Library with the Altuit default Interface Library.
Use the New button to clear out all of the content in ID then add it using the different buttons in each tab. To learn more about adding content, please see the notes below for the tab you are wishing to add to. When you are finished, you can press the Save button to save you content to a named stack.
If you alt or option click on the Save button, it then acts as a Save As button.
To load a library different from the one you are using, press the Load Library button.
When ID launches, it looks for a stack called DefaultInterfaceLib.rev in a folder called altInterfaceLibs in the same directory as ID. If it finds it, it will then automatically load it. If there is none, it will prompt you to go online and download the default Altuit library. If you want, you can substitute the default stack with your own, just remember NOT to update it when pressing the Update This Stack button. When you press the Update This Stack button, ID will first look online for a newer version of the ID stack, then it will prompt you if you wish to replace the current default Interface Library with the Altuit default Interface Library.
Image Library
The Image Library tab allows you to add special effects to the selected object. From here you can choose to add the following effects:
Border Effects
Lighting Effects
Textures
Line Effects
Gloss Effects
Please try each effect and see how it works. If you wish to add your own effect files, be sure and apply the proper prefix to the file you wish to add.
For instance, if you wish to add a new Lighting Effect which is a darker ramp left to right, you would create in Photoshop a black PNG file with a left to right ramp in the alpha channel and name it:
LE-DarkenLeftToRight.png
The LE- prefix is what is looked at to enable the image to be shown when viewing the available Lighting Effects.
Once the image is created, you can then import it using the + image button. After importing, please remember to Save.
Border Effects
Lighting Effects
Textures
Line Effects
Gloss Effects
Please try each effect and see how it works. If you wish to add your own effect files, be sure and apply the proper prefix to the file you wish to add.
For instance, if you wish to add a new Lighting Effect which is a darker ramp left to right, you would create in Photoshop a black PNG file with a left to right ramp in the alpha channel and name it:
LE-DarkenLeftToRight.png
The LE- prefix is what is looked at to enable the image to be shown when viewing the available Lighting Effects.
Once the image is created, you can then import it using the + image button. After importing, please remember to Save.
Colors
The Colors tab is used to change colors of selected objects. If you want to change the color of a card or stack, you should press the Card or Stack button to 'select' it.
You can also copy colors from one object to another by selecting the object, clicking the Copy Colors button, then selecting another object and pressing the Paste Colors button.
You can change colors of an object by clicking the color swatch next to the name of the color you are attempting to change. So, to change the foregroundColor of an object, click the rectangle to the left of the word foregroundColor.
You can drag/drop any color in the colors list to any color box for the properties. To reset a color, drag/drop the EMPTY color to the respective box.
You can add colors and delete colors to the colors list by using the +color and -color buttons. After editing the color list, be sure to remember and Save.
You can also copy colors from one object to another by selecting the object, clicking the Copy Colors button, then selecting another object and pressing the Paste Colors button.
You can change colors of an object by clicking the color swatch next to the name of the color you are attempting to change. So, to change the foregroundColor of an object, click the rectangle to the left of the word foregroundColor.
You can drag/drop any color in the colors list to any color box for the properties. To reset a color, drag/drop the EMPTY color to the respective box.
You can add colors and delete colors to the colors list by using the +color and -color buttons. After editing the color list, be sure to remember and Save.
Controls
The Controls tab allows you to copy preset controls and groups to your stacks. If you have a particular field or button you like to use, you can store it here and paste it into your stack when you need by pressing the copy to topstack button.
You can add and delete controls and groups by pressing the +control and -control buttons. After you edit the control list, please remember to Save.
You can add and delete controls and groups by pressing the +control and -control buttons. After you edit the control list, please remember to Save.
Alignment
The Alignment tab has a number of controls optimized for tweaking the position and rect of the selected object. The controls are organized in groups:
The Trim group
The trim group will move only the left,top,right, and bottom edges to another position as indicated by an orange trim guideline on the topstack. Here's how it works.
Let's say you want to expand a field so the right edge is aligned with the right of the card. You select the field, then press the Trim Right Edge button and an orange vertical line appears under your cursor on the stack where the object resides. Move the cursor all the way to the right. Notice the orange line 'snaps' to different object as it moves past them. Once the orange line is all the way to the right border of the card, click. Instantly the field will be stretched to match.
The Align group
The Align controls are much like the trim controls, but instead of stretching the control, it moves the control to the designated orange guideline.
The Match group
The Match controls will match the width, height, vertical center and/or horizontal center of an object to another object on the same card. Here's how it works.
Let's say you want to match the width of button "OK" to the same width of button "Cancel." Select button "OK" and then press the Match Width button. Drag your mouse over the "Cancel" button and when you see an orange rectangle over it, press down and instantly the "OK" button will be resized to match the width of the "Cancel" button.
The Reset group
This will reset an object to it's formattedWidth and/or formattedHeight
The Grow group
This will grow the edge of a selected object in the direction of the arrow pressed by one pixel. If you press the option or alt key while pressing the arrow, the selected object will shrink from the designated side. Shift-clicking on any of the buttons sets the increments to 5 pixels.
The Nudge Group
This nudges the selected object in the direction of the arrow pressed by one pixel. Shift-click to move by increments of 5 pixels.
Others
Copy and Paste button
This copies and pastes a copy of the selected objects.
Delete Selected button
Deletes the selected objects
The Trim group
The trim group will move only the left,top,right, and bottom edges to another position as indicated by an orange trim guideline on the topstack. Here's how it works.
Let's say you want to expand a field so the right edge is aligned with the right of the card. You select the field, then press the Trim Right Edge button and an orange vertical line appears under your cursor on the stack where the object resides. Move the cursor all the way to the right. Notice the orange line 'snaps' to different object as it moves past them. Once the orange line is all the way to the right border of the card, click. Instantly the field will be stretched to match.
The Align group
The Align controls are much like the trim controls, but instead of stretching the control, it moves the control to the designated orange guideline.
The Match group
The Match controls will match the width, height, vertical center and/or horizontal center of an object to another object on the same card. Here's how it works.
Let's say you want to match the width of button "OK" to the same width of button "Cancel." Select button "OK" and then press the Match Width button. Drag your mouse over the "Cancel" button and when you see an orange rectangle over it, press down and instantly the "OK" button will be resized to match the width of the "Cancel" button.
The Reset group
This will reset an object to it's formattedWidth and/or formattedHeight
The Grow group
This will grow the edge of a selected object in the direction of the arrow pressed by one pixel. If you press the option or alt key while pressing the arrow, the selected object will shrink from the designated side. Shift-clicking on any of the buttons sets the increments to 5 pixels.
The Nudge Group
This nudges the selected object in the direction of the arrow pressed by one pixel. Shift-click to move by increments of 5 pixels.
Others
Copy and Paste button
This copies and pastes a copy of the selected objects.
Delete Selected button
Deletes the selected objects
Other Controls
You can toggle the visible and lockLoc properties of an object by clicking the Visible and Lock Loc checkboxes on the upper right of ID.
You can move objects up one layer and down a layer by clicking the respective layer buttons to the right of the checkboxes. Shift-clicking the layer buttons moves the object all the way to the bottom or top.
You can move objects up one layer and down a layer by clicking the respective layer buttons to the right of the checkboxes. Shift-clicking the layer buttons moves the object all the way to the bottom or top.
Technology by: Altuit, Inc. | top