Cara Resize Image Untuk Tampilan WEB Dengan Photoshop

14 Maret 2012 39 Komentar

Kembali saya bahas tutorial Photoshop, dan sekarang saya akan coba berbagi Cara Resize Image Untuk Tampilan WEB Dengan Photoshop. Dan mungkin ini hanya tutorial Resize Image teknik dasar saja, dengan bantuan software pengolah gambar Adobe Photoshop. Seperti yang sudah diketahui, bahwa sebuah image/gambar terdiri dari perpaduan warna dan mungkin puluhan atau sampai ratusan warna bahkan lebih. Namun pada dasarnya hanya memiliki tiga warna primer saja, yakni Red, Green, dan Blue (RGB). Sedangkan untuk kebutuhan cetak kita meski convert ke mode warna Cyan, Magenta, Yellow, dan Black (CMYK) agar hasil cetak menjadi maxsimal.

Jika image/gambar hasil resize, kita hanya ingin mengurangi size-nya tanpa merubah dimensi pixel. Maka yang kita butuhkan adalah mengurangi  warna perpaduan dari warna yang saya terangkan diatas. Namun dalam hal ini perlu digaris bawahi, karena kita melakukan resize hanya terletak pada size tanpa mengurangi dimensi pixel, maka otomatis dalam ketajaman warnanya akan berubah sehingga image/gambar tersebut kurang jelas terlihat. Lain lagi jika resize image/gambar kita lakukan dalam size dan dimensi pixel-nya juga, maka image/gambar yang dihasilkan akan sesuai dengan yang aslinya hanya size dan pixel-nya berkurang.

Untuk tutorial resize image/gambar ini, saya buat image/gambar untuk tampilan WEB. Namun image/gambar yang dihasilkan anda koleksi pada Komputer/Laptop juga tidak masalah, atau untuk keperluan print/cetak juga saya rasa oke-oke aja … :) Dan dalam tutorial image/gambar untuk tampilan WEB disini, saya beri contoh image/gambar format .gif atau animasi saja. Dan untuk image/gambar format .gif, agar animasi yang dihasilkan setelah proses resize animasi tersebut tetap bisa dijalankan, maka dalam proses resize .gif animasinya meski format .psd. Dan jangan khawatir untuk Photoshop CS5, sudah suport terhadap animasi .gif yang kita Import dari dari pengolah gambar lain. Dengan kata lain Photoshop CS5 bisa merubah image/gambar format .gif menjadi format .psd. Berikut animasi .gif yang saya jadikan contoh dalam tutorial Cara Resize Image Untuk Tampilan WEB Dengan Photoshop … (Dimensi 250×250 pixel dan size 25,0 KB) Untuk cara membuat animasi dengan Photoshop anda dapat membacanya disini.

original : Dimensi = 250 x 150 pixel dan Size = 25,0 KB

Selanjutnya kita lakukan resize, maka langkah-langkahnya setelah gambar terbuka pada layar kerja Photoshop (harus format .psd) Klik File > Save for WEB & Devices.

Setelah kotak dialog Save for WEB & Devices tampil, lakukan setting untuk proses resize. Langkah awal tentukan format image/gambar yang ingin dihasilkan, karena saya menginginkan format .gif, tentu saya pilih GIF. Selanjutnya yang perlu diperhatikan dalam hal resize ini adalah, pada setting Lossy, Colors, dan Dither. Lihat gambar dibawah :

Keterangan :

Lossy = Semakin besar nilainya, maka semakin kecil size image/gambar (default 0);

Color = Semakin kecil nilainya, maka semakin kecil size image/gambar (default 128);

Dither = Semakin besar nilainya, maka semakin kecil size image/gambar(default 0%);

Atau bisa juga kita melakukan resize image/gambar dengan menentukan pilihan yang ada pada Preset (lihat gambar) (default Unnamed).

Berikut contoh animasi .gif hasil resize Preset tanpa merubah dimensi pixel.

GIF Restrictive : Dimensi = 250 x 150 pixel dan Size = 21,3 KB

GIF 64 No Dither : Dimensi = 250 x 150 pixel dan Size = 19,8 KB

GIF 64 Dithered : Dimensi = 250 x 150 pixel dan Size = 21,3 KB

GIF 32 No Dither : Dimensi = 250 x 150 pixel dan Size = 17,2 KB

GIF 32 Dithered : Dimensi = 250 x 150 pixel dan Size = 19,6 KB

GIF 128 No Dither : Dimensi = 250 x 150 pixel dan Size = 23,3 KB

GIF 128 Dithered : Dimensi = 250 x 150 pixel dan Size = 23,9 KB

Memang sih kalau memakai teknik Preset ini untuk perbedaan size image asli dengan size image hasil resize tidak jauh berbeda, kalau anda memakai setting Lossy, Colors, dan Dither seperti yang saya bahas diatas, anda lebih leluasa dalam menentukan setting size-nya.

Selanjutnya, jika anda menginginkan dalam resize image/gambar ini dirubah dimensi pixelnya juga. Masih dalam kotak dialog Save for WEB & Devices klik Image Size (lihat gambar). Tentukan Width, Height, dan Percent sesuai dengan kebutuhan.

Jika selesai, klik Save. Selamat mencoba dan semoga bermanfaat.

Baca Artikel Lain :

About these ads

Disimpan dalam Tutorial Dikaitkatakan dengan , , , , , , ,

Perihal onesetia82
Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma'af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati . . . Selengkapnya ==>

39 Tanggapan untuk Cara Resize Image Untuk Tampilan WEB Dengan Photoshop

← Komentar terdahulu

  1. Ping-balik: Bacaan Menarik « SUPRIYANTO Blog

  2. Ping-balik: TUTORIAL | MULTIMEDIA DESIGN

← Komentar terdahulu

Beri Komentar Seikhlasnya Saja ==>

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out / Ubah )

Twitter picture

You are commenting using your Twitter account. ( Log Out / Ubah )

Facebook photo

You are commenting using your Facebook account. ( Log Out / Ubah )

Batal

Connecting to %s

%d bloggers like this: