pembelajaran berbasis web

GRAPHICS ( GRAFIS)

Beberapa tahun lalu, Web tidak lebih hanya sekedar  teks yang berwarna hitam  dengan background berwarna abu-abu. Untuk memuat/ mengakses suatu grafis juga membutuhkan waktu sekitar  tiga minggu, Hal ini diibaratkan bagai menempuh perjalanan yang lama  untuk menuju suatu tempat. Namun seiring perkembangan dan kemajuan teknologi, segalanya menjadi berubah. Web telah menjadi tempat di mana pengunjung mengharapkan pencerahan, grafis profesional. Grafis yang menyenangkan, juga dapat menyampaikan informasi dengan cepat dan mengesankan, menghiasi, memperkaya keberadaan suatu situs. Sehingga diharapkan grafis tidak hanya dapat   menarik Perhatian pengunjung, namun  dapat menyampaikan pesan dan konten dengan jelas. Untuk  mendesain grafis, kita harus bijaksana dalam menenntukan ukuran grafis. Agar pengunjung dapat dengan mudah mendownload halaman situs. Untuk mendownload halaman situs  dengan ukuran file grafis yang besar, seperti file audio dan video, diperlukan jangka waktu tertentu.

A.  PRINSIP GRAFIS

Sebelum berbicara lebih jauh tentang grafis, alangkah pentingnya kita meninjau terlebih dahulu tentang prinsip dasar dan terminologi tentang grafis.

1.      Prinsip kerja grafis

Mari kita perhatikan prinsip secara umum untuk keindahan grafis dan

bertujuan agar pengunjung dapat mendownload dengan cepat.

a.       Hindari grafis yang tidak tepat

Gunakan grafis hanya ketika grafis tersebut  memiliki tujuan yang manfaat untuk mendownload, bahkan jika tujuan itu tidak lebih hanya sekedar untuk memperindah halaman. Penggunaan grafis sebaiknya benar-benar dapat  mendukung suasana situs.

b.      Menyimpan gambar pada format yang sesuai

Jika kita menggunakan format file yang salah untuk  suatu gambar tertentu, maka akan membutuhkan ukuran  file yang besar. Dengan memilih format file yang sesuai dan pengaturan optimasi yang tepat, kita dapat mengurangi ukuran file.

c.       Reuse grafis

Pertama – tama sebuah image direferensikan, di download melalui cache browser oleh pengunjung pada suatu komputer. Reuse grafis browser ialah sebagai sebuah image yang  identik dengan  dua salinan yang berasal dari satu image, masing – masing di ambil dari direktory yang berbeda pada suatu serve.

d.      Mengurangi ukuran image

Menggunakan ukuran image yang sesuai untuk melayani tujuan pengunjung.  Image yang lebih kecil, sebagaimana mestinya yakni sebuah file  dengan ukuran  yang lebih kecil akan dapat diakses lebih cepat. Salah satu cara mengurangi ukuran image pada suatu crop out (cut away) yaitu dengan mengurangi sedikit ukuran  background image. Kita juga bisa mengurangi ukuran keseluruhan image, dengan ukuran 500 x 500 pixel image yang berisikan empat kali lipat lebih banyak dari ukuran image yang berukuran 250x 250 pixel.

e.       Menggunakan atribut tinggi dan lebar yang tepat

Meskipun browser mampu memperhitungkan dimensi image jika tinggi dan lebar dihilangkan dengan  <img /> tag. Secara ekplisit atribut tersebut dapat membuat halaman dengan tampilan yang  lebih cepat. Jangan menggunakan atribut  tinggi dan lebar untuk mengubah suatu ukuran image pada suatu halaman,karena :

-          Mengurangi ukuran gambar dengan atribut tinggi dan lebar tidak mengurangi waktu download, karena browser masih harus mendownload file  besar pula.

-          Meningkatkan ukuran dengan atribut  tinggi dan lebar akan menurunkan kualitas image

f.       Menyertakan parameter alt pada semua image.

Alt teks memiliki beberapa tujuan, diantaranya:

-          Menampilkan screen bagi pembaca, sehingga pengunjung tahu tujuan dari suatu image.

-          Menampilkan sebuah link image yang rusak atau ketika image tidak aktif pada suatu browser.

-          Indeks  mesin pencari dan dapat meningkatkan situs pencarian  kata, sedangkan teks melekat pada gambar itu sendiri terlihat oleh mesin pencari.

B.     TERMINOLOGI GRAFIS

Langkah yang baik bagi kita saat ini adalah  “play”, namun sebelum kita membahas lebih jauh, kita perlu membahas tentang  terminologi grafis.

a.       Jenis grafis

Konten grafis adalah grafis yang digunakan untuk mewakili beberapa macam data. Kategori ini termasuk data graph dan chart, map, produk gambar, dan  print screen. Konten Grafis secara langsung, namun beberapa, terutama yang menyajikan data yang kompleks dengan cara visual. Menemukan cara untuk menyajikan data secara visual bukan hanya masalah untuk desain situs web, tetapi untuk semua jenis komunikasi. Tematik (juga disebut dekoratif) grafis murni untuk menghiasi, mengendalikan fokus, dan mendukung branding. Contoh termasuk logo, foto dekoratif, pembatas,dingbats, dan bullet costum. Navigasi  grafis yang unik ke web dan termasuk tombol klik, ikon mandiri, atau ikon berdekatan dengan teks link. Lihat Bab 3 untuk pedoman  yang lebih spesifik tentang  navigasi.

b.      Anti aliasing

Dalam dunia cetak komersial, menawarkan resolusi 3200 titik per inci  bahkan lebih tinggi, titik tinta yang sangat kecil  yang berbaur bersama-sama untuk menyediakan smoothcurves dan garis diagonal yang sempurna. Pada web, dengan 72-100 resolusi piksel-per-inch, pixel yang cukup besar untuk dilihat dengan mata telanjang. Garis lengkung atau diagonal  merupakan masalah utama, karena pixel dapat menyajikan, langkah tampilan  yang bergerigi  secara jelas .

c.       Tranparansi

Meskipun semua gambar web wajib memiliki bentuk persegi panjang, kita kadang-kadang  ingin gambar muncul dalam bentuk yang tidak teratur, seperti roda. Salah satu cara untuk memberikan semacam ilusi  pada gambar persegi panjang adalah  warna latar belakang  gambar persegi panjang dicocokkan dengan warna latar belakang(background) pada halaman HTML, sama seperti warna gambar roda persegi panjang tampaknya memiliki background putih untuk mencocokkan dengan background halaman.Sayangnya, warna spesifik dalam suatu program editing gambar kadang-kadang tidak sesuai dengan warna yang sama yang dihasilkan oleh browser web bahkan jika kode warna yang identik, karena mereka diciptakan dan diberikan dalam program yang berbeda.

d.      Interlace 
Biasanya, gambar muncul di browser dengan download baris demi baris. Artinya, beberapa baris gambar muncul di layar, dan kemudian mungkin ada jeda sebelum baris yang lain muncul lagi. Proses berlanjut, dari atas ke bawah, sampai seluruh gambar ditampilkan. GAMBAR 6.6A menunjukkan satu langkah menengah dalam proses download untuk line-by-line download gambar yang  khas. Interlacing mengacu pada cara alternatif untuk memuat gambar. Pengunjung  melihat lengkap tapi resolusi rendah, versi gambar yang bertahap diganti dengan resolusi tinggi versi sampai versi nal fi muncul. GAMBAR 6.6B menunjukkan download parsial untuk gambar yang sama seperti Gambar 6.6A, tapi sekarang interlacing adalah berlaku, dan pengunjung melihat gambar berkualitas rendah namun dikenali lebih cepat dibandingkan dengan downloud  line-by-line.

e.       File grafis kompresi

Format file Web- Friendly dapat memampatkan gambar menjadi ukuran yang lebih kecil. Beberapa teknik kompresi mempertahankan setiap data gambar tunggal, tanpa degradasi, tanpa peduli berapa kali foto tersebut disimpan. Format grafis lain dikatakan lossy, yang berarti algoritma kompresi membuang beberapa masing-masing data gambar dan setiap kali gambar disimpan, semua sebagai tradeoff untuk kompresi yang lebih baik. Meskipun cara termudah untuk menghindari efek negatif seperti mungkin untuk menghindari format lossy seluruhnya, web saat ini tidak memungkinkan  pilihan (seperti yang kita akan segera bahas). Untuk  pertahanan pertama dalam menyimpan gambar asli. Selalu menjaga salinan asli, menyimpan semua modiversi dengan nama baru,dengan cara itu, terhindar dari beberapa efek negatif dari formatlossy. 

f.       Vektor image

Gambar vektor tidak menentukan piksel individu melainkan menyimpan gambar sebagai rangkaian persamaan matematika. Misalnya, vektor spesifik kation untuk 100 x 100 pixel persegi panjang akan menjadi dimensi vertikal dan horisontal, ketebalan dan kode warna untuk stroke (outline), dan kode warna untuk  (daerah padat) pada persegi panjang. Karena persamaan yang mendasari tetap sama, terlepas dari nilai-nilai elemen persamaan, gambar itu ukuran file tetap sama apakah ini akan menampilkan pada 10 x10 piksel atau 1000 x 1000 piksel. Vector skala grafis  yang indah, kita dapat mengubah ukuran layar tanpa mengorbankan kualitas  meskipun sedikit. Umumnya format berbasis vektor termasuk native files dibuat dalam Fireworks (file ekstensi Png). Corel Draw (. DWG), dan Flash (fla.). Sayangnya, grafis vektor tidak sesuai untuk gambar non-matematika seperti foto, dan files Flash adalah grafis vektor satunya yang saat ini benar-benar dapat diandalkan di web.

g.      Bitmapped/ Raster Images

Bitmapped (juga disebut raster atau hanya bitmap) gambar yang terdiri dari piksel individu dipetakan ke dua dimensi grid. Ukuran 30 x 30 pixel- gambar bitmap harus melacak masing-masing dari 900 perusahaan pixel individual, termasuk kode warna untuk masing-masing, sementara 300 x 300-pixel grafis harus melacak 90.000 piksel.  bitmap adalah cara efisiensi  untuk menyimpan data gambar dari rumus matematika yang digunakan oleh gambar vektor, dengan ukuran file meningkat secara dramatis dengan meningkatnya ukuran gambar. Meskipun demikian, format bitmap adalah satu-satunya cara praktis untuk menyimpan based pixel nada gambar seperti foto.

h.      Master image

Hal terbaik untuk menciptakan dan memelihara  gambar pada master image , di  salah satu file  format vektor yang beresolusi tinggi , bahkan jika gambar pada akhirnya akan berakhir sebagai bitmap resolusi rendah pada web, karena :

Ø  Jika di simpan dalam format vektor, gambar dapat ditingkatkan,diputar dan dimanipulasi tiada henti tanpa kehilangan kualitas.

Ø  Jika disimpan sebagai bitmap resolusi tinggi, kita memiliki lebih banyak piksel yang tersedia saat mengedit dan memanipulasi gambar. Resolusi tinggi bitmapped image selalu yang lebih baik daripada skala image resolusi rendah.

Ø  bitmapped image yang  beresolusi tinggi dapat digunakan untuk mencetak pada web.

Sebaliknya, sebagian besar sering tidak berhasil, dalam membuat, memanipulasi, dan memelihara gambar asli dalam format seperti BMP, TIFF, PSD, atau non-kompresi PNG, dan kemudian ekspor (mengkonversi dan save) salinan dari aslinya ke web-freandly, format bitmapped sebelum embedding dalam suatu halaman web.  Grafis yang baik sebagai vektor image harus diekspor ke format bitmap (JPG, GIF atau dikompresi , PNG) untuk ditampilkan pada web, dengan Flash menjadi satu-satunya pengecualian.

C.     FORMAT IMAGE PADA WEB

Berikut ini , akan dijabarkan pembahasan tentang tiga format image yang tepat untuk non animasi  pada web yaitu JPG, GIF dan PNG.

1.      Format JPG

a.       Format grafis JPG

JPG ( disebut “jay- peg” dan juga ditulis JPEG ) singkatan dari Joint Photographics  Experts Group, bisa menggunakan ekstensi jpg atau jpeg . JPG dimaksudkan untuk foto dan image  yang menggabungkan banyak warna, potongan-potongan warna kecil dan  perubahan warna yang  halus.  seperti gradien, realistis 3-D shading, dan bayangan. JPG mendukung pencitraan true color, sampai dengan 16,8 juta warna.

b.      File kompresi JPG

 Kompresi JPG merupakan lossy. secara spesifik , menyimpan file ke JPG:

Ø  Mengaburkan tepi tajam antara warna yang berdekatan.

Ø  Menambahkan artefak, juga disebut kebisingan (pixel warna acak yang berbeda), ke daerah warna solid.

Ø  mengubah warna aslinya.

Kompresi JPG adalah jenis variabel kompresi, yang berarti bahwa kita memilih berapa banyak penurunan kualitas yang bisa mentolerir tradeoff  untuk ukuran file lebih kecil.

2.      Format GIF

a.       Grafis GIF

GIF , atau Graphics Interchange Format, yang terbaik untuk baris berbasis gambar dengan area warna  solid, seperti kartun, diagram, seni garis, grafis dan teks. GIF mendukung transparansi indeks, interlacing, dan animasi. Sebuah gambar GIF dapat menyimpan hingga 256 warna. Jika kita ingin gambar pada web menjadi aman, bukan menciptakan  palet web-aman, kita dapat menentukan palet web ketika kita ekspor gambar ke GIF. Meskipun GIF hanya terbatas dengan 256 warna, mereka dapat setiap 256 warna keluar dari 16,8 juta pilihan. Dalam kasus ini, kita bisa memilih palet adaptif  yang  tidak aman (warna yang dipilih dari dalam gambar) untuk melestarikan pilihan warna yang akurat, selama  tidak melebihi 256-warna  batas  GIF.

b.      File kompresi GIF.  

GIF menggunakan kompresi lossless Algoritma / non-destruktif, sehingga warna dan tepi tajam tetap tepat , dan tidak ada artefak atau kebisingan ditunjukkkan. Penyunting GIF menggunakan sebuah tabel Warna (Clut) untuk melacak illustrasi warna sehingga setiap 6-digit kode warna (misalnya, # FF0000) disimpan hanya Sekali, dan yang nomor (01 sampai 256) illustrasi tabel digunakan sebagai referensi silang untuk setiap pixel yang menggunakan warna tersebut.

3.      Format grafis  PNG

PNG (Portable Network Graphics, disebut "ping") adalah format grafis baru dimaksudkan dapat  menggantikan GIF untuk segala sesuatunya. tetapi  (karena PNG tidak mendukung animasi). PNG juga tidak akan menggantikan format JPG, karena PNG tidak ideal untuk nada gambar seperti foto. Meskipun  files PNG diciptakan sebagai suatu  program editing gambar yang  berisikan Informasi vektor, diekspor sebagai bitmap, kompresi PNG sebelum ditampilkan diweb.

a.       File kompresi PNG

Pilihan untuk mengekspor  fi les PNG berada pada suatu panel yang Optimal. Untuk meminimalkan kompresi ukuran  file PNG, lakukanlah hal- hal berikut:

-          Ketika mengekspor file PNG, pilih pengaturan warna serendah mungkin yang memberikan kualitas gambar yang diperlukan: grayscale, warna 8-bit (256 warna).

-          Gunakan transparansi alpha hanya bila diperlukan.

-           Tentukan interlace hanya pada gambar yang besar, karena memberikan  manfaat sedikit memperkecil gambar sehingga  dapat mendownload dengan cepat.

b.       Kombinasi image

Secara umum, kita harus menghindari menggabungkan JPG gaya art (seni nada  dan foto) dan GIF gaya seni (pada ilustrasi warna dan teks) ke dalam satu gambar. Jika kita ekspor gambar yang dihasilkan sebagai JPG, warna akan berubah dan kebisingan akan diperkenalkan pada daerah warna. Jika kita ekspor gambar sebagai GIF, wilayah nada kontinu akan dikurangi menjadi maksimum 256 warna dan file bisa cukup besar .Transparansi GIF atau PNG memungkinkan latar belakang JPG untuk menunjukkan melalui,
dan hasilnya terlihat seperti gambar tunggal untuk pengunjung.
Namun alternatif lain adalah untuk mengiris (dipotong terpisah) gambar menjadi potongan-potongan persegi panjang yang disusun kembali ke dalam tabel, dengan seluruh hal yang muncul untuk menjadi gambar terputus pada halaman web.

D.    ACQUIRING IMAGE

Seringkali, kita  mendapatkan gambar pada  sebuah situs, baik tentang  dekorasi (seperti logo) atau tentang  pengiriman informasi (seperti produk gambar). Sebuah logo di atas kertas atau standar foto perlu dipindai ke dalam format digital, atau kita bisa mengambil foto dengan kamera digital sebagai suatu cara dalam mengembangkan file. Kita akan melihat  beberapa sumber image: stok foto yang tersedia secara komersial dan clip art, screen capture software, scanner, dan kamera digital.

a.       Stock Foto dan Clip Art

Beberapa situs web yang menawarkan stok foto dan clip art yang cukup mahal, sementara yang lain seringkali gratis atau mengenakan biaya sangat minim, misalnya hanya satu atau dua dolar per gambar. Semua situs memungkinkan pencarian berdasarkan topik, seperti "eagle" atau Beberapa situs  filter " happy "pencarian dengan warna juga, sehingga pencarian untuk "bahagia" dan "orange" akan mengubah gambar  yang dominan oranye yang mewujudkan konsep bahagia.

b.      Screen Capture Utilitas

Kadang-kadang kita perlu menangkap screen shot komputer dan menanamkan pada halaman web. Screen capture utilitas yang sempurna untuk tugas itu, menyediakan kemampuan untuk menangkap piksel pada seluruh tampilan, jendela keseluruhan, atau hanya sebagian dari jendela. Beberapa utilitas yang dibangun ke dalam sistem operasi, agar mudah didapat.

c.       Scanner
Scanner adalah alat yang jelas untuk menangkap gambar atau teks dari halaman yang dicetak, namun  juga dapat menangkap gambar dari negatif foto serta gambar dari kehidupan benda nyata. Scanner  dapat menghasilkan efek fotografi yang menakjubkan.

d.      Tipe  Scanners

Dalam beberapa tahun terakhir, scanner flatbed(untuk pemindaian pada bahan seperti foto atau halaman cetak) telah meningkat secara dramatis dalam akurasi, sementara penurunan dramatis pada harga.

e.      Memindai sebuah Image  Dari Halaman cetak

Jika gambar asli dipindai dari halaman cetak komersial, pola moiré dari titik dicetak asli dapat menurunkan pindaian gambar  yang dihasilkan. Satu metode untuk mengurangi dampak dari moiré adalah sebagai berikut:

1.      Mengaburkan seluruh gambar sedikit.

2.      Kurangi ukuran gambar sedikit.

3.      Gunakan "ketajaman" perintah untuk mengembalikan beberapa ketajaman hilang, karena kabur

f.        Spesifikasi Scanner

Scanner tampaknya lebih mampu memberikan resolusi yang tinggi, pemindaian pada 2400 titik per inci atau lebih tinggi. Color fidelity,  adalah benar- benar menandakan scanner berkualitas tinggi. Perlu diingat bahwa perbandingan yang  akurat adalah untuk mengevaluasi scan dihasilkan gambar pada komputer yang sama, sehingga menghilangkan variasi warna yang dihasilkan dari adapter video yang berbeda dan monitor. Cara lain untuk mengetahui apakah scanner mampu fidelity warna yang tinggi untuk melihat teknis spesifik kation. Minimal, scanner harus menangani 24-bit warna / true color(16,8 juta warna) dan memiliki lebih baik daripada rating luminositas 3,0 (juga disebut sebagai rating Dmax). Rating luminositas menunjukkan seberapa baik pemindai keluar dari daerah bayangan pada gambar. Dalam setiap kasus, peringkat luminositas saat ini berada dalam kisaran berikut:

-          3.0  rating luminositas atau lebih rendah: low-end scanner, dengan detail bayangan kurang akurat.

-          3,3-3,4 Peringkat luminositas: mid-range scanner, dengan detail bayangan umumnya baik.

-          3,6  rating luminositas atau lebih tinggi: high-end berkualitas profesional scanner, dengan shadow detail sangat baik dan poin harga yang sangat mahal.

g.       Pengaturan Scanner

Ketika Anda memindai gambar,  resolusi yang digunakan, bisa secara otomatis memindai pada tingkat  resolusi tertinggi. Setelah semua, pengaturan di tingkat tinggi , dalam teori, memberikan kualitas yang lebih tinggi, terutama jika kita ingin menggunakan gambar untuk resolusi tinggi pada materi cetak selain untuk posting di web. Masalahnya adalah bahwa resolusi yang lebih tinggi menghasilkan files  gambar yang jauh lebih besar. Selain itu, jika kita coba memindai, katakanlah, sebuah ukuran asli 8 x 10 " pada resolusi tertinggi dan warna tertinggi,  kesempatan baik akan bergantung pada komputer kita. Beberapa komputer dapat menangani pixel-berderak tuntutan file gambar yang besar. Biasanya, itu lebih aman untuk memindai pada resolusi lebih rendah.

h.       Kamera Digital

Kamera digital adalah alat kecil yang indah untuk menangkap gambar yang dapat ditampilkan pada layar komputer beberapa saat setelah  gambar di ambil, tanpa fi lm dan biaya pengembangan.

Tentu saja, ada kelemahan untuk fotografi digital:

-          Kualitas fotografi mungkin tidak setinggi 35mm kamera  tradisional, bahkan ketika dikerahkan oleh para profesional, hanya digital lebih mahal kamera sebanding. Namun, seperti telah kita lihat, resolusi tinggi fotografi mungkin berlebihan untuk web pula.

-          Hanya sejumlah gambar dapat disimpan pada kartu memori. Besar atau ekstra Kartu memori dapat mengkompensasi, tetapi mereka bisa mahal. Sebuah alternatif adalah mendownload gambar ke komputer laptop atau perangkat penyimpanan portabel berkala.

-          Hanya digital lebih mahal kamera SLR (Single Lens reflex, yang
secara praktis berarti bahwa kamera menerima lensa yang terpisah) pemilihan  fotografi  yang menyenangkan seperti filters dan lensa khusus dan semacamnya.

-          Meskipun filters dapat diterapkan pada gambar , dalam program editing gambar-seperti Photoshop dan Fireworks, hasilnya sering kurang alami daripada  dari lensa kamera

-          Megapiksel  jumlah yang lebih tinggi dari pixel. Megapixel  berarti lebih banyak piksel ditangkap, yang pada gilirannya berarti gambar berkualitas tinggi dan dapat digunakan pada ukuran lebih besar. misalkan, kamera digital murah menawarkan mungkin 4 megapixel, sementara kamera yang lebih mahal dapat melebihi10 megapixel.

-          Optical photo zoom. Ini, tentu saja, menjadikan benda-benda yang jauh menjadi lebih dekat..

E.     MEMBUAT DAN MENGEDIT GAMBAR

Setelah mengambil foto dari scan atau dari kamera digital, kita mungkin perlu menggunakan perangkat lunak pengedit gambar untuk memperbaiki flaws atau meningkatkan citra dengan efek artistik. Untuk menghilangkan noda, mempertajam atau mengaburkan fokus area yang dipilih, atau membuat warna menjadi biru langit  atau abu-abu.Kita juga bisa menggunakan editing gambar software untuk membuat grafik dari awal, seperti untuk  merancang logo baru. Program  editing  gambar telah menjadi begitu baik, sehingga bahkan orang-orang yang tidak memiliki keterampilan menggambar mampu menghasilkan beberapa efek sangat profesional. Adobe (sebelumnya Macromedia) Fireworks dikembangkan secara spesifik untuk menciptakan grafis web, dengan files asli disimpan dalam format PNG proprietary. Meskipun Fireworks cukup mampu mengedit foto, itu benar-benar unggul untuk menciptakan vektor grafis, mengiris  gambar, dan menciptakan HTML untuk efek rollover.

a.       Layered Image

Ketika membuat grafik asli dalam program editing gambar, kita umumnya bekerja dengan lapisan dalam master image. Artinya, setiap objek (bentuk, elemen teks, atau embedded bitmap) ada di lapisan sendiri sehingga kita dapat memanipulasi secara mandiri
dari benda-benda lainnya

b.      Pengekspor Image

Kita telah membahas beberapa prinsip umum mengekspor
gambar asli   untuk format  web-friendly .seperti GIF, JPG, atau PNG. Sekarang kita perlu melihat sedikit lebih jelas pada apa yang sebenarnya terlibat dalam mengekspor  file. Mengekspor gambar ke format bitmap seperti GIF, JPG, atau web-Friendly PNG . Ketika mengekspor gambar, kita pertama mengaktifkan unsur-unsur yang kita inginkan terlihat di gambar dan mematikan yang tidak kita inginkan, dengan mengklik pada "mata" Ikon di samping lapisan (lihat kembali ke Gambar 6.17). Kami menentukan keseluruhan karakteristik file (Format  file, jumlah warna, tingkat kompresi, pilihan dithering, interlacing, dll) di panel Optimalkan, seperti yang ditunjukkan sebelumnya dalam Angka 6.10 (format JPG) dan 6,16 (GIF Format). Akhirnya,  baik memilih "Ekspor" atau "Save As" (tergantung pada Editor gambar) dari menu File.

c.       Pencocokan Warna pada  Seluruh Paket Software

Seperti telah disebutkan, warna yang dipilih dalam paket perangkat lunak yang berbeda tidak selalu terlihat sama pada halaman web, bahkan jika mereka menggunakan kode warna yang sama. Misalnya, # FF0000 disimpan sebagai latar belakang file  gambar mungkin belum tentu cocok dengan latar belakang halaman web spesifik  sebagai # FF0000. Dan warna yang identik disimpan dalam dua files  JPG yang berbeda hampir dijamin tidak untuk mencocokkan dengan tepat, karena kompresi  JPG selalu mengubah warna  beberapa derajat. Warna berubah  di daerah-daerah yang lebih kecil, seperti pencocokan warna teks ke warna dalam gambar yang terpisah, karena stroke teks umumnya cukup kecil bahwa perbedaan warna kecil tidak mudah terlihat.

d.      Dingbat Tipografi

Meskipun tipografi pada umumnya dibahas dalam Bab 7, bidang tipografi, dingbat tipografi (juga disebut tipografi simbol), patut Karakter dingbat dapat dimanipulasi dengan cara yang sama seperti tipografi yang lebih khas, jadi snap  mengubah ukuran dan warna atau menambahkan efek khusus. Keuntungan menggunakan bentuk kecil dari jenis huruf dingbat adalah sering mengurangi pixel dibandingkan  bentuk yang sama  diambil secara manual dalam program editing gambar.

e.       Efek, Filter, Textures, dan Pola

Kebanyakan program editing gambar  menyediakan berbagai efek, fi lters, tekstur, dan pola yang dapat diterapkan untuk teks dan objek gambar (lihat Gambar 6.24 untuk beberapa sampel). Apapun efek yang kita pilih, akan tampak lebih tua jika sistem komputer kurang kuat. Beberapa efek gradien, seperti bayangan drop dan cahaya, dapat terlihat mengerikan pada sistem lama karena ada warna yang tidak cukup tersedia. 

f.       Desain Logo 

Sebuah logo  adalah grafis yang sangat sulit untuk di desain. Karena logo biasanya digunakan untuk mengidentifikasi sebuah organisasi pada segala macam media, dari signage untuk kop surat kartu bisnis, web tentu saja harus:

–        Sederhana dan memiliki  kekhasan , dampak visual agar mampu diidentifikasi.

–        Timeless, menghindari trendiness yang akan bekerja dengan cepat.

–        compact dan serbaguna, sehingga menyesuaikan dengan beberapa media.

–        Unik, sedemikian rupa sehingga tidak melanggar merek dagang organisasi lain

g.      Inspirasi Desain Image

Inspirasi desain dapat berasal dari berbagai sumber, dari bahan cetak untuk grafis ke pola wallpaper. Efek Grafis dan Perawatan tipografi menyediakan banyak inspirasi untuk ide efek grafis.

F.      BACKGROUND IMAGE

Background gambar, seperti semua gambar, luangkan waktu untuk mendownload, sedangkan warna latar belakang saja tidak. Sebagai hasilnya, kita harus menggunakan gambar latar belakang dengan hati-hati, memastikan dampak tambahan bernilai hit upload dihasilkan. Pertimbangan lain  bahwa  background gambar yang sibuk biasanya merupakan gangguan bagi desain yang baik, jarang  halaman
latar belakang menjadi fokus perhatian. Namun, background gambar halus dapat meningkatkan suasana sebuah situs.

a.       Latar Belakang Gambar Kontras.

Salah satu cara untuk memastikan bahwa latar belakang gambar tidak membanjiri halaman atau menjadikan  teks terbaca  pada latar depan adalah dengan menggunakan gambar kontras rendah, seperti gambar di
GAMBAR 6,30. Warna-warna dalam gambar yang sangat mirip dalam nada dan nilai, sehingga gambar dapat memberikan bunga tanpa berlebihan  pada setiap elemen latar depan.Teks latar depan adalah warna gelap, maka akan muncul secara efektif.

Figure 6.30 lom contrast background image

b.      Tiled background image

Jika gambar terlalu kecil untuk seluruh latar belakang, tiled browser (mengulang) bentuk background horisontal dan vertikal. Latar belakang tile dapat mengambil keuntungan dari banyak efek yang berbeda: tekstur, garis-garis, warna gradien, pola acak, dan checker boards.

c.       Full screen background image

Sebuah background gambar dengan layar penuh ,tentu dimaksudkan untuk file window browser dari sudut kiri atas ke pojok kanan bawah. Sebuah latar belakang dengan  layar penuh, JPG foto memiliki potensi untuk menjadi file besar.Sebaliknya, layar penuh image GIF dengan hanya beberapa bentuk, dua atau tiga warna, terutama garis horisontal dan tidak ada gradien atau pola (seperti pada Gambar 6.30) file bisa menjadi cukup kecil

d.      Non-tiled background  Images Parsial

Ada dua cara untuk menampilkan gambar latar belakang parsial:

1.      Tentukan latar belakang warna solid untuk seluruh halaman, dan latar belakang gambar yang terpisah untuk <div> atau table yang memegang konten , seperti dalam GAMBAR 6.36A.

2.      Membuat gambar latar belakang untuk seluruh halaman, dan menggunakan latar belakang warna  yang kuat untuk <div> atau table yang memegang konten  (seperti dalam GAMBAR 6.36B) .

Figure 6.36 Non tiling partial backgroung image

e.       Sebuah Alternatif  Background Gambar

Sebagaimana telah kita lihat, gambar dapat menambah minat pada halaman. Meski begitu, ada setidaknya satu cara untuk mendapatkan tampilan latar belakang gambar tanpa benar-benar menggunakan gambar sama sekali, dengan memanipulasi warna latar belakang sel tabel untuk efek grafis.

G.    PETUNJUK KERJA DENGAN GRAPHICS

Berikut adalah aneka petunjuk kerja dengan grafis :

a.       Think in  Pixels

Latihlah diri Anda untuk berpikir tentang piksel, bahkan tidak mencoba untuk menerjemahkan piksel dalam inci atau sentimeter.

b.      Bekerja dengan Visual Echoes

Konsistensi visual situs ditingkatkan dengan mengulangi seluruh elemen situs  grafis. Pertimbangkan hal berikut:

Ø  Ulangi elemen dari logo tempat lain pada halaman. Misalnya, memilih bentuk  sederhana dari logo dan mengulanginya sebagai sebuah ikon, tombol, atau bullet.

Ø   Pilih warna dari logo atau foto dan mengulanginya di tempat lain pada latar belakang, pada bullet, atau link teks. Gunakan pipet / alat pemetik warna di Fireworks atau Photoshop untuk mengidentifikasi kode warna.

Ø  Pilih suasana hati yang konsisten untuk grafis.

c.       Simpanlah 1 x 1-Pixel GIF

Sebuah  transparan GIF 1 x 1-pixel adalah hal yang berguna untuk dimiliki. Hal ini dapat digunakan sebagai filter untuk sel tabel kosong, yakni untuk menghindari kecenderungan browser  yang lama tersendak. Sebuah GIF transparan juga berguna sebagai sebuah spacer. Sebagai contoh, kita mungkin ingin ruang ekstra antara dua gambar. Meskipun kita bisa menggunakan beberapa karakter untuk spasi,  itu tidak memberikan jumlah yang tepat dari  suatu piksel . Sebuah GIF transparan dalam <img tag />,  bisa menentukan ketinggian dan lebar yang tepat.

d.      Hindari Klise Web

Hindari klise web seperti berputar, sepengendali-sepengendali Dan jaring bola, atau amplop animasi untuk email.

e.       Pertimbangkan dalam Menggunakan Penyunting Borders

Gambar umumnya memakai batas standar HTML, selama beberapa tahun, pembatasan dipandang sebagai passé dan dimatikan sepenuhnya.

f.       Gunakan Dreamweaver Membuat  remote Rollover  

Kami melihat rollovers Grafis (Juga disebut mouseovers) secara mendalam dibahas pada Bab 3, penggunaan secara umum adalah untuk rollovers Navigasi gambar. mengubah gambar dengan bebasnya di saat membuka posisi auditan lain. Rollovers digunakan untuk efek grafis, hanya untuk menampilkan alternating gambar. Kita dapat menggunakan Adobe Dreamweaver untuk membuat rollover standar, Dan kemudian pengguna mengubahnya menjadi rollover remote:

1.      Pada Dreamweaver, pilih Insert> Penyunting Objects> Penyunting Rollover.

2.      Illustrasi bentuk Yang dihasilkan:

Ø  Berikan nama gambar yang unik, atau menggunakan nama generik yang disarankan dreamweaver.

Ø   menyediakan URL untuk gambar asli  serta URL  gambar rollover.

Ø  periksa"gambar rollover preload."

Ø  menyediakan teks alt untuk gambar.

Ø  ketik "#" (digunakan ketika tag <a> tidak dimaksudkan untuk memuat auditan lain) illustrasi"ketika diklik, masuk ke URL" area.

3.      Klik "OK", sehingga Dreamweaver menulis HTML dan JavaScript untuk rollover.

4.      Hapus hanya <img tag /> dari dalam tag <a> yang dihasilkan Dreamweaver, dan memindahkannya ke daerah halaman di mana gambar rollover dibuat.

5.      Ganti gambar dihapus dalam tag <a> dengan teks atau gambar yang seharusnya bukannya berfungsi sebagai pemicu rollover.

g.      Nama Gambar Berfungsi, Atribut Non Visual.

Ketika menyimpan gambar, pastikan  namanya dapat  berfungsi, bukan oleh beberapa atribut visual, karena atribut visual yang mungkin berubah di masa depan. Katakanlah kita telah menciptakan
sebuah situs web dengan tombol merah untuk navigasi dan tombol biru untuk mengirimkan bentuk. Jika kita nama tombol "buttonRed" dan "buttonBlue" dan  skema warna dari perubahan situs web, nama tombol kita menjadi tidak berarti. Sebaliknya, jika nama tombol "buttonSave" dan "buttonSubmit," jika  tiba-tiba dari pihak manajemen mengubah skema warna dari suatu situs file kita tidak perlu dikhawatirkan dan pada kenyataannya relatif tanpa masalah.

H.     ANIMASI
Animasi tidak diragukan lagi, menggoda bahkan mungkin lebih menggoda daripada semua grafis dan fotografi berbasis elemen yang telah kita bahas sampai sekarang.Tapi terkadang lebih menyenangkan bagi para desainer untuk menciptakan bagi pengunjung. Dengan memasang animasi  dapat meningkatkan ukuran file dan waktu download.

a.       Terminologi Animasi

 Sebelum melihat format animasi, kita terlebih dahulu  mengkaji tentang terminologi umum. Sebuah bingkai (disebut sel dalam animasi tradisional) adalah satu gambar dalam animasi. Sebuah keyframe adalah awal atau akhir dari sebuah gerak jalan. Sebuah bola memantulkan animasi mungkin memiliki keyframe di bagian atas ketika mental dansatu lagi saat menyentuh tanah. Mungkin ada sepuluh frame antara keyframe di permukaan tanah dan keyframe di bagian atas busur mental, dan lain 10 frame pada paruh bawah dari bouncing. Tweening adalah proses menciptakan "di antara" frame antara dua keyframes. Kita dapat menggunakan tweening untuk melakukan lebih dari sekedar mengubah posisi obyek. Tweening dapat interpolasi hampir semua atribut objek, dari bentuk ukuran warna

b.      Format  Animasi

Ada tiga format animasi web yang umum, yakni: JavaScript, animasi GIF, dan Flash. Animasi JavaScript baik  melibatkan –tugas yang cukup berat dalam pemrograman keterampilan. Animasi GIF dapat dibuat dalam  program  editing gambar yang mendukung standar GIF. Animasi GIF terdiri dari gambar GIF beberapa ditumpukan di atas satu lain. Foto-foto tersebut dimainkan secara berurutan untuk mensimulasikan gerakan.  Bingkai Animasi GIF  selama Editing, menunjukkan "menangani" garis gerak untuk animasi.  Animasi Flash adalah program  berbasis grafis  vektor, seperti dibahas sebelumnya.
Salah satu pilihan untuk animasi  Flash yang menentukan  animasi mulai bermain sebelum mendownload seluruh file, sisa download file di background sementara urutan awal bermain.

I.       GRAFIS DAN AKSESIBILITAS

Karena grafik, dengan sifatnya, media visual, fokus utama kami adalah untukmembuat informasi grafis diakses pada layar pembaca. Ada beberapa cara kita bisa memfasilitasi hal ini:

-          Memberikan alternatif setara dengan konten visual. Setidaknya, setiap elemen nontext(gambar, applet, Flash,  files video, dan files  audio) harus termasuk atribut alt untuk menggambarkan tujuan elemen. Meskipun alt teks cukup lengkap dengan tujuan yang jelas, juga harus cukup singkat, sehingga pengunjung  tidak terlalu tertunda mendeskripsikannya

-          Elemen link non-teks, mengisi atribut alt dengan deskripsi
tujuan link.

-          Jika deskripsinya  lebih panjang diperlukan untuk setiap elemen non-teks, gunakan longdesc atribut pada tag /> <img untuk link ke halaman yang terpisah berisi deskripsi.

-          Untuk kompleks elemen non-teks seperti grafik dan diagram, dilengkapi  dengan tekstual deskripsi rinci, baik pada halaman itu sendiri atau dapat diakses oleh longdesc.

-          Untuk elemen yang murni dekoratif, menyediakan  atribut alt singkat
(alt = "Perusahaan logo"), atau atribut alt kosong (alt = "").

-          Gunakan "Situs" dan kemudian "Laporan" perintah dalam Dreamweaver untuk memeriksa penyimpangan aksesibilitas dan tag alt hilang.

-          Lihat di www.w3.org/wai/, www.usablenet.com, dan www.adobe.com/accessibility/ untuk informasi lebih lanjut.

DAFTAR PUSTAKA

Penny Mclntire. 2008. Visual Desain for Modern Web.USA: New Rider