imagestyles-final

Add Images to Styles in Artboard

The standard way to add images to your drawing is to drag-and-drop them from the Image Browser or Finder window to your drawing canvas where they are placed as “image objects.” But did you know images can also be added to shape objects as part of the shape’s style? This tutorial shows three methods for adding images to styles, and when to use them.

Final Image

Below are the final styles we will be working towards.

Tutorial Details

Program : Artboard 1.1+ for Mac OSX
Difficulty: Beginner
Topics Covered: Style Inspector
Estimated Completion Time: 5-10 minutes

ATTENTION: As of Artboard 1.7, “shared” styles are no longer part of the default workflow, therefore, references to “New” and “Clone” in this tutorial are no longer current. As of Artboard 1.7, the “New” button in the Format Bar and Style Inspector becomes the “Reset” button. See the Users Guide for more information about shared styles.

General Information

For each of the following methods, the image you use can be a photograph or graphic image. It can also be any vector graphic (such as clip art) copied directly from your Artboard canvas and pasted into the style image-well. When you do that, the graphic will be pasted as a fully scalable vector image without loss in resolution, but not editable. The results are styles that can easily be applied to other shapes.

Method 1 – Fill Style Component

Step 1

Choose File > New from the main menu. Use the Oval tool and hold the SHIFT-key to draw three circles. Return to the Select [s] tool.

Step 2

Select the first circle. Open the Style Inspector – Expert pane and click “New” to create a new style.

EDIT: As of Artboard 1.3 the “Simple” and “Expert” buttons have been removed from the Style Inspector (it will edit all expert styles by default).

Step 3

With the circle still selected, click onto “Fill” in the style component list. Drag-and-drop an image file, use “Paste Image,” or choose “Image File…” to add an image into the image-well. We are using a nice wood grain image (get the file). The underlying image is anchored to the drawing canvas and is tiled seamlessly across the page. When you move the shape around, the image pattern remains stationary. This is the most efficient way to add an image to a style and works particularly well with repeating seamless image pattern tiles.

Method 2 – Pattern Fill Style Component

Step 1

Select the second circle. In the Style Inspector – Expert pane, click “New” to create a new style. Click the “+” button in the Style Inspector and choose “Pattern Fill” from the drop-down style component list.

Step 2

Drag-and-drop an image file, use “Paste Image,” or choose “Image File…” to add an image into the image-well. A Pattern Fill is less efficient on memory but offers greater flexibility to create patterns from images. Simpler images work best for complex or random patterns. We’ve used an apple graphic image with a transparent “alpha” background to keep from seeing white edges around the image (get the file). Several options are available for image scale, spacing, offset, and angle, as well as some very cool options for randomness. Play with your settings based on the image and effect you are seeking. The underlying image fill is tied to (and will move with) the shape object. Pattern Fill provides the most flexibility for creating regular repeating and random image patterns.

Step 3

Change “Rand” settings to add randomness to your pattern. As needed, grab the lower right corner of the Style Inspector window to expand it and check “Suppress clipped images.”

Method 3 – Image Adornment

Step 1

Select the third circle. In the Style Inspector – Expert pane, click “New” to create a new style. Click the “+” button in the Style Inspector and choose “Adornment – Image” from the drop-down style component list. (Hint: Dragging an image file directly onto any shape that has a fill is another way to quickly create an ad hoc style with Image Adornment.)

Step 2

Drag-and-drop an image file, use “Paste Image,” or choose “Image File…” to add an image into the image-well. An Image Adornment adds a single image to the style layer. Images do not tile into a pattern. Options provide the flexibility to fit the image to the shape or scale it, as well as adjust the image opacity. Image Adornments work great with photographs as a quick way to fill any shape with a photo.

Final Image

2 replies
  1. t
    t says:

    I tried to do this but when I click on “style inspector” there was no “expert” to choose from.

    • mapdiva
      mapdiva says:

      Hi, sorry for the confusion. This tutorial was written at version 1.1; as of version 1.3 we removed the “Expert” and “Simple” buttons on the Style Inspector. The Style Inspector is now used for editing all expert styles (thus, you can follow this tutorial without clicking the “Expert” button); simple style editing is still available in the Format Bar – it is a quick way to edit simple fill and stroke styles without opening the Style Inspector.

Comments are closed.