* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download 12 - Imagecreation
List of 8-bit computer hardware palettes wikipedia , lookup
Anaglyph 3D wikipedia , lookup
3D television wikipedia , lookup
Computer vision wikipedia , lookup
General-purpose computing on graphics processing units wikipedia , lookup
Free and open-source graphics device driver wikipedia , lookup
Rendering (computer graphics) wikipedia , lookup
Stereoscopy wikipedia , lookup
Portable Network Graphics wikipedia , lookup
Stereo display wikipedia , lookup
Hold-And-Modify wikipedia , lookup
Indexed color wikipedia , lookup
Waveform graphics wikipedia , lookup
Graphics processing unit wikipedia , lookup
Framebuffer wikipedia , lookup
Apple II graphics wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Image editing wikipedia , lookup
Molecular graphics wikipedia , lookup
Making Images for the Web Map of This Lecture • • • • • Different types of graphic Colours and Image Display on the Web. Image creation Resolution, file size and download speed Useful Software Types of Graphic • Two main distinctions: • Vector Graphics – The file records the shapes used to make the image • Bitmap Graphics – The file records the pixel dots used to make the image Vector Graphics • The file records the shapes used to draw the image. • Best for drawn art, such as: – Diagrams – Cartoons Vector Graphics Vector Graphics • Has a very specialist niche on the web. • Three competing formats, both of which work in most browsers: – Flash – SVG – HTML5 Canvas • Flash is the most popular. Easily makes images, animations and interactive apps. • SVG & HTML5 are open-source. Vector Graphics • Flash can be created using a number of tools. There is a version of Adobe Flash in the computer barn and another in the Mac labs. • There are some free tools for making Flash files, but they are hard to use. • SVG can be created by Inkscape, which is opensource and free. • SVG can also be handwritten as text. Vector Graphics SVG can be displayed by all quality browsers: • Google Chrome • Firefox • Safari • IE7 cannot display SVG without a plug-in. (try the Adobe plug-in) Vector Graphics Adobe Edge: • Free download • Replaces Flash (which was a security threat). • Will use HTML5 to do anything that Flash could. Bitmapped Graphics • Bitmapped graphics build up an image from individual dots of colour, like a television picture. • It can be used for photographs or diagrams Bitmapped Graphics Bitmapped Graphics • Bitmapped graphics have a greater file size than the vector type • For this reason, we have ways of compacting the information. • This results in different file types. • Web browsers can all display: – GIF (Graphics Interchange Format) – JPEG (Joint Picture Experts Group) – PNG (Portable Network Graphics) Bitmapped Graphics • GIF and PNG files use a lossless compression algorithm to minimise the file size. They are suitable for any graphic, but can minimise data best for diagrams and cartoons. • JPEG files throw away such data as humans don’t see, and thus minimise the data. They are best for photographs. Do not re-edit them as they lose data at every re-encoding. Bitmapped Graphics • Be aware of BMP • BMP is not a web graphics format (there are many non-web formats). • It is not compressed at all, so the file size is rather large. • It is excellent for editing • It is accepted by every graphics package. • It can be created by every graphics package. Display on the Web • You will need to be able to display: • Colours: – backgrounds – frames – lines – text colour • Images: – Pictures – Backgrounds Colours • Described in: • Names – e.g. “lime” • Hexadecimal – e.g. “#00FF00” • RGB – e.g. “rgb(0, 255, 0)” Colours • There are only 16 names in the HTML specification: • h1 {color: lime;} Colours - RGB • Each colour has three components, red, green and blue. • The maximum value for each is “full on” = 255. • Zero is “off” • Thus white is rgb(255, 255, 255) • Black is rgb(0, 0, 0) p {background-color: rgb(0,255,0)} Colours - Hexadecimal • Just as in RGB, each colour has a value 0 ... 255, but it is expressed in Hexadecimal. • Hex numbers run: 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11... • ... so “F” means 15, “10” means 16 and FF means 255. • It is a number system for people with 16 fingers. Colours - Hexadecimal • In Decimal notation 24 = 2*10 + 4 • In Hex, 36 = 3*16 + 6 • e.g.: h1 {background-color: #00ff00;} Image Creation • There are (at least) four different ways of producing a graphic for the web: – Camera – Scanner – Graphics package – Graphics package + tablet – Screen grab. Image Creation - Camera • Shoot the scene on your camera or mobile phone • If it is a camera, connect it to the computer via the USB port and download the pictures from the file system • If a mobile phone, use USB or email the photos to yourself. • The image is usually a JPG Image Creation - Scanner • A scanner will photograph any piece of paper up to A4, producing an image. • You may need to think hard about output file type. You might need a converter like Irfanview (recommended: free download). • You can use a graphics package to edit the graphic – it will usually need to be cropped. Image Creation – Graphics Package • Simply draw your graphic using a graphics package, using a mouse or tablet. • Alternatively, use the package to edit one of your photographs. • There are so many packages out there • There are so many free packages out there. Image Creation - Screengrab • You want to take a snapshot of your computer screen – perhaps a web page or an image. • The PrintScreen key takes a snapshot of the whole monitor screen • Alt-PrintScreen takes a snapshot of the currently active window. • The image is now on the clipboard. Image Creation - Screengrab • To use the image, open a graphics package (like Paint or Irfanview) • Inside the window of the graphics package either: – hit control-v – right-click and select “paste” – use the edit menu and select “paste” • The image will appear. Image Creation - Screengrab • Having captured your image you may want to crop it, alter its resolution, and save it as a PNG, JPG, BMP or GIF file Resolution • Resolution, File-size and Download Speed • The resolution of a bitmapped image is the number of dots per unit length (pixels per inch). • Images with too low a resolution look fuzzy or blocky Resolution • The other problem is that images with high resolution have a large file size. • For an uncompressed image, there can be up to 3 bytes per pixel. • So a 5 megapixel image, as produced by some mobile phones, will have an uncompressed file size of 15 Megabytes. • mpeg compression can reduce this to 10% Resolution • Assume a 1 megabit/sec broadband connection: • 15 megabytes will take 15 x 8 = 120 seconds, ie 2 minutes to download. • The mpeg version will take 12 seconds! • Many connections are a lot slower than 1 megabit/sec. • We must minimise this data. Resolution • Ok, so images straight from the camera take an unacceptably long time to download and take up an unacceptable amount of filespace • So use a graphics editor to reduce the resolution. • Most monitors have a resolution of about 100 pixels per inch. Useful tools for your pen drive • Irfanview (graphics editor) • WinSCP (allows you to upload to your I: drive from home) • Notepad++ (Intelligent editor for all web languages) • Firefox (stand-alone browser) • Web Developer (CSS editor plug-in for Firefox)