5 Pictures: Tutorial

sassy-lesbian-vriska:

I was asked to make a tutorial, so why the fuck not? My edits aren’t super cool, but I’ll do it anyway. I will teach you how to make:

First, I work in ADOBE PHOTOSHOP CS5. However, you should be able to do this all of them.

Okay, now lets get started!

First, open a canvas of 500 x 500 with these settings:

Go to your rectangular marquee tool. This is how I get the parts of my pictures that I want to be in the gif! When you click the tool, at the top, it should say Style: Normal. Click that, and change it to Fixed Size. The fixed size should be 100 px by 500 px!

Now, I went to my blog and chose 5 random pictures from my blog and brought them into photoshop. You should all be able to do this, but if you don’t know how, you can Save Image. Open. or Copy the image -> New -> OK -> Paste.

Now that you have your images, I want to use the rectangular marquee tool, and select anywhere on the image. Then I want you to drag the rectangular selection and get the position you want. Ctrl + C (or Edit -> Copy).

Paste it in your 500 x 500 document.

Do this with the rest of the photos! (Because the size of the rectangular marquee is 100 px (width) by 500 px (height) you should be able to fit 5 pics in there evenly!!). My result is this:

Decent, right?? Ha, now lets get to the animation! To get the Animation, you go to Window -> Animation.

To get every other image black and white, go to the layers pallete, and click the first layer. Then hit Ctrl+Shift+U (or Edit -> Adjustments -> Desaturate). This will cause the layer to turn black and white. Do this with the third layer, as well as the 5th layer!

Select-> Select All. Edt -> Copy Merged. New -> 500 x 500 -> OK. Edit -> Paste. Layer 1 -> Duplicate Layer -> Yes.

Go back to the document with your original 5 pictures. Edit -> Step Backwards. Edit -> Step Backwards. Edit -> Step Backwards. Edit -> Step Backwards. The reason for this is so we can make sure that all of the images are colored. NOW that you know how to, Desaturate Layer 2 and 4.

Select -> Select All. Edit -> Copy Merged. 

Go to the document where you had duplicated. Edit -> Paste. Right Click Layer 2 -> Duplicate -> Yes.

Click Layer 1 copy. Filters -> Blur -> Motion Blur -> Distance: 17 px. Okay.

Do the same for Layer 2 copy.

Time to Animate this(My animation is not up because I was screenshotting). So yeah. Make sure your animation bar is up! In the bar, there is a little arrow pointing down, with 4 lines, click this. Make frames from layers.

Change the first and third frame from to 2 sec. Change the second frame and fourth frame to 0.1.

Play your animation to see how it looks!

When you are finished, File -> Save for Web and Devices. Make sure it is under 500 KB!

My result:

http://imgf.tw/843131786.gif

And you are done! Make sure to give credit to the artists!

yeah i did rea