Designing for Web stuff you need to know before you start.

Slides:

Advertisements

Similar presentations

Introduction to Computer Graphics Raster Vs. Vector COMMUNICATION TECHNOLOGY.

Advertisements

PITMAN - WEB DESIGN2010 Presentation Series – Ross Doherty Ross Doherty - Web Design - Introduction To Fireworks.

2.01 Understand Digital Raster Graphics

How Images are Represented Bitmap images (Dots used to draw the image) Monochrome images 8 bit grey scale images 24 bit colour Colour lookup tables Vector.

File Formats By Jack Turner. Raster (Bitmap) Raster or bitmap is a dot matrix data structure, containing columns of dots and rows, of a graphics image.

Part A Multimedia Production Rico Yu. Part A Multimedia Production Ch.1 Text Ch.2 Graphics Ch.3 Sound Ch.4 Animations Ch.5 Video.

Introduction to Graphic Arts Technology PRINT Versus WEB.

Web Design, 4 th Edition 5 Typography and Images.

Graphic Images 101. Painted on a grid Drawn mathematically.

Dedicated Vector and Bitmap editing software.

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

Module Code: CU0001NI Technical Information on Digital Images Week -2.

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

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

Basic Knowledge of Web creation. Computer graphic knowledge Graphic file has 2 types Raster Graphic A bitmap or raster image are comprised of pixels in.

CHAPTER 4 LINKS Creating links between pages Linking to other sites links.

SOFTWARE TYPES Word processing Page layout Paint Draw.

TYPES OF GRAPHICS TECHNOLOGICAL DESIGN. GRAPHIC DESIGN DEFINITION Visual problem solving that utilizes shapes, images, text, color, etc. to communicate.

Introduction to Web Design Web publishing HTML basics Web design principles Multimedia on the Web.

Module Code: CU0001NI Technical Information on Digital Images Week – 2 - Extra.

Graphics and Images Communicating Information : Documents and Publications.

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.

Web Design Basics.

2D Graphics Theory & Principles. Single Point Smallest addressable area on screen or digital image.

File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.

Graphics & Images What File Format Do I Use?. Graphics & Images …..are visual images presented on some form of media (drawings, print, web, digital video)

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

Bringing Animation to Your Websites introducing ADOBE FLASH.

Things to Remember When working with digital images.

Adobe Dreamweaver CC: The Professional Portfolio Project 3: Photographer’s Web Site Working with static images Controlling backgrounds with CSS Working.

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.

Module 4- Build a Game Understanding Pictures Compression – Making things smaller.

Raster Graphics 2.01 Investigate graphic image design.

Page Design Issues IWM 14 Information Services for the Web.

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.

Exploring Web Design Chapter 1. Objectives Develop a new perspective of the WWW Learn what makes a website good or bad Discover how to apply objective.

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

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

HTTP transaction with Graphics HTML file + two graphics files.

EUROTECHNIKI PRODUCTION OF MULTIMEDIA MATERIALS FOR EDUCATION MODULE 5: PRODUCTION OF MULTIMEDIA MATERIALS FOR EDUCATION ANTWERP MEETING JANUARY.

13 June – Session : Graphics Different types of Graphics for the web Features of image editing software Good practice for image editing.

Efficient Game Graphics From Flash MX 2004 Game Design Demystified.

Online & Offline Publishing - Bitmaps & Vector Graphics Keywords: Paths, Points, Resize, Transparency, Resolution, Print Quality Web Image File Formats:

2.01 Understand Digital Raster Graphics

2.01 Understand Digital Raster Graphics

Digital Illustration Chapter 6 File format.

Types of Graphics Technological Design.

2.01 Understand Digital Raster Graphics

Introduction to raster graphics

Basic Knowledge of Web creation

Photo Editing for PowerPoint & the Web

Adobe Fireworks.

Graphics: Production Methods, software, & Hardware

Photo Editing for PowerPoint & the Web

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

IMAGE SIZE AND RESOLUTION

Digital Images.

Web Design and Development

2.01 Understand Digital Raster Graphics

MED 2001 Advanced Media Production

الوسائط المتعددة Multimedia.

Photoshop: Creating and Preparing Images for the Web

Digital Image Creation & Editing

2.01 Understand Digital Raster Graphics

Color and Images.

Presentation transcript:

Designing for Web stuff you need to know before you start

Colour What does your colour scheme say about you? Adobe Kuler

Taken from Paul Emery’s Level 3 module - Digital Illustration

paul’s colour thing Taken from Paul Emery’s Level 3 module - Digital Illustration

Image Formats Vector vs Bitmap JPEG - photos GIF - graphics/blocks of colour - very small files PNG - good quality transparent graphics

Resolution RGB 8bit Screen resolution - 72dpi Most screens are set to 1024 x but you ideally want your page to be smaller x 600

Software Photoshop - good for layout and general design Dreamweaver – website creation & coding Illustrator - good for making high res vector graphics Flash – animation, more complex interactive features

Errrrr.....what? Any questions?