Getting back into the rhythm of ds106 thru #western 106. I created a GIF as sort of a promo and then remembered – “document the process for self and others” I am a little rusty- falling into some unfavorable avoidance lately – but here we go in trying to get back to better practice habits.
The ability to embed and respond with GIFs across social media and publishing platforms has delivered an abundance of tools to quickly churn out a GIF through generators such as imgur.com or giphy.com and many more. (Google it )
You can get some really great things from video and it is something to get excited about! It’s fun! And you can spend endless hours watching videos and searching for the right frames or looking at work other have done. I have handouts from first trainings I did on web design and html. One of the “no” things was anything blinking of moving – it was considered bad design. And yes it was at 72 pixels and clip art or light bulb “under construction” text. Things have gotten a lot slicker and its almost mandatory to have moving parts to capture interest. There are still levels of taste and best use. I do hate going to a page and things pop up every time I move my mouse and start playing…but a good GIF you can just watch over and over again. So the quest is to create the one that does that for viewers.
But there is are still some highly creative and solid reasons to create animated GIF art from still pictures or non-video. When you need a GIF to communicate a thought, idea, a message and not just a witty response or comment it is time to get down to building. DS106 has many GIF artists of all levels of skill and the cool thing is how this community learns and builds and moves to next levels by working from each others work as well as responding with new creations.
A real idea bright shiny object to chase is ds106 GIF TV set up by @johnjohnston. You can watch for hours all the created GIFs and get ideas as well as levels to to try to achieve.
http://johnjohnston.info/ds106giftv/
Creating a Simple GIF from Still Pictures with Static Background
Disclaimer: I have tried to be as close to each detail as possible -but in creating there are lots of re-dos and fits and starts that one just has to work thru in their own way. Hopefully I have given enough to help someone along. Things get a little fuzzy as the process goes on -but hope not too confusing.
Tool used was PhotoShop Creative Cloud. I have used GIMP as well and most of the steps could be done in the open source tool but how to get to certain functions will be PS specific in this write up. I do have the luxury of having PhotoShop obtained as retirement gifts so use it.
The #western106 GIF is a basic creation was made from 5 layers and the animation is 3 frames.
3 images to move, and a background and a text layer which become merged.
Steps:
- silhouette of 3 riding cowboys opened as NEW in PS.
- Size was set to 400 pixels to start at a reasonable size for a GIF at the end of creation to avoid some of the inevitable tweaking for size condensing etc.
- The original picture had a solid white background. I only wanted the black silhouettes of the riders.
- Using the Magic Wand Tool (fourth down from the top of the tool tray use control to switch between quick select and magic wand) I selected white background areas and hit delete. You will need to “unlock” the layer to delete background. TIP – I usually go up to Layer>Duplicate Layer so that I have the original layer just in case I overdo, delete too much or decide later in a process that I need to add another layer of a differently tweaked original. You can use Edit>step backwards – but sometimes that is just not enough. I continue one section at a time until all of the white background is gone. TIP – If the image seems too small to work with or the areas seem tight go to the bottom of your window and increase the size to 300% or more. Return down to a % that fits in the window when you are done.
- After the background was deleted. I selected the remaining image with the Quick Selection tool – same place as magic wand -but switch it back by using control. I then positioned the image in the frame where I thought it was going to look best.
- Go to Layer>duplicate layer or keyboard Command J. Do this 4 times. You can name the layers anyway that works with your thought processes.
- I started with layer 1. Using the Rectangular Marquee Tool, I selected around the image.
- With the second layer also in view (turn layers on with the eyeball icon left of the layer name in the layer panel on the right of the screen) Go to EDIT>Transform>Rotate.
- Hold the shift key while rotating the image left or right. This is also the step in which if you want to change perspective, scale, skew etc.
- Click on the check mark in the upper bar of your window to set in place.
- You can now turn the eyeball off and on from either layer and see how it moves. Adjust as necessary.
- Move to layer two and rotate and position.
- Move to layer three and rotate and position.
- You now have your moving image and action and will go forward in creating your static background.
- Before you bring in your background – go to WINDOW>Timeline
- When the Timeline Panel opens there is a menu in the upper right corner of the small window.
- Choose Make Frames From Layers.
- Go back to Menu and make sure New Layers Visible in All Frames is checked. I also check Create New Layer for Each New Frame.
- Locate the image you want to use for your background. It helps to have it as close to the same size as you can. With this project I used a download from my sister-in-laws Flickr page at the medium size – so it was just slightly bigger than the 400pixel square. I knew I was going to play with size and point of view to get the right amount of sky, foreground and horizon in the spot I wanted.
- TIP: Save yourself lots of futzing. While it seems excessive it is easier in the end. Open a new project and set the canvas to the same size as your GIF – do the steps below and all your adding of text etc. and tweaking and merge it down to one layer. Copy the layer and then paste it into your GIF project. OR do a SAVE AS and you have a duplicate project – create your background using similar steps below and then export out as a quick JPEG, open, copy and paste into your original project.
- To create your background – There are several ways to bring the picture in -the easiest have found is that I open the photo on my machine select all>copy. I then go to PS click in the window and PASTE. A new layer is created automatically. Since it is the background move the layer to the bottom of your Layer list.
- In this project I add text so there was another futzing around to do. You could eliminate this futzing if you created your background exactly as you wanted it and then brought it in – Which I strongly encourage. Using the Text Tool (The “T” in the tool bar) and then click on your background and insert a text box. I edited my text worked with the font, size and color and then also used the Word Art Feature to make it a WAVE form to lay over the mountains in a better perspective so it didn’t look pasted over the top. When I had this the way I wanted I selected the background and the text layer. Went to Layer>Merge Layers. It then becomes one.
- After pasting your background into your project (remember it is now a new layer and should be put at the bottom of the layer list) Adjust scale and position to where you want it. You can click on one of the other layers to see where things fall. you are only actively working in the layer you have selected (background)
- Click the check mark and set in place.
- You will see the background now added to the each frame in the timeline – You did it!
- Now just set your timings for each frame the default is no delay – very fast. This takes lots of tries depending on your creative make up and decision making skills – me I like to see lots of options and tend to try many and save multiple versions until I find one that really sticks with me.
- Set the loop to FOREVER. Use the play and stop buttons to view.
- Go to File>Export> Save for Web (Legacy) and work with the file size if needed by adjusting colors etc.
- Save and then upload to wherever you are going to view or open via the file menu of your browser.
THEN if you want to get really spiffy – add sound! @mdvfunes added sound to this GIF– it adds a whole other realm to the outcome- love it. Read how to add sound from @johnjohnston on his blog.
Here is the PSD File if you want to see it or use it. You can also download a GIF and open it in PS or GIMP and see layers that were created. This helps me in dissecting and trying to figure out how someone else may have created something. Sometimes the most fancy really are the simple ones and others – NO WAY can I figure them out even with dissecting! But I will keep trying. 🙂
LINKS I have used to GIF learn (no particular order of preference):
- http://blog.invisionapp.com/7-tips-for-designing-awesome-gifs/
- Learning Links form GIFIt UP
- http://tabletopwhale.com/2014/11/03/how-to-make-an-animated-infographic.html
- http://blog.invisionapp.com/7-tips-for-designing-awesome-gifs/
GIMP
Inspiration Links:
- http://gifitup2015.tumblr.com/
- http://gifadog.tumblr.com/
- http://jjgifs.tumblr.com/
- http://mbransons.com/
- http://iamtalkytina.com/category/ds106/assignments/animated-gif/august-2013-gif-challenge/
- http://rockylouproductions.com/blog_wp/
- @RonaldL who posts in the G+ Community and Twitter
