ÂÂ

Bagian Satu (1) ÂÂ

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 = (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

ÂÂ

Bagian Dua (2) ÂÂ

Pada bagian ke - 2 ini, kita akan mempelajari teknik membuat efek simple wire brush. Sebagai hiasan pada mail login yang telah Anda buat sesuai tutorial bagian -1

Membuat Wire Cable

Untuk membuat efek Wire Cable menggunaka Brush Preset, kita membutuhkan Brush baru yang nantinya akan kita jadikan Stroke Fill pada path objek yang akan kita bahas nanti. Buat dokumen baru berukuran 50 x 50 pixles , Background Content = Transparent.

Gunakan Marquee Tool Selection, dan tarik mouse Anda seperti hasil pada gambar

Pilih Edit > Stroke berikan nilai 1 pixels dan color “#000000″, Lalu [OK]

Pada keyboard Anda selanjutnya tekan [CTRL + A] untuk menseleksi seluruh area. Pilih Edit > Define Brush Preset (Mirip kaya membuat Pattern Preset pada tutorial J100 Sony Ericsson sebelumnya).

Ketik Nama Brush Barunya “wire_curve”, agar tersimpan pada Brush Katalog Photo Shop .

Sekarang pindah lagi ke Dokumen Mail Interface pada tutorial bagian - 1 sebelumnya.

Dengan menggunakan Pen Tool (Mode = Paths), Buatlah titik vektor untuk dijadikan sebagai bidang cable pertama pada pojok kiri atas bidang background mail form

Maka secara otomatis path akan terbentuk, dan dapat Anda lihat di Panel Path Window.

Selanjutnya Kita butuh untuk mengkonvert titik path ke dalam point path agar bisa dijadikan lengkungan path. Klik dan tahan pada Pen Tool Bar, lalu pilih Convert Point Tool

Tarik mouse Anda sesuai arah lengkungan yang diinginkan pada titik path yang telah Anda buat. Perhatiakan arah panah Merah dibawah (Ke Kiri)

Selanjtunya Pilih Tool Brush, gunakan Hard Brush dan Master Diameter = 5 pixles

Baru Anda pindah lagi dengan mengklik ke Pen Tool kembali. Buat Layer baru, ganti warna forground color menjadi “#000000″ dan Pada objek path lengkung yang telah Anda buat > klik Kanan disana lalu pilih Stroke Path.

Maka akan muncul konfirmasi pemilihan Stroke Path, Pilih Brush. Lalu OK. Untuk pengembangan selanjutnya Anda dapat memilih option Simulate Pressure. Kali ini kita abaikan dulu.

Nah sekarang Hasil stroke path sudah terbentuk pada layer.

Kasi efek (Cable Style Effect) pada layer stroke path yang Anda buat

Outer Glow

Inner Glow

Bevel And Emboss

Bevel And Emboss > Contour

Hasil sementara pemberian style pada stroke path berbentuk cable

Buat Satu Stroke Path lagi pada layer baru dengan nama wire-curve, namun kali ini untuk Stroke Path nya gunakan adalah Brush pattern preset (wire_curve brush preset) yang telah Anda buat pada langkah awal bagian - 2 tutorial ini.

Ingat, letakkan layer wire-curve diatas stroke path sebelumnya.

Lalu kasi layer style juga.

Bevel And Emboss

Jadi hasilnya nanti akan seperti ini:

Lanjut ke Bagian - 3

ÂÂ

Bagian Tiga (3) ÂÂ

Membuat Lubang Penyambung

Selanjutnya kita akan membuat Lubang penyambung pada ujung2 kabel yang baru saja kita buat.

Buat layer baru dengan nama “lubang-penyambung”. Ciptakan oval vektor path dengan Ractangle Tool, mode = Shape.

Kasi Layer Style (untuk menjadi master jangan pernah bosan dengan langkah ini)

Outer Glow

Gradient Overlay

Stroke , Color “#000000″ , Size = 1, Opacity = 100%

Dupliat layer lubang-penyambung > dengan nama lubang-penyambung2, dan klik kanan pada layernya lalu pilih Clear Layer Style, karena kita akan menerapkan layer style yang berbeda, jadi layer style nya tidak akan menumpuk.

Berikan layer style juga, kali ini stylenya lebih sederhana dibandingkan lubang penyambung pertama

Cukup Gradient Overlay saja

Klik OK, lalu Transformlah ukuran objek layer lubang-penyambung2 menjadi 80 %. Dan posisi layernya di atas layer lubang-penyambung pertama. Dengan mentransform, maka ukurannya akan lebih kecil dari lubang-penyambung pertama.

Untuk mempermudah langkah selanjutnya silahkan Grouplah kedua leyer lubang-penyambung tadi ke dalam layer Group Folder, caranya, pilih Layer > New > Group lalu kasi nama Group Penyambung. Dan Anda tinggal mendrag and drop layer lubang-peyambung pertama dan kedua kedalam folder group tadi.

Hasil nya ..

> >

Letakkan layer Objek Group Penyambung berada di bawah layer kabel path, dan geser posisinya agar tampak seperti gambar

Nah sekarang langkah selanjutnya gampang aja, duplikat lah group penyambung menjadi group penyambung 2 , dengan cara klik kanan pada layer folder group penyambung, lalu pilih Duplicate Group.

Kini Anda sudah punya dua group lubang penyambung. Anda tinggal mengatur posisinya seperti pada gambar

Huaaammm udah ngantuk + pgel2 linu yeuuh awak urang… (02:04 WIB - 26 Jan ‘07) Untung Urang geus pules sare ti beurang sampe Sore.

Sedikit lagi, Gunakan gambar Linux (pinguin) sebagai hiasan di sebelah kiri bawah, kasi outer glow sedikit, agar tampak memblur.

Sebagai penerapan konsep Interaksi Manusia dan Komputer, tambahkan teks-teks petunjuk sebagai pemandu bagi user mail form, misalkan saja, “Tekan tombol ini untuk Login”

Ini adalah hasil akhir Mail Form yang telah ditambahkan beberapa teks untuk keseimbangan Tipografi dan Dimensi Objek.

ÂÂ

Selamat berkarya semoga sukses. Untuk saran dan kritik atau pertanyaan netter dapat mengisi form Question / Comment di Link Forum dremi.info. Anda dapat memilih topik Design disana .

Terimakasih. [Hairul Azami | dr.emi ]