Lengthy quotation




Line break



Centers elements on the page

Definition item (in a definition list)

Division (used for applying styles)

ALIGN = left/right/center

Horizontal alignment

Definition list

Term item (in a definition list)

<EM>

Emphasized (italic) text

134

WEB DESIGN

vufawG o Y ifcef;pmrsm;

Tag and Attributes SIZE = 1 to 7

Function Used attributes to specify size, font face, and color Text size

(or relative value) FACE = ]]name}}

Typeface for the enclosed text

COLOR = ]]number}} or ]]name}}

Color of the enclosed text

ALIGN = left/ right/ center

Heading Level (from 1 to 6) Horizontal alignment



Italic text

List item (in an ordered or unordered list)



]]No break}}; prevents line breaks in the en-closed text

Ordered (numbered) list





Paragraph

ALIGN = left/ right/ center

Horizontal alignment



Preformatted text



<STRIKE>



Strikethrough text



<STRONG>



Strong (bold) text



<SUB>



Subscript



<SUP>



Superscript







Teletype (or typewriter text)







Underlined text







Unordered (bulleted ) list



WEB DESIGN



vufawG o Y ifcef;pmrsm;



135



 136



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 tcef; 8



Graph Element



rsm; xnfo h iG ;f jcif;



Web page wpfckwGif ½kyfyHkrsm;ryg pmcsnf;oufouf jzpfaeygu pdwf0ifpm;zG,f&m jzpfvmEdkif p&mtaMumif; r&Sday/ Web rsm;odkY 0ifa&muf&SmazG Munfh½IavhvmrI acwfpm;vmjcif;rSmvnf; page ay:wGif "mwfyHkrsm;? ½kyfyHkrsm;wdkYjzifh wefqmqifxm;jcif;aMumifh[k qdkEdkifonf/ odom



xif&Sm;ap&eftwGufjzpfap? tao;pdwfazmfjyvdkonfhtcgwGifjzpfap yHk&dyfrsm;udk toHk;csMu& onf/ "mwfyHkrsm;? icon rsm;? button rsm;twGuf graphic jzifh odomxif&Sm;ap&eftvdkYiSm toHk;csjcif;oufoufr[kwfbJ spacing device rsm;tjzpfvnf; toHk;csMuouJhodkY box rsm;\ axmifhrsm;wGifvnf; visual effect rsm; zefwD;&eftwGufvnf; toHk;0ifapygvdrfhrnf/ (aemufydkif; Web Design Technique wGif tao;pdwf wifjyay;ygrnf/) ,ckwifjyrnfh tcef;u@wGif page wpfcük graphic rsm; xnfo h iG ;f &ef tag rsm; toH;k csyHk tao;pdwrf sm; yg0ifrnfjzpf\/ Background image rsm;taejzifv h nf;aumif;? text \flow rsm;wGifvnf;aumif; ESpfrsdK;vHk; yg0ifygonf/ Adding Inline Images



Web ay:&Sd graphic trsm;pkonf inline image yHkpH HTML content \ flow \ wpfpdwf wpfa'otjzpf &Sdaprnfh graphic yHkpHwdkYjzifh wefqmqifxm;Muonf/ ¤if;wdkUonf illustration rsm;? banner headline rsm;? navigational toolbar rsm;? advertisement rsm; ponfjzifh tm;vHk;tusHK;0ifaeygonf/ wpfenf;tm;jzifh background tiling image wpfck r[kwfygu inline image wpfckom jzpfonf/ Inline image tm;vHk;onf  tag udk toHk;csí HTML document wGif csxm;jcif;jzpf\/ Browser twGif; display vkyfay;&eftvdkYiSm graphic rsm;onf GIF odkYr[kwf JPEG file format jzpfaeap&rnf/ xdYktjyif browser jzifh recognized jzpfaeap&eftvdYkimS oufqi kd &f m aemufqufrsm;jzpfonfh gif ESifh .jpg (odkUr[kwf .jpeg) wdkYudk rSefuefpGm trnfay;xm;aom file rsm; jzpfaeapygrnf/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



137



 Graphic \ placement ESifh appearance rsm;tay: xdef;csKyf,lonfh  tag rsm; taetxm;udk avhvmMunfhMupdkY/ The Image Tag  Adds an image to the page



Browser tm; graphic wpfck ae&mrSew f iG f csxm;ay;ap&eftwGuf tajccH tag wpfck jzpfonfh image rsm;udk usifvnfpGm pDrHxm;&SdEdkif&ef toHk;csapEdkifrnfh toHk;0ifvSaom attribute awmfawmfrsm;rsm; &Sdonf/ ¤if;wdkUtxJrS SRC (source \ twdkaumuf) udk azmfusL;ay;rnfh attribute wpfckom vkdtyfygonf/ taMumif;rSm rnfonfh graphic tm; toHk;jyKrnfudk browser tm; ajymjy&efom vdkaomaMumifhjzpfonf/ SRC attribute \ value rSm graphic \URL omjzpfonf/ Graphic file onf HTML file taejzifh directory wpfckwnf;wGif &SdaecJhygu ¤if;\ filename udkom toHk;jyKEdkifonf/ Graphic rsm;tm; ñTefjyay;onfh side bar onf graphic rsm;udk ñTef;qdk&mü ydkí tao;pdwfusvSonf/ Graphic rsm;onf text wGif&Sd baseline ESifhtwl atmufydkif;wGif default jzifh lined up vkyfí jyoay;xm;onf/ (Figure 8-1) ALIGN attribute ESifhtwl tao;pdwf azmfjyxm; jcif; r&Sdonfhtcg graphic wpfck\ab;wGif text onf tvdktavsmuf wrap vkyfvdrfhrnf



r[kwfay/ Figure 8-1



default jzifh  tag onf pmaMumif;\ tajcrsO;f vdik ;f twdik ;f ? *&yfzpf\ atmufajcudk



csed n f §x d m;ay;onf/ xdaYk emuf *&yfzpf 0ef;usiaf e&mudk &Si;f xm;ay;onf/



138



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Tool Tips



Adding images



emrnfausmfMum; vlBudKufrsm;vSaom authoring program rsm;teufrS program oH;k rsdK; jzifh web page wpfckwGif image rsm; rnfodkUjznfhoGif;,lonfudk atmufygtwdkif; jrif awGUEdkifonf/ DREAMWEAVER 3



1. Common wGif yg&adS om pm&if;rS image udk aumuf,l drag vkyíf document ay: odYk



ae&mcsxm;ay;onf/ 2. Dialog box wpfco k nf rnfonfh *&yfzpfukd toH;k jyKrnf[ak r;&ef yGiv hf monf/ GOLIVE 4 Image wpfcu k kd xnf&h ef tar;vu©Pmjyxm;onfh image icon udk Palette rS drag vky, f Nl y;D document wGif ae&mcsxm;vdu k o f nf/



xdu k o Jh yYkd if BuKd uEf pS o f uf&m file wpfck rdrd desktop ay:rS wdu k ½f u kd , f Nl y;D page ay:oYkd csxm;,lEikd fonf/ FRONTPAGE 2000 Image wpfcu k kd xnfo h Gi;f &ef Insert Image [laom icon udk click vkyfvkduf&onf/ Window



wpfcyk Giv hf mNy;D rdrt d wGuf a&G;cs,&f ef local file system rS browser vkyu f m a&G;cs,faumuf,lEdkifonf/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



139



 Alternative Text ALT = "text" Alternative text



onf browser wpfckwGif graphic udk display rvkyfEdkifaponfhtcgwGif wpfcPtwGi;f rdrd image \twdck sKyf description udk yHyh ;kd ay;&eftwGuf jyKvkyaf y;Edik yf gonf/ vlawmfawmfrsm;rsm; aqmif&Gufavh&SdMuaom ydkíjrefqefpGm download jyKvkyfjcif;twGuf browser wGif graphic rsm;udk toHk;jyKolrS ydwfxm;vdkonfhtcgwGifjzpfap? image rsm; aysmufqHk;aeonfhtcgwGif generic graphic icon wGif &SdaevdkonfhtcgwGifjzpfap alternative text udk qufvuf xGufay:vmapygvdrfhrnf/ Non graphical browser rsm;twGuf (Oyrm-Lynx ) alternative text onf graphic \ae&mwGif bracket rsm;jzifh ay:aeapvdrrhf nf/ rMumcPqdkovdk site \section rsm;odkY graphical button jzifh csdwfquf,lxm;aom home page rsm;wGif alternative text ryg0ifaMumif; awGUjrifaeMu&ygonf/ Graphic rsm; r&EkdifvQif tqdkyg home page rsm; tqHk;owfoGm;rnfom jzpf\/ (Figure 8-2) alternative text udk xnfo h iG ;f &ef tcsed yf , kd jl cif;jzifh taumif;qH;k tajctaewpf&yf jzpfvmEdik yf gonf/ ALT attribute



Figure 8-2



*&yfzpfray:vmaomtcg oufqdkif&m pmvHk;rsm;ay:vmayonf/



oufqikd af om *&yfzpf [kwrf [kwu f kd tqdyk g pmvH;k rsm;jzifh jrifawG Y Mu&onf/



140



WEB DESIGN



vufawG o Y ifcef;pmrsm;



tu,fí xdo k aYkd om oufqikd &f m pmvH;k rsm; razmfjyEdkifonfhoabmonf tqdyk g page wGif *&yfzpfrazmfjyawmh[k rSwf,l&onf/



 Image Size WIDTH - number Image width in pixels



WIDTH ESifh HEIGHT [laom attribute rsm;onf graphic \ t&G,ftpm;yrmPudk pixel twGuf nTef;qdkazmfjyay;onf/ odkY&mwGif tqdkyg attribute rsm;onf web design jyK vkyfolrsm;\ r&Sdrjzpf rdwfaqG jzpfygonf/ taMumif;rSm aemufqHk;ay:xGufvmaom page



\yHkpHudk ydkrdk jrefqefrI jyKay;EdkifaomaMumifh jzpf\/ Browser rS graphic rsm;\ t&G,t f pm;udk odvmaomtcg graphic rsm;udk ¤if;ud, k w f ikd f qGJcsum page ay:wGif cif;usif;,l&if; tvkyf½IyfvmEdkifonf/ Width ESifh height value r&Sd aom page onf yxrOD;pGm page udkawmh cif;ay;yg\/ Graphic wpfckcsif;twGuf tcsdef,l um jyifqifay;ae&onf/ Graphic wpfckpDtwGuf rnfrQ ae&mvdktyfrnfudk browser tm; ajymay;jcif;onf final page wpfckudk puúefYydkif;rQom tcsdef,lojzifh ydkíjrefqefapEdkif\/ rdrdonf web authoring tool wpfckudk toHk;csaecJhvQif Width ESifh Height wdkY\ value rsm;onf graphic wpfckudk ae&mcsxm;&mwGif tvdktavsmuf ae&mcsxm;ay;apyg vdrfhrnf/ HTML editor ½dk;½dk;av;wpfckudk toHk;cscJhygu vufjzifh a&;jznfhay;&aom yHkpHudk jyefvnfod&Sd&ef vdktyfygonf/ owdjyK&ef ta&;BuD;qHk;tcsufrSm rdrd image \ t&G,ftpm;trSefESifh rwlaom pixel value jzpfcJhvQif browser onf rdrd\ specified value ESifh udkufnDap&ef rdrd\ image udk resize vkyaf y;ygvdrr hf nf/ (Figure-8-3) xdYk aMumifh yHt k aetxm; &GUJ oGm;rnfvm;? 0g;wm;wm; jzpfaernfvm;[laom tajctaeudk wGufqxm;&ygrnf/ odYk twGuf xdo k Ykd aom 0g;wm;wm; &GUJ wJw h hJ rjzpfvmap&eftvdYk imS image \ t&G,t f pm; dimension ? width ESifh height value rsm;udk wdwdusus udkufnDrI&Sdr&Sd yxrOD;pGm ppfaq; Munfh½Ioifhonf/ Figure 8-3



tu,fí twdkif;twmrsm;onf wdusrrI &So d nft h cg browser onf width value ESihf height value wdEYk iS hf udu k n f &D ef jyefcsed af y;rnfukd owdxm;&ygvdrhfrnf/



Width value ESihf height values wdo Yk nf page ay:wGif xda&mufpGm cif;usi;f jyoEdik f a&;twGuf browser udk ulnaD y;onf/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



141



 158



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 tykid ;f ok;H



Web Graphic



rsm;zefw;D ,ljcif;



*&yfzpf'ZD idk ef mwpfO;D jzpfvmcsed w f iG f web design qdo k nfrmS *&yfzpfvyk if ef;rsm;\ wpdww f a'otaejzifo h m jzpfaeygvrd rhf nf/ odaYk omf pwifavhvmpOfumvtwGi;f web odYk vTaJ jymif;ay;a&;twGuf toifah vsmq f ;kH ? tqifajyqH;k vkyif ef;pOfEiS hf pwkid u f kd yxrOD;pGm avhvmcH,&l rnfjzpfonf/ tydik ;f 3 wGif web designer wpfa,muf\ vkycf surf sm;tm;vH;k xnfx h m;aom tdww f pfv;kH rS format rsm;ESihf enf;y&d,m,f tm;vH;k udk wifjyaqG;aEG;xm;ygonf/ Adobe Photoshop 5.5, Macromedia Firework 3 ESihf JASC Paint Shop Pro



ponfh graphic program rsm;twGi;f web graphic rsm; zefw;D yHu k kd wpfqifch si;f o½kyjf yESit hf wl oufqidk &f m tcef;u@rsm;wGif azmfjyay;xm;onf/ *&yfzpfrsm; zefw;D &ef Ykd oH;k jyK&rnfukd tajccHtm;jzifh rdrw d iG &f adS eonfh image-editing program udk rnfot oabmayguEf idk af prnfh erlemyHpk rH sm;udk azmfjyay;xm;onf/ rdrt d aejzifh *&yfzpfwpfcu k kd zefw;D rItopfwpfc&k v dS mwkid ;f tcsed , f u l m toH;k jyKrnfh *&yfzpfaqmhz0f rJ sm;taMumif; a&;om;xm;onfh toH;k cs vrf;nTepf mtkyw f pfcck u k kd taotcsm avhvmoifyh gonf/ þpmtkyo f nfvnf; tqdyk gtcsurf sm; tygt0if *&yfzpfrsm;udk rnforYkd nfykH jyKvyk Ef idk af Mumif;udo k m rSe;f qay;xm;ygonf/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



245



 246



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 tcef; 13



All About Web Graphics 0ufb*f &yfzpfwidk ;f onf resolution edrehf rd jhf zifh toH;k jyKavh &So d nf/ taMumif;rSm GIF odYkr[kwf JPEG format jyKvkyf&mwGif *&yfzpftwGuf wufvmrnfh bit yrmPudk acRwmrI jyKvkdaom aMumifhjzpf\/ File Formats



0ufbw f pfcw k iG f *&yfzpfqidk &f m file format rsm;twGuf ud, k yf idk t f oH;k csp&m tu©&m oauFw rsm; &Sad eonf/ tifwmeufay:wGif wifqufay;onfh *&yfzpfqidk &f m format rsm;onf uGe&f uf wpfckay:wGif platform wpfckrSwpfckokdY tvG,fwul xnhfoGif;í &Muonf/ 0ufbfay:wGif rdrdwkdY jrifawGUMu&oavmuf tukefeD;yg;rSm format wpfck? ESpfckcefY &Sd aewwfonf/ Oyrm GIF (*spfzf) ESifh JPEG (a*syuf) wkdYudk trsm;qHk; awGUae&onf/ The Ubiquitous GIF



GIF (Graphic Interchange Format) file onf tifwmeuftwGuf tESpfoufqHk;yHkpH jzpfae ouhJokdY orm;½kd;us oHk;avhoHk;x&SdaomyHkpH[k qkd&rnf/ GIF file rsm;onf compressed file rsm;jzpfMuonf/ trsm;qHk; 8 bit color information txd yg&Sdwwfonf/ þae&mwGif compressed [laom toH;k tEIe;f rSm GIF file wpfct k jzpf rdr\ d *&yfzpfrsm;udk ajymif;vJjyKjyif xm;onf[k qkdvdkjcif; jzpf\/ Color information rsm;udk twwfEkdifqHk; i,fonfxuf i,fap&ef zdodyfn§pf,lxm;ay;onfh vkyfief;pOfwpf&yfjzifh aqmif&Gufay;onf/ 8 bit color [lonfh t"dymÜ ,frmS pixel color 256 rsKd; trsm;qH;k yg0ifxm;onfh taetxm;udk qkv d o dk nf/



okdY&mwGif wu,fwrf; toHk;jyK&mü 256 rsKd; toHk;jyKjcif; r[kwfay/ Figure 13-1 wGif azmfjyxm;ouhJokdY vdk*dkrsm;? yHkazmfumwGef;rsm;? tkdifuGefrsm;ESifh wpfaMumif;qGJ yHrk sm; pDpOfxm;onft h wkid ;f wpfa&mifjc,fy&kH yd rf sm;udk GIF format wGif trsm;qH;k jrifawGU&ayvdrfhrnf/ WEB DESIGN



vufawG o Y ifcef;pmrsm;



247



 Figure 13-1



onf wpfa&mifwnf;jc,fyHkrsm; toH;k jyKí jywfom;aom vkdif;rsm;jzifh yHkazmfxm;jcifaMumifh taumif;qHk; yHk&dyfrsm;jzpfonf/ GIF file format



GIFs rsm;onf tjcm;tm;omcsur f sm; &Sad eygao;onf/ ESpx f yfy&kH yd rf sm;udk ta&mifcjJG cm;í vnf; zefwD;,lEkdifonf/ xkdYtwl ½kd;&Sif;aom animation rsm;udkvnf; zefwD;Ekdif\/ rsm;aom tm;jzifh aMumfjimtjzpftoHk;jyKaom vIyf&Sm;½kyfyHkrsm;onf animated GIFs rsm; jzpfonf/ The Photogenic JPEG



,aeY0ufbfqkdufrsm;wGif 'kwd,ay:jyLvmtjzpfqHk; *&yfzpfqkdif&m format wpfckrSm JPEG format yif jzpfonf/ JPEGs rsm;onf ta&mifaygif; oef;csD&SdaeEkdifaom 24 bit color image rsm;jzpfygonf/ wjznf;jznf; rodrom ta&mifyrmPajymif;vJrIudk vkdvm;jcif;ESifh jym;0yfaeaom ta&mifrsK;d jzifh rvkyu f ikd v f jdk cif;ponfh pDrcH surf sK;d udk zdoyd af y;rIwpfcu k kd toH;k jyK xm;onf/ tqkdyg pDrHcsufudk compression scheme [k ac:qkdMu\/ JPEG \ tqkdyg pDrHcsufESifh ta&mifjznhfpGrf;&nfwkdYudk toHk;csvkdufjcif;jzifh Figure 13.2 wGif jyqkdxm;onfh twkdif; "mwfyHkuhJokdYaom image rsm; jzpfvma&;twGuf a&G;cs,ftoHk;csp&m format jzpfvm &onf/ þae&mwGif compression scheme onf taumif;qH;k zdodyfrIudk aqmif&Guf&if;jzifh image \ tcsKdUaom tao;pdwfazmfjyrIrsm; aysmufysufoGm;p&mtaMumif;&Sdí Lossy [k owfrw S Mf uao;onf/ rnfoYdkyifjzpfap JPEGs onf file yrmPtao;i,fq;kH taetxm;jzifh taumif;qHk; image rsm;udk zefwD;ay;aeqJjzpfonf/ JPEGs rsm; zefwD;yHk tao;pdwfudk tcef; 15 wGif qufvufwifjyay;ygrnf/



248



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Figure 13-2



ta&mifyrmP rodrom ajymif;vJrIrsm;udk "mwfyHkrsm;? odkYr[kwf yef;csDum;rsm;wGif yg0ifouhJokdY taumif;qHk; taetxm;jzifh JPEG file format rsm;u vkyfaqmifay;onf/



,aeYacwf web graphic tool rsm;onf rwlnDaom file format rsm;udk wpfckcsif; jyefvnfMunh½f I ppfaq;Ekid yf gvdrrfh nf/ Figure 13-3 wGif azmfjyxm;onft h wkid ;f rdr\ d ½kyyf rkH sm; udk taumif;qHk;jzpfap&eftwGuf format a&G;cs,frIudk tydkif;vkdufyif jyefí Munhf½IEkdifonf/ Figure 13-3



ESihf Fireworks 3 onf rwlnaD om file format rsm;twGuf &&SNd y;D aom file t&G,t f pm;rsm;ESihf yH½k yd f t&nftaoG;rsm;udk jyefvnfppfaq; Munhf½IEdkifygonf/ Photoshop 5.5



Adobe Photoshop 5.5



aemufq;kH tqifh file rsm;udk &SmazG rMunh½f rI D rdr\ d yH½k yk rf sm;udk tao;pdwf jc,freI ;f jcif;ESihf csed w f G,jf cif;twGuf Select file udk oGm;um save vkyfxm;&onf/ Macromedia Fireworks 3 Document Window twGi;f &Sd nmbuftay:rS "4-up" udk



Munh½f I &ef tcGit hf vrf;rsm; Firework 3 wGif &&SEd idk o f nf/ WEB DESIGN



vufawG o Y ifcef;pmrsm;



249



 Choosing the Best File format



tifwmeufrS download vkyf,l&mwGif jrefqefpGm &,lEkdifap&ef 0ufbf*&yfzpfrsm;udk jyifqif&mwGif f &l rnfjzpf\/ rSeu f efaom file format udk a&G;cs,, yH k & d y f t aetxm;



toH;k jyK format



tusKd ; taMumif ;



ta&mifjym;yHkpHjzifh *&yfzpfrsm;



GIF



wpfa&mifwnf;jc,f ta&mifjym;yHkpHjzifh vSvSyy jzpf aeapí ydkrdk oyf&yfpGm zdodyfrIjyKvkyfay;&if; tqifh jrifh image rsm;udk file t&G,ftpm; ao;ao;jzifh &&SdEkdifygvdrhfrnf/



"mwfyHkrsm; odkYr[kwf ta&mif jc,frIef;rI trsKd;rsKd;yg0ifonfh a&aq; yef;csDum;rsm;



JPEG



a&maESmaeaom ta&mifrsm;yg0ifonfh image rsm; udk JPEG jzifh taumif;qHk;jzpfap&ef zdodyfay;Ekdif onf/ yHkwlum;csyfrsm;udk ta&mifaygif;ajrmufjrm; pGmjzifh zefqif;ay;Ekdifonf/ taumif;qHk; ta&mif taoG;pHk image rsm; jzpfvifhupm; file t&G,t f pm; ao;i,fpGm zefwD;,lEkdifrnf/



GIF



Image wpfckvHk;BuD;udk JPEG pression rsKd;jzifh zdodyfNyD; "mwfyHkobm0qefqef razmfusL;vkdbJ obm0ESpfrsKd;ygapNyD; file t&G,ftpm;udk OD;pm;ay; onfh udpö trsm;pkwGif toHk;jyKEkdifrnf/



GIF



tvGefao;i,faom graphic image rsm;ESifh txl; oifah vsmo f nf/ GIF okYd r[kwf JPEG ESprf sKd;vH;k prf; MunhfMunhfí file t&G,ftpm;yrmPESifh t&nf taoG;rsm; csichf sed u f m taumif;qH;k udk a&G;cs,f toH;k jyKEkdifonf/



ta&mifjym;yHkpHESifh "mwfyHkobm0rsm;a&mpyfxm;onfh aMumfjim qkdif;bkwfrsm; wHqdyfacgif;t&G,ftpm; odkYr[kwf tdkifuGeft&G,ftpm; "mwfyHkrsm;



odkYr[kwf JPEG



xkd;azmufjrifEdkifaomyHkrsm;



GIF



xkd;azmufjrifEkdifaom ESpfxyfyHk&dyfrsm;twGuf file format wpfckom aqmif&GufEkdifonf/



vIyf&Sm;



GIF



Animation



animation



rsm;



yHk&dyfrsm;udkvnf; pGrf;aqmifEkdifygvdrfhrnf/



GIF



GIF



wpfckomvQif



Image Resolution



GIFs rsm;ESifh JPEGs rsm; ESpfckvHk;onf pixel-based rsm;jzpfonf okdYr[kwf bitmapped image [kvnf; owfrw S Ef idk o f nf/ yH&k yd u f kd zoom jzihf csUJ ,lMunhv f u dk af omtcg tifrwefao; i,faom av;axmifhuGufav;rsm;jzpfí Pixel tajrmuftjrm;jzifh mosaic ozG,f jyKvkyfxm; onhf ½kyfyHktm; jrifawGUEdkifygonf/ Figure 13-4 wGif azmfjyxm;ouhJokdY ocsFmyHkaoenf;rsm;



tay: tajccHxm;onhf yHkpHtae txm;jzifh vkid ;f acsmrsm;? uGuv f yfjznhrf rI sm; jyKvkyaf qmif&u G f xm;aom Aufwm*&yfzpfrsm; cGJcGJjcm;jcm; jrifawGU&rnf/ 250



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Figure 13-4



Bitmap Image rsm;onf mosaic wpfco k zG,f



Vector Image rsm;onf ocsmF nDrQjcif;rsm;ukd tok;H ûy azmfjyxm;jcif; jzpfonf



ta&miftrsK;d rsK;d yg&adS om tuGuw f pfcpk jD zifh ûyvkyfxm;onf



TIFFs rsm;uho J Ydk yHEk ydS 'f ZD idk ;f wGif Pixel-based image rsm;udk toH;k csxm;chv J Qif wpfvufr cGifwpfcktwGif; pixel ta&twGuf rnfrQyg&Sdonfudk azmfjyonfh resolution [lonfh



a0g[m&udk tuRr;f 0ifod&SdNyD; jzpfaeygvdrrhf nf/ okYd twGuf yHkESdyfxkwf&mü a,bk,stm;jzifh 300 dpi (dots per inch) [lonfh resolution udk toHk;csMuonf/ Goodbye inches, Hello Pixels



0ufbfay:wGif image rsm;udk twwfEkdifqHk; resolution edrfhedrhfudk zefwD;,l&ygvdrfhrnf/ 72 dpi onf de facto standard jzpfvmonf/ okdYaomf wu,fwrf;rSmrl vufrtaetxm;jzifh wkdif;wm,lqMujcif;jzpf\/ odkYtwGuf web avmuwGif vufrrsm;? wpfvufrwGif&Sdaom tpufrsm; ta&twGufwkdYjzifh toHk;jyKavh&Sdaomfvnf; ¤if;tpm; pixel [laom toHk;tEIef; jzifhom ajymqkdvmMu&jyefonf/ Web page wpfckay:wGif *&yfzpfrsm;udk usif;rIESifhtwl image map wpfcrk w S pfco k Ykd



wifjyaomtcg armfeDwm\ resolution cif; &Sv d maprnfh pixel rsm;jzifh toHk;jyKolrsm;u



ajymif;vJ,lMu&onf/ Measuring Resolution



Screen ay:wGif



0ufbf*&yfzpfrsm; tjynfhtpHk vHk;vHk;vsm;vsm; wnf&SdaeEkdif&ef twGuf ¤if;wkdY\ resolution twkdif;twm pixels per inches (ppi) rSefuefrIvkdtyfonf/ dpi (dots per inch) [lonfh twkdif;twmonf yHkESdyfvkyfief;twGufom oHk;onf/ vufawGUtm;jzifh dpi ESifh ppi a0g[m&rsm;udk tajymif;tvJ jyKí toHk;jyKxm;Muonf/ a,bk,stm;jzifh resolution udk dpi jzifhvnf; nTef;qkd vufcHEkdifonf/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



251



 72 pixels square &Sad om *&yfzpfwpfcu k kd Figure 13-5 twkdif; zefwD;,lvdkufonf/ rdr\ d image editing y½k*d &rf wpfct k wGi;f 72 dpi jzpfap&ef resolution ukd csed w f , G , f cl pJh Ofu rdrdtaejzifh armfeDwmwGif 1 vufr ywfvnf&Sdaom *&yfzpftjzpf arQmfrSef;xm;&Sd&onf/ Figure 13-5



Image wpfc\ k t&G,t f pm;onf armfew D m resolution ay:



rlwnfaeonf/ D mwpfcak y:okYd ajymif;a&TU wifjyvm okYdaomf rdrad rmfew D mxuf resolution ydjk rifah om armfew onfhtcg rnfokdY&Sdrnfudk prf;ppfMunhf&ayvdrfhrnf/ ½kww f &ufqo dk vkd rdr\ d wpfvufrywfvnf *&yfzpfonf oH;k rwfywfvnf t&G,t f pm; xufyif avsmeh nf;oGm;awmh\/ taMumif;rSm 72 pixels t&nftaoG;wlonfyif wpfvufrwGif 100 pixels cefYp& D adS om resolution wpfco k Ydk mapping one-to-one ac: wpfcrk w S pfct k ay:okYd cif;vmonhfyHkpHrsKd; cif;vkdufaomaMumifh jzpf\/ xkdYtaMumif;jycsufaMumifh 0ufbfay:wGif inches [lonfhtoHk;tEIef;udk ajymqkd toHk;jyKjcif;twGuf t&mrxif jzpfoGm;apawmhonf/ okYdtwGuf dpi [laom todtjrifrsm;udk tajccHoabmt& window tjyifbufoYdk a&mufomG ; &ayonf/ xkdYaemuf 0ufbftwGuf 300 dpi uhJodkYaom higher resolution wpfck zefwD;csuf odkYr[kwf scan jyKvkyfcsufrsm;wGifvnf; xifxif&Sm;&Sm; Oyrmxm; jrifawGUEkdifapygvdrfhrnf/ Pixel across jzifhom toHk;csvmMuonf/ orm;½kd;us image rsm;twGuf axmifaygif;rsm;pGm &Sdaeonf/ 600 pixels wide uhJodkYaom ao;i,fonhf browser window rsm;wGif ydkíyif rvkdtyfawmhay/ Figure 13-6 wGif jrifawGU&ouhJokdY browser window wGif cGifusus jyo ay;ygvdrhfrnf/ Working in Low Resolution



onf rqDrqkdifaomoabmrsm; oufa&mufoGm;p&m jzpfwwfaomfjim;vnf; vlwidk ;f avmufe;D eD;onf 0ufb*f &yfzpfrsm;udk 72 dpi jzifh csed w f , G f zefw;D ,lMuonf/ taMumif; Resolution



252



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 rSm ydkifeufowfrSwfxm;onfhae&mxJü pixel rsm; ta&twGuf uGufwd&&SdEkdifaomaMumifh jzpf\/ xkdokdY low resolution a&G;cs,frIESifh ywfoufí tm;enf;csufwpfckrSm image \ t&nfaoG; tenf;i,favsmhusoGm;apjcif; jzpfonf/ ay;xm;aom ae&mwpfckwGif image information tajrmuftjrm; rjznhfoGif;EkdifaomaMumifh[k qkd&rnf/ Image wGif tzktxpf tpuftajymufav;rsm; odom xif&mS ;ap&ef jzpfomG ;ap\/ okYdaomf 0ufb\ f obm0onfyif xdkrQavmuf&SdaeMuao;onf/ Figure 13-6



okaYd omf 300 dpi udk ,lvu dk yf g? wpfyidk ;f avmuf jrifawG&U Ny;D browser window tjyif\ jrifawGEU idk af om ae&mrsm;okYd usa&mufoGm;vdrrhf nf/



72 dpi \ browser window wGif



3 vufrywfvnf image av;ukd cGiu f sus vSvyS y jrifawG&U onf/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



253



 File Size Matters



Web page wpfckudk uGef&ufwpfckay:wGif jzefYa0 xkwfjyef,ljcif; jzpfaomaMumifh vufcH&,l rnfholxHokdY ao;i,faom packet av;toGifjzifh a&muf&SdoGm;ap&ef tvkdYiSm zip vkyfxm;&ef



vkt d yfaeygvdrrhf nf/ tu,fíom yrmPBuD;BuD;&,lvv dk Qif tcsed Mf umMum,lNyD;rSom vufcEH idk f rnfudk tvkdvkdoabmaygufNyD; jzpfaeMuonf/ *&yfzpfyrmPBuD;av download vkyf,l& onhftcsdef Mumav jzpfonf/ þodkYjzihfyif 0ufbfay:wGif *&yfzpfwkdYonf wpfbufrScspfp&mtaetxm; &SdaeouhJokdY wpfbufrSvnf; pdwfysufp&m jzpf&onf/ pmoufoufjzifh zefwD;xm;aom page wpfckxuf *&yfzpfygaom web page wpfcku ydkípdwf0ifpm;p&m aumif;aponf/ tifwmeuf\ t"du tpdwt f ykid ;f jzpfaom 0ufbaf y:wGif trsm; pdw0f ifpm;p&mjzpfum ay:jyLvmjzpfvma&; MudK;yrf; csufwGif *&yfzpfrsm;jzifh zefqif;EkdifrI t&nftcsif;rSm taMumif;wpf&yftjzpf oD;jcm; wnf&Sd aeonf/ rdrdwkdYjrifawGU&orQudk pdwf&SnfpGm apmifhpm;vufcH,lEkdifap&ef qE´rsm;udkvnf; wpfbufrS EdI;qGay;Ekdifonf/ toHk;jyKoltaejzifh a&G;cs,fp&m oHk;ck&Sdaeonf/ pdwf&Snf&SnfapmifhMunhfjcif;? *&yfzpf download function udkydwfí pmrsm;udkom zwf,ljcif;? okdYr[kwf qufvuf apmifhpm;jcif; rjyKawmhaom 'back' cvkwfudkESdyfum jyefxGufoGm;jcif;wkdYyif jzpf\/ DSL ESifh cable modems rsm;uhJodkYaom high-bandwidth connection rsm;twGuf taMumif;r[kwfaomfvnf; 28.8 odkYr[kwf 56 kbps dial-up modem connection rsm; jzpfygu download time onf xnhfoGif;pOf;pm;p&m jzpfaewwfonf/ rnfodkYyifjzpfap Web design vkyfief;\ taumif;qHk; pnf;rsOf;wpfckrSm download time udk enf;EkdiforQ enf;ygap [líyifjzpfonf/ How Long Does It Take?



0ufbfay:rS *&yfzpfwpfckudk download vkyf,l&ef rnfrQMumrnfudk twdtus ajymqkd&ef cufcJaeygvdrfhrnf/ taMumif;tcsufrsm;tay: rlwnfaewwfonf/ toHk;jyKol\ tifwmeuf qufoG,frIpepf tjrefEIef;? rdrduGefysLwm\ tjrefEIef;? rdrdtoHk;jyKaom web server wGif wnf&SdvIyf&Sm;aeaom yrmPESifh tifwmeufvrf;aMumif;ay:&Sd tajctaet&yf&yf ponfjzifh taMumif;tcsufrsm;udk qkdvkdonf/ Standard modem connection wpfckay:wGif *&yfzpfwpfcktwGuf wpfpuúefYvQif Kilobyte rnfrQ ,lrnfudk taxGaxGpnf;rsOf; wpf&yfjzifh xm;&Sdwwfonf/ 30 K &Sdaom *&yfzpfwpfcktwGuf download vkyf,l&mwGif puúefY 30 Mumjrifhwwfonf/ odkYtwGuf 'DZkdifemrsm;tpkjzifh 1 sec/K EIef;xm;udk tpOfowdjyK wnfaqmuf,lwwfMu&rnf/ 254



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 odYk ygí client jzpfonfh aumfyakd &;&Si;f awmfawmfrsm;rsm;onf Kilobyte limit (K-limit) wpfckudk csdefwG,fxm;&Sdwwfonf/ Page wpfckwGif trsm;qHk;&Sdae&rnfh pkpkaygif; files rsm;\ yrmPyifjzpf\/ wpfckaom corporate site wpfckqkdygu HTML file ESihf *&yfzpftm;vHk; aygif;pyfxm;NyD; tygt0if 15 K/page [k uefYowfay;xm;chJonf/ xkdYtwl site awmfawmf rsm;rsm;\ aMumfjimu@twGuf 6 K odkYr[kwf 7 K xuf rrsm;ap&ef uefYowfxm;aMumif; awGU&onf/ rdrdtwGuf ta&;rBuD;vSaomfvnf; client twGuf ta&;BuD;aeojzifh þodkY pDpOfxm;&Sdjcif; jzpfonf/ Limit the Dimensions



t&G,ftpm;udk avQmhcs&eftwGuf tvG,fqHk;enf;vrf;rSm *&yfzpf\ t&G,ftpm;udk uefYowf,ljcif;yif jzpfonf/ vkdtyfonfxuf rydk&ef ta&;BuD;onf/ Figure 13-7 wGif jrifawGU&onft h wkid ;f rvkv d m;tyfonfh tydo k m;ae&mrsm;udk z,fxw k f ,ljcif;jzifhyif 3 K u avsmhenf;oGm;apEkdifonf/



File



Figure 13-7



ab;wGif tydx k m;&Sad om tjzLom;ae&mrsm;udk z,fxkwf jzwf,lvkdufjcif;jzifh rdr\ d file t&G,t f pm; ao;i,foGm;Ekdifonf/



Design for Compression



t"duusaomenf;vrf;wpfckrSm zdodyfrIpDrHcsufjzifh tcGifhtvrf;,ljcif; jzpfonf/ wpfa&mif wnf;jc,f ta&mifjym;pepf (flat color) jzifh tqifajyvHak vmufaevQif wjznf;jznf;rodrom ta&mifcGJxkwf toHk;csaom yHkpH'DZkdif;rsKd;udk roHk;oifhbJ GIF compression udkom toHk;cs aqmif&Guf&rnf/ Reuse and Recycle



Download time udk



uefYowfxm;&Sdonfh tjcm;enf;vrf;wpfcrk mS rdrd browser \ cache rS &&SEd idk o f nfh tcGit hf vrf;udkoHk;um rdrd*&yfzpfrsm;udk jyefvnf toHk;csjcif; jzpf\/ WEB DESIGN



vufawG o Y ifcef;pmrsm;



255



 Figure 13- 8 Graphic file onf local computer cache wGif awmif;cHr?I



qGJcs,rl ?I Munh½f rI EI iS hf okrd ;DS rIrsm; jyKvkyfaeonf/ *&yfzpfrsm;tm; jyefo;kH jcif;jzifh page k jrefqef display vky&f mü ydí oGm;aponf/ Browser rS *&yfzpfrsm;udk wpfBurd w f nf;jzifh qGJcs,v l u dk íf qufwu dk f toH;k jyKEikd &f eftwGuf cache wGif tm;xm;,lonf/



0ufbfwGif browsing jyKvkyfaomtcg document rsm;tMum; a&GUoGm;jcif;? aemufjyef Munhfjcif; pouhJokdY vkyf½kd;vkyfpOftwkdif; Munhf½Iavh&SdMuonf/ Document wpfcck u k kd xyfcg xyfcg wyfxm;aprnft h pm; rMumao;rDu 0ifa&mufMunf½h NI yD;cho J nfh document udk browser rS xdef;odrf;ay;xm;onf/ xko d Ykd aqmif&u G jf cif;udk caching (uuf&cfS si;f ) [k ac:onf/ tqkdyg file rsm;udk ,m,D odkrSD;xm;ay;rIudkvnf; cache (uuf&Sf) vkyfonf[k owfrSwfonf/ okYd twGuf rdrd site ay:wGif tjrJwrf;vkv d dk *&yfzpfrsm;udk jyefo;kH Ekid &f eftwGuf browser's cache rS tcGifhtvrf;udk t&,lEkdifonf/ þenf;onf Figure 13-8 wGif jyxm;ouhJodkY aemufqufwGJygvmrnfh page rsm;udk tvsiftjref wpfBudrfwnf;jzifh *&yfzpfwpfckcsif;udkom download vkyfay;&ef vkdtyfawmhonf/ xkad qmif&u G cf sufonf  tag wpfct k wGi;f wGif URL twlwl jzpfro S m &Ekid yf gvdrfh rnf/ xkdYtjyif *&yfzpfwpfckwnf;ygaom directory wpfcktaejzifh &Sdxm;NyD; jzpf&rnf/ Browser rS pathname topfawGUaomtcg fresh download wpfcjk zifh aqmif&u G v f yk u f idk af y; ygvdrfhrnf/ Find It Online



tprf;avhusifhrIjyKEkdif&ef tcrhJ&&SdEkdifaom owif;tcsuftvufESifh enf;vrf;rsm;udk atmufyg web site rsm;wGif download vkyf,l&&SdEkdifonf/ Adobe System, Inc. (www.adobe.com) Macromedia, Inc (www.macromedia.com) JASC Software (www.jasc.com)



256



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Tools of the Trade



rsm;onf vGefchJaom q,fhig;ESpfausmfumvrsm;upí wjznf;jznf; c&D;&SnfBuD;udk csDwufvmchJ&onf/ a&S;wpfcsdefu yHkxkwf*&yfzpf vkyfief;rsm;twGuf tool rsm;udk toHk;csMuonf/ 0ufbf[lonfh qef;opfrI ay:aygufvmNyD;aemuf 0ufbftwGuf oD;jcm;vkdtyfvmonfh transparency uhJokdYaom tpDtpOfrsKd; vkyfudkifEkdifaprnfh toGiftjyif rsm; aygif;pyfyg0ifvmchJ&jyefonf/ Web graphics tool



0ufbf'DZkdifemrsm;twGuf aqmhzf0JwDxGifolrsm; awmifhwcsufrSeforQudk tpOfrjywf jznfh qnf;ay;vmchJonf/ Web designer rsm;udk toufarG;0rf;ausmif;tjzpf vkyfudkifvsuf &SdaeMuaom uRrf;usifolrsm;tv,fwGif xifay:tausmfMum;qHk; jzpfae&onfh graphic tool rsm;udk tusOf;csKyf azmfjyay;vkdonf/ þae&mwGif GIF ESifh JPEG file rsm; vkyfudkifrItwGuf xku d x f u dk w f efweftoH;k csEidk rf nfh *&yfzpf y½k*d &rf tcsKUd udo k m rdwq f ufwifjyay;jcif;jzpfonf/ tjcm;tjcm;aomtoHk;0ifaprnfh tools aygif; ajrmufjrm;pGm &Sdaeygao;onf/ Adobe Photoshop/Image Ready- Adobe Photoshop onf



0ufbfESifh oufqkdifonfh *&yfzpfrsm;vkyfudkif&mwGif industry standard tjzpf toHk;csEkdifonfrSm txl;wifjyp&m rvkdtyfay/ 'DZkdifemwkdif;avmufeD;eD;u Adobe photoshop udk vufpGJtjzpf toH;k jyKMu onf/ Version 5.5 rSpum 'Adobe rS Save to web' [lonfh option rsKd; xnhfoGif;&if; 0ufbfvkyfief;twGuf oD;oefYoHk;&ef rdwfqufay;chJ\/ vkyfudkifaqmif&GufchJNyD;aom *&yfzpfrsm;udk rwlnDaom format rsm;? uGJjym;jcm;em;aom compression rate rsm;jzifh jyoay;Ekdifonf/ GIF file rsm;twGuf toHk;usaprnfh advanced palette rsm;ESifh dithering control rsm;vnf; yg0ifvmonf/ ,cktcsdefwGif Photoshop aqmhzf0JESifhtwl Adobe \ Image Ready aqmzhf0Jyg xnhfoGif;yg&Sdvmonfudk awGUjrifEkdifonf/ Java Script code jzifh a&;om;xm;onfh rollover effect rsKd;ESifh animation vkyfief;rsKd;twGuf toHk;usaomtxl;pyg,f&S,f webtrick rsm; jzpfonf/ odkYtwGuf rdrdtaejzihf professional tjzpf0ufbf'DZkdif;ESifh 0ufbf*&yfzpfrsm;udk vkyfudkifawmhrnfqkdu Photoshop udkvufudkifxm;oifhonf/ Stealing isn't Nice



tu,fírsm; Copyright rvGwfuif;aom image rsm;udk ,loHk;jcif;onf raumif;rGefay/ rdrd web site wpfckwGif ,loHk;xm;onfudk awGU&SdoGm;ygu jyóem &SdEkdifonf/ tu,fí clip-art CD collection rS oHk;onfhwkdif vdkifpifjzifh 0,f,lrSom ydkrkd tqifajyEdkifrnf jzpf\/ taumif;qHk;rSm 'unrestricted' odkYr[kwf 'royalty free' ponfh pmwef;rsm; azmfjyxm;onfh free image rsm;udk toHk;jyKjcif;onf jyóemtuif;qHk;jzpfonf/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



257



 uGefysLwmudk udkifwG,ftoHk;jyKae&aomfvnf; ¤if;twGuf bwf*suu f kd wdik ;f xGmoH;k ae&oljzpfygu Paint Shop Pro jzifh aqmif&u G v f yk u f ikd o f ifo h nf/ ¤if;wGif PhotoShop uhJokdYaom toGiftjyifrsm;pGm yg0ifxm;aomfvnf; aps;aygpGmjzifh 0,f,ltoHk;csEkdifrnfjzpf\/ ¤if;wGifvnf; animated GIFs rsm; jyKvkyf&ef Animation Shop 2 udk yl;wGJ xnfhay;xm;onf/



JASC Paint Shop Pro -



Macromedia Fireworks - Web graphic vkyfief;wGif txl;vkdtyfcsufrsm;udk jznfhqnf;



ay;Ekdifonfhy½kd*&rfrsm;teuf Macromedia Fireworks onf yxrqH;k *&yfzpf y½k*d &rf wpfckjzpf\/ vector (Line-based) image rsm;jzpfap? raster (pixel based) image rsm;jzpfap zefwD;wnfaqmufay;Edkifonf/ txl;ESpfoufp&m taumif;qHk; tool rsm;rSm editable text oHk;Edkifjcif;? rnfonhftcsdefwGifrqkd edit vkyf,lEkdifonfh 'Live' effect yg0ifjcif;? side-by-side export previews xnhfxm;jcif;? animation vkyfudkifEkdifjcif;? rollover buttons rsm; yg&Sdjcif;? yHkrsm;udk txyfvkduf vTmoHk;Edkifrnfh advanced image-slicing tool wdkYyif jzpfonf/ xkdYtjyif drawing program wpfck bitmap editing program wpfckESifh txl;jyK web utilities rsm;tMum; tajymif;tvJvkyf&mwGif rsm;pGm toHk;0ifaponf/ vkid ;f jyyHq k JG y½k*d &rfrsm;teuf ay:jyLvm tjzpfq;kH y½k*d &rfEpS cf jk zpfonf/ 0ufb'f ZD idk ef mawmfawmfrsm;rsm;onf rdrw d Ydk\ y½k*d &rfwpfck twGuf pwifEkdif&ef yHkMurf;a&;qGJrIu pwifMu&onf/ okdYtwGuf Adobe Illustrator jzifhjzpfap? Macromedia Freehand jzifjh zpfap vkt d yfovkd pwiftoH;k csMuonf/ GIF format jzifh wkduf½kdufodrf;qnf;,lEkdifaom t&nftcsif;&Sdaomfvnf; 'DZkdifemwkdif;onf omreftm;jzifh aemufqHk;vkyif ef;pOfusro S m web graphics tool jzifh odr;f ,lavh&o dS nf/



Adobe Illustrator, Macromedia Freehand -



Image Source



rdrw d Ydk *&yfzpfrsm;onf GIF odYkr[kwf JPEG jzpfaeapvkad Mumif;udk od&jdS yD;aemuf xk*d &yfzpfrsm; udk rnfonfhae&mrS &Ekdifrnf/ rnfokdY pwifyHkazmfEkdifrnfwkdYudkvnf; odxm;oihfayonf/ Scanning



0ufb*f &yfzpfrsm;twGuf tajccHypön;f pkaqmif;&mü scanning vkyif ef;onf enf;vrf;aumif; wpf&yfjzpfonf/ Flat art trsKd;tpm;rS 3 D trsKd;tpm;txd tm;vHk;avmufeD;eD;udk scan vkyf,l&&SdEkdifonf/ rnfodkYyifjzpfap owdjyK&rnfrSm rdrd scan jyKvkyfrnfh image onf copyright wm;jrpfxm;&SdrI &Sd r&Sd odxm;&efyifjzpfonf/ Modify vkyfí toHk;csygrnfqkdonfh wkdif rlydkifxm;&Sdol\ cGifhjyKcsuf&rSom tqifajyEdkifygvdrfhrnf/ 258



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Digital Cameras



'pf*spw f ,fuifr&mrsm;ESihf rdrBd udKuEf pS o f uf&mudk ½ku d u f ;l ,lum image editing y½k*d &rfwpfcjk zifh vkdtyfovdk zefwD;&,lEkdifonf/ wpfcsdefu 0ufbfwGif low resolution om &&Scd sed u f omref uifr&mjzifyh if tqifajyrnfjzpfaomfvnf; ,cktcgwGifrl high-resolution uifr&mjzifh toHk;csrSom rdrd\ page onf 0ufbfqkdufrsm;tv,fwGif wifhw,fEkdifygvdrfhrnf/ txl; owdjyK&rnfrSm 'pf*spfw,f uifr&mrsm;onf omreftm;jzifh JPEG compression udk toHk; csum image rsm;udk zdoyd x f m;ay;avh&ydS gonf/ odYk twGuf rlvyxr &,laom image rsm;udk tenf;i,f ESdrfh,lxm;oifhonf/ Electronic Illustration



rsm;aomtm;jzifh Illustrator okdYr[kwf Fireworks odkYr[kwf Photoshop uhJodkYaom *&yfzpf y½kd*&rfwpfckckwGif tMurf;yHkpHjyKvkyfNyD;rSom rdrdtwGuf yHkacsm image rsm;udk zefwD;,lEdkifMu onf/ 'DZkdifemawmfawmfrsm;rsm;onf yHkMurf;azmf&mwGif drawing tablet ESihf stylus udk toH;k cs um ud, k yf idk f image rsm;udk zefwD;,l&ef vdkvm;wwfMuonf/ yxrOD;pGm bitmap y½kd*&rfudk toHk;csí 72 dpi cefY&Sd file opfwpfckudk us,fus,fjyefYjyefY ae&m,lwnfaqmufonf/ wpfcg wpf&H Illustrator okdYr[kwf freehand uhJodkYaom vector program wpfcu k dk toH;k csonf/ Photoshop \ aemufq;kH vkyi f ef;pOfwGif vkdtyfaeí xkdtqifhwGif csufcsif;vkyf,lír&aom udprö sm;udk tqdkyg tool rsm;jzifhom zefwD;,lxm;&onf/ Scanning Tips



0ufbfay:wGiftoHk;jyKrnfh image rsm;udk scan vkyf,lchJvQif atmufygtnTef;rsm;onf t&nf taoG; ykdaumif;pGm&&SdvmEkdifonfh image rsm;twGuf taxmuftulrsm;pGm &&SdEkdifygvdrfhrnf/ - rdrd\aemufqHk; image rsm;onf 72 dpi resolution wpfck&Sd&rnf/ image trsm;pkudk 72 dpi jzifh wkduf½kduf scan vkyfEkdifonf/ 100 dpi uhJokdYaom resolution tenf;i,f jrifhrm; aewwfaom scanning onf t&G,ftpm; jyKjyifjcif;twGuf ydkíudkifwG,f&vG,fulonf/ taMumif;rSm pixel ydkí&&ef jzpfygvdrfhrnf/ rnfokdYyifjzpfap 72 dpi onf standard resolution jzpfí wpfvufrtwGif; &Sd&rnf/ Pixel jzifh a&wGuf,lonf/ - taumif;qHk;rSm grayscale (8-bit) mode jzifh scan vkyfjcif;jzpfonf/ Black and white (2 bit okdYr[kwf bitmap) jzifh scan vkyfjcif;jzifh raumif;rGefEkdifay/ Midtone area rsm;wGif csdefn§dEkdif&ef grayscale onf taumif;qHk;jzpfaponf/ tu,fírsm; black and white pixel udkom &,lvkdygu image \ aemufqHk;tqifhwGifom jyefvnfajymif;,loifhonf/ - tu,fírsm; print vkyfxm;onfh image wpfckudk scan vkyf,lchJvQif tpuftajymufrsm; roefYrpif &SdaeEkdifonf/ xkdodkYvkyf,lvQif taumif;qHk;enf;vrf;rSm photoshop wGif yg 0ifonfh Gaussian blur filter udk toHk;cs&efyif jzpf\/ Image udk tenf;i,f 0g;,lvkdufum t&G,ftpm;udk tenf;i,favQmhcsNyD;rS sharpening filter udk jyeftoHk;csjcif;jzifh tpuf tajymufrsm;udk z,f&Sm;ypfEkdifonf/ WEB DESIGN



vufawG o Y ifcef;pmrsm;



259



 Photo Archives and Clip-Art



yHkMurf;a&;qGJí image rsm; zefwD;,l&ef rvkdvm;vQif toifhxkwfvkyf a&mif;csvsuf&Sdaom ready-made photo rsm;? Illustration rsm;ESihf button rsm;udv k nf; oH;k Ekid yf gonf/ ,aeYacwf wGif 0ufbfvkyfief;ü toifhoHk;Ekdif&ef clip-art collection rsm;vnf; tvG,fwul 0,f,l&&Sd Ekdifygao;onf/ xkdYtwl tcrhJ&,lEdkifaom online resource rsm;vnf; &Sdaeygonf/ okdYaomf tqkdyg tcrh&J Ekid af om collection rsm;onf t&nftaoG;tm;jzifh pdww f idk ;f us jzpfcsifrjS zpfygvdrrfh nf/ atmufazmfjyyg site rsm;wGif *&yfzpfawmfawmfrsm;rsm; tcrhJ &Ekdifygonf/ A+ Art (www.aplusart.com) Icon rsm;? background yHkrsm;? button rsm;? animation rsm;? Web Clip-Art Links Page (Webclipart. miningco.com/internet/webclipart) Clip-art-related link aygif; &mcsDí &Sdonf/ tu,fí rdrdonf professional vkyfief; vkyfaqmifaejyD; xkdufoifhaom toHk;p&dwf &Sdygu atmufyg site rsm;rS aps;EIef;csKdompGm



0,f,l&&SdEkdifonf/ Picture Quest (www.Picturequest.com) Photo Disc, Corbis ESifh tjcm;tjcm;aom image trsKd;tpm;rsm;tygt0if tqifhjrifh image aygif; wpfodef;ausmf &&SdEkdifonf/ Art Today (www.arttoday.com) toif;0ifyHkpHjzifhjzpfap? rsm;ESifh Illustration rsm;udk &,lEkdifonf/



tcrhJpepfjzifhjzpfap image



Graphics Production Tips



þoifcef;pmwGif 0ufb*f &yfzpfrsm; xkwv f yk &f eftwGuf tajccHwifjycsuf tcsKUd ukd wifjyay;chJ aomfvnf; ESpfaygif;rsm;pGm format aygif; ajrmufjrm;pGmudk toHk;csvsuf &SdaeMuonfh tjcm; aom format-specific enf;emrsm;udk tcef; 14? 15? 16 wkdYwGif qufvufazmfjyay;ygrnf/ Work in RGB Mode



rdrw d Ydktaejzifh RGB mode twGi;f image-editing vkyif ef;pOfrsm;ukv d nf; rvGrJ aoG vkyu f ikd f Mu&ayvdrfhrnf/ GIF yHkpHjyKvkyf&eftwGufjzpfap? JPEG yHkpHjyKvkyf&eftwGuf jzpfap? RGB mode yg0ifaernfjzpf\/ RGB mode qk& d mü grayscale onf non-color image rsm;twGuf tvGefoifhawmfonf/ JPEG image rsm;onf RGB color image tjzpf wkduf½kduf zdodyf½HkrQom jzpfonf/ GIFs rsm;twGur f l RGB color image rS Indexed Color okYd saving rvkyrf D ajymif;,l&onf/ 260



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 tu,fí rdro d nf yHx k w k v f yk o f nhv f yk if ef;wGif *&yfzpfzefw;D rIukd tuRrf;0ifxm;oljzpfyg u CMYK mode wGif vkyif ef;tavhtusi&hf NdS yD; jzpfaeygvdrrfh nf/ (CMYK mode qko d nfrmS Cyan, Magenta, Yellow ESifh Black ink wkdYjzifh yHkESdyfjcif; jzpfonf/) okdY&mwGif zufpf 'DZkdif; vkyfief;wGif tqkdyg ink ESifh CMYK mode wkdYonf rtyfpyfay/ Use Anti-Aliased Text



omreftm;jzifh 0ufbftwGuf tpGrf;jy*&yfzpfrsm; zefwD;Ekdif&eftwGuf rdrdwkdYonf antialiased text ESifh object rsm;udk toHk;cs&ayvdrfhrnf/ Anti-aliased qkdonfrSm tenf;i,f 0g;wm;wm;yHkpHjzifh EIwfcrf;om; tauG;rsm; wGif&Sd ta&mifrsm;tMum; tacsmoyf jyKvkyjf cif;jzpf\/ Figure 13-9 wGif jrifawGU&ouho J Ydk aliasing tajcjy effect ESihf anti-aliasing tajcjyyHpk rH sm; &Sad eygvdrrhf nf/ Anti-aliasing vkyif ef;twGuf on/off tajymif;tvJ vkyf,lEkdifonf/ Figure 13-9



Anti-aliasing udk toH;k jyK&mwGif tm;enf;csuw f pfcrk mS rdr\ d image wGif jznho f iG ;f aom ta&mifta&twGuu f kd xnhx f m;wwfjcif;jzpf\/ File t&G,t f pm;udv k nf; xnhx f m;wwfao; onf/ Byte tenf;i,f ykdvmwwfaomfvnf; tvJtvS,f vkyf&mwGif tvGefaumif;onf/ Save Your Work



rnfonhf'DZkdif;rsKd; jyKvkyfonhftcgwGifjzpfygap? vkyfaqmifcsufwpfckpD NyD;pD;onfhtcgwdkif; save vkyf,l&onf/ tu,fí Photoshop wGif vkyfudkifum layer file rsm;tjzpf zefwD;,l& aom *&yfzpfrsKd;jzpfygu 'Flattened' GIF okdYr[kwf JPEG file rS oD;jcm;pD layered version jzifh save vkyf&ef ta&;BuD;onf/ Name Files Properly



rdr\ d *&yfzpf file rsm;twGuf vkyo f ifv h yk x f u dk af om file extension rsm;jzifh owfowfrw S rf w S f xm;&Sd&onf/ GIF files \ aemufqufwGJwGif .gif [kvnf;aumif;? JPEG file rsm;twGuf aemufquftjzpf .jpeg odkYr[kwf .jpg [lí vnf;aumif; xnfhoGif;yg&Sd&rnf/ xkdokdY aemuf WEB DESIGN



vufawG o Y ifcef;pmrsm;



261



 qufwGJoauFw ryg&SdvQif rdrdonf format rSefrSefuefuefjzifh save vkyfxm;aomfvnf; browser rS &Smray;Ekdifaom taetxm; jzpfoGm;wwfonf/ Consider Other End Use



Low resolution jzifh file rsm; zefw;D rIwi G f tm;enf;csufwpfcrk mS print xkw, f yl gu nhzH sif;ae jcif;jzpfonf/ omreftm;jzifh acsmarGUvSyaom printing wpfck &,lEkdifa&;twGuf resolution rSm 300 dpi okdYr[kwf ¤if;xufjrifh&ef vkdtyfygonf/ wpfvufrwGif 72 dots &Sdaom



0ufbf*&yfzpf jzpfyguvnf; yHkESdyfxkwf&mwGif tpuftajymuf tuGufrsm; ygvmwwfonf/ Logo rsm;? okYd r[kwf ta&;ygaom illustration rsm;uhJokdYaom image rsm; xnho f iG ;f &ef vkt d yfygu yxrOD;pGm high resolution image udo k m zefw;D ,loiho f nf/ xkYdaemuf 0ufbjf zifh oifhavsmfaom t&G,ftpm;udk yHkyGm;,l&onf/ rnfodkYaom tajctaewGifjzpfap vector file tay:wGif logo rsm;udk zefwD;u ydkrdkoifh avsmfaponf/ þenf;jzifh jyKvkyfxm;jcif;aMumifh t&G,ftpm; ajymif;vJonfhtcg resolution tajymif;tvJ r&SdapEkdifouhJokdY t&nftaoG; usqif;rIvnf; r&SdEkdifawmhay/ Web Graphics Highlights



Web graphic rsm;



zefwD;jcif;ESifh ywfoufí þoifcef;pmwGif t"du rSwfom;p&mrsm;tm;



jyKpk,lrnfqkdygu- ta&mifjym;pepfESifh hard edge rsm;yg&Sdaom image rsm;udk GIF format jzifh save vkyf&ef/ - "mwfyHkt&nftaoG;&Sd image rsm;udk JPEG format jzifh save vkyf&ef/ - Flat graphic ESihf photographic ypön;f rsm; aygif;pyf zefw;D xm;aom image rsm;twGuf taumif;qHk; jzpfaponfh GIF format jzifh save vkyf&rnf/ - Web graphic rsm;onf low-resolution bitmapped image rsm;jzpf&rnf/ - Web graphic rsm;udk RGB color mode wGifom zefwD;apEkdifvdrfhrnf/ CMYK mode wGif rzefwD;Ekdifyg/ - Web graphic rsm;twGuf pixel jzifh oHk;EIef; azmfjyrSom jynhfpHkaprnf/ - yHkMurf;rsm; scan vkyfcsufrsm;? 'pf*spfw,fuifr&mjzifh "mwfyHk½kdufcsufrsm;? odkYr[kwf clip-art library wpfckckrS image rsm;udk zefwD;,lEkdifaponf/ - Web graphic rsm; zefwD;,ljcif;twGuf tausmfMum;qHk; tool rsm;rSm Adobe Photoshop (Image Ready tygt0if) ESifh Macromedia Fireworks wkdY jzpfonf/ 262



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 tcef; 14



Creating GIFs



Web Page rsm; jyKvkyfawmhrnfqkdygu GIFs jyKvkyfa&;tay: tajcjyKMu&onf/ Basic GIFs rsm; wnfaqmufrIwkdif;onf ½kd;½kd;&Sif;&Sif;yHkpHrsm; jzpfaomfvnf; professional tqifh GIFs rsm;jzpfvm&eftwGur f l transparency twGuv f nf;aumif;? optimization twGuv f nf; aumif; xnhfoGif; pOf;pm;vm&onfhtjyif Web palette rsm;udkvnf; *½kjyKvkyfaqmif,lMu& onf/ okdYaomf tqkdygudp&ö yfrsm;twGuf web-ready graphic tool ½kd;½kd;rsm;jzifhyif ajz&Sif;,l Ekdifygonf/ GIFs rsm; jyKvkyfjcif; vkyfief; rpwifrD GIFs ESifh ywfoufí odxm;oifhorQudk



yxrOD;pGm wifjy&rnf jzpf\/ ESifh ywfoufonfh taMumif;t&mrsm; ,aeY web site rsm;wGif jrifawGUae&onfh *&yfzpftrsm;pkonf GIF (Graphic Interchange Format) file rsm;omjzpfonf/ ¤if; web twGuf oD;jcm;py,f&S,f zefwD; 'DZkdif;jyKxm;onfh format wpfck r[kwfaomfjim;vnf; ¤if;onf platform rsKd;pHktwGuf 0ifqhHapEkdifNyD; file t&G,ftpm;udk ao;i,foGm;apum vkdovdk jc,frIef;Ekdif&eftwGuf csOf;uyf&vG,fulaom vkyfenf;vkyf[efyHkpH jzpfonf/ ,aeYtxd rnfonfhtoHk;cs version ESifhjzpfap? rnfonfh *&yfzpfqkdif&m browser rsm;ESifhjzpfap wGJzuftoHk;jyKEkdifaprnfh wpfckwnf;aom format [k vnf; qkdEkdifonf/ wpfenf;tm;jzifh rdrdjyKpkwifjyaom *&yfzpfrsm;udk tifwmeufwGif vlwkdif; jrifawGUapvkdaomqE´&Sdygu GIF udkom oHk;&rnfjzpf\/ Icon rsm;? text rsm; a&maESmyg0ifrnfh *&yfzpfrsm;? wpfaMumif;qGJyef;csDrsm;? trSwfwHqdyf Logo uhJokdYaom flat area yg ta&mifjc,fyHk&dyfrsm;twGuf toHk;jyK&ef taumif;qHk; file format jzpfonf/ rdr\ d image rsm;tm; GIF wpfct k aejzifh odr;f qnf;xm;Ekid af omfjim;vnf; "mwfyHkt&nftaoG;rsKd; texture ajrmufjrm;pGm yg0ifaeaom image rsm;ukdrl pdwfwkdif;us &Ekdifavmufrnf r[kwfay/ (tqkdygudpEö Sifh ywfoufí tqkdyg image trsKd;tpm;rsKd; odrf; qnf;rItwGuf taumif;qHk; file format rSm JPEGs yifjzpfonf/) GIFs



WEB DESIGN



vufawG o Y ifcef;pmrsm;



263



 Figure 14-1 wGif



erlem image rsm;udk GIF format jzifh oifhavsmfaom yHkpHrsm;tjzpf



jrifawGU&Ekdifonf/ Figure 14-1 hard edge rsm;ESihf flat color rsm;



t"duyg0ifaeonfh *&yfzpfy&kH yd rf sm;twGuf GIF format onf tvGeaf umif;onf/



8-Bit, Indexed Color



GIFs wki d ;f onf color image rsm;udk nTe;f zGUJ &mü tjrifq h ;kH 8-bit color information wpfcjk zifh



om xnhfoGif;&ef jzpfonf/ nTef;zGJUonf[laom t"dyÜm,frSm palette ac: ta&mifZ,m;wpfckwGif okdrDS;xm;aom ta&mifrsm;rS rdrdtoHk;jyKvdkaom ta&mifudk image twGuf a&G;cs,f,ljcif;ukd qdkvdkonf/ tqkdygZ,m;wGif ta&mifeHygwftnTef;rStp Figure 14-2 gallery wGif jrifawGU&ovkd imk kd GIF wpfct k jzpf rodr;f qnf;rD age twGif;rS ta&mifrsm;udk azmfjyay;onf/ *&yfzpfwpfcu Figure 14-2 Indexed color image wpfct k wGi;f &Sd ta&mifrsm;udk ta&mifZ,m;wpfcjk zifh nTe;f qkjd cif;? odr;f qnf;jcif; jyKvyk x f m;onf/ tqkyd g ta&mifZ,m;udk palette [k ac:onf/ tjrifq h ;kH 256 color (8-bit) omygonf/ U.F.O aMumfjim *&yfzpftwGuf ta&mifZ,m; toH;k jyKyu kH kd ½IjrifEidk o f nf/



264



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 rdrdonf RGB image rS indexed color mode okdY ajymif;,l&ef vkdonf/ (tcsKdUaom tool rsm;onf xkdudpt ö wGuf tvkdtavsmuf aqmif&Gufay;onf/) 8-bit color \ t"dymÜ ,frmS tjrifq h ;kH tqift h jzpf 256 colors om yg0ifEidk rf nf jzpfonf/ 8-bit twGuf tcsuftvufqkdif&m tjrifhqHk;tqifhudk (28 = 256) [lívnf; jyqkdEkdifonf/ GIFs rsm;onf ydkíedrfhaom bit depth rsm;vnf; yg&Sdwwfonf/ þae&mwGif ta&mif enf;enf;oHk;av file t&G,ftpm;ao;av jzpfonf/ GIF udk zefw;D onft h cgwdik ;f ta&mifZ,m;jzifh wku d ½f u dk o f ;kH Ekid &f ef wGyJ gvmrnfomjzpf\/ GIF Compression



GIF compression obm0udk avhvmonfhtcg csufcsif; oabmaygufEkdifygvdrfhrnf/ yxr OD;pGm avhvm&mwGif ¤if;\ lossless [laom a0g[m&\ t"dymÜ ,fonf image tm; zdEydS o f rdk ;DS &eftvkYd imS rnfonfh image information rS vGwo f mG ;apjcif;r&S[ d k azmfjyaMumif; em;vnfxm; Ekid o f nf/ 'kw, d tqifah vhvm&mwGif image zdoyd rf t I m; twef;vku d f azmfjyxm;onf/ LZW ac: compress scheme wpfct k m; toH;k csxm;yHu k kd awGU&SEd idk o f nf/ ta&mifwpfcw k nf;twGif; rSmyif pixel rsm; azmfjyxm;onf/ twef;vkdufyHkudk xdvdkufonfhtcg ¤if;rS data azmfjycsuf wpfcktjzpf yHkoGif;í zdodyfvkdufEkdifonf/ Figure 14-3 wGif jrifawGUonfhtwkdif; texture yg aom yH&k yd rf sm;xuf flat color yH&k yd rf sm;u ydí k odyo f nf;rIjyKEkid af Mumif; avhvm,lEidk yf gvdrrhf nf/ Figure 14-3 A simple demonstration of GIF compression



onf twef;yHpk rH sm;twGi;f pixel rsm;udk odyx f m;jcif;jzpfonf/ ta&mifwpfcw k nf;rSm &So d nfh pixels rsm;\ string ukd xdvu dk af omtcg owfowfcwfcwf ta&mifwpfcu k kd &,lEidk o f nf/ GIF compression schemes



description= "14 teal"



ta&miftqifhqifhjzifh &Sdaeaom yHk&dyfwpfck&Sd? twef;wpfckwGif pixel wkdif;twGuf odrf;qnf;rnfh owif;tajctaersm; xm;&Sdonf/ tqkdyg owif;tajctaewGif azmfjycsuf description &Snv f sm;av file t&G,t f pm; Bu;D av jzpfonf/ description= "1 teal", "1 light teal", " 2 medium teal", etc ...



tcsKUd aom GIFs rsm;twGuf xko d Ydkaom pdw0f ifpm;p&m vkycf surf sm;udv k nf; jrifMu&rnf/ yH&k yd \ f tajctaeudk a'gifvu dk t f ajctaetwGuf rlvtwkid ;f xm;NyD; tvsm;vku d f tajctae\ WEB DESIGN



vufawG o Y ifcef;pmrsm;



265



 stripe udk csKHUvkdufonfESifh image \ t&G,ftpm; tenf;i,f ydi k ,fomG ;ayrnf/ xkYd twl tvsm;vku d t f m; rlaooGm;í a'gifvu kd u f kd upm;Munfv h Qifvnf; þokYd awGU&rnf/ tqkyd gudpö twGufvmrnfh optimizing GIFs u@wGif tao;pdwfazmfjyay;ygrnf/ Transparency



GIFs ESihf ywfoufí pwki d t f usqH;k vkycf sufwpfcrk S rdrt d aejzifh background image wpfcu k kd jrifom&ef yHak zmf,El idk jf cif;jzpfonf/ GIFs tygt0if rnfonfh bitmap trsK;d tpm; *&yfzpfrqdk av;axmifhusus obm0jzifh &Sdaeonf/ Figure 14 - 4 wGif azmfjyxm;ouhJokdY ydkípdwf0ifpm; p&m aumif;vmaprnfh toGiftjyifrsKd;jzifh zefwD;jyoEkdifonf/ tao;pdwfudk Adding Transparancy u@wGif azmfjyay;ygrnf/ Figure 14-4 Transparency jzifh yH&k yd w f pfcak y:wGif background *&yfzpfwpfcu k kd wGx J nhf



,lEidk o f nf/ txufEiS ahf tmuf uGJjym;pGm ay:xGufvmrnf/ Interlacing



Image download vkyf,l&mwGif twGJvkdufvufurf;ay;rI jyKvkyfay;onfh txl; jyKvkyfcsuf rsKd;udk interlacing [k ac:onf/ vufurf;rIrsm;wGif vufurf;rIrjyKrDyrkH sm;xuf vufurf;rIjyK ay;onfhyHkrsm;u ykdrkdxifay:apaom tajctaersKd;jzifh GIF image wpfcktjzpf browser window yDyjD yifjyif wifjyonft h csdet f xd &Sad ernf/ erlemtjzpf Figure 14-5 wGif jrifawGUEkid f Figure 14-5 Interlace vkyfxm;aom GIFs rsm;onf twGv J u kd f



jzwfwifrIudk qifhum qifu h m aqmif&u G f ay;onf/ csay;onft h cg jrifawGU &aom tajctaeonf rcsay;rD jrif&aom image xuf Munfvif jywfom;onf/



266



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 onf/ xkdokdY interlacing txl;jyKcsuf ryg0ifygu tcsKdUaom browser rsm;onf image wpfckudk download vkyf&mwGif vHk;vHk;vsm;vsm; azmfjyEkdifrSom wpfcgwnf; cif;usif;jyay; ojzifh rnfonhft&mrQ rjrif&onfh taetxm;jzifh apmihfae&ayvdrfhrnf/ tcsKdUrSmrl image udk twef;vdkuf wpfqifhcsif; cif;jyay;onfh yHkpHrsKd;vnf; &Sdaeonf/ tvGefjrefqefaom tifwmeufcsdwfqufrI toHk;jyKxm;olrsm;taejzifh tqkdyg interlacing ESifhywfoufonfh obm0udk odjrifEkdifrnf r[kwfay/ okdYaomfjim;vnf; aES;auG;aom modem toHk;cs csdwfqufrIrsm;wGifrl interlacing tajctae tm;vHk;udk odjrifEkdifonf/ tu,fí image map wpfcktjzpf toHk;jyKxm;onfh yHk&dyfjzpfvQif toHk;jyKoltaejzifh image wpfpdwfwpfa'otay: click vkyfay;&if; jrefjrefyHkay:vmap&ef aqmif&Guf,lEkdifonf/ Interlacing vkyjf cif; rvkyjf cif;onf rdrt d ay: rlwnfonf/ tMurf;zsif; rSw, f o l ifo h nf rSm image ao;i,fygu interlace vkyf&ef rvdkay/ Imagemap rsm;uhJokdY BuD;rm;aom image rsm;twGufrl interlace vkyf&ef vdktyfygonf/ Animation



GIF file format twGi;f tjcm;wnfaqmufrI toGit f jyifrmS Figure 14 - 6 wGif azmfjyxm;ouhJ okdY ½kd;&Sif;aom animation cif;usif;jyKvkyfEkdifjcif; jzpfonf/ rdrd animation \ frame tm;vHk;udk oD;jcm;pD zefwD;vkdufonfESifh single animated GIF wpfcktaejzifh tvG,fwul odrf;qnf;&ef tools rsm; &Sdaeonf/ tao;pdwfvIyf&Sm;rI GIFs udprö sm;udk tcef; 16 wGif



tao;pdwf qufvufwifjyay;ygrnf/ Figure 14-6



txufyg ½k;d &Si;f aom vIy&f mS ;rItqifq h ifh frame rsm; tm;vH;k onf GIF file wpfct k wGi;f yg0ifxm;&So d nf/ Creating a Simple GIF, Step by Step



GIFs jzifh rnfonft h &mrsm; aqmif&u G Ef idk rf nfukd od&NdS yD;aemuf tvGet f ajccHusaom Oyrmjzifh vkyfaqmifjyoay;rnf jzpf\/ okdYaomf tvStywefqmqifxm;aom transparency ESifh optimization vkyfief;pOfrsm;udkrl aemufydkif;rS jrifawGUEkdifygvdrfhrnf/ Web onf ay:jyLvmjzpfvmonfEi St hf rQ GIF *&yfzpfqidk &f m aqmhz0f rJ sm; awmif;qkrd o I nf vnf; wufvmcho J nf/ *&yfzpfy½k*d &rfwidk ;f wGif tajccHusvaS om GIF-saving vkyaf qmifcsuf WEB DESIGN



vufawG o Y ifcef;pmrsm;



267



 rsm; yg&Sdonf/ þoifcef;pmwGif tukefvHk; wifjy&efawmh rjzpfEkdifacs/ okdYtwGuf Adobe Photoshop okdYr[kwf Macromedia Fireworks odkYr[kwf JASC Paint Shop Pro wkdYjzifh jyKvkyfyHkudk erlemtjzpf wifjyay;Ekdifygonf/ rdrdtoHk;jyKaom tool rsm;ESifh roufqkdifaomfvnf; GIF wpfcktaejzifh image wpfckudk odrf;qnf;Ekdif&ef tajccHvkyfief;pOfrsm;rSm atmufygtwkdif; jzpfonf/ 1/ RGB color mode wGif Low-resolution (72 dpi) image jzifh pwifyg/ 2/ RGB mode twGi;f &Sad eqJrmS yif resizing okdYr[kwf cropping okdYr[kwf color correction wkdYuhJokdYaom wnf;jzwfrIvkyfief;rsm;udk tNyD;vkyfxm;yg/ Figure 14-7 Saving a GIF with the 'Save For Web' feature in Photoshop



1. File udzk iG íhf rlv image tm; vkt d yfovkd wnf;jzwf,yl g/ 2. rdr\ d image udk GIF jzifh odr;f qnf;&ef tqifoifh jzpfaomtcg 'save for web' [laom nTeMf um;csuu f kd file menu rS a&G;cs,, f v l u dk yf g/ 3. Web dialog box twGuf odr;f qnf;rI vky&f mü yxrOD;pGm menu udk qGJcsNy;D GIF udak &G;yg? xkaYd emuf palette wpfcu k kd a&G;cs,Nf y;D ta&mif eHygwjf y number of colors udo k mG ;yg/ dithering twGuf jznfph u G Nf y;D interlace vkyv f o dk nf? rvko d nfukd jyyg/ Dialog box onf transparency setting twGuv f nf; oH;k Ekid af o; onf/



4. tm;vH;k vkyNf y;D onft h cg OK udk click vkyfum file trnfukd ay;vdkufyg ¤if;wGif aemufqufwJG pmvH;k tjzpf .gif ygvmygvrd rhf nf/



268



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 3/ Image onf rdrdvkdtyfaomtaetxm;twkdif; taotcsm&SdaejyDjzpfaomtcg index color okYd ajymif;vdu k yf g/ tu,fí rdro d nf web graphic tool wpfcu k kd toH;k jyKaeygvQif tqdkyg image udk format option rS GIF udk a&G;cs,fvkdufonfESifh tvkdtavsmuf qkd ovdk index color ajymif;NyD; jzpfoGm;ygvdrfhrnf/ta&miftavQmhtwif;udpö aqmif&Guf onfhtcg palette udk ac:í vkyfaqmif&rnf/ Color Palette \ sidebar wGif palette option trsKd;rsKd;udk azmfjyxm;aMumif; awGUEkdifonf/ 4/ vkdtyfonfhcsdefn§drIrsm; jyKvkyfjyD;onfESifh save vkyfum GIF jzifh export vkyf,l&onf/ wpfckowdjyK&rnfrSm taMumif;aMumif;aMumifh aemufydkif;wGif tajymif;tvJ vkyfvkdvQif rlv RGB image udk aocsmpGm odr;f xm;&efyifjzpfonf/ RGB color mode wGio f m wnf;jzwf rIvkyfief;t00 vkyfoifhonf/ In Adobe Photoshop



Photoshop twGif; GIF wpfck zefwD;&ef trSefwu,ftm;jzifh enf;vrf;tcsKdU &Sdaeygonf/ tu,fí version 5.5 ESifhtxufqkdygu Figure 14-7 wGif azmfjyxm;ouhJodkY 'save for web' [lonfh feature udk toHk;jyKjcif;jzifh tm;omcsuftcGifhtvrf;rsm;pGm &&SdEkdifonf/ tcsdKY Version rsm;wGif 'Save As' jzifh ½kd;&Sif;pGm jyKvkyfEkdifonfudk Figure 14-8a ESifh 14-8b wdUk wGif



awGUjrifEkdifonf/ Figure 14-8a








file udzk Gií hf RGB mode



twGi;f &Sad epOf vdt k yfonfh wnf;jzwfrI rSeo f rQukd jyKvyk yf g/







Mode udk a&G;cs,&f if; rdrd image tm; indexed color tjzpf ajymif;vku d yf g/



 Indexed color dialog box twGi;f t"duqH;k jzwfa&G;cs,rf t I 00udk jyKvyk &f ef vko d nf/ (u) number of colors (bit depth) (c) dither jyKvyk &f ef vko d nf rvko d nf (*) rdr'd ZD idk ;f Gif Web-save color rsm; toH;k csxm;ygu preserv exact colors udk a&G;cs,, f yl g/ d aejzifh save as okrYd [kwf Export wpfcck u k kd toH;k csEidk o f nf/ 
 þtqihaf &mufaomf rdrt WEB DESIGN



vufawG o Y ifcef;pmrsm;



269



 Figure 14-8b Save as File menu rS 'Save As' a&G;cs,yf g/ Dialog box twGi;f rS menu udk qGcJ svu dk Nf y;D 'compuserve GIF' udk a&G;cs,yf g/ File trnf\aemufwiG f .gif yg&dS r&Sd *½kpu kd yf g/ Interlace vkyv f rdk I &Srd &Sd ajzyg/



Export File menu rS Export udak &G;Ny;D GIF 89a oko Yd mG ;yg/ Dialog box rS rdrd image twGuf ta&mifjyKp&k ef tcGihf tvrf;ay;ygvrd rhf nf/ Ny;D vQif interface vky&f efupd Eö iS hf trnfay;jcif;? odr;f qnf;jcif;rsm; aqmif&Gu&f rnf/ In Macromedia Fireworks 3



Macromedia Fireworks onf web graphic twGuf yHkpHjyKxm;jcif;oufouf jzpfaom aMumifh optimized jyKvky&f eftwGuf tool rsm;udk awGUjrif&ygvdrrhf nf/ wpfenf;tm;jzifh highquality GIFs rsm; &&SdEkdifonf/ Figure 14-9 wGif jrifawGU&ouhJokdY Compression rate ydkrdk



aumif;vm&ef vkyfcsufrsm;pGm ay;Ekdifonf/ In JASC Paint Shop Pro 6



Photoshop twkdif; Paint Shop Pro twGif; vG,fulpGm GIFs wpfckudk zefwD;,lEkdifonf/ Figure 14-10 wGif azmfjyxm;ouhJokdY GIF optimization tool topfwpfrsKd;udk version 6



wGif rdwfqufay;xm;onf/ Adding Transparency



GIF format \ tjcm;toGit f jyifrmS image \ tpdwt f ydik ;f rsm;udk xd;k azmuf jrif&aomyHpk rH sK;d



jzifh pDpOfEidk jf cif;yif jzpfonf/ rnfoYkdyifjzpfjzpf xd;k azmufjrif&aomyHpk jH zifh jyxm;onfh {&d,m\ aemufwGif &SdaeorQudkvnf; jyay;ygvdrfhrnf/ 270



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Figure 14-9



d yfonfh wnf;jzwfrI 
 File ukzd Giíhf vkt t00udk vkyyf g/



 GIF format udk a&G;cs,&f ef rdr\ d work-space wGif optimize palette udo k ;kH Ekid o f nf/ (u) Palette wpfcu k kd a&G; (c) number of colors udck sed f (*) dittering udpaö qmif&Guf (C) ESpzf uf tay: axmifh arrow rS menu udq k cJG sum image interlace udk aqmif&u G yf g/ (i) Preview window twGi;f rdrd



vkyu f ikd fcsed n f dc§ surf sm;\ &v'fukd Munhf½Ippfaq;Ekdifonf/



 rdr\ d setting udprö sm; Ny;D pD;oGm;aom tcg file menu rS export udk a&G;cs,Nf y;D GIF file k kd aemufqufwJG .gif name wpfcu pmvH;k xnho f Gi;f &if; ay;,l&rnf/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



271



 Figure 14-10




 File udzk Giíhf



RGB mode twGi;f  Save As dialog box wGif file trnfukd vkdtyfonfh wnf;jzwfrIudpt ö 00udk ½ku d o f Gi;f &rnf/ File trnf\ aqmif&Guyf g/ GIF file wpfct k aejzifh aemufqufwJG tjrifh aemufq;kH rS .gif odr;f qnf;Ekid o f nfh tqifo h Ydk a&muf&ydS gu xnfhoGif;ay;&rnf/ File udo k mG ;í? Save As jzifh odr;f yg/







Options cvkwu f kd click vkyyf g/ Save Options dialog box wGif GIF version a&G;cs,, f El ikd o f nf/ (89a onf transparency ESihf animation twGuf yhyH ;kd rIjyKay;onf/) Interlace vkd rvdk a&G;cs,, f yl g/ jy;D vQif OK udk click vkyíf GIF tjzpf odr;f Ekid o f nf odkYr[kwf qufvuf aqmif&Gufvkdao;vQif option rsm; xyfr&H &Sad &;twGuf Run Optimizer udk click vkyyf g/








GIF optimizer \ color panel udk toH;k csí bit-depth okrYd [kwf dither yrmP okrYd [kwf palette wkjYd zifh image wkv Yd kd qufvuf aqmif&GuEf idk o f nf/ Method of color selection qko d nfrmS palette udk &nfneT ;f jcif; jzpfonf/ Indexed color image wpfcjk zifh pchyJ gu Existing udk oH;k yg/ Image twGuf web palette udk toH;k csEidk &f ef Standard/Web-safe ukd oH;k yg/ Optimized Medium Ud kd Cut adaptine palette wpfcEk iS hf tvm;oP²mefwpl Gm ta&mif tcsKu csay;onf/ rdr\ d rlv image onf ta&mifenf;ygu optimized k ;kH yg/ Octree udo







rdr\ d GIF wGif wpfpw d w f pfa'orQ Transparent vkyv f ydk gu Transparent {&d,mav;jzifh pwifvydk g u 'Existing image k kd or layer transparency' udak &G;yg/ ta&mifwpfcck u tom;ay;&if; transparent vkyv f ydk gu 'Areas that match this color' udk toH;k csyg/



272



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 vkyfudkif&efenf;vrf;rSm ta&mifZ,m;twGif;&Sd taygufusOf;uav;wpfckrS "transparent" taejzifh 'DZdkif;vkyfxm;onfudk toHk;jyK&efyifjzpfonf/ xdk;azmuf jrif&onfhoP²mef vkyfrnfhyHk&dyfudk ay;vkdaomta&miftm; ½dk;&Sif;pGm a&G;cs,fNyD; tool udk udkifwG,f,l&onf/ rnfoYkdyifjzpfap owdjyK&eftcsurf mS ta&mifwpfcu k kd a&G;cs,v f u kd af omtcg a&G;cs,v f u dk af om ta&mifwkdif;jzifh csufcsif;xif[yfvmvdrfhrnf/tqdkygudpEö Sifhywfoufí aemufvmrnfhtcef; 15 wGif ]]rvkdvm;tyfonfhxdk;azmufjrif&rIrsm; umuG,fjcif;}} acgif;pOfjzifh tao;pdwf azmfjy ay;ygOD;rnf/ "Transparency" udk xnfhoGif;&mwGif Photoshop odkYr[kwf Fireworks jzifh Layer ac: tvTmvkdufwifxm;onfh image t&if;tjrpfay:wGijf zpfap? pre-existing GIF file uJhodkY aom flat format ay:wGijf zpfap t&nftaoG;wnf&rdS u I kd jrifawGYEidk rf nfjzpfí tqkyd gtaMumif; &if;ESpcf suEf iS hf qufpyfyt kH aMumif;udk avhvm,l&rnf jzpf\/ Preserving Transparency in Layered Images



tu,fí layered image wpfckudkpwifaqmif&Gufawmhrnfqkdygu rdrdwGif tqdkyg xkd;azmufjrif&onfhoP²mef jyKvkyfrnfhae&m twdtusxm;&SdNyD; jzpfae&ygrnf/ (Photoshop wGijf zpfap? Fireworks wGijf zpfap no-brainer jzpfjcif;aMumifh cJa&mifEiS hf tjzLa&mifuu G w f Ydk jzifh jyoxm;aom ae&mwpfckwGif jyKvkyf&ef rdrdu pDpOf&onf/) xkd tool ESpfckvHk;wGif "Save for Web" (Photoshop) odkYr[kwf "Optimize" (Fireworks) palette rS Transparency udk a&G;cs,f,al omtcg Figure 14-11 wGif jrifawGY&onfh twkid ;f aemufq;kH &Sad eonf GIF xJü xd;k azmufjrif&onfh yHpk jH yKvkyrf nfah e&mtwGi;f rS *&yfzpf tvTmtwkdif; wnf&Sdaeygrnf/ Tool ESpfckvHk;onf "Matte" color wpfckudk tao;pdwf azmfjycGifh jyKxm;\/ xkd color jzifh transparent {&d,m&Sd rdrdtvkd&Sdaom yHk&dyfudk jyKvkyfay;yg vdrhfrnf/ (tu,fí GIF transparency rS a&G;cs,fxm;NyD; rjzpfygu xdkodkYjyKvkyf&ef qdkjcif; jzpfonf/) Fireworks 3 wGif Transpar-



Figure 14-11



ency udk dropdown menu rS Optimize palette udk toH;k csí "Index Transparency" udk



tvTmvdu k x f yfwif,rl nfh document wGif transparency jyKvkyfyHk Photoshop 5.5



a&G;cs,fvkyfudkiyf g/



wGif



"Save for Web" udk file menu rS qGcJ sía&G;cs,yf g/ box udk ppfaq; í rdrjd yKvyk af om transparS af e&m ency udk owfrw wGif csxm;í save vkyyf g/ WEB DESIGN



vufawG o Y ifcef;pmrsm;



273



 Index Versus Alpha Transparency



Image wpfckwGif transparency xnfhoGif;jcif;ESifhywfoufí t½dk;ajzmifhqHk; enf; vrf;rSm "index transparency" udk toHk;csvkyfudkifjcif;yif jzpfonf/ ¤if;enf;vrf;\ yHkpHwGif color table ay:rS pixel wpfckudk ae&mcsxm;í transparent jzpfay:aponf/ Eyedropper tool wpfckjzifh ta&mifwpfckudk a&G;cs,fNyD;vkyf&onf/ Photoshop rS "Alpha transparency" trnf&Sd acwfrDaomenf;pepfjzifh yHhydk;í vkyfaqmifcGifhay;xm;onf/ Document \ oD;jcm; channel (alpha channel) wGif GIF wpfck\ transparent {&d,mtwGuf yHkcsZ,m;tjzpf odrf;qnf;apaom enf;vrf; jzpfonf/ Alpha channel twGi;f &Sd pixel teufa&mifrsm;jzifh jyoay;aom {&d,mrsm;wGif ¤if;wkdY\ pixel color rsm;ESifhjyoay;\/ teufa&mifay:wGif tjzLa&mif pixel rsm;jzihf xm;odkjyKvkyf,lEkdifonf/ Photoshop \ channel palette twGif;&Sd alpha channel udk wnf;jzwf,ljcif;jzifh vkyfudkifaqmif&Gufaeaom image twGif; transparency ta&mifwifjc,frIudk vkyfEkdif onf/ atmufwGif jyoxm;aomyHkpHtwdkif; image twGif;rS rlydkifta&mifrsm;ESifh rywf oufapay/ Alpha channel wpfckESifh uRrf;usifpGm wdkuf½dkufaqmif&Guf jyKjyifxm;aom transparency onf acwfrDvSí tcsKdUuRrf;usifaom 'DZkdifemrsm;yif toHk;rjyKMuao;ay/ odYktwGuf index transparency ESihf ywfoufí tajccHtqifhavmufom ,cktcef;wGif



wifjyjcif;jzpf\/



274



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Adding Transparency to a flattened Image



Photoshop ESifh Fireworks twGif; transparent vkyfief;rsm;udk vuf&Sd file wpfckwGif jyKvkyf olwYdktwGuf tm;&p&mtcsuw f pfcsurf mS flattened image pwif vkyu f ikd x f m;&SEd idk jf cif; owif; yifjzpfonf/ tm;r&p&mowif;rSm rlv image \ t&nftaoG; nHzh si;f aeygu tqdyk gvkyif ef; pOftwGuf jyóemjzpfEdkifjcif;yif jzpf\/ tu,fí image onf aemufcHta&mifudk flattened vkyx f m;cJv h Qif transparent vkyx f m;NyD; yH&k yd t f m; ppfaq;Munf½h pI Of yH&k yd \ f ab;ywfvnf wGif trsKd;rsKd;aom color pixel rsm;\ uvem;rsm;jzifh &Sdaewwfonf/ tqkdyg tajctaeudk "halo" wpfck[k ac:qdkonf/ aemufvmrnfhtcef;wGif xdkudpu ö dk tao;pdwf azmfjy&Sif;vif;



jyoay;ygrnf/ d zf ufnaD prnfh GIF \ ta&mifjynfh wpfcsed w f nf;rSmyif Web page \ aemufcyH pkH jH zifh vku aemufcHwGif taumif;qHk;jzpfapEdkifaom flattened image wpfckodkY transparency xnfhMunfh MuygpdkY/ rdrd page \ aemufcHtpdrf;a&mifjzifh vdkufavsmnDaxG jzpfaprnfh tpdrf;a&mif jznfhwif; xm;onfh GIF file wpfck &&Sdxm;jyD[k rSwf,lvdkufonf/ odkYaomf ,ckwpfzef tEkpdwfusus tkw


flat GIF udk tay:q;kH wGiw f ifxm;í aemufcEH iS v hf u dk fzufrnDpGm awG&U onft h cg ¤if;udk flat green area rsm;jzihf yHw k Gijf yoonft h wdik ;f xd;k azmufjrifEidk af paom yHpk jH zifh jyKjyif,lEkdio f nf/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



275



 In Adobe Photoshop 4 (or higher)



Solid pixel color rsm;udk Photoshop wGif transparent odkYajymif;&ef wpfckwnf;aom enf; vrf;rSm Export GIF 89a Export vkyaf qmifcsujf zifh Figure 14-13 yHpk t H wkid ;f toH;k cs,El idk o f nf/ Transparent pixel ygaom (Figure 14-11) rlv image udk "Save for web" jzifh vkyf aqmif&ef vdktyfonf/ "Save for web" option udk tusKd;&SdpGm toHk;csvdkvQif rdrdtaejzifh flattened image udk document topfwpfcktjzpf rdwåLzefwD;NyD; Magic Wand udk toHk;cs jcif;jzifh pixel rsm;udk select vkyfum delete vkyf,lvkduf&onf/ xkdtcg rdrd image onf transparent pixel rsm;ESifhtwl toihf&SdoGm;vdrhfrnf/ Figure 14-13 Color transparent udk Photoshop toH;k csí vkyu f ikd yf kH








Image udzk iG í hf indexed color tqifrh &Sv d Qif indexed color



jzpfatmif ajymif;,lyg/ xdaYk emuf Export GIF 89a Export udk file menu wGif csa&G;vku d yf g/



 rdrv d t dk yfaom ta&mif a&G;cs,rf I twGuf eyedropper udk toH;k cs a&G;,lyg/ a&G;cs,rf jI yKpOf Shift cvkwu f kd ESyd x f m;Ny;D transparency twGuf multiple color rsm;tm; a&G;cs,yf g/ Transparency Index Color ESihf rdr, d x l m;aom ta&mifrsm;&So d nfh pixels rsm;onf click vkyv f u dk o f nfEiS hf tqifjh ynfo h mG ;onf/ rnfonfh image {&d,mtm; transparent vkyv f o dk nfukd nTejf yay;yg/ ¤if;udv k nf; a&G;cs,x f m;onfh yHpk t H wkid ;f jznfah y;ygvrd rhf nf/



276



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 In Macromedia Fireworks 3



Fireworks ü Optimize palette udk toHk;csí Figure 14-14 flattened graphic transparent wpfckudk vkyf,lEkdifonf/



wGif jrifawGY&onfhtwkdif;



Figure 14-14 Fireworks wGif flat graphic wpfcu k kd transparency xnfo h Gi;f yHk



f idk rf nfh graphic yHpk u H dzk Giyhf g/ Transparency drop 
 yxrqH;k vkyu down menu



rS Index Transparency udk a&G;í Optimize palette udk



toH;k jyKyg/



 "Set Transparency" eyedropper tool udk oHk;í rdrd xdk;azmufjrifvdak om ta&mifa&G; cs,rf u I kd &,lyg/



 tydak qmif; color transparent jyKvyk &f ef "Add to Transparency" eyedropper udo k ;kH yg/ tqdyk g transparent color ukd xk;d azmufrjrifap&ef xyfrH ajymif;,l&mwGif "Subtract from Transparency " eyedropper udkoHk;yg/



4 
 tm;vH;k Ny;D pD;oGm;aomtcg tqkyd g graphic tm; (File→ Export) tjyifoYkd qGx J w k , f yl g/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



277



 Avoid Halos



Transparent graphic wpfcu k Mkd unfv h u dk w f idk ;f uvem;EIwcf rf;rsm;wGif rnDrnm ta&mifzmG rI rsm; jrifawGY&wwfonf/ ¤if;udk halo [kac:qkd\/ odkYaomf ¤if;wdkYudk azsmufzsufypf&efrSm vG,fulygonf/ Web graphic tool udk toHk;csjcif;jzifhyif vkyfudkifEkdifonf/ Halo rsm;onf aliased edges ac: EIwfcrf;tm; udk,fpm;jyKrI txufESifh atmufcHrsm; vkaejcif;aMumifjh zpfonf/ Figure 14-15 wGif jrifawGY&onft h wkid ;f anti-aliased edge wpfc\ k transparent onf tEkpdwfjrifuGif;wGif ay:vGifaeaponf/ odkYtwGuf transparency \



tusKd;oufa&mufrIudk tjynfht0 r&&SdEkdifjzpf&onf/ Figure 14-15



\ EIwcf rf;om;rsm;wGif zGmvefí ta&mif rsm;jym;aerIonf halo rsm;yif jzpfonf/ Anti-aliased edge rsm;aMumifh ¤if;wkYd ay:ayguv f m&jcif; jzpf\/ atmufct H a&mifEiS hf tay:a&mif a&maxG;aeonf/ Transparent image



Hard edge rsm;wGi&f o dS nfh ta&miftaoG;rsm; tMum;wGirf l text ESihf image rsm;twGuf halo rsm; r&SEd idk af y/



Halo rsm; aysmufysufap&ef enf;vrf;wpfckrSm anti-aliased edge udk toHk;jyK&onf/ aliased image wdkif;onf hard edge wpfck&SdaomaMumifh jzpf\/ wpfcgwpf&H tpGef;tyJhav;



rsm;ESifh txpftxpfav;rsm;awmh awGU&wwfonf/ rnfodkYyifjzpfap layer vkyfxm;onfh Photoshop file twGufaomfvnf;aumif;? Fireworks file twGufaomfvnf;aumif; halo rsm;udk umuG,frIjyK&rnf jzpf\/ rdrd image rsm;wGif surround pixel vif;aom transparent layer rsm; jzpfaeaprnf/ rdrdonf Photoshop 5.5 odkYr[kwf Fireworks 3 ESifh vkyfudkifaeygu halo rsm;ukd um uG,f&ef taumif;qHk;enf;vrf;rSm Matte color rS ta&mifwlzdkY csdefnd§,ljcif;yif jzpfonf/ yHkpHudk Figure 14-16 wGif jrifawGYEdkifonf/ GIF file tm; transparency ESifhtwl export vky, f v l adk omtcg anti-aliased edge rsm;onf rdrd image wGif aemufct H a&mifEiS hf a&maESmoGm; apjyD; halo rsm; aysmufoGm;ygvdrhfrnf/ 278



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Figure 14-16 Halo rsm; tumtuG,jf yK&ef Matte feature tm;



toH;k jyKykH



f Photoshop 5.5 wGifFile menu rS "Save for Web" udk a&G;cs,í cs,yl g/ rdrd web page rS aemufct H a&mifukd nTe;f qdEk idk o f nf/



ta&mifaumuf,&l ef Matte udk



Result



ñTe;f qdak om Matte color ESihf anti-aliased edge rsm; a&maxG;aeonf/ Page ay:oYkd wifvu dk af omtcg tqkyd g qufpyfaeaom taMumif;t&mrsm; aysmufoGm;apygvdrhfrnf/ Fireworks 3 wGif Matte Option udk Optimize palette rS &Ekid o f nf/ Palette ay:wGif click vkyí f rdrad &G;cs,v f adk om



ta&mifukd aumuf,yl g/



a&G;xm;NyD; matte color



ESifhtwl jrifawGU&aom layer graphic



rdrd page ay:wiG f ay:vmaomtcg jrifawG&Y rnfh Transparent GIF



tu,fí rdrdonf Photoshop odkY JASC Paint Shop Pro ta[mif; version rsm;udk toH;k jyKaecJyh gu layer opfwpfcjk zifh jyKjyifvyk af qmif,&l rnf/ rdrd page \ aemufct H a&mifEiS hf jznfh,lum "stack" [lonfh layer wpfckudkatmufrS cHay;vkdufjcif; jzpf\/ Image onf flattened jzpfaeaomtcg anti-aliased edge rsm;onf Figure 14-17 wGif azmfjyxm;ouJhodkY oufqkdifonfh aemufcHta&mifESifh a&mvsuf jzpfoGm;ygvdrhfrnf/ xkdYaemuf expent vkyfpOf twGif; aemufcHta&mifudk transparent jzpfap&ef a&G;cs,fvkduf½Hkomjzpfonf/ þenf;jzifh halo jyóem&Sif;oGm;apygonf/ WEB DESIGN



vufawG o Y ifcef;pmrsm;



279



 Figure 14-17 rdrw d iG &f adS om tool ü Matte function r&Scd yhJ gu ½k;d &Si;f pGmjzifh layer opfwpfcu k kd zefw;D vdu k yf g/ Image aemufu, G w f iG f zefw;D ,l&rnf/ tqkyd g layer \ ta&mifonf rdrd web page \ aemufct H a&mif jzpfap&rnf/ GIF wpfcu k kd zefqif;&ef image udk udik w f , G &f mwGif antialiased edge rsm;onf aemufct H a&mifEiS hf a&moGm;yg vdrrfh nf/



Preventing Unwanted Transparency



tcsKUd aom tajctaersm;wGif rdrd image \ ywfvnftpGe;f uvem;rsm; &Sad eonfukd awGYae& wwfonf/ xdt k cg rdrt d aejzifh eyedropper tool wpfcu k kd toH;k cscv hJ Qif tqkyd g tajctaersm; aysmufoGm;ygvdrhfrnf/ Figure 14-18



tjzLa&mif wd;k vQK;d ayguyf pkH jH zifh jyKvyk &f ef eyedropper wpfcu k kd toH;k cscv Jh Qif rdrd image twGi;f rS tjzLa&miftm;vH;k onfvnf; transparent



jzpfoGm;vdrfhrnf/



tu,fí rdrdonf Photoshop 5.5 odkYr[kwf Fireworks 3 udk toHk;jyKcJhvQif tvm;wl jyóemrsKd;rawGY&ay/ taMumif;rSm Matte feature onf rdrdqdkvdkaom tjzLa&mifESifh tjcm; tjzLa&mifrsm;udk oD;jcm;aqmif&Gufay;EdkifaomaMumifh jzpf\/ xkdodkYaom tcGifhtvrf;rsKd;ukd ,cktcg vltrsm;pk toHk;jyKaeMuNyD jzpfonf/ rnfoYkd yifjzpfap orm;½d;k us tool rsm;udk ydrk kd OD;pm;ay; toH;k jyKaecJyh gvQif abmifuvem; ta&mifudk ajymif;,lonfh ½dk;½dk;enf;jzifhyif opaque color udk rGrf;rH&if; ajz&Sif;,lEkdifygonf/ image onf flattened jzifh xm;NyD;aemuf color swap zefwD;,lonfhoabm jzpfonf/ Figure 14-19 wGif jyxm;onfhtwkdif; ta&mifopfwpfck jznhfwif;,laomtcg ¤if;\ antialiased edge wpfckckudk ra&G;cs,frd&ef owdjyK&rnf/ 280



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Figure 14-19 Photoshop wGif rvdv k m;tyfonfh transparency udk umuG,jf cif;








Layered image wpfcjk zifh



pcJv h Qif ¤if;udk save vkyíf layer rsm;udk flattened vky, f v l u dk yf g/ atmufq;kH layer onf halo udk umuG,af &;twGuf web page &Sd aemufcH ta&mifjzifh jznhw f if;Ny;D jzpfaeap&ygvrd rhf nf/







rdrd transparent jzpfapvkad om image \ tjyifbufay:wiG f ta&mif a&G;cs,&f ef Magic Wand udo k ;kH yg/




 Image tm; Indexed Color odYk ajymif;,lyg/ Ny;D vQif GIF 89 a jzihf export vkyyf g/ Export dialog box wGif xd;k azmuf jrifvadk omta&mifukd a&G;,lyg/



 rdrd image wGif &Sdraeaomta&mifudk aocsmpGm a&G;cs,Nf y;D rlva&G;cs,Nf y;D aomae&mwGif jznf, h yl g/ (yHw k Gif t0ga&mifawmufawmufjzifh a&G;cs,f,lxm;onf/) rS w f p k Magic Wand &Sd tolerance udk "1" jzifh csed n f x §d m;&ef



ta&;BuD;onf/ xdkYaemuf anti-aliased udv k nf; ydwx f m;&rnf/ rdrd image xJrt S a&mifudk ra&G;cs,rf &d ef owdjyKyg/



,ckawmh soft edge rsm;onf anti-aliased taejzifh tjzLodaYk jymif;oGm;onfh rlvyHyk g image tjzLa&mifrS tvkv d kd 


vufawG o Y ifcef;pmrsm;



281



 Optimizing GIFs



wGif tjrJwrf; em;vnfoabmayguf&onfh ]rdrd\ file rsm;udk i,fEkdiforQ i,fatmif jyKvkyfxm;yg/} [laom Oya'oudk rSwfrdrnfxifygonf/ txl;ojzifh *&yfzpfzdkif rsm;udk txl;*½kpu dk u f m xkOd ya'oESit hf nD aqmif&u G &f rnf jzpf\/ okYd twGuf tusK;d qufrsm; ydkí &Ekdifap&ef GIFs rsm;udk optimize vkyf,l&ayvdrfhrnf/ Optimize vkyf,lonfqkdonfrSm twwfEkdifqHk;tqifhtxd ao;i,fatmif vkyf,lEkdifrIudk nTef;qkdygonf/ GIF file rsm;udk Optimizing jyKvkyf,laomtcg wax&mwnf;jzpfaom pixel color rsm;\ twef;rsm;udk cyfpdyfpdyfvkyf,ljcif;jzifh zdodyfrIudk jyKvkyfonf[k rSwf,lxm;&onf/ tqkyd gvkyef nf;vky[ f eftrsm;pk\ aemufq;kH &v'fonf yH&k yd w f iG f Solid Color {&d,mydí k zefw;D ay;jcif;yif jzpfonf/ tu,fí rdro d nf Photoshop 5.5 okYdr[kwf ¤if;txuf? okdYr[kwf FireWorks udk toHk; csaeygu rdrcd sden f x d§ m;rI\ xda&mufyu kH kd csufcsif;ppfaq;Munh½f EI idk jf cif;? wpfzufEiS w hf pfzuf? wpfae&mESihf wpfae&myif EdiI ;f ,SOMf unhEf idk jf cif;uho J Ydkaom erlem zefw;D rItykid ;f vkyaf qmifay;Ekid f onfh tool tajrmuftjrm;udk awGU&rnfjzpf\/ Web design



Figure 14-20 Photoshop ESihf Fireworks uJo h aYdk om Web tool topfrsm;onf rdrzd efw;D ,laom



yk&H yd t f ajctaet&yf&yfudk MuKd wifo&d &dS ef ykpH t H aetxm;trsK;d rsK;d jzifh zGi, fh Ml unf½h cI Giahf y;onf/ Photoshop



Fireworks



282



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Reduce the Number of Colors



Bit Depth



GIFs wGif 256 colors txdom yg0ifxm;onfqadk omf



jim;vnf; ,ckvkyfief;wGif rnfolrQ ta&mifrnfrQ&Sd rnf[k owfrSwfxm;jcif;r&Sday/ okdYtwGuf rdrdwkdY taejzifh yHk&dyftwGif;rS ta&mifta&twGufudk avQmh oHk;Ekdifygonf/ (Oyrmtm;jzifh ¤if;\ bit-depth udk avQmhcs&rnf/) Figure 14-21 wGif jrifawGU&ouhJokdY file t&G,ftpm;udk avQmhcsoGm;í&onf/ Bit depth edrfhoGm;aom file rsm;wGif yg0ifonfh data udk avsmh enf;oGm;apaomoabm jzpfonf/ tjcm; enf;wpfck rSm ta&mifudkavQmhí flat color {&d,mudk ydk,ljcif; jzpfonf/ Pixel color rsm;wGif common boundry ac: yHrk sOf; owfrw S , f v l u dk o f nfo h abm[k qk&d rnf/ Flat color ydk&avav file ao;i,fatmif zdodyfrI vkyfief;twGuf tusKd;&Sdavav[k rSwf,lEkdifonf/ GIF format jzpfatmif save vkyjf cif;? okYd r[kwf export vkyfjcif;wkdYtwGuf *&yfzpfy½kd*&rf tm;vHk;



qkdonfrSm *&yfzpf wpfckwGif yg0ifaom ta&mif ta& twGuf tjrifq h ;kH udk nTe;f qkyd gonf/ atmufygZ,m;wGif ta&mifta& twGuf ukd,fpm;jyK bit-depth rsm; udk jrifawGUEkdifonf/ Bit depth



1-bit 2-bit 3-bit 4-bit 5-bit 6-bit 7-bit 8-bit 16-bit 24-bit



2 colors 4 colors 8 colors 16 colors 32 colors 64 colors 128 colors 256 colors 65,536 colors 16,777,216 colors



(omreftm;jzifh oef;udef;*Pef;jzifh jyavh&Sdonf/)



avmufeD;eD; aqmif&Gufay;Ekdifjcif;aMumifh ta&mif Web tool topf r sm;onf (okYdr[kwf bit-depth) ta&twGuf tao;pdwf azmfjy ta&mif ta&twGuf a&G;cs,fEkdif&ef ay;ygvdrhfrnf/ pD p Of x m;ay;wwf o nf / Photovkyfief;wpfckwGif rdrdtaejzifh ta&mifavQmhcsrI shop version ta[mif;rsm;uhJokdY udk tvGet f rif;&Scd v Jh Qif yH&k yd o f nf jym;oGm;wwfonf/ *&yfzpfqkdif&m tool tcsKdUonf popFigure 14-21 wGif jyxm;onht f wkid ;f 256 colors rS up menu rSwpfqifh oG,f0kdufaom enf;jzifh ta&mifta&twGufudk a&G; Figure 14-21 cs,f,lEkdifygonf/



yk&H yd w f pfcrk S ta&mifavQmch sraI Mumifh zkid t f &G,t f pm; ao;i,fvmykH WEB DESIGN



vufawG o Y ifcef;pmrsm;



283



 8 colors okdY avQmhcsvkdufonfhtcg oufwefYa&mifrsm; aysmufoGm;awmh\/ avQmhcsvdkufonfh tqifhtvdkuf wpfyHkESifhwpfyHk uGmjcm;csuf &Sdvmonf/ 5 bit okYdr[kwf 32 pixel colors wGif toifah vsmq f ;kH jzpfaMumif; prf;oyfvyk u f idk Mf unho f nfh tcg awGUvmygvdrhfrnf/ (omreftm;jzifh xko d Ydk ta&mifavQmch s&mwGif taumif;qH;k ? toifah vsmf qHk; tajctaexuf tenf;i,fjr§ifhay;xm;&onf/) avQmhcsxm;rIxuf ravQmhrDyHk&dyfrSm ykdí om;em;aernfjzpfonf/ t"du&nf&G,fcsufrSm ta&mifudk enf;EkdiforQenf;apNyD; file t&G,f tpm;udk ao;EkdiforQao;&ef zefwD;jcif;ukdom OD;wnfvkyfudkif&ef&Sdonf/ wu,fwrf; save vkyfrnfhtqifhwGif flat color rsm;ae&efom ta&;BuD;onf/ tMurf; zsif;tm;jzifh 8 pixel colors txd avQmhcsvQif tqifajyaMumif; rSwo f m;xm;Ekid o f nf/ Reduce Dithering



Dithering qkdonfrSm Palette color rsm;udk r&Ekdifaomta&mifrsm;udk rjzpfrae pkpnf;aygif; pyfrIjyKvkyf zefwD;,lvkdufaomtcg rdrdyHk&dyfwGif tpuftajymuf yHkoP²mefrsm; ay:vmjcif;udk ac:onf/ yHk&dyfwpfcktwGif;&Sd ta&mifrsm;udk Specific palette wpfcktjzpf avQmhcsvkdufaom tcg ¤if;ta&mifrsm;onf Palette twGif;ü dithering jzifh teD;pyfqHk;taetxm; jzpfvm onf/ Figure 14-22



Dithering yrmPudk avQmch sjcif; okrYd [kwf turning off onf file



t&G,ftpm;ukd avsmhoGm;apygonf/ erlemyH&k yd Ef pS cf u k kd ,SOMf unhjf cif;tm;jzifh dithering &So d nfyh EkH iS hf r&So d nfyh u kH kd awGUjrifEkdifonf/



"mwfykH yH&k yd rf sm;twGi;f wGif dithering onf odyt f a&;BuD;aomjyóem r[kwaf y/ tusKd; &v'fyif &SEd idk af pygonf/ rnfoYdk yifjzpfap flat {&d,mrsm;twGi;f &Sd dithering onf omreftm; jzifh ta&mifysHUvGifhjcif;? rvdkvm;tyfonfh jrifuGif;rsKd; jzpfvmapjcif;wkdYudk awGU&wwfonf/ tjriftm½Hk tvStyobm0rsKd;udk ysufjy,fapjcif;aMumifh dithering udk odyfvkdvkdvm;vm; 284



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 &SMd urnfr[kwaf y/ taMumif;rSm acsmarGUajyjypfaeaom ta&mif{&d,mrsm;wGif tpuftajymuf rsm;u pdwt f aESmift h ,Sujf zpfaponfh oabm oufa&mufaejcif;aMumifh jzpfonf/ qkv d o dk nfrmS f m;pOf tajctaewGif rodrom&Sdvmaomfvnf; tpuftajymufrsm; rsm;aejcif;onf GIF zdEydS x yHkBuD;BuD; zGifhvkdufonfhtcg ododomom ay:xGufvmygvdrfhrnf/ ydkvQHaeaom byte rsm;udk GIF wpfckwGif jcpfxkwf,lEkdirf nfh enf;vrf;wpfcrk mS dithering yrmPudk uefYowfay;&efyif jzpfonf/ wpfzef GIF-creation tool rsm; tm;vH;k avmufeD;eD; onf dithering zGifhxm;rI? ydwfxm;rIwkdY ajymif;vJEkdifcGifh &Sdonf/ Sliding scale wpfckay:wGif dithering yrmP ppfaq;csdefwG,frIudk Photoshop wGifjzpfap? Fireworks wGifjzpfap xnhf ay;xm;\/ odkYtwGuf yHk&dyftwGif; dither setting \ tajctaeudk BudKwifjrifawGUEkid yf gonf/ tqkyd g jrifawGU&csuftay: rdrdqHk;jzwfvkdonfh tajctaejzifh qHk;jzwf,lEkdifaMumif; Figure 14-22 wGif jrifawGUEkdifonf/ Lossy GIFs



apmapmykdif;u aqG;aEG;xm;&SdNyD;jzpfonfhtwkdif; GIFs jzifh zdodyfrIvkyfief;onf "lossless" [k qkdnTef;xm;chJonf/ qkdvkdonfrSm yHk&dyfrsm;twGif;&Sd pixel wkdif;onf zdESdyfpOfumvtwGif; raysmufrysuf rqHk;½HI;EkdifaMumif;yifjzpfonf/ okdY&mwGif rdrdonf Photoshop 5.5 (okdYr[kwf txuf) ESifh Fireworks wGif&Sdaom "Lossy" okdYr[kwf "Loss" setting udk toHk;csNyD; rvdk vm;aom pixel tcsKdUudk xkwfypfívnf; &Ekdifygao;onf/ wpfzef xkdokdYxkwfy,fxm;onfh stray pixel rsm;onf tjywftawmuf r&Sdaom pixel color wef;rsm;\ ta&twGufudk tjrifhqHk;tqifh trSwftom;rsm; tm;vHk;jzpfaeapjyefonf/ GIF zdodyfrIwGif cGifhjyKxm;aom vkyfcsufwpfckjzpf\/ yHk&dyftay: rlwnfí yHk&dyft&nftaoG; ododomom rusqif;Ekdifaprnfh Lossy okdYr[kwf Loss value wpfckudk 5 &mckdifEIef;rS 30 &mckdifEIef;txd toHk;csEkdifonf/ Continuous tone art tEkynmta&miftaoG; qufvuf&&SE d idk af &;vkyif ef;pOftwGuf taumif; qH;k enf;vrf;jzpfonf/ (JPEG jzifh continuous tone tm;vH;k udk odr;f qnf;xm;apygvdrrhf nf) rdrt d aejzifh "mwfykH content ESifh flat wdkY aygif;pyfxm;onfh yHk&dyfwpfckudkom BudK;pm;vkyfaqmif &efomjzpf\/ Figure 14-23 Lossy (Photoshop) odkYr[kwf Loss (Fireworks) value wpfcu k kd toH;k csro I nf Pixel tcsKu Ud kd z,fxw k yf pfum file t&G,t f pm;udk ao;oGm;aponf/ 64 colors yg0ifaomyHk ESihf Diffusion dither



toH;k csxm;aom yHEk pS cf v k k;H udk yHw k Gif jyoay;xm;onf/ WEB DESIGN



vufawG o Y ifcef;pmrsm;



285



 Design For Compression



rdrdwkdYonf rdrd\ GIFs rsm;\ t&G,ftpm; avsmhusapa&;twGuf &Sdaeaom tool rsm;jzifh csden f jd§ yKjyifru I ekd nf;vrf;trsK;d rsK;d jzifh aqG;aEG;chMJ uonf/ okYd&mwGif xko d Ydkaom tajctae tqifh ra&mufrDrSmyif zdESdyfrI'DZkdif;jzifhvnf; vkyfukdifEkdifygao;onf/ Keep It Flat



Web designer wpfOD;taejzifh tawmftwifh tqifh&Sdaom taetxm;rsKd;ESifh udkufnDaprnfh illustration style udk ajymif;xm;Ekdifonf/ vufiif;tajctaet& gradient blend wpfckudk toH;k jyK,lonf/ Flat color wpfcu k kd a&G;cs,, f v l u dk o f nf/ udpaö wmfawmfrsm;rsm;wGif þenf;jzifh tqifajyoGm;wwfonf/ Figure 14-24 jyuGuf wGif jrifawGU&onfhtwkdif; gradient blend jzifh wpfrsKd;wpfa&mifudk avQmhcsí wpfzHk? flat color rsm;jzifhwpfoG,f &&Sdayvdrfhrnf/ Figure 14-24 GIFCompression Scheme \ tusK;d qufudk &,laomenf;ukd tok;H csum 'DZidk ;f vkyjf cif;jzifh



zkid t f &G,t f pm;trsK;d rsK;d ukd xm;Ekid o f nf/



Color Value ukd 8 txd



Gradient blends ESifh 256 colors &Sad eaom GIF ykH (zkid t f &G,t f pm; 19 K



avQmch sjy;D pOf jrifawG &Y aom GIF ykH (zkid t f &G,t f pm; 7.6 K jzpfonf)



jzpfonf)



wlnaD om yk&H yd fwpfcu k ydk if enf; tpm; flat color ,lxm;í &&Sx d m;aom GIF ykH (zkid t f &G,t f pm; 3.2 K jzpfonf) blends



Play with Horizontal Stripes



Web graphic rsm;twGuf 'DZkdif;vkyf,laomtcg horizontal band ta&mifrsm; tay:wGif compression vky& f efuo kd m pdwu f ;l xm;&rnf/ cGmcRwrf w I pfcck k vkyaf wmhrnfqydk gu a'gifvu dk f



xuf tvsm;vkduf cGmcRwfrIu ydkrkdtqifajyonf/ Figure 14-25 GIFs 'DZidk ;f vkyif ef;wGif vertical band rsm;ukd compress vky, f jl cif;xuf horizontal band rsm;ukd compress



vkyf,ljcif;u ykdrdkxda&mufrI&Sdonf/



286



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Web design vkyfief;wGif trsm;qHk;enf;vrf;wpfckrSm "mwfyHk image wpfckay:okdY 1-pixel yrmPtus,f&Sd horizontal line rsm;udk cs,ljcif;yifjzpfonf/ yHk&dyfudk tvsm;vkduf vdkif;rsm; jzwfxm;onfhtaetxm;rsKd;jzifh jyoay;onf/ odkY&mwGif GIF compression onf image area \ xl;jcm;aom tpdwt f ydik ;f rsm;ay:wGif vSnjfh zm;vkyu f ikd f ,lEidk o f nf jzpfaMumif; Figure 14-26 wGif jrifawGUEdkifonf/ Figure 14-26 Photographic Image wpfct k ay: 1 pixel twGuf vkid ;f rsm;



jzwfxm;onfh ykHpH xnfhoGif;xm;jcif;onf zkdift&G,ftpm;ukd ao;,ljcif;twGuf 'DZkdif;enf;vrf;wpfrsKd; jzpfonf/ Designing with the Web palette



Web twGuf GIFs 'DZi dk ;f vkyjf cif;ESiyhf wfoufí tjcm;u@wpfcrk S rnfonfah e&mwGif rnfoYdk Web palette udk toH;k cs,r l nfqo dk nhu f @yif jzpfonf/ Web palette onf yDprD sm; okYd r[kwf ruf uGefysLwmrsm;ay:wGif dither rjzpfapaom 216 color wpfpHk[k t"dyÜm,f zGifhqkdEdkifonf/ ¤if;onf t"du browser rsm;tm;vH;k wGif wnfaqmufxm;&S\ d / 8-bit armfew D m (256 colors om display vkyfEkdifonfhacwfu armfeDwm) wpfckudk toHk;jyKaeonhf uGefysLwmwpfvHk; ay:wGif browser wpfcu k kd vnfywfaeapaomtcg page ay:wGif ta&mifrsm; jyKjyifzefw;D &ef Web Palette qdo k nfrmS rnfonhyf pkH eH nf;



Web palette twGif;&Sd colors rsm;onf toifha&G;cs,fxm;jyD;om; r[kwfay/ teDa&mif? tpdrf;a&mifESifh tjymazsmhawmhawmhwYdkukd rQrQww aygif;pyf jyoay;xm;um 20 &mckid Ef eI ;f pD tqifhvkduf jr§ifhwifay;xm;NyD; &&Sdxm;onfh tajctaersm; jzpfaom aMumifh Munhf½I&ef jyoay;xm;jcif;om jzpfonf/ Web color rsm;onf light-based jzpfojzifh xkdodkY yuwd jrifawGU&onfh tae txm;twkdif; yHkxkwf,lonfhtcg xGufrvmEkdifay/ xkdtaMumif;ESifh ywfoufí þ oifcef;pmrsm;wGif tao;pdwf aqG;aEG;vdrfhrnf r[kwfay/ Web palette twGif;rS erlemtm;vHk;udk Munhf½I&ef Photoshop Swatches palette twGif; ¤if;wkdYudk wif,l&onf (tajctaeudk Figure 14-27 wGif jrifawGUEkdif onf/) okdYr[kwf www.learningwebdesign.com wGif web palette chart udk Munhf½Ií&Edkifygonf/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



287



 Figure 14-27



þ GIFs rsm;onf non-web-safe f m;onf/ colors rsm;ESihf 'DZikd ;f vkyx odt Yk wGuf 8-bit armfew D mrsm;ay: wGif dithering rsm; &Sad e\/



24-bit armfew D mwpfck ay:wiG f solid color rsm;onf



wdwu d sus &Sad eí acsmrGwaf jyjypfaeonf/



8-bit armfew D mwpfcak y:wiG f color rsm;onf web palette rS colors rsm; dithering vkyjf cif;jzifh teD;pyfq;kH color om jzpfae&onf/



tu,fí flat areas rsm;onf web-safe f l xm;chv J Qif "mwfyt kH ae color rsm;ESihf jznh, txm;onf tpuftajymufrsm;ESihf &Sad evdrrhf nf/ okaYd omf flat color rsm;rSmrl flat taetxm;jzifo h m &Sad eonf/



internal web palette rsKd;udk nTef;qdkvdkonf/ yHk&dyfrsm;twGif;rS color rsm;onf web palette twGif;rS color rsm;udk jyefvnf ae&mcsxm;rIyifjzpfonf/ Color rsm;udk palette ao;ao;av;ay:okdY shifting ESifh dithering vkyfonfh tcg rnfokdY jzpfvmonfudk erlemawmfawmfrsm;rsm; jrifchJMuNyD;jzpfonf/ odkY&mwGif browser rS trSew f u,f toH;k jyKrnfh ta&miftwdtus od&&dS ef tcGit hf vrf;awmh tenf;qH;k &So d iho f nf/ yxrae&mwGif tqkyd g 'web-safe' color rsm;udk rdrw d Ydk toH;k jyKchv J Qif 8-bit armfew D mrsm;ay:wGif &Sad ernfh BudKwifwu G q f í r&Ekid af om tjcif;t&mrsm;udk tumtuG,jf yKEkid o f nf/ rnfoYdkyifjzpf ap rdrdwkdY\ *&yfzpfrsm;onf platform wpfckrSwpfckokdY tajymif;tul;wGifjzpfap? toHk;jyKol wpfOD;rS wpfOD;odkY vufurf;,lonfhtcgwGifjzpfap vdkufavsmnDaxG jzpfaeapygvdrfhrnf/ tcef; 12 u Web ay:rSta&mifrsm;taMumif;wGif HTML document twGif; rnfokdY toHk;cs,lrnf? web palette udk rnfokdYpDrHvkyfaqmifonf ponfwkdYudk vufawGUusus &Sif;jy chJNyD;jzpfonf/ odkY&mwGif GIF graphic rsm; zefwD;,ljcif;? 'DZdkif;jyKvkyfjcif;wkdYwGifvnf; Web palette u@onf qufvuf yg0ifaernfjzpf\/ Flat color oH;k image rsm;wGif dithering r&Sad p&ef toH;k 0ifaeqJ[k qk&d rnf/ Starting with Web-safe Colors



Image rsm;udk yHkMurf;rSzefwD;,lonfhtcg rdrd'DZdkif;wGif web-safe color rsm; toHk;csjcif;jzifh



jynhf0aom tcGifhtvrf;udk &&Sdaponf/ tusKd;qufrSm rdrd\*&yfzpfrsm;udk toHk;jyKoltm;vHk; wGif wlnDpGm jrifawGYEkdifvdrfhrnfjzpf\/ t"du tm;enf;csufrSm tqkdyg color a&G;cs,frIwGif 288



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 udk xnho f iG ;f rpOf;pm;vko d nft h cg Web palette twGufxnhfoGif;rpOf;pm;vkdonfhudpt ö wGuf om"utcsKdU &Sdaeygonf/ Web Palette



8-bit armfew D mrsm;wGif rnfo&Ydk rdS nfukd xnfo h iG ;f rpOf;pm;vQif



onf 8-bit armfeDwmrsm;twGufom jyKvkyfxm;aMumif; azmfjychJonfudk rSwfrdaeygvdrfhOD;rnf/ 16-bit ESifh 24-bit armfeDwmrsm;taejzifh rnfonhf image ESifhrqkd wdusjywfom;pGm cif;usif;jyoay;Ekid o f nfqo dk nft h csufuv kd nf; arhxm;í r&ay/ odYk yg í rdrd site \wifjycsufrsm;rSm Low-end system ESihf rywfouf[, k q l xm;ygu ¤if;udk xnhfoGif;pOf;pm;&ef rvkdawmhay/ okdYyifjzpfjim;vnf; 'DZkdif;oabmt& pdwf0ifpm;rI&Sdygu "Lowest common denominator" tay: ½Ijrifynwfvy dk gu oHk;oyf&efom xnhfay;xm;jcif;jzpfonf/ rdrd client rsm;onf rdrdwkdY oufqkdif&m site rsm;ay:wGif t&nftaoG; udkufnDrIudk y"mejyKí ajymqkdEkdifaprnfhoabmyif jzpf\/ Web palette



rdrd image onf "mwfyt kH ajccHtqihf jzpfaevQif yxrOD;pGm rdrt d aejzifh "mwfyo kH abmobm0 image wpfct k jzpf pxm;chrJ u d rdrt d aejzifh ¤if;udk JPEG format wGif save vkyfvdrfhrnf[k ajymqkday;ygvdrfhrnf/ okdYaomfrdrdu GIF taejzifhom save vkyf,lrnf[k ajymvkduf&rnfhtaMumif;rSm ta&mifrsm; avQmhcsvkdaom qE´&Sdí ditherthing tqifhajymif;,lvdkjcif;aMumifh jzpfonf/ "mwfyHk image rsm;wGif dithering jzihf jyKjyif,lvkdonfh oabmyif/ xkdYaMumifh web palette udk toH;k rcsv[ dk rk w S cf suaf y;vku d &f ma&mufomG ;\/ ajymif;vJzefwD;rI vkyfief;pOf wGif adaptive palette wpfcu k kd a&G;cs,v f u dk jf cif;onf taumif;qH;k a&G;cs,frI jzpf\/ rdr\ d image onf JPEG format jzpfaechv J Qif Web palette onf JPEG image rsm;twGuf toH;k jyK&efroifah vsmfay/ JPEG wkYdrnfonf palette rsm;udk toH;k csí color ppfaq;rIudk rjyKaomaMumifhjzpf\/ ydkí ta&;BuD;onfrSm rlv image wGif web-safe color rsm;twGuf flat area rsm; r&Sv d Qif JPEG compression vkyif ef;pOfü taESmift h ,Sujf zpfaponf/ GIF udpt ö wGuo f m Web-palette jzifh 'DZdkif;vky, f l Muonf/ uefYowfrI&Sdaejcif;yifjzpfonf/ 216 rsKd;rS a&G;cs,f,l&½HkrQru ta&mifzrf;,lrIEIef;xm;wGif vnf; pdwMf udKufr&Edik af y/ (Web palette wkYd rnfonf *Pef;ocFsmoabmt& aqmif&u G af y; aewwfonf/ tEkynmoabm rygay/) WEB DESIGN



vufawG o Y ifcef;pmrsm;



289



 Swatche palette wpfckwGif web palette \ &Edkifaom color rsm;onf tawmf tajym& cufvSonf/ uHtm;avsmfpGm web graphic rsm;twGuf awmif;qdkrIESifhtwl web palette wGif *&yfzpfvkyfief; toHk;csy½kd*&rftrsm;pkwGif yg0ifxm;&Sday;xm;chJ\/ Adobe Photoshop (5.0 ESifh txuf) Macromedia Fireworks (1.0 ESifh txuf) JASC Paint Shop Pro (5 ESifh txuf) Adobe Illustrator (7.0 ESifh txuf) Corel (,cifu Meta Creation ) Painter (6 ESifhtxuf) Macromedia Freehand (7.0 ESifh txuf) Macromedia Director (5.0 ESifh txuf) Macintosh System Color Picker OS8 ponfwkdYwGif uefYowfxm;csufr&Sday/ Web palette udk trnfa0g[m&trsKd;rsKd;jzifh awGUjrifEdkifygvdrfhrnf/ Netscape palette, Web 216, Browser-safe palette, Non-dithering palette, 6 x 6 x 6 Cube ponfwkdY jzpfonf/ Photoshop ESifh tjcm; *&yfzpf tool rsm;wGif CLUTs [kac:aom file rsm;wGif palette udk save vkyfxm;wwfonf/ CLUTs qkdonfrSm Color Look-Up Tables \ twkdaumuf a0g[m&jzpfonf/ Fireworks uho J Ykd aom tool tcsKUd wGif CLUT file jzpfvmap&ef vky, f o l nfh vkyfief; tqifhrsKd; oihfavsmfovkd xm;ay;ygonf/ Photoshop wGif rnfokdY vkyfudkifonfudk Figure 14-28 wGif awGUjrifEkdifonf/ Applying the Web Palette



Web-safe colors toHk;csxm;onfh rdrd image jzpfaMumif; tjcm;enf;vrf;wpfckrSm RGB rS indexed color okdYajymif;,l&onfhvkyfief;pOfwGif Web palette ukd toHk;cs,l&efyifjzpfonf/ Tip Photoshop rS Browser Dither Preview udk toHk;csí 8-bit qkdif&m



tajctaewGif yHk&dyfudk jrifawGUEkdif yHkudk ½IjrifEkdif&ef yHkaqmifay;xm; onf/ Optimization ESifh ywfoufí pOf;pm;qHk;jzwf&mwGif taxmuftul jzpfaponf/



290



WEB DESIGN



vufawG o Y ifcef;pmrsm;



  ,cktcg Web Safe



Figure 14-28 Photoshop



wGif



Web palette



udk wif,jl cif;



Color udk a&G;Ekid yf gNy/D þae&mwGif eye dropper tool udk oH;k í rdrd image tay:



toHk;cs&rnfjzpf\/








udk zGiMhf unhyf g/ ¤if;rS nmbufaxmifhtay:em;wGif pop-up menu udkzGifhum k kd ae&mowfrw S &f ef  Color Palette wpfcu 'Load Swatches' udk ay;ygvrd rhf nf/ Photoshop wGif →Goodies → a&G;ívnf;aumif;? "Replace Color Swatches (okrYd [kwf Color Palettes) Swatches" udak &G;í udo k Gm;ívnf;aumif;? okrYd [kwf Web Hues udk vnf;aumif; zGifh,lEkdio f nf/ a&G;ívnf;aumif;? Photoshop wGif Web Load Swatches onf k nf;aumif; Web Safe Colors udk spectrum udv rdrv d uf&dS swatche tm; vnf;aumif; a&G;&ygrnf/ jznhpf Gu&f efjzpfNy;D Replace Swatches onf rdrd swatche tm; Web-Palette ESihf vJv, S , f &l ef jzpf\/ Swatches palette



rnfonfh tool wGifrqkd GIF wpfcktwGif; rdrd image udk jyKvkyf&ef a&G;cs,f,lvkdufonfESifh? okYdr[kwf indexed color udk ajymif;,lvu dk o f nfEiS hf image twGuf palette wpfcu k kd a&G;cs,&f ef ar;vmygvdrfhrnf/ t½kd;t&Sif;qHk;ESifh qef;jym;aomenf;vrf;wpfckrSm palette twGuf ar;vmonfhtcg "web" [lonfh palette option udk a&G;cs,f,l&efjzpfonf/ GIF azmfxkwfrItwGuf color table onf Figure 14-29 wGif jrifawGU&onfhtwkdif; web palette rS oD;jcm; color rsm; ygaeygvdrfhrnf/ topfxGufvmaom web graphic tool rsm;onf ajymif;vJrIvkyfief;pOfwGif Web-safe color rsm; toHk;cs&efESifh odrf;qnf;&eftwGuf qef;opfaomenf;rsm; ydkrdkygvmwwfonf/ tqkyd genf;rsm;onf txl;ojzifh a&mifjynh"f mwfykH yHk&dyfrsm; flat ESifh web-safe color rsm; aygif;pyfyg0ifaeaom image rsKd;rsm;twGuf txl;toHk;0ifapygonf/ WEB DESIGN



vufawG o Y ifcef;pmrsm;



291



 Figure 14-29 Indexed color udk ajymif;a&TU jcif;twGuf vkyaf qmifaepOf umvtwGi;f web palette a&G;cs,&f ef tool awmfawmfrsm;rsm;u cGijhf yKay; onf/ Image twGuf Color Table f Qif web (Photoshop yHpk H) ukd ½IMunhv palette colors rsm; jrif&vdrrhf nf/



Fireworks 3 wGif "Web Adaptive" palette ESifhtwl odrf;qnf;jcif;twGuf option rsm;ay;xm;onf/ xkdYaMumifh palette onf image twGuf customized jzpfaeapvdrfhrnf/ okdYaomf web palette color rsm;okdY value ESifhwuG jyay;xm;onfh yHkpHrsKd;&Sdaom rnfonhf color rqkd web palette color rsm;ESifh teD;pyfqHk; qkyfudkifxm;ygvdrfhrnf/ Figure 14-30 Fireworks 3 rS Web Adaptive palette



cGifhjyKxm;yHk



Color Table Palette wGif image twGuf color table udk ½IMunhEf idk o f nf/



292



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Photoshop wGif adaptive palette (Adaptive, Perceptual, or Selective) wpfckudk a&G;cs,f,ljcif;jzifhteD;pyfqHk; web-safe equivalent rsm;okdY color ajrmufjrm;pGm ul;ajymif;rI jyKrnfudk xdef;csKyf,lEkdifonf/ Figure 14-31 wGif jrifawGU&onfhtwkdif; "Web Snap" slider tool udk oH;k Eki do f nf/ Slider tjrifo h Ykd wk;d jr§i, hf al vav Color rsm;rsm; ajymif;oGm;avav jzpfonf/ ¤if;rS image web-safe \ area rsm; csxm;pOf Custom color table wpfcu k kd wnfaqmuf&ef photoshop wGif jyKxm;NyD;jzpfonf/ Figure 14-31 Web-safe equivalent odYk color snap rnfrQ twdtus xde;f csKy, f rl nfukd Photoshop \ Web Snap Slider udo k ;kH yg/ Color Table wGif dot rsm;ESihf swatche wko Yd nf web-safe jzpfonf/ Preview Window av;wGif rdrd setting



taetxm;udk csucf si;f qko d vdk awGEU ikd o f nf/



Web Palette Strategies for Graphics



Web 'DZi dk ;f pwif vkyaf qmifMuolrsm;onf tawGUtMuHK r&Sad o;rD rdrv d yk o f rQ *&yfzpfwidk ;f wGif web palette ukd rSm;,Gif;pGm toHk;csaeMuavh&Sdonf/ wu,fwrf;rSmrl Web palette onf images yHp k t H rsKd;tpm;wkid ;f twGuf r[kwaf y/ Web palette onf *&yfzpfrsm;\ t&nftaoG;



udk avsmhusoGm;apEkid o f nfrmS trSeyf ifjzpfaMumif;udo k m odxm;&efjzpf\/ okYd twGuf ,cktcg web palette udk wkduf½kduftoHk;rcs&aomaMumifh ,cktcg web graphics tool rsm;jzifh vkdtyf ovdk toHk;jyKEkdif&eftvkdYiSm xl;jcm;qef;opfaom Option rsm;jzifh yhHydk;ay;xm;avh&Sdonf/



rnfonfhtcgrQ wdwdusus ckdifckdifrmrm Oya'otjzpf jy|mef;rIrjyKMuawmhbJ image wkid ;f tay: vkt d yfcsuEf iS t hf nD aqmif&u G v f u kd aqmif&u G af pEkid &f ef rzGirhf ydwf vkyaf y;xm;vku d f Muonf/ tqkdygudpt ö wGuf tajccHvrf;nTeftjzpf atmufygtwkdif; qufvuf avhvm,lEkdif ygonf/ WEB DESIGN



vufawG o Y ifcef;pmrsm;



293



 Flat graphical images



vkyfief;pOfrsm;wGif tacsmudkifaepOf dithering rS flat color area tjzpf xm;,lvkduf&onf/ STRATEGY- image 'DZkdif;vkyfaeaomtcg ½kd;½kd; Web palette option udk toHk;rcsay/ taMumif;rSm anti-aliasing wGif color \ tqift h wef;tvdu k f aysmufomG ;rSm pd;k &draf om aMumifh jzpfonf/ tu,fí &Ekdifrnfqkdygu "Web Snap" wpfck yg&Sdonfh Adaptive palette wpfcu k kd a&G;cs,fvu dk jf cif;onf taumif;qH;k jzpfonf/ Photoshop wGif "WebSnap" \ yrmPudk Slider Scale ESifh csdefwG,fonf/ Fireworks wGifrl "Web Adaptive" palette udk toHk;csonf/ ¤if;onf rdrd\ flat area rsm;tay: web color udk xdef;odrf;ay;ygvdrfhrnf/ odkY&mwGif anti-aliasing twGif;&Sd color tcsKdUudk qufvuf wnf&SdaecGifh jyKay;xm;onf/ GOAL-



anti-aliased



Photographic images



toHk;jyKoltrsm;qHk;taetxm;twGuf &Sif;vif;jywfom;rI? color ckdifjrJrIudk xdef; odrf;xm;&rnf/ STRATEGY- yxrOD;pGm "mwfyHk image vHk;vHk;jzpfaevQif JPEG format jzifh save vkyf&ef pOf;pm;&rnf/ okdYr[kwfvQif GIF format odkY image udk ajymif;,lpOf Adaptive palette (Photoshop 5.5 txuftwGuf Selective udk a&G;&ef) wpfckudk a&G;cs,f&onf/ "mwfykH image wpfct k wGi;f rS color rsm; avQmch sonhf tcgwkid ;f dithering tenf;i,fawmh &oGm;ygvdrfhrnf/ odkYtwGuf image rS color ESifh udkufnDonfh palette wpfckudkom a&G; cs,, f &l onf/ xked nf;wGif image onf 24-bit armfew D m toH;k jyKolrsm;twGuf tqifajy qHk;[k qkd&rnf/ 8-bit armfeDwm toHk;jyKolrsm;twGuf Web palette ay:okdY wpfzefjyefí image udk tpDtpOfvkyfay;vdrfhrnf/ okdYaomf "mwfyHk image rsm;wGif omreftm;jzifh dithering jzifh xdckdufrIr&Sdapay/ Continuous-tone image wpfckudk Web palette toHk;cs&ef tusKd;qufom jzpfapygonf/ GOAL-



Combination images (both flat and photographic areas)



adaptive palette wpfckESifhtwl continuous-tone area dithering rS flat area udk xdef;odrf;xm;&rnf/



GOAL-



udk dither cGifhjyKxm;pOf



image udk 'DZkdif;jyKvkyfaeaomtcg flat areas wGif web-safe color udk oHk;& rnf/ GIF format jzifhodrf;qnf;rI? tjcm;okdY xkwfay;rIjyKvkyfcsdefwGif &EkdifvQif 'Web Snap' option wpfckESifh Adaptive palette wpfckudk a&G;cs,fxm;&onf/ Adaptive palette onf "mwfyHk{&d,mtwGif; color t&nftaoG; avsmhqif;rI r&Sdap&ef xdef;ay; xm;onf/ xkdtcsdefwGif "Web Snap" option onf flat area rS web-safe color rsm;



STRATEGY-



udk xdef;odrf;xm;ay;onf/ 294



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Some Things to Remember About GIFs



oifcef;pm 14 wpfckvHk;\ tcsKyfwGif t"dutcsufrsm;udk atmufygtwkdif; twdkcsKH; rSwfom; xm;Edkifonf/ - GIF onf Logo odkYr[kwf Line art odkYr[kwf text graphic ponfwkdYuhJodkYaom flat color area rsm; &Sdaeonfh image rsm;twGuf taumif;qHk; file format jzpfonf/ - GIFs rsm;onf Nidw, G af ponf? xk;d azmufjrifprG ;f apEkid o f nf? okYdr[kwf vIy&f mS ; aqmif&u G f ay;Ekdifaponf/ -



GIF wpfckonf 256 colors txd yg0ifEkdifaom color palette wpfckudk toHk;jyKonf/ GIF wpfcktaejzifh image wpfckudk save vkyfaomtcg indexed color odkY ajymif;&ef vkdtyfonf/ xkdYtjyif oifhavsmfaom color palette udk a&G;cs,f,l&onf/



-



Layered document wpfct k wGi;f &Sd transparent area rsm; xdef;odrf;xm;jcif;jzifh jzpfap? rSefuefaom transparency tool ESifh flattened image wpfcktwGif;&Sd color wpfck a&G; cs,f,ljcif;jzpfap GIF transparent wpfck\ tpdwftydkif;rsm;udk vkyf,lEkdifonf/



-



Page \ aemufcHta&mifxuf anti-aliased udk ta&mifwpfckckay;jcif;udk OD;pm;ay;xm; aomtcg Halo rsm; ay:vmwwfonf/ Image ywfvnftpyfrsm;wGif pixel rsm; ay:ae onfh oabmjzpfonf/ Halo rsm;udk jyKjyif&efxuf tumtuG,jf yK&efu ydrk v kd , G u f o l nf/



-



GIF file t&G,t f pm; ao;i,fap&eftwGuf enf;y&d,m,f tcsKdUrSm color rsm;\ flat area rsm;jzifh 'DZkdif;vkyfjcif;? indexed color okdY ajymif;,lonfhtcg color ta&twGuf avQmh csjcif;? dithering uefYowf,jl cif;? &Ekid v f Qif lossy GIF compression \ tcGit hf vrf;udk



-



&,ljcif;wkYd jzpfonf/ Web palette onf 8-bit armfeDwmrsm;ay:wGif&Sd browser twGif;&Sd dither r&Sdap&ef 216 colors pHkjzifh csdefn§day;onf/ Flat area rsm;&Sdta&mifwGif dithering r&Sdap&ef tumtuG,jf yK GIF image udk 'DZidk ;f jyKvkyaf omtcg Web palette rS color rsm; a&G;cs,f ,l&onf/



WEB DESIGN



vufawG o Y ifcef;pmrsm;



295



 296



WEB DESIGN



vufawG o Y ifcef;pmrsm;



 Adobe Photoshop CS2 vufawGUoifcef;pmrsm; - uGeyf sLwm*sme,fpmwnf;tzGu YJ Adobe Photoshop CS2 Classroom in a book udk wku d ½f u dk jf yefqkd a&;om;jyKpx k m;onf/ - uGeyf sLwmjzifh 'DZikd ;f a&;qGv J o kd rl sm;? 'DZikd ;f vkyif ef; aqmif&u G v f o kd rl sm;twGuf r&drS jzpf avhvm&rnfh oifcef;pm pmtkyf jzpfonf/ - oifcef;pmrsm;udk tydik ;f vdu k f cGjJ cm;a&;om; jyefqx kd m;jcif;jzpfí oifcef;pmwpfcck si;f udk tajccHrpS í avhusiEhf ikd o f vdk rdrd ESpo f uf&m tydik ;f udk a&G;cs,íf vnf; avhvmEdik yf gonf/ - *&yfzpf'ZD ikd ;f oifwef;wufaomolrsm;twGuf taxmuftuljyKapjy;D oifwef;rwufbJ ud, k w f ikd af vhvmvdo k rl sm;twGuv f nf; teD;uyf ydcYk say;aernfh pmtkyjf zpfonf/ vufawGv U yk if ef;e,fy,frS *&yfzpf'ZD ikd ef mrsm;? 0ufb'f ZD ikd ef mrsm;twGuv f nf; vufawGU taxmuftul jzpfapygonf/ - &efuek jf rKd w U iG f pmtkyq f ikd w f idk f;ESihf City Mart, Ocean North Point Centre, Super One, Yd iG f Blazon, Orange Super Mart wkw



0,f,&l &SEd ikd yf gonf/ uGeyf sLwm*sme,fwu kd o f Ydk wdu k ½f u dk rf mS Mum;0,f,El ikd yf gonf/ - rEÅav;jrKd w U iG f e*g;pmayESihf xGe;f OD;pmaywdw Yk iG f 0,f,&l &SEd ikd yf gonf/



xGuaf eygjyD



pmrlcGifhjyKtrSwf4008030606



 pmrlciG jhf yKtrSwf 4012290610



- ya&mfzuf&iS ef ,f *&yfzpf'ZD ikd ef m yDo&ef r&Srd jzpf wwfuRr;f &efvt kd yfonfh Illustrator CS2 twGuf uGeyf sLwm*sme,fpmwnf;tzGu YJ Adobe Illustrator CS2 Classroom in a book udk wku d ½f u dk jf yefqkd a&;om; jyKpx k m;onf/



h Ykd line - Bitmap image editing twGuf Photoshop onf tjyKd irf &Sd ausmMf um;ouJo art rsm;? logo rsm; a&;qG&J ef Vector graphics twGuf Illustrator u txl;aumif;rGeo f nf/ - Classroom in a book onf Adobe Illustrator \ tajccHrsm; avhvm oif,&l ef NcKH irkH ad pNy;D ra&wGuEf idk af om rSwo f m;zG,f tcsurf sm;? enf;pepfrsm; yg0ifonf/ - oifcef;pmrsm;udk tydik ;f vdu k f cGjJ cm;a&;om; jyefqx kd m;jcif;jzpfí oifcef;pmwpfcck si;f udk tajccHrpS jy;D avhusiEhf ikd o f vdk rdrd ESpo f uf&m tydik ;f udk a&G;cs,íf vnf; avhvmEdik yf gonf/ U iG f pmtkyq f ikd w f idk ;f ESihf City Mart, Ocean, North Point Centre, Super - &efuek jf rKd w One, Blazon, Orange Super Mart wkw Yd iG f 0,f,&l &SEd ikd yf gonf/ uGeyf sLwm*sme,fwu kd o f v Ydk nf; wdu k ½f u dk rf mS Mum; 0,f,El ikd yf gonf/ - rEÅav;jrKd w U iG f e*g;pmayESihf xGe;f OD;pmaywdüYk 0,f,&l &SEd ikd yf gonf/



Adobe Illustrator CS2 vufawGUoifcef;pmrsm;



 xGuaf eygjyD



- þpmtkyw f iG f uGeyf sLwmtajccHa0g[m&rsm;? xl;jcm;qef;jym;aom acwfopf uGeyf sLwmoH;k a0g[m&rsm;? pum;vH;k rsm;udk taMumif;t&m? bmom&yftvdu k f vk&d if;wd&k iS ;f azmfjyxm;onf/



pmrlciG jhf yKtrSwf - 4003990307



- uGeyf sLwmbmom&yfqikd &f m owif;tcsut f vufrsm;ESihf enf;ynmqdik &f m pum;vH;k rsm;udk us,jf yefpY mG xnfo h iG ;f azmfjyxm;onf/ twdak umuf pum;vH;k rsm;? t,ltquGjJ ym;wwfonfh pum;vH;k rsm;vnf; yg0ifonf/ - uGeyf sLwm enf;ynmqdik &f ma0g[m&aygi;f 600 ausmf yg0ifí toH;k jyK&ef vrf;nTecf suf enf;vrf;rsm;vnf; yg0ifonf/ - cufcaJ om uGeyf sLwm ynm&yfa0g[m&rsm;ESihf Aef;pum;rsm;udk vG,u f al p&ef [moajrmufaom o½kyaf zmfyrkH sm;jzifh a&;qGaJ zmfjyxm;onf/ f jzpf toH;k jyKEikd o f uJo h Ykd - ausmif;oifcef;pmtaxmuftuljyK tbd"mef pmtkyt rdom;pkvufpt JG jzpfvnf; vd&k moH;k Edik o f nfh pmtkyw f pftyk jf zpfonf/ - &efuek jf rKd w U iG f pmtkyq f ikd w f idk ;f ESihf City Mart, Ocean North Point Centre, Super One, Blazon, Orange Super Mart wkw Yd iG f 0,f,&l &SEd ikd yf gonf/ uGeyf sLwm*sme,fwu kd o f Ydk wdu k ½f u dk rf mS Mum;0,f,El ikd yf gonf/ - rEÅav;jrKd w U iG f e*g;pmayESihf xGe;f OD;pmaywdw Yk iG f 0,f,&l &SEd ikd fygonf/