Merancang Website ( Full Abis )

March 27th, 2007 by dr.emi

Aloha, nah lu yang masih pada bingung dan suka ngontak2 gue via YM tentang cara bikin web dari awal perancangan ampe dipublish di internet…niiii buat lu semua…Selamet menikmati deeee….

 

Aloha, nah lu yang masih pada bingung :D dan suka ngontak2 gue via YM tentang cara bikin web dari awal perancangan ampe dipublish di internet…niiii buat lu semua…Selamet menikmati deeee….

Tapi inget ni langkahnya mayan panjang, jadi lu mesti ngerjain syarat2nya dulu :D :D :D

1. Ga mandi 2 hari 2 malem :D :D :D :D
2. Bikin kopi 2 sachet ABC Mocca
3. Rokok 1 bungkus kayaknya cukup dee …
4. Matiin HP lu, biar cewe nyebelin lu ga usah ganggu2 lu dulu
5. Yang paling penting, Puter Musik kebanggan lu…sekeras2nya ampe tetangga lu pada marah2 hahahahahaha…

–> The Misfits : Dig Up Her Bones
–> Danzig : Mother, Am I Demo
–> Sex Pistols : BODIES

Hehehekk….syarat diatas terbukti mampu menyembuhkan penyakit malas dan bingung….jadi lu cobain deeehh… :D :D

Langkah Perancangan Layout

Bikin bagian Bar Amplifier (Header)…

1. Bikin dokumen baru 760 x 500 pixels
2. Dengan Rounded Rectangle Tool (U) bikin bidang untuk body layout dasarnya, dan satu bidang lagi untuk headernya, radius 4 pixels. Ukurannya lu kira2 aja deeehh sama ukuran canvas.

3. Lu kasi sedikit stroke untuk body dan untuk headernya kasi style dibawah ini:

Stroke 1 pixel warna #000000

4. Lanjut ke membuat bidang mirip bar amlifier… bikin bidang dengan Rounded Rectangle Tool juga, radius = 4 px, tepat diatas bidang header, dengan warna forground putih. Ukurannya lebih kecil dikit dari headernya, ubah nama layernya “bar ampi”.

Kalo style sebelumnya masih di Applay, lu clear dulu deh stylenya..masih inget kan caranya..klik kanan di layernya dan pilih Clear Layer Style. Jadi nanti warna path layout bar ampi akan kembali menjadi putih (warna foruground)

5. Nah sekarang pilih Path Selection Tool (A), klik 2 kali pada bidang layer “bar ampi” agar muncul titik pathnya.

6. Pilih tool Delete Anchor Point Tool

dan klik pada titik - titik path layout yang ditandai warna merah berikut. Tool ini berfungsi untuk menghilangkan titik path. Jangan kaget dulu kalo tampilan layoutnya berubah menjadi miring.

7. Lanjut pilih Add Anchor Point Tool

, klik pada titik tanda merah berikut. Untuk menambahkan titik path layout.

8. Pada titik nomor 1 tarik titiknya ke arah kanan bawah seperti gambar dibawah. Baru lu gunakan Convert Point Tool

untuk mengedit (mengkonvert) titik path nomor 1 tadi. Ikuti arah panah untuk mengedit titik point nomor 1.

Kalo posisi titik satu yang udah di tarik tadi masih kurang ngepas, lu bisa geser lagi ke kiri. Jadi biar lengkungan di atasnya agak lebar.

9. Nah sekarang perhatikan titik 2. Dengan Convert Point Tool, klik pada titik path nomor 2 diatas, abis ntu tarik garis horizontal pathnya pada bagian yang ditanda merah ke kanan .

Titik 2

10. Pada bagian ujung kanan layout bar ampi ini, lu bisa rapiin posisinya, dengan teknik yang sama dengan langkah nomor 9 diatas.

11. Oke langkah untuk mengedit Path Layout Bar Ampi sudah selesai, tinggal lu poles aja deee…

Lu kasi style deeh.

Hasilnya…

Hal. 1 - 2 - 3 - 4 - 5 - 6

Translate

Download Demo
Bookmark Subscribe
Hello my fox! Glad to see you today!

If you love my tutorial, please chose any action from the left button.

66 Comments

webmaster Said:  

Interface Design dalam Tutorial ini gue terinspirasi dari Skin Winamp di Skin Consortium…kalo lu mau liat skinna lu kunjungi farisw.com - nah faris ntu designernya … heheee

Ai Said:  

assalamu’alaikum dokter..
wah terimakasih banyak ya..tutorialnya ngebantu bgt..
Tapi yang mau saya tanyain gmn caranya kalo bikin template web yg basisnya itu kayak wordpress jadi bukan HTML kayak yg udah dokter ajarin..
Please ya dok dibales dan dibahas..terimakasih sbelumnya…

dr.emi Said:  

ok nanti saya bikin tutor nya

webmaster Said:  

Saat ini sudah di publish Wordpress Glassy Three Blog Theme, beserta tutorial cara pembuatanna, silahkan cek di tutorial terbaru website dremi.info

Boim Said:  

Gile Bener……………………………… Keren………………………….
makasih, makasih, makasih, makasih, makasih,
sangat berguna sekali untuk aku yang buta HTML. sekali lagi makasih tutornya

mansur Said:  

Assalammu’alaikum.. dr.emi thanks yah, kalo pertanyaan ku sama seperti emi gimana,,,, tolong jawab dan dibalas yah, terimakasih anak bangsa….

webmaster Said:  

PERTANYAAN SEPERTI EMI YANG MANA ??? EMI ITU KAN SAYA SENDIRI :)

mansur Said:  

Maaf ya Emi, aku tadi mau tanya seperti yang ditanyakan oleh teman yang ada diatasku
yang sudah comment juga, aku kan baru buat blog di WP jadi masih Lemot dan lom
nyambung??? gimana punya tutorial buat yang masih wam dengan WP sepertiku??? thank u atas perhatian and jawabannya yah…….

Keep smile

dr.emi Said:  

hmmm…kalo tutorial WP Skin yang dah ada skrg , masih kurang brow ?? atow gimana ?? bukannya itu sudah cukup lengkap ??? :) thanks

xnux07 Said:  

Assalamu’alaikum Dok…

Salam kenal dok…
Pingin minta bantuan nih Dok..
Saya minta pencerahannya dong bikin Template untuk Wordpress dengan Gaya IPTEK (Komputer) dan dasarnya adalah warna Biru atau gaya Mac OS yang bening itu lho Dok
Saya tunggu kabar baiknya ya Dok…

Wassalamu ‘alaikum wr wb

Moeghan Said:  

Tutorialnya sudah bagus banget
Tapi sayang banget bagi newbie sperti gw tool-tools pada tutorial ini masih belom friendly :D
Tolong dunk di tambahin tutorial bikin animasi dengan tampilan kayak begini http://dremi.info/images/forum/simple_metal_banner.gif

dr.emi Said:  

duh jade banyak PEER..kakakakakkaww, woke brow gue usahain, insyaalloh

Untung Said:  

Oke banget nih dr. Emi… Sangat bermanfaat sekali bagi saya yang sama sekali awam bahasa html. Kalau dibikinnya pake Phothoshop kan bisa lebih mudah apalagi ada tutorialnya, tinggal ngikutin aja ya…
Pokoknya tutorialnya Mantraps abis Bro….

ismail Said:  

Ass. Dr. Emi. Saya juga seorang webdesigner yang belajar cuma otodidak selama 2 bulan aja. Dan saya merasa bangga sekali. Setelah melihat design-design dan tutorial Dr. Emi, saya merasa seperti bakteri diinjak gajah. Tolong donk e-mail kan ke saya tutorial-tutorial yang Dr. Emi buat ke e-mail saya. Tiap hari pun jadi. Atau, buatkan ke dalam CD, yang isinya kumpulan tutorial Dr. Emi, biar saya beli. Please.

uday Said:  

Terima kasih nich tutorialnya, akhirnya STEP BY STEP telah di temukan juga, semaleman nyariin tutorial bikin web ga dapat2, SEMOGA ILMUNYA dapat GANJARAN PAHALA yang BESAR dar Allah, amien

erie Said:  

thank’s bgt bt dr.emi….. tutorlnya keren2.. gua jd terinspirasi!!!
note: tlng benerin dong link k hlmn selanjutnya utk tutorl ini.. gua jd ngak bisa ngeliat hlmn selanjutnya tp untung aja gua dpt file download na….

dr.emi Said:  

hehe :D web 2.0 ini memang dirancang untuk format html, dan untuk page=sekian ga bisa, karena ga sinkron ma versi sebelumna di http://www.dremi.info/tutorial.php?cPub=Hits&cID=24 masih diusahakan, moga2 bisa :) sekalipun saat ini link na belum berfungsi, tapi di versi Biotech na masih bisa dinikmati perhalaman.

heru Said:  

mas bisa minta themes dah jadi buat wordpress ga? gw mau yang dah jadi aja lah kaya blog lo

dr.emi Said:  

bwat heru silakan kunjungi blog wp gw dremi.info/blog

zay Said:  

assalamu’alaikum…
makasih atas tutorialnye…
tapi mo nanya nig gimana caranya bikin pop menu??dah dicoba tapi pas preview ga bisa??

Tama Said:  

Bang emi gw ucapin banyak2 makasih atas tutorialnya

ni skr lg bikin skripsi tentang website… bingung mikir designnya bagaimana
untung ada tutorial dr bang emi

thanks…..

wanda Said:  

salam kenal…..saya sangat kagum dengan kreatifitas anda….bagaimana ya untuk mengantikan desain blogspot kita dengan desain yang kita buat????..kirim ke email ku ya…thanks..(^_^)

alix Said:  

Kalo gw punya 1000 jempol semua gw acungin bw dr.emi yg udah ikhlas naruh ilmu dijidatnya. Jaman materialis gini jarang ada yg ngasi tutorial tuntas scr gratis. Mudah2an yg lain ngikutin jejak dr. emi. Gw yakin dr.emi ngga MATI REZEKI gara-gara ngasi ilmu gratis! Tul ga?

Chinoet Said:  

frends beh keren uy, cik kami bagi nya templet2na bae ku kami di pake uy he….

dd sayang Said:  

kk..dd bangga deh punya seseorang seperti kk, yang bisa berguna bagi orang banyak.design2 kk keren2,walopun dd gk ngerti benartentang html,sotoshop tp kan d sering liat kk bikin jd tau dikit2 hehe.sukses ya bwt kk.

kompan2liter Said:  

Webmaster, gimana caranya jadi game master?????

dr.emi Said:  

hehek ada ada sajah si broder… kata tmen gw c, maen game ntu paling gampang .. kalo maen game semalem suntuk udah ke nonton wayang gitu.. bisa kali lu jadi game master .. hehe.. thanks broder bwat kunjunganna

agus Said:  

bagaimana kok tombol rollover yang d buat di imageready ndak berfungsi ketika d perview d ie ? ma ksih ya
From Lombok

dr.emi Said:  

hmm ada 2 cara, enabled javascript pada browser lu,jika chace browser masih ada, ubah baris javascrip ini : “var preloadFlag = false;” menjadi “var preloadFlag = true;” - untuk support lebih lanjut, kontak saya via forum, snang berkenalan dengan tmen dari 1 daerah. thanks

Ikhsan Said:  

Dr.Emi Thxx Berat Atas Design wat Website Ini…. Hal ini sangat membantu saya dalam tugas akhir sekolah saya Thx Dr.Emi…… ^_^

dr.emi Said:  

ya smoga sukses tugas 2 na :D :ninja

dr.emi Said:  

skarang link halaman na dah bisa :D

Jinpenyu Said:  

makasih bgt atas tutor nya pak dokter,saya ada kesulitan menggunakan dream weaver nih,saya kan bikin layoutnya di bagian background,saya bikin style tengah agak terang truz agak gelap gi pinggih,masalahnya saat mendelet background tadi saya jadiin tempat text,truz saya kasih warna,tp aneh bgt warnanya kliatan beda ndiri,warna berbentuk kotak di tengah body huhuhu….gimana ya caranya diar style background yg saya delet tadi tetep sama kek semula…tapi tetep jadi tempat sebuah text..ok dhe gitu aja dl makasih……
tolong kirim solusinya ke alamat Email saya ya : llearry@yahoo.com (NO JUNK MAILL)

dr.emi Said:  

knpa ga di forum ? sy kurang mngerti maksud na.. kasi contoh dengan screen shoot na, singkat dan jelas.

Gerry Said:  

Assalamu\\\’alaikum dokter.. Saya adl yg suka akan designer,tapi dalam persoalannya aku g bisa membuat desain yg sebagus bahkan jauh lbh bgs dari dokter..bolehkan saya minta tutorial2 anda agar saya bisa membuat design2 sprti anda.
tolong ya kirimkan ke email saya.Jika dokter bersedia mengirim itu sangat membantu saya..
Terima Kasih Banyak
Wassalamualaikum Wr. Wb.

Art Said:  

Bisa kasih clue utk bikin Image Foto menjadi Image Kartun…kirim ke email deh..

Thanks..bro!

gilang Said:  

mas..gmn seh caranya buat nge-upload gambar dr photoshop ke hosting web?? trus, photoshop bisa ga bantuin bikin hal web??

mohon bantuanya

dani Said:  

wah mantap nih mas dok desain..
kira2 kl pake yg gratisan macam the gimp, inkscape gitu bs ngga ya.. :)
ngga punya photoshop je..brpaan harganya ya skrg..

mmm saya pake disable image..tombol submit komennya mana ya..

lagubaruindo Said:  

tank mas tutorial keren banget,,,
tapi syaratnya kelebihan kali yah,,,
hehehe,,,,,

fajz Said:  

Dok..klo tutorial about flash ga ada yah? pengen belajar dunk… oia 1 lg mw tanya about web..kalo mw buat postingan artikel biar bisa masukin tag2 HTML gmn sih? soalnya klo admin ngisi artikel program tag html pasti ga muncul…ak udah coba pake filter tp tetep ga bisa untuk tag2 html..tolong yagh. thanks before..nice website:)

dr.emi Said:  

kamu musti pake TextEditor Word Processor, silakan pilih disini:

http://www.dynamicdrive.com/dynamicindex16/openwysiwyg/index.htm

http://www.dynamicdrive.com/dynamicindex16/richtexteditor/index.htm

— ATAU —

silahkan baca cara penggunaan tinyMCE (WordProcessor) di forum:

http://dremi.info/forum/viewtopic.php?t=282

fajz Said:  

ok deh thanks ya dok..:)
sukses deh.

Areef Said:  

wah..wah..wah..
bukan cuma full abis nih, tapi keren abis jg eui..

faith Said:  

http:www.friendster.comdarsallegend

faith Said:  

Biasa aja!!!

dr.emi Said:  

memang biasa aja, ga ada yg lebih :)

yang berlebihan itu komen kamu ..

thanks

dr.emi Said:  

teknik perancangan web di tutorial ini adalah teknik lama (diinput tgl 27-03-2007), sekarang dah ktinggalan jaman, kalian musti nyoba yg tutorial web 2.0 na

tirta Said:  

hargain usaha org sob..!!kyq lu bisa bikin yg lebih bagus dr ini aja..!!

dr.emi Said:  

saya ga ngerti maksud komen kamu :))

soulferino Said:  

wew… si om dr.emi keyennnnnnnnnnn
ahh… jadi terinspirasi bikin tutorial nih…:D
ahh.. bikin ahh…

tararengkyu dr. emi

budimeeong Said:  

keren dan minta izin download trus nyoba yah

aji Said:  

gw bener2 bekerja dibawah tekanan atasan gw, n mudah2an ja berkat tutorial dari dr. emi ini bisa ngebantu gw yang cuma seorang newbie ijo abis. ilmu gw soal web emang dibawah rata-rata, tapi gw punya semangat buat jadi web master. thanks doc….

muad Said:  

terima kasih banyak nih mas atas tutorialnya.
kayaknya saya bakalan sering mampir disini nih :D

fahmi Said:  

dr.emi bisa ngak kirimkan toturial photoshop ke email sy fahmie_scc@yahoo.co.uk thanks ya…

dr.emi Said:  

permintaan kamu tidak lazim. karena tutorial nya udah dipublish di website, jadi bwat apa dikirimkan ke pengunjung lagi ?
mungkin yg kamu maksudkan adalah newsletter, jadi kalo mau kamu reg di subscribe feed RSS tutorial photoshop dremi.info. dengan demikian setiap kali saya input tutorial photoshop, maka kamu akan menerima konten tutorial na secara otomatis ke email kamu.

petunjuk berlangganan subscribe konten RSS Feed Tutorial Photoshop dremi.info:

silahkan ketikkan email nya pada form Subscribe Feeds yang ada di panel sidebar halman, lalu klik tombol subscribe, maka akan muncul pop up window konfirmasi subscribe, ketik kode security nya dan klik lagi tombol selanjutnya

R Said:  

Semuanya keren abiz! thanks for your tutorial Dr. Dremi.

dHian Said:  

mantap semeton, mantap! salut banget. sasak maju terus!

dr.emi Said:  

bwat dHani: mule menu smeton, lamun te pade pacu jaq, pasti araq hasil, sasak harus maju, sasak harus cerdas !!! sukses !!

examination Said:  

dr. emi orangnya biasa ajahhhh,,,,

tapi karya nya LUARRRR BBiiiiAASA !!!!!!

ciiiiip……

di tunggu Karya slanjutnya???

examination Said:  

dr Emi teh asli orang mana yachhh…

kok bisa basa Sunda …

ronny Said:  

Salam ilmuwebsite team…

wah…. jadi ketinggalan ilmunya ne… dari team ilmuwebsite semua
karna kesibukan ne, jadi lupa ama internet… tapi ga apa2 lah dan baru sekarang bisa jumpai blog2 teman yg lain2 nya…?!!!

salam sukses to dremi…..

dr.emi Said:  

@ronny
halo slam ilmuweb juga :) iya nih baru hari ini mulai berbenah cek cek web dan liat forum. baru hari ini juga mulai input2 tutorial baru. salam ilmuwebsite. sukses !!!

shiwa Said:  

assalamualaikum dokter..makasih atas tutorialnya
dokter kalo tutorial penyambung halaman 1 ke halaman selanjutnya gimana???
please balas y…makasih sebelumnya

eri yogya Said:  

bos, ngimana nich bisa gak tolong aq untuk tutorial membuat blog yg sdh didesain oleh management bos agar kita yg kuper dunia maya ini tambah jernih otaknya, plz help me

tak tunggu lho infonya d iemailku

Arifin Said:  

Boss.. ku dah coba buat lay out web saya yang trus gimana caranya (coding) untuk bisa jadi web (htmlcss format), mohon pencerannya

Muhammad luthfi Said:  

makasi bgt atas tutorialnya. mantep semua. cuma saya msh bingung neh cara ngisi tulsa2nya pake dreamweaver. ngasih tulisannya ko gak bisa diatur. maklum saya msh belajar, cara ngedit di dreamweavernya. makasi banyak. tolng ya mas emi, krm ke e-mail saya :luthfi_boyz@plasa.com

Hi.. ! Wanna say anything about my tutorial ?
Just say it with fill the comment form.
 
 
 
 
 
Category
stack