Posts

haunt-beaut-text-final

Create Hauntingly Beautiful Art Text in Artboard

Any text in Artboard can be converted into a shape and custom styled to great effect. We show you how to use Artboard’s Core Image Filters applied to a style to create this hauntingly beautiful art text effect.

Tutorial Details

Program : Artboard 1.7+ for Mac OS X
Difficulty: Intermediate to Advanced
Topics Covered: Style Inspector; Core Image Filters; Converting Text to Shape Group
Estimated Completion Time: ~20 minutes

Step 1

Open a new drawing.

Draw a large text box with the Text Box[t] tool. Return to the Select[s] tool, double-click the text box and type “ARTBOARD”. This is a good place to mention that in Artboard you can automatically change the case of your text. For example, select the text box and choose Text > Change Case > To Lower from the main menu. Note how your text changes instantaneously to all lower-case. We are using “Moltors” font that is only upper-case so it doesn’t matter in our example, but now you know how to do it!

Speaking of fonts, with the text box still selected, open the Font panel and choose a nice fat font (e.g., Moltors) and adjust the size. Our example uses 96pt for a large text block, but you can adjust the text to fit your purpose. As needed, use the Select[s] tool to grab the text box sizing handles and adjust its size. Close the Font panel.

Prefer doing things hands-on? Give it a try…

 

Step 2

In the next step we convert our text to a shape so we can style it. We could simply convert the text to a single shape (once you do that the text will no longer be editable) using Graphic > Convert To > Shape from the main menu (or right click and choose Convert To > Shape). However, I want to flip the “R” to make our graphic text extra fancy, so each letter needs to be a separate shape. To do so, choose Graphic > Convert To > Shape Group from the main menu (or right click and choose Convert To > Shape Group). Then, ungroup the shape.

Step 3

With the Select[s] tool, select the first “R” and choose Graphic > Flip > Horizontally from the main menu. You may want to adjust the letter’s position after flipping to maintain nice spacing between letters. Now, select all the letters and choose Graphic > Combine > Append from the main menu, or click the “Append” icon if you’ve added it to your toolbar. Appending the shapes together allows us to apply a style across the shape as a whole.

Step 4

Use the Select[s] tool to select the text shape and open the Style Inspector. With the text shape still selected, click “Reset” to create a new style from scratch. Click onto “Fill” in the components list then click the “-” button to remove the component. Repeat to remove the “Stroke” style component. Next, click the “+” button and add “Core Image Filter” style component. The core image filter is a group, so we’ll need to add one or more components under the group (we’re adding an image). Click the “+” and add “Image” to add an image adornment. You may need to click the little triangle next to “Core Image Filter Group” in the components list to expand it and see what’s inside the group.

Click onto the “Image Adornment” to open its properties. Click the “Image File…” button to choose an image that will be used as the fill. You can use any image here – experiment to see what works best for your needs. In this example, we’re using a lovely floral pattern we downloaded from freedesign4.me.

Step 5

Let’s turn our attention back to the Core Image Filter Group. Click on it in the style components list. From the drop-down, choose the “Gloom” filter. Keep the standard settings – with “Clipping” set to “Inside path”. The effect will automatically be applied to the image in the filter group. If the image is smaller (or undesirably bigger) than the text shape, you can return to the Image Adornment and adjust the scale of the image.

Step 6

Finally, let’s add a background object to our final image. Use the Rectangle[r] tool with the “Licorice – fill” style from the Basic Strokes & Fills category in the built-in collection. Draw a large rectangle. With the rectangle selected, choose Graphic > Send To Back from the main menu (or right click and choose Arrange > Send To Back). That’s it!

Final Image

From here, you may want to copy your shape to try different background photos. With the copy selected, click “Clone” in the Style Inspector. Now you can simply go to the Image Adornment style component and choose a new image file. To save any of your styles to the User Library, click “Style” at the top of the Style Components list and name and save the style to your collections. Here is our final image, along with a variation using an old family photo for the image adornment. Do you think it would look good over a patterned background?

draw a chalkboard with vector graphic design tool Artboard

Create a Slick Chalkboard Banner with Artboard

When we were featured on Apple’s ‘Apps for Education’ promotion, we got inspired to create a slick chalkboard banner like the “Back To School” page on the Mac App Store. Artboard 1.1 make these effects possible. Find out how.

Here’s our inspiration:

Tutorial Details

Program : Artboard 1.1+ for Mac OSX
Difficulty: Advanced
Topics Covered: Style Inspector Core Image Filters
Estimated Completion Time: approximately 30 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.
NOTE: This tutorial was written using an earlier version of Artboard. In Artboard 1.3+, “Simple” and “Expert” tabs are removed from the Style Inspector interface. Use the Style Inspector to edit advanced styles; use the Format Bar located above the Rulers to edit simple fill and stroke styles without needing to open the Style Inspector.

Step 1

Open a new drawing and choose File > Drawing Size & Units from the main menu and set “pixels/points” as the units of measure. We’ve set our drawing size to 1024 x 350 to make a banner for our website – set the drawing size to suit your purpose. We’ve also turned off all Graphic > Snap To settings in the main menu. Use the Rectangle [r] tool to draw a rectangle the size of your drawing canvas. We are going to add several layers to our drawing, so we’ll name them to keep track of what’s what. Double-click onto the “Drawing Layer” text in the layer list and type “background” and click the Enter-key to end.

Step 2

Return to the Select [s] tool and make sure your rectangle is selected. Open the Style Inspector – Expert pane. With the rectangle selected, click “New” to create a new style. Click onto “Fill” in the components list and click the “–” to remove it. From the Style Inspector, click the “+” button and choose “Gradient Fill” from the drop-down list of components. Click onto the first color-stop in the gradient slider to open the Colors panel. Choose a dark green color (we’ve use RGB 33,52,34). Click the “+” in the gradient slider to add a new color-stop and choose a medium green color (we’ve used RGB 61,100,62). Click onto the last color-stop and choose a dark green color (we’ve used RGB 58,78,60). Keep the style Inspector open; close the Colors panel.

Step 3

Drawing on a new layer keeps your drawing objects separate from the background. Add a new layer by clicking the “+” at the lower left corner of the Layers panel. The layer name will immediately be ready for editing; type “eraser marks” and click Enter.

Next we’ll create a fairly subtle style to make some eraser marks on the chalkboard. Choose the Freehand Path tool and click “New” in the Style Inspector to apply a new style. Draw a squiggly line across the board. In the Style Inspector, click onto “Fill” in the components list and click the “–” to remove it. From the Style Inspector, click the “+” button and choose “Core Image Filter” from the drop-down list of components. A core image filter is a group that applies the filter effect to which ever style components are in the group. Drag the stroke component from the top of the list into (visually nested under) the Core Image Filter Group in the components list (as needed, click the little arrow in front of “Core Image Filter Group” to expand the group). Click onto the stroke color-well to open the Colors panel and choose a white color and slide the Opacity slider to about 50%. Close the Colors panel. Change the stroke width to about 3.5-pt. Click onto “Core Image Filter Group” in the style component list. Choose “Gaussian Blur” from the drop-down list. Slide the Radius slider to about 30% and make sure “Clipping” is set to “None.” Don’t worry that your line is barely visible (though it should still be selected) – subtle is what we are going for!

Now we want to continue drawing with this style to make more eraser marks. Picture how you’d swipe back and forth to erase on a chalkboard. Draw some more squiggly lines with the Freehand Path tool. Note that due to the line’s style, it will be nearly impossible to click on a line to select it. As needed, use the Select[s] tool and drag a rectangle over to select lines or choose Edit > Select All from the main menu. Use a bit of patience and experimentation.

Step 4

We’ll use core image filters again to create a chalk style to draw on the chalkboard. Add a new layer and name it “chalk”.

Choose the Freehand Path tool. Click “New” in the Style Inspector to apply a new style and draw a line (the line is so you can see your style changes as you make them). In the Style Inspector, click onto “Fill” in the components list and click the “–” to remove it. Click onto “Stroke” in the components list and click the “–” to remove it. Click the “+” button and choose “Core Image Filter” from the drop-down list of components. Choose “Bloom” from the drop-down list and make sure “Clipping” is set to “None” (click the little arrow in front of “Core Image Filter Group” to expand the group). Click the “+” button and choose “Roughened Stroke” from the drop-down list of components – it will be added to the core image filter group. Click onto the Rough Stroke color-well to open the Colors panel and choose a whitecolor and slide the Opacity slider to about 55%. Close the Colors panel. Change the stroke width to about 1.5-pt and a roughness of 85%. This is your new chalk style! Optionally, return to Style in the components list to name and save your style.

Use any path or shape tool to draw on the chalkboard. We’ve drawn an “XOXO” with the Freehand Path tool.

Step 5

The above chalk style was a pretty advanced application of Artboard’s Style Inspector. Now we want to make a couple other chalk styles. Draw a new line. One of the beauties of Artboard is the ability to clone existing styles. Chalk is still our active style, so in the Style Inspector click “Clone.” You now have a copy of the chalk style that you can modify without affecting the original.

Click onto Rough Stroke in the style components list and click onto the color-well. Pick a pink color and slide the Opacity slider to about 55%. You now have pink chalk. Draw other shapes and strokes as desired. We added a Heart shape from the Artboard built-in collection and applied the style to it using the Style Dropper.

Experiment with different colors and settings to vary the effect.

Step 6

Next we will add our banner text. This involves placing text, then converting it to a shape to apply a cool new style. Add a new layer and name it “banner text”.

Use the Text Box tool to drag a large text box onto your drawing canvas. Double-click the text with the Select [s] tool and type to edit, clicking the esc-key to finish. With the text still selected, open the Fonts panel to choose a nice fat looking font and increate your text size. We are using Myriad Pro, semi-bold, 36-pt. We’ve also increased the spacing between letters (kerning) just a bit using the Option Key-Command- → keyboard shortcut.

When you have your text just how you want it, right-click and choose Convert To > Shape from the contextual menu (note you cannot edit the text once it is converted to a shape). Open the Style Inspector – Expert pane and click “New” to create a new style. Click onto “Stroke” in the components list and click the “–” to remove it. Click the “+” button and choose “Core Image Filter” from the drop-down list of components. Choose “Crystalize” from the drop-down list. Set the “Radius” to 1 and make sure “Clipping” is set to “Inside Path.” Click onto “Fill” in the style components list and drag it into (visually nested under) the Core Image Filter Group. Click onto the Fill color-well and change the color to white and set the opacity to about 95%.

Step 7

To add a subtitle, follow the above step to add and edit your text. We used Myriad Pro, regular, 24-pt. When you are satisfied with your text convert it to a shape.

Use the Style Dropper tool to pick up the style from your title text in the previous step and drop it onto your subtitle. In the Style Inspector – Expert pane click “Clone” to duplicate the style. Adjust the radius of the Crystalize effect to 2. Click onto the Fill color-well and choose a yellow color. Since the text is a bit small, we’ll make it crisper by adding another Fill the same yellow with about 30% opacity. Drag the new Fill component to the top of the component list so it is not part of the filter group.

You now have a chalkboard banner with chalk drawings and banner text. Pretty cool!

Final Image

At this point you can customize your banner by it jazzing up with an image. We added a new layer and placed the Macbook image with our Mac App Store screenshot. Use guides to help get your layout just right. To export for a web banner, choose File > Export… from the main menu and choose PNG at 72-dpi resolution. Tip: We like to run our images though a PNG compressor before uploading to the web and really love PunyPNG.com (free web app) and PNG Compressor (from the Mac App Store).

" alt="" width="845" height="321" srcset="https://www.mapdiva.com/wp-content/uploads/2014/08/ 845w, https://www.mapdiva.com/wp-content/uploads/2014/08/ 450w, https://www.mapdiva.com/wp-content/uploads/2014/08/ 1030w, https://www.mapdiva.com/wp-content/uploads/2014/08/ 1500w, https://www.mapdiva.com/wp-content/uploads/2014/08/ 705w" sizes="(max-width: 845px) 100vw, 845px" />