Cara Resize Image Untuk Tampilan WEB Dengan Photoshop

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

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 ==>

41 Responses to Cara Resize Image Untuk Tampilan WEB Dengan Photoshop

  1. Ping-balik: Bacaan Menarik « SUPRIYANTO Blog

  2. Ping-balik: TUTORIAL | MULTIMEDIA DESIGN

  3. Ping-balik: Teknik Dasar Cara Mewarnai Rambut Dengan Photoshop | multimedia tutorials

  4. Toni mengatakan:

    Wah saya belum install Photoshop CS5. Nanti akan saya install di laptop saya agar bisa mempraktekkan tutorial diatas guna memperbesar foto2 milik saya
    Trims

Beri Komentar Seikhlasnya Saja ==>

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: