© 2012 Boise State University1 Boise State Web Camp: Images, Slideshows and Media Shad Jessen Office of Information Technology.

Slides:

Advertisements

Similar presentations

Digital Multimedia.

Advertisements

From Image Capture to Digital Output. In looking at this we shall consider the following… Quantisation. Quantisation Error. Interpolation. Viewing images.

ETT 429 Spring 2007 Digital Photography/Scanners.

Images. Image File Formats All browsers support All browsers support –GIF (Graphic Interchange Format)  limited to 256 colors  lossless compression.

Information Technology Services North Dakota State University Lorna Olsen Get the Best Digital Images Possible What’s it all about anyway?

The University of Adelaide Picture Perfect: Image Formats and Resolution Peter Murdoch March 2014 PREPARING GOOD LOOKING DOCUMENTS.

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

Digital Images. Scanned or digitally captured image Image created on computer using graphics software.

Task 2 Create Your Competition Entry Guidance Notes.

Understanding Web Graphics Web Design Section 5-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.

File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.

Unit E. Image Measurements The size of an image can be measured 2 ways: Dimensions: the height and width, measured in pixels. File Size: measured in Kilobytes.

Chapter 1 Review Images Links Images II Pictures and Extensions.

Getting the Basics Graphics for the Web McIntyre, Period 2 Kellogg, Period 5.

1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.

Day 4.  Assignment 1 Due  Assignment 2 Posted Assignment 2 Posted  Due Feb 9:35 AM  3 8:30 AM  Today we will look at creating and using.

© 2014 Boise State University1 Accessibility When websites are correctly designed, developed, and edited, all users have equal access to information and.

Understanding Images on the Computer How do images work and why?

Fixing digital images with Photoshop Elements 3 a presentation by Patrick Douglas Crispen California State University, Fullerton.

Web Image Basics Comp 140 December 2. Vector Graphics Can be repositioned or resized – Will not diminish output quality Typically stored in AI, EPS, PICT.

1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.

Digital Darkroom I Theresa L. Ford. Objectives Basic Digital Image Terminology Screen Display of Pictures –Why are pictures too big for the screen? –Why.

File Sizes & Storage Requirements.  An image has a width in pixels and a height in pixels  Start by calculating the number of pixels all up  640 x.

ADOBE PHOTOSHOP VECTOR VS RASTER. Pixel A pixel is the fundamental unit of an image in Photoshop. It is a small square block of color. An image often.

PHOTO EDITING MAKING IMAGES WORK FOR YOU Dan Rude, Pam Akins, Dan Kaplan.

Creating Greenfoot Backgrounds. GIMP: GIMP: is a software graphics editor is a software graphics editor is similar to Adobe Photoshop – but FREE. is similar.

PhotoshopPhotoshop. Photoshop What is Photoshop? An image editing program used to create and modify digital images What is a digital image? – A picture.

Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.

Introduction to Photoshop Altering photos 1 pixel at a time.

Graphics An image is made up of tiny dots called pixels (“picture elements”) The resolution determines the.

COS 125 Day 4. Agenda Assignment 1 Due Assignment 2 Posted –Due Feb 9:35 AM Today we will look at creating and using images Examples –

Multimedia. What is a graphic?  A graphic can be a: Chart Drawing Painting Photograph Logo Navigation button Diagram.

Things to Remember When working with digital images.

CS1033 Pixel and Resolution

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Fundamentals of Web Imaging Instructor: Joseph DiVerdi, Ph.D., MBA.

PowerPoint Bloat How to avoid it. 1 PowerPoint technique, 4 image techniques PowerPoint 1.Split long PowerPoint files into several smaller files Image.

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.

Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.

OV Copyright © 2012 Logical Operations, Inc. All rights reserved. Beginning with Image Basics  Manage Image Elements and Formats  Work with Digital.

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.

Scanning Basics. An image can be created, opened, edited, and saved in over a dozen different file formats in Photoshop. Of these, you might use only.

Editing Images for the Web. Optimization/Compression Graphics optimization is important for fast web page display.

Digital Images are represented by manipulating this…

Digital Imagery Quiz – Review Plank Jr. High – DIWD Class Mr. Brown.

Graphics Concepts Presentation

Information Technology Images: Types, Resolution and Techniques.

Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.

8 Graphics Digital Media I. What is a graphic? A graphic can be a:  Chart  Drawing  Painting  Photograph  Logo  Navigation button  Diagram.

Introduction to Photoshop® Travis A. Engelhaupt, Class Files:

Vocabulary Worksheet Answers

WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.

Representation of Data in Computer Systems

ITEC2110, Digital Media Chapter 3 Digital Image Processing 1 GGC -- ITEC Digital Media.

Basic Web Design Week 3 - Graphics UVICELL. Web Graphics Concepts for Week 3 Selecting the right format for your image Creating a name banner for your.

“Rightsizing” Images for

Exploring Computer Science - Lesson 3-4

Exploring Computer Science - Lesson 3-4

Web Graphics 101 Web Image File Formats Image Optimization

Pixel, Resolution, Image Size

Digital Photo editing with Photoshop

Photo Editing for PowerPoint & the Web

Binary 4 File Sizes.

Important Information

Exploring Computer Science - Lesson 3-4

Photo Editing for PowerPoint & the Web

Graphics Basic Concepts.

Graphics Basics.

Comp 20 - Training & Instructional Design

Presentation transcript:

© 2012 Boise State University1 Boise State Web Camp: Images, Slideshows and Media Shad Jessen Office of Information Technology

© 2014 Boise State University2 Image Editors Windows Photoshop CC Photoshop Elements GIMP Paint.NET Mac Photoshop CC Photoshop Elements Photoshop Lightroom Aperture iPhoto

© 2014 Boise State University3 Pixels Single point in a graphic image Older monitors: Hundreds of thousands of pixels (800 x 600) Newer displays: Millions of pixels Multiply your image width by height to get number of pixels: 1980 x 1020 (HD) = 2,073,600

© 2014 Boise State University4 Default Template

© 2014 Boise State University5 Default Template Image Size (171,600 pixels)

© 2014 Boise State University6 Sliders webguide.boisestate.edu

© 2014 Boise State University7 Sliders You can cheat on width, but don’t cheat on height. With right sidebar, image is reduced to 450 x 180.

© 2014 Boise State University8 Need More Room? Full Width Template: 900 x 350. Doublewide Minimal Nav: Limited only by display size.

© 2014 Boise State University9 Department Homepage Banner

© 2014 Boise State University10 PPI (or DPI) The density of pixels per inch. A 21.5” monitor at HD resolution (1920 x 1080) can display 103 ppi. An Apple iPhone 5S can display 326 ppi. A 27” 2560 x 1440 can display 108 ppi.

© 2014 Boise State University x 1440 Display

© 2014 Boise State University12 PPI Resolutions 150 ppi96 ppi72 ppi

© 2014 Boise State University13 File Size and Bandwidth 6.9 mb (megabytes) 4502 x sec. download 123 kb (kilobytes) 660 x sec. download The picture on the left is 56x larger (in file size)!

© 2014 Boise State University14 Optimizing Your Images Output your images to destination size. Crop excess white space. Save photographs/gradients as JPEG (JPG) files (apply approx. 30% compression). Save line art/solid color images as PNG files (8- bit if possible – 24-bit can vastly increase file size).

© 2014 Boise State University15 Free Optimization Tools TinyPNG Compress PNG files 50-80%. Smush.it Optimize all web images.

© 2014 Boise State University16 Optimize for Accessibility in WordPress Give your image a concise title. Use Alt-Tag, and use it correctly.

© 2014 Boise State University17 THANK YOU Shad Jessen