6 Tips untuk Pemula Desainer Web Grafis di Photoshop

Desain grafis dan desain web adalah dua bidang visual yang berbeda yang memiliki kebutuhan yang berbeda, praktik terbaik dan metodologi.
Sebagai contoh, itu jauh lebih mudah dalam desain web untuk menggunakan format file pixel-based/raster-based (seperti JPG, GIF atau PNG). Sebaliknya, file vektor seperti EPS dan AI - yang terukur tanpa menyebabkan pixelation - lebih cocok untuk desain grafis, untuk hal-hal seperti logo yang dapat digunakan dalam berbagai ukuran. Saat ini belum, grafis berbasis vektor yang dirancang untuk web (seperti SVG atau HTML5 Canvas ) tidak universal dan seragam didukung di semua browser.

Selain itu, grafis dimaksudkan untuk penggunaan web memiliki praktek terbaik tertentu yang terkait dengan mereka. Salah satu praktik terbaik adalah bahwa Anda harus sadar berat berkas karena Anda ingin halaman web Anda untuk menjadi secepat mungkin . Sebagai seorang desainer web, Anda harus mencoba untuk mengurangi jumlah permintaan HTTP yang dilakukan oleh grafis Anda - baik melalui menurunkan jumlah gambar yang Anda gunakan atau menggabungkan beberapa dari mereka ke dalam sprite CSS - serta pastikan Anda memilih citra yang tepat Format yang menyerang keseimbangan sempurna antara ukuran file dan kualitas gambar.
Photoshop adalah alat standar industri yang digunakan oleh kedua desainer grafis dan web desainer. Berikut adalah beberapa tips sederhana untuk mengikuti ketika Anda membuat grafik dimaksudkan untuk digunakan pada situs web.

1. Simpan Graphics Anda dengan "Save for Web & Devices" Command

Dalam desain web, Anda harus memastikan bahwa gambar Anda adalah sebagai kecil dalam ukuran file mungkin. Tapi lebih dari itu - gambar Anda perlu melihat baik juga.
Pendekatan yang sempurna untuk menciptakan grafis dalam Photoshop adalah dengan menyeimbangkan kualitas gambar dan ukuran file.
Kesalahan umum yang web desainer membuat menggunakan Simpan sebagai perintah bukan Save for Web & Devices perintah dalam Photoshop.

Simpan untuk perintah Web & Devices menciptakan file dioptimalkan untuk desain web, dari segi kualitas gambar, resolusi gambar, kompatibilitas browser dan ukuran file.
Perintah tambahan memiliki jendela dialog yang dapat Anda gunakan untuk menyempurnakan gambar Anda. Meskipun Anda men-tweak pengaturan grafis Anda, ia akan menampilkan efek pada ukuran file dan kualitas gambar.

Sebagai perbandingan, Simpan sebagai jendela dialog tidak memiliki banyak pilihan dan sering menciptakan gambar yang lebih besar dalam hal ukuran file.

Di bawah ini adalah perbandingan dari gambar yang sama disimpan menggunakan Save for Web & Devices perintah dan Simpan sebagai perintah. Perhatikan bahwa perbedaan ukuran file yang signifikan.

2. Pertimbangkan Menggunakan Web-safe Warna

Warna web-aman akan muncul dengan benar di hampir semua browser dan pada kebanyakan monitor, memastikan website Anda terlihat sama tidak peduli di mana itu dilihat.
Dua cara termudah untuk menjamin bahwa warna yang Anda gunakan adalah web-aman adalah sebagai berikut.

"Hanya Web Colors" Option

Pada jendela dialog Color Picker, periksa "Only Web Colors" pilihan terletak di sudut bawah-kiri. Ini akan membatasi warna yang ditampilkan di jendela hanya warna web-aman.

Konversi Color untuk Warna Web-safe

Mengkonversi warna ke warna web-aman terdekat dengan mengklik kubus kecil di Color Picker (sebelah "Lancar" dan "New" kotak warna).

3. Pertimbangkan Menggunakan "Progressive Scan" Opsi untuk JPG

Format file JPG sangat ideal untuk gambar foto dan resolusi tinggi. Tergantung pada audiens Anda diproyeksikan, JPG progressive scan dapat menjadi cara untuk pergi, karena gambar secara bertahap akan membuat sebagai beban situs (meskipun pada koneksi Internet broadband modern, jenis ini waktu tunggu jarang masalah). Hal ini memungkinkan pengguna kemampuan untuk cepat melihat gambar sebelum sepenuhnya download, membuat halaman web terasa lebih responsif.

Untuk panduan yang lebih luas pada subjek, membaca JPEG 101: Sebuah Panduan Crash Course on JPEG.

4. Simpan Graphics dengan Transparansi sebagai PNGs

Format gambar PNG sangat bagus untuk gambar yang perlu diberikan dengan transparansi.

PNG transparansi didukung di hampir semua browser utama tapi hati-hati jika Anda menemukan diri Anda harus memenuhi IE6 : bagian PNG Anda yang dimaksudkan untuk menjadi transparan akan muncul abu-abu. Ada workarounds untuk menghindari masalah ini (misalnya, IE PNG Fix perpustakaan JavaScript) tetapi mereka dapat menjadi kerumitan untuk melaksanakan.
Untuk informasi lebih lanjut tentang PNGs, baca Panduan Web Designer untuk PNG Image Format.

5. Simpan Animated Graphics sebagai GIF

The GIF format gambar, sedangkan sekarang kebanyakan diganti dengan PNG, masih berguna untuk satu hal. Sementara mereka terasa grainier dari PNG dan JPG file, salah satu fitur penting dari format gambar GIF adalah kemampuannya untuk animasi.

Meskipun ada perpanjangan dari format gambar PNG disebut APNG (yang merupakan singkatan dari Animated Portable Network Graphics), itu tidak memiliki dukungan peramban .
Jika Anda memilih antara PNG dan GIF, itu biasanya ide yang baik memilih PNG kecuali gambar yang akan animasi.

6. Perhatikan "Download Time" Informasi

Ini penting untuk memastikan bahwa beban situs dengan cepat dan terlihat bagus, itulah sebabnya mengapa tabungan dan mengoptimalkan grafis Anda adalah penting. Di bawah ini, melihat apa perubahan sederhana dalam pilihan penyimpanan file dapat lakukan untuk ukuran file gambar itu.

JPEG at Maksimum Kualitas

JPEG di Quality Rendah

Sebuah praktek yang baik untuk mengikuti adalah untuk menurunkan kualitas sampai Anda tampak melihat degradasi kualitas gambar.
Bila Anda mengoptimalkan gambar Anda, selalu memperhatikan Waktu Download, yang ditampilkan di sudut kiri bawah dari Save for Web & Devices jendela dialog. Di bawah, Anda dapat melihat bahwa gambar yang disimpan akan memakan waktu sekitar 2 detik untuk men-download pada koneksi internet DSL pada pengaturan saat ini.