Photoshop: Creating and Preparing Images for the Web

Slides:

Advertisements

Similar presentations

Graphics on the Web. Common Image File Types As you may know, the most widely supported web image graphic formats are GIF and JPEG. So the question is.

Advertisements

Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.

Raster graphics. Colour depth 01 1 bit pr pixel = 2 combinations (2 1 ): 2 bits pr pixel = 4 combinations (2 2 ): bits pr pixel = 16 combinations(2.

Dan Sadler Montgomery County Department of Information Systems & Telecommunications - GIS Team (DIST-GIS) Map Gallery.

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.

Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802

File Types, Sizes & Dots Per Inch (dpi) Best practices applied to Photoshop file formats when creating media-specific documents. Bit Depth is the number.

Web Design, 4 th Edition 5 Typography and Images.

Russell Taylor Week 3. Image File Formats - TIF, JPG, PNG, GIF - which to use? The three most common and important image file formats for for printing,

Graphics Ms. Brewer Spring Bellwork Edmodo – log on! Quiz? Take it if you need to! Policies and Procedures Powerpoint in Shared Folder! Get to Know.

Chapter 14-Designing for the World Wide Web. Overview Introducing multimedia on the Web. Designing text for the Web. Creating images for the Web. Adding.

1 Creating Web Graphics Outline 2.1 Graphics Types 2.2 Vector Graphics 2.3Bitmapped Graphics 2.4Graphics for the Web 2.5 GIF (Graphics Interchange Format)

GRAPHICS/IMAGES INFSCI Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images:  Scanning  Be aware.

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

Web Graphics Image File Formats Image optimization Accessibility issues Using images and colors on the web.

Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.

THE COLORS OF LIGHT RED, GREEN and BLUE

Image Storage Bitmapped Graphics – in which an image is represented as a collection of dots Vector Graphics – in which an image is represented as a set.

Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.

Week 11 Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom

© 2000 – All Rights Reserved – Page 1 Graphic File Formats Graphic File Formats.

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.

Computer Images Can store color info about each pixel, but makes file BIG Compression for Web 15.

10 | Graphics COM 366 Web Design & Production. Native file format –Format native to software program –psd > PhotoShop default Preserves layers –Use “Save.

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

Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.

Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. CMYK -natural RGB -monitor.

Things to Remember When working with digital images.

Using the Sony DSC-P52 Camera Sunday, December 06, 2015.

FILE TYPES FOR WEB DESIGN 1 HOW SHOULD I SAVE?. GRAPHICS INTERCHANGE FORMAT (GIF) Best used for flat-color, sharp-edged art or text Clip art, logos Compression.

Mirjana Devetakovic, M.Sc. CAAD - Images Beograd, 2011.

Raster Graphics 2.01 Investigate graphic image design.

Graphic definitions Summary of Chapter 10 of the Non-designer’s web book by Robin Williams and John Tollet. Pages ( ) Miss Mary Victor.

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.

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

1 After completing this lesson, you will be able to: Comprehend the basics of Web graphics. View and manipulate Web graphics in a graphics program. Describe.

Digital File Formats By Ali Aslam. JPEG JPEG Stands for Joint Photographic Experts Group. JPEG uses a lossy compression routine. Lossy compression means.

Image File Formats Which one is right for me?. The Only Three Image Formats Your Will Ever Need: Names Jpg “Joint Photographic Experts Group” Png “Portable.

Photoshop Basics: Extended Instructor: Vicki Weidler Assistant: Joaquin Obieta.

Putting Education Content on a Diet Ernie Duran Volker Kleinschmidt Stephen M. Weeks.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

2.01 Understand Digital Raster Graphics

2.01 Understand Digital Raster Graphics

Understanding Web Graphics

Web Graphics 101 Web Image File Formats Image Optimization

2.01 Understand Digital Raster Graphics

Introduction to raster graphics

Digital Photo editing with Photoshop

Computer Graphics Different Images File.

Photo Editing for PowerPoint & the Web

"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.

2.01 Investigate graphic image design.

JPG vs GIF vs PNG What is the difference?

Photo Editing for PowerPoint & the Web

A computer display is made up of small squares, called pixels.

1.01 Investigate graphic types and file formats.

Web Development & Design Foundations with HTML5 7th Edition

2.01 Understand Digital Raster Graphics

Web Design Designing for the Unknown.

2.01 Investigate graphic image design.

Creating Images for the Web

Photoshop: Designing Graphics for the Web

2.01 Understand Digital Raster Graphics

2.01 Investigate graphic image design.

Exam Objectives: Identify Design Elements When Preparing Images

2.01 Investigate graphic image design.

Presentation transcript:

Photoshop: Creating and Preparing Images for the Web Instructor: Adam Cavotta

Overview Explore the limitations of images on the Web Become familiar with different Web file formats Explore cross-platform/browser-safe colors Create transparent text, image maps, animation and rollover effects Slice and save images for the Web Learn how to optimize images for the Web Become familiar with the ImageReady interface

Graphic Limitations Connection Speeds User Configurations

Display Considerations Screen Sizes Colors

Cross Platform/Browser-Safe Colors 256 vs. 216 Colors Dithering Using the Color Picker

File Formats JPEG – Joint Photographic Experts Group GIF – Graphics Interchange Format PNG – Portable Network Graphics

JPEG Best for photos or continuous tone, full-color images Uses 16 million colors Browsers use reasonable approximations Work in RGB mode Uses lossy compression Saving (Standard, Optimized, Progressive)

GIF Best for solid color images (buttons, logos) Uses 256 colors Browsers uses 216 colors Work in Indexed mode Good compression Interlaced

PNG (8-bit) Best for line art (logos) Compresses solid areas of color well and maintains sharp detail Generally, has better compression than GIF (10-30% smaller) If considering saving as GIF, also consider saving as PNG (8-bit) Not supported by older browsers

PNG (24-bit) Best for continuous-tone images Compresses well, but can be larger than JPEGs If considering saving as JPEG, could also consider PNG (24-bit) Not supported by older browsers

Comparison of JPEG and PNG JPEG vs PNG Comparison of JPEG and PNG 68K PNG 31K JPG

Comparison of JPEG and PNG GIF vs PNG Comparison of JPEG and PNG 10.8K PNG-8 with 64 colors 9.5K GIF with 64 colors

Transparent Text Photoshop

Saving for the Web 4-Up View File Sizes and Download Speeds Changing Options Halo Effect and Matte Options

Toggling Between Photoshop & ImageReady Toggling Button

Slicing

Image Maps

Rollover Effects

Animations

Summary Explore the limitations of images on the Web Become familiar with different Web file formats Explore cross-platform/browser-safe colors Create transparent text, image maps, animation and rollover effects Slice and save images for the Web Learn how to optimize images for the Web Become familiar with the ImageReady interface

Conclusion Resources Questions & Answers Evaluations Thank You!!!