Tutorial Photoshop, Forum Photoshop, Tutorial CSS, Tutorial PHP, HTML, Web Tips, dll ! dremi.info
Back to Home Site V.8.0 Contact the doctorPhotoshop Forum dremi.info


Custom Search




Untitled Document

 

Membuat Squirrel Mail Interface (Wire Technic Colaboration)
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 = <?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

 

 

 

 

© Copyright 2007 www.dremi.info


Technorati Cosmos: other blogs commenting on this post

SOCIAL BOOKMARK :

Social Bookmarks



PERMALINK HERE :

HTML Code are Not Available





13 Comments to
“ Squirrel Mail Interface “

Parasaoran Malau    Posted On: 13-11-2008 / 23:11:30

thanks bgt dr.emi
Moga Anda ga bosen2 kasi ide..

Yesus Love u
dEpOndOk    Posted On: 08-08-2008 / 17:31:12

Sakti . . . . . benar benar sakti pak dokter . . .
Salut buat semua isi dari webnya pak dokter dan semua petunjuk Pak Dokter.
muchieb    Posted On: 04-08-2008 / 15:57:35

Thengkiyu For Tutorialnya
dr.emi    Posted On: 23-05-2008 / 01:08:36

thanks smoga tugasna sukses juga...
Ikhsan    Posted On: 22-05-2008 / 14:16:27

Betapa Tidak Terhitung Nilainya Saat Ingin Mengatakan Dr.Emi Thx Bwangggetttttt.....!!!!! Gara - gara Dr.Emi saya dapet menyelesaikan tugas akhir saya 2 ( Dua ) Sekaligus Thx Bwat Dr.Emi................
yoenie    Posted On: 08-04-2008 / 20:50:18

keren bgt... gw suka bgt desain na thanx bg bo'....dah bagi2 ilmu
uday_citayam    Posted On: 12-01-2008 / 11:42:32

Saya Doain Masuk SURGA Firdaus, karna udah ngamalin ILMUnya Makasi yach Dr EMI, pantesnya di sebut Prof. Emi aja lah, Thx Prof Wassalam
Untung Wijaya    Posted On: 25-10-2007 / 11:41:21

Wah dr. Emi ini emang jago tapi gak sombong. Buktinya mau ngebagi2 ilmunya. Thank's ya
usamah    Posted On: 04-09-2007 / 22:59:34

Siip lah banget tutorialnya. Tapi jgn lupa PDF nya )
deui    Posted On: 08-08-2007 / 15:11:36

wah, keren... salut deh buat Mr. Dremi... udah sebulan ini aku terbantu dalam bikin web karena tutorial iki.. matur nuwuuunn sangeettt...
andrian    Posted On: 12-02-2007 / 00:10:35

salam kenal bung, web mu keren banget..salut, terus lanjutkan yaa...
Hendra    Posted On: 11-02-2007 / 00:53:07

Gimana sih ktanya mau pada belajar photoshop dalam bhs indonesia, tapi kok ga ada yg ngasi komentar atau pertanyaan untuk setiap tutorial nya....
Mie Sinting    Posted On: 29-01-2007 / 08:17:38

Tutorial ne api yoooo....

Post your comments

Name
E-Mail
(* will never be published
Website
Comments
Spam Protector
danzigpattern

(* ketik phrase / kata berwarna biru
 



Feed Network


Photoshop Tutorials Free, Photoshop Tutorials, Adobe Photoshop Tutorials
↑ Grab this Headline Animator
Add to Google Reader or Homepage Subscribe in NewsGator Online Add to netvibes Add to Pageflakes


Recommended Resources

Dr. Photoshop Tutorial FX AK Productions Studios Load BOY Pixel2Life
Obsidian Dawn Modern Morph Design Directory tutorial Photoshop PS Lover
Web Design Tutorials MDH Design Nansons Graphics Webmaster Resources Web and Aplication Interface | FarisW.Com



Recent Readers




dr.emi's Musics Collection


Sponsors

Webmaster

hairulazami alias dr.emi

Report broken link
Best for Internet Explorer with 1024 x 768 px resolution.

Subscribe Feed

Enter your email address:

 Subscribe in a reader
Delivered by FeedBurner



dr.emi Community Toolbar

dr.emi Community Toolbar

Whats's New ?



Bwat Nyari Duit

Click Here !!!! Get Chitika eMiniMalls E-Gold URLCash.NET UserCash.Com Ziddu.Com

Member Area

Username
Password

Links



Copy TAG HTML di atas ke web lu, ntu tandana mensupport dremi.info



tutorial ilmu grafis indonesia


Situs-Indonesia.com - Web Direktori # 1 di Indonesia

WebStats



Yahoo bot last visit powered by MyPagerank.Net
Msn bot last visit powered by MyPagerank.Net


On our way to 1,000,000 rss feeds - millionrss.com
Top Web design blogs
Powered by  MyPagerank.Net
eXTReMe Tracker

Tutorial Photoshop Ads Tips & Articles Tutorial Comments
Web Comments Web templates