1 / 10

Mencipta Grafik Web

Mencipta Grafik Web. Isi Kandungan 2.1 Jenis Grafik 2.2 Grafik Vektor 2.3 Grafik ‘Bitmapped’ 2.4 Grafik untuk web 2.5 GIF (Graphics Interchange Format) 2.6 JPEG (Joint Photography Expert Group) 2.7 PNG (Portable Network Graphics). 2.1 : Jenis Grafik.

tanuja
Download Presentation

Mencipta Grafik Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mencipta Grafik Web Isi Kandungan 2.1 Jenis Grafik 2.2 Grafik Vektor 2.3 Grafik ‘Bitmapped’ 2.4 Grafik untuk web 2.5 GIF (Graphics Interchange Format) 2.6 JPEG (Joint Photography Expert Group) 2.7 PNG (Portable Network Graphics)

  2. 2.1 : Jenis Grafik • Kenapa kita memerlukan grafik untuk laman web? • Untuk mencipta laman web yang berjaya • Meningkatkan pengalaman pengguna • Banyak grafik percuma di internet • Cipta grafik yang original untuk memastikan laman web yang unik • Dua jenis grafik yang boleh dicipta menggunakan komputer: • Grafik ‘Vector’ • Grafik ‘Bitmapped’

  3. 2.2: Grafik Vektor • Grafik vektor menggunakan objeck; garisan, bulatan, lengkungan dengan arahan di mana untuk meletakkan lukisan tersebut • Gunakan persamaan vektor untuk mendefinisikan ciri-ciri grafik • Bentuk, saiz, warna, kedudukan relatif (titik mula dan akhir), etc. • Tidak bergantung kepada resolusi • Saiz boleh diubah tanpa menjejaskan kualiti imej • Ideal untuk kawasan warna yang solid • Sesuai untuk lukisan logo, huruf dan garisanI • Tidak sesuai untuk warna yang kompleks

  4. 2.3: Grafik ‘Bitmapped’ • Juga dikenali sebagai grafik ‘raster’ atau grafik ‘pixelized’ • Grafik didefinisikan oleh ‘pixel’ kawasan warna • Bergantung kepada resolusi • Kualiti imej akan hilang apabila saiz imej diubah • ‘Interpolation’ • Sesuai untuk imej yang mempunyai warna yang kompleks (i.e. gambar dan lukisan)

  5. Raster image Vector image 100% 200% 100% 200% Vektor v. Grafik ‘Bitmapped’

  6. 2.4: Grafik untuk Web • Tidak kurang dari 50 jenis format grafik yang anda boleh cipta dengan menggunakan editor grafik • Untuk web, anda boleh guna hanya tiga: GIF, JPEG dan PNG • Anti-aliasing ialah teknik untuk melembutkan hujung imej yang ‘kasar’.

  7. 2.5: GIF (Graphics Interchange Format) • Sesuai untuk: • Imbasan skrin, lukisan garisan, grafik dengan hujung yang tajam dan imej yang ‘transparent’ • Tidak sesuai untuk: • Imej fotografik, lukisan dengan warna yang kompleks • Boleh menampung 256 colors (8 bits/pixel) • Format yang tidak hilang • Kuality tidak terjejas jika imej dimampatkan

  8. 2.6: JPEG (Joint Photography Expert Group) • Sesuai untuk: • Imej fotografik, imej dengan warna yang kompleks (i.e: imej semulajadi, gambar pemandangan) • Tidak sesuai untuk: • Imej dengan hujung yang tajam, teks, kartun yang ringkas • Boleh menampung jutaan warna (24 bits/pixel atau16 juta warna) • Format yang hilang • Kualiti imej berkurangan jika dimampatkan

  9. 2.7: PNG (Portable Network Graphic) • Format terbaru dari W3C • www.w3.org/Graphics/PNG • Sesuai untuk: • Imej yang mempunyai warna yang kompleks dan juga imej dengan ‘transparency’ • Menampung jutaan warna • Format yang tidak hilang • Alternatif yang baik untuk kedua-dua GIF dan JPEG

  10. GIF atau JPEG atau PNG? • Dua pilihan untuk grafik : GIF atau JPEG (kerana tidak semua pelayar boleh menampung PNG) • Perbezaan ialah terhadap bagaimana data dimampatkan. • GIF: Jika grafik adalah garisan mudah hitam-putih atau gambar dengan warna yang hampir sama • JPEG: Untuk gambar dengan warna yang kompleks • Untuk animasi dan grafik dengan warna ‘transparent’, anda perlu memilih GIF.

More Related