Articles for Artboard User Guide

Cascading “Shared” Styles

Artboard User Guide No Comments

To Enable Cascading "Shared" Styles

Advanced users can “share” styles that cascade across objects. If you’ve used Artboard version 1.6 or prior and have existing styles that you want to continue to be shared, activate this setting in the Artboard Preferences pane.

To enable shared styles, check "Enable Style sharing" in the Artboard > Preferences… Editing pane. If you want new styles that you create to be sharable by default, make sure "Styles are sharable by default" is also checked.

What are Shared Styles?

media_1351867483695.png

Artboard is smart about shared styles. When you draw several objects using the same style, they share the properties of that style. If you edit a shared style, the changes are applied across all instances of the style – in other words you will see the changes on all objects where the style has been used. In this way, changes to styles across multiple objects can be made very quickly and efficiently.

Create three objects in a row, and they will share the same style; adjust the style and it will automatically cascade across all three. You can break the style link between successive objects by clicking “Reset” to create a new style reset to the default, or "Clone" to create a new style based on the one currently in use.

The Format Bar provides quick access to simple fill and stroke style editing. Advanced “expert” styles, such as arrowed paths and gradient fills, are created using Artboard’s powerful Style Inspector and should be edited with the Style Inspector. Use the "Reset" and "Clone" buttons to create a new style and continue drawing without affecting the objects you’ve already drawn. Remember, shared styles cascade across drawing objects– if you edit a style without clicking "Reset" or "Clone" the changes will apply across all objects where the style has been used.

HINT: Styles in the built-in Mapdiva collection cannot be over-written – to edit styles in the built-in collection, use "Clone" to make a copy of the original. Editing a shared library style can have unforeseen consequences, including if the style is in use in other documents.

What Do "Reset" and "Clone" Mean?

What_Do_Reset_and_Clone_Mean.png

Use the "Reset" and "Clone" buttons in the Format Bar or Style Inspector to create a new style and continue drawing without affecting the objects you’ve already drawn. Remember, shared styles cascade across drawing objects – if you edit a style without clicking "Reset" or "Clone" the changes will apply across all objects where the style has been used.

To create a new style from scratch, click the "Reset" button. Artboard’s simple default style with a black stroke and gray fill is created. To customize the style, check or uncheck the "Stroke" and "Fill" style components and adjust the colors and settings as desired. Continue drawing.

To create a style from an existing style, use an existing style and click the "Clone" button. Clone will make a copy of the style you are currently using so you can make changes to it and continue drawing. Use clone, for example, when you want to change the stroke width but keep all other settings the same. Complex styles should be edited in the Style Inspector.

Working with SVG

Artboard User Guide 2 Comments

Opening SVG Files

In addition to its native Artboard file format, Artboard now supports opening SVG 1.1 files directly. SVG files are converted into Artboard files upon opening and can be saved as such.

To open an SVG file, choose File > Open from the main menu.

Importing SVG Files

wpid6895-Importing_SVG_Files.png

Importing SVG 1.1 files results in a fully-editable vector graphic that can be ungrouped and edited in any way you wish. Objects can be saved as clip-art just as any other graphic can within Artboard.

To import an SVG file into an existing drawing, drag-and-drop it from the built-in Image Browser or the Finder.

Important Notes About SVG Import with Artboard

It is important to understand how Artboard implements the SVG 1.1 standard, since in some cases results may differ from another product.

Artboard’s concept of graphic styles is rich and deep – substantially moreso than the classic “stroke and fill” concept of Postscript, which SVG largely mimics. Thus when importing SVG, we need to build graphic styles that match as closely as possible this simpler concept. By and large there isn’t much difficulty, but in some cases results will differ, because of a mismatch between the two approaches. This is most evident with gradient fills and pattern fills. Usually, these will work as expected and the visual result will be what you expect, but Artboard doesn’t strictly support the concept of SVG’s “global” (user space) gradients, for example, so when we encounter such a style, we do our best to translate it to something meaningful within Artboard that gives similar visual results.

Artboard implements the SVG 1.1 standard, and ignores any and all non-standard comments that other applications frequently use to “help out” when parsing SVG. This can be another source of discrepancy between Artboard’s interpretation of an SVG file, and another application’s. This is particularly problematic with files created by Inkscape, a popular open source application, since that heavily salts its SVG files with comments only it understands, and are not part of the SVG standard. The resulting files may fail to open entirely as expected in Artboard, though in practice we find we do get good results most of the time.

Mac OS X includes an SVG parser as part of WebKit and QuickLook uses this to preview SVG graphics in the Finder and elsewhere. Artboard doesn’t rely on this parser, but implements its own in order to convert SVG objects to equivalent Artboard objects and styles, not simply to render the graphics as an image. In some cases, the QuickLook parser fails to render an image at all, yet the file will import just fine. At other times, the small differences in rendering mentioned above may be evident.

Artboard’s Image Browser uses Artboard’s own parser to render the thumbnail previews for SVG files, so what you see in the Image Browser is what you get when you import the file. Artboard’s parser is not just rendering the graphics however, it is converting them to Artboard objects, then creating the image. This makes it slower than a pure SVG renderer such as QuickLook. The Image Browser therefore creates each thumbnail image asynchronously using a background thread, and as each conversion is completed it “pops” into view. Subsequently the image is cached on disk and will be displayed quickly. Therefore expect a folder full of SVG graphics added to the Image Browser to take a while to process the thumbnails at first. We also recommend keeping the number of files in a folder down to something reasonable (a few hundred, say) to avoid the thumbnail generation going on for extended periods which could interfere with your workflow.

Sometimes an SVG file may fail to import. This can be for many reasons, such as bad data in the SVG, unsupported elements, missing external resources, or simply because the import takes too long due to the file being very complex. In the Image Browser, you’ll see such failed imports as a file icon like this:

wpid6896-media_1338949872320.png

Such failed imports are reattempted when Artboard is run another time and the Image Browser is shown. When dragging and dropping an SVG into Artboard, a failed import will cause the drag to “spring back”. When opening a file using Open…, an error message is shown.

Imports that timeout may sometimes succeed if tried again. Usually a timed-out import indicates a graphic that would be too complex to give reasonable performance subsequently. There are several possible reasons for this:

• A very large number of paths
• Paths having extremely large numbers of points
• Heavy use of blur filters
• Heavy use of shadows.

When creating SVG graphics, it is very easy to assume that objects can be duplicated and reused at will. Unfortunately that is often not the case. We have seen many cases of SVG artwork where objects have been repeatedly duplicated and yet effectively contribute nothing to the finished graphic. If such hidden objects have blur filters applied, or shadows, then a huge performance penalty is being incurred for no good reason.

Frequently, paths can be combined into a single object and have a shadow or blur applied just once in order to maximise performance. Giving performance some thought when creating graphics can make life much easier later.

An occasional source of difference between Artboard and another SVG application is with text rendering. SVG does not embed the fonts it refers to, so if an SVG file references a font that is not available on your system, Artboard will substitute Helvetica of the same size. Other SVG parsers sometimes just give up or skip the text when this font problem is encountered. While we try to plough on, obviously the results may not be what you expected. I you want to use a fancy font in a graphic, it is good practice, once you’re done editing the text, to convert it to a path so that this font problem won’t be an issue. Note that this does not apply to PDF export from Artboard, since PDF does embed the fonts it references.

When Artboard imports SVG text elements, we convert them to a graphic, for best visual fidelity. That means the text can’t be edited as text, though the graphical paths can be.

Making the Most of Your Apple Color Picker

Artboard User Guide Comments Off

To Open the Colors Panel

wpid6838-To_Open_the_Colors_Panel.png

Perhaps no time in history has it been easier to access such a rich array of colors and palettes. The Colors panel is used to change colors in Artboard.

To open the Colors panel, click the Colors icon in the menu bar or choose Window > Colors from the main menu. Note that the Colors panel is also used when changing colors in the Fonts panel and Style Inspector.

The Colors panel provides multiple ways to specify, select, and save colors for your drawing. The following sections describe each of these methods.

To Drag-and-Drop Colors

You can apply the colors you choose in the Colors panel to simple object styles on the page. Drag and drop color from the Colors well directly onto the object. Dropped colors will “bucket-fill” objects to replace a fill color that was previously applied. It will change the color of outlines on objects with stroke styles but no fill. It will change the top stroke color on lines with cased line styles or other multi-stroke effects. Drag and drop color can also be used on text.

In all cases, when a color is quick-dropped onto a object, the style of that object is replaced with a new ad-hoc style. This avoids unintentional changes to master styles in the Library.

To Use the Color Wheel

wpid6843-To_Use_the_Color_Wheel.png

Across the top of the Color window are a series of icons. The first icon opens a Color Wheel that allows you to pick the hue and saturation from the wheel, the value from a slider on the side, and adjust the opacity/transparency from a slider on the bottom.

To Pick Up Existing Colors from Your Drawing with the Magnifying Glass

The Color Picker Magnifying Glass is a great color tool for accurately picking colors from an existing drawing. Choose the magnifying glass and move your cursor anywhere on your screen. It magnifies the pixels below it, and allows you to pick the color of any pixel anywhere.

Use the magnifying glass to pick colors off of existing symbols and styles, photographs, art images, inspiration maps, or other color palettes you have found.

To Save Colors in the Swatch Drawer

wpid6839-To_Save_Colors_in_the_Swatch_Drawer.png

Open the Swatch drawer at the bottom of the Colors panel by dragging on the bottom drawer knob. Save colors you are working on by dragging them to the swatches. Delete swatches by dragging a white swatch over them. You can save up to 300 temporary swatches at one time (open the Colors panel and the drawer to the maximum size to see all 300 swatches.)

To Use Color Sliders

wpid6841-To_Use_Color_Sliders.png

The second icon opens the Sliders portion of the picker, where sliders control all the normal color picking schemes: Gray Scale, RGB, CYMK, and HSB. Numeric values representing color can also be entered.

Hint: CMYK colors are typically recommended when you are creating a graphic for publication and want precise control over the printed colors. All colors used throughout Artboard are calibrated and subject to a color-controlled and calibrated workflow if you use one.

To Use Color Palettes

wpid6840-To_Use_Color_Palettes.png

The third icon opens the Color Palettes portion of the Color window. When considering a new color scheme or creating a new series of styles and symbols, Color Palettes is a great place to start. Color lists are presented from a drop-down palette menu. There are a few default color palette lists, including Web Safe Colors.

The strength of the Color Palettes is that you can make your own. Use the Magnifying Glass to select just the right colors. This is an excellent way to put a consistent set of colors at your fingertips. Additionally, color palettes created here can be shared with others and are available in all other applications that use the Colors panel (your List and Image Palettes are stored in the ~user > Library > Colors folder).

To create your own color list, choose New from the action menu. A new unnamed list will be opened, containing only the color currently in the large color well at the top of the window. Rename the list using the action menu.

Using any of the color selection methods described below, drag-and-drop colors from the color well or a mini-well in the bottom Swatch drawer into the list window. Alternatively, select a color and click “+” below the list window to add it to the list. Repeat selecting colors using any method, adding colors to the list.

Double-click on list items to give each of the colors a meaningful name. You can easily find colors by typing part of the name into the Search field below the List window.

To Use the Image Palette

wpid6844-To_Use_the_Image_Palette.png

The fourth icon opens the Image Palettes. The Spectrum Palette is loaded by default, but you aren’t limited to it. You can open any picture you have, and use it as a palette, by choosing New From File or New From Clipboard from the Palette menu below the picture. You can also drag-and-drop images directly from the Image Browser into the image-well.

Once you have one, you can pick any color from within it, just by clicking. Or you can drag and watch the colors change. A tiny white square will show you exactly where you are. Drag-and-drop colors from the large color well to the bottom Swatch drawer for later use.

To Use Crayon Colors

wpid6842-To_Use_Crayon_Colors.png

The Crayon picker lets you quickly select from 48 basic colors. The Crayon colors are used for Artboard’s basic fills and strokes in the Styles & Clip Art palette.

The Format Bar

Artboard User Guide Comments Off

Using the Format Bar

wpid7180-The_Format_Bar.png

The Format Bar sits above the horizontal ruler and provides quick access to create and edit simple fill and stroke styles.

The Format Bar is visible by default with the Rulers. If your Format Bar is turned off, choose View > Show Rulers & Format Bar from the main menu. The format bar provides access to simple stroke style components: color, stroke width, dashes, end-caps and corner joints; and fill style components: color and shadow.

NOTE: Advanced "expert" styles should be edited within the Style Inspector. The Format Bar does not provide access to advanced style components, such as gradients, arrows, or "stacked" styles available in the Style Inspector. To create or edit complex styles, open the Style Inspector.

Remember the Basics: Drawing Tool + Style = Draw

  • To draw with a style you create, choose a drawing tool from the Tools palette and draw a shape or path.
  • To format a simple style, click the checkmarks in the Format Bar to turn stroke and fill on or off as desired. Click and hold the color-wells to display the color array, or click once on the color-well to open the Colors panel. Set line width with the drop-down line width list or the slider. Continue drawing with the style you have defined.
  • To change styles, edit the style properties in the Format Bar and continue drawing.
  • To reset to the default style, click the "Reset" button in the Format Bar, edit the style, and continue drawing.

Note, the Format Bar is designed to provide quick access to simple fill and stroke styles. See "Using the Style Inspector" to edit complex styles, such as those containing arrows, hatches, patterns, or gradients.

Getting Started » Artboard Quick Start Guide

Artboard User Guide Comments Off

What is Artboard?

Artboard is affordable vector-based drawing software that is simple to use to get you going fast, yet powerful enough to meet your everyday drawing needs. Unlike raster-based paint programs, vector drawings are composed of editable stacked objects and are infinitely scalable.

Artboard User Interface

wpid7137-wpid-Artboard_User_Interface.png

Artboard provides a clean user interface consisting of a drawing canvas, toolbar, and layer list. Access functions through the main menu located along the top of the screen. In the main window, the toolbar provides quick access to commonly used palettes and functions. To customize the Toolbar, right-click it and choose “Customize” from the contextual menu. The layers list shows three default layers (Drawing Layer, Guides and Graph Paper) when opening a new empty drawing file. Additional layers can be added by the user.

Tools are used in combination with the Format Bar, Styles Inspector, and Styles & Clip Art palette. The Styles & Clip Art palette contains over 1700 editable clip art and styles organized into Collections and Categories.

To draw with Artboard: Drawing Tool + Style = Draw

wpid7138-To_draw_with_Artboard_Drawing_Tool___Style___Draw.png

To draw with Artboard, choose a drawing tool, choose a style from the Styles & Clip Art palette or create your own, and draw.

To change styles, select a new style from the Styles & Clip Art palette, or edit your style in the Format Bar. Advanced style components, such as arrowed and tapered strokes, gradients, and pattern fills, are available in the Style Inspector. In the following sections we’ll explore everything from how to set up your drawing to using expert “stacked” styles. Additionally, the Learn Artboard video series is available from our website.

Overview: How To Use It


Drawing Setup

Click to Play Video Topics Covered:

  • Drawing size & units
  • Optional background color
  • Graph Paper settings
  • Guide lines
  • Snap-to Grid and Guides

When you first open Artboard, you’ll see a new blank document. Open the Template browser to select a template, or open the Drawing Setup dialog to set your dimensions, drawing units, and more. Read along…»

Drawing Objects

Click to Play Video Topics Covered:

  • Simple direct controls
  • Special shapes
  • Numeric input
  • Bezier paths
  • Text and text on path
  • Combining shapes

Use over 20 simple and direct drawing tools, including special shapes, flowing paths, and beautifully rendered text. All shapes and paths have simple, direct controls to move points, curve handles, resize, rotate, change corner radius, and more – all with a single Select tool! Read along…»

Layers

Click to Play Video Topics Covered:

  • Drawing on discrete layers
  • Managing layers and objects
  • Graph paper
  • Guides

Artboard uses layers to keep your drawing organized. Think of Artboard’s layers like a stack of tracing paper (or transparent mylar). Just like drawing on paper, each layer can hold multiple graphics in your drawing. Read along…»

Clip Art

Click to Play Video Topics Covered:

  • Styles & Clip Art palette
  • Grouped objects
  • Library Manager

Clip art are organized into Collections and Categories. Each category can contain either clip art or styles, or both. The Styles & Clip Art palette toolbar drop-down menu lets you view the collections by category. To add clip art to your drawing, use the Clip Art Stamp tool with clip art, or drag clip art directly from the palette on to your drawing canvas. Read along…»

Drawing With Style

Click to Play Video Topics Covered:

  • Format Bar
  • Styles & Clip Art palette
  • Style Dropper tool
  • Style quick “pick-up”

The Format Bar provides quick access to simple fill and stroke style editing. To change an object’s stroke or fill color, click onto the color-well to reveal a drop-down grid of colors, or quick-click the color-well to open the Colors panel. Read along…»

Expert “Stacked” Styles

Click to Play Video Topics Covered:

  • Style Inspector
  • Stacked Styles
  • Style Components
  • Saving Styles

Artboard stands apart with powerful “stacked styles” that go way beyond simple fill and stroke, providing a wide range of spectacular effects. Open the Style Inspector and have fun experimenting with expert styles. Read along…»

Power Features

Click to Play Video Topics Covered:

  • Cascading “Shared” Styles
  • Breaking the style link among objects

Artboard is packed with power. Advanced users can take advantage of Artboard’s cascading “shared” styles that cascade across objects. Create three objects in a row, and they will share the same style; adjust the style and it will automatically cascade across all three. Read along…»

Add Images & Import Files

Click to Play Video Topics Covered:

  • Image Browser
  • Picture Taker
  • Importing and opening SVG files

To import images into your drawing, drag images or SVG vector files from the Image Browser directly to your drawing canvas. Artboard imports PNG, JPG, non-editable PDF, and TIFF images as well as vector SVG files. Read along…»

Image Editing

Click to Play Video Topics Covered:

  • Simple Mask & Crop
  • Mask & Crop with complex shapes
  • Effects

To mask and crop an image, double-click it with the Select [s] tool to make the image active for editing. Grab the image bounding box corners and adjust its bounding box. Read along…»

Save, Print & Export

Click to Play Video Topics Covered:

  • Auto-save and Save As
  • Page and poster-tiled printing
  • Export entire drawing
  • Limit export to selected objects

Artboard is optimized for Mac OS 10.8 “Mountain Lion”, including full screen, resume, autosaving and versions (these features require at least OS 10.7+ “Lion”). Auto-save will periodically save your work for you. Read along…»

System Requirements

  • Qualified for OS 10.8.x Mountain Lion
  • Mac OS X 10.6+ (Snow Leopard) or later (10.7+ required for full screen, resume, autosaving and versions features; MacBook Pro with Retina display required for Retina display icons)
  • Core Image supported graphics card

Recommended

  • 2 GHz Intel processor
  • 2+ button scroll mouse
  • iSight/FaceTime Camera or Web cam (required for Picture Taker feature)
  • Magic Track Pad (required for zoom gestures)

Pen Tablet Support (optional)

  • Freedom to hand-draw – a simple, easy, and fun way to harness your creativity

Artboard includes a selection of pre-designed templates to create fliers, invitations, signs, and business cards. Choose a template, or click New Blank Document… to setup a new drawing. You can also access this dialog by choosing File > Drawing Size & Units… from the main menu.

To set your canvas size and drawing units, choose the units from the drop-down menu (millimeters, centimeters, inches, points). Accept the default canvas size, or enter your own width and height. Optionally, add a background color or texture. Your personal settings can be saved as the default setup for new documents.

Graph Paper settings, including grid line spacing and color scheme, can also be adjusted. As desired, adjust the grid spacing and color scheme, and make the graph paper layer visible. To make your objects snap to the graph paper as you draw, choose Graphic > Snap To… > Graph Paper from the main menu. You can also change your Preferences to snap to Graph Paper whenever it is visible.

You can add guide lines to your drawing by dragging them to and from the Rulers. Guide lines are placed on their own layer, which can be shown, hidden, and adjusted; after adding guides, click back onto one of your drawing layers and continue drawing. To make your objects snap to the guides as you draw, choose Graphic > Snap To… > Guides from the main menu.

In the next video, we’ll learn how to use Artboard’s simple and direct drawing tools.

Choose a drawing tool, choose a style from the Styles & Clip Art palette or create your own, and draw. We’ll learn more about working with styles in the upcoming sections.

Hold the SHIFT-key to maintain the aspect ratio while drawing and resizing shapes. Hold the CMND-key to draw shapes out from center (modifier keys can be used in combination). Use the Select [s] tool to move the rotation knob to rotate. You can hold the SHIFT-key to constrain angles while rotating. Double-click any shape to convert it to its path (and vice-versa) for “quick edit mode.” While editing paths, you have full control to add, move, rotate, and nudge path points and handles. Use the Add Point and Remove Point tools as desired.

Artboard’s special shapes include Round Rectangles, Arcs, Wedges, and Regular Polygons. Use the Select [s] tool to make direct adjustments to these special shapes, such as corner radius, arc angle, tips, valleys, radius, diameter, and more.

Get precise control for object width, height (or length), and position using Artboard’s Geometry panel. Additional settings are available for all Artboard special objects, and opacity is supported for image shapes.  Use the Toolbar to access commonly used functions.

Bezier Paths [b] are among the most powerful drawing tools, but may be least familiar to some users. If you need some practice, you can find hands-on exercises in Artboard’s Templates (File > Templates > New From Template…). To draw a curved path, click-hold-drag the curve handle away .. click once to add a corner point, use the Delete-key to remove the last-placed point, double-click or use the Esc-key to end your path. Use the Select [s] tool to edit a path. You can hold the CMND-key to drag a handle away from its point and to move curve handles independently; Hold the SHIFT-key to constrain the angle of the curve handle while you draw, and hold the Option-key to adjust curve handles synchronously. Right-click the object to access its context menu for more options.

Add beautifully rendered text with the Text Box [t] tool. Drag the text box object handles to resize text boxes. Use Text On Path tool for elegantly curved text paths. Double-click text with the Select [s] tool to edit. The Fonts panel offers font selection and custom effects, including outline, shadow, and mask. Align, kern, change case and baseline are available options. Font effects and options can be applied to blocks of text, individual words, and and even individual glyphs! For full creative control, including applying styles and distortion, you can convert text to shapes, shape groups, and paths.

The Artboard toolbar provides quick access to align objects and change their drawing order. Select the objects and click the available icon. To customize your toolbar, right-click it and choose “Customize…” from the contextual menu.

Quickly create interesting and complex objects by combining two or more shapes using Artboard’s advanced Boolean operators. When you have two or more objects selected, the Union, Intersect, Difference, and Append commands are available in the toolbar.

In the next video, we’ll learn more about Artboard’s layers to help keep your drawing organized.

Layers are discrete like paper – multiple objects are not selectable across different layers. Add new layers and layer groups as desired. Click a layer name to make it active and work with objects on that layer. For example, you can place an image on one layer, then use another layer on top to draw features. Move objects among layers using the Layer menu commands.

Artboard’s automatic Graph Paper features standard cartesian and isometric grids based on your customizable grid settings. To change the grid settings, choose File > Graph Paper Settings… from the main menu, or right-click the Graph Paper layer. To keep objects and text aligned to the graph paper grid, choose Graphic > Snap To Grid from the main menu. If you’d like Snap To Grid to always be the setting when the Graph Paper is visible, you can set that preference in the Artboard > Preferences menu.

Layout is a key element to good design. Guides are used extensively during layout to keep objects properly aligned. Guides are placed on a Guide layer.

With the Rulers visible (View > Show Rulers & Format Bar from the main menu), drag from a ruler onto your drawing canvas. A guide will be placed. Constrain guides to the Graph Paper divisions by holding the SHIFT key while moving a guide. Multiple guides can be placed, and the layer can be made visible or hidden from the layers list. Guides are not printed. To keep objects and text aligned to the guides, choose Graphic > Snap To Guides from the main menu. Drag a guide off the canvas area onto a ruler to delete it. When you’re finished, click back onto a drawing layer to make it active and continue drawing.

In the next video, we’ll see how easy it is to use Artboard’s clip art collection.

Clip art can be moved, resized, rotated, and completely edited. Note, clip art may need ungrouped in order to be edited. All clip art except country flags are fully editable.

Any art work that you create can be saved as clip art to your User Library. As needed, make sure objects are grouped before saving as clip art. Choose Edit > Add Clip Art To Library from the main menu. Use the Library Manager to keep clip art organized. Here you can add new collections, organize styles and clip art into categories, and more. Artboard delivers with over 1700 built-in styles and fully editable styles and clip art. Built-in styles and clip art are locked to prevent changes to the originals, but can be used as-is, cloned, copied, and made your own.

In the next video, we’ll learn how to draw with style.

Click “Reset” to reset the style to the default black stroke and grey fill.

Please note that advanced “expert” styles, such as patterned and gradient fills, are created and edited using Artboard’s powerful Style Inspector.

To draw using the built-in styles, open the Styles & Clip Art palette:

  • Choose a drawing tool, choose a style from the palette, and begin drawing
  • To apply a different style to an existing object, select the object(s) in your drawing and double-click a style from the palette
  • Alternatively, drag styles directly from the palette onto shapes and paths
  • Use the toolbar drop-down menu to view the collections by category; each category can contain either clip art or styles, or both

Use the Style Dropper tool to pick-up and drop styles from one object onto another. For “quick pick-up” of styles that are already in use, hold the CMND-key while drawing and click on an existing object to pick-up its style and keep drawing.

In the next video, we’ll have some fun building expert “stacked” styles using Artboard’s Style Inspector.

Click “Reset” to create a new style based on the default, or “Clone” to create a new style based on the one currently in use. Create awesome style combinations, such as multi-stroked paths; tapered, rough, and arrowed paths; gradients, patterns, and hatched fills; filter effects groups; and more. Click the “+” button to add new components from the drop-down list. Drag-and-drop to re-order style components. Right-click to copy and paste components. Click “New” to reset the style to the default.

As desired, you can name, add an optional description, and save your styles to “My Library” for later use.

In the next video, we take a quick look at how power-users can use cascading “shared” styles for lightning-fast changes.

So, if you edit a shared style the changes are applied across all objects where the style has been used. In this way, changes to styles across multiple objects can be made very quickly and efficiently.

You can break the style link between successive objects by clicking “Reset” to reset to the default style, or “Clone” to create a new style based on the one currently in use.

To enable shared styles, go to Artboard > Preferences… Edit tab and click the check box to “Enable shared styles.” Optionally, check “Styles are sharable by default” to have new styles that you create automatically have the shared setting active.

In the next video, we’ll learn how Artboard opens and imports files.

You can also choose File > Take Picture… to add a picture from your FaceTime camera. If an image is larger than the Artboard canvas size, it will be scaled to fit the canvas (though can be rescaled in the Geometry panel). You can even drop pictures directly onto Artboard shapes to fill the shape with the image. The Image Browser provides quick access to your iPhoto, Pictures folder, and Smart folders, and you can attach other folders as desired.

In addition to its native Artboard file format, Artboard also opens editable vector SVG 1.1 files. SVG files are converted into Artboard files upon opening and can be saved as such. Note, some SVG files that include filter extensions may not open properly.

In the next video, we’ll check out Artboard’s sweet image editing capabilities.

Move the slider to scale your image. As needed, click and drag the image to reposition it inside its bounding box.

To adjust an image’s properties, such as exposure and saturation, double-click it with the Select [s] tool to make the image active for editing. Adjust the image properties in the image editing dialog, or choose from a variety of image preset effects.

You can also mask and clip images with complex shapes using the traditional “Intersect” Boolean operator. HERE’S HOW…

In the next video, learn all about how to save, print, and export your drawings.

Choose File > Save a Version to manually save your file. Choose File > Duplicate to create a new file that is a copy of the current file. You can also save any document as a template file for later use. Choose File > Save Copy As Template… Note, if you prefer not to use Autosave and Versions you can disable it under Artboard > Preferences > Options.

Artboard’s flexible layout offers single page and “poster-tiled” printing. Choose File > Print to open the print dialog. Click Show Details to reveal the print options, including “Fit to Single Page,” “Graph Paper,” and “Crop Marks.” Your drawing canvas can be larger than your actual printer paper size – if it is larger you can either “poster-tile” print your drawing over multiple sheets (default), or “Fit to Single Page” when printing. To make sure your printer is set with the proper paper size and page orientation, choose File > Page Setup… before printing.

[[If you need to setup your drawing to print to a specific paper size, enter the paper dimensions and check “subtract paper margins.” This will fit the drawing canvas within the printable area of your paper. Before printing, make sure the printer “Page Setup…” has your paper size and page orientation. Note, your drawing canvas can be larger than your actual printer paper size – if it is larger you can either “poster-tile” print your drawing over multiple sheets, or “shrink-to-fit” when printing.]]

Choose File > Export… to export for web and print using the most popular raster formats – PNG, JPG and TIFF resolutions from 72 to 600-dpi; and editable vector PDF files (the native AI file format). TIF, PNG, and PDF support alpha-transparent backgrounds. Export your entire drawing or just your selected objects. Additionally, Artboard supports copy and paste or drag-and-drop graphics between popular productivity applications, such as iWork™ Pages and Keynote.

Preferences

Artboard User Guide Comments Off

Open Preferences

The Preferences window is found under Artboard > in the main menu. The menu is tabbed for Editing, Performance, Options and Switches preferences.

Editing

wpid7266-Editing.png

Automatically close paths
When drawing Irregular Polygons, Bezier Paths and Freehand Paths the paths will automatically close when you finish a path at its starting point. Uncheck this setting if you prefer paths not automatically close (default – checked).

End points of closed-loop paths treated as a single point
Paths whose end points are coincident are treated as a single point when moving them or their control handles.

Return-key inserts a new line when editing text boxes
Changes the default behavior so the Return-key goes to new line when editing text boxes. By default, when editing text boxes use the key combination CMND-Shift to go to next line; Return-key ends text editing.

Allow inline images in text boxes
Images can be dropped into text boxes from the Image Browser, becoming in-line with other text.

Display feedback window when dragging objects
Displays page coordinates or object dimensions as object is dragged or resized (default – checked).

Freehand smoothness
Sets the smoothness of the Freehand Path tool to fine, smooth, or very smooth (smoothness is related to number of points).

Record up to __ undoable operations
Sets the number of undo operations available when using the Undo command (the default is 24).

Performance

wpid7268-Performance.png

Faster, lower quality drawing when zooming and scrolling
Enables automatic use of low-quality rendering during operations that require rapid redrawing, such as zooming and scrolling, to speed performance.

Anti-aliasing
Turning off anti-aliasing preference improves performance while editing large files (default – checked).

Shadows
Turning off shadows at very high zoom improves performance while editing large files; note, the zoom scale can be set by the user (above 800%; default – checked).

Options

wpid7267-Options.png

Show template chooser when launching application
Template chooser opens automatically on application launch (default – checked).

Handles
Curve handles and rotation knobs can be displayed a normal or large size. Large size makes selecting object handles easier when zoomed out and on large format screens.

Option – scrollwheel zooms drawing
Allows magnification of the view to be changed using Option-key + scrollwheel (default – checked). Check to invert scrollwheel zoom direction changes sense of scrollwheel zooming.

Individual tools remember last style used with it
When switching between tools, the style will change to the last style used with the tool.

Style Dropper remembers last style used
Style dropper remembers last style it picked up.

Enable Autosaving and Versions
Enables Autosave and Versions support for Mac OS X "Lion". If unchecked, the classic document saving methodology is used.

Credits

Artboard User Guide Comments Off

Styles and Clip Art

This product includes artwork sourced from the U.S. National Park Service: TrueType Font Symbols (last updated July 2007) http://www.nps.gov/hfc/carto/map-symbols.htm
This product includes color specifications and designs developed by Cynthia Brewer http://colorbrewer.org/

Graphics and Web

Application graphics designed by Michael Norman Olson, design+
Website powered by WordPress; web development by run skip, llc and busick design
All application graphics and vector retina icons created using Artboard® by Mapdiva, LLC

Trademarks and Copyright

Artboard® is copyright Mapdiva, LLC
Apple, iWork, and Mac OS(TM) are copyright of Apple Inc., registered in the U.S. and other countries
Adobe Reader(TM) and Illustrator(TM) are trademark Adobe Systems Incorporated
Word(TM) is copyright the Microsoft Corporation
This product contains the Generic Polygon Clipper (GPC) software library licensed from The University of Manchester Advanced Interfaces Group
This product contains code developed in cooperation with Fortunate Bear, LLC
iMedia Browser Framework  Copyright (c) 2005-2010 by Karelia Software et al

Working with Images

Artboard User Guide Comments Off

To Add an Image to Your Drawing, Drag-and-Drop from the Image Browser

wpid7258-To_Drag_and_Drop_Images_from_the_Image_Browser.png

Use the Image Browser to quickly locate images from your Pictures folder or iPhoto library. To place an image, drag-and-drop it from the Image Browser onto your drawing canvas. To prevent large images from overwhelming small drawing areas, images are automatically scaled downward as needed when the drawing canvas is smaller than the image dimensions.

Click the iPhoto folder to expand and view iPhoto images. Attach or remove any folder by clicking the "+" or "–" in the lower left window. Drag editable SVG files from the Image Browser directly onto your drawing canvas.

Image files may also be dragged from the Finder or pasted from the computer clip board.

To Use the Image Adornment Style Component

An Image Adornment is a style component that works like a fill and can be added to a style that is applied to any shape. See "Using the Style Inspector" for more information about using Image Adornments with styles.

To Take a Picture

wpid7261-How_Do_I_Take_a_Picture_for_My_Drawing.png

To add a photo snapshot to your drawing, choose File > Take Picture… from the main menu to open the Picture Taker window.

Click the "Take photo snapshot" button and smile! Click "Set" to place the photo into your drawing.

The Recent Pictures drop-down displays recently taken pictures and you can choose from pictures locally stored on your computer.

To Resize and Rotate Images

wpid7260-How_Do_I_Resize_and_Rotate_Images.png

To resize an image, select it and grab one of the bounding box handles and drag. Hold the SHIFT-key to maintain the image aspect ratio.

To rotate an image, grab its purple rotation knob located to the right of the image center. Dragging will rotate the image around its center point. Note the center point (light blue cross-hair) can be moved to reposition the rotation centroid. Hold the SHIFT-key while rotating to constrain the rotation angle to 15-degree increments.

To Add a Border to an Image

wpid7257-How_Do_I_Add_a_Border_to_an_Image.png

Any line style can be added to an image to create a nice framed border effect. Select an image, then in the Styles & Clip Art palette double-click a line style to apply it to your image. For example, we’ve applied the "Frame – Earth Tone Matted" from the "Frame Styles" category. Note that fill styles will completely fill over the image and should not be used. Alternatively, choose a clip art border that has been designed as a frame, such as "Day at the Beach," and place it over the image resizing as necessary.

Move an Image Around Inside Its Frame

wpid7256-Move_an_Image_Around_Inside_Its_Frame.png

Double-click the image to make it active for editing. To reposition an image within its frame, grab and drag it. To scale the image within its frame, move the scale slider up or down.

To Mask and Crop Images (Simple)

To_Mask_and_Crop_Images__Simple_.png

To mask an image, double-click the image to make it active for editing. Move any of the image’s bounding box handles to adjust its bounding box. Click and drag the image to reposition as needed. Click off of the image to finish editing. To return to the original image bounding box, right-click and choose "Fit To Image" from the contextual menu. To permanently crop and resample the image to fit the new bounding box, right-click and choose "Crop and Resample" from the contextual menu.

To Mask and Crop Images with Complex Shapes

wpid7259-How_Do_I_Crop_Images_to_a_Rectangle.png

To mask an image with another shape, place the image then draw any shape – from a simple shape to a complex outline of the area you want to crop. Select the overlapping image and shape and choose Graphic > Combine > Intersect.

An image that is masked still has the original image hidden behind the mask area and is non-destructive. To remove the mask, right-clicking the image and choose "Remove Image clipping path" from the contextual menu.

An image with a mask can be permanently cropped to remove portions of the image that are hidden, thus reducing overall file size. Clipped images are resampled to the mask area. To crop a masked image, right-clicking the image and choose "Crop and resample image" from the contextual menu.

Adjust Image and Effects

wpid7255-Adjust_Image_and_Effects.png

Double-click an image to adjust its properties, such as exposure and saturation, or choose from a variety of image preset effects. Image adjustments and effects are permanent with your saved drawing.

Working with Lists and Tables

Artboard User Guide Comments Off

To Copy and Paste a Table

wpid6877-How_Do_I_Copy___Paste_a_Table.png

Copy and pasting a table into a text box works seamlessly, preserving most formatting from the source document. For example, this table is cut and pasted directly from an existing spreadsheet.

Add a text box to your layout with the Text Box tool. With the text box selected, paste in your content (use the keyboard shortcut CMND-V or choose Edit > Paste from the main menu). Using the handles on the text box, resize it to fit your text (or right-click to use the context menu Fit To Text command).

To Create a New Table from Scratch

wpid6879-How_Do_I_Create_a_New_Table_from_Scratch.png

Alternatively, with the text box selected, choose Text > Table… from the main menu to create your own. Adjust your table settings in the Table window.

To Copy and Paste a List

wpid6876-How_Do_I_Copy___Paste_a_List.png

Copy and pasting a list into a text box works seamlessly, retaining most formatting from the source document. For example, this list is cut and pasted directly from an existing document.

Add a text box to your layout with the Text Box tool. With the text box selected, paste in your content (use the keyboard shortcut CMND-V or choose Edit > Paste from the main menu). Using the handles on the text box, resize it to fit your text (or right-click to use the context menu Fit To Text command).

To Create a List from Scratch

wpid6878-How_Do_I_Create_a_List_from_Scratch.png

Alternatively, create your own list in Artboard. Add a text box and your content. Use the keyboard shortcut SHIFT-Enter to add new lines of text. With the Select [s] tool active, double-click to select your text and choose Text > List… from the main menu. Adjust your list settings in the List dialog.

Working with Text Objects

Artboard User Guide Comments Off

To Add and Edit Text

wpid7244-How_Do_I_Add_and_Edit_Text_in_My_Drawing.png

To add text to your drawing, choose the Text Box tool then click on your drawing canvas to place the text box. As needed, double-click with the Select [s] tool to make the text active for editing. Start typing to add text. Click outside of the text box to end editing. To resize the text box, click and drag the object handles.

Alternatively, when placing a text box you can click-and-drag to place the text box at a larger size.

Double-click the text box with the Select [s] tool to edit existing text. Click outside of the text box to end editing.

HINT: If you prefer to have the Return-key end editing, you can enable that in the Artboard Preferences; while enabled, click the SHIFT-Return-key to go to next line while editing text.

To Change Fonts or Style of Text

Text is styled directly through the Fonts panel and Text commands in the main menu. With one or more text objects selected, open the Fonts panel. As desired, choose the font and associated style elements, such as size, color, and shadow. Alternatively, colors can be dropped on text objects directly from the Colors panel.

Several text formatting options are available through the main menu. Choose Text > to choose from styles, alignment, case, kerning, and more. The Fonts panel offers font selection and custom effects, including outline, shadow, and mask. Align, kern, change case and baseline are available menu options. Font effects and options can be applied to blocks of text, individual words, and and even individual glyphs! For full creative control, including applying styles and distortion, you can convert text to shapes, shape groups, and paths.

To Expand the Text Box When Some Text is Hidden

wpid7248-How_Do_I_Expand_the_Text_Box_When_Some_Text_is_Hidden.png

When text extends beyond the confines of the text box an indicator “+” is shown in the lower right-hand corner of the text box prompting you to enlarge it.

CLOSER LOOK! Text in a box will not be visible if the font size is larger than the text box. Use the sizing handles on the text box to make it bigger, or right-click the text box and choose “Fit To Text.”

To Add Text On a Path

wpid7245-How_Do_I_Add_Text_On_a_Path.png

Artboard makes curved text beautiful and easy. A bit of practice is all it takes to give your curved text an expert look. Text On Path uses curves with the same controls as the Bezier Path tool.

Choose the Text On Path tool. Click on your drawing canvas to place the starting point for your text on a path. If desired, hold the left mouse button down and drag the curve handle outward. Release the mouse button and continue placing points along the curve. Double click (or hit ESC on the keyboard) to end. Use the curve handles to adjust the curves. Double-click the text with the Select [s] tool to edit (make sure you click onto a letter when double-clicking).

wpid7243-media_1245448042403.png

It is a good practice to keep your text curves simple. With only two points you can create smooth c-shaped and s-shaped curves simply by adjusting the points themselves (the orange dots) and the curve handles (the blue squares). The longer the curve handles, the steeper your curve. Experiment by moving the curve handles around and altering the shape of the curve.

To Edit Text on a Path

wpid7247-How_Do_I_Edit_Text_on_a_Path.png

Double-click the text with the Select [s] tool to edit (make sure you click onto a letter when double-clicking for Artboard to recognize the selection). When selected, the text to be edited will float above the path and be highlighted. Type to edit text. Change the alignment as desired. Note, the "Justify" text alignment will provide an even spread across the path. Open the Font panel to change the font and appearance of text.

To Change Text Alignment Along the Path

wpid7246-How_Do_I_Change_Text_Alignment_So_It_Isn_t_Stretched_Alon.png

Text On Path has "Justified" alignment by default, giving it a stretched appearance across the entire length of the path. Choose Text > Align > Left / Right / Justified / Center to change text along a path to your desired alignment.

To Fit Text to a Shape (for example a circle)

wpid7249-How_do_I_fit_text_to_a_shape__for_example_a_circle.png

In addition to drawing a Bezier curve with the Text On Path tool, you can fit text to any shape. Use the Text On Path tool to place your text on your drawing canvas. Double-click the text with the Select [s] tool to edit it. Next, draw your shape. Copy the shape, then select the text and choose Edit > Paste Path On Object from the main menu. The text will now follow the path of the object.

HINT: To wrap text only partially around a circle, use the Arc tool to draw an arc to the desired length and paste it onto your text using the above method.

To Use Spreading (or Tracking) on Text

wpid7253-How_Do_I_Use_Spreading__or_Tracking__on_Text.png

Text can be spread out across and area (called “tracking”) by holding the OPTION-CONTROL keys on the keyboard and repeatedly pressing the right Arrow (end) key, or by choosing Text > Kern > Loosen from the main menu. Repeat as necessary to get a wide spread. Pressing the left Arrow (home) key tightens tracking.

Note that Text > Kern > Loosen is also used to add space (or "kerning") between letter pairs.

To Make Text Bigger, Smaller, Bold, Italic, and Underline

wpid7251-To_Make_Text_Bigger__Smaller__Bold__Italic__and_Underline.png

Modify text properties in the Fonts palette, or by choosing various Text > options in the main menu. Use shortcut keys to quickly modify text properties. For example, COMMAND"–" and COMMAND-SHIFT"+" quickly make text smaller or bigger.

Need multi-styled text? Text boxes can use multiple fonts, sizes, colors, and more in a single text box.

To Set Outlined and Masked Text in the Fonts Panel

wpid7252-How_Do_I_Set_Outlined_and_Masked_Text_in_the_Fonts_Panel.png

Use the Fonts palette to add advanced styling, including text outline and text mask. Text outline and masking are particularly useful for making text stand out on top of dark, colored, or complex backgrounds. Masking can be any color as well as semi-transparent, and the size of the mask is fully adjustable.

To Make Shape Objects from Text and True Type Fonts

wpid7250-To_Make_Shape_Objects_from_Text_and_True_Type_Fonts.png

Text and True Type Fonts (TTF) can be converted into individual editable shape objects. These new shape objects can be further styled, grouped, and saved as clip art as desired.

1. Place text in the drawing area using the Text Box tool. Choose the font you want to use, or choose Edit > Special Characters from the main menu to open the Special Characters window.
2. After typing one or more glyphs, select the text box and choose Graphic > Convert To > Shape or Graphic > Convert To > Shape Group from the main menu (or right click and choose Convert to > from the contextual menu). When converted to shape, the entire block of text is one shape. When converted to shape group, you can Ungroup to obtain each glyph as a separate object.
3. To further explode and modify multi-layered objects, choose Graphic > Combine > Break Apart from the main menu and modify the shape or re-color individual components.

This site uses a Hackadelic PlugIn, Hackadelic Sliding Notes 1.6.2.