{"id":783,"date":"2007-03-27T08:13:24","date_gmt":"2007-03-27T08:13:24","guid":{"rendered":"https:\/\/www.dremi.info\/?p=22"},"modified":"2007-03-27T08:13:24","modified_gmt":"2007-03-27T08:13:24","slug":"merancang-website-full-abis","status":"publish","type":"post","link":"https:\/\/www.dremi.info\/tutorials\/html\/merancang-website-full-abis.html","title":{"rendered":"Merancang Website ( Full Abis )"},"content":{"rendered":"<p><img decoding=\"async\" class=\"imgheader\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/images-header200\/merancangweb.png\" alt=\"\" \/>Aloha, nah lu yang masih pada bingung dan suka ngontak2 gue via YM tentang cara bikin web dari awal perancangan ampe dipublish di internet&#8230;niiii buat lu semua&#8230;Selamet menikmati deeee&#8230;.<br \/>\n<!--more--><\/p>\n<div class=\"clear\">&nbsp;<\/div>\n<p>Aloha, nah lu yang masih pada bingung \ud83d\ude00 dan suka ngontak2 gue via YM tentang cara bikin web dari awal perancangan ampe dipublish di internet&#8230;niiii buat lu semua&#8230;Selamet menikmati deeee&#8230;.<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/Selamatdremi_400.png\" alt=\"\" width=\"400\" height=\"276\" \/> <\/div>\n<p>Tapi inget ni langkahnya mayan panjang, jadi lu mesti ngerjain syarat2nya dulu \ud83d\ude00 \ud83d\ude00 \ud83d\ude00<br \/>\n1. Ga mandi 2 hari 2 malem \ud83d\ude00 \ud83d\ude00 \ud83d\ude00 \ud83d\ude00<br \/>\n2. Bikin kopi 2 sachet ABC Mocca<br \/>\n3. Rokok 1 bungkus kayaknya cukup dee &#8230;<br \/>\n4. Matiin HP lu, biar cewe nyebelin lu ga usah ganggu2 lu dulu<br \/>\n5. Yang paling penting, Puter Musik kebanggan lu&#8230;sekeras2nya ampe tetangga lu pada marah2 hahahahahaha&#8230;<br \/>\n&#8211;&gt; The Misfits : Dig Up Her Bones<br \/>\n&#8211;&gt; Danzig : Mother, Am I Demo<br \/>\n&#8211;&gt; Sex Pistols : BODIES<br \/>\nHehehekk&#8230;.syarat diatas terbukti mampu menyembuhkan penyakit malas dan bingung&#8230;.jadi lu cobain deeehh&#8230; \ud83d\ude00 \ud83d\ude00<br \/>\n<strong>Langkah Perancangan Layout <\/strong><br \/>\n<span class=\"style2\">Bikin bagian Bar Amplifier (Header)&#8230;<\/span><br \/>\n1. Bikin dokumen baru 760 x 500 pixels<br \/>\n2. 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.<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/dremi_001.png\" alt=\"\" width=\"400\" height=\"271\" \/> <\/div>\n<p>3. Lu kasi sedikit stroke untuk body dan untuk headernya kasi style dibawah ini:<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/Adobedremi_001copy.png\" alt=\"\" width=\"250\" height=\"92\" \/> <\/div>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/Layerdremi_001copy.png\" alt=\"\" width=\"254\" height=\"136\" \/> <\/div>\n<p>Stroke 1 pixel warna #000000<br \/>\n4. Lanjut ke membuat bidang mirip bar amlifier&#8230; 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 &#8220;bar ampi&#8221;.<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/webdremi_001.png\" alt=\"\" width=\"400\" height=\"94\" \/> <\/div>\n<p>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)<br \/>\n5. Nah sekarang pilih Path Selection Tool (A), klik 2 kali pada bidang layer &#8220;bar ampi&#8221; agar muncul titik pathnya.<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/webdremi_002.png\" alt=\"\" width=\"80\" height=\"154\" \/> <\/div>\n<p>6. Pilih tool Delete Anchor Point Tool <\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/webdremi_002dremi_001.png\" alt=\"\" width=\"31\" height=\"27\" \/> <\/div>\n<p> dan klik pada titik &#8211; titik path layout yang ditandai warna merah berikut. Tool ini berfungsi untuk menghilangkan titik path. Jangan kaget dulu kalo tampilan layoutnya berubah menjadi miring.<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/webdremi_002copy.png\" alt=\"\" width=\"80\" height=\"154\" \/> <\/div>\n<p>7. Lanjut pilih Add Anchor Point Tool <\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/webdremi_002dremi_002.png\" alt=\"\" width=\"31\" height=\"28\" \/> <\/div>\n<p>, klik pada titik tanda merah berikut. Untuk menambahkan titik path layout.<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/webdremi_003copy.png\" alt=\"\" width=\"400\" height=\"104\" \/> <\/div>\n<p>8. Pada titik nomor 1 tarik titiknya ke arah kanan bawah seperti gambar dibawah. Baru lu gunakan Convert Point Tool <\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/Adobedremi_002.png\" alt=\"\" width=\"30\" height=\"27\" \/> <\/div>\n<p> untuk mengedit (mengkonvert) titik path nomor 1 tadi. Ikuti arah panah untuk mengedit titik point nomor 1.<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/webdremi_004copy.png\" alt=\"\" width=\"400\" height=\"300\" \/> <\/div>\n<p>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.<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/webdremi_007copy.png\" alt=\"\" width=\"355\" height=\"78\" \/> <\/div>\n<p>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 .<\/p>\n<p class=\"style1\">Titik 2<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/webdremi_006-2.png\" border=\"1\" alt=\"\" width=\"304\" height=\"80\" \/> <\/div>\n<p>10. Pada bagian ujung kanan layout bar ampi ini, lu bisa rapiin posisinya, dengan teknik yang sama dengan langkah nomor 9 diatas.<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/webdremi_005.png\" alt=\"\" width=\"129\" height=\"74\" \/> <\/div>\n<p>11. Oke langkah untuk mengedit Path Layout Bar Ampi sudah selesai, tinggal lu poles aja deee&#8230;<br \/>\nLu kasi style deeh.<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/Layerdremi_002.png\" alt=\"\" width=\"265\" height=\"137\" \/> <\/div>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/Layerdremi_003.png\" alt=\"\" width=\"251\" height=\"191\" \/> <\/div>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/Layerdremi_004copy.png\" alt=\"\" width=\"240\" height=\"191\" \/> <\/div>\n<p>Hasilnya&#8230;<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Merancang%20Website%20Full%20Abis\/Untitled-1copy.png\" alt=\"\" width=\"400\" height=\"81\" \/> <\/div>\n<p>Hal. 1 &#8211; <a class=\"bodLink\" href=\"https:\/\/www.dremi.info\/tutorials\/photoshop\/merancang-website-full-abis-part-2.html\">2<\/a> &#8211; <a class=\"bodLink\" href=\"https:\/\/www.dremi.info\/tutorials\/photoshop\/merancang-website-full-abis-part-3.html\">3<\/a> &#8211; <a class=\"bodLink\" href=\"https:\/\/www.dremi.info\/tutorials\/photoshop\/merancang-website-full-abis-part-4.html\">4<\/a> &#8211; <a class=\"bodLink\" href=\"https:\/\/www.dremi.info\/tutorials\/photoshop\/merancang-website-full-abis-part-5.html\">5<\/a> &#8211; <a class=\"bodLink\" href=\"https:\/\/www.dremi.info\/tutorials\/photoshop\/merancang-website-full-abis-part-6.html\">6<\/a><\/p>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/tutorials\/html\/merancang-website-full-abis.html\" target=\"_blank\" title=\"Share on Facebook\">Share on Facebook<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Aloha, nah lu yang masih pada bingung dan suka ngontak2 gue via YM tentang cara bikin web dari awal perancangan ampe dipublish di internet&#8230;niiii buat lu semua&#8230;Selamet menikmati deeee&#8230;. Share on Facebook<\/p>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/tutorials\/html\/merancang-website-full-abis.html\" target=\"_blank\" title=\"Share on Facebook\">Share on Facebook<\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,19],"tags":[108,113,176,208,241,290,293],"_links":{"self":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/783"}],"collection":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/comments?post=783"}],"version-history":[{"count":0,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/783\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/media?parent=783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/categories?post=783"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/tags?post=783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}