Drawing Tools & Templates

From MobileDesign

[edit] Templates

[edit] Mobile Design Elements

[edit] Little Springs Design

A bunch of mobile components (and some other info, like typography) for general mobile design, as well as some iPhone specific stuff for the fanbois.

[edit] Yahoo!

Yahoo! Stencil Kit many non-mobile parts, but also useful general and iPhone bits and pieces.

[edit] Nokia

Forum Nokia Mobile Web Templates
Nokia Mobile Design Patterns Not really the same thing, as they are just articles, not actual things to use for drawning. Include or not?

[edit] Graffletopia

Mobile UI Stencils for Omnigraffle

[edit] Teehan-Lax

Library of iPhone UI Elements Photoshop library of iPhone-specific elements only.

[edit] Smashing Magazine

Library of Android UI Elements Photoshop library of Android (default) elements only.

[edit] 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.

[edit] Drawing Tools

[edit] Moving from Freehand to InDesign

This section is a working summary of how Little Springs Design is moving from Freehand to InDesign (CS3 for now). It's mostly tips and tricks to get running as fast as possible without changing process much.

[edit] How to Import

[edit] Copy/Paste

Best way so far is to have FH-MX still able to open. Just copy and paste.

NOTE, at a certain (arbitrary-feeling) size, INDD will refuse to import as an editable item, and will place it as an EPS. You will have to copy and paste individual elements instead.

Also, type comes in outlined. Not editable, therefore. So you’ll have to separately add the type back in. Make sure you note this before closing your FH document, so you can copy and paste the type itself, separately and don't have to go fix it some other time.

[edit] Illustrator

Illustrator can import up to FH9. In theory. Crashes when I try. And not useful for us, because we’d still have to export everything to FH8 or 9 first.

Note that drag and drop is not supported. You have to use the Open menu inside Illustrator.

[edit] Open as PDF

There is no way to open PDFs, or directly import PDF objects. Doing so in INDD will simply place them instead. If you want un-editable items, like logos or images for page layout purposes, this is fine of course and placing images is a valid way to work.

Open into Illustrator. Drag and drop works. There is a selector for which page to open. If the document is too big, you can just make a copy of the PDF and use Preview or the full Acrobat editor to cut the number of pages to what you need to use instead.

Type from PDFs is generally editable, but is PDF’d, so is one line at a time and sometimes is broken before the end of the line. So not really, for long blocks. You may need to copy and paste type and remove additional lines or blocks to make it work right.

[edit] MOVE FROM AI TO INDD??

[edit] Things In Design (CS3 at least) does poorly or not at all, compared to Freehand

No Clone (duplicate in place) function by default. 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.

Duplicate places items with arbitrary offset. Cannot get them to align to original with simple shift-arrow movement.
Cannot align individual handles (points on a polygon) with each other or other items. Can manually move all you want, and can “align” by numerical values, but not with a single button push.
Handle-level dragging is different. If you want to manually drag an object wider, you can still use subsect tool to drag across the handles you want to move, and then drag or arrow them. BUT if you also intersect another object AT ALL (not just on the handles), you also grab it. And it will move in some manner (sometimes the object, sometimes the side of it... try it out).
No ability to set line spacing in anything other than the primary unit (pts). Percentages (good for scaling) and +/- (reduces math when also adding space in paragraph) are not available.
Cannot round corners easily. Have to convert to corner rounding mode.
Cannot set a text box to dynamically resize. Can auto-size it, but it’s a one-time action. Then you overflow and do it again.
Cannot set to Keyline mode (outlines only). So, cannot see invisible items, background items, etc. as far as I can tell.
Use caution with gradients. Two methods, which stack, so can cause unpredictable results. Also other oddities, so stop and ask or look it up if not doing what you expect.
Toolbar basically cannot be customized. Things can be removed, but nothing added with out (expensive) plugins. Some features that are useful (send to back…) are therefore only menu items or complex shortcuts.
Shape combining functions are hidden and oddly labeled. Object>Pathfinder. Add is Merge, Subtract is Punch, etc.
No inset command for text boxes. Can kludge it with offset and indent, but it's a kludge.
No invert function at all. No work around (switches colors as a lens effect).
Deleting ANY one point from a polygon opens the path. Path open/close is hidden under Object>Paths
As yet, no way to ungroup to get components of a shape directly (as if you want to manipulate rounded corners directly. Workaround: Duplicate shape, do not overlap. Object>Pathfinder>Add. Subselect the duplicated shape and delete it. Original is now released and individual points can be messed with.
Cannot apply attributes well to multiple items. If you want, say, to change text size on several items, you have to select the type in each individually; selecting the box and changing that attribute does nothing.
Live dragging (whatever it's called, where you get to drag the actual item, vs. a bounding box) is a bit obscure. Same method, hold it down for like 1 second, but no clear state change or anything.

[edit] Things In Design (CS3 at least) does poorly or not at all, which Freehand didn't do or do well, either

Does not open PDFs directly. Places them, but if you want to grab vectors to draw them in INDD, you have to open in AI, then paste.
Does not have a strict heirarchical inheritance model of paragraph and character style attributes. Example: if using a paragraph attribute with a type size, that part will only apply if you also zero out the type style. And there is no hint, like a +, to indicate it's not 100% applied. Though Freehand didn't have as robust a style support (as we used it) you might not notice this, but be aware anyway.

[edit] Things InDesign (CS3) does better than Freehand

Arrowheads point to the end of line segments.
Page numbering available without plugin.
Has easy to set up styles, especially for text. Use them! Note that paragraph styles have the ability to set shortcuts (keyboard shortcuts) but these are very limited and only work with the num pad. So not for laptops really.
Text styles are in a pulldown on the toolbar. So often easier to apply than manually picking the attributes individually.
Underlines appear on PDF creation when built as text attributes
Tricky styles, as for underlines, to allow things like making reverses in type without separate boxes (as for scroll-and-select link indicators).
Text can be built into ANY box. Not always perfect, but good for some stuff, like form fields, title bars, etc.
Eyedropper is much more capable, but WILDLY confusing. Biggest trick: option will clear the current attributes and make it a "normal" eyedropper 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.

[edit] Things that are just different, and not necessarily better or worse

Deselect is not cmd-D; shift-cmd-A. For “deselect all”
Text Box inset IS there, just hidden. Right click to get to "Text Frame Options." Inset is there somewhere.

[edit] Stupid INDD Tricks

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.
Reset INDD to default: While pressing Shift+Option+Command+Control, start InDesign. Click Yes when asked if you want to delete preference files.

[edit] Links, Guides, Other Stuff

Retrieved from "http://patterns.design4mobile.com/index.php/Drawing_Tools_%26_Templates"