membuat web dengan photoshop cs 5 dan macro media dream weaver

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


Desaincek.wordpress.com

Langkah – Langkah :

1. Open Photoshop

Klik File NEW, sehingga akan tampil layar seperti gambar dibawah ini setting sesuai gambar dibawah ini :



2. Buka File 04.jpg

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



4. Membuat Menu Bar

Klik Rectagle Tool,

Dan atur warna sesuai gambar dibawah ini :



Klik layer Shape1

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



Atur Opacity sesuai gambar berikut

Sehingga hasil sementara seperti dibawah ini :



5. Membuat Pembatas Menu

Buatlah layer baru, Layer > New > Layer, klik Rectagle Tool dan buat seperti gambar dibawah ini

Ubahlah pada layer menjadi Multiply


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



6. Membuat Kotak Untuk Title, dan Isi

Buatlah Kotak kembali dengan cara Klik Rounded Ractangle Tool

Buatlah Layer BAru seperti gambar dibawah ini



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



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



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



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">


<td>


<td colspan="2">


<td colspan="3">


<td rowspan="8">



Kode Title dan Isi

<tr>

<td colspan="4" rowspan="3">


<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">


<td>

<img src="images/spacer.gif" width="1" height="64" alt=""></td>

</tr>

<tr>

<td colspan="3">


<td>

<img src="images/spacer.gif" width="1" height="18" alt=""></td>



</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>



S U K S E S

Kritik dan Saran sangat saya Terima

Silakan Email saya [email protected]


<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">

membuat web dengan photoshop cs 5 dan macro media dream weaver

Documents