Saya rasa sudah saatnya mengeluarkan tutorial - tutorial yang sudah tidak tergolong basic lagi. Ini hanya sekedar pendahuluan. Tutorial ini menjelaskan efek yang tergolong cukup intermediate (Semi Master).

Suatu hari temen kantor saya meminta untuk dibuatkan Interface login pada mail system di mail server Kantor. Katanya sih, biar orang2 kantor pada tertarik menggunakan mail system yang telah disediakan. Hmmmm, cukup antusias juga yahh temen gue yang satu ini di bidang tampilan (interface aplikasi). Jadi maksudnya, gue sedikit salut, ternyata dia cukup memperdulikan efek psikologi tampilan sebuah aplikasi dibanding hanya mengandalkan ketikan2 jari skrip. Ya! memang back end skrip adalah tameng, tapi jangan lupa design interface adalah resepsionis bagi sebuah perancangan aplikasi. Jadi anggap saja sebagai pintu masuk alam perhatian pengunjung.

Langkah Awal Dokumen, Background Form Email

Kita mulai, Siapkan dokumen baru PShop Anda Berukuran kira2 400 x 400 pixels.

Pilih tool Rounded Rectangle Tool, tentukan radius nya = 8 pixels. Kasi nama layer = Background

Langsung pilih layer > Layer Stye

Outer Glow

Gradient Overlay

Stroke

Hasilnya

Berikan Teks Username dan Password di dalam area bidang vektor yang telah Anda poles diatas. Download disini untuk Metrostyle Extended Font

Beralih ke langkah selanjutnya, buat kotak dengan Rounded Rectangel tool radius sekitar 4 - 7 pixels untuk field Username dan Password

Berikan efek layer style

Inner Shadow

Color Overlay = <?PHP echo "#FFFFFF"; ?> (biar gue ga terkesan mengesampingakn skrip juga) . Mode = Normal

Stroke ..

Duplikat layernya agar menjadi dua field. Hasilnya ..

Membuat Glossy Button

Lanjut ke pembuatan tombol login untuk field form. Buat lah tombol oval dengan menggunakan Glossy Button Technic, seperti yang telah dijelaksn pada tutorial2 basic terdahulu. Dan letakkan di bagian kanan bawah bidang objek Layer Background.

Tekan [CTRL + Click] pada layer button glossy yang Anda buat, lalu pilih layer background, pilih menu Select > Modify > Expand kasi nilai 10 pixels. Lalu tekan tombol [DELETE]

Sehingga hasilnya seperti pada gambar

Lanjut ke Tutorial Bagian - 2