Week 8 | Friday

Animated Button Timeline in Photoshop CS6 | DUE WEEK 9 | FRIDAY

*****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 8 Friday 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 for your animated GIF.

 

Glow Animated Button in Photoshop CS6

VIDEO

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

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

PS CS6  Animated Button TUTORIAL | DUE WEEK 9 | FRIDAY

    • 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 8 Friday 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.

DUE WEEK 9 | WEDNESDAY

WORD AS IMAGE PROJECT II DUE ON WEDNESDAY 10/29 AT THE BEGINNING OF CLASS

All listed below should be uploaded to both Flickr, Imgur for your animate GIF and your project page.

    • 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
    • Word document description – 600 words
      • This must be on your website as well as printed on paper
    • All three words animated
    • Sound added to all three words
    • A DropBox link to ALL files and project paper

    All of the above should be uploaded to both Flickr, Imgur and your project page. Final Three Words Animated

Resource on adding sound in Photoshop

In the Photoshop animation timeline, the last line in the timeline is called AUDIO.

  • To add audio, click on the music  note button.
  • Add file.
  • Select file.
  • You can fade the audio in and out.

SAVE YOUR ANIMATED GIF WITH SOUND

  • File > Export
  • Render Video
  • Use all the default options
  • Save it to your desktop
  • Create a YouTube account
  • Upload the MP4 video file
  • In YouTube, click on share, click on embed, choose the size you want, click copy
  • Go to  your project page, click on TEXT view for your posts (not the visual view), paste the code and hit save. The video file will appear on your post.

21 thoughts on “Week 8 | Friday”

  1. HOW TO ANIMATE IN ADOBE CREATIVE CLOUD

    In this tutorial we will be making a ball that moves across the screen.

    METHOD 1

    1) Create a new document

    2) At the top of your screen, go to Window —> Timeline. At the bottom, a bar should appear. Change “Create Video Timeline” to “Create Frame Animation” by clicking on the arrow to the right. Click on “Create Frame Animation”.

    *Your first frame will appear. Frames are numbered in the top left corner of the thumbnail.

    3) Go to your shape tools and choose the Ellipse tool. Hold down shift to make your ball. Start this shape at the bottom left of the document.

    4) Duplicate your first frame. You can do this by going to your Timeline panel. At the bottom, there should be an icon that looks like a paper with a folded corner (next to the trash icon). Click on the paper icon. This is your second frame.

    5) Still on your second frame, turn off the layer with the Ellipse in your Layers panel by clicking on the eye icon. Then, duplicate that layer. Turn on the duplicate layer.

    6) With the duplicated layer, move the ball slightly up and to the right, going towards the top right corner.

    7) Repeat steps 4-6. Keep in mind to move the ball in each frame, and to turn off the layers that shouldn’t be seen.

    8) Once the ball has reached the top right corner, select your first frame. In the Timeline panel, hit the play button. Yay! You’ve successfully animated a ball.

    METHOD 2

    1) Repeat steps 1-5 in the METHOD 1 tutorial.

    2) Instead of moving the ball slightly on your second frame, move the duplicated ball to the top right corner.

    3) In your Timeline panel, select your first and second frame by holding down the shift key and clicking.

    4) At the bottom of your Timeline panel, there is an icon called “Tweens animation frame” (next to the folded paper icon).

    *This tool allows you to make “in-betweens”. These are frames that add animation between key frames, this the name “Tweens animation frame”.

    5) With your first and second frame selected, click on the “Tweens animation frame” icon. Hit “OK”.

    *Ta-da! You’ll notice that frames were added.
    6) Click on the play button.

    7) Yay! Now you’ve learned two methods of animating in Adobe Creative Cloud ✌

    ****If anyone wants any help, I’ll be glad to assist you! If you want more info on animating, frames, or using the Tweens tool, go ahead and contact me ^_^

    – Alex (twin with glasses, twin B, the clone)

  2. **How To Make A .GIF In Adobe Photoshop CS6**

    1. To open up the ‘timeline’ to make animations, look on the bottom of your Photoshop screen. It’s next to ‘Mini Bridge’.

    2. Once it’s open, you should see a frame with the no.1 to the top left of it. That is going to be the first panel that we use in our .GIF

    3. Let’s just say we want to animate a capital M and make it a W. First, we’re going to use the Type tool and type the letter M.

    4. Next, we’re going to duplicate the layer by right clicking and hitting ‘Duplicate Layer’.

    5. After that we’re going to slightly rotate the duplicated M layer. To do that go to edit > transform > rotate, or just hit Command T. We’re going to rotate the shape 45° so to make it easier, hold Shift to rotate it smoothly.

    6. Once this is done, go back down to the Timeline and click the ‘Add New Frame’ button (it looks like the new layer button).

    7. By looking at our first frame, we should see the letter M, and for our second layer we should see ONLY the duplicated letter M, so in the second frame, turn off the first letter M layer, so we should only be left with the slightly tilted letter M.

    8. After that we’re going to make another duplicate layer of the duplicate layer, so right click again and do so, AND we’re going to make another new frame in our timeline.

    9. Rotate this layer another 45° so it should be 90° rotated from our original layer. Do this duplicating and rotating process 2 more times, until the final rotation of the M looks like a W, all while still creating new frames in the process.

    10. Once we have all our frames (there should be 5 total) we’re going to make each frame last 0.5 seconds, and to do that click on where you see #sec on the bottom of the frames, and change it to 0.5 seconds.

    11. We’re almost done ☺ Now, hit the play button (you should know what a play button looks like) and let’s watch this bad Larry move.

    12. To save your .GIF go to File > Save For Web > Make sure it’s on GIF and 256 Colors > Save

    13. If anyone is struggling I will help you out! ~Kyle

Comments are closed.