Metode Slice Photoshop
New Document
1. buat halaman baru 13x13 pixel dengan menekan Ctrl+N
2. buat design box nya (terserah selera)
Slice (potong images nya)
1. klik icon Slice Tool
2. klik dan drag untuk melakukan slicing
3. sampai semua slice yang dibutuhkan selesai
Beri Nama Slice
1. klik kanan Slice Tool
2. pilih Slice Select Tool
3. klik pada slice
4. klik kanan dan pilih Edit Slice Option
5. beri nama Slice (terserah) pada kolom Name
6. klik Ok
(ulangi step 3,4,5,6 untuk memberi nama slice yang lain)
Simpan Images
Klik menu File dan klik Save For Web
1. Klik pada slice
2. Sesuaikan File Typenya (sesuai kebutuhan)
(ulangi step 1,2 untuk mengatur File Type slice yang lain)
3. Klik Save (jika semua slice sudah diatur)
4. Pilih All User Slices pada pilihan Dropdown Slice
5. Klik Save untuk melanjutkan.
hasilnya akan menjadi beberapa file sesuai banyaknya slice (potongan yang telah kita tentukan)
HTML
setelah selesai baru sekarang kita rangkai, file-file gambar yang telah terpotong di html.
buat file baru menggunakan "gedit" dan tambahkan code dasar html ini di dalamnya<html>
simpan misal dengan nama "sample_box" tempatkan persis berdampingan dengan folder "images" yang dibuat oleh photoshop
<head>
</head>
<body>
</body>
</html>
Menata Layout Box
1. Menggunakan Div dan CSS
tambahkan style ini dibawah tag <head> sebelum tag </head><style type="text/css">
atau bisa juga begini:
.box{
width:350px;
position:relative;
padding:6px;
}
.box #btl{
background:url(images/box_top_left.gif) no-repeat top left;
position:absolute;
width:6px;
height:6px;
left:0px;
top:0px;
}
.box #btr{
background:url(images/box_top_right.gif) no-repeat top right;
position:absolute;
width:6px;
height:6px;
right:0px;
top:0px;
}
.box #btc{
background:url(images/box_top_center.gif) repeat-x top left;
position:absolute;
height:6px;
left:6px;
right:6px;
top:0px;
}
.box #bcl{
background:url(images/box_center_left.gif) repeat-y top left;
position:absolute;
width:6px;
top:6px;
bottom:6px;
left:0px;
}
.box #bcr{
background:url(images/box_center_right.gif) repeat-y top right;
position:absolute;
width:6px;
top:6px;
bottom:6px;
right:0px;
}
.box #bbl{
background:url(images/box_bottom_left.gif) no-repeat bottom left;
position:absolute;
width:6px;
height:6px;
left:0px;
bottom:0px;
}
.box #bbr{
background:url(images/box_bottom_right.gif) no-repeat bottom right;
position:absolute;
width:6px;
height:6px;
right:0px;
bottom:0px;
}
.box #bbc{
background:url(images/box_bottom_center.gif) repeat-x bottom left;
position:absolute;
height:6px;
left:6px;
right:6px;
bottom:0px;
}
.box #bcc{
background:url(images/box_bg.gif);
padding:12px;
}
</style><style type="text/css">
tambahkan code ini dibawah tag <body> sebelum tag </body>
.box{
width:350px; position:relative;
}
.box, .box #bcc{
padding:6px;
}
.box #btl, .box #btr, .box #btc, .box #bcl, .box #bcr, .box #bbl, .box #bbr, .box #bbc{
position:absolute;
}
.box #btl, .box #btr, .box #bcl, .box #bcr, .box #bbl, .box #bbr{
width:6px;
}
.box #btl, .box #btr, .box #btc, .box #bbl, .box #bbr, .box #bbc{
height:6px;
}
.box #btc, .box #bbc{
left:6px;
}
.box #bbc, .box #btc{
right:6px;
}
.box #bcl, .box #bcr{
top:6px; bottom:6px;
}
.box #btl, .box #bcl, .box #bbl{
left:0px;
}
.box #btl, .box #btr, .box #btc{
top:0px;
}
.box #btr, .box #bcr, .box #bbr{
right:0px;
}
.box #bbl, .box #bbr, .box #bbc{
bottom:0px;
}
.box #btl{
background:url(images/box_top_left.gif) no-repeat top left;
}
.box #btr{
background:url(images/box_top_right.gif) no-repeat top right;
}
.box #btc{
background:url(images/box_top_center.gif) repeat-x top left;
}
.box #bcl{
background:url(images/box_center_left.gif) repeat-y top left;
}
.box #bcr{
background:url(images/box_center_right.gif) repeat-y top right;
}
.box #bbl{
background:url(images/box_bottom_left.gif) no-repeat bottom left;
}
.box #bbr{
background:url(images/box_bottom_right.gif) no-repeat bottom right;
}
.box #bbc{
background:url(images/box_bottom_center.gif) repeat-x bottom left;
}
.box #bcc{
background:url(images/box_bg.gif);
}
</style><div class="box">
<div id="btl"></div>
<div id="btr"></div>
<div id="btc"></div>
<div id="bcl"></div>
<div id="bcr"></div>
<div id="bbl"></div>
<div id="bbr"></div>
<div id="bbc"></div>
<div id="bcc">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN11KrOt0HOd66slX0EnXa-ibeF2p0Bt8w38bFmrmd_L4bPaetSuLEpEiGGJ9zGu8LRUM7jitlIp8DEIIhzarnKd0CAXka_YRkoFk6EB6i1JM5xyodox16faGYCB5yohESNDLGVHYtfxv5/s1600/adipodayDESIGN.png">
</div>
</div>
