5 Kemampuan Teknis yang Perlu Dikuasai dalam Membuat Screenshot
Screenshot jika diterjemahkan dalam bahasa Indonesia artinya hasil tangkapan layar. Sebagai penulis blog, mungkin ada kalanya kita merasa perlu menyisipkan gambar ke dalam postingan yang akan kita terbitkan. Nah, salah satu bentuk/jenis gambar tersebut adalah screenshot. Lebih lanjut silakan baca tentang fungsi dan manfaat screenshot pada postingan blog.
Screenshot (tangkapan layar) pada dasarnya terbagi ke dalam 2 jenis, yaitu:
- tangkapan dari jendela/halaman aplikasi pada komputer (misalnya berupa kotak dialog aplikasi, kotak menu aplikasi, maupun tampilan ‘full-screen’ dari sebuah perangkat lunak).
- tangkapan halaman website (misalnya yang tampil pada web browser).
Masalahnya, membuat screenshot (tangkapan layar) yang baik dan informatif itu tidak begitu mudah. Namun bukan berarti sulit. Kita cuma perlu sedikit memahami dan menguasai beberapa teknik dasar dalam pembuatan screenshot.
Lima kemampuan teknis yang perlu dikuasai dalam membuat screenshot
-
Capturing (meng-’capture’)
Poin ini adalah langkah awal sekaligus teknik paling dasar untuk mulai membuat screenshot, yaitu menangkap objek/elemen pada layar yang hendak kita jadikan screenshot. Secara umum, caranya sangat mudah, yaitu cukup dengan menekan tombol Prt Sc (Print-Screen) jika ingin mengambil/menangkap tampilan layar penuh atau kombinasi tombol Alt + Prt Sc (jika hanya ingin menangkap jendela aplikasi yang sedang aktif).
Cara di atas adalah cara paling umum dan paling mudah. Di sisi lain, untuk menangkap/meng-’capture’ halaman website, kita bisa menggunakan aplikasi-aplikasi khusus, terutama yang sudah terintegrasi pada web browser yang biasa kita gunakan. Contohnya adalah pengaya (plugin/add-ons/ekstensi) yang berfungsi untuk meng-’capture’ halaman website. Penggunaannya cukup mudah. Kita tinggal mengklik tombol/icon aplikasi tersebut (untuk mulai meng-’capture’).

-
Paste (memasta atau menempelkan hasil tangkapan)
Poin ini cukup mudah dilakukan, yaitu cukup dengan mengklik menu edit > paste atau lewat menekan tombol Ctrl + V pada area aplikasi yang Anda jadikan tempat menampung hasil tangkapan layar. Bisa juga lewat cara klik kanan di area aplikasi, lalu klik opsi ‘paste’. Namun hal ini cuma wajib Anda lakukan jika menggunakan aplikasi semacam “Adobe Photoshop” atau “Microsoft Paint” (di lingkungan OS Windows).
Pada beberapa aplikasi pengolah gambar lainnya, memasta atau menempelkan gambar hasil tangkapan (bahkan meng-capture layar dan langsung menyimpan hasilnya) cukup dilakukan lewat mengklik menu tertentu. Misalnya jika menggunakan aplikasi Shutter (di Ubuntu), maka kita cukup memilih list objek/jendela/halaman yang ingin ditangkap, lalu cukup melakukan satu kali klik. Setelah itu, gambar otomatis akan tersimpan pada folder/direktori default penyimpanannya.
-
Cropping (memotong)
Ada kalanya kita hanya ingin menonjolkan objek atau bagian tertentu saja dari hasil tangkapan layar. Di situlah pentingnya melakukan pemotongan (‘cropping’). Dengan melakukan pemotongan gambar hasil tangkapan, kita bisa membuang bagian lain yang kurang penting atau kurang mendukung informasi yang hendak kita tonjolkan.Hal ini juga bisa mengurangi/menghemat ukuran gambar akhir yang akan dihasilkan nantinya (dalam satuan byte atau kilobyte).
Mari perhatikan 2 buah gambar/screenshot berikut. Kasusnya adalah ketika saya hendak menyajikan screenshot jumlah total postingan yang sudah saya publish di blog ini dan sekaligus memberitahukan bahwa saya sudah menggunakan versi wordpress 3.2

gambar pertama

gambar kedua
Saya rasa Anda semua setuju, bahwa gambar kedua lebih efisien. Muatan informasi utama yang hendak ditonjolkannya juga lebih jelas (keterangan tentang jumlah total postingan & versi WordPress yang digunakan). Gambar kedua juga jauh lebih kecil ukurannya (dalam byte), walaupun dimensi lebarnya sama dengan gambar pertama.
Untuk meng-’crop’ gambar hasil tangkapan, Anda bisa gunakan berbagai aplikasi pengolah gambar yang tersedia. Intinya, gunakan menu yang bertuliskan “Crop”. Saya sendiri lebih sering menggunakan aplikasi Shutter di Linux (untuk memotong gambar).
-
Resizing (mengatur ulang dimensi gambar)
Ada kalanya kita ingin memperkecil ukuran dimensi gambar hasil tangkapan yang telah kita buat, baik itu berupa halaman penuh, jendela aktif, maupun yang telah kita potong dan sisakan pada bagian tertentu saja.
Nah, melakukan ‘resize’ adalah pilihan tepat dalam hal ini. Resize berfungsi untuk memperkecil skala image/gambar yang berupa ukuran lebar/width dan tinggi/height. Biasanya dicerminkan dalam satuan pixel (px) atau persen (%). Menu resize atau ‘scalling’ ini biasanya sudah ada pada berbagai aplikasi pengolah gambar. Saya sendiri biasa menggunakan menu ‘Scale Image’ pada aplikasi GIMP di Linux.
Contoh menu resize bisa Anda lihat pada gambar berikut:

menu ‘scale image’ pada GIMP
Anda perlu sedikit jeli dalam menentukan berapa pixel atau berapa persen lebar dan tinggi gambar yang hendak Anda hasilkan. Jika untuk postingan blog, tentunya Anda harus menyesuaikan dengan lebar area konten utama blog Anda (terutama lebar paragraf atau lebar
post-body).Prinsipnya: upayakan agar hasil ‘resizing’ tidak mengurangi kejelasan informasi pada gambar yang Anda hasilkan.
Pada kasus format gambar tertentu (misalnya PNG), biasanya ukuran byte gambar hasil resize-nya malah membesar (walaupun kualitas visual gambarnya tetap baik).
-
Compressing (mengompres ukuran byte gambar)
Kemampuan teknis ini juga perlu dikuasai, terutama jika kita ingin membuat screenshot yang dipublish di media internet (seperti blog misalnya). Ukuran gambar yang terlalu besar dalam hal byte-nya bisa memperlama proses pemuatan gambar tersebut. Dari situ, kemungkinan informasi yang hendak disampaikan lewat gambar tersebut jadi kurang optimal. Pengunjung yang mengaksesnya dengan ‘speed’ dan ‘bandwidth’ terbatas bisa kehilangan informasi berharga yang terkandung pada gambar tersebut.
Pada dasarnya, mengompres ukuran byte gambar bisa dilakukan lewat cara ‘resizing’, ‘cropping’, mengubah jumlah bit warna, menyetting gambar sebagai gambar untuk website (misalnya lewat pilihan menu ‘save for web’), maupun mengubah format asli gambar ke format lainnya. Bisa juga lewat bantuan aplikasi/software pengompress gambar, seperti di bawah ini contohnya.

menu compresing image pada aplikasi ‘Trimage Image Compressor’
Gambar dengan format JPG atau JPEG cenderung lebih kecil size byte-nya daripada PNG. Tentunya jika mengacu pada gambar yang sama (dengan dimensi yang sama pula). Namun di sisi lain, dari sisi ketajaman gambar, format PNG umumnya lebih baik daripada JPG/JPEG (berdasarkan pengalaman pribadi saya).
Di sisi lain pula, gambar berformat GIF umumnya lebih ringan atau lebih kecil ukuran byte-nya daripada yang berformat JPG/JPEG atau PNG. Tentu saja harus mengacu pada gambar yang sama dan pada dimensi yang sama pula.
Saya pribadi biasanya menggunakan kombinasi teknik ‘resizing’, ‘cropping’, dan akhirnya menggunakan bantuan aplikasi pengompres gambar sebagai langkah terakhir untuk melakukan pengompresan. Dalam hal ini, saya biasa menggunakan aplikasi Trimage Image Compressor (di Linux Ubuntu).
Nah, itulah beberapa kemampuan teknis yang perlu Anda kuasai sedikit ketika hendak membuat screenshot yang baik dan informatif.
Saya sendiri masih terus belajar dalam hal ini. Mohon koreksi jika ada yang keliru dari penjelasan saya di atas.
Menu Lainnya »» Atas » Depan » Arsip » Profil » Kontak » Bawah
Tambah KafeGue di Facebook
Ikuti KafeGue di Twitter
Langganan KafeGue.com via Email
Langganan via RSS Reader
Tautan Cepat »» Beri Komentar | Baca Ulang Posting
Baca Komentar | Menuju Posting Terbaru
Posting Terkait :
- 4 Macam Cara Promosi Bisnis Online yang Tak Layak Anda Tiru
- Cara Mengecek Pagerank Halaman Posting atau Single Post
- Ah, Bisanya Cuma Menyindir, Giliran Diajak Diskusi Ternyata Payah
- Mengapa Loading Blog ini Bisa Super Enteng dan Kencang? Jawabannya…
- Efektivitas Proses Edukasi Pembaca Lewat Pengulangan Topik

Firefox 5.0 | Debian GNU/Linux
semuanya ada “seni”nya :D tidak boleh asal-asalan yah mas
Firefox 3.5.3 | Windows XP
Lengkap banget tutorialnya
makasih ya…
Firefox 5.0 | Windows XP
Ini adalah teknik dasar namun sangat bermanfaat dan sangat dibutuhkan seorang blogger yang ingin menambahkan gambar dalam postingan :-)
Firefox 3.6.18 | Windows 7
Jarang banget mengcapture screen apalagi untuk web saya, hampir semua foto pakai dslr yang meskipun setelah diresize ke ukuran posting, kualitas yang di foto pake camera hape ternyata hanya beda tipis dari kamera dslr, (asal cahaya sedang bagus lho ya :D )
Google Chrome 12.0.742.112 | Windows XP
Saya sendiri sering memakai format PNG dari pada JPG. Karena menurut pengalaman saya PNG lebih ringan dari pada JPG.
Saya sendiri menggunakan ashampo snap 4 yang bisa memotret apa saja di jendela saya, dan pastinya sangat bermanfaat untuk blog tutorial saya :)
Midori 0.3 | GNU/Linux
Jaka @psdesain.net, kadang PNG memang lebih ringan atau lebih kecil ukuran byte-nya daripada JPG. Namun dari pengalaman saya, format JPG seringkali lebih ringan (jika mengacu pada kasus gambar yang sama pada dimensi lebar dan tinggi yang sama pula).
Blog mas Jaka sepertinya memang wajib selalu diisi dengan screenshot. Soalnya memang membahas masalah desain digital dan tutorial seputar itu.
Google Chrome 12.0.742.112 | Windows XP
iskandaria, Tapi coba anda kompress gambar jpg dengan software “Advanced JPEG Compressor” kita bisa setting sendiri seberapa ukuran gambar yang kita inginkan dan itu sangat helpfull :).
Firefox 5.0 | GNU/Linux
iskandaria, Saya juga menggunakan JPG daripada PNG yang keseringan berbobot gede. Setelah di optimasi masih juga belum sebanding dengan JPG.
Google Chrome 12.0.742.112 | Windows 7
Kalau screenshot untuk buku atau format cetak lainnya disarankan langsung save ke format TIFF, uncompressed.
Resize gambar sebaiknya hanya dilakukan jika perlu karena membuat hasilnya buram. Misalnya, karena keterbatasan lebar situs yang biasanya maksimal 600 px. Proses cropping sebaiknya jadi alternatif pertama.
Saya biasanya menggunakan software capture khusus, SnagIt. Kelebihannya kita bisa capture hanya dengan satu shortcut, otomatis capture dan menyimpan gambar ke format tertentu.
Midori 0.3 | GNU/Linux
Jeprie, untuk format cetak, saya setuju jika langsung saja disave (tanpa dikompres). Soalnya media cetak tidak mengenal loading, sehingga memang tak perlu dikompres. Masalah resize gambar, dari pengalaman saya memang bisa membuat gambar jadi buram (pada kasus tertentu sih). Selain itu, kadang resize juga malah membuat ukuran byte gambar jadi membesar.
Jadi, memotong atau membuang bagian yang kurang penting memang lebih disarankan, demi memperjelas objek/elemen yang ingin lebih ditonjolkan.
Soal aplikasi capture, di Linux juga ada yang lebih praktis. Kalau di Linux (Ubuntu), cukup dengan menekan tombol Print-Screen saja sudah langsung bisa mengcapture dan sekaligus menyimpan gambar ke direktori tertentu. Begitu pula jika menekan Alt + Print Screen.
Di Linux juga ada aplikasi yang namanya Shutter. Penggunaannya juga praktis. Tinggal klik sekali, gambar langsung tersimpan. Mungkin mirip juga dengan SnagIt yang biasa mas Jeprie gunakan.
Google Chrome 12.0.742.112 | Windows XP
setelah croping saya kadang-kadang melakukan grouping (penggabungan gambar unntuk menghemat size)
untuk pengguna windows,
capture (print screen) >> paste dan crop ke paint crop di paint (bahkan untuk menambah anak panah saya biasa melakukannya di sini) >> gabung dengan picasa >> resizing dan compress di microsoft office tool 2010 + plugin wp smush it + jQuery lazy load plugin untuk postingan blog
hasilnya memuaskan mas,
Chromium 14.0.813.0 | Ubuntu 11.04
adhani, wah, saya baru dengar istilah ‘grouping’ itu mas. Tapi kalau penggabungan gambar, saya mengerti maksudnya. Makasih banyak atas sharing tipsnya.
Firefox 5.0 | Windows XP
Kayaknya artikel ini ditulis setelah mengomentari artikel saya yang bahas pengujian simPATI kemarin, ya Mas Is. Jika, ya terima kasih karena sampai dibahas khusus di blog ini. Terus terang saya masih lemah dalam hal kemampuan olah gambar ini. Sehingga seringkali kurang informatif dalam penyajian screenshot pada posting di blog saya.
Kelima kemampuan teknis ini saya sebetulnya sudah sering lakukan. Hanya kadang-kadang kalau tergesa-gesa langsung post saja, tidak diolah dulu gambarnya. Kalau saya biasanya menggunakan Paint untuk capture screen. Terus untuk resize gambarnya saya menggunakan freeware IrfanView. Kalau Photoshop kadang-kadang karena saya kurang mahir menggunakannya.
Chromium 14.0.813.0 | Ubuntu 11.04
Joko Sutarto, wah, insting Pak Joko memang sangat tajam. Kecium juga kalau postingan di atas karena terinspirasi dari komentar saya di blog Pak Joko (di postingan tentang Simpati itu)..heheheh. Tapi di sini saya tidak terlalu mengupas masalah teknisnya, berhubung itu memerlukan postingan khusus (yang mungkin agak panjang). Jadi, saya cuma menekankan aspek opini dan konsep secara umum saja dalam mengolah gambar hasil tangkapan layar.
Sebenarnya esensi dari screenshot yang baik (menurut saya) yaitu terletak pada kejelasan informasi yang hendak ditonjolkan pada gambar tersebut. Sepanjang masih jelas, sudah baik bagi saya. Nah, kejelasan tersebut banyak dipengaruhi oleh teknik cropping dan resizing. Yang sering saya temukan pada blog-blog (bukan cuma blog Pak Joko), gambar/screenshot-nya hanya berupa tampilan full-screen yang sangat kecil (sehingga kurang jelas). Tapi kadang itu bisa diatasi dengan mengklik gambarnya (yang biasanya bisa jadi membesar).
Namun sebagian lagi ternyata tetap saja ukuran dimensinya saat diklik. Saya pikir itu karena pemilik blog terlalu takut untuk membuat gambar yang agak besar dimensinya (karena khawatir masalah loading yang lambat). Padahal tidak juga selalu begitu.
Tapi sebagian lagi sepertinya karena memang masih kurang bisa mengolah gambar. Jadi, mungkin dia hanya tahu cara meng-capture dan akhirnya langsung ditampilkan apa adanya (tanpa pengolahan).
Firefox 5.0 | Mac OS X 10.5
NAh, baru saja saya mem-posting sebuah hasil tangkapan layar saat bermain game. :D
Firefox 3.0.1 | Windows XP
Asop, tukang kritik yang sok pintar ternyata juga amburadul dalam penulisan kata,…jgn sok pintar dan sok jago tentang bahasa,semua sama berdiri sama tinggi..
kirain si Asop ini jago bener dalam penguasaan kosa kata dan bahasa,ternyata sama saja…
Chromium 14.0.813.0 | Ubuntu 11.04
wid, wah, ada apa nih dengan mas widodo. Saya justru sama sekali nggak ngeliat ada kritikan dari isi komentar mas Asop di atas. Tapi mungkin maksudnya kritikan di postingan blog ya. Kalau masalah penulisan kata pada isi komentar di atas, saya rasa tidak ada yang perlu dipermasalahkan.
Firefox 3.0.1 | Windows XP
iskandaria, ha..ha…soalnya si Asop ini biasanya kalau kasih komeng sok bahasa Indoensia EYD,sedikit kesalahan orang lain langsung dia hantam,tapi ketika saya melihat blognya juga masih banyak tata bahasa yang kacau..tata bahasa saya memang kacau,tapi saya masih bisa melihat mana orang yang betul2 mengerti tata bahasa dan orang yang sok ngerti tata bahasa…dan si Asop ini adalah orang yang sok mengerti dan sok tahu tata bahasa…
tiada gading yang tak retak,tiada manusia yang sempurna memang,tapi sebelum mengkritik tata bahasa orang lain alangkah lebh baiknya jika “noleh gitoke dewe..”
Midori 0.3 | GNU/Linux
wid, hahaha. Setuju sih dengan masukan terakhir mas Wid. Tapi kalau saya lihat, gaya bahasa Mas Asop di blognya cenderung santai dan memang tidak terlalu sesuai EYD. Bahkan yang bersangkutan juga pernah mengakui soal itu kok (pas komen di salah satu postingan blog ini).
Firefox 5.0 | Windows XP
iskandaria, Wah, Mas Is, saya telat baca email notifikasi bahwa komentar saya ada yang membalas. :D
Ck ck ck, ternyata ada yang ngomongin saya di belakang. Ngeritiknya di blog orang pula. Dulu Mas Agus (Mas Wid) juga pernah komentar sesuatu yang mengeritik di blog saya. Saya tanggapi santai. :)
Chromium 14.0.813.0 | Ubuntu 11.04
Asop, sip mas. Hasil tangkapan layarnya bagus tuh.
Firefox 5.0 | Mac OS X 10.5
Annotation mas. Kadang perlu untuk dimasukkan ke dalam screenshot, sehingga pengunjung yang membaca sebuah artikel di blog lalu melihat gambar pengantar artikel akan langsung bilang, “Oh, ini toh yang dimaksud”
Firefox 5.0 | Windows XP
Sekarang saya malah jarang capture screenshoot mas. Paling juga Capture Video aja buat jadiin dekstop background. Klo buat ngeblog mending polosan aja dah… hehehhe
Firefox 5.0 | GNU/Linux
Nurul Imam, wah, saya juga suka tuh capture video. Tapi belum pernah sih sampe dijadiin wallpaper dekstop. Kayaknya oke juga tuh. Ntar saya cobain ah.
Firefox 5.0 | Windows 7
sangat setubuh dengan pernyataan di atas..
Tapi kalau saya lebih senang menggunakan pick-pick, software kecil yang punya fungsi banyak..
Kalaupun pakai ubuntu, saya tetap pakai pick-pick lewat Wine.. hihi… :)
Chromium 14.0.813.0 | Ubuntu 11.04
masyhury, saya malah baru dengar tuh pick-pick :)
Google Chrome 12.0.742.112 | Windows 7
kalau saya pakai fasilitas extensin google chrome. bagus png apa jpeg mas ?
Chromium 14.0.813.0 | Ubuntu 11.04
Guusn, kalau ekstension google chrome kan cuma buat bikin screenshot halaman web. Jadi, kalu pengen meng-capture dekstop komputer atau tampilan software, harus pakai aplikasi lainnya. Kalau untuk ketajaman gambar, menurut saya PNG lebih bagus, tapi ukurannya (dalam byte/kilobyte) cenderung lebih besar. Namun itu bisa dikompres dengan tools image compressor. Sebenarnya tergantung pada jenis gambar yang kita gunakan juga sih. Kalau yang berupa foto, JPEG menurut saya sangat cocok. Kalau untuk gambar kartun/animasi, maka GIF lebih cocok.
Firefox 3.6.3 | Windows XP
mas, kalo gambar yang di Up ke internet biasanya pilih yang mana? .png / .jpg kalo untuk mengutamakan kecepatan loading blog. misalnya gambar header blog.
Chromium 14.0.813.0 | Ubuntu 11.04
slashtips, kalau masalah kecepatan loading itu dipengaruhi oleh ukuran byte gambar tersebut menurut saya. Nah, untuk gambar yang sama (dengan dimensi yang sama), umumnya jenis PNG lebih besar ukuran byte-nya. Jadi, menurut saya lebih baik pakai format JPG jika ingin mengutamakan kecepatan loading gambarnya.
Firefox 3.6.3 | Windows XP
iskandaria, o gitu ya mas, tapi kenapa kalo di photosop, kalo kita pilih save for web disarankan pilih .png? masih agak bingung sedikit.
Midori 0.3 | GNU/Linux
slashtips, jenis .png setahu saya adalah format gambar masa depan. Tapi kalau menu ‘save for web’ di Photoshop, setahu saya defaultnya malah .gif (atau mungkin saya kurang teliti).
Opera 11.50 | GNU/Linux
Jangan lupa juga Mas, teknik untuk mengaburkan dan menegaskan objek :).
Misalnya data pribadi dan privasi yang semestinya dikaburkan, dan beberapa bagian tertentu yang bisa ditegaskan dengan tanda panah atau highlighter.
Chromium 14.0.813.0 | Ubuntu 11.04
Cahya, wah, itu teknik lanjutan kayaknya..hihihi
Firefox 5.0 | Windows 7
Wah.. Lama Ndak main Kesini.. Mas Is makin padat IT nya.. Tidak ada yang bisa saya bilang selain ” Mantaf”… :D
Chromium 14.0.813.0 | Ubuntu 11.04
tonykoes, wah, lama juga ya mas Toni gak nongol. Kirain ditelan bumi atau diculik :D