Tut: Use Adobe Shape CC to Create Screen Print Art from Your Photos

Shape CC is one of my favourite mobile apps to demo and play with. When I’m showing the capture apps—the small family of apps that includes Color CC, Brush CC, Shape CC and now Hue CC—it’s the one I leave for last like the main act in an evening’s entertainment. Actually, it’s easier to say that Shape CC is my favourite capture app to demo—that way I can now say that Comp CC is my favourite ideation app to demo, so I’m not forcing myself to choose!

Anyhooooo… back to the tutorial. We can use the output from Shape to make some screen print style graphics—all we need to do is create a range of “exposures” and blend them together in Illustrator.

Start in Shape

If you don’t have Shape yet, it’s available on the App Store and for a good few weeks now on Google Play (Min. Android 4.3 required).

Get Started

Once you’ve launched the app—if it’s the first time you’ve used it you’ll need to sign in with your Adobe ID (it also asks for this every now and then, too)—and Shape will engage the device camera (you only need to allow this once as the device remembers your choice).

Create a Library

We’re going to set up a Library first so we need to back out of the capture screen; tap the X next to the slider and you’ll be taken back to the library screen. At the top of the screen is a drop-down that says “My Library” by default—we’ll set up a new library for our tut—so click on the drop-down and choose the Create New Library option and give it a meaningful name.Screen Shot 2015-07-14 at 19.35.40Processed

Check Settings

Screen Shot 2015-07-14 at 19.36.28ProcessedNow we have the library, we just need to make sure that Shape will also add anything we capture to the device camera roll, as we’ll need to use the same image a few times. Tap the Shape logo icon at the top of the screen to access your settings options—make sure that Save Images to Shape Album is enabled so that an album will be added to your camera roll. Tap < Back at the top of the screen to return to the library.

Capture or Choose Your Image

Screen Shot 2015-07-14 at 19.36.45ProcessedTap the + at the bottom of the screen to select an input for your shape—you’ll see that you can use the camera, your camera roll or even your Creative Cloud files. Once you’ve decided what you’re going to use, go ahead and capture it, you can tune the “threshold” using the slider in the capture screen and at any time tap on the image to see a shape preview.Screen Shot 2015-07-14 at 20.21.59ProcessedOnce done, hit the big, green button and you’ll be taken to the refinement screen:Screen Shot 2015-07-14 at 20.22.23ProcessedHere you can brush away stuff you don’t need. If you make a mistake, just hit the add/subtract toggle at the bottom-right and brush it back in. Screen Shot 2015-07-14 at 20.26.44ProcessedHit the tick at the bottom when you’re ready to make the shape.Screen Shot 2015-07-14 at 20.24.19ProcessedDepending on the complexity of your shape you can wait anything from a few seconds to nearly a minute (or more) for Shape to create the vectors. When it’s done, you’ll be prompted to name the shape and then save it to the library.Screen Shot 2015-07-14 at 20.24.38ProcessedNow repeat a few more times—how many is up to you—and use different levels of threshold, as well as using the dark/light background toggle at the bottom-right of the capture screen. I’ve gone for four different versions:Screen Shot 2015-07-14 at 20.31.59Processed

Composite in Illustrator

In Illustrator, make sure that you can see the Libraries Panel and from the drop-down in the panel, select your shape library (although it’s quite likely that it’ll already be selected).Screen Shot 2015-07-14 at 21.00.18All you need to do now is drag the shapes to your document (or right-click on each version in turn and choose Place Copy) then apply different colours, opacities and blending modes to each one, then stack them together. Don’t be too precise—the misprint effect will only add more charm!

Tips

  • You can also use the Eraser Tool and Blob Brush Tool to make extra refinements
  • Use the layers panel to quickly target your individual shaoes when they are stacked Screen Shot 2015-07-14 at 21.13.21

Have fun!

Shape Up Your Mobile Workflow

shapeIconIntroduced in October 2014, Adobe Shape CC is a mobile app for iOS—and soon on Android—that makes it possible to create vectors from the device camera or images. If you see a shape that you’d like to use in your artwork or design then you can capture it, refine it and use it or share it in minutes.

While this app is really intuitive, in this post we’ll detail the steps to capture and create a shape, that will include a thing or two that sometimes get overlooked.

Get the App

Shape CC is available on the iTunes App Store (I’ll add a link here when it’s available on Android) and like all of Adobe’s mobile apps, it’s free. Once you have the app installed, launch it and sign in with your Adobe ID; every shape you make will be synched with your Creative Cloud account.

Use the App

Once the app is ready to go, the first thing you’re likely to want to do is choose a destination library for your new shape. Libraries in CC are not only a great organisational tool—unless you really like one huge library with everything in it—but are also excellent for collaborating with others. As the first view you’ll be presented with is the camera—ready for action—you’ll need to cancel the operation by tapping the small X at the bottom-left of the screen (circled in 1, in the image above).

Choose a Library

At the top of the screen, you’ll see the current library—the default is My Library—and it’s a good idea to create libraries for specific things/jobs/tasks, etc. Tap on the library selector (circled in 2, above) and choose the library you want, or create a new one. In this view (3) you can see any libraries that are shared as they have a small green “family” icon at the right-hand-side. You can perhaps see here how powerful this workflow is—you can capture the shape and it’s available for anyone collaborating with you—via the shared library—instantly.

Capture and Refine Your Shape

Tap the plus (+) sign at the bottom of the screen (4) and choose how you want to capture a shape (5). In the example above (6) I’m using the camera. High-contrast elements work best, like the doodle I’m using here and as a tip, if it’s something that doesn’t have enough contrast, you could capture it and develop it in Photoshop Touch, then save it back to the camera roll and rework in Shape, perhaps.

The slider beneath the image area (7) changes the threshold for what will be captured. If your subject is light on a dark background then tap the small icon in the bottom-right corner that switches between dark/light backgrounds. You can also try using this on photographic subjects—it creates some interesting results. If you’d like to see a preview of the resulting shape, simply tap the viewing area (8)—doing this toggles between live/shape views.

Once you’re happy, tap the big green dot and you’ll be taken to the refinement screen (9) where you can brush with your finger to remove unwanted elements. If you make a mistake, there’s an add/subtract toggle switch at the bottom-right that allows you to paint shapes back in. Sometimes, you’ll want to recapture the image again and start over—the small chevron at the bottom-left takes you back to the source. You can engage and disengage the camera flash as a light source while in capture mode which may help you get better contrast (on matt subjects, anyway).

Once you’re done with refinement, tap the check-in-a-circle (10) and Shape will start the trace operation (11). Depending on the complexity of the shape this may take a moment or two. All you need to do then is tap Save, give the shape a meaningful name (12) and then your shape will be available in that library (13) and synched with Creative Cloud.

Managing Your Shapes

You may want to rename or delete your shape, which can be done by tapping on the shape in the library view; you’ll be taken to a screen (14) where you can tap:

  • the icon on the left to rename your shape
  • the icon in the centre to share your shape on social media or by email, etc.
  • the icon on the right to delete the shape from the library

Shape CC and Other Apps

icons

Shapes that you make using the app are available in several places:

  • As stamps in Adobe Illustrator Draw and Adobe Illustrator Line (with Slide or Touch-Slide)
  • As background images in Adobe Photoshop Sketch
  • As vector shapes in Adobe Comp CC
  • As completely editable vector shapes in Illustrator
  • As PDF (vector) assets in InDesign and Photoshop

Collaborating with others

In the library screen, you’ll see a small dotted (ellipsis) icon at the top right from where you can rename the library, delete the library (that’s the library and all the shapes in it) or collaborate with others, making the shapes available for them:

  1. Tap “Collaborate”
  2. Enter the email address of someone you’d like to share the assets with
  3. Add a custom message if desired
  4. Tap “Invite”
  5. Rinse-and-repeat (steps 2-4) for additional collaborators
  6. Tap close at the top left of the screen when done

libraries

You can manage collaborators at any time by revisiting the “Collaborate” link in the library and all of these operations can also be performed via your CC account on adobe.com—by choosing the Libraries link from your home screen, or in the sidebar of the files view—or in the Creative Cloud mobile app.

CCappIcon

Video

You can check out this workflow demo that starts in Shape CC on my new YouTube channel: https://youtu.be/z_NF2ifoPZA

 

Tut: Create a Smarter Antiqued Retro Badge in Illustrator (and Shape)

featuredRetroBadge

In this tutorial we’re going to create a retro badge that allows flexibility for a huge number of variations without drilling into groups—or even creating a group in the first place—the entire badge will be made from the text.

If you’re a Creative Cloud subscriber then you’ll be able to use exactly the same fonts to work along with this tutorial—HWT Geometric and HWT Star Ornaments are both available on TypeKit—or of course you can use whatever you prefer!

Mis En Place

Note for Windows users: I use Mac shortcuts here but unless specified otherwise you can substitute  or CMD for CTRL throughout.

Create a new document. This tutorial uses the Devices profile and iPad Mini from the size drop-down—not that this matters too much but it means we’ll be able to specify px (pixels) as the measurement units further on, without the align to pixel grid feature from the Web profile. Open the Character Panel (⌘-T)—it’ll be useful to have this open and with the options visible. If you can’t see the full panel as shown below the go to the panel fly-out at the top-right of the panel (A, in the image below) and select Show Options.

Strangers to the Character Panel

characterPanel

If you’re not familiar with the panel, the four areas we are using in this tutorial are:

  1. The panel fly-out menu
  2. Leading (or interlinear spacing) options
  3. Baseline Shift options
  4. Character Rotation options

Set the Type

  1. Click on the artboard with the Type Tool (shortcut: tap T on your keyboard) to create some point-text:
    • Set the size to 50pt before you type
    • Use the shortcut Shift-⌘-C to use centre alignment
    • Type GGG, followed by a RETURN then an A—all in caps.
  2. Select the GGG line and then apply the HWT Star Ornaments font to it; apply HWT Geometric to the A.
  3. Now to set the type:
    • Select the A character. Change the size to 210pt and set the leading to 200pt, bringing it closer to the stars
    • Select the first of the three stars, and in the Character Panel, set its Baseline Shift value to -10pt and its Rotation value to 20º—leaning the character over to the left
    • Select the last of the three stars and set the Baseline Shift to -10pt and Rotation to -20º—leaning this star over to the right—hit RETURN to fully apply the value you’ve just entered
  4. Select all of the text and change the fill colour to white
  5. Exit the Type Tool by tapping ESC on your keyboard—the text block will remain selected as a whole

setType

Build the Appearance

You’ll need the Appearance Panel from here. You can even collapse other panels if you like as we can do everything we need to from within this awesome panel.

  • We need to add a new fill to the text—use the shortcut ⌘ – / to do this or click on the small icon at the bottom-left of the Appearance Panel—and as the default fill for text is black, you’ll see it applied to the selected text
  • In the Appearance Panel, drag the fill—it’s just like a layer in this panel —beneath the Characters—as shown here:
    moveFill
  • Making sure that the fill is still highlighted in the panel, go to Effect > Convert to Shape > Ellipse… and in the Shape Options Dialog change the Size option to Absolute and enter a value of 420px into the Width and Height fields.
    shapeDialog Click OK to validate and you should now have a black roundel behind your text, although you can change this fill to whatever colour you like of course. One of the great ways of working with appearances like this instead of using multiple elements, is that often you only have to change one or two things to modify the whole thing, instead of a stack of shapes.
    build1
  • Making sure that the fill is still targeted in the Appearance Panel, go to Effect > Distort & Transform > Zig Zag… then make the Size value 4px, select the Absolute option, change the Ridges per segment value to 9px and finally select the Smooth option.
    build2You’ll have a wavy edge for your badge:
    build3
  • In the Appearance Panel, target the stroke and change it to white, by clicking on the swatch associated with the stroke. Change the weight of the stroke to 3pt. Drag the stroke down beneath the characters, also.
  • You’ll see that component parts of an appearance have a small disclosure triangle to their left. Twizzle the fill disclosure triangle open (points downward) and then holding down the ALT key, drag the ellipse effect onto the stroke. This will copy the effect there:
  • Click on the Ellipse “hyperlink” associated with the stroke and change the Width and Height values to 360pxNote: you don’t need to type the “px” after the numbers—as they’re the default unit for this document, Illustrator knows what you mean.
  • Make sure the stroke attribute is still selected, then click the middle icon at the bottom-right of the panel; this will duplicate the effect.
    duplicateEffect
  • Click on the Ellipse “hyperlink” associated with this duplicate stroke and change the Width and Height values to 320px. Your artwork should now look like this:
    build5
  • Duplicate the bottom stroke again, click on the Ellipse “hyperlink” associated with the new duplicate and change the Width and Height to 340px. Now change that stroke weight to 12pt:
    build6
  • Duplicate the stroke you just modified, change the stroke colour to match your roundel and then click on the stroke “hyperlink” associated with it.
    strokesForDottedChange the weight to 5pt, set the endcaps to rounded then select the Dashed Stroke checkbox. Enter 0pt as the dash in the first field and 15pt into the first gap field. You should now have a nice evenly paced dotted line in the middle, and thanks to the Beautiful Strokes feature it’ll be automatically tweaked for you:
    build7

Essentially, you’re done! It doesn’t matter if you delete the middle star, or remove the left and right stars and/or duplicate the middle one, or change the letter to anything you like. You’ve got a complete grading badge for thousands of possibilities, as well as a graphic style that can be stored in your CC libraries.

Distressed to Impress

The only thing is with our shape is that it’s so super-clean, and we can antique that a bit with some texture, applied as an opacity mask.

Using Shape CC for Opacity Mask Textures

There are a number of ways you can get hold of textures, but I quite enjoy making simple textures with Shape CC on my iPhone. I’ll find a suitable texture, such as this paving slab:

IMG_0997

 

I’ll either shoot it with the camera and load it into Shape from the camera roll if I want to also play with it in Photoshop or use it to make a brush at a later point, or capture it directly into Shape and work from there.

IMG_1001

 

As soon as Shape has made the vectors, they’re pushed to my CC library and I can drag them into my art.

From the library I’ll drag it over the badge, resizing if necessary, then cut it to the clipboard. I’ll then select the badge and hit the Opacity hyperlink in the Control Strip—which opens the Transparency Panel—then click the Make Mask button.

transparencyPanel

The important bit is then to click on the mask to target it, then deselect the Clip option and also deselect the Invert Mask option. Click back onto the artwork and use the Paste in Front command (shortcut: ⌘-F) and the texture is pasted onto the mask in the exact position it was cut from. All that remains—and this is an essential step—is to go back to the Transparency Panel and refocus on the artwork. An orange bounding rectangle will show which has focus.

buildDone

 

On every copy you make, you can go into the mask at any point and either move the existing mask around, or replace it entirely, so that you have some variation in your badges. I hope you’ve enjoyed this tut—please feel free to leave comments if you wish, or share it on Facebook and Twitter, etc.

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑