We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byFidel Threadgill
Modified over 2 years ago
© 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” iMac @ 2560 x 1440 can display 108 ppi.
© 2014 Boise State University11 2560 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 1320 33 sec. download 123 kb (kilobytes) 660 x 421 2 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 Email email@example.com
© 2014 Boise State University1 Accessibility When websites are correctly designed, developed, and edited, all users have equal access to information and.
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.
Digital Darkroom I Theresa L. Ford. Objectives Basic Digital Image Terminology Screen Display of Pictures –Why are pictures too big for the screen? –Why.
Introduction to Photoshop Altering photos 1 pixel at a time.
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.
The University of Adelaide Picture Perfect: Image Formats and Resolution Peter Murdoch March 2014 PREPARING GOOD LOOKING DOCUMENTS.
ETT 429 Spring 2007 Digital Photography/Scanners.
Editing Images for the Web. Optimization/Compression Graphics optimization is important for fast web page display.
1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.
Fixing digital images with Photoshop Elements 3 a presentation by Patrick Douglas Crispen California State University, Fullerton.
Things to Remember When working with digital images.
PhotoshopPhotoshop. Photoshop What is Photoshop? An image editing program used to create and modify digital images What is a digital image? – A picture.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
Graphics An image is made up of tiny dots called pixels (“picture elements”) The resolution determines the.
Information Technology Services North Dakota State University Lorna Olsen Get the Best Digital Images Possible What’s it all about anyway?
Understanding Images on the Computer How do images work and why?
Information Technology Images: Types, Resolution and Techniques.
CS1033 Pixel and Resolution
Graphic Arts Vocabulary Worksheet Answers. What is digital art? Any artwork that uses some kind of computer technology (includes digital cameras, camcorders,
8 Graphics Digital Media I. What is a graphic? A graphic can be a: Chart Drawing Painting Photograph Logo Navigation button Diagram.
PowerPoint Bloat How to avoid it. 1 PowerPoint technique, 4 image techniques PowerPoint 1.Split long PowerPoint files into several smaller files Image.
Types of Graphics Vector Individual scalable objects defined by mathematical equations Bitmap Pixels (tiny, single-colored square) in a grid Most.
1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.
Multimedia. What is a graphic? A graphic can be a: Chart Drawing Painting Photograph Logo Navigation button Diagram.
Creating Greenfoot Backgrounds. GIMP: GIMP: is a software graphics editor is a software graphics editor is similar to Adobe Photoshop – but FREE. is similar.
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.
File Formats The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.
Digital Images are represented by manipulating this…
Task 2 Create Your Competition Entry Guidance Notes.
Introduction to Photoshop® Travis A. Engelhaupt, Class Files:
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
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.
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.
Images. Image File Formats All browsers support All browsers support –GIF (Graphic Interchange Format) limited to 256 colors lossless compression.
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.
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
From Image Capture to Digital Output. In looking at this we shall consider the following… Quantisation. Quantisation Error. Interpolation. Viewing images.
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.
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.
Digital Imagery Quiz – Review Plank Jr. High – DIWD Class Mr. Brown.
OV Copyright © 2012 Logical Operations, Inc. All rights reserved. Beginning with Image Basics Manage Image Elements and Formats Work with Digital.
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.
Chapter 1 Review Images Links Images II Pictures and Extensions.
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 –http://perleybrook.umfk.maine.edu/samples/imagesplay.htmhttp://perleybrook.umfk.maine.edu/samples/imagesplay.htm.
Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Fundamentals of Web Imaging Instructor: Joseph DiVerdi, Ph.D., MBA.
Digital Images. Scanned or digitally captured image Image created on computer using graphics software.
Representation of Data in Computer Systems Images.
Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.
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.
© 2017 SlidePlayer.com Inc. All rights reserved.