ITP 140 Mobile App Technologies. Images

Transcription

1 ITP 140 Mobile App Technologies Images

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

3 Terms Pixel A picture element Screen size In inches Resolution A width and height DPI / PPI Dots per inch or pixels per inch Point An abstract unit of measurement for ios 3

4 Pixel A pixel is generally thought of as the smallest single component of a digital image. A pixel is a single group of colored dots (red, green, and blue) on a screen. 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. Examples: 400 pixels per inch, 640 pixels per line, paced 10 pixels apart 4

5 Resolution Width and height of an image Example: 320 w x 480 h Standard for web/mobile graphics is 72 dots per inch (dpi) Photographs is usually 300 dpi 5

6 DPI / PPI Dots per inch or pixels per inch. Calculated by dividing width / height of screen by number of pixels Higher DPI = clearer the quality 6

7 Size Resolution DPI iphone 5 iphone 6 iphone 6 Plus 7

8 Why Point System? The introduction of the Retina display led to doubling the DPI while having the same size. The iphone 4 had 640x960 pixels while iphone had 320x480, but they were the same screen size!! The point system was created as a unit of distance that allows graphics to be scaled independently of the resolution of the phone they are running on 8

9 1/72 of an inch Points The relationship between points and pixels varies base on the DPI iphone: 163 DPI 1 point = 1 pixel iphone 4-6s: 326 DPI 1 point = 2 pixels iphone 6s Plus: 401 DPI 1 point = 3 pixels 9

10 Bitmap Images Bitmap (or raster) images are stored as a series of tiny dots called pixels. Each pixel is actually a very small square that is assigned a color, and then arranged in a pattern to form the image. When you zoom in on a bitmap image you can see the individual pixels that make up that image. 10

11 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 11

12 Bitmap vs Vector 12

13 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 13

14 Transparency A transparent image is an image that has a see-through parts, allowing the background to show through. In Photoshop, you see a gray and white checkerboard to represent the transparent part of the image 14

15 Interlacing Interlacing (also known as interleaving) is a method of encoding a bitmap image such that a person who has partially received it sees a degraded copy of the entire image. The graphic is displayed at multiple levels of clarity, from blurry to clear. Non-interlaced images must be fully loaded before a web browser displays them. 15

16 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 16

17 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. 17

18 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 18

19 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 19

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

21 Tips for 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 21

22 ios Resources Apple s Image Creation Guidelines ation/userexperience/conceptual/mobilehig/iconsi mages/iconsimages.html Custom Icon and Image Creation Guidelines ation/userexperience/conceptual/mobilehig/iconsi mages/iconsimages.html 22

23 Android Use the term icons to mean images used on a device s home screen and used throughout apps Device s home screen adaptive launcher icons and legacy launcher icons Throughout app menu icons, action bar icons, status bar icons, tab icons, dialog icons, list view icons 23

24 Iconography Android Resources aphy.html 24