Nah, dengan contoh kasus di atas, di sini akan kita lihat gimana aja langkah-langkahnya agar ketiga target di atas dapat tercapai. Oke deh, langsung mulai aja

1. Persiapan
Misal, kita punya file foto .JPG yang diambil langsung dari memori kamera. Foto tersebut memiliki resolusi tinggi dan tentunya ukuran filenya juga besar (lihat screenshot)

Dari foto di atas, kita lihat bahwa ukuran file yang besar tersebut disebabkan terutama karena masih resolusi tinggi foto tersebut. Oleh karena foto yang akan dikirimkan tersebut tidak diperuntukkan untuk hal printing, maka resolusi “terlalu” tinggi tersebut jelas tidak diperlukan. Nah, agar dapat mengurangi ukuran file secara drastis, kita akan resize foto tersebut menjadi lebih kecil (tetapi gak terlalu kecil .

2. Gunakan Cara yang Paling Mudah
Dalam kasus ini, saya akan menggunakan Photoshop (di sini saya masih pake CS2). Aplikasi lain juga dapat dipake, gimana mudahnya aja yang penting “teori” dalam tutorial ini dapat ditangkep maksudnya.
Nah, buka foto tersebut dengan Photoshop.

Akses menu: File > Save for Web…

Apabila resolusi fotonya terlalu besar akan muncul peringatan berikut

So, daripada komputer kita ngelag saat meresize nanti, mending kita kecilkan dulu foto tersebut (ingat, kalau bukan untuk printing, resolusi tinggi “tidak” terlalu penting).

Untuk meresize foto tersebut agar tidak muncul peringatan di atas, akses menu:
Image > Image Size…

Di sini saya ubah width-nya menjadi 1200px (ukuran height mengikuti). Ukuran 1200x1800px ini masih cukup besar kalau sekedar untuk ditampilkan di monitor, so udah oke.

OK, setelah dikecilkan, akses kembali menu: File > Save for Web…

3. Saatnya Mengoprek
Saat melakukan tweaking, kita perhatiin beberapa hal berikut.

1. Tingkat kualitas setinggi mungkin dengan ukuran file sekecil mungkin (Quality > File Size)

Pastiin format file yang dipilih adalah: JPEG. Nah, kita lihat dulu berapa ukuran filenya kalau dengan tingkat kualitas maksimum (100%).

Coba kita bandingkan apabila diubah menjadi Very High (80%).

Wah, ternyata perbedaan ukuran filenya cukup jauh. Oke deh, karena target ukuran filenya adalah 100KB, maka akan kita pilih tingkat kualitas yang Very High aja. Mengapa, karena #1 resolusi foto sama, #2 file lebih kecil, dan #3 secara kasat mata perbedaannya kualitasnya tidak terlalu jauh (ingat, ini bukan untuk kebutuhan printing )

Apa jadinya kalau kita memaksakan menggunakan setting kualitas Maximum?
* secara kasat mata, kualitasnya tidak akan jauh berbeda dengan yang Very High
* agar dapat mencapai ukuran target 100KB, otomatis langkah selanjutnya adalah mengecilkan resolusi foto
* hasil akhir, resolusi foto jauh lebih kecil dibanding dengan yang Very High
(dengan file size yang sama dan kualitas yang hampir sama, lagi-lagi ingat, ini bukan untuk printing )

Apa jadinya kalau kita menggunakan setting kualitas yang terlalu rendah?
* file size jauh lebih kecil
* resolusi bisa tetap tinggi
* kualitas fotonya jelas akan sangat tidak diharapkan
So, kita juga tetap jaga kualitasnya.

2. Kualitas tinggi, resolusi tinggi, ukuran file kecil
Nah, setelah setting kualitasnya kita tetapkan, untuk mendapat ukuran file kecil (target 100KB) langkah selanjutnya adalah mengatur resolusinya. Singkatnya, saatnya mengecilkan resolusi foto, tetapi tidak terlalu kecil.

Kita coba atur dengan mengubah heightnya menjadi, misal, 960px (biasanya untuk target file di bawah 100KB dengan kualitas Very High, resolusi di bawah 1000px akan mendekati dan 960px—dalam kasus ini—agar widthnya tetap genap aja). Kita lihat deh screenshot di bawah, ternyata udah mendekati 100KB. Ukuran filenya masih lebih dari 100KB, daripada ntar ditolak sama sistemnya, ya kita kecilin lagi deh .

3. Apabila sudah mendekati target, resolusinya perkecil sedikit demi sedikit
Gimana kalo dijadiin genap 900px aja heightnya? Kita lihat dulu.

Ah, ternyata dikit lagi nih untuk jadi di bawah 100KB. Kecilin dikit lagi deh.

Oke dapet, (dalam kasus ini) saat diubah heightnya menjadi 888px, kita dapet ukuran file 99.38KB. Ukuran ini udah maksimum (kasusnya, tidak boleh melebihi 100KB) dengan resolusi akhir foto yang masih cukup tinggi (dapet 592x888px). Gimana dengan kualitasnya? Tentu tetep bagus, kita kan dari tadi pake yang Very High aja .

4. Kesimpulan
Akhirnya kita dapet nih ukuran foto yang (dalam kasus ini) sesuai ketentuan yakni di bawah 100KB dengan kualitas tetep bagus dan resolusinya tidak terlalu kecil.

Nah, kalau temen-temen misal pake aplikasi lain ya langkah-langkahnya gak akan jauh beda dan yang paling penting ngerti apa yang dimaksud dalam tutorial ini. So, untuk mencapai target dalam kasus ini, beberapa hal yang harus diperhatikan di antaranya
* kualitas tinggi, tetapi tidak usah terlalu tinggi (ukuran file akan signifikan),
* dengan kualitas tinggi, perkecil resolusi foto, tetapi tidak terlalu kecil, dan
* dapetin #1 target ukuran file, #2 kualitas tinggi, #3 resolusi maksimum (kualitas lebih utama).

Oke deh, bagi yang udah baca sampai sejauh ini terima kasih ya. Selamat mencoba dan selamat berkreasi, insya Allah bermanfaat kalau udah ngerti maksudnya dan bisa bantu temen apabila temennya lagi butuh hal yang sama
Have fun!

So, three simple steps to play StarCraft on Windows 7 are:
1. terminate the “explorer.exe”
2. run StarCraft
3. run “explorer.exe” after exiting the game
To do that, you’ll need Task Manager help (terminate the process of “explorer.exe”, launch the StarCraft executable, and return the Windows Explorer).

Do The Task Automatically

Well, using Task Manager to play StarCraft normally in Windows 7 is not that simple and quick. We need to write a batch command (loader) to do this task automatically. So, open your Notepad and type this command (I’ll explain this later):

@taskkill /IM explorer.exe /F
@echo -
@echo - Running game. Please wait . . .
@StarCraft.exe
@echo - DON'T PRESS any key for now. Game will run!!
@echo -
@echo -
@pause
@echo -
@echo - Press ANY KEY to return to normal mode.
@echo -
@pause
@explorer

Attention:

• Save this as “myloader.bat” (or whatever) in your StarCraft game directory (make sure you enter it .bat not .txt).
• Change “StarCraft.exe” to loader.exe name if you use one
• You can create a shorcut in your desktop from this loader.
  right click > Send to > Desktop (create shortcut)
• Then change the icon for the shortcut (you can’t change the icon of “myloader.bat” directly) using the icon from StarCraft.exe
  right click > Properties > Change Icon… > Browse StarCraft.exe > OK

You can play StarCraft normally in Windows 7 using this loader now

How the Command Works

Well, I’ll explain what we typed in that loader so you know what you’re doing

1. Terminate (kill) the “explorer.exe”—(using ‘@’ sign to hide the command in the displayed messages)

   @taskkill /IM explorer.exe /F

2. Run the game after “explorer.exe” was terminated

   @echo -
   @echo - Running game. Please wait . . .
   @StarCraft.exe
   @echo - DON'T PRESS any key for now. Game will run!!
   @echo -
   @echo -
   @pause

   You see that “@echo” command is used just to display a message and “@pause” command is to pause before executing next command.

3. When you exit the game, you may launch the “explorer.exe” to return the desktop normally.

   @echo -
   @echo - Press ANY KEY to return to normal mode.
   @echo -
   @pause
   @explorer

Simplify the Loaders

So we know that to play StarCraft normally in Windows 7 we need three simple steps: #1 terminate the “explorer.exe”, #2 run the game, #3 return the “explorer.exe”.

If you understand what the loader works, you can simplify the loader (remove the displayed messages). So, it is the main commands used for the loader:

@taskkill /IM explorer.exe /F
@StarCraft.exe
@echo DON'T PRESS any key for now. Game will run!!
@pause
@explorer

If you have same problem in another games, you can also try this trick.
Have fun!

Teman-teman tentunya apabila membuat sebuah gambar di komputer tidak akan asing dengan tool-tool semacam line tool, shape tool, pen tool, brush tool, dll. Satu tool lagi, yaitu pencil tool deh. Wah, jujur saya sendiri kalau pake pencil tool menggunakan mouse kadang susah digunainnya kalau ingin membuat suatu bentuk. Gini deh, sekarang gunain pencil tool aja untuk menggambar sebuah kubus, bisa kan?:)

Wah menggambar kubus pake pencil tool? Kubus kan harus lurus garisnya baik garis vertikal, horizontal, maupun diagonalnya dan kalau pake pencil tool kadang susah ngendaliinnya. Nah, oleh karena itulah teknik menggambar piksel ini bisa ngebantu kita untuk membuatnya. Coba deh perhatikan gambar kubus di bawah ini di mana untuk membuatnya kita bisa menggunakan si pencil tool tersebut. Kok bisa? Tentu saja bisa, triknya dengan menggambar pixel-by-pixel (pencil tool, ukuran 1px) dengan zoom yang besar (misal 1600% atau 16x). Nah, gampang kan jadinya:)

Little tips

Highlight and Shadow

Nah, kita tentunya pengen mewarnai dalam menggambar piksel ini (masa cuman garis polos aja:), so untuk memberikan warna yang ‘hidup’, kita bisa menggunakan tiga warna patokan yakni: main color, highlight, dan shadow. Main color adalah warna utama yang akan kita berikan untuk objek gambarnya, nah agar lebih ‘hidup’ , so kita tambahkan highlight (lebih terang dari main color) dan shadow (lebih gelap dari main color). Maksudnya kita berikan unsur pencahayaan di dalamnya. Apabila gambarnya ingin lebih smooth lagi, ya bisa saja ditambahkan misal dua level warna highlight dan dua level warna shadow. Untuk pengaplikasiannya cek deh gambar berikut.

Gambar tersebut dibuat dengan zoom 1000%, tentu jadi lebih mudah dalam menggunakan pencil tool-nya. Untuk memberikan warnanya juga tetap menggunakan pencil tool, tidak harus menggunakan bucket tool karena objeknya tidak terlalu besar dan kita akan memberikan warna highlight dan shadow yang ukuran ketebalannya hanya 1px saja.

Sebagai patokan aja biar memudahkan, warna highlight diberikan pada sisi atas dan kiri sedangkan warna shadow pada sisi kanan dan bawahnya. Tergantung arah cahayanya juga sih, tetapi kalau gambar tersebut istilahnya ‘di depan kita’ ya patokan tersebut dapat digunakan.

Nah, hal menarik dalam memberikan warna highlight dan shadow ini adalah kita dapat memberikan efek level atau tingkatan dalam bentuk gambarnya. Dalam gambar di atas, efek sunken (cekung) dapat kita buat dengan ‘membalikan‘ arah pencahayaannya. So, apaliba warna shadow kita taruh di bawah dan kanan, maka untuk efek sunken ini kita taruh di sisi sebaliknya, yaitu atas dan kiri. Penggunaan warna highlight untuk efek sunken ini opsional aja tergantung bentuk gambarnya. Kemudian untuk membuat efek emboss (timbul), tinggal menggunakan warna highlight dan shadow ‘searah‘ dengan pencahyaannya. Kesimpulan singkatnya, efek sunken dibuat dengan membalikan pencahayaan dan efek emboss searah dengan pencahayaan.

Pencil Tool

Tool yang digunakan untuk menggambar piksel ini adalah pencil tool. Mengapa? Karena pencil tool dapat kita gunakan untuk menggambar sebuah titik dengan ukuran 1px. Titik-titik piksel ini kemudian kita bentuk menjadi sebuah objek. Nah, seperti pada gambar-gambar di atas, kita perlu menggambar pixel-by-pixel dan dalam hal ini pencil tool-lah yang kita gunakan.

Zooming

Menggambar piksel pada zoom 100% (normal) dengan pencil tool bukan hal yang mudah. Kalau kita ingin membuat suatu objek, baik itu sebuah garis lurus maupun diagonal, maka dengan menggunakan zoom yang besar objek yang kompleks sekalipun dapat kita buat dengan menggunakan pencil tool ini. Kalau menggunakan Photoshop (saya menggunakan versi CS2), ukuran zoom maksimalnya adalah 1600% (16x). Dengan zoom sebesar ini, mengendalikan pencil tool jadi hal yang mudah. Tentu ada kelemahannya, dengan zoom sebesar ini maka objek yang muat di layar jadi terbatas. So, atur aja zoom yang diperluin, misal 600%, 800%, 1000%, atau 1600%. Saya sendiri seringnya pake 1600% (maksimal) dan 800% (setengah dari maksimal), ya gimana enaknya pas kita menggambar piksel-nya.

Doing Something Useful

Oh ya, teman-teman tentunya tau dong apa itu Winamp? Ya pemutar musik yang tentu namanya udah ‘melegenda’ bagi pengguna komputer (bersistem operasi MS Windows—gak tau sih kalo bagi yang baru-baru:). Hal yang menarik dari Winamp dan sekaligus jadi inovasi pada saat itu adalah skin-nya. Ya umumnya, kita pengen pake skin yang keren atau nyaman di Winamp ini. Seperti biasanya, ada aja hal yang dirasa kurang meskipun kita udah nemuin skin yang bagus. Kita pengen yang ini bentuknya gini dan yang itu bentuknya gitu. So, untuk hal tersebut kita kustomasi aja si skin yang dipake itu.

So, apa hubungannya dengan menggambar piksel? Tentu ada, karena objek-objek dalam tampilan Winamp ini kecil-kecil (misal volume bar, seeking bar, scroll bar, dll.) So, teknik menggambar piksel ini akan sangat berguna untuk membuat atau memodifikasi gambar objek tersebut. Nah, berikut merupakan skin original yang saya akan modif: SoftshapeAmp Release II by Vlad Gerasimov.

Beberapa hal yang ingin saya modif dari skin ini adalah: tombol kontrol, seeking bar, volume bar, scroll bar, tombol edit playlist, dan tweak pada background dan fontnya. Nah, biar gak bingung mana-mana yang akan dimodifnya, berikut gambar bagian yang dimodif.

Untuk tombol kontrol (atas—play, pause, stop, dll) dan edit playlist (bawah—add playlist, remove playlist, dll) cukup dengan menggambar ulang bentuknya dengan menggunakan palette warna objek aslinya. Untuk menghapusnya pun sama ‘replace warnanya dengan warna background‘. Dengan mengunakan palette warna sesuai aslinya, kita bisa melakukan modifikasi tanpa mengubah ‘kesan’ yang dibawa skin tersebut:)

Berikutnya, untuk seeking bar, volume bar, dan scroll bar saya lakukan modifikasi sedikit berbeda dengan bentuk aslinya. Nah, agar objek yang dihasilkan terlihat lebih ‘hidup’ dan smooth, maka highlight dan shadow yang sesuai akan memunculkan dua hal tersebut:) Jadi, tetap menggambarnya pixel-by-pixel dengan pewarnaannya menggunakan warna highlight dan shadow. Dengan bantuan zoom yang besar, modifikasi tersebut jadi gampang dilakukannya. Nah, berikut kita lihat deh antara objek dalam zoom normal dan zoom yang besar.

Untuk gambar grafik visualisasi tidak dilakukan dengan menggambar pikselnya, tetapi edit pada file konfigurasinya (“vIscolor.txt”). Untuk tweaking pada fontnya, coba perhatiin angka 8 pada skin original dan skin yang udah dimodif:) Sementara untuk title bar dan warna background pada main window-nya diganti dengan warna gradasi yang lebih smooth putih. Untuk menggantinya, tinggal hapus aja pixel-by-pixel, tidak mengunakan wand tool.

So, dengan menggunakan teknik menggambar piksel dan penerapan warna highlight dan shadow (pencahayaan), kita bisa deh melakukan modifikasi pada skin Winamp tersebut. Nah, berikut hasilnya sesuai dengan yang saya inginkan.

Download:
Original skin: SoftshapeAmpReleaseIIColor11-0
Modified skin: SoftshapeAmpReleaseIIColor11-mods

(modified skin)

(review original skin-nya)

Further Steps

Menarik kan? Kalau tertarik pengen nyoba juga, berikut tips yang bisa ngebantu kita agar lebih cepat dan efisien dalam menggambar piksel ini. Berikut tool-tool yang akan sering digunakan, so biasain dengan menggunakan shortkey-nya.

• Pencil Tool (B): untuk merubah dari Brush menjadi Pencil dan sebaliknya tekan Shift+B beberapa kali. Untuk mengubah size-nya, tekan [ untuk lebih kecil dan ] untuk lebih besar.
• Eyedropper Tool (I): untuk mengambil sampel warna, nah apabila saat menggunakan Pencil tool tahan tombol Alt: untuk merubah sementara kursornya untuk menjadi Eyedropper tool. Hal inilah yang paling berguna apabila menggunakan Photoshop.
• Zoom Tool (Z): bisa digunakan untuk area zoom (blok area yang akan dizoom) atau click zoom (zoom bagian yang diklik). Selain itu bisa juga menggunakan ‘Ctrl +’ untuk zoom-in dan ‘Ctrl -’ untuk zoom-out. Untuk kembali ke zoom normal, tekan Ctrl+Alt+0.
• Switch Foreground and Background Colors (X): sangat berguna untuk menukar warna aktif yang digunakan antara warna foreground dan background. Coba deh biasaan tool ini. Kita bisa manfaatin untuk menyimpan dua warna aktif saat menggambar.
• Default Foreground and Background (D): untuk mengubah warna aktif foreground menjadi hitam dan warna aktif background menjadi putih. Sangat berguna pada saat-saat tertentu.
• Hand Tool (H): nah, berhubung kita menggambar dengan zoom yang besar, maka tampilan yang dimuat di layar pun terbatas. Hand tool sangat berguna saat kita menggambar objek yang melebihi tampilan di layar. Tidak perlu langsung menggunakannya (tekan H), tetapi cukup tahan tombol Space saat menggunakan tool lainnya untuk mengubah sementara menjadi Hand tool. Hal ini juga yang paling berguna di Photoshop:)

Nah, sekarang udah tau kan tentang fun-nya menggambar piksel. Kalau tertarik lebih lanjut, bisa juga terjun di aliran Isometric drawing yang seperti gambar berikut (dari mana dapetnya lupa, ntar deh:) di mana dapat dilakukan dengan teknik menggambar piksel. Have fun!

For your information: skin Winamp yang berekstensikan .wsz adalah file zip biasa. So, kita bisa mengekstraknya dengan, misal, WinRAR, 7-Zip, WinZip, dll. Apabila tidak ada opsi ‘extract‘ saat klik kanan pada file tersebut, rename dulu ektensinya dari .wsz menjadi .zip. Oh ya, untuk menggunakannya kembali menjadi skin Winamp tidak harus di-compress menjadi file .wsz atau .zip, cukup semua komponen skin ditaruh di dalam sebuah folder yang diletakkan di foldernya Skins Winamp, misal, ‘..\Skins\MySkins\’.

Satu hal yang sulit saya tuliskan di sini (dan halaman lainnya) adalah “what am I doing?” Terus terang saya agak ‘enggan’ untuk menuliskan apa yang telah atau sedang saya lakukan. Istilah gampangnya ‘curhat’, ya sepertinya kalo hal itu emang gak bisa saya tuliskan di sini. Entah tulisan ini termasuk ‘curhat’ atau bukan, yang jelas ‘you won’t know what am I doing’. Ya tau apa yang saya pikirkan sih udah jelas tulisan di sini memang untuk itu:)

So, blog ini untuk apa? Nah, kalau ditanya untuk apa ya nanti aja deh dijawabnya. Barangkali nanti bakal ada ide apa gitu yang lebih fun untuk ditekuni. Ya, meski isinya cuman sekedar ‘blabbering’ atau sekedar ‘mumbling’ yang meski gak berguna tapi ya bermanfaat untuk mengasah dalam ‘menuangkan pikiran’.

Satu hal yang saya ingin capai di sini adalah menampilkan “content is king”. Maksudnya, saya ingin fokus ke isi dan ‘keindahan’ di sini muncul karena isinya. Saya gak ingin ngutak-ngatik masalah tema, jenis type-face, dan lain-lainnya. Ya KISS aja deh, Keep It Simple Stu*id:)

Yup, tulisan-tulisan di sini juga timeless aja di mana gak akan outdate karena bukan tentang berita yang up-to-date:)

Oke deh, mari memulai bereskplorasi (kembali:)