DomaiNesia

Sunday, 7 February 2016

Cara Membuat Themplete Website Mengunakan Photoshop.

       No comments
Selamat pagi kawan-kawan gimana kabarnya nih dah pada mandi ngak..?

oke lah kita lanjut ke tutorial meniru themplete seseorang mengunakan teknik photoshop.
Langkah pertama cari terlebiih dahulu themplete yang ingin di tiru atau mau di jiplack.
kebetulan saya di suruh meniru themplete online sama asdos di kampus guna memenuhi nilai fainal tambahan,,,saya meniru themplete olx ok lanjut aja ke pembahasan.

1. Siapkan themplete yang mau di jiplak




2. Kemudian screenschot thempletenya,,selanjutnya buka photoshop anda 


3. Apabila sudah tampil jendela photoshop anda sepetri gambar di bawah ini


4. Maka selanjutnya buka themplete yang sudah di screenshot tadi dengan cara tekan tombol keyboard ctrl + O kemudian open screenshot yang tersimpan di computer. kemudian gunakan tool slice tool kemudian crup seperti gambar di bawah ini..


5. Kemudian save dengan cara seperti gambar di bawah ini.


6. Selanjutnya akan jadi hasilnya seperti gambar di bawah ini.


7. Kemudian untuk imagex 

8. kemudian scripnya jadinya seperti gambar di bawah ini.


9. Selanjutnya untuk css nya.


body {font-family: 'Roboto', Arial, Helvetica, sans-serif;}
a {outline: none;color: #2965be;text-decoration: none;}
a:hover {color: #FF7700;}
input[type="text"] {width: 100%;font-size: 18px;border:0px;color: #BFC9CA;}
input[type="text"]:focus {outline: none;}
#footer-container {background: #e2e2e2;padding-bottom: 10px;position: relative;padding-top: 10px;}
#footer-container .boxindent {margin-left: 125px;}
#footer-container .static.box {max-width: 165px;margin: 0px;margin-right: 70px;}
#footer-container .static.box li {margin: 3px 0px;}
#lastwrapper {min-height: 204px;}
.small {font-size: 17px !important;font-weight: 200;}
.wrapper {text-align: left;margin: 0 auto;width: 876px;font-size: 17px;}
.small {font-size: 13px !important;}
.fleft {float: left;}
.judul {font-size: 20px;}

10. Selanjutnya untuk script indexnya seperti gambar di bawah ini

<html>
<head>
<title>olx.co.id</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<link rel="stylesheet" type="text/css" href="css/css.css">
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table align="center" id="Table_01" width="918" height="801" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td rowspan="20" >
   <img src="images/olx_01.jpg" width="17" height="800" alt=""></td>
  <td colspan="3" rowspan="3">
   <a href="#"><img src="images/olx_02.jpg" width="104" height="99" alt=""></a></td>
  <td colspan="19">
   <img src="images/olx_03.jpg" width="796" height="28" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="28" alt=""></td>
 </tr>
 <tr>
  <td colspan="6"> <div class="judul">cara tepat jual cepat</div>
  <td colspan="6" rowspan="3">
   <img src="images/olx_05.jpg" width="267" height="95" alt=""></td>
  <td>
   <a href="#"><img src="images/olx_06.jpg" width="138" height="48" alt=""></a></td>
  <td rowspan="3">
   <img src="images/olx_07.jpg" width="11" height="95" alt=""></td>
  <td colspan="4">
   <a href="#"><img src="images/olx_08.jpg" width="159" height="48" alt=""></a></td>
  <td rowspan="19">
   <img src="images/olx_09.jpg" width="18" height="772" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="48" alt=""></td>
 </tr>
 <tr>
  <td colspan="6" rowspan="2">
   <img src="images/olx_10.jpg" width="203" height="47" alt=""></td>
  <td rowspan="2">
   <img src="images/olx_11.jpg" width="138" height="47" alt=""></td>
  <td colspan="4" rowspan="2">
   <img src="images/olx_12.jpg" width="159" height="47" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="23" alt=""></td>
 </tr>
 <tr>
  <td colspan="3">
   <img src="images/olx_13.jpg" width="104" height="24" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="24" alt=""></td>
 </tr>
 <tr>
  <td colspan="2" rowspan="3">
   <img src="images/olx_14.jpg" width="44" height="90" alt=""></td>
  <td colspan="6" width="222" height="40"><input type="text" value="Semua Provinsi"></td>
  <td colspan="2" rowspan="3">
   <img src="images/olx_16.jpg" width="60" height="90" alt=""></td>
  <td colspan="8" width="415" height="40"> <input type="text" value="3.339.942 iklan di sekitar anda"></td>
  <td rowspan="2">
   <img src="images/olx_18.jpg" width="28" height="68" alt=""></td>
  <td>
   <a href="#"><img src="images/olx_19.jpg" width="97" height="40" alt=""></a></td>
  <td rowspan="2">
   <img src="images/olx_20.jpg" width="16" height="68" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="40" alt=""></td>
 </tr>
 <tr>
  <td colspan="6" rowspan="2">
   <img src="images/olx_21.jpg" width="222" height="50" alt=""></td>
  <td colspan="8">
   <img src="images/olx_22.jpg" width="415" height="28" alt=""></td>
  <td>
   <img src="images/olx_23.jpg" width="97" height="28" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="28" alt=""></td>
 </tr>
 <tr>
  <td colspan="4">
   <img src="images/olx_24.jpg" width="195" height="22" alt=""></td>
  <td colspan="7" rowspan="10"><a href="#">
   <img src="images/olx_25.jpg" width="361" height="364" alt=""></a></td>
  <td>
   <img src="images/spacer.gif" width="1" height="22" alt=""></td>
 </tr>
 <tr>
  <td rowspan="12">
   <img src="images/olx_26.jpg" width="23" height="419" alt=""></td>
  <td colspan="3">
   <img src="images/olx_27.jpg" width="90" height="57" alt=""></td>
  <td rowspan="12">
   <img src="images/olx_28.jpg" width="22" height="419" alt=""></td>
  <td>
   <img src="images/olx_29.jpg" width="98" height="57" alt=""></td>
  <td rowspan="12">
   <img src="images/olx_30.jpg" width="15" height="419" alt=""></td>
  <td colspan="4">
   <img src="images/olx_31.jpg" width="93" height="57" alt=""></td>
  <td rowspan="12">
   <img src="images/olx_32.jpg" width="15" height="419" alt=""></td>
  <td>
   <img src="images/olx_33.jpg" width="106" height="57" alt=""></td>
  <td rowspan="12">
   <img src="images/olx_34.jpg" width="59" height="419" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="57" alt=""></td>
 </tr>
 <tr align="center">
  <td colspan="3" width="90" height="24"><a href="#">Mobil</a></td>
  <td width="98" height="24"><a href="#">Motor</a></td>
  <td colspan="4" width="93" height="24"><a href="#">Properti</a></td>
  <td rowspan="2" width="106" height="44"><a href="#">Keperluan Prribadi</a></td>
  <td>
   <img src="images/spacer.gif" width="1" height="24" alt=""></td>
 </tr>
 <tr>
  <td colspan="3" rowspan="2">
   <img src="images/olx_39.jpg" width="90" height="39" alt=""></td>
  <td rowspan="2">
   <img src="images/olx_40.jpg" width="98" height="39" alt=""></td>
  <td colspan="4" rowspan="2">
   <img src="images/olx_41.jpg" width="93" height="39" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="20" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/olx_42.jpg" width="106" height="19" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="19" alt=""></td>
 </tr>
 <tr>
  <td colspan="3">
   <img src="images/olx_43.jpg" width="90" height="65" alt=""></td>
  <td>
   <img src="images/olx_44.jpg" width="98" height="65" alt=""></td>
  <td colspan="4">
   <img src="images/olx_45.jpg" width="93" height="65" alt=""></td>
  <td>
   <img src="images/olx_46.jpg" width="106" height="65" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="65" alt=""></td>
 </tr>
 <tr align="center">
  <td colspan="3" width="90" height="40"><a href="#">Elektronik  & Gadged</a></td>
  <td width="98" height="40"><a href="#">Hobi  & Olahraga</a></td>
  <td colspan="4" width="93" height="40"><a href="#">Rumah Tangga</a></td>
  <td width="106" height="40"><a href="#">Perlengkapan Bayi & Anak</a></td>
  <td>
   <img src="images/spacer.gif" width="1" height="40" alt=""></td>
 </tr>
 <tr>
  <td colspan="3">
   <img src="images/olx_51.jpg" width="90" height="20" alt=""></td>
  <td>
   <img src="images/olx_52.jpg" width="98" height="20" alt=""></td>
  <td colspan="4">
   <img src="images/olx_53.jpg" width="93" height="20" alt=""></td>
  <td rowspan="6">
   <img src="images/olx_54.jpg" width="106" height="194" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="20" alt=""></td>
 </tr>
 <tr>
  <td colspan="3">
   <img src="images/olx_55.jpg" width="90" height="66" alt=""></td>
  <td>
   <img src="images/olx_56.jpg" width="98" height="66" alt=""></td>
  <td colspan="4">
   <img src="images/olx_57.jpg" width="93" height="66" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="66" alt=""></td>
 </tr>
 <tr align="center">
  <td colspan="3" rowspan="2" width="90" height="39"><a href="#">Kantor & Industri</a></td>
  <td rowspan="3" width="98" height="57"><a href="#">Jasa & Lowongan Pekerjaan</a></td>
  <td colspan="4" rowspan="2" width="93" height="39"><a href="#">Sci-Fi</a></td>
  <td>
   <img src="images/spacer.gif" width="1" height="31" alt=""></td>
 </tr>
 <tr>
  <td colspan="7" rowspan="3">
   <img src="images/olx_61.jpg" width="361" height="77" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="8" alt=""></td>
 </tr>
 <tr>
  <td colspan="3" rowspan="2">
   <img src="images/olx_62.jpg" width="90" height="69" alt=""></td>
  <td colspan="4" rowspan="2">
   <img src="images/olx_63.jpg" width="93" height="69" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="18" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/olx_64.jpg" width="98" height="51" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="51" alt=""></td>
 </tr>
 <tr>
  <td colspan="21"><img src="images/olx_65.jpg" width="882" height="168" alt=""></a></td>
  <td>
   <img src="images/spacer.gif" width="1" height="168" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/spacer.gif" width="17" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="23" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="21" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="60" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="9" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="22" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="98" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="15" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="18" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="41" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="19" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="15" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="15" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="106" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="59" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="53" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="138" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="11" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="18" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="28" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="97" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="16" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="18" height="1" alt=""></td>
  <td></td>
 </tr>


</table>
<footer id="footer-container">
  <div class="wrapper clr">
  </div> 
  <div class="wrapper small" id="lastwrapper">
   <div class="margintop15 clr rel">
    <div class="fleft">
     <p>
      <span class="icongray" title="OLX.co.id - OLX Indonesia"><img src="images/lg.png"></span>
     </p>
    </div>
    <div class="boxindent">
     <div class="clr">

      <div class="static box fleft">
       <ul class="small lheight16">

        <li class="block">
         <span>Pusat Bantuan</span>
        </a>
       </li>

       <li class="block">
        <span>Ketentuan Umum</span>
       </a>
      </li>
      <li class="block">
       <span>Kebijakan Privasi</span>
      </a>
     </li>
     <li class="block"
     <span>Cara Menggunakan OLX</span>
    </a>
   </li>
   <li class="block">
    <span>Tips Jual Beli Aman</span>
   </a>
  </li>

 </ul>
</div>
<div class="static box fleft">
 <ul class="small lheight16">
  <li class="block">
   <span>Peta Situs</span>
  </a>
 </li>
 <li class="block">
  <span>Iklan Berdasakan Lokasi</span>
 </a>
</li>
<li class="block">
 <span>Pencarian populer</span>
</a>
</li>
<li class="block">
 <span>Join OLX</span>
</a>
</li>

</ul>
</div>
<div class="static box fleft">

 <li class="block">
  <a href="#" class="tdnone link spoiler graydot" id="footerPartners">
   <span class="inlblk">Tentang kami</span>
   <span class="icon mini inlblk vtop margintop6 marginleft5 down4">&nbsp;</span>
  </a>
 </li>
 <li class="block">
  <span>Facebook OLX Indonesia</span>
 </a>
</li>
<li class="block">
 <span>Twitter OLX Indonesia</span>
</a>
</li>
<li class="block">
 <span>Blog OLX Indonesia</span>
</a>
</li>
</div>
</body>
</html>
Hasil akhirnya seperti gambar di bawah ini apabila di jalankan di browser

Sekian tutorial dari saya singkat banget.

Untuk Download sourcodenya dapat di download di bawah ini


Lokasi: Makassar, Makassar City, South Sulawesi, Indonesia

0 komentar:

Post a Comment

luvne.com luvne.com ayeey.com cicicookies.com mbepp.com kumpulanrumusnya.comnya.com.com