CSC/FAR 020, Computer Graphics, November 9, 2009

Slides:



Advertisements
Similar presentations
Create a Web Site with Publisher 2000 for Marilyn Seguins Class.
Advertisements

Integrating FreeHand with Other Macromedia Web Applications– Lesson 61 Integrating FreeHand with Other Macromedia Web Applications Lesson 6.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Dan Sadler Montgomery County Department of Information Systems & Telecommunications - GIS Team (DIST-GIS) Map Gallery.
Adobe Flash CS4 – Illustrated Unit E: Optimizing and Publishing a Movie.
© 2011 Delmar, Cengage Learning Chapter 13 Preparing Graphics for the Web.
Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES.
Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.
Image Processing, Illustration (Drawing), Paint Programs, and Scanning Dr. Warren C. Weber Cal Poly Pomona.
1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images.
2.01 Understand Digital Raster Graphics
File Formats The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Photoshop Domain 5: Publishing Digital Images Using Adobe Photoshop CS5 Adobe Creative Suite.
CSC/FAR 020, Computer Graphics, October 27, 2014 Dr. Dale E. Parson Outline for Week 9 Vectors and Paths, also File.
MIS 208 Fundamentals of Web Publishing Week 6 Performance Editing Graphics Imagemaps.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Photoshop Software Rasterized, file formats, and printing choices.
 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.
CIT 256 Dreamweaver Intro. Dr. Beryl Hoffman. Start Dreamweaver Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6 Choose Create.
HTML presentation Embedding Graphics in Web Pages n HTML uses an empty tag called the (image tag) n n n or n n n Note: all web production tools do insert.
Week 11 Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom
CSC/FAR 020, Computer Graphics, November 12, 2014 Dr. Dale E. Parson Outline for week 11 Illustrator Type, Pathfinder,
File Saving and editing Basic editing using adjustment layers. Week 3 Artd114 Digital Photography.
Presented by the Virginia 4-H Science and Technology Committee.
8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image.
CSC/FAR 020, Computer Graphics, August 26-28, 2014 Dr. Dale E. Parson Assignment 1, due September 3.
1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.
Graphics in HTML. Graphics  Question: How does a web page include graphics?  Are the graphics included in the HTML file or separate files?
10 | Graphics COM 366 Web Design & Production. Native file format –Format native to software program –psd > PhotoShop default Preserves layers –Use “Save.
Web Graphics. Colours and Display Graphics and Modems 28.8kbps = 3.6 KB per second 36 KB takes 10 seconds to load. Pixels and color.
File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.
Graphic Format Factors
Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.
Things to Remember When working with digital images.
PLACING AND LINKING GRAPHICS
Week 3  Adobe Photoshop Introduction  Create an Image Collage  Save For Web Please Visit:
Chapter 12 Web Publishing. Goals Become an image optimization master Get a handle on Web file formats, including SVG and SWF Learn about Web image color.
Adobe photoshop digital image making. the basics Adobe PhotoShop is an image-editing program that lets you create and edit digital images. ◦PhotoShop.
 HTML Tags  Multimedia Definitions  Information from the Computer Internet Project  Information from the Digital Camera Assignment  Information from.
Page Design Issues IWM 14 Information Services for the Web.
CSC/FAR 020, Computer Graphics, March 25, 2010 Dr. Dale E. Parson Outline for week 9, class 2 Exporting Files.
Web Graphics. Web graphics Bandwidth is king Graphics must load quickly Graphics must be optimized All other components except for text, gif and jpg are.
Task 3 Store and Present Your Digital Entry Guidance Notes.
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. ______ -natural ______ -monitor.
Image File Formats. What is an Image File Format? Image file formats are standard way of organizing and storing of image files. Image files are composed.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
ITEC2110, Digital Media Chapter 3 Digital Image Processing 1 GGC -- ITEC Digital Media.
2.01 Understand Digital Raster Graphics
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
Exploring Computer Science - Lesson 3-4
Exploring Computer Science - Lesson 3-4
2.01 Understand Digital Raster Graphics
Digital Photo editing with Photoshop
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Exploring Computer Science - Lesson 3-4
IMAGE SIZE AND RESOLUTION
2.01 Understand Digital Raster Graphics
Adobe Visual Design 5.00 Apply procedures to publish digital images using Adobe Photoshop (2%) Apply procedures to publish illustrations using Adobe.
Working with images EIT, Author Gay Robertson, 2018.
Embedding Graphics in Web Pages
Photoshop: Creating and Preparing Images for the Web
Creating Images for the Web
2.01 Understand Digital Raster Graphics
Vectors and Paths, also File Export
CSC/FAR 020, Computer Graphics, November 13, 2013
Graphics Basics.
CSC/FAR 020, Computer Graphics, November 16, 2011
Presentation transcript:

CSC/FAR 020, Computer Graphics, November 9, 2009 Dr. Dale E. Parson http://faculty.kutztown.edu/parson Outline for week 10, class 1 Exporting Files

PDF PDF is useful for exporting to word processing tools that cannot read Photoshop files. Download export.zip, Open Concert1.psd. Save as PDF without layers or Photoshop editing as Concert1.pdf. Save as PDF with layers and Photoshop editing as Concert1.pdf. Load into PowerPoint or Word (Insert -> Picture) and compare quality.

Output for Web GIF is an 8-bit format, good for up to 256 colors, retains transparency. JPEG uses 24-bit format with adjustable quality / file size trade-off, no transparency. Use JPEG for continuous-tone images. Limit image size to 800 x 600 pixels at 72 ppi for compatibility with browser screen area and resolution. Smaller file sizes load into browsers faster.

File -> Save for Web and Devices Allows preview of GIF and JPEG options. 2-Up and 4-Up tabs support comparisons. Dithering - Diffusion mixes fewer colors (smaller files) to simulate bigger gamut. Restrictive color reduction is standard web safe. Perceptual is biased towards perception. Selective biases towards colors in the image, compromise between the above two. Adaptive adjusts to the document, bigger files.

JPEG Quality parameters trade file size versus image fidelity. Increasing Blur can reduce noisy artifacts caused by JPEG compression. Matte substitutes for transparent areas. Use of either GIF and JPEG usually requires viewing in the context of a browser. Create / use thumbnails where possible to leave original image at higher resolution.

Inserting images into web pages. SeaMonkey is a free, open-source browser with HTML editing ability. It comes with an editor. http://www.seamonkey-project.org/ Adobe editor is Dreamweaver. Putting up a simple page to preview is straightforward. Embed an image with some text.