Membangun Website sederhana PART I(Beginner)


By Wisdean Eska Maena

Perhatian:

untuk memulai tutorial ini anda harus memahami dulu program Adobe Photoshop

—————————————————————————————————————————

Tutorial ini akan mengajak anda untuk mendesain layout sendiri dengan program Adobe Photoshop, disini akan diajarkan cara men-Slice beberapa layout untuk di jadikan satu folder dalam website. Setelah itu akan anda akan diajarkan cara membuat link dan button link tanpa harus mengerti bahasa html, php atau bahasa code lainnya, karena di dreamweaver akan memudahkan anda dalam melakukan hal tersebut.

Tahap Desain Layout Dengan Photoshop

1.    Pertama buka lah program adobe photoshop, lalu tekan file> new akan muncul bar size, lalu anda ganti ukurannya W=780 x H=800, resolution: 72 RGB colour 8 bit.

2.    Ok, selanjutnya bikin garis menggunakan ruller sebelum masuk ke proses desain lihat pada gambar.1

(Gambar .1)

3.     Buat layer baru, beri nama Header, lalu set foreground/background #cccccc(silver)-putih, lalu gunakan rectangular marque tools dan seleksi daerah Header, setelah itu isikan warna nya menngunakan gradient Tools. Setalah itu desain lah sesuai dengan gambar di bawah ini

4.     tahap selanjutnya membuat bar button pada tampilan website, pembuatannya background barnya sama dengan tahap pembuatan header, lalu anda buat tulisan “home, about, product, support, contact, dan faq”. Setelah itu klik kanan pada text di panel layer>Blending Options. Akan tampil panel layer style, lalu atur  nilainya menjadi : inner shadow size :0, distance 1, choke 0, dan tekan OK, lakukan hal yang sama pada jenis huruf button yang lain.

(Gambar .3)

5.     lakukan cara yang sama untuk melengkapi layout yang di buats, seperti konten, product dan lain lain. sesuai dengan gambar desain layout pada gambar dibawah ini.

(Gambar 4)

Tahap Slice atau tahap pemotongan gambar

1.    ok tahap selanjutnya kita akan memotong beberapa gambar pada layout yang kita desain sebelumnya, gunanya untuk mengatur manajemen website saat pembublikasian. Klik slice tools> slice from guides. Secara otomatis gambar akan terpotong sesuai dengan garis yang kita tentukan tadi tetapi masih berantakan, perhatikan gambar di bawah ini, muncul kotak2 biru pada potongan

2.    Karena kita hanya memilih sesuai dengan image potongan yang kita butuhkan maka kita bisa menggabungkan image yang terpotong dengan combine,

3.    Pertama kita pilih slice select tools

Lalu seleksi potongan yang akan kita gabungkan

4.    Dengan Menahan Shift anda pilih potongan 2-7 lalu klik kanan combine slice secara otomatis image yang terpotong tadi sudah tergabung dalam satu image.

Sebelum di combine


Sesudah di combine


5.    selannjutnya klik dua kali pada kotak biru02 maka akan muncul kotak dialog “slice option” ganti namanya dengan Header. Lihat gambar dibawah ini

6.    Lakukan langkah yang sama pada image yang lain seperti diatas. Disesuaikan dengan , content, button, image gambar dan lines blank.

—————————————————————————————————————-

Tahap Optimized, dan mengubah menjadi format psd menjadi index.html

Dalam tahapan ini anda akan diajarkan cara membagi gambar dan memformat gambar menjadi ukuran kecil, agar dalam system loading pada user akan lebih mudah dan tidak berat, formatnya akan di tentukan dengan format GIF ukuran image yang kecil dan akan di simpan secara otomatis dalam satu folder dengan nama folder “image”.

Langkah awal yang anda lakukan adalah meng export ke image ready pada adobe Photoshop cs versi lama, dan “save for web” pada adobe photoshop cs 3 ke atas

Maka akan muncul kotak dialog seperti gambar dibawah ini

Setelah itu lihat panel kanan, anda akan lihat perbedaan kecepatan loading server nya 1sec per image. Setelah semua nya diatur anda save di satu folder beri nama latihan01. maka akan muncul, formal html beserta kumpulan image. Dan cara pengeditannya, anda bisa baca di tutorial selanjutnya.

NB : untuk optimized anda bisa melihatnya di bar bawah terlihat perubahan loading server per image nya. untuk mengecilkan size image anda bisa menggantikannya menjadi format GIF.otomatis resolutsi gambar akan berubah, tetapi tidak akan merusak kualitas gambar.

Selamat bersenang..

    • arnold al qadr
    • Januari 23rd, 2011

    pertamax!!

  1. November 26th, 2010

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: