0% found this document useful (0 votes)
463 views58 pages

Digital Graphics and Multimedia Basics

ඉගෙනුම් ආධාරකය 1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
463 views58 pages

Digital Graphics and Multimedia Basics

ඉගෙනුම් ආධාරකය 1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 58

nyqudOH Ndú;h

Use of Multimedia
THE CHAPTER CONCERNS THE FOLLOWING;
 The basics of digital graphics  Graphic size and compression
wxls; .%dmslhkayS uQ,sldx. .%dmslhl Odß;dj yd ixfldapkh
 Graphic types  Basics related to graphic design
.%dmsl rEmh .%dmsl uDÿldx. Ndú;fha uQ,sldx.
 Fundamentals of animation  Geometric objects and shapes
iÔùlrK uQ,sldx. cHdñ;sl jia;= y yev;,
 Types of frames  Multimedia animation
rduq j¾. iÔùlrKh'
 Multimedia distribution  Audio recording
fnod yeÍu' Y%jH má.; lsÍu'
 Multimedia editing  Audio/Video mixing towards
animation
nyq udOH ixialrKh YjH oDYH ixl,kh iy icSùlrKh'
mß.Kl .%dmsl uDÿldx. Ndú;fhka ks¾udKh lrkq ,nk
Ñ;% fyda rEm wxls; .%dmsl f,iska y÷kajkq ,nhs
Drawings or images, created with the use of computer graphic
software, are called digital graphics.

Basic elements of digital graphics


mslai,a (Pixel)
mslai,hla hkq wxls; .%dmslhl uQ,sl ;ekqï tAllhhs' wm
úiska krUkq ,nk wxls; .%dmslhla mslai,a oyia .Kklska
ks¾udKh ù we; fuu mslai,a" fma<s iy ;Sr f,iska
tlsfklg hd jk wdldrhg b;d <Õska ilia ù we;s w;r
tu.ska .%dmsl ks¾udKh fõ' wxls; .%dmslhla
RcqfldaKdi%dldr mslai,a wrdjla (array& jk w;r fuh ìgq
wkqrEms;hla ^bitmap& f,iska o ye¢kafõ

A pixel is a tiny illuminated dot having a colour which is


displayed on a computer screen. The digital graphics are
created with thousands of such pixels. These pixels get
arranged in rows or columns close to each other to produce
graphical image. A digital graphic is an array of rectangular
pixels called a bitmap.
mslai,hl j¾K iy ìgq m%udKh

mslai,hl ìgq m%udKh ;SrKh jkafka .%dmsl ks¾udKfha


§ fhdod .kq ,nk j¾Khkag wkqj h
The number of bits per pixel determines the colours
used in an image.
.%dmsl úfNaokh (resolution)
wxls; .%dmslhl fN!;sl mßudKh ^Physical dimension&
uekSfï tallh mslai,a jk w;r fN!;sl mßudKh .%dmsl
úfNaokh ^Image resolution& f,iska oelafõ .%dmslhl
.=Kd;aul nj ;SrKh lsÍfï § j¾. wÕ,lg we;s mslai,
m%udKh ^pixels per inch-ppi& fyda j¾. wÕ,lg we;s ;s;a
m%udKh ^dots per inch-dpi& fldmuK m%udKhla oehs fidhd
nef,a

Pixels are used to measure the physical dimension of a digital


graphic. The physical dimension is displayed as the image
resolution. To determine the quality of a graphic the number
of pixels per inch (ppi) used (horizontal or vertical) or the
number of dots per inch (dpi) used (horizontal or vertical)
are considered.
.%dmsl úfNaokh (resolution)
Ñ;%hl mslai, 250 la m<,ska iy 175la Wiska hqla;
kï tys .%dmsl úfNaokh ^Image resolution& mslai,
250«175 fyda mslai, 43"750 f,iska oelafõ‘
250 wide and 175 pixels high. The image resolution,
Therefore, is 250 x 75 pixels or 43,750 pixels.
j¾K (color)
wxls; .%dmslhla mslai, oioyia .Kkl tl;=jla nj
bf.k .;af;uq' iEu mslai,hla u j¾Khla ksfhdackh
lrhs' tfia kï mslai,h hï lsis j¾Khla iys; l=vd ;s;ls'
j¾K ix>gl ixl,kh ùfuka ks¾udKh jk idudkH mshú
weig y÷kd .; yels j¾K ñ,shk 16la muK we;;a ta
iEu j¾Khla u ksjerÈ j fjka lr y÷kd .ekSu wmyiq
ld¾hhls'
A digital graphic contains tens of thousands of pixels. Each
pixel represents a color. Therefore, a pixel is a small dot with a
color.
There are about 16 million of recognizable colors visible to
the naked eye. The number comes from a mixture of colors .
However, it is difficult to correctly recognize each color.
wxls; .%dmsl ks¾udKfha § fndfyda j¾K fhdod .;
yels w;r tu ks¾udKh m%;sodkh lrk Wml%uh fyda
udOHhg wkqj ks¾udKfha § fhdod .; hq;= j¾K
wdfoaYlh ^Colour models& l=ula oehs ;SrKh l< hq;=
h
In designing digital graphics it is possible to use many
colours. The colour model which should be used for the
design must be decided based on the output device or
the media
nyq, j Ndú; jk j¾K wdfoaYl foj¾.hls
RGB wdfoaYlh ^RGB model&
RGB wdfoaYlh ^RGB model& - nyq, f,i Ndú; jk
RGB wdfoaYlh j¾Kj;a wdf,dal ^Coloured lights&
wdOdrfhka rEmjdyskS fyda mß.Kl ;sr u; rEm
ks¾udKh lsÍfï § fhdod .kq ,nhs' fuys uQ,sl
j¾K ^Primary colours& jkafka r;=" fld< iy ks,a
^Red, Green and Blue& j¾Khs
RGB Model – This is widely used to create images on
television screens or computer screens using colored
lights. The Primary Colours used here are red, green
and blue.
CMYK - Four Color (Cyan/Megenta/Yellow/Black)

CMYK wdfoAYlh ^CMYK model& - ;Ska; ^Coloured


inks& wdOdrfhka lvodis u; rEm uqøKh lsÍfï §
CMYK j¾K wdfoaYlh Ndú; fõ' fuys uQ,sl j¾K
^Primary colours& jkafka <d ks,a" oï" ly iy l¿
^Cyan, Magenta, Yellow, Black) j¾Khs

CMYK Model – This model is used for printing on


paper using colored inks. The Primary Colours used
here are Cyan, Magenta, Yellow and Black.
;ks j¾K uQ,sl j¾K ^Primary colours& f,iska o" j¾K
folla tl;= ùfuka iEfok j¾K oaú;Shsl j¾K
^Secondary colours& f,iska o" j¾K ;=kla tl;= ùfuka
iEfok j¾K ;D;Shsl j¾K ^Triplet colours& f,i o
ye¢kafõ' uQ,sl j¾Khl m%fNao 256 la ^0 - 255 olajd& we;'

;D;shsl j¾K iE§u i|yd j¾K m%fNao ñY% jkafka 000"


000" 000 isg 225 225" 225 olajd h' fuh zRGB TripletZ
f,i ye¢kafjk w;r th RGB ^245" 102" 36& f,i fyda
RGB (F5" 66" 24& Iâ oYu ixLHd wdldrfhka o oelafõ

To make a tertiary colour, the colour combination should be


from 000, 000, 000 to 225, 225, 225. This is known as RGB
Triplet and it can be represented in octal numbers as RGB
(245, 102,36) or RGB (F5,66,24)
.%dmsl ixfldapkh
^Graphic compression&
.%dmslhl m%udKh ;SrKh jkafka th ks¾udKfha § fhdod
.kq ,nk mslai, m%udKhg" f¾Ld m%udKhg yd fhdod .kq
,nk j¾K ixl,khg wkqj h mslai, úYd, m%udKhlska
hq;=" j¾Kj;a" Wiia úfNaokhla iys; .%dmslhla by<
m%udKhlska hqla; fõ' tjeks .%dmslhla ;ekam;a lsÍfï §
iy iïfm%aIKh lsÍfï § isÿ jk wmyiq;d u.yrjd .ekSu
i|yd .%dmsl ixfldapkh ^Graphic compression& lsÍug
wjYH fõ

The size of a graphic is determined by the number of pixels,


the number of lines and the color combinations used for the
creation. A graphic with a large number of pixels, colors and a
high resolution has a large file size. There may be difficulties
in strong and transmission of such a graphic. Graphic
compression is used to compress file size. Compression can
be carried out at the time of saving the graphic or later.
ydks jk ixfldapkh ydks fkjk ixfldapkh
Lossy Lossless
ydks jk ixfldapkh ydks fkjk ixfldapkh
Lossy Lossless
.%dmsl m%rEm - Graphic Types
wxls; .%dmslh m%Odk jYfhka m%rEm folls' tkï rdiag¾
.%dmsl ^Raster graphic& iy fjlag¾ .%dmsl ^Vector
graphic& hkqfjks' .%dmslh fohdldrhla jkafka mßYS,lhd
úiska ks¾udKfhA § fhdod .kq ,nk .%dmsl uDÿldx.hg
wkqj h

Digital graphics fall into two main categories. They are raster
graphics and vector graphics. The type of graphic (raster or
vector) is decided according to the graphical software used.
There is a difference between Raster graphic and Vector
graphic. Let us identify them.
ADOBE PHOTOSHOP
ADOBE PHOTOSHOP SCREEN LAYOUT
PHOTOSHOP INTERFACE
Photoshop úkafvdafõ ±l.; yels fldgia
1 ghsg,a nd¾ - title bar
2 fukq nd¾ - Menu bar
3 gQ,a fndlaia - tool bar
4 TmaIka nd¾ - Option bar
5 fvdlshqukaÜ úkafvdaõ - Document window
6 me,Ü fjd,a - Palette well
7 me,Üia - Palettes
8 iafÜgia nd¾ - Status bar
1. Photoshop Menu Bar
2. Window – S/H tool Bar/ Image Editing) PdhdrEm ixialrKh i|yd
wjYH fuj,ï fuys wka;¾.; fõ
7 File – New w¨;ska msgqjla ,nd.ekSu iy wjYH wdldrhg msgqj
ixialrKh lr .ekSu
8 Page Width – msgqfõ m<, f;dard .ekSu
9 Page Height – msgqfõ Wi ilia lr .ekSu ^ks¾udKh lrk
PdhdrEmhg .e,fmk wdldrhg msgqj ilia lr .; hq;= fõ&
Standard Photo Size – 3R,4R, 8R, 10 x 12, 10x15 etc
10 Resolution – j¾. wÕ,lg wh;a ;s;a ixLHdj DPI – Dot Per
Inch (pixel)
11. Color mode – RGB/ CMYK and Grayscale Color mode
12. Background Contents – White and BG Color (Select the
white Page) PdhdrEm ixialrKh i|yd wjYH msgqj f;dard
.ekSu
13. Page Size tl n,d .ekSu
Save Photoshop File
• Photoshop File Save lsÍu i|yd PSD File
Format tl f;dard .; hq;=h ks¾udKh lr.kq ,nk
PdhdrEm kej; ixialrKh l< yelafla fï
wjia:dfõ§ muKs
• Use the Save command to save changes to the
current file or the Save As command to save
changes to a different file.
• Save changes to the current file
• Choose File > Save.
Other File Formatting

fjk;a jevigykla iuÕ iïnkaO lr .ekSfï§ File


Format fjkia lr .ekSu isÿ fõ ta i|yd Choose
File > Save As. úOdkh Ndú;d lrhs

• The file remains in the current format.


• Save a file with a different name, location, or
format
• Choose File > Save As.
Using Layers Tool Box
Layer – New Layer (Shift + Ctrl+n)
Image tlla fyda fjk;a Artwork tlla ks¾udKh
lsÍfï§ Bg wod, mska;+r fldgia fjk fjku ks¾udKh
lr .ekSu i|yd Layer Ndú;d lrkq ,nhs Layer hkq
oDIHudk fkdjk ia:rhka jk w;r iajhxlS%hj idod fokq
,nk wjia:djka j,§ yer wka iEu wjia:djl§u Layer
f,ah¾ ,nd.ekSu l< hq;= fõ
Layers are the building blocks of a Photoshop file, making
them one of Photoshop's most powerful tools. It's
important that you understand how to work with them.
Creating a new layer is the first step in building a layered
composition in Photoshop.
Using History Tool Box

ixialrKh i|yd Ndú;d lrkq ,nk ish¨u


fuj,ï fuys wka;¾.; jk w;r ,nd § we;s mshjr
wialsÍu i|yd Ndú;d lsÍug mq¿jks
By using the History panel, you can browse through
the recipe and return to any step in the list to begin
work from that point.
The History Panel (Choose Window History)
Photoshop Tool Box
1. The Main Toolbox
m%Odk fuj,ï ;Srej
2. Tool Options
fuj,ï úl,am
3. Image Window
.%dmsl ljq¿j
4. Layers, Channels, Paths
ia;r" wkqux" m:
5. Brushes/Patterns/Gradients
mskai,a$fudaia;r$j¾K
m%Odk fuj,ï ;Srej - (The Main Toolbox)

RECTANGLE

ELLIPSE

Selects the required area


as a square or rectangular
region.
Selects the required area as
a circular or elliptical
region.
Free
(Lasso)
Fuzzy (Magic
Wand)

Draws free-form
selections

Selects areas on color


similarity.
By Colour

Scissors

Foreground

Selects all instances of a


color in a graphic.
Creates paths to select
shapes

Selects a region containing


foreground objects.
BUCKET FILL

BLEND
GRADIENT

Fills an area with a


colour or a pattern.

Fills the selected area


with a gradient blend
PENCIL

PAINTBRUSH

Paints hard-edged lines,


that is, the pixels are not
anti- aliased.
Paints soft – or fuzzy
edged lines, that is, the
pixels are anti-aliased
and/or feathered
ERASER

AIRBRUSH

Erases pixels from a layer

Paint tool with variable


pressure to spray colors on
a graphic
INK

CLONE

Adds color to a graphic like


the paint brush. like the
paint brush. Quick
movement of mouse
minimizes the size of
brush. Slow movement
makes its vice versa
Copy pixels from one part
of a graphic to another
HEAL

PERSPECTIVE
CLONE

BLUE
SHARPEN

Resolves image irregularities


removing unnecessary
colours and spots
Clones from an image source
after applying perspective
transformation
Blurs of sharpens an
images
SMUDGE

DODGE
BURN

Dampens graphic

Lightens or darkens an
image’s shadows, mid tons,
or highlights
MOVE

ALIGN

CROP

To shift or move a selection

To align or arrange layers or


objects
Crops or clips the image
ROTATE

SCALE

SHEAR

Rotates the active layer,


selection or path.

Scales the active layer,


selection or path

Shifts part of the image in


some direction.
PERSPECTIVE

PATH
COLOR
PICKER

Changes the perspective of the


active layer, selection or path

Allows selecting and modifying


paths

Selects the colour of any image


opened on your screen.
MAGNIFY
(ZOOM)

MEASURE

TEXT

Alters the zoom level of


the image
Shows distances and
angles

Places text into the


image.
ia;r - Layers
ixlS¾K fuka u ir, .%dmsl ks¾udKhla i|yd o ia;r
Ndú;h b;d jeo.;a fõ' .%dmsl ks¾udKhla ;=< jia;=
fh§fï § fjka fjka jYfhka ia;r Ndú; lsÍu u.ska tu
jia;= yeisrùug myiq fõ' ia;r hkq úksúo fmfkk lvodis
iuQyhla fuks' kuq;a iuyr wjia:dj, § tlla u; tlla
jia;= tl;= lsÍu ksid Bg my;ska we;s ia;rh fkd fmkS
hhs'

The use of Layers is important for both simple and


complex graphic creations. It is easy to manipulate
objects on a graphic by using different layers.
Layers resemble sheets of transparent paper. However,
when objects are added one above the other, the layer
beneath may not be shown.
• ia;r ljq¿j u; tlsfkl rEm i|yd fjka fjka
jYfhka ia;r fhÈh hq;= h
For, different pictures, different layers are to be created
on layer window.
• tu ksid wod< ia;rh yd iïnkaO fjkia lsÍï wfkl=;a
ia;r i|yd n,fkdmdhs' ^mdG fh§u" j¾K fh§u"
yev;," ixialrK wdÈh&
This prevents alterations done on one layer affecting
another layer. (Adding texts, adding colour, shapes,
editing etc)
• ia;rh oDYHudk ùu fyda fkdùu fyda i|yd wei ^eye&
Wmfhda.s lr .kak'
Use the eye symbol to make the layer visible or invisible
• ia;r ljq¿fõ my; ;Srh
ia;r i|yd jQ fkdfhl=;a
fjkiaùï i|yd
fhdod .kak'
Use the botton line of
layer window to make
various alterations
1 kj ia;rhla - New
2 ia;r lKavdhï - Group
3 ia;r ia:dk .; ùu - Move
4 ia;r wkqmsgm;a - Duplicate layers
5 ia;r kex.=rï ±óu - Anchor
6 ia;r bj;a lsÍu i|yd - Delete
• mdrdkaO;dj (Opacity) ia;r ljq¿fõ by,ska ±lsh yels
h' f;dard .;a ia;rhl mdrdkaO;dj wvq fyda jeä fyda
lsÍu u.ska tu ia:rhg my;ska we;s ia;rh o¾Ykh
ùu wvq fyda jeä ùu isÿ fõ'
Opacity - Can be seen high above the Layer window. By
increasing or decreasing the opacity of a selected layer,
the visibility of the layers below can be altered.

You might also like