Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver Bagian 1

Apa yang harus saya kuasai untuk Mengerjakan Tutorial ini

Untuk mengerjakan tutorial saya ini maka Anda harus menguasai dasar dari CSS, HTML dan minimal bisa membuat website dengan table. Berikut daftar yang bisa anda pelajari terlebih dahulu:

• Daftar Referensi tag HTML dan HTML 5

• Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)

• Cara Penerapan CSS pada HTML

• Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan Table

• Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline

• Belajar Membuat Website dengan Photoshop dan Dreamweaver

• Silahkan cari referensi lain untuk dasar HTML dan dasar ilustrasi Photoshop, banyak sekali di Google.

Membuat Desain Awal dengan Photoshop

Silahkan buka photoshop anda kemudian buat kanvas baru dengan ukuran 1280 X 800 pixel dan background content white, settingan yang lainnya tidak perlu dirubah.

Double click pada layer 0 yang baru saja dibuat, ganti nama layer menjadi background. Selanjutnya click kanan pada layer background dan pilih blending option :

pada dialog blending option centang dan klik gradient overlay kemudian atur gradasi warna sehingga menjadi seperti pada gambar berikut :

pilih ellipse tool kemudian buat bidang bulat pada layer background yang telah diberi warna gradasi hitam putih, sehingga menjadi sebagai berikut :

buatkan bidang yang sama dengan variasi warna yang berbeda sebanyak 5 buah. klik bidang yang telah dibuat kemudian pilih Filter - Blur - Gausian Blur, ubah radius Gausian Blur menjadi 90 seperti setingan pada gambar dibawah, lakukan setingan tersebut pada semua bidang :

apa yang kita lakukan diatas akan menghasilkan gambar sebagai berikut :

buat lagi bidang berwarna putih dengan ellipse tool kali ini buatlah bidang yang agak lonjong kemudian tempatkan disebelah atas :

Atur fill opacity bidang yang baru saja dibuat pada blending option menjadi 10 sehingga gambar menjadi sebagai berikut :

Dengan demikian background untuk website kita kali ini bisa dikatakan selesai, anda bisa saja menambahkan variasi sesuka anda. Sebagai catatan saja dari saya, background yang kita buat usahakan selalu dengan ukuran 1280 x 800 pixel atau lebih. Seperti yang kita ketahui rata-rata resolusi notebook adalah 1280 x 800 pixel, sedangkan rata-rata desktop berukuran hanya 1024 x 780 pixel. Jika kita membuat background dengan ukuran lebar 1024 tentu tidak akan tampil bagus pada resolusi diatasnya, lebih baik lagi bila kita bisa membuat background yang dinamis namun indah dan dengan ukuran byte yang rendah.

Setelah anda selesai dengan background diatas, selanjutnya mari kita buat design untuk layout content website kita. Buatlah sebuah kanvas baru berwarna hitam dengan ukuran 640 x 640 pixel, kemudian pilih rounded rectangle tools ubah radiusnya menjadi 20px dan buatkan bidang berwarna putih.

geser layout content tersebut ke dalam background yang sebelumnya kita buat dengan menggunakan move tool  .. klik kanan pada layout kemudian pilih blending option gunakan setingan berikut :

hasil dari penambahan stroke dan gradient overlay pada layout content yang telah di gabungkan dengan background akan menghasilkan gambar sebagai berikut :

buat sebuah kanvas kemudian tambahkan bulatan-bulatan hitam dengan ellipse tool diatas kanvas sehingga membentuk gambar seperti awan hitam, klik kanan pada layers kemudian pilih merge visible

Gabungkan gambar awan dengan design website sebelumnya kemudian tambahkan bulatan-bulatan hitam lain disekelilingnya 

OK sekarang content website dan background sudah jadi, selanjutnya mari kita buatDesign Menu untuk website kita. langkah pertama adalah buat bidang persegi denganrectangle tool pada bagian atas content selebar content atau 640 pixel kemudian tambahkan gradient overlay pada blending option dengan variasi warna merah tua dengan hitam (caranya sama seperti sebelumnya)

buatkan lagi bidang kali ini dengan rounded rectangle tool disebelah pojok kiri atas yang nantinya akan kita gunakan untuk input pencarian, beri gradisi warna seperti sebelumnya tambahkan icon pencarian diatas bidang. selanjutnya disebelah kanan atas tambahkan logo website anda sehingga bagian atas menu tampak seperti gambar berikut :

Dengan demikian maka layout website kita sudah jadi dengan tampilan yang lumayan keren

Mark Up Design dengan xHTML dan CSS

Sekarang anda sudah memiliki design website yang anda buat sendiri dengan photoshop, nah langkah selanjutnya adalah membuat Mark Up atas Desain yang telah kita buat kedalam xHTML dan CSS, silahkan buka Macromedia Dreamweaver anda.

Buat sebuah file HTML baru dengan tipe dokumen DTD XHTML Strict 1.0 save file dengan nama index.html.

Tunggu Post Berikutnya untuk melengkapi TUTORIAL ini, pada Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver Bagian 2 .......!!!!!!!!!!!