Membuat Ikon Vista dengan IconCool Studio dan Photoshop CS3


Membuat Ikon Vista dengan IconCool Studio dan Photoshop CS3

Icon_Vista_thumbnail.jpg

Icon_Vista_thumbnail.jpg

Bagi Anda pengguna Windows Vista, saat pertama kali anda menjelajahi fitur dari sistem operasi komputer terbaru dari  Microsoft ini, Anda mungkin cukup kaget dan/atau terkesan setelah melihat Ikon Folder yang tampak lebih besar dan cantik dengan detail gambar yang lebih bagus bila dibandingkan dengan ikon folder pada sistem operasi sebelumnya seperti Windows XP.
Ya, memang Microsoft telah meningkatkan kualitas performa grafis pada sistem operasi Windows Vista, hal ini tentunya sekaligus juga untuk sedikit bisa mengejar ketertinggalan kualitas grafis dari OS Mac terbaru milik Apple. Pada Windows Vista, Microsoft telah mengupdate engine grafisnya termasuk DirectX-nya (DirectX 10) yang dicangkokkan ke dalam sistem operasi Windows Vista.
Dengan update tersebut, maka pada Windows Vista, kualitas gambar baik still image maupun image rendering untuk gaming orientation, tampak lebih baik, lebih hidup (real-like) dan lebih halus (smooth) (pada animation artworks).
Salah satu implementasi dari update tersebut tampak pada ukuran Ikon yang ditampilkan sebagai representasi dari sebuah folder.
Seperti diketahui, sebagai perbandingan, besaran ukuran maksimal untuk Ikon yang bisa ditampilkan di layar monitor pada 3 (tiga) sistem operasi adalah sebagai berikut:
– Apple Mac : 512 x 512 Pixels
– Microsoft Windows Vista : 256 x 256 Pixels
– Microsoft Windows XP : 128 x 128 Pixels
Hingga saat ini, lagi-lagi Microsoft memang masih harus mengakui keunggulan kualitas grafis dari Apple Computers.

Teknik Visualisasi akan lebih memudahkan mata mengenali sebuah objek asing
Artikel ini ditujukan sebagai tutorial bagi Siapapun juga yang ingin dan tertarik untuk bisa membuat sendiri Ikon Vista (256 x 256 pixels) yang akan digunakan untuk penanda Folder Pribadi atau sembarang folder lainnya.

Tool-tool yang perlu disiapkan:

  1. Program Pengolah Gambar untuk membuat gambar Vektor Image (Adobe Illustrator CS3/CorelDraw X4/Adobe Flash CS3)
  2. Program Pengolah Gambar yang bisa membuat Transparent Image (Penulis menggunakan Adobe Photoshop CS3)
  3. Program Pembuat Ikon yang sudah support Vista Icon – 256 x 256 Pixels (Penulis menggunakan IconCool Studio versi 3.34)

Keterangan: No. 1 bisa diabaikan apabila Image yang akan digunakan sebagai Ikon tidak dibuat/digambar sendiri, namun melalui image capturing/scanning.
Pada tutorial ini, Penulis mengcapture gambar dari Web sebagai objek yang akan dijadikan sebagai Ikon.

Langkah-Langkah Pembuatan Ikon Vista (Vista Icon):

Langkah I – Pembuatan Transparent (Image’s) Background: :

  1. Buka Program Adobe Photoshop CS3
  2. Dengan Adobe Photoshop CS3, Buka Gambar yang sudah dicapture — dalam tutorial ini: Football_01_(icon_vista).jpg.
  3. Buat Image’s Background menjadi Transparan. Konversi JPG ke PNG. Agar kualitas hasil gambar Ikon tampak lebih baik, lebih enak dipandang mata, serta tidak tampak kotor dan membosankan, maka Image’s Background sebaiknya dihapus dengan metode Transparansi. Format Image dengan Transparent Background harus disimpan dalam format .PNG. karena format bitmap image seperti BMP atau JPG tidak memungkinkan mengakomodasi transparent object.
Photoshop CS3 Create Transparent Background 1

Photoshop CS3 Create Transparent Background 1

Photoshop CS3 Create Transparent Background 2

Photoshop CS3 Create Transparent Background 2

Teknis Pembuatan Transparent (Image’s) Background:

  1. Gunakan Magic Wand Tool untuk menyeleksi/memilih background yang akan dihilangkan (dijadikan transparan). Bila ada kesalahan atau perubahan pada proses penyeleksian, Anda bisa gunakan kombinasi tombol Klik Kiri + Shift untuk menambahkan selected area atau kombinasi tombol Klik Kiri + Alt untuk mengurangi/menghapus/diselect selected area.
  2. Selanjutnya, ubah ukuran ke standar ukuran Vista Icon, yakni 256 x 256 pixels. Tekniknya, pada Main Toolbar, pilih dan klik “Image”, kemudian pilih dan klik “Image Size (ALT+CTRL+I)”. Pada Pixel Dimensions, pilih satuan “Pixels” dengan ukuran gambar: Lebar (Width)= 256 dan ukuran Panjang/tinggi (Height)= 256. Sebagai catatan, sebenarnya, image size tidak dirubah juga tidak menjadi masalah, tujuannya hanya sebagai presisi image dimension disesuaikan dengan Vista standard icon format sekaligus merampingkan file sizenya saja, toh pada proses import pada program IconCool Studio, image size akan disesuaikan dengan besaran ukuran-ukuran standar untuk ikon (seperti terlihat pada screenshot di bawah)
  3. Kemudian, pada Main Toolbar, pilih dan klik “Edit”, kemudian pilih dan klik “Fill” untuk mengisi selected area (background) dengan transparansi. Pada kolom “Blending” , pilih Mode “Normal” dan Set “Opacity (Transparansi)” pada level maksimal — 100%.
  4. Selanjutnya, pada Main Toolbar, pilih dan klik “Select”, kemudian pilih dan klik “Inverse” untuk memilih obyek non background. Teknik ini akan membalik/menukar selected area (background) ke/dengan diselected area (obyek utama non background).
  5. Copy inverted selected object (ke Windows Clipboard dengan Edit-> Copy atau CTRL+Copy),
  6. Buat Layer baru (layer 1), dan Paste ke dalam Layer baru tersebut.
  7. Terakhir, Simpan image dengan format Portable Network Graphics (PNG), dimana pada PNG Options, bisa dipilih apakah “None”: web oriented image : menampilkan image pada browser hanya bilamana obyek telah sepenuhnya terdownload, atau “Interlaced”: web oriented: menampilkan image pada browser dengan resolusi rendah demikian halnya dengan kualitas gambar. Dengan teknik Interlacing, akan membuat waktu download gambar lebih cepat, namun teknik ini juga menyebabkan ukuran file gambar lebih besar.

File Project-nya bisa disimpan ke dalam format .PSD

Setelah kita selesai membuat Objek Image yang akan dijadikan sebagai Ikon dengan kondisi background transparansi dengan format .PNG, maka kini Objek Image tersebut tinggal dibuka dengan Program pembuat Ikon seperti IconCool Studio versi 3.34.

Langkah II – Import dan Konversi .PNG Image menjadi Vista Icon:

Vista Icon - created by IconCool Studio v3.34

Vista Icon - created by IconCool Studio v3.34

  1. Buka Program IconCool Studio
  2. Pada Main Toolbar, Pilih dan Klik “File”, kemudian “Open” atau “Import”, lalu pilih obyek Image .PNG yang telah selesai dibuat
  3. Pilih ukuran Ikon (Icon Image Size) dan Kedalaman Warna Icon (Icon Color). Pastikan checkbox ukuran 256 * 256 (256×256) terpilih/tercentang/marked. Pada Custom Size lebih baik ditambahkan ukuran Ikon standar maksimal XP, yakni 128 x 128 Pixels agar komposisi Ikon yang akan dibuat semakin lengkap. Catatan: Semakin banyak pilihan Anda, semakin besar pula ukuran file Ikon yang Anda buat.
  4. Klik tombol “Import Now”
  5. Setelah Objek Image .PNG berhasil dibuka/diimpor dan muncul pada layar editor, maka Anda bisa melakukan edit gambar Ikon sesuka Anda sebelum melakukan proses penyimpanan file atau Anda bisa langsung menyimpan image tersebut dalam bentuk Ikon (format .ICO).
  6. Simpan Obyek .PNG yang telah berhasil diimport tersebut dengan teknik: Klik Menu “File”, kemudian pilih “Save As Image”, dan terakhir, Anda simpan dalam format .ICO dengan sembarang nama file kesukaan Anda.

Bila Anda menginginkan untuk membuat (menggambar) sendiri gambar untuk Anda persiakan sebagai ikon folder, Anda bisa menggunakan kombinasi program pengolah vektor seperti Adobe Illustrator atau CorelDRAW dan program manipulasi bitmap seperti Adobe Photoshop atau Corel PhotoPaint.
Teknisnya:

  • Buat gambar vektor dengan menggunakan program, misal CorelDRAW X4. Sebagai File Project, Anda simpan hasil olah gambar Anda dengan format CorelDRAW Imge (.CDR) agar Anda bisa modifikasi di lain waktu, atau Anda bisa langsung Save As/Export gambar tersebut ke dalam format .PNG. Bila Anda ingin mengolah gambar yang telah tersimpan tersebut dengan efek bitmap manipulation, , Anda bisa gunakan program seperti Adobe Photoshop atau Corel PhotoPaint.

Di bawah ini adalah link salah satu contoh image .PNG (WordPress Icon edisi Valentine — wp-valentine-logo.png) yang mana, gambar vektornya Penulis buat dengan CorelDRAW dan manipulasi bevel-nya Penulis olah dengan Corel PhotoPaint. Gambar ini bisa Anda simpan dan bisa Anda import untuk dijadikan Folder Icon pada Windows Vista maupun Apple Mac.

https://henryussa.wordpress.com/2008/02/13/happy-valentine-day/

Semoga Bermanfaat
Salam

One Response

  1. Cool! Bisa dicoba nih.
    Thank’s for your cool tutorial, Pal!

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: