Mobile Design Elements
Little Springs Design (soon, revised and switching to 4ourth Mobile style)
A bunch of mobile components (and some other info, like typography) for general mobile design, as well as gestures, and even iPhone specific stuff for the fanbois.
If you are still on Freehand (and we salute you) the old, not-at-all-updated version
Yahoo!
Yahoo! Stencil Kit many non-mobile parts, but also useful general and iPhone bits and pieces.
Nokia
Nokia Mobile Design Patterns Not really the same thing, as they are just articles, not actual things to use for drawning. If someone thinks it needs to go somewhere else, move it.
S60 Wireframing Stencils S60 (through 5th edition) elements of all sorts.
Graffletopia
Teehan-Lax
Library of iPhone UI Elements Photoshop library of iPhone-specific elements only, now the link to the all-new v4 library.
Smashing Magazine
*Library of Android UI Elements Photoshop library of Android (default) elements only.
Developer.Android
*http://developer.android.com/guide/practices/ui_guidelines/icon_design.html Icon Design Guidelines, Android 2.0 Includes ways to download their template pack and other useful stuff. Quite detailed for the graphic designer, for a change.
Documentation Templates
Lots of documentation styles will work. Use your favorite one, or...
Little Springs has a mobile-specific documentation style, but it is still project (client) specific as yet. When we get a chance we'll sanitize it, write it up and share it here.
Drawing Tool Tips & Tricks
Just a list that we keep for ourselves, so we don't forget things.
==Sharing Between Versions of InDesign== Newer versions can always read older .indd files. Do not save as an .inx file, as it just wastes time.
Downsaving creates an Adobe Interchange file with an .inx extension. This is a simple xml file that actually does work with all versions of InDesign (at least down through CS2), but has a limiter Adobe put in to annoy us all. To fix an .inx file created with CS4 to work with CS2 (and 3):
Open the INX file with your favorite text editor (like TextMate or BBEdit) and change the version number. Replace line number 2 (which looks like this):
'<?aid style="33" type="document" DOMVersion="6.0" readerVersion="5.0" featureSet="257" product="6.0(352)" ?>'
- with this:
'<?aid style="33" type="document" DOMVersion="5.0" readerVersion="4.0" featureSet="257" product="5.0(662)" ?>'
Stupid INDD Tricks
Things you might need to make InDesign work better, and which I could not easily find. Some are version specific.
There is no Clone (duplicate in place) function by default in InDesign. Three options:
- Copy, then shift-opt-cmd-v pastes in place, but is very cumbersome to me
- Better: opt-cmd-u is Step and Repeat. Opens a dialogue (which you can use to generally step and repeat) but which preserves last use. If set once to count 1, offsets all zero, then you just press enter and get a duplicate-in-place.
Best is shift-opt-cmd-d which is the Duplicate command. By default it does this at some offset or other. But this is controlled by the Edit > Step & Repeat menu item. You have to have something selected to set it, but like setting color or type style with nothing selected, it then sticks until you use step and repeat (even by accident) and change the offsets. Set vertical and horizontal to get a Clone function, if that is your thing.
- Tricky styles, as for underlines, to allow things like making reverses in type without separate boxes (as for scroll-and-select link indicators). Ask for details or look at the Mobile Design Elements document for examples.
- Text can be built into ANY box. Not always perfect, but good for some stuff, like form fields, title bars, etc.
Any box can be accidentally turned into a text box. Deleting text does not un-text-box it. To do that, right click on the element, Content > Unassigned.
- Eyedropper works opposite (to me at least) of Photoshop, etc. Select the item(s) you want to have the new attributes, then click the item you are sampling. Note you can sample a LOT of stuff, so check the settings first. I don't even follow how it works after this, so just press Option to clear the current attributes and start from zero again.
Collaboration: While the official collaboration tool points up their text focus, and is basically a collaborative workflow-based text editor, it has some other stuff that helps. Mostly, you can move pages from one open document to another. With planning (so you don't step on each other) this means chunks can be branched off to others and then merged back in. Tried it, and it works.
- GREP! Search and replace complexly. Also has attribute search and replace. Find a string, make it bold, etc.
- Deselect is not cmd-D as in Photoshop but shift-cmd-A for “deselect all” as in AI. Use it! Clicking away to deselect will often hit an invisible element, scooting it or turning it into a text box or something else I'll have to fix later.
- Text Box insets are cmd-B (shift-cmd-b is the bold switch). If you have a non-rectangle and need to just have the top come down, use the FIrst Baseline number to move it down. Often, a lot (won't move at all for 20-40 pts). Also, play with vertical alignment: can use Justify to set one piece of text top, one bottom, rather cleverly. Saves on nesting boxes sometimes.
Hidden commands in InDesign including the ever-useful Join command. This is about activating in CS2, but the basics are true. Many AI-level drawing functions are hidden away in the code, and can be used with keyboard shortcuts, or other trickery. Note: CS4 added several of these, such as the Join command.
Reset INDD to default: While pressing Shift+Option+Command+Control, start InDesign. Click Yes when asked if you want to delete preference files.
Stupid AI Tricks
Things you might need to make Illustrator work better, and which I could not easily find.
- Perspective-like distorting involves using modifier keys at specific times:
- Select whole shape, groups work fine.
- E (free transform)
- Start dragging a “downrange” corner
- Click Cmd to convert that corner only
- Click Cmd+Shift+Opt to move it and the corresponding pont with axial symmetry.
- Be sure to shorten also. I'd distort a square as your guide before doing any actual work, and keep both a distorted and original shape as your guide.