ITP 140 Mobile App Technologies. Colors Images Icons
|
|
- Johnathan Clarke
- 5 years ago
- Views:
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 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 informationDigital 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 informationMOTION 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 informationRaster (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 informationPhotoshop 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 informationVector 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 informationDr. 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 informationCHAPTER 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 informationDigital 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 informationSpecific 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 informationDigital 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 informationINTRODUCTION 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 informationCommercial 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 informationImages 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 informationUnderstanding 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 informationIMAGE 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 informationLecture #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 informationImage 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 informationGraphics 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 informationPENGENALAN 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 informationHTTP 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 informationLECTURE 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 informationWelcome 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 informationSampling 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 informationColor, 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 information6. 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 informationUnit 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 informationUsing 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 informationFUNDAMENTALS 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 informationComputers & 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 informationCMPT 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 informationAdobe 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 informationHow 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 informationPhotoshop 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 informationGUIDELINES & 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 informationCreating 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 informationSTANDARDS? 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 informationImage 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 informationCoreldraw 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 information4/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 informationIn 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 informationUNIVERSITY 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 informationWordPress 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 informationDIGITAL 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 informationPhotoshop 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 informationIntroduction 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 informationImage 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 informationChapter 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 informationCOLOR 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 informationChapter 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 informationDigital 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 informationChapter 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 informationCD: (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 informationIndexed 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 informationBy 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 information15110 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 informationFundamentals 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 informationElements 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 informationUsing 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 informationSistemas 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 informationTopics. 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 informationBitmap 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 informationDigital 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 informationUNIT 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 informationAdobe 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 informationCATEGORY 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 informationColor, 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 informationLECTURE 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 informationComputers 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 informationB.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 informationPreparing 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 informationCorporate 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 informationLECTURE 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 informationColors 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 information15110 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 informationBEST 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 informationCSC 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 informationPHOTOSHOP. 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 informationDigital 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 informationraw 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 informationBitmap 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 informationPositive & 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 informationA 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 information4/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 informationTEST 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 information4 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 informationDigitizing 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 informationUnderstanding 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 informationColor 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 informationColor 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 informationTHE 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 informationLecture 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 informationBasic 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 informationImages 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 informationObjective 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 information5/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 informationLecture - 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 informationSchool 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 informationCorrection 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 informationChapter 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