Showing posts with label gif. Show all posts
Showing posts with label gif. Show all posts

Tuesday, January 26, 2016

How To Create An Animated GIF

Create an Animated GIF
The End Product
This tutorial guides you through the step by step process of creating an animated GIF. An animated GIF is an image encoded in graphics interchange format which contains a number of images or frames in a single file. The frames are presented in a specific order in order to convey animation. You can read more about file types here.

Step 1:

To start we open the image of the fish you want to make a GIF of in Photoshop.

Start Image

Step 2:

We want to make the parts of the image that aren't the fish transparent, we do this by selecting them with the magic wand tool, fourth down in a single column. Then left clicking on the area we want to make transparent, in this case the white space around the fish. If you can't select it all at the one time, press and hole shift, before selecting the rest of the image you want to include.

Selecting The Area Around The Image

Step 3:

Double click on the layer on the right of the screen, and click OK on the new layer pop up window. Once this is done, press the back-space key to delete the areas selected.

Step 4: 

Then click new layer in the bottom right corner of the screen, then move that layer below the original layer with the fish. Then click on the Paint Bucket Tool and select a blue or turquoise hue.

Selecting The Background Color

Step 5:

Select the layer with the fish on it, select edit, then select transform and then scale. Select the box at the bottom right, press and hold shift to maintain the original proportions  of the image and and pull up to the top left corner.

Changing The Scale Of The Image

Then drag the image to of the fish, from one quarter way, to a third, down the screen. Like so. 

Situating The Image

Step 6:

Click on the window tab at the top at the Photoshop screen and make sure timeline, which should be seventh from the bottom, is ticked on. In the middle of the timeline, at the bottom of the screen, you will see either Create Frame Animation or Create Video Timeline. Make sure it is set on Create Frame Animation, you an change it in the drop down menu to the right signified by the downward facing arrow.

The Timeline Options

Step 7:

In the timeline window click the Duplicate Selected Frames button, it can be found just left of the bin icon shown in the image below. 

After You Click Timeline Option

Once you have clicked the Duplicate Selected Frames button you should have an extra frame displayed, like in the image below. 

The First Two Duplicated Layers

Step 8:

Click on the newly duplicated layer and use the move tool at the top of the tool bar, to move the image of the fish to the right hand side of the canvas.

Situating The Image Of The Duplicate Frame

Click on one layer then press and hold Shift, with Shift held, select the other layer. Then click on the Tweens Animation Frames button which can be found to the immediate left of the Duplicate Selected Frames button. Once greeted with the pop up window, enter 15 for the Frames to Add, and then click OK. There should be a similar timeline to the one shown below.

Once The Two Images Have Been Tweensed 

Step 9:

Select the last frame, duplicate the layer with the image of the fish. Once duplicated select the new layer. Click Edit at the near top of the screen, and then click Transform. In the Transform menu, select Flip Horizontal second from the the bottom.

New Layer Created On The Last Frame

Step 10:

You should now have two fish looking different ways on every frame so far. To compensate for this, select the first frame press and hold Shift and then select the second last fame. Then turn the visibility off on the duplicate layer with the fish facing left. On the last frame turn the visibility off on the original layer and make sure you have the visibility on on the duplicate layer. Select the last frame and duplicate it, then on the duplicate frame turn the visibility off on the original layer containing the image of fish and, and turn the visibility on on the duplicate layer with the fish facing left.

Turn Off The Invisibility On The Original Layer

Step 11:

On the last frame you should have a visible layer with an image of a fish on the right hand side of the layer facing left. Select this frame and the select Duplicate Selected Frames. Then select the new frame and select the layer with the left facing image of the fish and use to Move Tool to move him
right like before.
Situating The Image Of  The New Layer

Step 12:

Select the last frame then press and hold Shift, and select the second last frame, Then, with the two last frames selected, select Tweens Animation Frames. Again enter 15 into Frames to Add. Almost there... Select file save for web, in the bottom right corner of the screen there is Looping Options, make sure it is set to Forever. Save the file to your desktop, then drag it into your browser window. 

The Final GIF



Monday, November 30, 2015

What File Type Should I Use...?


Digital file types
Choosing the right file type can be more important than you think

The Basics...

There are many different file types used to encode digital images. JPG, GIF, TIFF, PNG, BMP, PDF and PSD are just a few. But what are they, what do they stand for and what are the differences? Part of the reason for the variety of file types is the need for compression. Image files can be quite large, and the larger the file the more disk space it uses and the slower it is to download. Compression is a term referring to the ways of reducing the size of a file. Another reason for the variety of file types is that images differ in the number of colours they contain. Therefore if an image is made up of only a few colours, a file type can be designed to use this as a way to reduce the file size.

Compression schemes can be either lossy or lossless.


A lossless compression does not discard any information. It attempts to represent an image in a more efficient way, while making no compromises in accuracy. In contrast, lossy compression allow some reduction in the image quality in order to achieve a smaller file size. Here I discuss the basic features of a 7 common file types.



PDF

PDF (Portable Document Format) was invented by Adobe Systems and due to the worldwide use of Adobe programs and the free and easy availablity of the Adobe Reader PDF has become the global standard for capturing and reviewing rich information from almost any application on any computer system and sharing it with virtually anyone, anywhere. There is also a guarantee that the original image will remain unchanged, unedited, uncompressed when opened after it has been e-mailed or downloaded which is ideal when sending or sharing graphic design files where layout, colours and image quality are so important.

PDF is a formal open standard known as ISO 32000. Maintained by the International Organization for Standardization, ISO 32000 will continue to be developed with the objective of protecting the integrity and longevity of PDF, providing an open standard for the more than one billion PDF files in existence today.

Back to Top



JPG

JPG (Joint Photographic Experts Group) is optimized for photographs and similar continuous tone images that contain many, many colours. For this reason all digital cameras save in a JPG format by default. It can achieve excellent compression ratios while still maintaining very high image quality. JPG works by analyzing images and discarding kinds of information that the eye is least likely to notice. It stores information as 24 bit colour. JPG is the most popular format for nearly all photographs uploaded to the internet.

Never use JPG for line art. In these type of images where there are areas of uniform colour with sharp edges, JPG does not perform well. For these type of images GIF and PNG are better suited.

Back to Top



PSD

PSD (PhotoShop Document) is the format used by the graphics program Photoshop. This is the preferred working format as you edit images in the software, because only this format retains all the editing power of the program. Photoshop uses layers, filters and effects to build complex images, and layer information may be lost in other formats such as GIF and JPG. PSD files need to be much larger than other file formats in order to store all this information. For this same reason, however, be sure to save your end result as a standard GIF or JPG, or you may not be able to view it when your software has changed but moreover you cannot use PSD files for web images or in animation programs.

Back to Top



TIFF

TIFF (Tagged Image File Format) is a very flexible format that can be lossless or lossy. Although normally TIFF is used almost exclusively as a lossless image storage format that uses no compression at all. Most graphics programs that use TIFF do not compress and as a result file sizes can be quite big.

Some digital cameras often offer TIFF as am output option as well as the default JPG. TIFF is usually the best quality output from a digital camera as JPG always results in at least some loss of quality. However, the file size of TIFF is huge. A more important use of TIFF is as a working storage format as you edit and manipulate digital images in a photo editing programme such as Photoshop. TIFF can save the different image layers that you have been editing while JPG can only save the file as a single flat image. Also when you go through several load, edit, save cycles with JPG storage, the image quality degrades each time. TIFF is lossless, so there is no degradation associated with saving a TIFF file.

On the downside TIFF files should not be used for web images as the file size is so large that they take a long time to load and some browsers will not even render them

Back to Top



PNG

PNG (Portable Network Graphics) is a lossless storage format. In contrast with common TIFF usage, however, it looks for patterns in the image that can be used to compress the file size without the loss of any quality. The compression is exactly reversible, so the image is recovered exactly.

PNG is becoming increasingly popular as it is superior to GIF and JPG depending on the situation. PNG produces smaller files and allows more colors than GIF and PNG also supports partial transparency. Partial transparency can be used for many useful purposes, such as fades and antialiasing of text.

In terms of superiority to JPG if you want to display a photograph exactly without loss on the web, PNG is your choice. All modern web browsers support PNG, and PNG is the only lossless format that all web browsers support.

Back to Top



GIF

GIF (Graphics Interchange Format) images create a table of up to 256 colours from a selection of 16 million. If the original image has fewer than 256 colours, GIF can render the image exactly but when the image contains more than 256 colours, software that creates the GIF uses any of several compression algorithms to approximate the colours in the image with the limited palette of 256 colours available. For this reason do not use GIF for photographic images, since the restriction of 256 colours per image is much too low for a decent quality photograph.

GIF achieves compression in two ways. Firstly, it reduces the number of colours in colour-rich images, therefore reducing the number of bits needed per pixel. Secondly, it replaces reoccurring patterns with a short abbreviation: instead of storing 'white, white, white, white, white,' it stores '5 white'. Thus, GIF is 'lossless' only for images with 256 colours or less. For a rich, true colour image, with more than 256 colours GIF could lose up to 99% of the colours.

Back to Top



BMP

BMP (Bitmap), also known as Device Independent Bitmap (DIB) file format or simply a bitmap, is a raster graphics image file format used to store bitmap digital images, independently of the display device such as a graphics adapter, especially on Microsoft Windows and OS/2 operating systems. The BMP file format is capable of storing 2D digital images of any width, height, and resolution, both monochrome and colour, in various colour depths, and optionally with data compression, alpha channels, and colour profiles.

The simplicity of the BMP file format, and its widespread familiarity in Windows and elsewhere, makes it a very common format that image processing programs from many operating systems can read and write. Many older graphical user interfaces used bitmaps in their built-in graphics sub-systems.

While most BMP files have a relatively large file size due to lack of any compression, many BMP files can be considerably compressed with lossless data compression algorithms such as ZIP, where in extreme cases of non-photographic data they can be reduced to just 0.1% of original size, because they contain redundant data. Some formats, such as RAR, even include routines specifically targeted at efficient compression of such data.

Back to Top




NOTE:This list only documents the most common file formats and is not an extensive file format list. I do however intend to add to it in the near future



close
Banner iklan disini