Ok sekarang kita mulai tutorial ini dengan membuka dokumen baru pada photoshop anda. Masukkan foto atau gambar yang ingin kita beri efek plasma. Dalam tutorial ini saya ambil sebuah foto dari friendster. Memulai pekerjaan dengan gambar resolusi tinggi akan mendapatkan hasil yang lebih bagus, tapi berhubung PC saya agak jadul jadi saya mulai aja dengan gambar resolusi rendah.

dari tools box aktifkan pen tool atau tekan P di keyboard, setelah pen tool aktife pastikan setingannya seperti berikut

karna kita hanya ingin mebuat garis yang tanpa isi.

Buat garis seperti yang terlihat pada gambar, sebenarnya gambarnya bisa apa saja dan model garisnya bisa gimana aja yang pasti kita harus sesuaikan dengan keadaan gambar.

setelah selesai membuat garis, aktifkan brush tool atau tekan tomol B di keyboard. Setting brush tool dengan soft round dengan diameter 9px, Hardness 0% dan Opacity 100%, lalu jadikan forground color menjadi putih (#FFFFFF).

setelah selesai menyeting brush tool, buat layer baru lalu aktifkan kembali pen tool dengan path masih aktif atau terpilih klik kanan pada work space (catt: jika path tidak lagi aktif aktifkan dengan direct select tool atau tekan tombol A pada keyboard lalu klik pada path), pilih menu stroke path, setelah jendela dialog muncul seting seperti berikut lalu klik tombol ok.

maka akan tampak pada gambar sebuah garis dengan berwarna putih halus

pilih layer yang baru dibuat tadi tempat stroke path berada, lalu klik tombol add vector mask

aktifkan brush tool ganti foreground color menjadi hitam (#000000)lalu buang bagian – bagian yang tidak perlu dari plasma dengan memoleskan brush pada area – area yang tidak diinginkan, kurang lebih seperti pada gambar berikut ini

klik kanan pada layer baru tersebut lalu pilih menu Blending Options atau dengan klik ganda pada layer tersebut lalu aktifkan Outer Glow, Inner Glow dan Color Overlay. Ikuti propertinya seperti pada gambar bertikut

setelah selesai menyeting layer style klik ok and done kita udah selesai membuat efek plasma.

Dulu saya pernah bermasalah dengan transparansi pada file gambar berekstensi PNG. Setelah desain jadi dan terlihat ok di FF ternyata tidak sama dengan yang terlihat di IE. Setelah beberapa waktu mencoba – coba dan sembari membaca artikel di website resminya microsoft di tambah bantuan google akhirnya ketemu juga caranya dengan penambahan filter lewat cssnya.

Misalkan nama file gambar kita “logo.png” dan ukuran gambar tersebut 100 x 25 pixel maka dengan penambahan filter di script cssnya akan seperti berikut

#logo{
background:url(images/logo.png) transparent;
*background:none;
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’images/logo.png’);
height:25px;
width:100px;
}

baris yang bertanda * di atas dikususkan untuk IE, karena FF tidak akan membacanya. Tapi ingat cara ini bukanlah cara yang tepat karena skrip di atas tidak valid CSS 2.0.

Untuk penggunaan skrip di atas agar valid CSS 2.0 bisa dengan bantuan IE comment condition. Tentang IE comment akan saya jelaskan lagi di postingan yang lain.

semoga bermanfaat