Images 1/30/2019. Basics of Photography. Photography, In General

Size: px

Start display at page:

Download "Images 1/30/2019. Basics of Photography. Photography, In General"

Morgan Shaw
5 years ago
Views:

1 Images 1 Basics of Photography 2 Photography, In General You may never have to produce images for a project However, there are some basic photographic principles that are good for you to know Greek: Photograph == light + draw So, when you take a photo, you re literally drawing with light 3 1

Photography, In General So, LIGHT is the single most important consideration when you re composing a photograph Becoming an effective photographer, really, requires that you learn to look at a scene

2 Photography, In General So, LIGHT is the single most important consideration when you re composing a photograph Becoming an effective photographer, really, requires that you learn to look at a scene in a new way How does the ambient light affect the outcome? Can you modify it to fit your mental image of what you re trying to produce? 4 The Photographic Triangle There three things to be aware of when composing an image: Shutter Speed Aperture ISO ( film sensitivity) All three have an affect of the resulting image These three considerations are called The Photographic Triangle [or The Exposure Triangle, whatever] 5 The Photographic Triangle 6 2

The Photographic Triangle Each side of the triangle affects the others For example, a fast shutter speed (stop motion) requires that you make sure the

example: You want to modify the depth-of-field (Aperture). For a portrait, you want a shallow DOF: i.e., large aperture.

$Speed FAST Shutter speed is expressed in fractions of a second.$

3 The Photographic Triangle Each side of the triangle affects the others For example, a fast shutter speed (stop motion) requires that you make sure the aperture is big enough to allow enough light in and the film sensitivity (ISO) is great enough to render that light into an acceptable image Another example: You want to modify the depth-of-field (Aperture). For a portrait, you want a shallow DOF: i.e., large aperture. So the aperture lets lots of light in maybe too much So: faster shutter speed and less film sensitivity (less grain) 7 The Photographic Triangle Shutter Speed FAST Shutter speed is expressed in fractions of a second. So a shutter speed of 1 represents one second, while 1/45 (the speed at which average photographers can hold a camera steady enough for a shot, without causing camera shake ) represents 1/45 th of a second SLOW 8 The Photographic Triangle Aperture Blurry Sharp Blurry f:

This technique is called Painting with Light 11 The Key The key to becoming a skilled photographer, much like any other exercise, is PRACTICE!

4 The Photographic Triangle - Aperture Aperture is the diaphragm (hole) in your lens that opens wide or shrinks small to let light into the sensor. It also controls your depth of field, or how much of the picture you want in focus. 10 The Photographic Triangle Other Effects The second picture was taken 5 minutes after the first! This technique is called Painting with Light 11 The Key The key to becoming a skilled photographer, much like any other exercise, is PRACTICE! Digital photography makes this much easier But the fact remains, you have to experiment with a large variety of subjects and conditions Eventually not to sound too Zen about it, but you ll be able to see the resulting image before you trip the shutter 12 4

5 The Key Web Images 15 5

Web Images In CSCI 1710, we discussed web images and the importance of file size with respect to loading time of web pages Even smartphones typically create image files (most, if not all,.

6 Web Images In CSCI 1710, we discussed web images and the importance of file size with respect to loading time of web pages Even smartphones typically create image files (most, if not all,.jpg files) that are too large for web use Before uploading images to a web site, it is important to modify them to a smaller size/resolution in order to be useful NOTE: You can make an image display any size you want with the CSS width or height properties, but that does not change the file size! 16 Web Images We did do one lab in which we used GIMP to resize images, but some more practice may be in order (a lot of your classmates neglected this on their final projects) Photoshop is generally acknowledged as the premier photo editor Photoshopping has made its way as a popular term for alteration of images before public/social display Many Photoshopping oopsies are out there for public consumption/enjoyment 17 Photo-Fail which led to 18 6

7 Photo-Fail 19 Photo-Fail and 20 Photo-Fail 21 7

8 Web Images Seriously, though Recall that we use the HTML <img> element to embed images into our web pages The <img> element has two required attributes src alt The URL of the image. May be absolute or relative Alternative text for accessibility <img src= images/image1.jpg alt= Image one > 22 Web Images We can modify the display size of an image with CSS img { width: 250px; } Remember, also, that it is only necessary to set one of the dimension properties The browser will automatically calculate the other (aspect ratio) Setting both width and height will usually distort the image (unless you do some math) 23 Web Images Modifying the file size in GIMP can be accomplished a number of ways Most common, probably, is saving a copy of a.jpg file with a new compression ratio Other methods include resizing the image and cropping Most often, now, when I m taking pictures, I zoom out a little to enable creative cropping later 24 8

9 Welcome to GIMP Tools Canvas 25 Welcome to GIMP Select tool Lasso tool Crop tool 26 Web Images - Resizing 0riginal image: Waaaaay too big! Change to 72ppi Image -> Scale Image 27 9

10 Web Images - Resizing 28 Web Images - Resizing 29 Web Images - Resizing 30 10

552,000 bytes to 24,000 bytes (!) That s 4.

11 Web Images - Resizing 31 Web Images Web Page 32 Web Images By modifying the image s resolution, dimensions, and compression ratio, the file size went from 552,000 bytes to 24,000 bytes (!) That s 4.3% of its original file size But still displays fine on a web page! Very important, particularly with mobile platforms 33 11

12 Web Images - Cropping Another way to modify images, and present them more creatively, is cropping Often, images will capture more than a photographer really wants to include Cropping allows the photographer/image editor/web site designers to include only the content that is desired Also, along with resizing, changing dimensions, and modifying the compression ratio, cropping will further serve to reduce file size 34 Web Images - Cropping GIMP s cropping tool resizing handles 35 Web Images - Cropping GIMP s cropping tool rule of thirds 36 12

Web Images - Cropping Double-click to crop file size goes from 58M to 26M 37 Other Media Options 39 Other Media Options Multimedia comes in many different formats It can be almost

13 Web Images - Cropping Double-click to crop file size goes from 58M to 26M 37 Other Media Options 39 Other Media Options Multimedia comes in many different formats It can be almost anything you can hear or see Examples: Images, music, sound, videos, records, films, animations, and more Web pages often contain multimedia elements of different types and formats 40 13

Other Media Options The first web browsers had support for text only, limited to a single font in a single color Later came browsers with support for colors and fonts, and images!

14 Other Media Options The first web browsers had support for text only, limited to a single font in a single color Later came browsers with support for colors and fonts, and images! Audio, video, and animation have been handled differently by the major browsers Different formats have been supported, and some formats require extra helper programs (plug-ins) to work Hopefully this will become history. HTML5 multimedia promises an easier future for multimedia 41 Other Media Options Multimedia elements (like audio or video) are stored in media files The most common way to discover the type of a file, is to look at the file extension Multimedia files have formats and different extensions like:.swf,.wav,.mp3,.mp4,.mpg,.wmv, and.avi 42 Other Media Options - Video Format File Description MPEG.mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web..mpeg Used to be supported by all browsers, but it is not supported in HTML5 (See MP4). AVI.avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. WMV.wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. QuickTime.mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. (See MP4) RealVideo Flash.rm.ram.swf.flv RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but does not play in web browsers. Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers. Ogg.ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5. WebM.webm WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5. MPEG-4.mp4 or MP4 East Tennessee State YouTube. University MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by 43 14

15 Other Media Options - Audio Format File Description MIDI RealAudio.mid.midi.rm.ram MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers. RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers. WMA.wma WMA (Windows Media Audio). Developed by Microsoft. Commonly used in music players. Plays well on Windows computers, but not in web browsers. AAC.aac AAC (Advanced Audio Coding). Developed by Apple as the default format for itunes. Plays well on Apple computers, but not in web browsers. WAV.wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML5. Ogg.ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5. MP3.mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers. MP4.mp4 MP4 is a video format, but can also be used for audio. MP4 video is the upcoming video format on the internet. This leads to automatic support for MP4 audio by all browsers. 44 Other Media Options - Video Playing Videos in HTML Before HTML5, a video could only be played in a browser with a plug-in (like flash) The HTML5 <video> element specifies a standard way to embed a video in a web page 45 Other Media Options - Video Don t really need these The controls attribute adds video controls, like play, pause, and volume It is a good idea to always include width and height attributes If height and width are not set, the page might flicker while the video loads The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element 46 15

Other Media Options - Video http://csci1720.net/examples/video.

Video A note on embedding videos: If you have more than one or two videos on a page that you re hosting locally

16 Other Media Options - Video 47 Other Media Options To start a video automatically use the autoplay attribute 48 Other Media Options - Video A note on embedding videos: If you have more than one or two videos on a page that you re hosting locally (i.e., on your web server), loading times well be very slow This is because the browser will cache the video content A lot of videos == a lot of caching! 49 16

17 Other Media Options - Video If you have a lot of videos to present, YouTube is a better solution: Copy & paste into web document 50 Other Media Options Video Browser Support Browser MP4 WebM Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox YES YES YES Safari YES NO NO Opera YES (from Opera 25) YES YES 51 Other Media Options - Audio Before HTML5, audio files could only be played in a browser with a plug-in (like Flash) Flash can be enabled on Chrome, but it takes a couple of steps to do so The HTML5 <audio> element specifies a standard way to embed audio in a web page 52 17

Other Media Options - Audio Again, not necessary The controls attribute adds audio controls, like play, pause, and volume The <source> element allows you to specify alternative audio files which the

18 Other Media Options - Audio Again, not necessary The controls attribute adds audio controls, like play, pause, and volume The <source> element allows you to specify alternative audio files which the browser may choose from The browser will use the first recognized format The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element 53 Other Media Options - Audio 54 Other Media Options - Audio Browser MP3 Wav Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox YES YES YES Safari YES YES NO Opera YES YES YES 55 18

Side Note: Ninite There is a web service called Ninite that is very handy, particularly if you re setting up a new PC You can pick which open source applications you want to install e.

19 Side Note: Ninite There is a web service called Ninite that is very handy, particularly if you re setting up a new PC You can pick which open source applications you want to install e.g: Chrome, Opera, Firefox, 7-Zip, Audacity, Java,.NET, Python, FileZilla, Notepad++, JDK, JDK x64, PuTTY, Eclipse, GIMP, and so on Ninite will bundle all of the installation files into a single executable that you can download and run 56 Side Note: Ninite 57 Side Note: Ninite 58 19

20 Side Note: Ninite If you save the installation file, you can also use it to perform updates I ve never used that option, though Many applications check for updates on their own (FileZilla is the WORST!) 59 Review What is the most common image format on the web? A..gif B..bmp C..jpg D..raw 60 Review What is the standard image size for web images? A. 2MB B. <150KB C. 1GB D KB 61 20

21 Review What is the most important issue associated with web images? A. Display size B. Floating C. Transparency D. File size 62 Review What Photoshop tool can significantly reduce an image s file size? A. Resolution B. Dimensions C. Compression ratio D. All of the above 63 Review It is best, if you have a lot of video files to present, to do so from your own web server. A. True B. False 64 21

22 Review The type attribute is required for <video> and <audio> elements under the HTML 5 standard. A. True B. False 65 Review The Rule of Thirds in photography states that A. An image s file size should be no more than one-third of its original size when posted to the web B. An image s color-depth is at most one-third of that perceivable by the human eye C. The focal point of an image should be located along the border or intersection of a set of imaginary lines that divide an image into thirds horizontally and vertically D. Only a third of the images you take will ever be of any use on a web site 66 Review Despite its cost, Photoshop is regarded as the premier photo editing application available A. True B. False 67 22

23 Review Which of the following audio formats are supported by the HTML 5 standard? A..mp3 B..mp4 C..ogg D..wav 68 Review Support for video and audio has been included in HTML since its inception A. True B. False 69 Homework Over the weekend, take four pictures with your phone or digital camera Copy the images to an external drive or them to yourself Monday, we ll use what we ve learned to optimize the images and embed them into a web page 70 23

24 Sources Copyrights Presentation prepared by and copyright of John Ramsey,, Department of Computing. Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iseries, pseries, xseries, zseries, eserver, z/vm, z/os, i5/os, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Oracle is a registered trademark of Oracle Corporation. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Sun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company. ERPsim is a registered copyright of ERPsim Labs, HEC Montreal. Other products mentioned in this presentation are trademarks of their respective owners

Custom Fonts / Setting up a Domain

Custom Fonts / Setting up a Domain Fonts One catch to the font-family property The display font must be present on the client machine to work This is why we ve been specifying a fallback font when we use