In My Place - Coldplay

(Source: coldplaymania)

2 weeks ago (563 notes ) ─reblog
#coldplay #gif #coldplay gif #chris martin #In My Place #A Rush of Blood to the Head #Coldplay lyrics

Sara’s GIF Tutorial

Please note: THIS TUTORIAL IS FOR PHOTOSHOP CS5. Different versions may not support this tutorial. I also use a Mac, so directions might be different for PC users. This tutorial is also for users who have a BIT of Photoshop knowledge (layers, basic controls) as I will NOT be covering the extremely beginner information. I don’t know if this is the absolutely correct way to make GIFS, but it’s exactly how I do it :)

Have you been yearning to know how to make animated GIFS from videos, but you’ve never had the help you need? Here’s your chance. This step by step tutorial should show you everything you need to know about creating those ever so lovely GIFS that tumblr seems to rave over.

Step 1 - Download the video you want in a compatible format (.MOV/.MP4)

CS5 can directly open videos for editing. We need to get your desired video downloaded into the correct format.
Find the video you want to edit on YouTube (it’s the easiest to pull video URL’s from). For this tutorial, I’m going to use Coldplay’s music video “Paradise”. The best video quality is HD (720 or 1080). It should indicate if the video is HD. Most official Coldplay music videos are HD. Other quality Coldplay videos include any clips from the MTV World Stage or the Madrid Unstaged Show. Most interviews also have great quality. Really, anything made for TV. Fan filmed clips from concerts are usually poor quality (pixelated, unclear, shaky), but these can still be used.
Once you are to the video on YouTube, click the “Share” button underneath the video.

Once the “Share” button is clicked, it should make a drop down menu with a link already highlighted in blue. Copy that link.
Next, you’ll need to download this video to your computer, so you have the actual file on your harddrive. I am going to offer you two different methods of doing this. The first is using a website called Zamzar. It’s a great converter site that sends the converted file to any e-mail address you my choose. Sometimes, it lowers the quality of videos. The other way is using a program called JDownloader. I currently use this method. For Zamzar users, click the tab on the homepage that says “Download Videos”

Completely erase the “http://” in the box for Step 1. Paste the copied link from the YouTube video into the Step 1 box.

In Step 2, click the drop down arrow and choose .MOV format.

In Step 3, enter an e-mail address in which you would like the video file to be sent to. Then, in Step 4, click “Convert”.
The video will take a few minutes to convert and send to your email. It shouldn’t take too long though. Once you receive the email, click the link in the email that directs you to the download back on the Zamzar website. It should start the download once you’ve reached this page (at least for Mac users). Once you have the downloaded file, you are ready to open it in Photoshop and start editing.
If you’d rather use JDownloader, go ahead and visit this site and download the program. Again, this link goes to the Mac version of JDownloader. There is a PC version available on there homepage. Fully install the program.
Once you’ve got JDownloader working, navigate to the “Linkgrabber” tab at the top of the window.

Then, click the “Add URL(s)” button in the bottom left corner.

A pop-up box will appear that says “Add URL(s)”. Paste the copied link from the YouTube video in this box. Then click “Parse URL(s)”.
Several different types of files will appear. Click the “[+]” button next to the link that says YouTube Video (MP4). It’s very important that you choose the MP4 link. Once you do, other files with appear. You will want to click on the video with the highest quality (either 1080 or 720). For some reason, JDownloader makes the SAME file appear twice. It does not matter which one you choose of the identical title, they are exactly the same. The photo below helps explain:

Right click (control + click) on one of the highest quality file in the list. Then, select the 2nd option that says “Continue With Selected Link(s) (1)”.

This should automatically take you to the “Download” tab, where the video you just selected has started downloading. For Mac users, the file automatically saves to your “Downloads” folder. It may take a few minutes for the entire video to download.
Once it has completely downloaded, your file is ready to be opened in Photoshop and edited!

Step 2 - Editing the video in Photoshop

Open the downloaded .MOV or .MP4 file in Photoshop.
Before we start editing, you’ll want to make sure you have all of the palettes open that you will use. You can select the palettes at the top under “Window”. You’ll need to have “Animation” open for sure. I also open standard ones like “Color”, “Swatches”, “Layers”, “Brush”, “Brush Presets”, “Character”, “Paragraph”, and “Adjustments”.
Ok, since we’ve got those open, we’ll start figuring out what section of the video we’d like to use for our gif (usually it’s only 1-2 second sections).
Using the “Animation” window, start moving the blue timeline meter from left to right to basically fast forward or rewind throughout the video, finding whatever section you want to use.

Once you figure out what few seconds you’d like to make the gif from, leave your blue timeline meter at that mark. For example, I am using the moment when Chris takes off his elephant head while riding a unicycle during “Paradise” (which is around 2:25 minutes into the video).

Next, slide the far left blue bar (next to the 00 time) over to the start of where you want the clip to begin. Slide the far right blue bar over to the end of where you want the clip to stop. Then, push the play buttom. These two bars basically mark the beginning and end of your clip. You adjust these at anytime during this process if you change your mind. If you’d like to view the timeline frames more closely, you can zoom in by clicking what looks like a mountain icon on the bottom left of the “Animation” window. This helps you more finely adjust the start and stop time.

Next, we are going to crop your clip down to the finished size - the size that the post will actually be. There are some universal sizes for Tumblr photosets. Perfect squares usually measure 160pixels X 160pixels (in 9X9 photosets). They can be bigger than this, but any smaller will make the gif pixelated. Here’s an example:

Perfect squares in the 4X4 photosets measure 245px X 245px. They look like this:

Rectangular gifs usually measure 245pixels X 160pixels. They are usually ideal for 2X6 or 2X8 photosets. This measurement works fabulously with videos as well. You can change the height (160px) for varies sizes, but the 245px is standard and can not be tampered with (or else you’re post will look strange). Here’s some examples of those:

This is 245px X 140px

This is 245px X 160px

This is 245px X 170px

This is 245px X 190px

Basically, just play with different sizes that fit the limitations. It’s all up to what you personally like or think will work best.
Ok, so with my video still edited down to the clip I want to use, select the “crop” tool in Photoshop. At the top, enter the size of width and height you want your GIF to be. I’m going to make mine the standard 245px X 160px. On your video, drag the crop tool over the area you want. Once you’ve made a box, you can adjust the scale of the crop and the positioning. Hit enter, and enter again, and BOOM! You have the cropping of your GIF now :)
Here’s the fun part - editing color and adding all those neat effects! I’ll cover some of the basic effects I like to use.
A fabulous effect to use is the “Sharpening” filter. Simply hover over the “Filter” tab at the top of the screen and go to Sharpen. It will float out another few options. Just stick with the first one - Sharpen. Yay! Now you’re GIF has been sharpened. I usually do it twice. Play with what you like though.
Now, play with some coloring effects in the “Adjustments” palette. “Brightness” will overall lighten or darken your GIF. “Levels” will individually edit whites, greys, and blacks. “Selective Color” will intensify or lessen specific colors. I LOVE boosting cyan all the way up - especially when Chris’s beautiful eyes are in the GIF :)
You can also add gradients and play with the Layer Style. My favorite Layer Styles are “Multiply”, “Screen”, “Overlay”, and “Hardlight”. Play around with all of them though - sometimes one that I hardly ever use looks the best! It all depends on the image or video that you are using.
Here’s my gif with NO editing:

Here’s my gif with sharpening and coloring:

Just mess around with all of these settings until you get something you really like. Trial and error is the best way to learn with coloring.
Ok, now, let’s add some textures! I’m going to add a light texture and a pattern texture. You get download millions of textures from deviantart. You want to paste the texture into your video document in a new layer. I’m going to use this light texture.
Once you’ve pasted it, resize the image smaller to your desired size. Then, you’ll adjust the Layer Style which is in the “Layer” palette at the very top. It defaults to “Normal”. You’ll want to change it to either “Lighten” or “Screen”. These two work best for light textures. For this specific light texture, I used “Screen” and set the opacity to 80%

Now, I’m going to add a pattern texture, this one specifically. Again, paste the image in another layer in your video document. Resize the image to your liking. Then select the Layer Style “Overlay” and set the opacity to 60%.

Here’s what my GIF looks like now!

Now we’re ready to add some text! I am going to use the font Ballpark (it’s one of my favorites). Using the text tool, just click anywhere on your GIF. Type whatever you’d like to be on your GIF. I’m just going to use “Paradise”. Choose whatever color you like - just make sure it’s still readable! By using your move tool, you can reposition your text where ever you like.
Next, I’m going to add a slight drop shadow, to make the text pop from the background a bit. With your text layer selected, click the “fx” symbol at the bottom of the layer palette and select the first option - “Drop Shadow…” It will pop up with an option box. Set the opacity to 20% or else the drop shadow is too overpowering.

Here’s my GIF with text!

Lastly, we are going to add my famous paint brush effect behind the text. It’s soooo simple - it’s a brush! Deviantart has again, thousands. For this GIF, I’m going to use one brush from this set. Feel free to download it yourself. Once you have the file, just drag it over to the Photoshop icon and it will be placed in your brushes automatically. You can view your brushes in the “Brush” palette.
Once you’ve got those brushes in Photoshop, make a new layer, directly underneath the text layer. I used “Paint Marker 08” brush. Resize the brush by pushing the “[” key to make it smaller and the “]” key to make it bigger. Once you’ve got the size you want, rotate the brush by going to the “Brush” palette. Use the circle rotator in the center right to turn it the way you want.

Once you’ve got the rotation and size down, choose a color, then position it on the empty layer underneath and text layer, and stamp it! There you go!
Here is my final result!

Step 3 - Saving the GIF for Web

Ok! We’ve got our file all edited now, so we need to save it properly to display its quality on the web. Go to the top of the window, and click on the “File” tab. Select “Save File For Web & Devices…” Then, a pop up screen will load - it might take a few seconds.
Once it loads, it should look like this:

Here’s where things can get confusing. First off, you’ll want to check the file size, which is listed in the bottom left corner. Mine is at 700.8K. Which is fine. Try to keep your GIF size under 800K. If you go over this limit - sometimes Tumblr will only show the GIF as the first frame, so it will look like a photo and not an animated GIF. If you’re GIF happens to be over 800K, you’ll need to narrow down the time of the GIF by adjusting those blue bars as we did earlier.
Next, we are going to set the saving preferences.
The first box should say “GIF”.
Then, underneath that, select “Adaptive” which is the highest quality of those choices. “Perceptual” is the lowest. I like using “Adaptive” the best, but again, just play with the other options.
Underneath that option, select “Pattern” as your dither algorithm. Again, I think “Pattern” looks the best, but play with those other two if you like. I usually don’t need any transparency dither (like 99.9% - I’ve only used it…once maybe?), so just select “No Transparency Dither”.
For “Color” you can select two different options - 256 or 128. 256 is obviously the best, but it takes up a lot of memory and makes your GIF closer to the 800K limit. If you have the memory to do so, definitely make it 256. If not, go with the 128 - it still looks pretty darn good. I have used that on my Paradise GIF.
The last thing you’ll need to do is decide if you want your GIF to keep repeating (the answer is usually - yes). If so, select “Forever” on the “Looping Options”. The rest of the saving options do not need to be changed, so hit, save, name your file, and NOW YOU’VE MADE A GIF! YOU CAN UPLOAD IT TO TUMBLR!