Skip to content Skip to sidebar Skip to footer

Can Movie Studio 15 Upload as .gif

A GIF, or "Graphics Interchange Format", is a compressed image file format that allows for animation. There are many ways to create a GIF, simply Photoshop is fast and easy, with built-in tools for paradigm manipulation and animating.

Just like classic animation, an animated GIF is made up of a series of still images played sequentially to create the illusion of move. Detect a GIF off the internet and drag it into Photoshop, and you volition see the separate frames that make up the animation. These frames are what nosotros're going to build in this tutorial in gild to animate a killer banner ad GIF.

finished gif with sunglasses sliding onto face
Learn how I fabricated this GIF! Photo via graham wizardo.

Without further ado, here's how to make an animated GIF in Photoshop.

Step 1: Prepare the dimensions and resolution of your Photoshop document

Fix up your document ahead of time. Fifty-fifty if your only ambition is to create a shareable GIF for your friends on social media, letting the size of your photos or video dictate the size of your document might make the file larger than you lot need information technology to be, which translates into a poor quality GIF. In general, somewhere in the region of 600px-800px is fine for a square image.

A screenshot of the Photoshop interface showing the New Document window
Set the dimensions, resolution, and color mode of your Photoshop document

Dimensions

For this project, we are working with a imprint advertizing GIF, which has standard sizing guidelines. I chose the 720×300 layout. Brand certain your units are in pixels.

Resolution

To proceed the file size every bit low equally possible, a resolution of 150 is fine. I went with 300 since I know my GIF isn't going to be that big. Brand sure your units are in Pixels/inch.

Color mode

Finally, animated GIFs are made for the screen, so set your color mode to RGB color. Press Create to open your new document.

Pace ii: Import your prototype files into Photoshop

Making a GIF from still images

Get to File > Scripts > Load Files into Stack and select the Browse button in the Load Layers window that comes up. This brings upward the Finder/Explorer window where you tin can browse for your files and select all of the ones y'all need. When you're finished, click Open and and then OK in the next window. The files will be imported into a split up document, from which yous can select all layers and drag them into your working certificate.

Making a GIF from video

If y'all are converting a video into a GIF, get to File > Import > Video Frames to Layers.

Stride 3: Open up the timeline window

Go to Window > Timeline. This will open a panel in the lower third of the canvas. In the center of the panel, click on the arrow to open the dropdown card, and select Create Frame Animation.

Step 4: Convert your layers into frames

A screenshot of the Photoshop interface highlighting how to make animation frames from layers
If y'all have your still images already prepared, click on the hamburger menu icon in the timeline and select Make Frames from Layers

Your first frame volition already exist gear up upwardly, fabricated of all of the visible layers (meaning the layer visibility, or eye icon, is switched on) in your document. Now all you have to exercise is fill the Timeline with multiple frames to simulate movement. There are 2 means to do this: import frames y'all take already prepared or create your animation from scratch in Photoshop. This section will cover the first scenario.

If y'all have already set upwards withal, sequential images ahead of time (or are working from imported video frames, see Step 2), click on the hamburger menu icon in the upper right corner of the Timeline panel. Select Make Frames From Layers. You lot will see the timeline populate with frames from your layers.

Footstep 5: Indistinguishable frames to create your animation

A screenshot of the Photoshop interface highlighting the tools panel of the Timeline window
Below the timeline is the tools panel, which contains (among others) the loop setting, the preview button, and the duplicate frame button

If you have not set up the still images ahead of fourth dimension or need to suit parts of the animation yous created in Stride four, you tin can create the animation manually frame by frame (which is how I fabricated my animation). To do this, duplicate the last frame in the timeline (click on the earmarked page icon in the tools panel beneath the timeline), make the changes you need to make on your image, and echo.

For example, my animation is a pair of sunglasses sliding down over the field of study's eyes. To do this, I duplicated the frame, moved the sunglasses downward a few pixels (how many pixels was a affair of trial and fault—more than on that later), and repeated this process until I had about fifteen frames and the sunglasses were where I wanted them, resulting in smooth downward glide blitheness.

An animated GIF incorporating the pixel sunglasses meme
Photo via graham wizardo.

Step 6: Set up the delay time of each frame

A screenshot of the Photoshop interface highlighting the delay setting in the timeline
The duration setting can be establish at the bottom of each frame

You tin find the delay timer at the lesser of each frame (the time in seconds with a dropdown arrow next to it).

Click the arrow to bring upwardly the menu and choose the amount of time y'all want the frame to brandish on screen.

You can set the duration of individual frames or multiple frames at once past selecting all of the frames you demand and using the dropdown menu for ane of them.

Tip: Many frames with short delays is the cardinal to shine animations whereas few frames with long delays creates a jerky, stop-move upshot.

Pace 7: Ready the number of times the animation will loop

Also located in the tools panel beneath the timeline is the loop setting. Y'all tin can set your animation to loop Forever, Once, or a specific number of times.

Step viii: Preview and iterate on your animation

The play button in the timeline window's tool panel allows you to preview your animation. Use this to brand certain that your animation is believable and behaving as it should. If it isn't, endeavour tinkering around with delay or adding more than frames until you go the results that you want. Conversely, this is too a great time to experiment with removing equally many frames every bit yous tin without breaking the illusion of motility in gild to get the everyman file size possible.

Step 9: Consign your Photoshop certificate as a GIF

A screenshot of the Photoshop interface highlighting how to export an animated GIF
File > Export > Relieve for Web (Legacy)…

First of all, don't forget to relieve your working PSD!

Once you're ready to export your final GIF, go to File > Export > Save for Web (Legacy). (Note: if you are working with an older version of Photoshop, it will likely be File > Save for Spider web & Devices). This will bring upwardly the export window.

There are a lot of options here, but we but need a handful for our purposes. Start, make sure you lot set the file blazon to GIF in the dropdown box in the upper right. The rest of the options I've highlighted in the image below are optional but helpful for producing a lightweight file. Let's walk through them now.

Trim the file size

Your main goal with the remaining options is to keep your file size low by decreasing the amount of details in your GIF without sacrificing image quality. Call back that a large file size means a boring load time, which can exist especially punishing for marketing purposes like banner ads, where the viewer wasn't looking for your content and won't be waiting around for it to load. Aim to stay beneath 1MB. Up to 5MB is doable on about websites but pushing it. You tin can see your GIF's file size in the bottom left corner of panel containing the preview image.

A screenshot of the Photoshop interface highlighting the export options in the Save for Web window
These are the setting you should pay attention to in the Save For Spider web window

Reduce the color information

Unnecessary color information is the biggest culprit when it comes to a large file size. To cutting it down, adjust the total number of colors in the dropdown box labeled "Colors:" and reduce the dither (the blending of pixels to create seamless shading) setting beneath it. As you brand changes, keep an eye on the preview image of your GIF on the left side to encounter how the resolution is being affected.

Convert to sRGB

sRGB, or "Standard RGB," has a narrower range of colors than the default "Adobe RGB," so make sure to cheque that box.

Salve

Once you lot're happy with your resolution and file size, hit the relieve push button at the bottom of the window. To brand certain that everything came out alright, you tin preview the finished GIF file by dragging it into a browser's URL box.

A GIF made in Photoshop incorporating the pixel sunglasses meme
My finished banner advert GIF. Photograph via graham wizardo.

Stride 10: Share your finished Photoshop GIF!

And at that place you have information technology—your finished GIF, set up to be shared all across the earth wide web. Now that yous have the skills to create basic Photoshop animations from videos and still images, you tin gifify virtually anything!

While this method is useful for quick, fun GIFs, GIFs for professional person purposes should be a lot more robust than my silly sunglasses advertising. Learning the software is straightforward, just animation itself is a tricky art form that takes practise and expertise. When you're ready to upward your GIF game, make sure you're working with a professional.

Looking for professional person assistance creating an animation?
Work with one of our talented designers!

This article was originally written by Rebecca Creger and published in 2013. Information technology's been updated with new information and examples.

jaquesbachim.blogspot.com

Source: https://99designs.com/blog/design-tutorials/create-a-gif-in-photoshop/

Post a Comment for "Can Movie Studio 15 Upload as .gif"