CREATING PHOTOSHOP GIF ANIMATIONS
Example of Text Animation Gif
Instructions
You will use PHOTOSHOP to make Glitter Text. You then will upload the file to PHOTOBUCKET at http://www.photobucket.com. You need to go to the site and sign up for an a free account.
1. Watch the video. You may find it useful to keep the Weebly page open on your computer and open a new window to watch portions of the video while you work.
2.. Select only two fonts, one for: a) Charlie Hustle; and a different font for the b) Tag Line. You may use only three colors or less for the text. You may select any color for your background but there must be a strong contrast between the background and the text and good "readability".
3. Ask for help as you work on the project if you are stuck on a step.
4. When you save your project, be sure to use SAVE FOR WEB option. In the option box you must make sure the file format GIF is selected in the box below the word PRESET.
5. When you click "SAVE" an options box appears. Be sure at the bottom of the box you select to save IMAGES only. You will have done this correctly if you see the file extension .gif appear in the title of your file at the top of the box. Save this file either on a USB memory stick or save it to your own folder on the OC school server. Another option is to save the file to your desktop and then EMAIL it yourself so that you have a copy of the file. When you turn off this computer the file WILL NOT BE SAVED unless you have stored it in your own folder on the school's server.
6. Go to PHOTOBUCKET, log in, and upload your photo. Your image will appear on the bottom of the main Photobucket page. Click on it. Select share. Copy the HTML code by highlighting it and then hit CONTROL and the C key together.
7. Log in to your own Weebly site. Go to your CHARLIE HUSTLE page. In ELEMENTS mode select MORE on option box at top. Then drag HTML icon to your Charlie Hustle page. Click on the text that appears in the html box after you drag it to your page. Erase the text. Then hit together the two keys: CONTROL and V. Your html code from your Photobucket page should appear. In the HTML option box that is shown on your page after you clicked to erase the text, you will see an option to have your image appear on the LEFT, CENTER, or RIGHT portion of your page. Select the option that makes sense for your page design.
8. After your image appears you can make it larger or smaller by clicking on the image, and then pressing down on your mouse and dragging on the red square on the corner of the image.
9. Now click outside the text box where you pasted your HTML code and hit PUBLISH (top right corner).
10. Go to your published site (http://your site name.weebly.com) to make sure you can see your ANIMATED gif file.
1. Watch the video. You may find it useful to keep the Weebly page open on your computer and open a new window to watch portions of the video while you work.
2.. Select only two fonts, one for: a) Charlie Hustle; and a different font for the b) Tag Line. You may use only three colors or less for the text. You may select any color for your background but there must be a strong contrast between the background and the text and good "readability".
3. Ask for help as you work on the project if you are stuck on a step.
4. When you save your project, be sure to use SAVE FOR WEB option. In the option box you must make sure the file format GIF is selected in the box below the word PRESET.
5. When you click "SAVE" an options box appears. Be sure at the bottom of the box you select to save IMAGES only. You will have done this correctly if you see the file extension .gif appear in the title of your file at the top of the box. Save this file either on a USB memory stick or save it to your own folder on the OC school server. Another option is to save the file to your desktop and then EMAIL it yourself so that you have a copy of the file. When you turn off this computer the file WILL NOT BE SAVED unless you have stored it in your own folder on the school's server.
6. Go to PHOTOBUCKET, log in, and upload your photo. Your image will appear on the bottom of the main Photobucket page. Click on it. Select share. Copy the HTML code by highlighting it and then hit CONTROL and the C key together.
7. Log in to your own Weebly site. Go to your CHARLIE HUSTLE page. In ELEMENTS mode select MORE on option box at top. Then drag HTML icon to your Charlie Hustle page. Click on the text that appears in the html box after you drag it to your page. Erase the text. Then hit together the two keys: CONTROL and V. Your html code from your Photobucket page should appear. In the HTML option box that is shown on your page after you clicked to erase the text, you will see an option to have your image appear on the LEFT, CENTER, or RIGHT portion of your page. Select the option that makes sense for your page design.
8. After your image appears you can make it larger or smaller by clicking on the image, and then pressing down on your mouse and dragging on the red square on the corner of the image.
9. Now click outside the text box where you pasted your HTML code and hit PUBLISH (top right corner).
10. Go to your published site (http://your site name.weebly.com) to make sure you can see your ANIMATED gif file.
Example of Animated Image Gif
Example of Text & Image Animation
Instructions
You will use PHOTOSHOP to make this animated gif of an image of Charile Hustle, text (the words "Charlie Hustle" and your group's tag line), and a background image.
The goal is to create a gif that is well balanced overall in terms of use of your Hustle photo, the arrangement of your type and photos; the colors selected for your type, background, and images, and a clear message that fits your tag line and brand identity. Pay attention to readability. It should have a strong contrast in colors along with a choice of fonts that fits the mood of your group's tagline. You may bring in accessories to use with Charlie Hustle to shoot your photo next week in class if you need to but it has to be done and uploaded during our next class, (Thursday). Your Hustle photo must be in focus (you can correct exposure and color in Picnik but you must take an image that is in focus--sharpening tools are only good for tiny adjustments) unless there is a strong creative reason for it not to be in focus that ties in with your brand.
. You then will upload the file to PHOTOBUCKET at http://www.photobucket.com. You need to go to the site and sign up for an a free account.
1. Watch the video. You may find it useful to keep the Weebly page open on your computer and open a new window to watch portions of the video while you work.
Here is another tutorial that may also be useful.
http://creativetechs.com/tipsblog/build-animated-gifs-in-photoshop/
You can do a search on YouTube for other video tutorials as well.
2.. Select only two fonts, one for: a) Charlie Hustle; and a different font for the b) Tag Line. You may use only three colors or less for the text. You may select any color for your background but there must be a strong contrast between the background and the text and good "readability". (NOTE: It is recommended that you use the same fonts you chose for your glitter project. You are trying to create a "brand" for your group and consistency in font styles is a good way to do that.)
3. For this project you need to think about the ORDER you want the different elements to appear. Look at the example above. You can animate two or more layers together by clicking on those layers (eyeball should be showing for each layer you want to animate in a group). Above you will see that the word "monkey" was on one layer and the two words "gone bad" put on another layer. The purpose was to keep the phrase "gone bad" as one visual item to be "read" as a phrase rather than broken into two individual elements. This was a designer choice and not a functional necessity. You will have to decide in what order to show the different elements on your page.
4. You can use Picnik to paint out unneeded parts of a photo and to crop the image down to the size you need. If you are familiar with other image editing programs, such as Photoshop, Photoshop Elements, Illustrator, etc., you may use those to prepare your images. BUT YOU MUST USE PHOTOSHOP TO CREATE THIS ANIMATION.
5. NOTE: You can use non-copyrighted images you find on Google for your background image. Be sure to first type in CREATIVE COMMONS and then your subject in the search line to obtain images you are legally allowed to use on your site.
3. Ask for help as you work on the project if you are stuck on a step.
4. When you save your project, be sure to use SAVE FOR WEB option. In the option box you must make sure the file format GIF is selected in the box below the word PRESET.
5. When you click "SAVE" an options box appears. Be sure at the bottom of the box you select to save IMAGES only. You will have done this correctly if you see the file extension .gif appear in the title of your file at the top of the box. Save this file either on a USB memory stick or save it to your own folder on the OC school server. Another option is to save the file to your desktop and then EMAIL it yourself so that you have a copy of the file. When you turn off this computer the file WILL NOT BE SAVED unless you have stored it in your own folder on the school's server.
6. Go to PHOTOBUCKET, log in, and upload your photo. Your image will appear on the bottom of the main Photobucket page. Click on it. Select share. Copy the HTML code by highlighting it and then hit CONTROL and the C key together.
7. Log in to your own Weebly site. Go to your CHARLIE HUSTLE page. In ELEMENTS mode select MORE on option box at top. Then drag HTML icon to your Charlie Hustle page. Click on the text that appears in the html box after you drag it to your page. Erase the text. Then hit together the two keys: CONTROL and V. Your html code from your Photobucket page should appear. In the HTML option box that is shown on your page after you clicked to erase the text, you will see an option to have your image appear on the LEFT, CENTER, or RIGHT portion of your page. Select the option that makes sense for your page design.
8. After your image appears you can make it larger or smaller by clicking on the image, and then pressing down on your mouse and dragging on the red square on the corner of the image.
9. Now click outside the text box where you pasted your HTML code and hit PUBLISH (top right corner).
10. Go to your published site (http://your site name.weebly.com) to make sure you can see your ANIMATED gif file.
The goal is to create a gif that is well balanced overall in terms of use of your Hustle photo, the arrangement of your type and photos; the colors selected for your type, background, and images, and a clear message that fits your tag line and brand identity. Pay attention to readability. It should have a strong contrast in colors along with a choice of fonts that fits the mood of your group's tagline. You may bring in accessories to use with Charlie Hustle to shoot your photo next week in class if you need to but it has to be done and uploaded during our next class, (Thursday). Your Hustle photo must be in focus (you can correct exposure and color in Picnik but you must take an image that is in focus--sharpening tools are only good for tiny adjustments) unless there is a strong creative reason for it not to be in focus that ties in with your brand.
. You then will upload the file to PHOTOBUCKET at http://www.photobucket.com. You need to go to the site and sign up for an a free account.
1. Watch the video. You may find it useful to keep the Weebly page open on your computer and open a new window to watch portions of the video while you work.
Here is another tutorial that may also be useful.
http://creativetechs.com/tipsblog/build-animated-gifs-in-photoshop/
You can do a search on YouTube for other video tutorials as well.
2.. Select only two fonts, one for: a) Charlie Hustle; and a different font for the b) Tag Line. You may use only three colors or less for the text. You may select any color for your background but there must be a strong contrast between the background and the text and good "readability". (NOTE: It is recommended that you use the same fonts you chose for your glitter project. You are trying to create a "brand" for your group and consistency in font styles is a good way to do that.)
3. For this project you need to think about the ORDER you want the different elements to appear. Look at the example above. You can animate two or more layers together by clicking on those layers (eyeball should be showing for each layer you want to animate in a group). Above you will see that the word "monkey" was on one layer and the two words "gone bad" put on another layer. The purpose was to keep the phrase "gone bad" as one visual item to be "read" as a phrase rather than broken into two individual elements. This was a designer choice and not a functional necessity. You will have to decide in what order to show the different elements on your page.
4. You can use Picnik to paint out unneeded parts of a photo and to crop the image down to the size you need. If you are familiar with other image editing programs, such as Photoshop, Photoshop Elements, Illustrator, etc., you may use those to prepare your images. BUT YOU MUST USE PHOTOSHOP TO CREATE THIS ANIMATION.
5. NOTE: You can use non-copyrighted images you find on Google for your background image. Be sure to first type in CREATIVE COMMONS and then your subject in the search line to obtain images you are legally allowed to use on your site.
3. Ask for help as you work on the project if you are stuck on a step.
4. When you save your project, be sure to use SAVE FOR WEB option. In the option box you must make sure the file format GIF is selected in the box below the word PRESET.
5. When you click "SAVE" an options box appears. Be sure at the bottom of the box you select to save IMAGES only. You will have done this correctly if you see the file extension .gif appear in the title of your file at the top of the box. Save this file either on a USB memory stick or save it to your own folder on the OC school server. Another option is to save the file to your desktop and then EMAIL it yourself so that you have a copy of the file. When you turn off this computer the file WILL NOT BE SAVED unless you have stored it in your own folder on the school's server.
6. Go to PHOTOBUCKET, log in, and upload your photo. Your image will appear on the bottom of the main Photobucket page. Click on it. Select share. Copy the HTML code by highlighting it and then hit CONTROL and the C key together.
7. Log in to your own Weebly site. Go to your CHARLIE HUSTLE page. In ELEMENTS mode select MORE on option box at top. Then drag HTML icon to your Charlie Hustle page. Click on the text that appears in the html box after you drag it to your page. Erase the text. Then hit together the two keys: CONTROL and V. Your html code from your Photobucket page should appear. In the HTML option box that is shown on your page after you clicked to erase the text, you will see an option to have your image appear on the LEFT, CENTER, or RIGHT portion of your page. Select the option that makes sense for your page design.
8. After your image appears you can make it larger or smaller by clicking on the image, and then pressing down on your mouse and dragging on the red square on the corner of the image.
9. Now click outside the text box where you pasted your HTML code and hit PUBLISH (top right corner).
10. Go to your published site (http://your site name.weebly.com) to make sure you can see your ANIMATED gif file.