{"id":407,"date":"2013-06-03T00:05:05","date_gmt":"2013-06-03T05:05:05","guid":{"rendered":"http:\/\/rockylouproductions.com\/blog_wp\/?p=407"},"modified":"2013-06-03T00:07:35","modified_gmt":"2013-06-03T05:07:35","slug":"have-a-rockin-birthday","status":"publish","type":"post","link":"https:\/\/rockylouproductions.com\/blog_wp\/2013\/06\/03\/have-a-rockin-birthday\/","title":{"rendered":"Have a Rockin’ Birthday"},"content":{"rendered":"

I wanted to give my my son-in-law a special birthday card this week. \u00a0AnimatedGIFAssignments1086<\/a> was just the thing.<\/p>\n

Make someone a special birthday card, but make it extra special by including a GIF!! \u00a0Try to make the design unique to them (it’s THEIR birthday, after all!).<\/p>\n

\"Animated<\/a>

‘Shakin’ It Up’ for a special birthday card<\/p><\/div><\/blockquote>\n

I’m starting to get good at this now with all the practicing I’m doing with my new GIFing skills. \u00a0I use Photoshop Elements 11 for the Mac as my image editing tool, and here’s my tutorial on the making of this GIF.<\/p>\n

\"Original

Original Card<\/p><\/div>\n

Step 1:<\/strong> For this project I started with an image I found on-line from a free create-your-own birthday card site. \u00a0I chose this image because it had a solid white background which makes it much easier when you get to the point of merging the layers. \u00a0And that was important because on this card I wanted to make the guy dance, but keep the text still. \u00a0I also wanted to add a little something extra to personalize it.<\/p>\n

\"Lasso<\/a>

Selecting Image with the Lasso Tool<\/p><\/div>\n

 <\/p>\n

St<\/strong>ep 2:<\/strong> Use the lasso tool to capture only the guitar player as illustrated above. \u00a0Copy and paste it into a new layer with a transparent background. \u00a0Then grab the image of the “Have a rocking Birthday” text and do the same thing. \u00a0Then you’ll end up with two pieces of the image on two different layers, with transparent backgrounds.<\/span><\/p>\n

\"Making<\/a><\/p>\n

Step 3:<\/strong> To personalize the card create another layer with your text or a special image. \u00a0I used this free clipart icon of a man sitting at a computer making music as my son-in-law, Michael, has just taken up a new hobby learning how to create music on the computer. \u00a0I think he might be using Audacity even.<\/p>\n

\"Guitar<\/a>

Step 4: Create Guitar Player Image Layers<\/p><\/div>\n

Step 4:<\/strong> Duplicate the guitar player to create three identical layers. \u00a0Rotate two of the images +5deg and -5deg. \u00a0You now have 3 guitar players, one leaning forward, one leaning back and one in the middle.<\/p>\n

Step 5:<\/strong> For the border I made a rectangle with a transparent fill in PowerPoint (I know my way around the program very well, and it was just easier to do it there.) and saved it as a picture in the .PNG format. \u00a0This allows you to maintain the transparency of the images. \u00a0We’ll also need a solid white layer. You should end up with 7 unique layers at this point. But we’ll need to make duplicates of layers 4-7 below to be used during the layer merging process.<\/p>\n

1. Guitar Player tilted backward (1)<\/p>\n

2. Guitar Player in the center (1)<\/p>\n

3. Guitar Player leaning forward (1)<\/p>\n

4. “Have a Rockin’ Birthday” text (x3)<\/p>\n

5. The computer guy icon (x3)<\/p>\n

6. The border with a transparent middle (x3)<\/p>\n

7. A solid white layer (x3)<\/p>\n

Step 6:<\/strong>If you haven’t already, duplicate layers 4-7 so that you have 3 of each as noted above.<\/p>\n

Step 7:<\/strong> Now it’s time to start merging the layers together so that you end up with only the guitar player moving and everything else remaining still. \u00a0These new merged layers are what will be used to create the actually GIF. Make sure you save your work often and I’d highly recommend saving the work you’ve done creating the individual image layers as its own file at this point – just in case you make an error during the merge process, you have something to go back to. \u00a0You really don’t want to start all over again do you?<\/p>\n

Note: The white layer should go at the bottom of your stack. \u00a0It is supposed to be the background. \u00a0Otherwise when you merge the layers you’ll end up with only a white image.<\/p>\n

\"Rockin

Final merged image<\/p><\/div>\n

Merged Layer 1: Guitar player tilted back = \u00a01 + 4 + 5 + 6 + 7<\/span><\/p>\n

Merged Layer 2: Guitar player in center = \u00a02 + 4 + 5 + 6 + 7<\/p>\n

Merged Layer 3: Guitar player leaning forward = \u00a03 + 4 + 5 + 6 + 7<\/p>\n

Duplicate merged layer 2 (the guitar player in the center) so he’ll rock forward and backward evenly. Ta Da! \u00a0You now have the four layers you’ll need to create your GIF. \u00a0Center => Forward => Center => Backward. If you’ve done it right you’ll only see the guitar player rockin’.<\/p>\n

Step 8:<\/strong> In PhotoShop Elements 11 you select “Save For Web” to preview your GIF. On the right hand side menu, select GIF, Transparency, Animate,<\/strong>\u00a0and set your speed in the “Frame Delay” box at the bottom. The default delay of 0.2 seconds works for most projects. Click on preview over at the bottom left and you can watch your masterpiece in action.<\/span><\/span><\/p>\n

\"SaveForWebWindow_8in\"<\/a><\/p>\n

Step 9:<\/strong> \u00a0If you like what you’ve done, save it as a GIF. \u00a0To view the file once it’s on your computer you’ll need to open it with your browser. \u00a0On my Mac I right click the file, select ‘Open With’ Google Chrome.<\/p>\n","protected":false},"excerpt":{"rendered":"

I wanted to give my my son-in-law a special birthday card this week. \u00a0AnimatedGIFAssignments1086 was just the thing. Make someone a special birthday card, but make it extra special by including a GIF!! \u00a0Try to make the design unique to them (it’s THEIR birthday, after all!). I’m starting to get good at this now with […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[64,12,460,46],"tags":[48,65,66],"class_list":["post-407","post","type-post","status-publish","format-standard","hentry","category-animated-gif","category-assignments","category-ds106","category-tutorials","tag-animatedgifassignments","tag-animatedgifassignments1086","tag-animatedgiftutorials1086"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3zfrO-6z","jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/rockylouproductions.com\/blog_wp\/wp-json\/wp\/v2\/posts\/407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rockylouproductions.com\/blog_wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rockylouproductions.com\/blog_wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rockylouproductions.com\/blog_wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rockylouproductions.com\/blog_wp\/wp-json\/wp\/v2\/comments?post=407"}],"version-history":[{"count":17,"href":"https:\/\/rockylouproductions.com\/blog_wp\/wp-json\/wp\/v2\/posts\/407\/revisions"}],"predecessor-version":[{"id":437,"href":"https:\/\/rockylouproductions.com\/blog_wp\/wp-json\/wp\/v2\/posts\/407\/revisions\/437"}],"wp:attachment":[{"href":"https:\/\/rockylouproductions.com\/blog_wp\/wp-json\/wp\/v2\/media?parent=407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rockylouproductions.com\/blog_wp\/wp-json\/wp\/v2\/categories?post=407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rockylouproductions.com\/blog_wp\/wp-json\/wp\/v2\/tags?post=407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}