Make a GIF from a Video Just Like in Tumblr

make a gif from a video

You must have seen moving images on tumblr or on any website or an advertisement. Almost all the tumblr images you have seen is a gif image format and most of them was created from a video. So, how can we make a gif from a video file?

First, let’s talk about what is a gif image.

A gif or Graphics Interchange Format supports animations of up to 256 colors for each frame.

It is a palette based which only hold up to 256 colors.

So, what are the requirements to be able to convert a video into a gif image?

  • Photoshop
  • Quicktime Player -An application required by Photoshop. Use to import and render frames within the video. It is capable of handling various formats like video and image. Download the player here.
  • Video file

What Photoshop does is it gets the frames from the video and converts it into layers.

The layers then used in the animation frames in the gif image.

Step 1 Import the Video

make-a-gif-form-a-video-file-open

Open Photoshop. Head over to the top menu and click on File-Import-Video frames to layers.

An Import Video to Layers window will pop-up.

Step 2 Select Range to Import

make-a-gif-form-a-video-import-video-to-layers

There are two options to choose from, from beginning to end or selected range only.

Most of the time you will choose the selected range since the option will take all the frames within the video.

It also depends on the video on how much frames it has every second so it would avoid creating hundreds of frames.

Use the trim control guides to select the range and duration.

See arrows within the figure above.

Step 3 Make frames from Layers

make-a-gif-form-a-video-layer-frames

The frames will become layers now.

Depending on the range you selected is how much layers you will have.

Now, we will open the timeline or animation tab. 

Click on the window on the top menu and choose timeline.

It should open a tab/panel with your layers into it.

make-a-gif-form-a-video-timeline

For an older version of Photoshop, you will select the animation option.

An animation tab will open.

If there will be no frames click on the toggle menu at the right side of the tab.

Select make frames from layers.

See 1 : Make sure you choose the forever in the loop option so the animation will loop again and again in our gif image.

See 2: If you have something to edit/change within you frames, click on this toggle icon and it will be converted into a video timeline.

In video timeline you can adjust the frame’s specific duration, style, position and opacity.

make-a-gif-form-a-video-import-convert-video-to-timeline

Step 4 Saving into a GIF Image

To save a gif image, click on file-save for web or hit Alt+Shift+Ctrl+S.

make-a-gif-form-a-video-import-save-for-web-gif

On the save for web window, make sure you select the GIF (see 1) file format.

Adjust how many colors we want lesser than 256 (see 2).

The colors within the image you created are seen at the color table (see 3).

Decrease the colors and the color table will also eliminates a color.

Lessening the colors as a result the image will be grainy so it is best to leave it at 256 colors.

We can also adjust the image size, width and height.

Save it by hitting save and test it by opening with browsers like chrome and firefox.

Now we have created a gif image from a video using Photoshop.

Adobe Photoshop for Beginners Tutorial (Part one)

photoshop-for-beginners-tutorial

Photoshop is a graphic editor software developed and published by Adobe Systems. It has been used widely used because of its useful functions to either simple or complex graphic related creations. Learn Adobe Photoshop for beginners’ basic tips and tools description provided below.

Window

When you accidentally closed a panel in your workspace or if you forgot where it is and you can’t find it window menu is a great help. Click on the window menu on the top and you’ll find the options you were looking for.

Workspace

Workspace is a great way to set your Photoshop interface according to the kind of projects you are working.

For example, if you are working on Image color adjustments in Photoshop then you need histogram and adjustments panel so you would choose the Photography workspace set by Photoshop for you. Go to Windows- Workspace –Photography then a panel dedicated to Image adjustments appear.

You can also create your own workspace if you want a customize tools/panels to appear on your interface. First, Display your desired panels and when done just go to Window- Workspace- New Workspace. A window pops up to fill in the workspace name and hit save.

Rulers

Rulers are located on the top and the left side of your canvas. If you can’t find it just go to View-Rulers. There are two of it, the horizontal and vertical. Add a ruler guide to your canvas by clicking and dragging it to your canvas.

rulers-in- Adobe Photoshop for beginners

Actions

Do you have loads of work to be done and you took the same steps over again? Creating an action saves a lot of time.

Tools

Didn’t know the name or the shortcuts of the tools located on the left-hand side? Hover over the tool and information about it will tip up. You could also click on the tools that have caret which means that it has another option with the same kind of tool for you to choose. If it is not available in your workspace, you can find it be clicking on Window- Tools.

PSD File

JPEG is a compressed image format. Saving your work in this format is not the better idea if you want to resume editing. Save it as a PSD file format and you’re good to go.

Smart Object

Making a layer into a smart-object is a non-destructive technique. It acts as a pre-compose layer file. It preserves image or shape’s original quality when you resize an image to smaller and vice versa.

To make the layer into a smart-object, right-click on it and choose make layer into smart object.

See also:

Interface

Do not like the default dark gray interface color of your workspace? Change it by going to edit menu-preferences-interface and choose your desired color theme.

Grids

Grids are your friends. You might want to use grids so that you can position objects evenly or specifically on your canvas.

How to Edit Indexed GIF Image Layer Inside Photoshop

indexed gif photoshop

The indexed GIF image layer in Photoshop is because of the index color mode. Indexed layer prevents any changes within the image but what if we want to edit it?

If you want to edit an indexed gif image in Photoshop.

The first thing you will notice is an indexed layer of the image. Unfortunately, you cannot modify an image in a locked layer so we need a way to unlock it.

The usual double clicking or dragging the lock icon into the trash does not work.

gif indexed layer indexed gif image

To solve that.

Change your layer’s mode to RGB, CMYK or Lab Color. Click on your indexed layer and go Top menu then click on Image-Mode and choose whatever you prefer.

Read Also: Adobe Photoshop for Beginners Tutorial 

indexed gif image image mode

Now you can select the content of the gif image unlocked.

Save your image as GIF.

You need to go to file-save for web and select gif in the drop down option. It can be found below the preset field drop down.