membuat web dengan photoshop cs 5 dan macro media dream weaver
Post on 02-Dec-2014
1.273 Views
Preview:
DESCRIPTION
TRANSCRIPT
Tutorial Photoshop & Dreamweaver
TutorialBasic
Membuat Web dengan Photoshop CS 5 dan Macromedia Dreamweaver
“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
http://www.ziddu.com/download/17938282/BahanwebDW2.rar.html
Hasil :
DOWNLOAD
Tutorial Photoshop & Dreamweaver
Desaincek.wordpress.com
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
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
Desaincek.wordpress.com
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 <HTML> dan </HTML> menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML</li>
<li>Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas :</li>
</ul>
<p>1. kepala, ditandai dengan pasangan tag <HEAD> dan </HEAD><br>
2. badan, ditandai dengan pasangan tag <BODY> dan </BODY></p>
<ul>
<ul>
<li>Pada bagian kepala, bisa ditentukan judul dokumen HTML. Judul ini ditulis dalam pasangan tag <TITLE> dan </TITLE>. 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
S U K S E S
Kritik dan Saran sangat saya Terima
Silakan Email saya waly147258369@gmail.com
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">
top related