{"id":790,"date":"2007-05-19T01:21:56","date_gmt":"2007-05-19T01:21:56","guid":{"rendered":"https:\/\/www.dremi.info\/?p=28"},"modified":"2007-05-19T01:21:56","modified_gmt":"2007-05-19T01:21:56","slug":"content-box-design-editing","status":"publish","type":"post","link":"https:\/\/www.dremi.info\/tutorials\/photoshop\/content-box-design-editing.html","title":{"rendered":"Content Box Design &amp; Editing"},"content":{"rendered":"<p><img decoding=\"async\" class=\"imgheader\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/images-header200\/content-box-design-editing.png\" alt=\"\" \/> Hihi..posting lagi ahh..<br \/>\nKali ini kita akan membuat content box untuk web lu semua..haha<br \/>\nSederhana saja yak&#8230;<br \/>\nBikin dokumen baru    kira-kira 395 X 217 Px<br \/>\nDengan Rounded Rectangle Tool, radius = 4 px, warnanya=&#8221;#6d6d6d&#8221; bwat bidang persegi nya. Ubah nama layer menjadi <strong>bg<\/strong><br \/>\n<!--more--><\/p>\n<div class=\"clear\">&nbsp;<\/div>\n<p>Kasi Style..<\/p>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Layerdremi_002.png\" alt=\"\" width=\"265\" height=\"383\" \/> <\/div>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Adobedremi_009.png\" alt=\"\" width=\"398\" height=\"218\" \/> <\/div>\n<p>Bwat bagian headernya (nama layer <strong>header<\/strong>), cuma kali ini warnanya pake gradasi style<\/p>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Layerdremi_005.png\" alt=\"\" width=\"256\" height=\"197\" \/> <\/div>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Layerdremi_006.png\" alt=\"\" width=\"253\" height=\"279\" \/> <\/div>\n<p>dan stroke 1 px outside<\/p>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Adobedremi_010.png\" alt=\"\" width=\"390\" height=\"212\" \/> <\/div>\n<p>Tekan [CTRL+Click] pada layer <strong>Header<\/strong>. Dan pilih Rectangle Marquee Tool dengan mode = Intersect With Selection. Dan tarik seleksi pada header. Sehingga akan tersisa bagian seleksi yang diambil saja.<\/p>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Adobedremi_001.png\" alt=\"\" width=\"410\" height=\"75\" \/> <\/div>\n<p>lalu kasi warna putih, kurangi opacitynya menjadi 44 %, ganti nama layernya menjadi <strong>shadow<\/strong>.<\/p>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/dremi_003.png\" alt=\"\" width=\"411\" height=\"83\" \/> <\/div>\n<p>Bwat satu lagi bidang dengan Rounded Rectangle Tool , letakkan di bagian tengah, dan bawah header. Kasi style yang sama dengan layer <strong>bg<\/strong> , hanya saja kurangi size bevelnya menjadi 5 pixels.<\/p>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Adobedremi_011.png\" alt=\"\" width=\"388\" height=\"214\" \/> <\/div>\n<p>Tambahkan Atribut Ikon kotak putus2 dan Text judul nya.<\/p>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Adobedremi_003.png\" alt=\"\" width=\"394\" height=\"216\" \/> <\/div>\n<p>Nah jadi deh, sekarang tinggal di slice aja dengan menggunakan Slice Tool<\/p>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Adobedremi_005.png\" alt=\"\" width=\"409\" height=\"233\" \/> <\/div>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Adobedremi_007.png\" alt=\"\" width=\"404\" height=\"228\" \/> <\/div>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Adobedremi_008.png\" alt=\"\" width=\"408\" height=\"228\" \/> <\/div>\n<p>Lalu Pilih File &gt; Save For Web untuk mengeksport ke dalam file HTML + IMAGES<\/p>\n<div id=\"img\"><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Savedremi_002.png\" target=\"_blank\" rel=\"noopener\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Savedremi_002-400.png\" border=\"0\" alt=\"Perbesar\" width=\"400\" height=\"340\" \/> <\/a><\/div>\n<p>Sekarang buka Dreamweaver lu..<br \/>\nPindah ke bagian layout<br \/>\nPilih ikon Layout Table dan tarik di bagian content tengah box nya. Ini untuk mengkonvert cell bagian tengah menjadi table. sehingga posisi layoutnya tetap seimbang saat gambar tengahnya dihapus.<\/p>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Macromediadremi_003.png\" border=\"1\" alt=\"\" width=\"400\" height=\"336\" \/> <\/div>\n<p>Lalu hapus image bagian tengah sehingga cell tengah menjadi kosong ..<br \/>\nTekan [CTRL+Click] pada cell tengah nya, dan kasi background dengan image tengah yang dihapus tadi.<\/p>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Macromediadremi_006.png\" border=\"1\" alt=\"\" width=\"313\" height=\"67\" \/> <\/div>\n<p>Nah jadi deh, tinggal lu isi aja content nya.. misalkan dengan menggunakan Insert Div Tag ikon <\/p>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Macromediadremi_007.png\" alt=\"\" width=\"32\" height=\"28\" \/> <\/div>\n<p> gue kasi kontent html seperti dibawah ini:<\/p>\n<pre class=\"brush: html;\">&amp;lt;div style=&amp;quot;padding-left:25; padding-right:25; font:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:10px&amp;quot;&amp;gt;\n&amp;lt;strong&amp;gt;Content for New Div Tag Goes Here&amp;lt;\/strong&amp;gt;\n&amp;lt;\/div&amp;gt;<\/pre>\n<div id=\"img\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Content%20Box%20Design%20Editing\/Macromediadremi_008.png\" border=\"1\" alt=\"\" width=\"409\" height=\"260\" \/> <\/div>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/tutorials\/photoshop\/content-box-design-editing.html\" target=\"_blank\" title=\"Share on Facebook\">Share on Facebook<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Hihi..posting lagi ahh.. Kali ini kita akan membuat content box untuk web lu semua..haha Sederhana saja yak&#8230; Bikin dokumen baru kira-kira 395 X 217 Px Dengan Rounded Rectangle Tool, radius = 4 px, warnanya=&#8221;#6d6d6d&#8221; bwat bidang persegi nya. Ubah nama layer menjadi bg Share on Facebook<\/p>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/tutorials\/photoshop\/content-box-design-editing.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":[19],"tags":[24,165,207,208,290,293],"_links":{"self":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/790"}],"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=790"}],"version-history":[{"count":0,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/790\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/media?parent=790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/categories?post=790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/tags?post=790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}