Interdisciplinary

Images For Web

Resolution:

Print must be 300DPI, whereas displaying devices uses images either 72 DPI or 144 DPI ( for retina display)

Colour Mode:

Because you are using images exclusively on a screen, the colour mode must be RGB.

Vector / Raster:

Web images are purely pixel based, whilst you can display PDF files online, they can’t be embedded into HTML like a standard pixel based image files. Everything online is raster. HTML5 is a way that you can use vector designs.

JPEG:

Joint Photographic Experts Group.

JPEG is a lossy (Image quality gradually decreases in quality the more you save it because it compresses it each time). It also doesn’t support transparency.

PNG:

Portable Network Graphic.

Can support transparency and is the best file type to use for web.

GIF:

Graphic Interchange Format.

Moving image used for the web. GIF’s have a 256 colour palette because of this many GIFs will look warped because they have to combine colours to keep into the 256 colour allowance.

SVG:

Scalable Vector Graphic.

This is the format to use vectors online and works with HTML5. SVG can be saved from illustrator.

Creating GIFs

In our lesson we were creating GIFs using Photoshop. These were the steps used to create a GIF.

  • New Document: 800/600 and 144 resolution
  • Window → Timeline
  • Create Video Timeline
  • Place large text in the middle
  • Add a layer → “Layer one”
  • Paint brush tool 200 size and 0 hardness → Stroke across the words
  • Right click on layer one → Create Clipping mask
  • Right click purple block → No motion. Change to → Pan
  • Move colour to the right hand corner
  • Move animation slider to the end
  • Move colour to the bottom left hand corner
  • Press spacebar to play
  • File → Export → Save for web (Legacy)
  • Save as GIF 128 Dithered
  • Change “looping options” to Forever
  • Click preview

hello-its-me

After learning this process we were then told to experiment with different motions to create more GIFs.

oh-my-god cats-gone-wild

This was a very fun and educational process as creating GIFs is a great tool to have as a graphic designer. I will most likely use GIFs in my upcoming projects and continue to experiment with them in the future.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s