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: Colour “Grading” Video Using Photoshop

In February we took a look at using colour LUTs in Photoshop to apply grading to images and later that month at BVE one part of my Photoshop for Video demo showed how you can use Photoshop as a short-cut to rapidly “grade” footage in Premiere. As designers, we are increasingly expected to be able to dip into other areas—yes, even including video—in the course of our work, so this is a great technique for those who have neither the time nor inclination to dip into a product like SpeedGrade.

In this tutorial, we are going to take some footage in Premiere, then create and apply a “look” to it using Photoshop—in this case we’ll just do something simple like sepia toning—but you could create almost infinite variations. If you’re not currently a Creative Cloud subscriber, then you can access a 30-day trial here.

There’s a short piece of footage available for you to use here:http://adobe.ly/1DWrXxy or you could of course use any footage of your own.

Start in Premiere

Launch premiere and create a new project; my settings may differ from yours, especially in terms of CUDA acceleration—if you don’t have the CUDA installed that option won’t be available—but that won’t matter for this really, but just so you know my settings are:

  • Renderer: Mercury Playback Engine GPU Acceleration (CUDA)
  • Video: Timecode
  • Audio: Audio Samples
  • Capture: DVnewProject

You’ll be presented with a blank interface, like the one below. If yours is wildly different, then go to Window > Workspace > Editing and that should sort that out; if it doesn’t, reset the workspace by choosing Window > Workspace > Reset Current Workspace… and you’ll be good to go. In the bottom-left corner there will be a Project: Panel (outlined in red, below) and you’ll need to import some media first; choose File > Import… and import your video clip.

interface

 

The clip will appear in your project library (video people refer to these as Bins) and from there drag it to the timeline panel to the right:

media2timeline

The video will appear in the monitor panel above, and you’ll see a video and audio track in the timeline. If you’re using the clip I’ve provided, you may want to click on the audio track (A1) and delete it, so you don’t have to listen to a bracing Icelandic wind.

Premiere to Photoshop

At the bottom of the Program Monitor Panel—where you can see your video—you should see a small camera icon on the right:

exportFrame

Click on the icon (or use the shortcut SHIFT-E) to export the current frame; you’ll be presented with a dialog, and all you need to do here is choose the DPX format, choose a location and click OK.

exportFrameDialog

DPX

The DPX file format stands for Digital Picture Exchange and is a high-end still-image format for digital intermediate and special-effects work. You could pretty much export this frame in any way for this project, as it won’t be re-imported but it’s good to raise your awareness of it as a format—especially if you start to work more in video production—and it’s a 16-bit file so we’ll have a lot of information to work with.

Building Your “Look” in Photoshop

In Photoshop, open the DPX file, and then add a Levels adjustment layer, and bring the black slider up a bit to darken up the shadows and the sky:

step1

Return to the Adjustments Panel and this time add a Gradient Map adjustment (1, below). When the Properties Panel shows the gradients, click on the Gear Flyout (2) and select Photographic Toning (3) You can either choose to replace the current gradients you have in the panel—you can always reset them later from this flyout—or append them to the gradients you have already.

step2

 

From the new gradients, choose a gradient that you like; my example uses one of the sepia presets. You could use all manner of adjustments here, so do experiment with all sorts of things, but for now we’re done, and we can export our “look” back to Premiere.

Create a Colour Lookup Table (LUT)

Now go to File > Export > Color Lookup Tables…; in the resulting dialog enter a name for your “look” and optionally choose a value from the Grid Points field—the higher the setting, the larger the file but the more information—or choose a preset (my example uses a Medium setting); leave all the formats checked. Next choose a location for the files—it may be better to create a new folder for each LUT you create as a number of files are created at this stage—then save the LUTs.

step3

You can close the DPX file when you’re done—you don’t need to save it (although of course you could if you wanted to, as a PSD version).

Load the LUT in Premiere

Nested with the Project Panel, you should find an Effects Panel—if not it can be accessed from Window > Effects. In the search field at the top of the panel, type “Lumetri“; the seach panel should filter down the effects results and you should see the effect in the list:

step4

Drag the effect onto the clip in the Timeline Panel and then navigate to the folder where you saved your LUT in the resulting dialog. Choose the 3DL file and your footage will instantly take on the look that you cooked up in Photoshop—hit the spacebar to preview your work—and you’re ready to continue editing, export the media or hand over the project to someone else for further work.

step5

Wrapping Up

There are a few limitations with this shortcut, but as a quick technique it’s very accessible to designers and non-production people. This example was also very simple and you can create some stunning looks if you experiment with adjustments, blending modes and opacity of adjustment layers.

looks

Please feel free to share your thoughts and questions by commenting, either here or on my Facebook page.

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 ↑