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.

Slides:



Advertisements
Similar presentations
Introduction to Computer Graphics Raster Vs. Vector COMMUNICATION TECHNOLOGY.
Advertisements

L.Ghadah R. Hadba CT1514-L1.  Computer Graphics :refers to processing of creating a new image from Geometry, Lighting parameters, Materials and Textures.Using.
Droddy.  “Pixel” is short for two words: Picture and Element. Pixels (tiny squares) combine to form the image the human eye perceives Too small for the.
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
Introduction to Computer Graphics
Graphics and Animation Chapter 8. 8 Graphics in Multimedia Graphics are an element that virtually all multimedia applications include.
Raster vs Vector and Image Resolution By Josh Gallagan.
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.
Digital Images. Scanned or digitally captured image Image created on computer using graphics software.
 Scanned or digitally captured image  Image created on computer using graphics software.
Introduction to Graphic Arts Technology PRINT Versus WEB.
Zinnia Bell. RAWimages are image files that have not yet processed, they contain minimally processed data from the image sensor of either a image scanner,
Images and the Web web graphics. web graphics: constraints Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Objective Understand concepts used to create digital graphics. Course Weight : 15% Part Three : Concepts of Digital Graphics.
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.
Digital Terminology. Bitmap A representation consisting of rows and columns of dots of a graphic image stored in computer memory. To display a bitmap.
Getting the Basics Graphics for the Web McIntyre, Period 2 Kellogg, Period 5.
JRN 302: Introduction to Graphics and Visual Communication - Raster and Vector Files Tuesday, 9/8/15.
Foundations of Web Design I Photoshop CS5 Michael Daniel
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.
Color and Resolution Introduction to Digital Imaging.
CS- 375 Graphics and Human Computer Interaction Lecture 1: 12/4/1435 Fundamental Techniques in Graphics Lecturer: Kawther Abas.
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.
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.
Computer Graphics An Introduction Jimmy Lam The Hong Kong Polytechnic University.
 Scanned or digitally captured image  Image created on computer using graphics software.
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.
Adobe Photoshop CS5 – Illustrated Unit A: Getting Started with Photoshop CS5.
Raster Graphics 2.01 Investigate graphic image design.
Graphics Concepts Presentation
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.
The Web. Web Servers and File Transfer Protocol (FTP)
Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.
Vocabulary Worksheet Answers
UNITS OF MEASUREMENT 2.01 Understand Digital Raster Graphics.
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
DIGITAL MEDIA FOUNDATIONS
Graphics 1 Graphics 2 Color 2 I Spy 1pt 1 pt 1 pt 1pt 1 pt 2 pt 2 pt
Types of Graphics Technological Design.
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
Binary Representation in Audio and Images
2.01 Understand Digital Raster Graphics
Introduction to raster graphics
Basic Knowledge of Web creation
2.01 Investigate graphic image design.
Graphics Basics Ellen Eyth.
Digital Images.
Graphics and Animation
1.01 Investigate graphic types and file formats.
Graphics Basic Concepts.
ImageEditing Understanding Image Resolution.
Сабақтың тақырыбы: Компьютерлік графика негіздері
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
2.01 Investigate graphic image design.
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
Color and Images.
2.01 Investigate graphic image design.
2.01 Understand Digital Raster Graphics
Graphics and Animation
2.01 Investigate graphic image design.
Presentation transcript:

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 a grid. Each pixel or "bit" in the image contains information about the color to be displayed. Bitmap images have a fixed resolution and cannot be resized without losing image quality. Most bitmap images can be converted to other bitmap-based formats very easily. Bitmap images tend to have much large file sizes than vector graphics and they are often compressed to reduce their size. Vector Graphic Vector graphics are made up of many individual objects. Each of these objects can be defined by mathematical statements and has individual properties assigned to it such as color, fill, and outline. Vector graphics are resolution independent because they can be output to the highest quality at any scale. Vector graphics tend to have much smaller file sizes than raster-based bitmaps.

Color Mode for Computer Graphic Color spaces RGB - This color space is based on the primary additive colors of Red, Green, and Blue. This is the most common color mode used in graphics software CMYK - This color space is based on the ink colors used in traditional full-color commercial printing: Cyan, Magenta, Yellow, and black.

Resolution Resolution is a measurement of the output quality of an image, usually in terms of samples, pixels, dots, or lines per inch. The terminology varies according to the intended output device. Pixel is the smallest display element that makes up the images you see on a computer monitor or television. In bitmap-based images, the more pixels an image contains, the higher its resolution

File Format that use for Web Design File Format that use Website +Gif (Graphic interchange format) This file can have an animation and also can have transparency background such as Emotion icon +Jpeg (Joint Photographic Experts Group ) This file is a very common file that use in many field of work. +Png (Portable Network Graphics) This file is a good quality for creating graphic with transparency background. +SWF ( Shockwave flash) This is Flash animation file that is created from Adobe Flash. Actually,it is the most common animation and interactive file on the internet

Web design process 1. Concept Define Target audience, Goal, Aim 2. Navigation Flowchart sitemap, design the navigation, How user navigate make process easy. Example: Navigation Flowchart (site map) 3. Design Look and Feel or Mood,Tone, Color, Font, Attractive, and Theme Program : Photoshop, and Illustrator 4. Programming Design Program : Dreamweaver, Flash,Word press, Joomla and etc.. 5. Upload Find server and create domain name – ftp upload (File Transfer Protocol) Example: FileZillaNavigation Flowchart (site map)

Web design process 6. Testing find out the error Web browser : Internet Explorer, File Fox, Safari, and etc.. 7. Promoting Make Traffic, E-Marketing Example: Web community, Web board, Banner 8. Maintenance Always check an error, Google Analytic.

Navigation Flowchart (site map)