Image Types Vector vs. Raster

Similar documents
Vector Bitmap EPS Encapsulated PostScript Vector EPS EPS CDR CMX CGM DXF WMF scalable objects independent of resolution (unlimited)

R.L. HAMMETTE & ASSOCIATES

Thursday, November 17, 11.

Advanced High Graphics

HOW TO SAVE YOUR DESIGN FILES

Check your document s safe margin, bleeds and trim marks before uploading.

Understanding file formats

color bit depth dithered

Adobe Graphics Software

Publication Quality Graphics

ARTWORK REQUIREMENTS Artwork Submission

Digital Graphics Primer

1.6 Graphics Packages

Print Services User Guide

Logo & Icon. Fit Together Logo (color) Transome Logo (black and white) Quick Reference Print Specifications

Web graphics. Introduction

Art Requirements for CHOCOLATE ITEMS

Brand guide template. A few things to note: Remove this page. This is an example guideline for a made up company called ACME CO.

Frequently Asked Questions about Text and Graphics

FILE PREP GUIDELINES ART REQUIREMENTS:

MEDIA RELATED FILE TYPES

Art Department Specs.

drawing tools and illustration features of PowerPoint

Digital Signage Content Creation Guidelines

Malco Products, SBC. Corporate Trademark Guidelines EXTERNAL USE ONLY

INDESIGN AND PHOTOSHOP

creating figures Research Imaging Solutions

creating figures Research Imaging Solutions

The diverse software in Adobe Creative Suite 2 enables you to create

Posters, Flyers and Programme or Web Image content will look much better (and be printed more easily) if some basic design guidelines are followed.

3 x 5 CHOCOLATE RECTANGLE item number 3019

Creating an Animated Navigation Bar in InDesign*

Creating Transparency

Final Study Guide Arts & Communications

4 x 4 COMBO BAR with CIRCLE CENTER item number 2002

Format Type Support Thru. vector (with embedded bitmaps)

Graphic Standards Guide 2008 Version 2.0

DIS: Design and imaging software

Digital File Preparation Guide

Data Representation From 0s and 1s to images CPSC 101

Adobe Photoshop CS2 Reference Guide For Windows

Layout Basics For Non-Designers. xrocket Script, 36pt. Eeronauts, 400pt

Web Design, 5 th Edition

Graphic Design Artwork, Design & Signage requirements. Artwork, Design & Signage Requirements

SUGAR COOKIE item number 4006

File Preparation. For best results, please follow the guidelines below.

Skowhegan, Maine Branding Style Guide

1/17/15 ART 2423: LECTURE 1. Movable, reusable type. Overview of Printing History. Project 1A Bound Hand-Lettered Book.

Programs We Support. We accept files created in these major design and layout programs. Please contact us if you do not see your program listed below.

The diverse software in the Adobe Creative Suite enables you to create

+ Film vs Digital. n Film and CMOS sensors capture images in completely different ways:

PRODUCTION PHASES CHANGES

Preview from Notesale.co.uk Page 2 of 88

Industrial Marking and Labeling, Inc. with all fonts converted to outlines or

Adobe EXAM - 9A Adobe InDesign CS5 ACE Exam. Buy Full Product.

Electronic Artwork Information for Authors Glossary and definitions

Using Dreamweaver, Photoshop, and Fireworks: CS38: Graphics Production for the Web. Stanford University Continuing Studies CS 38

Vector- drawn: what is the meaning of " on the fly " in vector images? It means that computers draw the image as per instructions.

Essential Graphics/Design Concepts for Non-Designers

DRAWING VECTOR VS PIXEL SHAPES IN PHOTOSHOP CS6

DOWNLOAD OR READ : WHATS THE DIFFERENCE IN PROTESTANT AND ROMAN CATHOLIC BELIEFS PDF EBOOK EPUB MOBI

Chapter 1 Introduction to Photoshop CS3 1. Exploring the New Interface Opening an Existing File... 24

III-6Exporting Graphics (Windows)

CS101 Lecture 12: Image Compression. What You ll Learn Today

BEST FILE FORMAT FOR HIGH RESOLUTION

OPTIMIZING PDFS WITH ACROBAT PRO 8

DOWNLOAD OR READ : THE IMAGE THE ICON AND THE COVENANT PDF EBOOK EPUB MOBI

HTML/XML. XHTML Authoring

User Services. WebCT Integrating Images OBJECTIVES

Lesson 3 Creating and Using Graphics

Adobe InDesign Notes. Adobe InDesign CS3

21st-Century Image and Data Exchange Standards

Computing Basics. Business Education & Computer Science Mr. Dukes

DIRECTV Message Board

Lesson 7 Working with Graphics

Best practices for producing high quality PDF files

Must Have Graphic Tips

ENVIRONMENTALLY RESPONSIBLE PRINTING ARTWORK GUIDE BOOK ALL YOU NEED TO KNOW ABOUT CREATING ARTWORK FOR PRINT TOGETHER.

Artwork Guidelines YOUR KEEP-ME GUIDE TO SUPPLYING ARTWORK FOR UNBEELIEVABLY GOOD PRINTS

MULTIMEDIA AND CODING

FLEXTEC CORPORATION Prepress Guidelines February 2015

A R T W O R K G U I D E

Image coding and compression

WE NEED THE FOLLOWING ORDER INFORMATION FROM YOU

Cut Sheets, Snap Outs & Edged Glued

Starting Photoshop and Uiewing the Workspace

Getting Started ~ Student Web Design Basics Dreamweaver CS 5.5

Logo Standards Manual March 2014

INFS 2150 / 7150 Intro to Web Development / HTML Programming

MS Publisher 2007: Graphics. Lesson Notes Author: Pamela Schmidt

ADOBE 9A Adobe IIIustrator CS4.

BEST BUDDIES DESIGN GUIDELINES. Advertising & General Applications

Reviewer s Guide. Morpheus Photo Warper. Screenshots. Tutorial. Included in the Reviewer s Guide: Loading Pictures

Designing Maps to Maximize Impact

Text & Design 2015 Wojciech Piskor

BOYALL GRAPHICS & PRINT LTD. Go to contents

File Preparation for Specialty Inkjet Printing

Technical Aspects of Working with Digital Media

If these steps are not followed precisely as demonstrated in this tutorial, you will not be able to publish your site!

Presenta(on Tools Adobe Illustrator. November 6, 2017

Transcription:

Image Types Have you ever wondered when you should use a JPG instead of a PNG? Or maybe you are just trying to figure out which program opens an INDD? Unless you are a graphic designer by training (like me!), chances are you ve never needed to understand things like what separates a TIF from a PDF or a PSD. While the large variety of image formats may seem overwhelming, there is a method to the madness. We ve put together a useful outline to help you understand the difference between each file format, and when they are appropriate to use. Vector vs. Raster First things first, what is the difference between vector and raster? Raster images are constructed by a series of pixels, or individual blocks, to form an image. JPEGs, GIFs and PNGs are all raster images. Every photo you find online or in print is a raster image. Pixels have a defined proportion based on their resolution (high or low), and when the pixels are stretched to fill space they were not originally intended to fit, they distort resulting in blurry or unclear images. In order to retain pixel quality, you cannot resize raster images without

compromising their resolution. As a result, it is important to remember to save raster files at the exact dimensions needed for the application. Vector images are far more flexible. They are constructed using proportional formulas rather than pixels. EPS, AI and PDF are perfect for creating graphics that require frequent resizing. Your logo and brand graphics should have been created as a vector, and you should always have a master file on hand. The real beauty of vectors lies in their ability to be sized as small as a postage stamp, or large enough to fit on an 18-wheeler! If you re not sure whether you have a vector version of your logo, here s a little trick for you. Call the company that printed your business cards or the vendor that embroidered your logo on a shirt. Very often they will have a vector file of your logo that they can send to you for your records. High Resolution vs. Low Resolution Have you heard your designer talk about DPI or PPI? DPI stands for dots per inch and PPI translates to pixels per inch. These units of measure are essential for determining if the density of pixels in an image is appropriate for the application you are using. The biggest thing to note when determining what DPI or PPI you require is if you are using an image for print or web. Websites display images at 72dpi, which is low resolution; however images at this resolution look really crisp on the web. This is not the case for print. Best practices for printing an image will require it to be no less than 300dpi. Don t try to trick the system. A lot of magic can happen in Photoshop, but creating pixels out of thin air isn t one of them. Pulling an image off of the web and trying to get it to fit the dimensions of your print project just won t work. You will end up with a pixelated image that appears stretched and distorted. The Different Extensions & When to Use Them BMP The Windows Bitmap or BMP files are image files within the Microsoft Windows operating system. In fact, it was at one point one of the few image formats. These files are large and uncompressed, but the images are rich in color, high in quality, simple and compatible in all Windows OS and programs. BMP files are also called raster or paint images. BMP files are made of millions and millions of dots called pixels, with different colors and arrangements to come up with an image or pattern. It might an 8-bit, 16-bit or 24-bit image. Thus when you make a BMP image larger or smaller, you are making the individual pixels larger, and thus making the shapes look fuzzy and jagged. BMP files are not great and not very popular. Being oversized, bitmap files are not what you call web friendly, nor are they compatible in all platforms and they do not scale well.

Pros of BMP: Works well with most Windows programs and OS, you can use it as Windows wallpaper Cons of BMP: Does not scale or compress well Again, very huge image files making it not web friendly No real advantage over other image formats JPEG (or JPG) - Joint Photographic Experts Group JPEGs might be the most common file type you run across on the web, and more than likely the kind of image that is in your company's MS Word version of its letterhead. JPEGs are known for their lossy compression, meaning that the quality of the image decreases as the file size decreases. You can use JPEGs for projects on the web, in Microsoft Office documents, or for projects that require printing at a high resolution. Paying attention to the resolution and file size with JPEGs is essential in order to produce a nice looking project.since 1994, JPEG has been considered the standard. Pros of JPEG: 24-bit color, with up to 16 million colors Rich colors, great for photographs that needs fine attention to color detail Most used and most widely accepted image format Compatible in most OS (Mac, PC, Linux)

Cons of JPEG: They tend to discard a lot of data After compression, JPEG tends to create artifacts Cannot be animated Does not support transparency PNG Portable Network Graphics PNGs are amazing for interactive documents such as web pages, but are not suitable for print. While PNGs are "lossless", meaning you can edit them and not lose quality, they are still low resolution. The reason PNGs are used in most web projects is that you can save your image with more colors on a transparent background. This makes for a much sharper, web-quality image. Pros of PNG: Lossless, so it does not lose quality and detail after image compression In a lot ways better then GIF. To start, PNG often creates smaller file sizes than GIF Supports transparency better than GIF Cons of PNG: Not good for large images because they tend to generate a very large file, sometimes creating larger files than JPEG. Unlike GIF however, it cannot be animated. Not all web browsers can support PNG. GIF Graphics Interchange Format GIFs are most common in their animated form, which are all the rage on Tumblr pages and in banner ads. It seems like every other day we have a new Grumpy Cat or Honey Boo

Booanimated GIF. In their more basic form, GIFs are formed from up to 256 colors in the RGB colorspace. Due to the limited number of colors, the file size is drastically reduced. This is a common file type for web projects where an image needs to load very quickly, as opposed to one that needs to retain a higher level of quality. Pros of GIF: Can support transparency Can do small animation effects Lossless quality they contain the same amount of quality as the original, except of course it now only has 256 colors Great for images with limited colors, or with flat regions of color Cons of GIF: Only supports 256 colors It s the oldest format in the web, having existed since 1989. It hasn t been updated since, and sometimes, the file size is larger than PNG. TIF Tagged Image File A TIF is a large raster file that doesn t lose quality; it is usually used when saving photographs for print. Don t use this file on the web; it will take forever to load!

Pros of TIFF: Very flexible format, it supports several types of compression like JPEG, LZW, ZIP or no compression at all. High quality image format, all color and data information are stored TIFF format can now be saved with layers Cons of TIFF: Very large file size long transfer time, huge disk space consumption, and slow loading time. PSD Photoshop Document PSDs are files that are created and saved in Adobe Photoshop, the most popular graphics editing software ever! This type of file contains layers that make modifying the image much easier to handle. This is also the program that generates the raster file types mentioned above. The largest disadvantage to PSDs is that Photoshop works with raster images as opposed to vector images. PDF Portable Document Format PDFs were invented by Adobe with the goal of capturing and reviewing rich information from any application, on any computer, with anyone, anywhere. I d say they have been pretty successful so far. If a designer saves your vector logo in PDF format, then you can view it without any design editing software (as long as you have downloaded the free Acrobat Reader software) and they have the ability to use this file to make further manipulations. This is by far the best universal tool for sharing graphics.

EPS Encapsulated Postscript EPS is a file in vector format that has been designed to produce high-resolution graphics for print. Almost any kind of design software can create an EPS. It is more of a universal file type (much like the PDF) that can be used to open vector-based artwork in any design editor, not just the more common Adobe products. This safeguards file transfers to designers that are not yet utilizing Adobe products, but may be using Corel Draw or Quark. AI Adobe Illustrator Document AI is, by far, the image format most preferred by designers and the most reliable type of file format for using images in all types of projects from web to print, etc. Adobe Illustrator is the industry standard for creating artwork from scratch and therefore more than likely the program in which your logo was originally rendered. Illustrator produces vector artwork, the easiest type of file to manipulate. It can also create all of the aforementioned file types. Pretty cool stuff! It is by far the best tool in any designer s arsenal.

INDD Adobe Indesign Document INDDs (Indesign Document) are files that are created and saved in Adobe Indesign. Indesign is commonly used to create larger publications, such as newspapers, magazines and ebooks. Files from both Adobe Photoshop and Illustrator can be combined in Indesign to produce content rich designs that feature advanced typography, embedded graphics, page content, formatting information and other sophisticated layout-related options. Homework: Prepare a table of size required for each type of the image type also comment on the quality.