Membuat Web dengan Photoshop CS 5 dan Macromedia Dreamweaver

TutorialBasic

Tolong bagaimana belajar membuat template jangan rumit, pertanyaan ini membuat bagaimana tutorial ini lebih instan. Pada file untuk latar belakang sudah siap dibuat tinggal membuat beberapa menu etc. Selamat membaca Bahan : 1. 04.jpg 2. C4D2_Stock.png Untuk download File Source silakan klik LINK

DOWNLOAD
http://www.ziddu.com/download/17938282/BahanwebDW2.rar.html

Hasil :

Tutorial Photoshop & Dreamweaver

Langkah Langkah : 1. Open Photoshop Klik File NEW, sehingga akan tampil layar seperti gambar dibawah ini setting sesuai gambar dibawah ini :

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

2. Buka File 04.jpg

3. Drag File 04.jpg ke layer yang sebelumnya dbuat

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

4. Membuat Menu Bar Klik Rectagle Tool,

Dan atur warna sesuai gambar dibawah ini :

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

Klik layer Shape1

Selanjutnya klik kanan pilih Blending Options, setting sesuai gambar dibawah ini

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

Atur Opacity sesuai gambar berikut

Sehingga hasil sementara seperti dibawah ini :

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

5. Membuat Pembatas Menu Buatlah layer baru, Layer > New > Layer, klik Rectagle Tool dan buat seperti gambar dibawah ini

Ubahlah pada layer menjadi Multiply

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

Selanjutnya Pada Layer Style Klik Outer Glow dah setting pada gambar dibawah ini

Buatlah beberapa Pembatas Menu, dan beberapa Text dengan menggunakan Text Tool dan atur seperti gambar dibawah ini.

Pembatas Menu TEXT TOOL

Tutorial Photoshop & Dreamweaver

6. Membuat Kotak Untuk Title, dan Isi Buatlah Kotak kembali dengan cara Klik Rounded Ractangle Tool

Buatlah Layer BAru seperti gambar dibawah ini

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

Sehingga Hasilnya seperti gambar berikut , buatlah semenarik mungkin agar terlihat lebih rapi. Gunakan file C4D2_Stock.png.

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

7. Menggunakan Slice Tool Pada ToolBox Pilih Slice Tool, dan atur seperti gambar dibawah ini

8. Save for Web& Devices Simpan dengan memilih Menu File > Save for Web& Devices > OK. Tahap Desain pada Photoshop sudah selesai

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

9. Edit CSS with Dreaweaver Buka File Latihan1.Html, atau Open with Dreamweaver versi apapun

Sehingga tampilan yang akan muncul pada Dreamweaver terlihat seperti berikut

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

10. Kode CSS dan HTML Kode Setiap Menu Bar <a href="http://desaincek.wordpress.com/"><img src="images/latihan1_03.gif" alt="" width="287" height="56" border="0"></a></td> <td rowspan="5"> <img src="images/latihan1_04.gif" width="2" height="633" alt=""></td> <td colspan="2"> <a href="http://desaincek.wordpress.com/"><img src="images/latihan1_05.gif" alt="" width="210" height="56" border="0"></a></td> <td> <a href="http://desaincek.wordpress.com/"><img src="images/latihan1_06.gif" alt="" width="210" height="56" border="0"></a></td> <td colspan="2"> <a href="http://desaincek.wordpress.com/"><img src="images/latihan1_07.gif" alt="" width="219" height="56" border="0"></a></td> <td colspan="3"> <a href="http://desaincek.wordpress.com/"><img src="images/latihan1_08.gif" alt="" width="202" height="56" border="0"></a></td> <td rowspan="8">

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

Kode Title dan Isi <tr> <td colspan="4" rowspan="3"> <img src="images/latihan1_12.gif" width="441" height="495" alt=""></td> <td colspan="3" background="images/latihan1_13.gif"><div align="center"> <h2><strong><span class="style1">TITLE</span></strong></h2> </div></td> <td rowspan="6"> <img src="images/latihan1_14.gif" width="23" height="640" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="64" alt=""></td> </tr> <tr> <td colspan="3"> <img src="images/latihan1_15.gif" width="377" height="18" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="18" alt=""></td>

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

</tr> <tr> <td colspan="2" rowspan="2" align="left" valign="top" background="images/latihan1_16.gif"><p>Contoh kode HTML yang sangat sederhana :</p> <ul> <li>Pasangan tag &lt;HTML&gt; dan &lt;/HTML&gt; menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML</li> <li>Bagian yang terdapat dalam &lt;HTML&gt; dan &lt;/HTML&gt; umumnya terbagi atas :</li> </ul> <p>1. kepala, ditandai dengan pasangan tag &lt;HEAD&gt; dan &lt;/HEAD&gt;<br> 2. badan, ditandai dengan pasangan tag &lt;BODY&gt; dan &lt;/BODY&gt;</p> <ul> <ul> <li>Pada bagian kepala, bisa ditentukan judul dokumen HTML. Judul ini ditulis dalam pasangan tag &lt;TITLE&gt; dan &lt;/TITLE&gt;. Pada contoh di atas, judul dokumen HTML adalah Latihan Pertama. Judul ini diletakkan di bagian atas jendela browser.</li> </ul>
</td>

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com

<td colspan="3" rowspan="2" align="left" valign="top" background="images/latihan1_18.gif"><p>HTML adalah sebuah bahasa pemrograman yang digunakan untuk membuat sebuah halaman Web. Untuk menulis kode HTML digunakan editor teks seperti NotePad atau FrontPage.</p></td> <td colspan="3" rowspan="3">

SUKSES

Kritik dan Saran sangat saya Terima Silakan Email saya waly147258369@gmail.com Desaincek.wordpress.com

Tutorial Photoshop & Dreamweaver Desaincek.wordpress.com