Tut: Animated Season’s Greeting

Finished Project

As the holidays are upon us, you may be dropping a gear or two in terms of workload, and perhaps now would be a good time to spend five minutes having a look at one of the applications that you get access to as a Creative Cloud subscriber: Edge Animate. I love this application, it’s friendly enough for the code-wary to use with point-and-click functionality but is deep enough for developers to add in libraries and as much code as they can spit out.

The end product of Edge Animate is standards-compliant HTML5, JavaScript and CSS3, so it can be deployed as web content, but can also be wrapped into an .oam file for use in Adobe Digital Publishing Suite or as a widget file for Apple iBooks Author.

In this tutorial we are going to create a holiday message that will display in your browser; it should take no more than 15 minutes to complete, and will hopefully will generate some enthusiastic curiosity for further investigation. As the application has eleven tutorials built-in (some of which take less than five minutes to complete) you should be able to feed that too!

The files I’m using here are available fro you to download and unzip: http://adobe.ly/1AWMoGh

Step 1: Open Edge Animate

Edge Icon

If you’ve already installed all of your CC applications, Edge Animate will be available, otherwise just use the CC Desktop App or the browser interface to instal it—this shouldn’t take many minutes. Once you have Animate open, click the Create New link on the left.

Create New

The workspace will open and it may look quite busy, especially as the Lessons Panel will be open. Click the x in the tab to close that panel as we won’t be needing it. What you’re seeing in the main window is an HTML element, called a Div. You don’t need to be too concerned with that at the moment however, as it is a topic we will be looking at in a future post series in 2015. For now, just think of it as your document.

On the left-hand-side you’ll find the Properties Panel and the very first field will say “Untitled”—modify that to read “Happy Holidays!” (without the quotes)—this is the text you’ll see in the browser tab.

Step 2: Change the document size.

Size

Just a quick note here: you’ll notice that most of the values you’re seeing from here on will have small diamonds next to them. Unless indicated otherwise, for this exercise avoid clicking on those as they add keyframes, which may produce unexpected results that we don’t need right now.

Moving downwards from that field, the next thing you’ll come across are the width and height options. Just to the right of the values (in amber) you’ll see a small “switch” next to “px” which we will click for the W value and this will convert it from pixels to percent; leave that at 100% then change the H value to 800, but leave that set at px.

View

You will need to change your view of the work area, so you can see the document. There is no “Fit” command in Edge Animate, and rather than messing around with zoom commands it is easier to go to the bottom of the document window, mouse-down on the magnification value and drag to the left/right until the view suits you.

Step 3: Create Background Gradient

To the right of the dimensions values, you’ll see two colour swatches, one of which will be white—ignore that one and click on the one to the right of that—it will currently have a line through it—and a gradient editor will appear.

Gradient editor

The top stop of the gradient should already be selected so all you need to do is choose a new colour using the field and the two sliders to the right as indicated in the screenshot—it’s probably best to avoid the third (alpha) slider for the time being. The gradient editor will disappear when you click away from it or hit the RETURN/ENTER key.

Step 4: Add the Files

If you’ve downloaded the files then we now need to bring them into the project, or of course your own if you’re using those. Go to File > Import… navigate to the folder containing the images, select star.png and tree.png then hit OK or RETURN. When the images come in, they’ll be dropped onto the Stage (that’s what the work area/document is actually referred to as) using their top left corner as a reference point. The tree will also most likely spill over the edges of the Stage area, and although this won’t actually happen in the browser, we can see what the Min W (minimum width) value can do for us: set change the value to 800px and you’ll see that the stage changes.

Imported files

Drag the Tree and the Star into the centre of the Stage—Smart Guides will be there to assist you—but this will only work in the document; we need to tell the browser to display these times in the centre of the browser, whatever width it may be at. Select the Tree and the Star in turn, then in the Properties Panel you’ll see a Position and Size pane; click the switches for the X and Y values to change them to percentages and then to the right of the buttons for Global and Applied (that you can ignore) there will be a button that you can click to use a preset for responsive layouts.

Responsive

From the presets on the left choose Centre Background Image and then click Apply.

Presets

Step 5: Add the text

At the top of the workspace you’ll see a small toolbar, and from there select the Text Tool—you’ll be pleased to know that if you use accelerator keys in other applications it’s exactly the same in Edge Animate and you can access the tool by tapping T on your keyboard.

07a_addText

Drag out a text frame on the stage and then type your holiday message into the box that pops up; click the x on the box to dismiss it when you’re done. If you need to edit the text simply double-click on the text and the box will re-open.

Now we can use the Text pane of the Properties Panel to set up our text—change the size to suit you and choose centre alignment. If you want to add a cool Edge Webfont from TypeKit, click the + to the right of the font drop-down, and use the dialog to search for something that you like. You won’t be installing the font on your machine—it will be served to the browser when the page loads.

Edge Webfonts

The only other thing we will need to do here is to make sure that text container is also the width of our browser and this is easily done by just switching the W value in the pane above to percent instead of pixels.

Step 6: Animate the Text!

The Pin

With the text container still selected, we’re going to use a tool called the Pin to animate the text. Tap P on your keyboard and the timeline at the bottom of the workspace will turn on a couple of options and add the blue pin to the timeline playhead. Drag the pin out to 1.5 seconds as shown below.

timeline

Now drag your text down off the stage. If you need to zoom out tap and (minus) a couple of times (Windows users substitute CTRL for ⌘ throughout). Once you’ve done that, go to the top of the Properties Panel and drag the Opacity slider to the left; that will make the text invisible. Edge animate will have added all of the necessary keyframes and transitions to the main Stage timeline for that to work—wanna see it? You can now tap your spacebar and the animation will play.

Now we’ll crank it up a notch, but first save your work, and then we can preview it in the browser. As you’d probably expect, go to File > Save… and then choose a location for the project—accept all other defaults. Once you’ve done that, hold down the key and tap RETURN—your browser will open and presto!—there’s your animation. If it doesn’t look right, check that you have followed the previous steps as directed. Return to Edge Animate.

Step 7: Animate the Star

Select the Star on the Stage and go to Modify > Convert to Symbol… then type star into the dialog that appears and click OK which will “wrap” the star in it’s own “environment” with a timeline that runs completely independently of the main Stage timeline. Think of that like your heart. Your heart just keeps beating along all the time doing what it needs to do while you get on with your own day, week, year and so on.

Create Symbol

Double-click on the Star symbol on the stage and you’ll get into that wrapper we mentioned a moment ago. You’ll see that the stage and the tree are greyed out and that also a breadcrumb trail has appeared showing you that you are now in the star timeline—we’ll use that to exit this wrapper when we’re done animating.

Symbol

If necessary, drag the playhead in the timeline back to the left, and select the Star on the stage. In the Properties Panel locate the Transform pane and the little dial for rotation.

rotation

Click the diamond to the right of the dial—this adds a keyframe—and then change the value from zero to -359. Now drag the playhead to the 0:01 (one second) mark, add another keyframe to the rotation and change the value to zero. Hit the spacebar and you should se the star spin. Click on the transition in the timeline as shown below, then copy (⌘-C or CTRL-C).

Transition

Now Move the playhead to the next “notch” on the timeline ruler 0:01.250 and then paste (⌘-V or CTRL-V)—the transition gets duplicated at the playhead position. Right-click that transition and select Invert Transition from the context menu—you should see the rotation values reverse in the transition. Hit the spacebar to see the star rotate, pause and then rotate back. If you’re feeling adventurous, you could try adding opacity keyframes at a later point so that the star fades in and out, too. For now, we’re going to perform one last step to get the animation to loop.

In the pane to the left of the main timeline you’ll find a small diamond inside some braces that we can use to add a Timeline Trigger. Click on that and a large dialog will appear, as below.

Trigger

Don’t worry bout the code area at the top, you won’t need that for this exercise—the buttons and options below will do that for us. From left to right, select Playback then Play then Star as the target. Hit RETURN and then click the x to close that window. The code that has been generated will tell the main timeline that when the star symbol timeline reaches that point, play it over again, and the end result is that it will loop (tapping the spacebar won’t reflect that).

Actions

In the breadcrumb trail, click Stage to return to the main timeline, then test the project in a browser as you did before with ⌘-RETURN.  The animations should be working, but I’m willing to bet that the star isn’t where you expected it to be at all. That’s because the symbol is there now and that isn’t the same as the image! All we’re going to do here is pretty much what we did earlier with the star and the tree. Before we do that, make sure that the playhead is all the way back to the left, so we don’t add any keyframes we don’t need and then put the symbol into place, click the use a preset for responsive layouts button. select the sole option there, Scale Position and click Apply. I’d just tweak the X position to about 45.5% in the Position and Size pane, which should get it more-or-less right in the browser. This isn’t perfect as we’d ideally wrap all of our animation into another container, but it’ll do for now. We also haven’t looked at publishing this file, but again, that isn’t too important at this stage as we’ll be doing a lot more Edge Animate in 2015.

Hopefully though, you now have an idea of how you may be able to venture out into new areas with Edge Animate along with the other tools and services you have access to as a Creative Cloud subscriber, and can start to think about how you may be able to expand your current offering in 2015!

Happy Holidays, Merry Christmas!

Tut: Just for Fun Photoshop Christmas Tree

In this post, we’re going to look at using (and perhaps misusing) a couple of Photoshop CC2014 features to make a simple Christmas Tree. With this exercise this won’t be so much about what you’re making here as what you’ll see and learn on your way, but if you do get something you can use out of it then that is of course a bonus, but hopefully at any rate you’ll enjoy it and pick up a thing or two.

Get Photoshop open and create a new document: ⌘-N (Windows users substitute CTRL for ⌘ throughout) and choose Mobile App Design from the Preset drop-down. From the Size drop-down choose 1536 x 2048 which will give us a decent size file to work with, in the portrait orientation. You can of course create the document any size you like, just modulate the settings as desired in some of the following dialogs.

New Document

Step 1: Set the scene.

Background

We’ll set a Wintry scene with a gradient that runs from blue to white. I’ve used Pure Cyan from the default swatches here, and a foreground-to-transparent linear gradient that runs from the top of the document to about three-quarters of the way down. You could also add another slightly darker blue to transparent gradient that finishes about 25% from the top if you like—it’ll set off the star nicely at the end.

Step 2: Grow a Tree

Pen tools

Add a new blank layer, name it Tree and then grab the Pen Tool by tapping P on your keyboard—make sure you have the Pen Tool  and not the Freeform Pen Tool (the icon has a wavy line coming out form the nib), and then click towards the bottom centre of the image, about three or so centimetres form the bottom. Click again towards the top centre, and leave a bit more room at the top. The direction is important, as trees grow upwards!

Line segmentFilter menu

Go to Filter > Render > Tree… and in the ensuing dialog select 8: Pine Tree 1, from the Base Tree Type drop-down, then from the following settings use these or modulate as desired:

Light Direction: 30

Camera Tilt: 5

Leaves Amount: 100

Leaves Size: 100

Branches Height: 95

Branches Thickness: 110

Default Leaves: On

Leave all other settings Off and the Arrangement slider set to about 10.

Tree dialog

Photoshop will grow your tree!

Hit Backspace to delete the path, add a new layer and name it Tinsel

Step 3: Generate Some Tinsel

Tinsel path

Use the Pen Tool to draw a path that zig-zags down the tree. In the image here I have hidden the tree to show the path drawn in my image. Any variation on this should do the trick.

Go to Filter > Render > Flame… and quite possibly an infoWarning dialog will appear if your path is longer than 3000 pixels. This may slow down rendering of the flame effect but if you’re on a fairly current machine with a decent RAM spec you’re unlikely to be delayed too long. Click through the dialog (OK).

infoWarning

From the Flame Type drop-down choose 2. Multiple Flames Along Path and set as below or modulate as desired:

Length: 60, leave Randomize Length checked

Width:62

Interval: 10, leave Adjust Interval for Loops checked

Flame Lines (Complexity): 25

Turbulent: 55

Jag:50

Opacity: 12 (days of Christmas)

Flame Bottom Alignment: 2

Choose 2. Violent from the Flame Style drop-down and 4. Oval from the Flame Shape drop-down

Enable Use Custom Color for Flames then click the colour swatch beneath and choose a colour for your tinsel.

Low from the Quality drop-down should be fine, enable Randomize Shapes and then click OK.

Tinsel added

The filter will generate the flame-slash-tinsel. If you think the effect is too weak, then simply run the filter again with the same settings, and you can fine tune that by going to Edit > Fade Flame… and dialling the filter back a bit. This will only work if you have performed no other steps since running the filter.

Delete the path, and model the effect by adding a layer mask and using a soft brush to twaek the joins a bit, and so on, as desired. The tinsel may also look a bit flat, so add a dodge and burn layer by alt-clicking the New Layer icon in the Layers Panel or using the SHIFT-⌘-N shortcut to access the New Layer dialog.

New layer dodge

Name the layer tinselDodge—even though we’ll be burning it seems wrong to name it that way to me given that tinsel ias a bit er, flammable (and yes the irony that we made it with the Flame filter isn’t lost on me)—and select Use Previous Layer to Create Clipping Mask, change the Mode to Overlay and enable Fill with Overlay-neutral color (50% gray) thwn click OK.

Tap O on your keyboard to select the Burn Tool. If you have the Dodge Tool selected instead, hold down SHIFT and tap O again to switch tools. Burn in some colour around the lower parts of the tinsel—unless your colour is really light, this should work pretty well. If you’ve gone with a very light colour, you may need to brush in some dark tones with the paintbrush on an empty layer.

10_progress

Step 4: Fairy Lights

Back to the Pen Tool but this time we need to change modes so that it creates a Shape Layer—with the tool selected the first drop-down in the Options Bar at the top of the screen will have an option for Shape. Use the tool to draw a nice curvy path down the tree as shown (the tree is again hidden in the screenshot so you can see the path)—don’t worry if you start to see coloured regions as in the screenshot as we’ll get rid of these in a moment.

Draw shape

Go to the Options Bar and click on the Fill swatch and select the NONE icon at the top of the pop-out. The go to the stroke swatch and select the lightest yellow you can find—you’ll get a stroke applied to your path but we need to modify that a bit. Change the Weight to 14pt, and then click the Stroke Type drop-down to the right of the Weight field. You should see three stroke types: Solid, Dashed and Dotted—select Dotted and then click More Options at the bottom of the dialog.

Remove fill

Fairy lights

In the first Gap field increase the value to about ten, and exit the dialog. You should now have nice evenly-spaced dots that we can use as tree-lights. On my example, I added a layer mask and then used a reduced-opacity brush to dab on some of the lights so they are not all the exact-same brightness. To complete the effect, double-click on the layer (just to the right of the name) in the Layers Panel and add an outer glow in the layer style dialog. My settings are in the screenshot below but of course you may want to tweak these for your own version.

Stroke options

Finally, add a radial gradient for a glowing star at the top of the tree. Add a new layer, then tap G to access the Gradient Tool and select a bright yellow colour for the foreground—as the settings should still be at Linear Gradient and Foreground to Transparent the only step required here is to tap the right-bracket key ] to switch to Radial then click and drag from the top of the tree outwards and you’ll get a warm glow for your star. Tapping the left-bracket key twice will cycle you to the Diamond Gradient. Tap X to swap the foreground to white followed by 7 to reduce the opacity to 70%, then drag a small gradient out at about 190º to complete that effect.

Add star

Al that remains then is to add your holiday message on a type layer with some styles. In the example I used Sarina from TypeKit, with a fat yellow stoke and a solid drop-shadow, with a text warp applied—there’s also a great font called HWC Star Ornaments on TypeKit that could be used for embellishments—have fun!

Finished project

Less Work with Workspaces

Workspaces make sense

This week, I’d like to take a brief look at an often unnoticed productivity feature, that can help you to work more efficiently by saving you from hunting down panels that you want to work with.

Recently on one of my visits to a company there were more than a few people working with screens that were littered with panels. I have attempted to replicate one below just for the purposes of illustration (and no pun intended, I’ve used Illustrator). Just about everything was open, and stacked here there and everywhere on the screen. Some were even pushed mostly off-screen—“I do that because I’m running out of room” (really?)—with the title bar of the panel just poking up at the bottom of the User Interface (UI).

cluttered workspace

Does this seem like the best way to work? Finding things stacked on top of each other or pushed out of the way must eat into productivity time. In terms of screen real-estate  on a “standard” screen this is maybe like trying to perform keyhole surgery, through a letterbox—even with a super-huge cinema display there’s surely just too much information on the screen for you to be able to really concentrate on the subject? It’s also completely unnecessary, as every Adobe product that they were using has a workspaces feature, putting the panels in context with the task in easy reach.

There are “factory” (also referred to sometimes as “shipping default”) workspaces built in to all of the products, and they all live in more-or-less the same place: the Workspace Switcher that is located in the Control Strip (or Options Bar) on the Mac, and the Application bar in Windows, at the top right of the UI.

workspace switcher

Let’s imagine you’re working in InDesign, Illustrator or Photoshop on something (layout, illustration, whatever) and you want to concentrate on aspects of the type; go to the workspace switcher, click on it and select “Typography” from the menu, and you’ll find all of the panels you’re going to need in front of you in an instant, and hide those that you probably don’t. It really is that quick, and that simple!

workspace switcher menu open

Make it Your Own

Creating your own workspace couldn’t be any easier. All you need to do is get everything the way you’d like it to be, and then choose New Workspace… from the Workspace Switcher (or if you you prefer this—and any of the other workspace commands—are also available from the menu system: Window > Workspace > New Workspace…). Should you ever need to add, remove or otherwise edit the workspace, simply create a new workspace with exactly the same name, and this will overwrite the previous one.

Managing Your Workspaces

003

There may be other tasks associated with managing workspaces and perhaps unsurprisingly that’s where Manage Workspaces… comes in; in the Manage Workspaces dialog, you can remove, rename and duplicate workspaces, as required.

It may be worth mentioning that workspace files can also be shared—at least with InDesign and Illustrator—they are just an XML file that can be added to the Workspace directory within the application. You can find out more about this with a fairly simple web search—you essentially just need to locate the directory where workspace files are stored.

Where Creative Cloud Sync Makes This Better

Workspaces are one of the things that can be synced, along with your preferences, libraries, presets and keyboard shortcuts (do please keep in mind that keyboard shortcuts are platform specific, if you work on both Mac and Windows). That means that Illustrator can work your way, wherever you are signed in!

Where CC Makes This Even Better (in Illustrator)

create new tools panel

There are a lot of tools in Illustrator, and power users generally use the keyboard to access those used most frequently, but not all of the tools have accelerator keys (as they are known) and it’s a bit of a pain-point sometimes to locate these tools quickly. Fortunately, in Illustrator cc2014 you can now create your own tools panels, and simply drag the tools in that you’d like into the panel. Tools panels get synchronised with the workspace, so you can customise as many as you need to go along with your workflows, and use them either to augment the main tools panel, or as a complete replacement!

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

Up ↑