Merancang Website - Full Abis
Merancang Website - Full Abis
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Bagian - 1
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....
Tapi inget ni langkahnya mayan panjang, jadi lu mesti ngerjain syarat2nya dulu
1. Ga mandi 2 hari 2 malem
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...
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
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
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:
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
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.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
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.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
11. Oke langkah untuk mengedit Path Layout Bar Ampi sudah selesai, tinggal lu poles
aja deee...
Lu kasi style deeh.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Hasilnya...
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Bagian - 2
Langkah Perancangan Layout
Bikin atribut bar (Header)...
Untuk bagian bar headernya kita tambahkan beberapa atribut untuk panel display,
equalizer, dan tombol2nya.
1. . Buat bidang rounded rectangle tool dengan radius = 4 pixel, taro' di bagian kiri, dan
kasi style dibawah ini.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
3. Jangan lupa kasi style glossy (inget? pake gradasi transparent), gue pake penghapus
untuk memperhalus bagian yang di tanda merah .
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
7. Layer layer untuk equalizer lu group aja, dan duplikat menjadi 8. Untuk buletan
birunya lu geser2 sesuai ilustrasi equalizer sebenarnya, tapi jangan lupa lu geser
berbarengan dengan layer glossynya.
8. Tambahkan 3 buah tombol bulet biru dan text (On, Auto, Pre) di sisi kanan equalizer.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
8. Dengan teknik yang pernah dijelaskan dalam tutorial Squirrel Mail Interface (Wire
Cable), buatlah untaian kabel sesuai selera lu. Kasi juga panel player di bagian kanan
nya (tombol next previous gue bikin pake Custom Shape Tool Triangle dan Pencil Tool,
ato lu bisa liat cara membuat tombol playernya pada tutorial Extreme GUI Web Layout.
Bagian yang dilingkari merah, hapus dengan Eraser Tool, jadi kabel kecilnya tampak
melilit di belakang kabel gede.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Bagian 3
Langkah Perancangan Layout
Bikin Layout Box Content
Ulangi langkah no. 3 pada halaman 1 untuk membuat box contentnya.
Box content nya bikin tiga: box kiri (left menu), kanan (main body), dan bawah (footer).
Bikin Menu
1. Pada bagian box main body Bikin kotak dengan rounded rectangle tool radius
terserah lu yang penting matching aja. kasi gradasi abu2 dan sedikit sentuhan Outer
glow multiply gelap dan stroke 1 px (color #000000).
Tambahkan text2 menu diatasnya dengan dipisahkan oleh garis2 pencil berwarna hitam.
Tambahkan juga hiasan rectangle gradasi biru (kaya bikin tombol biru tadi) di bagian
kanan nya.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Bagian 4
Langkah Perancangan Layout
Slicing Layout di Image Ready
Slicing merupakan teknik memotong objek gambar dengan menggunakan Slice Tool
pada Adobe Image Ready. Dalam proses ini kita dapat menentukan ukuran dan size
gambar yang di potong.
1. OKE..masih dalam area Adobe Photoshop. Buat garis2 guide untuk membantu dalam
slicing nantinya seperti pada gambar. Perhatikan jarak dan posisi guide untuk
memperoleh hasil slice yang teratur.
Garis Guide bisa dibuat dengan klik dan drag pada mistar sekeliling dokumen. Kalo
mistarnya belum muncul tekan [CTRL+R]
Bagian yang dikasi garis guide adalah bagian2 yang akan dislice, seperti tombol, box
konten dan header.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Tunggu proses Loading dan File akan ditampilkan secara otomatis di ImageReady.
Sebelum melakukan slicing, pastikan terlebih dahulu, Pilihan Snap to Guide di centang,
agar saat men slice arah gerakan mouse akan mengikuti jalur guide yg udah dibuat di
Photoshop.
3. Kita mulai dengan bagian petak paling kiri atas pada gambar. Dengan Slice Tool (K)
klik dan tarik mouse mulai dari ujung kanan bawah petak guide -- > ke kiri atas.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
--->
4. Lakukan hal yang sama pada petak2 guide yang lainnya sehingga terbentuk slice
pada semua petak guide nya.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
1. Klik pada slice tombol Home, pilih layer textnya, dan tekan ikon "Create Rollover
State".
Maka akan muncul sebuah layer Over dibawah layer slice Rollover States pada Panel
Slice.
Baru kasi Style pada layer Text Home nya, kali ini kita gunakan perubahan warna text
Home menjadi Putih. Caranya sama kaya di Adobe SotoShop (Layer > Layer Style >
Overlay).
2. Dengan cara yang sama kasi RollOverStates pada Layer2 Text Tombol yang lain.
Optimize Gambar di Image Ready
Optimize merupakan teknik untuk mengoptimalkan size dan kualitas gambar, jadi untuk
di load ke web nantinya kita bisa tentukan size dan kualitas imagenya.
Ada beberapa format Image sebagai hasil dari Teknik Optimize ini:
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Format Optimize standar adalah GIF 128 bit No Ditter (No Ditter: akan menghsilkan efek
gambar yang lebih lembut karena akan dieksport tidak dalam bentuk titik kasar,
melainkan titik - titik halus.)
Untuk mengoptimize caranya klik pada Petak Slice baru mainkan Format
Optimizenya......Hasil size gambar bisa dilihat di bagian bawah lingkaran merah seperti
pd gambar..
Menandakan Slice gambar memperoleh size 5.104 Kbyte. dengan format GIF
Export File Dokumen ke Format HTML + IMAGES
Terakhir Export file dokumen nya ke format HTML+IMAGES. Pilih File > Save As
Optimize. Lalu OK
Maka secara otomatis, file slice (potongan gambar) akan diexport ke format Optimize
yang dipilih (GIF) dalam sebuah folder "images", beserta file HTML nya.
Tutorial versi PDF
Dikeluarkan dan disusun oleh www.dremi.info
Untuk media pembelajaran Offline
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Bagian 5
Langkah Editing Layout
Menggunakan Macromedia DreamWeaver
Macromedia Dreamaweaver merupakan tool pengolah web yang paling cerdas menurut
gue. Karena hingga saat ini penulis merasa sangat terbantu secara optimal dan belum
ada yang mampu menyaingi Tool ini kalo dilihat dari fiture keseluruhannya.
Pada kasus ini gue cuma akan membahas penggunaan Dreamweaver dari segi Editing
dan Organisasi Webnya saja.
1. Mulailah dari proses Management Site. Pilih Site > Manage Site pada Dreamweaver.
2. Nanti bakal muncul jendela Manage Site. Lalu pilih New untuk membuat Situs baru.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Pilih "Edit Local copies on my machine, then ....dstrusnya" , dan klik icon Folder tempat
penyimpanan folder situs Anda (dalam hal ini hasil optimize yang lu buat tadi dari Image
Ready) - NEXT
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Terakhir akan muncul konfirmasi hasil sementara perancangan manajemen situs baru
lu, Lu klik deh tombol DONE nya. Selesai dee..
Aduuuh ngantuk gue
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
3. Selanjutnya pilih File > Open = index.html (file situs) atau bisa juga melalui double klik
pada Panel Files yang sebelah kanan.
4. Ubah ke Mode Layout dengan mengklik tombol Layout seperti di bawah ini...
Klik dulu, lalu akan muncul pilihan mode tampilan dokumen web. Pilih Layout.
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Secara otomatis Tab tombol utama layout akan muncul tepat disebelah kanan Tombol
pilihan Layout tadi.
Pilih Tab Layout
5. Dengan memilih Tab Layout Dokumen diatas, maka akan muncul tampilan garis2
pemisah slice yang kita buat di Image Ready sebelumnya. Garis2 ini merupakan table2
yang telah diciptakan oleh Imageready dalam kode2 HTML nya saat kita mengexport
Dokumen gambar design webnya. Cerdas bukan yang bikin Tool Adobe nya ???
hakhakhak....
6. Nah lu sekarang tinggal klik + [DELETE] aja bagian image nomor 1 dan 2, karena
nantinya akan kita isi dengan konten website
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
7. Sebagai contoh di bagian nomor dua lu [CTRL + KLIK] pada kotak slice berwarna
birunya baru lu pilih warna backgroundnya pada Properties Panel (dibagian bawah)
Sentuh warna background pada gambar lainnnya dengan mouse untuk mengambil
sample warna.
8. Setelah kedua bagian konten lu kasi warna background lu tinggal isi deee website lu
pake apa yang lu mau...Mau Text boleh mau gambar lagi boleh...suka2 lu deee. nama
Website nya juga kan "Website Gue" hehekeehehekehehe....Ntar yee gue pipis dulu dah
jam 1:00 malem niii
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Bagian 6
Langkah Editing Layout
Menggunakan Macromedia DreamWeaver
WOKE kita lanjut lagi...contoh lainnya kita akan membuat table dalam bagian konten
tadi.
1. Pilih Menu Insert > Table ato [CTRL+ALT+T]
Masukkan jumlah Row, Coloum, Border, Cellpadding dan Cellspacing nya terserah lu.....
Klik OK....
2. Dalam Table lu bisa isiin apa aja sesuai inspirasi lu...Contohnya seperti pada
gambar...
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Wah ga nyadar lu yak? lu dah bisa bikin web sekarang, wahhhh hebat2...hehehhee OKE
sampai sini langkah editing layout selesai, lu tinggal publish deee web lu.
Pake hosting gratisan juga boleee, kayak Geocities, Tripod, dlll. Kalo yang udah cukup
mahir bisa nyoba ke http://www.awardspace.com untuk hosting 200 mbyte
GRATIIISSSSS !!! pokoknya disinimah kita nyang gratisan aja deee..
WOKE2 udah ngantuk neee gueh nya.. lu cobain yak,,,semua langkah2nya dan kasi tau
gue kalo ada yg ga ngerti atau yang udah berhasil bikin webnya ...langsung aja ke
FORUm dremi.info yak...
Thanks, semoga bermanfaat AMIN...
Hairul Azami
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Kenalan Nyoook..!
Nama Lengkap
Panggilan
: Emi
Kelahiran
Alamat Rumah
Design Studio
Hobi
Profesi
Musik
Lagu Gue
http://www.dremi.info/tutorial.php?cPub=Hits&cID=24
Website
: http://www.dremi.info
Website gue pernah dimuat dalam PC-Mild ( Powered by PCMedia ) Edisi 22 Januari 2007 Sebagai Website Tutorial
Photoshop Berbahasa Indonesia
: webmaster@dremi.info