Upload
toby-taylor
View
214
Download
0
Embed Size (px)
Citation preview
Slide 1 of 70
Warm up Question:Warm up Question:A. How big will a picture PRINT that was saved at
50DPI and is 200 pixels by 200 pixels?B. If we have an image that was scanned in at 300dpi
and was 2 inches by 3 inches, how many pixels will it be?
C. How many lines of text could you fit on a page given the following information?
A. The font size in a MS Word Document is set to be 36 points.
B. We are using standard 8 ½ by 11 inch paper, portrait, with a 1 inch margin at the top and a ½ inch margin at the bottom.
C. The leading is 0 (no space between the lines).
Answers:A. 4 inches by 4 inchesB. 600 pixels by 900 pixelsC. 19 lines
GRAPHICS GRAPHICS YES, SIZE YES, SIZE DOES MATTER!DOES MATTER!
Computer Science 1033 – Week 4
Afternoon, n.: That part of the day we spend worrying about how we wasted themorning. Unix Fortune
Photoshop, a tool for good or for evil?
Slide 3 of 70
Overview of Today’s TopicsOverview of Today’s TopicsAnnouncementsHow to hand in assignment 1Sampling an imageBlack and White, Gray and True
ColourIndexed ColourReview and worksheetBitmaps vs. VectorsImage file sizeWhy we need compression
Slide 4 of 70
AnnouncementsAnnouncementsDon’t forget Assignment 1 is due on
Friday, February 6th at 3pm! Try to have it done early, the labs will be busy!
Handing in Assignment 1 is 2-part: ◦Part 1: Uploading to panther.uwo.ca via
WinSCP◦Part 2: Submitting the links and references
via OwlVideo of how to hand it in:
◦http://www.csd.uwo.ca/~lreid/cs1033/howtohandinassignment1/SubmissionVideos.html
Slide 5 of 70
Assignment 1 TipsAssignment 1 Tips Follow the instructions carefully. Just by following
the instructions, you can get a very good mark for this assignment!
Check that you have all the required criteria such as 3 DIFFERENT shapes, 2 different types of text orientation, etc.
Check that you named all your files EXACTLY as we indicated.
Make sure you picked good layer names Remember to follow the CRAP rules! Other tips Colour Choices https://kuler.adobe.com/ and
http://design-seeds.com/ http://www.csd.uwo.ca/~lreid/cs1033/firstassignme
ntexample/
Slide 6 of 70
Hints on Assignment 1Hints on Assignment 1You have to use the shape tool to
create:◦3 different shapes◦1 line◦Give the shape a good name, don’t
collapse the layers
Slide 7 of 70
Transferring Files to the World Transferring Files to the World Wide WebWide Web
This info is a refresher of Lab 1 and help on what you will need to do for all 4 assignments!
Slide 8 of 70
Servers vs. ClientsServers vs. Clients
Web Server a computer that delivers (serves up) web pages
Client the computer that is requesting to see/visit the web page.
Many clients will visit one web server, for example 20,000 students might visit Western’s web server to see the page: http://www.uwo.ca
We will put/post our web pages on the Western web server so clients can see our pages.
Slide 9 of 70
Advantages of a Web ServerAdvantages of a Web Server
Connected: Computer is on all the time and connected to the Internet
Always Available: Since it never gets turned off, your website will always be available
Well Maintained: The people running the servers will take care of security and computer maintenance issues
Slide 10 of 70
Web Server at WesternWeb Server at WesternWe will use 2 different Western Web
Servers◦panther.uwo.ca (assignment 1)◦publish.gaul.csd.uwo.ca (assignment 2, 3
and 4)Panther will be hosting (holding) our
jpg image and our .psd file.We will create/edit/work with the web
pages on our local machine and then upload them to panther to see them on the internetYour local
machinePanther(panther.uwo.ca)
Upload
Download
Slide 11 of 70
Creating an area for our web Creating an area for our web pagespages
Each student needs to create a folder called public_html to hold his/her web pages and images. This folder is created automatically at Western by visiting the site: http://www.uwo.ca/its/accounting/ActivatePublish.html
Slide 12 of 70
Uploading our Web Pages to Uploading our Web Pages to PantherPanther
Upload by using a File Transfer Protocol program such as:◦ WinSCP◦ FileZilla◦ WS-FTP◦ Fugu (for Mac)
Log on to the Web Server, Panther, by select Secure File Transfer Client, click on the Quick Connect button and entering the following◦ panther.uwo.ca◦ Your userid◦ Your password◦ Port 22 (should be default)
Slide 13 of 70
Using WinSCPUsing WinSCPJust drag the file from your laptop/lab
machine to your public_html folder on the machine: panther.uwo.ca
Then set the permissions on your files and folders
Slide 14 of 70
Double check that it worked:Double check that it worked:Open a browser like IE or FirefoxType in the web address:
http://publish.uwo.ca/~youruserid/foldername
For example:◦http://publish.uwo.ca/~lreid2 ◦usually when things don’t work it is
because your permissions are wrong or you didn’t use all lowercase!
Slide 15 of 70
Handing in Assignment 1Handing in Assignment 1http://www.csd.uwo.ca/~lreid/cs1033/
firstassignmentexample/ Step 1: Create your assignment in
PhotoshopStep 2: Save your file as a psd and jpg
with the correct file nameStep 3: FTP to panther.uwo.caStep 4: create a folder called assign1Step 5: move the .psd and .jpg files into
assign1 folderStep 6: using IE (Chrome, Safari or
Firefox) double check that you can see your jpg
Slide 16 of 70
Handing in Assignment 1Handing in Assignment 1Step 7: Create a file in a simple text editor
such as Notepad (.txt)Step 8: Put the necessary info in the .txt fileStep 9: Log onto Owl and go to Assignment 1Step 10: Copy the information in the .txt file
into the Assignment Text box in Owl for Assignment 1
Step 11: Press the Submit buttonStep 12: SAVE the email that Owl sends you
to prove you handed in the assignment. YOU’RE DONE!NEED A REMINDER, GO TO
http://www.csd.uwo.ca/~lreid/cs1033/howtohandinassignment1/SubmissionVideos.html
Slide 17 of 70
Remember that we take an Remember that we take an image and…image and…Break it into samples (called pixels).
But how does the pixel in the image go onto the screen (or paper)?
Slide 18 of 70
Displaying Images on the Displaying Images on the ScreenScreenRemember The monitor/screen is made
up of rows of screen pixels. Each screen pixel gets a colour. Thus we map the image pixels on to the screen pixels IN A ONE TO ONE MAPPING and see our image.
The Screen Resolution is the number of pixels across by the number of pixels down that a screen is currently displaying◦Common Screen Resolutions:
640 by 480 800 by 600 1024 by 768 1280 by 1024
Slide 19 of 70
Screen is like a peg board (holes are the monitor pixels)
Image is like pegs (pegs are the image pixels)
One to One mapping
Slide 20 of 70
Changing the Screen Changing the Screen ResolutionResolutionOn a Windows machine:
◦Right click on the Desktop◦Select Properties◦Select Settings◦Change the Screen resolution
1600 px 1024 px
Size of fonts, icons, images
Amount of data you can fit on the screen at one time
640 by 480 Appear large, text larger, easier to read
Not as much
1280 by 1024 Appear smaller, text small, harder to read
A lot !
Slide 22 of 70
Displaying images on a Displaying images on a screenscreenAmount of space the image takes up on
the screen is dependent on:◦Size of the image◦The current resolution of the screen◦NOT THE DPI
Example:◦ Image that is 400 pixels by 300 pixels will take
up ¼ of the screen on a monitor with resolution 800 by 600
◦Same image will take up about 1/16 on a screen that is set at 1280 by 1024
All these images are 412 by 324 pixels but all are different DPI http://www.csd.uwo.ca/~lreid/cs1033/resolution/
Slide 23 of 70
800 by 600 Monitor 800 by 600 Monitor ResolutionResolution
Image takes up ¼ of the screen
600 pixels
300 pixels
400 pixels 800
pixels
Slide 24 of 70
1280 by 1024 Monitor 1280 by 1024 Monitor ResolutionResolution
400 pixels
1280 pixels
1024 pixels
300 pixels
Slide 25 of 70
Average Pixels Per Inch for Average Pixels Per Inch for MonitorsMonitorsDepends on:
◦Size of the monitor in inches◦Current resolution
but average pixels (dots) per inch is usually around 72ppi
Slide 26 of 70
Why does 72PPI matter?Why does 72PPI matter?If we always create an image at 72 ppi,
we are guaranteed that what we see with the zoom level at 100% will be about the same size as on a typical screen as it would if we decided to print it.
Again look at this example: http://www.csd.uwo.ca/~lreid/cs1033/resolution/ ◦The 72ppi will print about the size that it
would be displayed on a monitorBUT… remember if you ever will want
to print the image, it should be created at least at 300ppi
Slide 27 of 70
Resizing an Image Resizing an Image ResamplingResamplingAssume we have an
image that is 400 pixels by 300 pixels.
Making it smaller (200 by 150) ◦Removes pixels◦Makes it crisper◦Gives it a smaller file
size
Slide 28 of 70
Resampling Resampling Making it bigger (1600 by 1200) ◦More pixels◦Makes it
pixelated, jagged◦Adds pixels
(guesses where to put them, like a digital zoom on a digital camera)
◦Makes the file size bigger
Slide 29 of 70
File Size for ImagesFile Size for ImagesThe file size for an image is determined
by the number of pixels◦More pixels greater file size◦Less pixels smaller file size◦DPI/PPI does not make a difference in the file
size http://www.csd.uwo.ca/~lreid/cs1033/resolution/
On the web you want the SMALLEST FILE SIZE possible BUT you still want to display your image at a size appropriate for your page!
Slide 30 of 70
ReviewReviewQUESTION: How many pixels will a 4
inch by 6 inch image be if we scan it in at 100 dpi?
QUESTION: Assume we have 3 images, all 3 images are 100 pixels by 100 pixels but they were each scan in with different dpi. (One was 10dpi, one was 50 dpi, one was 100dpi)◦Which of the following statements are true?
All 3 images will have the same file size The image that was scanned in at 100dpi will
print smaller than the one scanned in at 10dpi
Slide 31 of 70
Quantizing The ImageQuantizing The ImageNow that we know how many pieces
our image will be broken into, how many colours will we have available to represent each pixel?
Assume for each pixel we have 1 bit to represent the colour.
1 bit can hold either 0 or 1◦0 could be white◦1 could be black
Thus 1 bit allows for 2 colours, usually black and white (21 2)
Slide 32 of 70
How many colours can 2 bit hold? 22
4◦00 White◦01 Light Gray◦10 Dark Gray◦11 Black
Slide 33 of 70
Does 1 bit colour look Does 1 bit colour look realistic?realistic?
YES Can you tell what this image represents?
Slide 34 of 70
2 Bit Colour2 Bit Colour4 shades of gray
Slide 35 of 70
More bits, more shades of More bits, more shades of graygray4 bit colour 24 16 Shades
0000
0001
0010
1111
0011
How many shades of gray will 8 How many shades of gray will 8 bits give us?bits give us?
http://www.modernimaging.com/bit_depth.htm
Slide 37 of 70
BREAKBREAKLink sent to me by one of our
students, cool photoshop video:◦http://www.youtube.com/watch?
v=53m0syaPg9A&t=0m39s Video created by a high school kid
from Stratford Ontario(took him 2 years):◦http://www.youtube.com/watch?
v=qIuxiwhUGz4
Slide 38 of 70
How about some Colour?How about some Colour?
Subtractive Model - CMYK Additive Model - RGB
Used for printing Ink applied to paperPrimary Colours
Cyan, Magenta and Yellow
Ink when applied removes (subtracts) the white
Use on monitors“Adding” light to a
black background (the monitor)
Primary Colours Red, Green and Blue
Slide 40 of 70
How do we represent the How do we represent the colourscoloursTrue Colour
◦Can represent 224 colours about 16 million different colours
◦224 = 28 X 28 X 28 = 256 shades of red, X 256 shades of green X 256 shades of blue
◦Need 3 bytes (remember: 1 byte=8 bits) for True Colour (1 byte for red, 1 byte for green, 1 byte for blue)
Slide 41 of 70
2 Ways to encode True 2 Ways to encode True ColoursColours
1. <RGB> <amount of Red, amount of Green, amount of Blue> DECIMAL NUMBER◦ Where 0 is no amount and 255 is
the most allowed◦ <255, 0, 0> the most of red, no
green, no blue◦ <0, 255, 0> the most green, no
red, no blue◦ <100,100,100> equal middle
amounts of red, green and blue◦ <50, 0, 200> a little red, a lot of
blue◦ <200, 0, 50> a lot of red, a little
blue
Slide 42 of 70
2. Hexadecimal Code◦ #RRGGBB RR amount of red, GG amount of
Green, BB amount of Blue◦ Amounts are counted in hexadecimal with
these digits: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F◦ 00 still means 0◦ Hex FF= Decimal 255 (try the calculator to see)◦ 0A=10, 0B=11, 0C=12, 0D=13, 0E=14, 0F=15,
10=16, 11=17,….. FD=253, FE=254, FF=255. ◦ QUESTION: What would Hex FA equal in
decimal?◦ QUESTION: What would Decimal 256 equal in
hex?◦ #FF0000 Red◦ #00FF00 Green◦ #000000 Black
Some hexadecimal colours:
Question: Are these colours the same:• <00,00,00> and #000000?
• <00,00,00> and #000000?• <255,00,255> and #FF00FF
• <255,00,255> and #FF00FF• <66,00,99> and #660099 ?
• <66,00,99> and #660099 ?http://easycalculation.com/color-coder.php http://easycalculation.com/rgb-coder.php
Slide 44 of 70
Can you represent the same Can you represent the same number of colours using Hex as number of colours using Hex as using RGBusing RGBYES
Red Green Blue How many colours?
Smallest Value (RGB)
0 0 0
Biggest Value (RGB)
255 255 255
Total number of shades you can represent
256 256 256 256X256X25616 million colours
Smallest Value (Hex)
00 00 00
Biggest Value (Hex)
FF FF FF
Total number of shades you can represent
16X16 24X2428
16X16 24X2428
16X16 24X2428
28 X28 X 28
22416 million colours
Smallest Value (Binary)
00000000
00000000
00000000
Biggest Value (Binary)
11111111
11111111
11111111
Total number of shades you can represent
2X2X2X2X2X2X2X228
2X2X2X2X2X2X2X228
2X2X2X2X2X2X2X228
28 X28 X 28
22416 million colours
Slide 45 of 70
How many colours do we need How many colours do we need to encode?to encode?
Question: How many colours do you think the human eye can detect (are in the visible spectrum)?◦100,000◦1 million◦5 million◦10 million◦16 million
QUESTION: Consider for a minute, for this image do we really need 16 million colours, could we survive with less to draw it?
Slide 46 of 70
Colour Continued…Indexed Colour Continued…Indexed Colour (not true colour)Colour (not true colour)
Sometimes we don’t need 16 million colours, then we use indexed colour (an index that maps to a group of colours we plan to use)
QUESTION: What types of images don’t need a full palette of colours?
Our index might be 8-bits 28 different colours (just like with gray shades) thus we can show 256 different colours.
Called the Image Bit Depth, e.g. 8 bit depthWe only index the colours we need (if we will
never use purple in our image, don’t need to include it in the index of colours)
Why do the bottom boxes appear to have no colours in them?
Slide 47 of 70
Indexed ColourIndexed ColourIndexed Colour can look pretty good
even though we will only ever have at most, 8-bit colour (or 256 shades of colour)
http://www.csd.uwo.ca/~lreid/cs033/BitDepth/
Slide 48 of 70
Review:Review:Match the encoded colour to the
correct colour name:
Encoded Colour
a) #FFFFFFb) #00FF00c) #FAFAFAd) (0,0,255)e) (0,0,0)f) (14,14,14)g) (125,125,125)
Colour Name
1. White2. Black3. Dark Gray4. Light Gray5. Medium Gray6. Bright Green7. Bright Blue
Encoded Colour
a) #FFFFFFb) #00FF00c) #FAFAFAd) (0,0,255)e) (0,0,0)f) (14,14,14)g) (125,125,125)
Slide 49 of 70
Review SheetReview SheetWork on the review sheet for about
5 minutes (alone or with a friend) and we will take it up as a group.
Slide 50 of 70
Bitmapped Images vs. Vector Bitmapped Images vs. Vector GraphicsGraphics
Bitmapped Graphic Image◦ Image consists of pixels in a grid◦ Icons are an example of a bitmapped
image (do you recognize this icon? ) Icons are usually 32 pixels by 32 pixels
◦When bitmapped images are enlarged (resampled), the computer adds new pixels and guesses on the colour to colour the new pixels (called interpolation) based on surrounding pixels
◦This icon is now 245 pixels by 245 pixels◦Bitmapped images edges become
jagged
Slide 51 of 70
Bitmapped ImagesBitmapped ImagesAlso called raster graphics
imageBitmapped images are
resolution dependent◦Bitmapped image on a 640 by 480
screen (lower resolution) appear larger than on a 1280 by 1024 screen (higher resolution)
Bitmapped images that are enlarged:◦Have larger file size than original◦Become distorted
All images from scanners and digital cameras are bitmapped images
Slide 52 of 70
Common Bitmap FormatsCommon Bitmap Formats Common bitmap file formats are:
◦ BMP (has little compression, makes big files!)◦ GIF◦ JPEG, JPG◦ PNG◦ PICT (Macintosh)◦ PCX◦ TIFF◦ PSD (Adobe Photoshop)
Popular bitmap editing tools/software packages:◦ Microsoft Paint◦ Adobe Photoshop◦ Corel Photo-Paint◦ Corel Paint Shop Pro◦ The Gimp
Slide 53 of 70
Vector GraphicsVector GraphicsVector image is made up of
individual, scalable objects. Objects are defined by mathematical
equationsObjects consist of lines, curves and
shapesNo distortion as image is enlarged
Slide 54 of 70
Vector GraphicsVector GraphicsAs image is enlarged, still has crisp clean
lines.Most browsers don’t display vector
graphics without a plug in. Only can be used with drawings, not
photographsUsually vector graphic image has a
smaller file size than the same image stored as a bitmap.
Below: enlarging and shrinking an image: left using a vector graphical image, right using a bitmapped image
Slide 55 of 70
Vector ImagesVector ImagesExample: Drawing a HeartGreat for logos because
◦Can be scaled down for business card◦Can be scaled up for a trade show poster
http://www.youtube.com/watch?v=PJFc3KlEdLM (watch till about minute 4)
Note: the text in PDF files are Vector based (but not the images in a pdf file)
Slide 56 of 70
Common Vector File FormatsCommon Vector File FormatsCommon Vector file formats include:
◦ AI (Adobe Illustrator)◦ CDR (CorelDRAW)◦ CMX (Corel Exchange)◦ CGM Computer Graphics Metafile◦ DXF AutoCAD◦ WMF Windows Metafile◦ EPS (Encapsulated PostScript)
Popular vector drawing programs/software packages are:◦ Adobe Illustrator◦ CorelDRAW◦ Xara Xtreme◦ Serif DrawPlus
Slide 57 of 70
Activity 1Activity 1Open MS Paint
(Start>Programs>Accessories>Paint)Pick the text tool, set the font to
50pt, type in your namePick the text tool again, set the font
to 12pt, type in your nameSelect the small font and resize it to
the size of the big fontDo they look the same?
Slide 58 of 70
Activity 2Activity 2Draw an oval in MS Paint, then select it
and resize it, watch what happensDraw an oval in Adobe Photoshop,
◦Select Layer>Layer Style and give it an outline (Stroke)
◦Select the oval layer and select Edit>Transform Path>Scale and resize it, watch what happens.
Usually when you see the term “Flatten Image” in Photoshop, it is changing your Vector layer into a Bitmapped layer!
Slide 59 of 70
Bitmapped Graphics vs. Vector Bitmapped Graphics vs. Vector GraphicsGraphicsQuestion: Which of these statements
do you think is true, A or B?◦A. You can convert a vector graphic image into a bitmapped image but you can not easily convert a bitmapped image into a vector graphic image.
◦B. You can convert a bitmapped image into a vector graphic image but you can not easily convert a vector graphic image into a bitmap image.
Slide 60 of 70
How to lose customers before How to lose customers before you ever even had them!you ever even had them!Have you ever gone to a website and
then left within seconds because the graphics were taking too long to download?
Do you ever return?http://www.flamingpear.com/examples-
sbp/images/blue-green-sea-large.jpg http://www.csd.uwo.ca/~lreid/cs1033/
resolution/UncompressedGraphics.html
Slide 61 of 70
How Big Is An Image?How Big Is An Image?Let’s figure out how many bytes one large
picture in true colour (224 colours) would take up.
Question: Assume we have a picture that is:◦ 1600 pixels by 1200 pixels (takes up the whole screen and
more depending on your resolution)◦ Each pixel will need 3 bytes (8 bits for red, 8 bits for green, 8
bits for blue) to represent the colour of each pixel <R,G,B>◦ How many bytes, kilobyte and megabytes is
the image? ◦ 1600 * 1200 * 3 = 5,760,000 bytes◦ 5760000/1024 = 5625 Kilobyte◦ 5625/1024 = 5.5 Megabytes◦ Save a picture this size in Photoshop as .raw to find
size◦ http://www.csd.uwo.ca/~lreid/cs1033/resolution
Look at the size of the file with the extension .raw
We need to decide what We need to decide what are we going to use the are we going to use the
image for?image for?
For Printing in a Flyer or Magazine:
For Displaying in a Web Page:
File size doesn’t matter
Most important issue is the quality of the image!
Image will be printed with at least 300dpi
File size is very importantBigger files take longer to
downloadQuality is important too
but want to try to get best quality with smallest file size.
Slide 63 of 70
How long will it take that How long will it take that uncompressed sunset image to uncompressed sunset image to download if we are using it in a download if we are using it in a webpage?webpage?If the client is using high speed connect at 1500 kilobits per second?
If the client is on a modem that is 56 kilobits per second
On a really old modem that is 28.8 kilobits per second?
33 Seconds
860 Seconds or 14.33 Minutes
1672 Seconds or 28.66 Minutes
Slide 64 of 70
We need to make our We need to make our webpages download as fast as webpages download as fast as possiblepossibleWe want them to be the
“appropriate size” for our page, in terms of proportion
Want the image to look good (“high quality”)
Want image to download quicklyTHUS WE NEED TO MAKE OUR
IMAGE FILES SMALLER BUT OUR IMAGE TO STILL LOOK GOOD!
Below, -Image size isn’t appropriate-Doesn’t look good -BUT it does download faster than the top page because the image is smaller
Slide 66 of 70
How do we download faster?How do we download faster?Make our image file size smaller!Question: What can we do to make
our images smaller?OPTION 1: Make the image be
physically smaller LESS PIXELS (BUT that will change the size it is displayed at on the screen).
For example, a 100 pixel by 100 image pixel (30KB) is smaller than a 200 pixel by 200 pixel image (118KB)
100 by 100 pixelsDid you really want the polar bear to be this small?
200 by 200 pixelsThis is how you wanted the image to look within your page!
Slide 68 of 70
How do we download faster How do we download faster and keep the image the size and keep the image the size we want it?we want it?OPTION 2: COMPRESS THE IMAGE FILE: use tricks to make file smaller without losing the quality of the image or the size (in pixels of the image)
Still 200 pixels by 200 pixels but the file size is smaller than the original.
An uncompressed image that is: 200 by 200 pixels True Colour (16 million colours <R,G,B>) Will be 200 * 200 * 3 bytes = 120,000 bytes Will be 120,000 / 1024 = 117.2 Kilobytes
Slide 69 of 70
ReviewReviewQuestion: How big will an image
be in terms of bytes if it is uncompressed, true colour and 200 by 400 pixels?