ITP 140 Mobile App Technologies. Colors Images Icons

Size: px
Start display at page:

Download "ITP 140 Mobile App Technologies. Colors Images Icons"

Transcription

1 ITP 140 Mobile App Technologies Colors Images Icons

2 Establish a style Look and Feel Create or choose a color palette Pick colors that complement each other Pick colors that are representative of your app These are the main colors for your app, not all of the colors you can use in your app May pick colors that are different hues, but same saturation and brightness 2

3 Color Palette for USC 3

4 Example Color Palette 4

5 Color Palette for PAM+ Incorporate St Jude Medical s green color and USC s cardinal red 5

6 Color Wheel 6

7 Color Palette Resources ColorWheel - coolors - COLOURlovers - ColorCombos - Color Palette Generator (DeGraeve) - Color Palette Generator (Big Huge Labs) - 7

8 Images All digital images are rectangles! Each image has a width and height 8

9 Image Terminology Compression Methods Make your image smaller for , web, mobile, etc. Lossy Requires data to be removed from the image to compress the file and make it smaller by trying to remove the least important data first Lossless Opposite of lossy since no data is lost when the file is compressed Resolution Standard for web/mobile graphics is 72 dots per inch (dpi) Photographs is usually 300 dpi 9

10 Image Terminology Transparency Able to see through parts of an image In Photoshop, you see a gray and white checkerboard Interlacing A process where the graphic is displayed at multiple levels of clarity, from blurry to clear Non-interlaced images must be fully loaded before the browser displays them Interlaced graphics appear more quickly, first fuzzy and ultimately clear 10

11 Bitmap Images The image file has to define the exact color of every pixel in the image A pixel is generally thought of as the smallest single component of a digital image The term "pixels" can be used in the abstract, or as a unit of measure, in particular when using pixels as a measure of resolution 400 pixels per inch, 640 pixels per line, or spaced 10 pixels apart 11

12 Vector Vector graphics is the use of geometrical primitives Such as points, lines, curves, and shapes or polygons Vector graphics are based on vectors (also called paths), which lead through locations called control points or nodes 12

13 Image Formats GIF Graphics Interchange Format Web format for graphics and illustrations Bitmap image Has a limit of 256 distinct colors Unique to each file Insufficient for color photographs Small files Transparency 13

14 Image Formats JPG Joint Photographic Experts Group Web format for images and photographs Compression method is usually lossy compression, meaning that some visual quality is lost in the process Bitmap image Small files No transparency A photo of a flower compressed with successively more lossy compression ratios from left to right. 14

15 Image Formats PNG Portable Network Graphics Open, extensible image format with lossless compression Provides a patent-free replacement for GIF and can also replace many common uses of TIFF Indexed-color, grayscale, and truecolor images are supported Transparency 15

16 Image Formats for Web & Mobile GIF Good for sharp lines and solid colors Transparent background JPG Save photographs No transparent backgrounds Not good at preserving exact colors PNG Images with blended, transparent backgrounds Mobile operating systems will optimize PNG 16

17 Mobile For mobile, use PNG as much as possible Avoid using interlaced PNGs Can still use JPG for photographs 17

18 Colors in Photoshop RGB Mode CMYK Mode L*a*b Mode HSB Color Model 18

19 RGB Mode Based on the RGB color model Called an additive color model because adding all the colors together produces white which reflects all light back to the eye RGB colors are created by setting red, green and blue to values between When all three values are 0, black is produced. When all three values are 255, is produced. 19

20 Color RGB Color Model Red Green Blue (0, 0, 0) is black (255, 255, 255) is (255, 0, 0) is red (0, 255, 0) is green (0, 0, 255) is blue (255, 255, 0) is yellow (0, 255, 255) is cyan (255, 0, 255) is magenta 20

21 CMYK Mode Base colors are (C), (M), (Y) and black (K is used to distinguish it from B for blue) Theoretically, C, M, and Y combined should produce pure black Called a subtractive color model In reality, pure black is not produced with this combination of inks so black is included White is produced when all values are set to 0% Used in images that will be output to a print medium using ink 21

22 L*a*b Mode Based on the human perception of color Designed to be device-independent Consistent color viewed on a monitor screen or printed 3 color components L (lightness component) is the brightness value and ranges from 0 to 100 a component (green-red axis) ranges from +127 to -128 b component (blue-yellow axis) and ranges from +127 to -128 Used internally by Photoshop in converting from one color mode to another 22

23 HSB Color Model A color model, not a color mode Provides an intuitive way to mix and adjust colors HSB stands for Hue, Saturation, and Brightness A hue is a shade of color such as orange, blue, purple Saturation determines the strength of the hue Brightness is the lightness/darkness of a color 23

24 What's the #? The value after the # is a hexadecimal number 24

25 Decimal Our numbering system is decimal Dec means 10 Example a decathlon has 10 events The unique 10 digits that make up the decimal numbering system are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 We say that decimal is base 10 25

26 Example of Decimal 231 = = 2 * * 10 1 * 1 = 2 * * *

27 Binary Computers use magnetic memory (or transistors) for storing information Smallest capacity for storage is a single magnetic charge, either positive or negative Positive charge means a 1 Negative charge means a 0 The 2 digits that we use for binary are 0s & 1s The digits in a binary number are called bits (short for binary digit) Binary is base 2 Binary Exponent Decimal

28 Example of Binary 1010 = 1 * 2 3 = 0 * * * * 8 0 * 4 1 * 2 0 * 1 = = 10 28

29 Binary (4 bit) to Decimal Binary à Decimal 0000! ! 0! 0001! ! 1! 0010! ! 2! 0011! ! 3! 0100! ! 4! 0101! ! 5! 0110! ! 6! 0111! ! 7! Binary à Decimal 1000! ! 8! 1001! ! 9! 1010! ! 10! 1011! ! 11! 1100! ! 12! 1101! ! 13! 1110! ! 14! 1111! ! 15! With 4 bits, we get the values of 0 15 If the binary number ends with a 1, it is odd 29

30 Binary (8 bit) to Decimal Binary à Decimal ! ! 0! ! ! 15! ! ! 16! ! ! 31! ! ! 32! ! ! 63! ! ! 64! ! ! 127! ! ! 128! ! ! 255! 30

31 Bits & Bytes With 8 bits (binary digits), we get the decimal values of bits = 1 byte Remember the RGB color mode Each color has a value from 0 to 255 We use 8 bits (or 1 byte) for each color 8 x 3 (3 colors) = 24 bits to store color 31

32 Reverse of Binary to Digital Decimal to Binary = = =

33 Repeat Division Decimal to Binary 25 / 2 = 12 + remainder of 1 (LSB) 12 / 2 = 6 + remainder of 0 6 / 2 = 3 + remainder of 0 3 / 2 = 1 + remainder of 1 1 / 2 = 0 + remainder of 1 (MSB) = LSB = Least Significant Bit MSB = Most Significant Bit Algorithm of Repeat Division 33

34 Geek Joke 34

35 Hexadecimal We often represent computer data in hexadecimal hex = 6 and dec = 10 hexadecimal = = 16 It is base 16 The unique 16 digits are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f 0 9 and a f (or A F) Every 4 bits is a single hex digit Since 4 bits can represent numbers from 0 to 15 35

36 Bin (4 bit) à Dec & Hex Binary B à D Decimal Hex A B C D E F 36

37 Bin (8 bit) à Hex & Dec Binary B à H Hex B à D Dec ! ! 10! ! 16! ! ! 1F! ! 31! ! ! 20! ! 32! ! ! 3F! ! 63! ! ! 40! ! 64! ! ! 5A! ! 90! ! ! 7F! ! 127! ! ! 80! ! 128! ! ! C2! ! 194! ! ! FF! ! 255! 37

38 Bits, Bytes & Hex Combine 8 bits, and we have a byte 4 bits is a single hex digit Examples: 0000 binary = 0 hex, 1111 binary = F hex 8 bits = 2 hex digits Easy to represent a byte in hexadecimal Examples: = = = = FF 16 38

39 Computer Graphics Traditionally, computers use a combination of 3 colors (red, green, blue) to represent the color of every pixel on the screen Every pixel has an intensity equal to one byte for every color called the RGB color Pixel = smallest unit for representing an image on a computer dots on the screen Smallest intensity for a color in a pixel is (8 bits) Largest intensity for a color in a pixel is (8 bits) Black = # #FFFFFF Everything with colors on a computer can be done with math! To lighten a color, simply add to the intensity, to darken simply decrease the intensity 39

40 Tips for Icons and Images For the best results, enlist the help of a professional graphic designer Use universal imagery that people will easily recognize Embrace simplicity Use color and shadow judiciously to help the icon tell its story In general, avoid using greek text or wavy lines to suggest text In general, create an idealized version of the subject rather than using a photo ios Avoid using ios interface elements in your artwork Don t use replicas of Apple hardware products in your artwork Don t reuse ios app icons in your interface Use transparency only when it makes sense 40

41 App Icon Examples 41

42 Screen Shots 42

43 App Icon No text No app name No extra symbols No drop shadow No shine or gloss Contrasting background Fill the entire area Main character head close-up 43

44 ios App Icon Square images (90 0 corners) Do not round the edges No transparency 44

45 Example A 120 x 120 pixel icon before the mask is applied A 120 x 120 pixel icon after the mask is applied 45

46 ios 6 46

47 ios 7 47

48 ios 7 48

49 ios 6 vs ios 7 49

50 ios 7 vs ios 6 50

51 The world is flat Design ios 7 Previous ios versions gave importance to visual skeuomorphism Skeuomorphism refers to a design principle in which design cues are taken from the physical world The emphasis for ios 7 is placed on physical skeuomorphism for animations

52 ios 8 52

53 ios App Icon Device Image Size (px) Resolution iphone 6 Plus 180 x iphone 6 and iphone x iphone 4s 120 x ipad and ipad mini 152 x ipad 2 and ipad mini 76 x Required for all apps 53

54 App Icon for the App Store Device Image Size (px) iphone 6 Plus 1024 x 1024 iphone 6 and iphone x 1024 iphone 4s 1024 x 1024 ipad and ipad mini 1024 x 1024 ipad 2 and ipad mini 1024 x 1024 Required for all apps 54

55 ios Resources documentation/userexperience/conceptual/ applehiguidelines/iconsimages/ IconsImages.html app-update-roundup/ 55

56 ios Resources Apple s Image Creation Guidelines documentation/userexperience/conceptual/mobilehig/ IconsImages/IconsImages.html App Icons on ipad and iphone _index.html Custom Icon and Image Creation Guidelines documentation/userexperience/conceptual/mobilehig/ IconsImages/IconsImages.html 56

57 Android App Icons Can use transparency No inner transparency 57

58 Android Icons Screen Density ldpi (120 dpi) Low density screen mdpi (160 dpi) Medium density screen hdpi (240 dpi) High density screen xhdpi (320 dpi) Extra-high density screen xxhdpi (480 dpi) Extra-extra-high density screen Image Size (px) 36 x x x x x 144 Google Play 512 x

59 Android Screen Sizes Small screen Low density (120) Medium density (160) High density (240) 240 x x 640 Extra high density (320) Normal screen 240 x 400; 240 x x x 800; 480 x 854; 600 x x 960 Large screen 480 x 800; 480 x x 800; 480 x 854; 600 x 1024 Extra Large screen 1024 x x 800; 1024 x 768; 1280 x x 1152; 1920 x 1152; 1920 x x 1536; 2560 x 1536; 2560 x

60 Iconography Android Resources iconography.html Android Supporting Multiple Screens screens_support.html 60

61 Other icons/images Interface Icons Pixeden Glyphish Helveticons Pictos Android gorgeous-icon-sets-for-android/ 61

62 Create Images Use an image tool such as Adobe Illustrator or Photoshop Largest size you need is 1024 x 1024 For resolution, enter 72 ppi Save as PNG, non-interlaced Save different versions for the different sizes 62

63 Photoshop Photoshop creates a psd file You cannot display a psd file on a mobile device Have to save as an image format Preferably png Use the File à Save for Web option In the Save for Web window, select the PNG-24 option for the Preset (top of the window) 63

64 Brands Famous brands and their color palettes Twitter: #55acee Facebook: #3b5998 Android: #a4c639 Google: #4285f4, #db4437, #f4b400, #0f9d58, #e7e6dd 64

65 Example of Icon & Colors 65

66 Buzz 66

67 WhetherWear 67

68 Packed 68

69 App Icons Feed Me Safety 69

70 Color Palette 70

ITP 140 Mobile App Technologies. Images

ITP 140 Mobile App Technologies. Images ITP 140 Mobile App Technologies Images Images All digital images are rectangles! Each image has a width and height 2 Terms Pixel A picture element Screen size In inches Resolution A width and height DPI

More information

Digital Imaging & Photoshop

Digital Imaging & Photoshop Digital Imaging & Photoshop Photoshop Created by Thomas Knoll in 1987, originally called Display Acquired by Adobe in 1988 Released as Photoshop 1.0 for Macintosh in 1990 Released the Creative Suite in

More information

MOTION GRAPHICS BITE 3623

MOTION GRAPHICS BITE 3623 MOTION GRAPHICS BITE 3623 DR. SITI NURUL MAHFUZAH MOHAMAD FTMK, UTEM Lecture 1: Introduction to Graphics Learn critical graphics concepts. 1 Bitmap (Raster) vs. Vector Graphics 2 Software Bitmap Images

More information

Raster (Bitmap) Graphic File Formats & Standards

Raster (Bitmap) Graphic File Formats & Standards Raster (Bitmap) Graphic File Formats & Standards Contents Raster (Bitmap) Images Digital Or Printed Images Resolution Colour Depth Alpha Channel Palettes Antialiasing Compression Colour Models RGB Colour

More information

Photoshop 01. Introduction to Computer Graphics UIC / AA/ AD / AD 205 / F05/ Sauter.../documents/photoshop_01.pdf

Photoshop 01. Introduction to Computer Graphics UIC / AA/ AD / AD 205 / F05/ Sauter.../documents/photoshop_01.pdf Photoshop 01 Introduction to Computer Graphics UIC / AA/ AD / AD 205 / F05/ Sauter.../documents/photoshop_01.pdf Topics Raster Graphics Document Setup Image Size & Resolution Tools Selecting and Transforming

More information

Vector VS Pixels Introduction to Adobe Photoshop

Vector VS Pixels Introduction to Adobe Photoshop MMA 100 Foundations of Digital Graphic Design Vector VS Pixels Introduction to Adobe Photoshop Clare Ultimo Using the right software for the right job... Which program is best for what??? Photoshop Illustrator

More information

Dr. Shahanawaj Ahamad. Dr. S.Ahamad, SWE-423, Unit-06

Dr. Shahanawaj Ahamad. Dr. S.Ahamad, SWE-423, Unit-06 Dr. Shahanawaj Ahamad 1 Outline: Basic concepts underlying Images Popular Image File formats Human perception of color Various Color Models in use and the idea behind them 2 Pixels -- picture elements

More information

CHAPTER 3 I M A G E S

CHAPTER 3 I M A G E S CHAPTER 3 I M A G E S OBJECTIVES Discuss the various factors that apply to the use of images in multimedia. Describe the capabilities and limitations of bitmap images. Describe the capabilities and limitations

More information

Digital Imaging - Photoshop

Digital Imaging - Photoshop Digital Imaging - Photoshop A digital image is a computer representation of a photograph. It is composed of a grid of tiny squares called pixels (picture elements). Each pixel has a position on the grid

More information

Specific structure or arrangement of data code stored as a computer file.

Specific structure or arrangement of data code stored as a computer file. FILE FORMAT Specific structure or arrangement of data code stored as a computer file. A file format tells the computer how to display, print, process, and save the data. It is dictated by the application

More information

Digital Images. Digital Images. Digital Images fall into two main categories

Digital Images. Digital Images. Digital Images fall into two main categories Digital Images Digital Images Scanned or digitally captured image Image created on computer using graphics software Digital Images fall into two main categories Vector Graphics Raster (Bitmap) Graphics

More information

INTRODUCTION TO COMPUTER GRAPHICS

INTRODUCTION TO COMPUTER GRAPHICS INTRODUCTION TO COMPUTER GRAPHICS ITC 31012: GRAPHICAL DESIGN APPLICATIONS AJM HASMY hasmie@gmail.com WHAT CAN PS DO? - PHOTOSHOPPING CREATING IMAGE Custom icons, buttons, lines, balls or text art web

More information

Commercial Art 1 Photoshop Study Guide. 8) How is on-screen image resolution measured? PPI - Pixels Per Inch

Commercial Art 1 Photoshop Study Guide. 8) How is on-screen image resolution measured? PPI - Pixels Per Inch Commercial Art 1 Photoshop Study Guide To help prepare you for the Photoshop test, be sure you can answer the following questions: 1) What are the three things should you do when you first open a Photoshop

More information

Images and Graphics. 4. Images and Graphics - Copyright Denis Hamelin - Ryerson University

Images and Graphics. 4. Images and Graphics - Copyright Denis Hamelin - Ryerson University Images and Graphics Images and Graphics Graphics and images are non-textual information that can be displayed and printed. Graphics (vector graphics) are an assemblage of lines, curves or circles with

More information

Understanding Image Formats And When to Use Them

Understanding Image Formats And When to Use Them Understanding Image Formats And When to Use Them Are you familiar with the extensions after your images? There are so many image formats that it s so easy to get confused! File extensions like.jpeg,.bmp,.gif,

More information

IMAGE SIZING AND RESOLUTION. MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication

IMAGE SIZING AND RESOLUTION. MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication IMAGE SIZING AND RESOLUTION MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication Copyright 2013 MyGraphicsLab / Pearson Education OBJECTIVES This presentation covers

More information

Lecture #2: Digital Images

Lecture #2: Digital Images Lecture #2: Digital Images CS106E Spring 2018, Young In this lecture we will see how computers display images. We ll find out how computers generate color and discover that color on computers works differently

More information

Image Perception & 2D Images

Image Perception & 2D Images Image Perception & 2D Images Vision is a matter of perception. Perception is a matter of vision. ES Overview Introduction to ES 2D Graphics in Entertainment Systems Sound, Speech & Music 3D Graphics in

More information

Graphics for Web. Desain Web Sistem Informasi PTIIK UB

Graphics for Web. Desain Web Sistem Informasi PTIIK UB Graphics for Web Desain Web Sistem Informasi PTIIK UB Pixels The computer stores and displays pixels, or picture elements. A pixel is the smallest addressable part of the computer screen. A pixel is stored

More information

PENGENALAN TEKNIK TELEKOMUNIKASI CLO

PENGENALAN TEKNIK TELEKOMUNIKASI CLO PENGENALAN TEKNIK TELEKOMUNIKASI CLO : 4 Digital Image Faculty of Electrical Engineering BANDUNG, 2017 What is a Digital Image A digital image is a representation of a two-dimensional image as a finite

More information

HTTP transaction with Graphics HTML file + two graphics files

HTTP transaction with Graphics HTML file + two graphics files HTTP transaction with Graphics HTML file + two graphics files Graphics are grids of Pixels (Picture Elements) Each pixel is exactly one color. At normal screen resolution you can't tell they are square.

More information

LECTURE 03 BITMAP IMAGE FORMATS

LECTURE 03 BITMAP IMAGE FORMATS MULTIMEDIA TECHNOLOGIES LECTURE 03 BITMAP IMAGE FORMATS IMRAN IHSAN ASSISTANT PROFESSOR IMAGE FORMATS To store an image, the image is represented in a two dimensional matrix of pixels. Information about

More information

Welcome to Photoshop CS

Welcome to Photoshop CS Chapter 1 Welcome to Photoshop CS COPYRIGHTED MATERIAL Photoshop CS is the latest version of Photoshop, Adobe s powerful image-editing program. It s part of Adobe s Creative Suite, a package of design

More information

Sampling Rate = Resolution Quantization Level = Color Depth = Bit Depth = Number of Colors

Sampling Rate = Resolution Quantization Level = Color Depth = Bit Depth = Number of Colors ITEC2110 FALL 2011 TEST 2 REVIEW Chapters 2-3: Images I. Concepts Graphics A. Bitmaps and Vector Representations Logical vs. Physical Pixels - Images are modeled internally as an array of pixel values

More information

Color, graphics and hardware Monitors and Display

Color, graphics and hardware Monitors and Display Color, graphics and hardware Monitors and Display No two monitors display the same image in exactly the same way 1. Gamma settings - hardware setting on a monitor that controls the brightness of the pixels

More information

6. Graphics MULTIMEDIA & GRAPHICS 10/12/2016 CHAPTER. Graphics covers wide range of pictorial representations. Uses for computer graphics include:

6. Graphics MULTIMEDIA & GRAPHICS 10/12/2016 CHAPTER. Graphics covers wide range of pictorial representations. Uses for computer graphics include: CHAPTER 6. Graphics MULTIMEDIA & GRAPHICS Graphics covers wide range of pictorial representations. Uses for computer graphics include: Buttons Charts Diagrams Animated images 2 1 MULTIMEDIA GRAPHICS Challenges

More information

Unit 4.4 Representing Images

Unit 4.4 Representing Images Unit 4.4 Representing Images Candidates should be able to: a) Explain the representation of an image as a series of pixels represented in binary b) Explain the need for metadata to be included in the file

More information

Using Adobe Photoshop

Using Adobe Photoshop Using Adobe Photoshop 4 Colour is important in most art forms. For example, a painter needs to know how to select and mix colours to produce the right tones in a picture. A Photographer needs to understand

More information

FUNDAMENTALS OF MULTIMEDIA

FUNDAMENTALS OF MULTIMEDIA FUNDAMENTALS OF MULTIMEDIA Complementary Course of BMMC II semester CUCBCSS _ 2014 Admn QUESTION BANK 1. Resolution is the measure of the degree of sharpness of an image A. True B. False 2. Pre-production

More information

Computers & Philately Overview

Computers & Philately Overview Rochester Philatelic Association George T. Fekete March 8, 2018 Tools Hardware Tools Hardware Computer PC Mac (Apple) Custom Scanner Software Tools Productivity Software Microsoft Office (Best in Class)

More information

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 5 Graphics and Images Slides based on course material SFU Icons their respective owners 1 Learning Objectives In this unit you will learn

More information

Adobe Fireworks CS4 Kalamazoo Valley Community College February 25, 2010

Adobe Fireworks CS4 Kalamazoo Valley Community College February 25, 2010 Adobe Fireworks CS4 Kalamazoo Valley Community College February 25, 2010 Introduction to Fireworks CS4 Fireworks CS4 is an image editing program that can handle both vector (line art/logos) and raster

More information

How is Information Stored

How is Information Stored Binary CSCE 101 How is Information Stored Information is stored in the computer as binary numbers (0 s and 1 s). Even images are stored in this way, where a combination of 0 s and 1 s represent each color

More information

Photoshop Elements Week 1 - Photoshop Elements Work Environment

Photoshop Elements Week 1 - Photoshop Elements Work Environment Menu Bar Just like any computer program, you have several dropdown menus to work with. Explore them all! But, most importantly remember to SAVE! Photoshop Elements Toolbox (with keyboard shortcut) Photoshop

More information

GUIDELINES & INFORMATION

GUIDELINES & INFORMATION GUIDELINES & INFORMATION This document will provide basic guidelines for the use of the World Animal Day logo and general knowledge about the various file formats provided. Adhering to these guidelines

More information

Creating Digital Artwork

Creating Digital Artwork 5Steps to Creating Digital Artwork (For more detailed instructions, please click here) Introduction to Digital Artwork Authors often choose to include digital artwork as part of a submission to a medical

More information

STANDARDS? We don t need no stinkin standards! David Ski Witzke Vice President, Program Management FORAY Technologies

STANDARDS? We don t need no stinkin standards! David Ski Witzke Vice President, Program Management FORAY Technologies STANDARDS? We don t need no stinkin standards! David Ski Witzke Vice President, Program Management FORAY Technologies www.foray.com 1.888.849.6688 2005, FORAY Technologies. All rights reserved. What s

More information

Image Optimization for Print and Web

Image Optimization for Print and Web There are two distinct types of computer graphics: vector images and raster images. Vector Images Vector images are graphics that are rendered through a series of mathematical equations. These graphics

More information

Coreldraw Crash Course

Coreldraw Crash Course Coreldraw Crash Course Yannick Kremer Vrije Universiteit Amsterdam, February 27, 2007 Outline - Introduction to the basics of digital imaging - Bitmaps - Vectors - Colour: RGB vs CMYK - What can you do

More information

4/9/2015. Simple Graphics and Image Processing. Simple Graphics. Overview of Turtle Graphics (continued) Overview of Turtle Graphics

4/9/2015. Simple Graphics and Image Processing. Simple Graphics. Overview of Turtle Graphics (continued) Overview of Turtle Graphics Simple Graphics and Image Processing The Plan For Today Website Updates Intro to Python Quiz Corrections Missing Assignments Graphics and Images Simple Graphics Turtle Graphics Image Processing Assignment

More information

In order to manage and correct color photos, you need to understand a few

In order to manage and correct color photos, you need to understand a few In This Chapter 1 Understanding Color Getting the essentials of managing color Speaking the language of color Mixing three hues into millions of colors Choosing the right color mode for your image Switching

More information

UNIVERSITY OF CALICUT INTRODUCTION TO MULTIMEDIA QUESTION BANK

UNIVERSITY OF CALICUT INTRODUCTION TO MULTIMEDIA QUESTION BANK UNIVERSITY OF CALICUT SCHOOL OF DISTANCE EDUCATION BGDA (UG SDE) II SEMESTER COMPLEMENTARY COURSE INTRODUCTION TO MULTIMEDIA QUESTION BANK BGDA Page 1 1. Which file format contain photorealistic images

More information

WordPress Users Group Manchester, NH July 13, Preparing Images for the Web. Daryl Johnson SvenGrafik

WordPress Users Group Manchester, NH July 13, Preparing Images for the Web. Daryl Johnson SvenGrafik WordPress Users Group Manchester, NH July 13, 2015 Preparing Images for the Web Daryl Johnson SvenGrafik WHY OPTIMIZE IMAGES for WORDPRESS? 1. Page Load Times Matter to Users 2. Image Bloat Puts Search

More information

DIGITAL WATERMARKING GUIDE

DIGITAL WATERMARKING GUIDE link CREATION STUDIO DIGITAL WATERMARKING GUIDE v.1.4 Quick Start Guide to Digital Watermarking Here is our short list for what you need BEFORE making a linking experience for your customers Step 1 File

More information

Photoshop CS6. Table of Contents. Image Formats! 3. GIF (Graphics Interchange Format)! 3. JPEG or JPG (Joint Photographic Experts Group)!

Photoshop CS6. Table of Contents. Image Formats! 3. GIF (Graphics Interchange Format)! 3. JPEG or JPG (Joint Photographic Experts Group)! Photoshop CS6 Table of Contents Image Formats! 3 GIF (Graphics Interchange Format)! 3 JPEG or JPG (Joint Photographic Experts Group)! 3 PNG (Portable Network Graphics)! 3 Pixels! 3 Resolution! 3 Creating

More information

Introduction to Photoshop: Basic Editing & Prepare Images for the Web

Introduction to Photoshop: Basic Editing & Prepare Images for the Web Introduction to Photoshop: Basic Editing & Prepare Images for the Web 1 LEARNING OBJECTIVES Basic tools in Photoshop & Use of Bridge Prepare images for print and web use TOPICS COVERED Photoshop Interface

More information

Image is a spatial representation of an object or a scene. (image of a person, place, object)

Image is a spatial representation of an object or a scene. (image of a person, place, object) Graphics & Images Table of Content 1. Introduction 2. Types of graphics 3. Resolution 4. Memory/Storage requirement 5. Types of images 6. Image colour schemes 7. Colour dithering 8. Image processing 9.

More information

Chapter 2 Fundamentals of Digital Imaging

Chapter 2 Fundamentals of Digital Imaging Chapter 2 Fundamentals of Digital Imaging Part 4 Color Representation 1 In this lecture, you will find answers to these questions What is RGB color model and how does it represent colors? What is CMY color

More information

COLOR AS A DESIGN ELEMENT

COLOR AS A DESIGN ELEMENT COLOR COLOR AS A DESIGN ELEMENT Color is one of the most important elements of design. It can evoke action and emotion. It can attract or detract attention. I. COLOR SETS COLOR HARMONY Color Harmony occurs

More information

Chapter 11. Preparing a Document for Prepress and Printing Delmar, Cengage Learning

Chapter 11. Preparing a Document for Prepress and Printing Delmar, Cengage Learning Chapter 11 Preparing a Document for Prepress and Printing 2011 Delmar, Cengage Learning Objectives Explore color theory and resolution issues Work in CMYK mode Specify spot colors Create crop marks Create

More information

Digital Imaging and Image Editing

Digital Imaging and Image Editing Digital Imaging and Image Editing A digital image is a representation of a twodimensional image as a finite set of digital values, called picture elements or pixels. The digital image contains a fixed

More information

Chapter 4. Incorporating Color Techniques

Chapter 4. Incorporating Color Techniques Chapter 4 Incorporating Color Techniques Color Modes Photoshop displays and prints images using specific color modes A mode is the amount of color data that can be stored in a given file format 2 Color

More information

CD: (compact disc) A 4 3/4" disc used to store audio or visual images in digital form. This format is usually associated with audio information.

CD: (compact disc) A 4 3/4 disc used to store audio or visual images in digital form. This format is usually associated with audio information. Computer Art Vocabulary Bitmap: An image made up of individual pixels or tiles Blur: Softening an image, making it appear out of focus Brightness: The overall tonal value, light, or darkness of an image.

More information

Indexed Color. A browser may support only a certain number of specific colors, creating a palette from which to choose

Indexed Color. A browser may support only a certain number of specific colors, creating a palette from which to choose Indexed Color A browser may support only a certain number of specific colors, creating a palette from which to choose Figure 3.11 The Netscape color palette 1 QUIZ How many bits are needed to represent

More information

By Washan Najat Nawi

By Washan Najat Nawi By Washan Najat Nawi how to get started how to use the interface how to modify images with basic editing skills Adobe Photoshop: is a popular image-editing software. Two general usage of Photoshop Creating

More information

15110 Principles of Computing, Carnegie Mellon University

15110 Principles of Computing, Carnegie Mellon University 1 Overview Human sensory systems and digital representations Digitizing images Digitizing sounds Video 2 HUMAN SENSORY SYSTEMS 3 Human limitations Range only certain pitches and loudnesses can be heard

More information

Fundamentals of Multimedia

Fundamentals of Multimedia Fundamentals of Multimedia Lecture 2 Graphics & Image Data Representation Mahmoud El-Gayyar elgayyar@ci.suez.edu.eg Outline Black & white imags 1 bit images 8-bit gray-level images Image histogram Dithering

More information

Elements of Design. Basic Concepts

Elements of Design. Basic Concepts Elements of Design Basic Concepts Elements of Design The four elements of design are as follows: Color Line Shape Texture Elements of Design Color: Helps to identify objects Helps understand things Helps

More information

Using Adobe Photoshop

Using Adobe Photoshop Using Adobe Photoshop 1-1 - Advantages of Digital Imaging Until the 70s, using computers for images was unheard of outside academic circles. As general purpose computers have become faster with more capabilities,

More information

Sistemas de Representação Digital em Design

Sistemas de Representação Digital em Design Sistemas de Representação Digital em Design FA.Ulisboa 2013/2014 2º semestre Licenciatura em Design Luís Mateus (lmmateus@fa.ulisboa.pt) Digital Image Processing Image coordinate frame (notice that first

More information

Topics. 1. Raster vs vector graphics. 2. File formats. 3. Purpose of use. 4. Decreasing file size

Topics. 1. Raster vs vector graphics. 2. File formats. 3. Purpose of use. 4. Decreasing file size Topics 1. Raster vs vector graphics 2. File formats 3. Purpose of use 4. Decreasing file size Vector graphics Object-oriented graphics or drawings Consist of a series of mathematically defined points that

More information

Bitmap Vs Vector Graphics Web-safe Colours Image compression Web graphics formats Anti-aliasing Dithering & Banding Image issues for the Web

Bitmap Vs Vector Graphics Web-safe Colours Image compression Web graphics formats Anti-aliasing Dithering & Banding Image issues for the Web Bitmap Vs Vector Graphics Web-safe Colours Image compression Web graphics formats Anti-aliasing Dithering & Banding Image issues for the Web Bitmap Vector (*Refer to Textbook Page 175 file formats) Bitmap

More information

Digital Files File Format Storage Color Temperature

Digital Files File Format Storage Color Temperature Digital Files Digital Files File Format Storage Color Temperature PIXELS Pixel = picture element - smallest component of a digital image - MEGAPIXEL 1 million pixels = MEGAPIXEL PIXELS more pixels per

More information

UNIT 7C Data Representation: Images and Sound

UNIT 7C Data Representation: Images and Sound UNIT 7C Data Representation: Images and Sound 1 Pixels An image is stored in a computer as a sequence of pixels, picture elements. 2 1 Resolution The resolution of an image is the number of pixels used

More information

Adobe Photoshop PS2, Part 3

Adobe Photoshop PS2, Part 3 Adobe Photoshop PS2, Part 3 Basic Photo Corrections This guide steps you through the process of acquiring, resizing, and retouching a photo intended for posting on the Web as well as for a print layout.

More information

CATEGORY SKILL SET REF. TASK ITEM

CATEGORY SKILL SET REF. TASK ITEM ECDL / ICDL Image Editing This module sets out essential concepts and skills relating to the ability to understand the main concepts underlying digital images and to use an image editing application to

More information

Color, Resolution, & Other Image Essentials

Color, Resolution, & Other Image Essentials www.gilbertconsulting.com blog.gilbertconsulting.com kgilbert@gilbertconsulting.com Twitter: @gilbertconsult lynda.com/keithgilbert Every Photoshop image consists of three specific attributes: image resolution,

More information

LECTURE 02 IMAGE AND GRAPHICS

LECTURE 02 IMAGE AND GRAPHICS MULTIMEDIA TECHNOLOGIES LECTURE 02 IMAGE AND GRAPHICS IMRAN IHSAN ASSISTANT PROFESSOR THE NATURE OF DIGITAL IMAGES An image is a spatial representation of an object, a two dimensional or three-dimensional

More information

Computers and Imaging

Computers and Imaging Computers and Imaging Telecommunications 1 P. Mathys Two Different Methods Vector or object-oriented graphics. Images are generated by mathematical descriptions of line (vector) segments. Bitmap or raster

More information

B.Digital graphics. Color Models. Image Data. RGB (the additive color model) CYMK (the subtractive color model)

B.Digital graphics. Color Models. Image Data. RGB (the additive color model) CYMK (the subtractive color model) Image Data Color Models RGB (the additive color model) CYMK (the subtractive color model) Pixel Data Color Depth Every pixel is assigned to one specific color. The amount of data stored for every pixel,

More information

Preparing Images For Print

Preparing Images For Print Preparing Images For Print The aim of this tutorial is to offer various methods in preparing your photographs for printing. Sometimes the processing a printer does is not as good as Adobe Photoshop, so

More information

Corporate Identity Quick Reference Guide

Corporate Identity Quick Reference Guide Corporate Identity Quick Reference Guide The Logo true form The Cold Jet logo is most effective when used on a white background. There is also a reversed version of the logo that is acceptable for use

More information

LECTURE 07 COLORS IN IMAGES & VIDEO

LECTURE 07 COLORS IN IMAGES & VIDEO MULTIMEDIA TECHNOLOGIES LECTURE 07 COLORS IN IMAGES & VIDEO IMRAN IHSAN ASSISTANT PROFESSOR LIGHT AND SPECTRA Visible light is an electromagnetic wave in the 400nm 700 nm range. The eye is basically similar

More information

Colors in Images & Video

Colors in Images & Video LECTURE 8 Colors in Images & Video CS 5513 Multimedia Systems Spring 2009 Imran Ihsan Principal Design Consultant OPUSVII www.opuseven.com Faculty of Engineering & Applied Sciences 1. Light and Spectra

More information

15110 Principles of Computing, Carnegie Mellon University

15110 Principles of Computing, Carnegie Mellon University 1 Last Time Data Compression Information and redundancy Huffman Codes ALOHA Fixed Width: 0001 0110 1001 0011 0001 20 bits Huffman Code: 10 0000 010 0001 10 15 bits 2 Overview Human sensory systems and

More information

BEST PRACTICES FOR SCANNING DOCUMENTS. By Frank Harrell

BEST PRACTICES FOR SCANNING DOCUMENTS. By Frank Harrell By Frank Harrell Recommended Scanning Settings. Scan at a minimum of 300 DPI, or 600 DPI if expecting to OCR the document Scan in full color Save pages as JPG files with 75% compression and store them

More information

CSC 170 Introduction to Computers and Their Applications. Lecture #3 Digital Graphics and Video Basics. Bitmap Basics

CSC 170 Introduction to Computers and Their Applications. Lecture #3 Digital Graphics and Video Basics. Bitmap Basics CSC 170 Introduction to Computers and Their Applications Lecture #3 Digital Graphics and Video Basics Bitmap Basics As digital devices gained the ability to display images, two types of computer graphics

More information

PHOTOSHOP. pixel based image editing software (pixel=picture element) several small dots or pixels make up an image.

PHOTOSHOP. pixel based image editing software (pixel=picture element) several small dots or pixels make up an image. Photoshop PHOTOSHOP pixel based image editing software (pixel=picture element) several small dots or pixels make up an image. RESOLUTION measurement of the total number of pixels displayed determines the

More information

Digital Darkroom P 207

Digital Darkroom P 207 Digital Darkroom P 207 Digital Photographic Terms, Definitions and Hand Outs Instructor: Stephen Grote Raster Pixel based Each individual pixel in the image must be mapped to a specific location, with

More information

raw format format for capturing maximum continuous-tone color information. It preserves all information when photograph was taken.

raw format format for capturing maximum continuous-tone color information. It preserves all information when photograph was taken. raw format format for capturing maximum continuous-tone color information. It preserves all information when photograph was taken. psd files (photoshop default) layered photoshop continuous-tone (photograph)

More information

Bitmap Image Formats

Bitmap Image Formats LECTURE 5 Bitmap Image Formats CS 5513 Multimedia Systems Spring 2009 Imran Ihsan Principal Design Consultant OPUSVII www.opuseven.com Faculty of Engineering & Applied Sciences 1. Image Formats To store

More information

Positive & Negative Space = the area around or between a design. Asymmetrical = balanced but one part is small and one part is large

Positive & Negative Space = the area around or between a design. Asymmetrical = balanced but one part is small and one part is large Study Guide Compostion COMMERCIAL ART Positive & Negative Space = the area around or between a design Radial Symmetrical = balance is circular Asymmetrical = balanced but one part is small and one part

More information

A raster image uses a grid of individual pixels where each pixel can be a different color or shade. Raster images are composed of pixels.

A raster image uses a grid of individual pixels where each pixel can be a different color or shade. Raster images are composed of pixels. Graphics 1 Raster Vector A raster image uses a grid of individual pixels where each pixel can be a different color or shade. Raster images are composed of pixels. Vector graphics use mathematical relationships

More information

4/23/12. Improving Your Digital Photographs + ABOUT ME. + CHANGES in PHOTOGRAPHY. CAMERA and DARKROOM Pro? Cons? DIGITAL PHOTOS Pro? Con?

4/23/12. Improving Your Digital Photographs + ABOUT ME. + CHANGES in PHOTOGRAPHY. CAMERA and DARKROOM Pro? Cons? DIGITAL PHOTOS Pro? Con? Improving Your Digital Photographs Dana Baumgart Marketing Consultant UW Oshkosh Adjunct Faculty ABOUT ME 1997-2001 Attended UWO 2003-2004 Attended Marian College 2001-2003 Marketing Coordinator 2003-2007

More information

TEST INFORMATION: 40 questions 50 minutes 70% minimum required to pass. Score is based on a 1000 pt system so passing will be a 700.

TEST INFORMATION: 40 questions 50 minutes 70% minimum required to pass. Score is based on a 1000 pt system so passing will be a 700. ADOBE CERTIFIED ASSOCIATE WORKSHOP!! (PHOTOSHOP WORKSHOP (PHOTOSHOP CS6) TEST INFORMATION: 40 questions 50 minutes 70% minimum required to pass Score is based on a 1000 pt system so passing will be a 700.

More information

4 Images and Graphics

4 Images and Graphics LECTURE 4 Images and Graphics CS 5513 Multimedia Systems Spring 2009 Imran Ihsan Principal Design Consultant OPUSVII www.opuseven.com Faculty of Engineering & Applied Sciences 1. The Nature of Digital

More information

Digitizing Color. Place Value in a Decimal Number. Place Value in a Binary Number. Chapter 11: Light, Sound, Magic: Representing Multimedia Digitally

Digitizing Color. Place Value in a Decimal Number. Place Value in a Binary Number. Chapter 11: Light, Sound, Magic: Representing Multimedia Digitally Chapter 11: Light, Sound, Magic: Representing Multimedia Digitally Fluency with Information Technology Third Edition by Lawrence Snyder Digitizing Color RGB Colors: Binary Representation Giving the intensities

More information

Understanding Color Theory Excerpt from Fundamental Photoshop by Adele Droblas Greenberg and Seth Greenberg

Understanding Color Theory Excerpt from Fundamental Photoshop by Adele Droblas Greenberg and Seth Greenberg Understanding Color Theory Excerpt from Fundamental Photoshop by Adele Droblas Greenberg and Seth Greenberg Color evokes a mood; it creates contrast and enhances the beauty in an image. It can make a dull

More information

Color and Images. Computer Science and Engineering College of Engineering The Ohio State University. Lecture 16

Color and Images. Computer Science and Engineering College of Engineering The Ohio State University. Lecture 16 Color and Images Computer Science and Engineering College of Engineering The Ohio State University Lecture 16 Colors in CSS Use: fonts, borders, backgrounds Provides semantic signal: Green go, success,

More information

Color and More. Color basics

Color and More. Color basics Color and More In this lesson, you'll evaluate an image in terms of its overall tonal range (lightness, darkness, and contrast), its overall balance of color, and its overall appearance for areas that

More information

THE 3 BIGGEST MISTAKES TO AVOID WHEN USING GRAPHIC IMAGES IN PRINT

THE 3 BIGGEST MISTAKES TO AVOID WHEN USING GRAPHIC IMAGES IN PRINT THE 3 BIGGEST MISTAKES TO AVOID WHEN USING GRAPHIC IMAGES IN PRINT Nothing beats great color and crisp images in a printed marketing piece. But if you ve ever had a print job rejected for poor image resolution,

More information

Lecture 2: An Introduction to Colour Models

Lecture 2: An Introduction to Colour Models Lecture 2: An Introduction to Colour Models An important issue in visual media, and multimedia, is colour. Just as there are a multitude of file formats for computer graphics, there are a range of Colour

More information

Basic photography Art, composition, and computer principles AEE 211 February 24, 2003

Basic photography Art, composition, and computer principles AEE 211 February 24, 2003 Basic photography Art, composition, and computer principles AEE 211 February 24, 2003 What makes these images effective? Overview Basic composition Mood and atmosphere Qualities of a good photo Basic composition

More information

Images and Colour COSC342. Lecture 2 2 March 2015

Images and Colour COSC342. Lecture 2 2 March 2015 Images and Colour COSC342 Lecture 2 2 March 2015 In this Lecture Images and image formats Digital images in the computer Image compression and formats Colour representation Colour perception Colour spaces

More information

Objective Explain design concepts used to create digital graphics.

Objective Explain design concepts used to create digital graphics. Objective 102.01 Explain design concepts used to create digital graphics. PART 1: ELEMENTS OF DESIGN o Color o Line o Shape o Texture o Watch this video on Fundamentals of Design. 2 COLOR o Helps identify

More information

5/17/2009. Digitizing Color. Place Value in a Binary Number. Place Value in a Decimal Number. Place Value in a Binary Number

5/17/2009. Digitizing Color. Place Value in a Binary Number. Place Value in a Decimal Number. Place Value in a Binary Number Chapter 11: Light, Sound, Magic: Representing Multimedia Digitally Digitizing Color Fluency with Information Technology Third Edition by Lawrence Snyder RGB Colors: Binary Representation Giving the intensities

More information

Lecture - 3. by Shahid Farid

Lecture - 3. by Shahid Farid Lecture - 3 by Shahid Farid Image Digitization Raster versus vector images Progressive versus interlaced display Popular image file formats Why so many formats? Shahid Farid, PUCIT 2 To create a digital

More information

School of Digital Media Arts Photography GM300BB

School of Digital Media Arts Photography GM300BB Washtenaw Community College Don Werthmann School of Digital Media Arts Photography GM300BB 973-3586 http://courses.wccnet.edu/~donw donw@wccnet.edu What is a Digital Image? Any digital image is composed

More information

Correction Techniques

Correction Techniques 10 Advanced Color Correction Techniques Learning Objectives After completing this chapter, you will be able to: Explain how a computer monitor displays color. Describe how color is created in the printing

More information

Chapter 8. Representing Multimedia Digitally

Chapter 8. Representing Multimedia Digitally Chapter 8 Representing Multimedia Digitally Learning Objectives Explain how RGB color is represented in bytes Explain the difference between bits and binary numbers Change an RGB color by binary addition

More information