GIF memang telah kita kenal dapat memproduksi gambar dengan transparansi untuk latar, hanya saja, transparansi GIF ini memiliki kekurangan yaitu tidak dapat menampilkan dengan sempurna transparansi gambar yang memiliki Anti Aliasing, serta dukungan GIF akan warna yang hanya 256 warna.

Perhatikan perbandingan Transparansi antara GIF dengan PNG pada gambar di bawah :

Gambar diatas diberikan efek bayangan atau shadow hingga pada bayangan menampilkan gambar yang tembus pandang atau transparan, GIF tidak dapat menampilkan bayangan ini secara transparan, akibatnya pada bagian transparan tersebut ditampilkan warna matte dengan warna default putih.

Secara langsung maupun tidak langsung, penggunaan Alpha Transparency PNG dipopulerkan oleh kalangan pengembang aplikasi opensource, sebagaimana PNG. Beberapa browser seperti Mozilla, Opera, dan browser lainnya telah dengan baik mendukung Alpha Transparency, terkecuali IE yang baru dapat menampilkan Alpha Transparency dengan baik pada IE 7. Alpha Transparency juga secara masif dipergunakan dalam aplikasi grafis untuk linux seperti KDE, untuk pembuatan Icon, maupun user interface.

Alpha Transparency dari PNG dapat dipergunakan untuk berbagai keperluan, diantaranya adalah penggunaan gambar transparan untuk keperluan animasi pada Macromedia Flash. Saya pribadi, sering menggunakan Alpha Transparency untuk pembuatan user interface untuk beberapa aplikasi web-based maupun skin browser yang diperuntukan bagi browser Mozilla.

Bila kita membuat sebuah objek dengan anti-aliasing yang tidak diaktifkan, maka tampilan dari sisi objek akan seperti:

Hal ini akan mengakibatkan tampilan dari objek tampak tidak rata. Dengan Anti-aliasing, maka tampilan dari objek akan ditambahkan warna yang membuat matakita menangkap gradasi dari objek ke latar.

Dengan demikian, objek grafis yang diberi Anti-aliasing akan terlihat halus.

Namun permasalahan dengan dipergunakannya Anti-aliasing ini akan mempersulit pada grafis yang memiliki latar transparan seperti pada seperti pada GIF. Untuk mengatasinya, gunakan matte-background yang memiliki warna sama dengan latar background. Bila Anda menggunakan PNG-24, masalah ini dapat diselesaikan dengan mengaktifkan Alpha transparency, yang dapat dipergunakan pada warna latar manapun. Namun sayangnya Alpha-transparency ini tidak didukung oleh browser yang kini paling banyak dipergunakan yaitu Internet Explorer. (Pupung Budi Purnama)

Permasalahan yang saya hadapi adalah dari layouting dari desain itu sendiri. Desain yang telah dibuat bisa saya bilang “Web Unfriendly” karena setelah di konversi, desain tersebut menghasilkan filesize dan layouting tabel yang rumit.

Tidak hanya dipenuhi image dan icon-icon besar yang tersebar di dalam desain yang dibuat, tapi ada hal lain yang menarik perhatian saya, yaitu gradasi dan tataletak navigasi diagonal.

Gradasi
Desain yang dibuat memiliki latar dengan warna ungu gradasi dengan warna mudanya. Gradasi warna yang diberikan adalah seperti pada gambar dibawah (dalam ukuran 800×600).

Seperti pernah diulas pada artikel sebelumnya, gradasi menyebabkan kompresi LZW pada GIF membuat banyak pola, hingga bakcground ini bila disave dengan format GIF akan menghasilkan filesize yang besar. Untuk hal ini, saya menggunakan format JPEG dengan kualitas kompresi high (60).

Alasan lainnya, background diatas akan menyulitkan dalam pola (pattern) dari background akibatnya bila ukuran resolusi melebihi ukuran desain yang dibuat maka pola background akan terlihat tidak menyatu.

Diagonal
Hal lainnya adalah tataletak navigasi yang terbilang “tidak biasa” yaitu menu-menu diletakan secara diagonal pada sisi kanan bawah, hingga pada proses slicing, akan membuat tabel yang rumit. Tidak hanya itu, image-image selain menu yang bertaburan sebagai penghias dari halaman tersebut membuat saya berfikir ekstra untuk menghasilkan hasil akhir yang optimal. Perhatikan hasil slicing yang dipergunakan:

Pada slicing diatas terpaksa “aturan tabel” dilanggar (baca artikel tip slicing image) karena banyaknya image dan teks yang tersebar pada halaman.

Bagaimana Sebaiknya?
Dalam menampilkan background, sebaiknya pergunakan background yang memudahkan untuk di-pola (pattern) yang memiliki filesize yang kecil. Bila harus menampilkan gradien, pergunakan gradien vertikal atau horisontal agar dapat dibuat pola dengan mudah, kemudian Anda dapat menggunakan CSS untuk mengatur tampilan dan letak dari background tersebut.

Dalam membuat merancang situs Web pertimbangkan pula tataletak aturan tabel untuk mempermudah dalam konversi kedalam HTML. (Pupung Budi Purnama)

LZW adalah sistem kompresi yang menggunakan alogaritma, yang mengkompresi gambar dengan metode lossless , artinya tampilan gambar setelah kompresi akan sama dengan sesudah kompresi, tentu saja bila file yang dikompresi memenuhi standar GIF (256 warna), bila tidak, GIF akan menkonversinya menjadi standar GIF.

Kompresi LZW, akan membaca terlebih dahulu penggunaan warna dan tekstur yang sama dalam sebuah baris horisontal, yang digunakan secara berulang-ulang atau sama. Setelah itu LZW akan memperbarui gambar tersebut dengan mengambil index elemen gambar yang sering diulang tersebut, kemudian menampilkan kembali index dari elemen- elemen yang sama tersebut. Penggunaan elemen yang sama ini akan menghemat penggunaan kompresi, karena kompresi LZW akan lebih sedikit memerlukan data untuk mengkompresi elemen gambar.

Sebagai contoh, perhatikan gambar dibawah:

Gambar diatas memiliki filesizy sekitar 1Kb (965 byte), kemudian putar gambar tersebut menjadi seperti gambar dibawah:

Maka besar file setelah diputar adalah 1,3Kb. Gambar vertikal lebih kompleks pada baris horisontal, akibatnya kompresi LZW memerlukan data yang lebih banyak untuk menampilkan gambar yang akurat.

Pada kasus lain, misalnya pada warna yang memiliki gradien, maka file akan lebih besar dari pada gambar dengan pola atau pattern.

Pada gambar sebelah kiri, komposisinya tidak sekompleks gambar yang di kanan. Pada gambar disebelah kanan, komposisi warna sangat banyak, hingga besar file meningkat drastis. (Pupung Budi Purnama)

Terdapat beberapa tipe dari sistem penampakan dan penyusunan warna pada indexed palletes, diantaranya adalah adaptive, system, exact, and web.

Adaptive: Adaptive, disebut juga optimized, adalah sistem penyusunan warna dengan cara meresampling gambar, mengacu kepada warna yang paling banyak digunakan oleh gambar tersebut. Contohnya, bila sebuah gambar disusun lebih banyak oleh hijau dan biru, maka, index akan me resampling warna lain mengacu kepada warna yang paling banyak dalam gambar tersebut, hasilnya, gambar tersebut akan lebih banyak mengandung warna antara hujau dan biru. Bila dalam gambar tersebut memiliki warna lain dengan jumlah yang lebih sedikit maka warna yang sedikit itu akan hilang.

System: disebut juga Uniform, yaitu penggunaan warna 8 Bit berdasarkan platform yang anda gunakan. Pilihan ini dapat mengubah gambar image anda dengan sangat kasar, akibatnya kualitas menjadi menurun drastis dan besar file meningkat.

Exact: Bila dalam index terdapat 216 warna, maka jumlah warna tersebut yang akan disimpan. Pada beberapa software Image Editing, pilihan exact akan tersedia bila jumlah warna pada gambar kurang dari 256, bila lebih dari itu, pilihan exact tidak akan tersedia.

Web/Browser: Index warna yang digunakan berdasarkan kepada susunan warna RGB yang digunakan oleh browser, jumlah warna dari RGB ini adalah 216 warna.

Setiap sistim Indeks pallete memiliki kelebihan dan kekurangannya, pastikan Anda mengenal karakteristik format image dan keperluan warna untuk dapat menyesuaikan agar hasil yang diperoleh maksimal. (Pupung Budi Purnama)

*gambar dan sumber dari Lynch, Patrick; Web Style Guide 2002.

1. Mark-Ing
Sebuah desain logo bisa menjadi mark-ing (mudah diingat), jika ada sebuah bentuk yang diinterpretasikan. Dan untuk melakukan interpretasi ini biasanya seorang desainer menggunakan ?teori analog? untuk mewakili bentuk yang dimaksud. Bentuk yang dimaksud biasanya diambil dari nama sesuatu objek (corporate atau produk) yang dibuat logonya.

Semisal logo corporate ?Redshoe?, maka istilah shoe di sini yang dijadikan sebagai aksentuasi (titik focus)
diwakilkan dengan bentuk sepatu wanita. Dan dominasi logo bisa menggunakan symbol ini.

2. Eye-Catching
Sebuah desain logo akan memiliki nilai lebih jika memiliki unsur eye-catching. Dari sekian banyak gambar yang dipajang, baik di outlet, toko buku, atau tumpukan kartu nama, apakah logo tersebut mampu menarik perhatian lebih dominan dibanding gambar atau bentuk yang lain?

Untuk mampu membuat sebuah desain logo yang eye-catching memang tidak mudah. Ada beberapa hal yang musti dipertimbangkan. Mulai target pasar, karakteristik audience yang dituju, atau media yang akan dipakai, dan sebagainya. Tetapi hal ini bisa dipelajari, dan membutuhkan jam terbang yang tinggi.

Salah satu dari unsur di atas yang membuat sebuah desain memiliki eye-catching adalah konsep bentuk yang unik. Selain bentuk yang mark-ing bentuk yang unik juga menjadi salah satu syarat sebuah desain logo mampu menyita perhatian audience. Ada banyak symbol yang bisa dipakai untuk menginterpretasikan sebuah objek, tetapi dari beberapa pilihan alternatif sebenarnya ada salah satu atau salah dua yang lebih eye-catching. Dari bentuk dasar sebuah desain logo sebenarnya bisa ditambahkan cosmetic ( meminjam istilah fashion ) atau ornamen pendukung, berupa bentuk yang sifatnya sebagai pemanis. Selain itu karena sifatnya cosmetic di sini hanya sebagai pemanis, maka kekuatannya tidak begitu dominan. Bentuk yang dipilih sebagai cosmetic bisa berupa bentuk bulat, persegi, kotak, segitiga, atau sekedar garis lengkung.

Semisal logo corporate ?Redshoe? di atas, dari bentuk dasar sebuah objek image ?sepatu? kita bisa mengolah bentuk dasar tersebut menjadi beberapa pilihan, disesuaikan bagian mana yang ingin di tonjolkan. Atau dengan menambahkan ornament bentuk sebagai cosmeticnya.

3. Trend

digital, dimana bentuknya disini lebih banyak diwakili oleh garis dan dot (titik). Hal ini mengacu pada era IT yang berkembang pesat di awal tahun tersebut. Dimana banyak bentuk-bentuk yang mewakili dunia IT menjadi trade mark logo-logo yang lahir pada masa itu. Mulai dari bentuk font sampai konsep efek matrix berpengaruh besar pada proses kelahiran logo-logo.

Trend sebenarnya identik dengan wabah influenza yang menyebar tanpa bisa diketahui asal muasalnya. Saling mempengaruhi dan memiliki masa incubasi. Kadang sifatnya ?circular? atau berulang, dimana konsep lama kembali menjadi trend baru. Banyak faktor yang menyebabkan adanya trend ini, yang semuanya berasal dari external. Bisa karena gejala yang terjadi di sekitar kita, seperti fashion, TV, system, politik, dsb.

Di era tahun 70-an, desain lebih banyak menggunakan bentuk detail untuk menginterpretasikan suatu objek. Desain logo yang ada banyak menggunakan ilustrasi yang sifatnya detil (mendekati aslinya). Mungkin tepatnya aliran naturalis, begitu mempengaruhi konsep desain logo-logo yang lahir pada masa itu. Kemudian pada era tahun 90-an, konsep desain logo berubah ke arah yang lebih simple. Bentuk objek yang detil tidak lagi digunakan untuk menginterpretasikan sebuah logo. Desain yang ada lebih
cenderung minimalis. Dan pada era tahun 2000 perkembangan berubah lebih kompleks lagi selain bentuk juga coloring (tata warna) menjadi sangat minimalis di sini. Warna?warna yang dipakai dalam logo-logo yang lahir di era ini cenderung menggunakan warna-warna
?solid color? dan berkesan minimalis, selain bentuk garis dan dot. Mungkin istilah yang lebih pas untuk ini adalah ?era-Clipart?.

Logo dengan konsep bentuk detil Logo dengan konsep bentuk simple

Dalam menyikapi trend, ada hal yang bisa dipakai sebagai acuan dalam merancang sebuah desain, apakah sebagai ?pengikut trend? ataukah sebagai ?pencipta trend?, atau malah kita tetap solid pada atmosphere khas desain kita. Semua terserah para desainer memposisikan desainnya. Yang pasti trend adalah salah satu bentuk apresiasi dinamika sebuah perkembangan. Selama kita melihatnya sebagai hal yang positif maka kita akan memiliki nilai tambah wawasan dan ide yang lebih luas. Begitu juga sebaliknya, jika kita
melihatnya sebagai penghambat maka kita tidak akan bisa menerima kekurangan desain kita secara lebih proposional.

Penulis:
Yudi Widsman Drahta. seorang pekerja IT dan pengajar di salah satu perguruan tinggi di Surabaya.

Dikarenakan pixel terkait dengan resolusi (baca artikel sebelumnya mengenai Resulosi Gambar dan Monitor), pengecilan dan pembesaran ukuran gambar dengan software tertentu seperti Photoshop atau Fireworks, akan berpengaruh pada kualitas gambar itu sendiri. Pengecilan gambar menyebabkan meningkatnya jumlah ppi pada suatu gambar (ingat, perubahan resolusi gambar, tidak terkait dengan resolusi monitor). Mengecilkan gambar, mungkin tidak akan terlihat penurunan kualitas gambar, selain dimensi/ukuran image mengecil dan bila gambar hasil pengecilan ini dicetak, kualitasnya akan lebih baik.

Bila anda melakukan pembesaran (dengan zoom tool) atau resizing gambar, gambar akan terlihat seperti kotak-kotak, resolusi yang menyusun gambar tersebut menjadi lebih kecil dikarenakan resizing atau zooming tersebut hanya memperbesar ukuran tampil dari pixel. Hasil dari resizing ini, tentu sangat tidak diharapkan, gambar akan terlihat lebih kasar.

Pada software aplikasi pengolah grafis seperti Photoshop, Fireworks, Paintshop Pro, atau Gimp pada Linux, hal tersebut dapat diperbaiki menggunakan metode resampling . Resampling adalah pembuatan pixel baru untuk memperbaiki gambar akibat resizing, hingga tampilan gambar menjadi lebih baik.

Menggunakan metode resampling, program aplikasi pengolah gambar akan menambahkan pixel-pixel baru diantara pixel yang diresize, Secara matematis program akan memperkirakan warna dan pixel baru untuk ditambahkan diantara warna pixel-pixel yang berada didekatnya. Prosesnya disebut interpolation. Pembesaran gambar dengan cara ini sebenarnya tidak mengubah resolusi dari gambar.

Metode dari resampling ini ada beberapa, tapi yang sering kita kenal adalah: Billinear dan Bicubic .

Billinear: Pada pembuatan pixel baru, metode ini mengacu pada 4 pixel yang berada di dekatnya, di bagian atas, bawah, kiri, dan kanan. Dari keempat warna pixel tersebut kemudian ditentukan pixel baru dengan warna yang merupakan warna campuran dari keempat pixel. Metode Billinear juga menggunakan antialias untuk menghindarkan penajaman pada sisi-sisi objek atau gambar. Hal tersebut akan mengakibatkan gambar akan bersifat soft atau sedikit blur.

Bicubic: Prinsip kerja dari bicubic pada dasarnya sama dengan Billinear namun metode resampling yang digunakan mengacu pada 8 pixel yang terdapat disekitar pixel yang akan dibuat, pixel pixel tersebut adalah pixel yang digunakan pada billinear ditambah pixel-pixel diagonal pada pixel yang akan dibuat.

Tidak ada petunjuk baku mengenai penggunaan kedua metode ini, namun menurut user manual dari Paint Shop Pro gunakan Billinear untuk memperkecil gambar, kemudian Bicubic untuk memperbesar gambar. Tentunya Anda dapat bereksperimen dengan kedua metode ini, dan pilihlah metode yang menurut Anda lebih baik.

Disamping itu terdapat metode lain, namun metode tersebut tidak termasuk menggunakan metode interportion, diantaranya adalah:

Nearest Neighbor : Sebenarnya resampling ini tidak menggunakan metode interpolation, tapi lebih pada penggunaan banyaknya warna tertentu pada suatu gambar.

Pixel Resize : Metode ini sama hasilnya seperti Anda memperbesar gambar dengan Zoom tool.

Nah, Mudah-mudahan dengan membaca artikel diatas Anda akan lebih mengetahui tentang teknik interpolasi pada suatu gambar yang di-resize. (Pupung Budi Purnama)

Fungsi utama kita meletakan sebuah garis pada sebuah desain Web adalah sebagai pemberi batas. Garis sering dipergunakan sebagai pemisah konten satu dengan yang lainnya. Misalnya, antara kolom kiri dengan tengah, menu dengan body, dan lain-lain.

Fungsi kedua adalah penegas dari batasan yang telah ada, misalnya sebuah kolom telah diberi warna untuk dapat dibedakan dengan kolom lain, kemudian garis dipergunakan pada kolom tersebut agar terlihat lebih berbeda dengan kolom lain.

Fungsi ketiga adalah sebagai hiasan atau dekorasi saja. Fungsi garis untuk dekorasi ini biasanya banyak dipergunakan sebagai variasi terhadap huruf atau gambar. Selain ketiga fungsi diatas, perpaduan garis yang serasi juga dapat menjadikan desain Anda “Clean”, rapi, dan elegan.

Berikan jarak yang cukup antara garis dengan konten
Hal ini bertujuan untuk memberikan daerah kosong atau whitespace agar tampilan situs Anda tampak “menyenangkan” dan lebih rapi. Anda dapat membaca artikel mengenai whitespace untuk lebih memahami tentang pengaturan jarak ini.

Berikan garis warna yang lebih muda dari konten (teks)
Warna antara elemen garis dan teks sebaiknya dibedakan. Sebab, warna yang lebih kuat biasanya lebih diperhatikan dari pada warna pudar. Berikan warna kuat pada teks, sedangkan warna pudar untuk garis.

Jangan menggunakan garis diantara garis
Jangan gunakan garis diantara garis, hal ini akan mengakibatkan situs Anda terkesan penuh dan sesak. Penggunaan garis yang berlebihan malah membuat desain tidak sedap dipandang dan membingungkan.

Itulah beberapa tips mengenai penggunaan garis, seperti pepatah mengatakan “pergunakan garis dengan bijak”. Semoga bermanfaat bagi Anda. ( Pupung Budi Purnama )

Pernyataan diatas, tentu bikin “perih” mata para desainer yang membacanya. Pernyataan diatas ada benarnya juga, tapi tidak sepenuhnya benar. Pada beberapa buku yang ditulis oleh praktisi desain mereka sangat menekankan mengenai penggunaan image pada sebuah halaman Web. Pada artikel ini, kita akan berbincang mengenai kegunaan image pada sebuah halaman Web. Image dalam artikel ini bukan image yang diperuntukan sebagai ilustrasi dalam sebuah teks (Mis. Foto dari sebuah berita), tapi image sebagai dekorasi atau hiasan, seperti image yang terdapat pada bagian atas/header Design World.

Image sebagai pengenal
Sejak kita kecil, bahkan ketika kita belum bisa membaca huruf, gambar adalah salah satu yang dapat kita “baca”. Kita mengenal hewan-hewan buas seperti harimau dan beruang melalui gambar-gambar yang diperkenalkan oleh orang tua kita. Begitu pula dengan Web. Pada sebuah halaman Web, gambar dapat menjadi ciri dari sebuah situs. Gambar sebuah perusahaan penyedia jasa internet tentu berbeda dengan situs penyedia jasa keuangan. Gambar inilah yang akan memperkenalkan sebuah situs kepada pengunjung walaupun ia tidak membaca teks yang ada pada halaman Web tersebut.

Image sebagai penarik perhatian
Bila kita berjalan-jalan di pertokoan, kita mudah tertarik dengan iklan-iklan dengan gambar yang menarik. Karena penyajian gambar yang menarik, bahkan kita jadi membaca teks (padahal sebelumnya malas) yang menyertai gambar tersebut yang biasanya memiliki porsi yang lebih kecil dari gambar. Fungsi inilah yang selalu diusung untuk menampilkan image pada sebuah halaman Web yaitu penarik perhatian atau eye catcher. Ada 3 faktor yang dapat menarik pengunjung dengan grafis yang ditampilkan di Web yaitu; warna, objek, dan tataletak.

Image sebagai penyampai pesan
Sebuah perusahaan asuransi, pada halaman Webnya memajang gambar sebuah keluarga yang bahagia sedang bertamasya di pegunungan. Anda tentu sudah dapat mengambil maksud dari gambar tersebut, bahwa dengan menggunakan layanan asuransi, maka Anda dan keluarga menjadi lebih tenang dan bahagia, tidak usah menghawatirkan hal-hal lain karena telah diasuransikan. Gambar yang ditampilkan sebagai penyampai pesan ini, akan sangat mudah dicerna oleh pengunjung dari pada mendeskripsikannya dengan kata-kata.Itulah kegunaan image secara umum yang biasa kita pergunakan pada sebuah halaman Web. Bila image dalam sebuah Web dapat mewakili dari ketiga fungsi diatas, bisa jadi gambar yang Anda tampilkan di halaman Web akan lebih bermakna dan “mengena” bagi para audiens situs Anda. Ada pepatah lama mengatakan “Gambar melukiskan beribu kata”. ( Pupung Budi Purnama )