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

Extreme GUI Website Layout


(Halaman - 1)

Naah iniiii diaaaaa si jali2iiiiii, yang ditunggu - tunggu beberapa netter yang telah mengirimkan e-mail ke dremi.info, meminta agar tutorial membuat extreme website layout tingkat tinggi di publish...

Berangkat dari beberapa email yang gue terima ini, akhirnya gue berhasil membuat tutorial nya. Tutorial ini gue golongkan ke dalam tutorial tingkat intermediate, temanya GUI PLAYER INTERFACE dan langkahnya memang agak panjang, tapi dr.emi tidak pernah menutup pintu untuk diserbu pertanyaan dari netter semua. Dengan senang hati, jika dari bagian tutorial ini ada yang ditanyakan, silahkan kontak dr.emi via YM / email.

WOKE2 kita mulai lagi...Buka Winamp player Kalian, Open lagu kebanggan gue (hehehehe....) :

The Ramones - I Wanna Be Sedated ( dibawakan oleh The Offspring )
The Ramones - Somebody Put Something in My Drink (Original Voice)

Kencangkan Volumenya....dan buka PShop kebanggaan kalian semua..

Kali ini gue pake langkah penomoran, karena langkahnya agak panjang.

Mulailah membuat ukuran canvas untuk layout dasar web nya; 760 x 580 pixel, setting lainnya biarkan default.

Bagian Header

Panel Speaker

  1. Buat Layer Group yang berbentuk ikon folder (Layer > New > Group) ganti nama layer group dengan Header -Top. Kemudian dengan menggunakan Rectangle Tool (U) buatlah sebuah bidang kotak di pojok bagian kiri layout. Ukurannya sesuaikan dengan gambar, kasi naam layer "batang".



  2. Transform lah dengan mode perspektif transform, atur bentuknya seperti pada gambar. Ikuti panah merah untuk arah mouse kalian. Enter 2 X.






  3. Kasi Layer > Layer Style

    Outer Glow



    Gradient Overlay



    Stroke > 1 pixel dan warna #000000

    Hasilnya



  4. Selanjutnya kita akan membuat speakernya. Buatlah Elips pada bagian atasnya, dengan elips tool. Ini untuk background speakernya . Ubah nama layernya "bg-speaker".

    Kasi Layer Style yang sama dengan Layer Batang diatas, hanya saja pada bg-speaker ini tambahkan Bevel and Emboss.





  5. Selanjutnya kita buat speakernya, bikin layer baru juga dengan nama layer "speaker". Caranya cukup duplikat layer bg-speaker, dan transforlah ukurannya menjadi 80 %. dan kasi layer style yang sama dengan layer bg-speaker



  6. Duplikat kembali Layer Speaker untuk membuat kain pelapis speakernya. Kasi Layer > Layer Style..

    Inner Shadow



    Gradient Overlay



    Kasi Stroke 1 px warna #000000

    Hasilnya



  7. Nah kasi uletan dikit di tengahnya untuk pusat speaker

    Kasi Layer Style
    Outer Glow



    Bevel and Emboss



    Gradient Overlay



    Hasil Sementara




  8. Naaah panel speaker dan batangnya telah selesai, sekarang tinggal duplikat aja satu2, kalian juga bisa membuat layer group lagi untuk menyatukan layer bg-speaker, buletan ditengah dan speakernya, misalkan saja Nama Layer groupnya Speaker. Tinggal klik dan drag layer2 bg-speaker, buletan ditengah dan speakernya ke dalam layer group Speaker.

  9. Tugas Selanjutnya adalah Menduplikat Layer Goup Speaker dan Layer batang. Transform kedua layer dengan menggunakan transform derajat (Rotate) seperti pada tutorial Jam Dinding. Jangan lupa atur posisi layer agar tampak seperti pada gambar.





  10. Woks...Baru sekarang kita bikin header bar nya...Tapi tetap sabar, untuk menjadi master memang inilah cara satu2nya (Sabar, Ulet dan teliti).

    Halaman - 1 Halaman - 2 Halaman - 3 Halaman - 4

 

 

 

 

© Copyright 2007 www.dremi.info


Technorati Cosmos: other blogs commenting on this post

SOCIAL BOOKMARK :

Social Bookmarks



PERMALINK HERE :

HTML Code are Not Available





11 Comments to
“ Extreme GUI Website Layout “

capunk    Posted On: 28-10-2008 / 15:23:00

Untuk convert photoshop ke html saya rasa tidak begitu sulit mas...
yang saya tanyakan, ada ga tutorial desain web dari PSD ke CSS...kalo ada tolong dipublishkan mas.....
Nice atas infonya
kang tarno    Posted On: 10-07-2008 / 18:13:37

dremi.info aku salut bener sama desainnya, cakep abis tapi kalo sharring via chat bisa kah......
Edy    Posted On: 03-06-2008 / 00:37:20

Wah...keren abis lu boss! Botul-2 terpesona aku melihat kemahiranmu. Aku yg sebelumnya gak pernah teringat belajar web, jadi ikut-ikutan belajar jadinya. Salut buat anda. Teruslah berkarya, bravo man...!
wanda    Posted On: 05-04-2008 / 10:08:50

salam kenal....sebagai pemula dan seorang yang masih awam dengan desain web...saya sangat kagum dengan kreatifitas anda.keren!!!!..maaf,saya juga ingin bertanya bagaimana kalau kita sudah punya desain web-nya sudah gitu kita mau mengganti halaman web blogspot kita desain desain yang kita buat tadi,karena ingin menampilkan web kita lebih keren gitu,kayak dr.emi....bagaimana ya??.saya juga ingin belajar mendesain web dengan anda...kirim ke email ku ya...thanks
dr.emi    Posted On: 10-03-2008 / 00:01:36

salamin dolo ma gadis desa na, ntar dikirimin CD phtoshop na...
mazabduls    Posted On: 09-03-2008 / 16:32:35

saya sebagai pemula sangat mengagumi karya anda,bagi saya anda adalah guru bagi ku.tapi kalo boleh minta sesuatu boleh nggak kalo saya minta software photoshopnya,saya ada tapi masih "trial"karna saya pengen kali belajar desain grafis tolong mas ya....kirim aja ke e-mai aku.sebelumnya saya minta maa wassalam BATAM
filan    Posted On: 05-11-2007 / 15:28:29

ma'...yus bo...s gw bisa lebih konsen dalam belajar design grafis. mantaff.
rasec    Posted On: 26-03-2007 / 20:05:48

mantap nih kayaknya buat dicoba anjrai lah yupz thanx bwat dremi.info satu lagi objek buat dicoba we ekute
sinclair    Posted On: 10-03-2007 / 10:58:27

awesomel tutorial! it really helps me out!
Hairul Azami    Posted On: 26-02-2007 / 00:44:33

Waha...thanks ya komennya...woks gue bakalan coba .... hehehe thanks broo..
Faris Wijaya    Posted On: 26-02-2007 / 00:05:12

keren bro, saran gw stroke na jgn terlalu tebel gw biasa pake 1px opacity agak d kurangin biar ga terlalu item, buat shadowna dah ok ni pake layer style, next lo harus wajib kudu nyoba pake brush bro lo bisa dapet shadow yg ok bgt pake brush, shape lo dah ok tuh buat bikin batang2 na gw ga pernah kepikiran bikin shape kyk gitu T_T, hehe thanks ilmunya keep up the good work

Post your comments

Name
E-Mail
(* will never be published
Website
Comments
Spam Protector
bad-religionsocial-distortion

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