Week 9 | Monday

Full class critique for Word as Image

List your TOP 5 and BOTTOM 5 from today’s word as image critique.


Animated Button Timeline in Photoshop CS6 

*****THE VIDEO TUTORIAL IS MUCH EASIER TO WATCH AND CREATE THAN THE WRITTEN INSTRUCTIONS**

PS CS6  Animated Button TUTORIAL

  • Complete the tutorial – ANIMATED BUTTON IN PHOTOSHOP CS6 listed above
  • Create a folder in DropBox called: PS CS6  AnimatedButton
  • Title your image: date_yourname_PS_CS6_AnimatedButtonv1
  • Inside that folder place your PSD file AND GIF file of the tutorial.
  • Leave a comment on week 9 Monday with a link to your DropBox folder.
  • Upload your animated GIF to IMGUR and provide me with the link.
  • Leave a comment with a link to your DropBox folder AND Imgur animated GIF.
  • Go to Imgur, copy the HTML code, go back to your homework post, click on the TEXT view (not visual), and  paste the HTML code to your GIF.

Glow Animated Button in Photoshop CS6

VIDEO

WRITTEN

Before I begin adding shapes, let’s set up our document first. I’m starting with an 800 x 600 pixel document, which should be large enough for a simple button like this. StartingDocument Animated Button in Photoshop CS6 Now in terms of the background color, it’s going to be what I base the other elements off of. This isn’t required, but I found that it creates a nice, smooth design. I’ll use a dark grey. Once the color is set, Option+Delete or Alt+Backspace will fill your background with the foreground color. Background Animated Button in Photoshop CS6 The last thing I’m going to set up, are my guides. This will help position the circles perfectly in the center of my document. If you don’t see your rulers at the left and top of your workspace, Command/Ctrl+R will reveal them, allowing you to pull out your guides. And as long as “Snap” is turn on under the View menu, your guides should snap nicely at the horizontal and vertical center. Rulers Animated Button in Photoshop CS6 Good, now we’re ready to start creating. In your Tools Bar on the left, grab the Ellipse Tool, and make sure that it’s going to create a Shape, and not a Path on your Options Bar. EllipseOptionsBar Animated Button in Photoshop CS6 Now starting in the center, where the guides intersect, start dragging out your first ellipse. You’ll notice two problems. One, it’s not a perfect circle, and two, it’s not being create from the center. The first problem can be solved by holding down your Shift key while dragging out your shape. This will constrain it to a perfect circle or rectangle, depending on which tool you have active. Second, to create the shape from the center, in addition to your Shift key, hold down Option on the Mac, or Alt on Windows. As long as these two keys are held down, you’ll have a perfect circle, being created in the center of your document. StartingCircle Animated Button in Photoshop CS6 Now that the shape is created, you want a Gradient Overlay to the shape. Go ahead and double-click on the layer that you just created in your layers panel. Once you’re here hop into the Gradient Overlay section, and click on the gradient bar to bring up the Gradient Editor. Now we can define our colors. FirstGradient Animated Button in Photoshop CS6 For the bottom color (left stop) it’s going to be a little bit lighter in the background color, and for the top color (right stop) it’s going to be slightly darker than the background. Perfect, so now that the first shape is complete, we’re going to skip the glows for a second, and focus on the uppermost shape, which will act as a window to the glow. To keep things simple, I can quickly duplicate the shape I just created with my Command/Ctrl J shortcut key, and once the shape has been duplicated, right clicking on the shape in the layers panel will allow me to clear the current layer styles so I can start fresh. ClearLayerStyles Animated Button in Photoshop CS6 I’m also going to change the color of the shape, to prepare it for our Layer Styles. Double-clicking on the Shape’s thumbnail will bring up the color picker. I’m going to set it ever so slightly lighter than the background color. Once I add the Layer Styles, this will change, though. Value: 262626. GlowShapeColor Animated Button in Photoshop CS6 Once the new color is set, this shape needs to be scaled down a touch. Enter freetransform mode with your Command/Ctrl+Tshortcut, then scale the shape down, making sure to hold down your Shift key to constrain it. WindowShapeScaled Animated Button in Photoshop CS6 Good, now we need to create the window that will allow us to see the glow. We’re going to do this using a custom shape to cut out a hole in the shape that we just duplicated. In your Tools Bar, grab your Custom Shape Tool. It’s hiding with the other shape tools. CustomShapeTool Animated Button in Photoshop CS6 Now on your Options Bar, click on the Shape Picker, and scroll down until you see the Circle Thin Frame shape. CircleShape Animated Button in Photoshop CS6 If you haven’t loaded in all of the shapes that come with Photoshop yet, click on the icon at the top right of this panel, choose All. AllShapes Animated Button in Photoshop CS6 When the window pops up, choose either Append, or OK. Append will add the shapes to the end of your current shapes, and OK will replace them. Append Animated Button in Photoshop CS6 So once your shape is chosen, we’re going to want to subtract this shape from the current shape. You can do this by either selecting Subtract Front Shape from the Options Bar, or simply hold down your Alt/Option key before you start to create the shape. SubtractShape Animated Button in Photoshop CS6 Once you start creating the shape from the center, make sure to also hold down your Shift key to constrain it to a perfect circle. Leave a bit of room around the edge of the shape. WindowCutout Animated Button in Photoshop CS6 Of course, what’s a shape without Layer Styles!? I’m only going to add two; a Bevel and Emboss, and a Drop Shadow. Both will help give this shape some depth. WindowBevel Animated Button in Photoshop CS6 WindowShadow Animated Button in Photoshop CS6 Now we get to the fun stuff, the glows! This design will contain two glows. One that will act as a reflection on the back shape, and a stronger glow that will appear in the window. Let’s create the reflected glow first. Selecting the back most shape again, and quickly duplicate it one more time with Command/Ctrl + J, and clear it’s Layer Styles, just like you did earlier. DuplicateBack Animated Button in Photoshop CS6 This time, when I jump into the Layer Styles dialogue, I want to be sure to set the Fill Opacity at 0%. This will hide the contents of the shape, but allow us to see any Layer Styles that we may apply, like  Gradient Overlay. FillZero Animated Button in Photoshop CS6 This gradient is going to be a bit different than the one we added earlier. First,set the Style at Radial. RadialGradient Animated Button in Photoshop CS6 When the Gradient Editor is up, the left color is going to be the main color of the glow, which in this case, will be a nice baby blue:00a8ff. Now the right color will set at black, and will be 0% transparent. This can be done by clicking the stop that’s above the gradient bar, and then decreasing the Opacity to 0%. GlowGradient Animated Button in Photoshop CS6 Right now, you’re probably thinking, “Uh, where’s the gradient?” Well, right now, it’s hiding behind the topmost shape. Some of you may not know this, but gradients can be moved. If you place your cursor overtop of your document, you can click and drag that gradient anywhere you want. Place it at the top right corner. GlowMoved Animated Button in Photoshop CS6 You can also control the scale of the gradient is you don’t want it as large. Closing the Gradient Editor, you can scale the gradient down to around 75%, and move it to it’s final location. GlowGradientScale Animated Button in Photoshop CS6 Good, now we can move on to the main glow, which will appear in the window. Again, to keep things simple, go ahead and create aduplicate of the glow that you just worked on, again, with your Command/Ctrl J shortcut. Once it’s been duplicated, enter freetransform mode with Command/Ctrl+T, and scale this glow down, until it’s the size of the shape on top. You should see it’s path as you’re transforming it. Just like when creating a shape, holding down your Shift and Alt/Option key will scale it from the center, while keeping it a perfect circle. Return/Enter will accept the transformation. SecondGlowScaled Animated Button in Photoshop CS6 Now we can alter the gradient a touch. Once you’re back in the Gradient Editor, start by setting the right stop back at 100% opacity, and then change the color of the right stop to a dark blue, 00193e. This will give a very subtle glow to the inside of the window. Now add one more stop, around 30%. (If you click right under the gradient bar, you’ll be able to add an additional color stop, and move it into place). Once it’s in place, set the color to a lighter baby blue. 76cdff. SecondGlowGradient Animated Button in Photoshop CS6 Right now, it’s probably not looking that great. Accept the new gradient, and change the Blend Mode of the Gradient Overlay toColor Dodge. And just like the last gradient, you can move it into place if you wish. SecondGlowColorDodge Animated Button in Photoshop CS6

LET’S ANIMATE!

Phew! The design is complete, it’s now time to animate! Before I start the animation part, this technique will only work on Photoshop CS6. CS5 doesn’t have the ability to animate transformations. Sorry. icon smile Animated Button in Photoshop CS6 Alright, so there are two layers we’re going to be animating: The reflected glow, and the glow that appears in the window. Now because of the Blend Mode changes, we’re going to be animating each of these layers individually. If we were to merge both as a Smart Object, the Blend Modes would get lost, leaving us with a pretty ugly result. Instead, we’re going to convert each glow to a Smart Object, which will allow us to animate transformations. To do this, rightclick on the first glow you created (bottom glow) in the Layers Panel, and select the Convert to Smart Objectoption. ConvertToSmart Animated Button in Photoshop CS6 Now do the same for the next glow. You’ll notice, if you had changed the Blend Mode on any of the glows, converting to a Smart Object disregards the change, but you can simply change the overall Blend Mode back to Color Dodge to fix that issue. This is why we are converting each layer individually. WindowGlowSmart Animated Button in Photoshop CS6 Now it’s time to animate! To open your Timeline, you can either double click on the tab at the bottom of your workspace, or find it under the Window menu at the top. Timeline Animated Button in Photoshop CS6 Once the Timeline is visible, you will most likely need to Create a Video Timeline. This will list all of your layers, and reflect the currently selected layer from your Layers Panel. TimelineCreated Animated Button in Photoshop CS6 Let’s start with the glow on the bottom. When that layer is selected, you’ll want to expand the layer in the Timeline, to reveal the different elements that can be animated. TimelineReflected Animated Button in Photoshop CS6 We’re going to want to animate a Transform, which includes rotation. You’ll want to click on the stopwatch icon beside Transformto create the first keyframe. TimelineTransformKey Animated Button in Photoshop CS6 Once once the first keyframe has been created, scrub to the right a bit. This will be the halfway point where we’re going to make the first rotation. Timelinescrub Animated Button in Photoshop CS6 Enter freetransform mode with your Command/Ctrl+T shortcut, and then on the Options Bar at the top, you can simply enter 180for the degrees, which is the most you can rotate a layer at once. Timeline180 Animated Button in Photoshop CS6 Once your accept the transformation, the first animation will be made. Another keyframe will be automatically created. You can see it in action by scrubbing back to the first frame, and pressing your spacebar. Don’t worry if you see any loss in quality. Once the animation has been rendered, it’ll be nice and sharp! TimelineSecondKey Animated Button in Photoshop CS6 Now the same can be done for the second half of the rotation. Scrub over a bit further than the last time, enter free-transform mode, enter 180 in the degrees field again, and accept the transformation. TimelineThirdKey Animated Button in Photoshop CS6 Perfect! This glow is complete. Do the exact same thing for the top glow. Glow Animated Button in Photoshop CS6

ANIMATION TIPS!

To set the duration of the animation, at the far right corner of the Timeline, you’ll find the Work Area end point, which you can drag to the last keyframe that you created. TimelineEndPoint Animated Button in Photoshop CS6 And finally, if you want your animation to loop, rather than just play once, under the Timeline menu at the top right, you can choose to loop the playback. TimelineLoop Animated Button in Photoshop CS6 And that’ll do it! Once your animation is complete, you can either render it out as a video with the Render option at the bottom of your Timeline, or you can save it as a Gif for use on the web. Under the File menu, you’ll find the Save for Web option. Once you select Gif, at the bottom, you can choose wether it plays back once, or forever. Don’t worry if the preview looks choppy. Once it’s saved, you’ll have a nice, smooth animation. SaveForWeb Animated Button in Photoshop CS6


Homework | Week 9 | Monday

PS CS6  Animated Button TUTORIAL

    • Complete the tutorial – ANIMATED BUTTON IN PHOTOSHOP CS6 listed above
    • Create a folder in DropBox called: PS CS6  AnimatedButton
    • Title your image: date_yourname_PS_CS6_AnimatedButtonv1
    • Inside that folder place your PSD file AND GIF file of the tutorial.
    • Leave a comment on week 9 Monday with a link to your DropBox folder.
    • Upload your animated GIF to IMGUR and provide me with the link.
    • Leave a comment with a link to your DropBox folder AND Imgur animated GIF.
    • After uploading the animated GIF to Imgur, copy the HTML, go to your WordPress homework post, click on the text view and paste the HTML.

Delicious

On your del.icio.us account tag three Web Sites that focus on Photoshop CS 6,

  • Timeline
  • Animating Timeline
  • Adding Sound in PS6 Timeline

and write a note in the Delicious comments section about why you think each one would be a good resource for this class.  *Make sure you also add the tag: msuadobecreativesuite2013-02 A1 WELL AS add additional tags. 

Word as Image

UPDATE your PSD files according to feedback from today’s critiques. The following is due on Wednesday:

  • Dictionary Word Definition for Each Word
  • Thesaurus for Each of Your Three Words
  • Research – with comments for each piece of research
  • Inspiration – with comments for each inspiration
  • Mind Map
  • Three Sketches of Each Word
  • Color Sketches of Each Word
  • Photoshop Iterations
  • Final Photoshop PSD Files
  • Final Photoshop JPG Files

All of the above should be uploaded to both Flickr and your project page.

 DUE DATE: Week 9 Wednesday

  • Final Three Words Animated
  • Sound Added
  • 500 Word Document Description – this must be on your website as well as printed on paper
  • Each Word Printed Out on 11×17 Paper
  • A DropBox link to ALL files and project paper

 DUE DATE: Week 10 Monday

35 thoughts on “Week 9 | Monday

Comments are closed.