Share Ilmu

Selamat datang saya ucapkan kepada anda yang telah mengunjungi halaman saya, tentu anda sering mendengar tentang photoshop, sebagian besar digunakan untuk mengedit atau memanipulasi foto, tapi disini akan dibahas cara mendesain tampilan halaman web menggunakan photoshop. Anda dapat menggunakan ADOBE PHOTOSHOP CS, CS2. langkah-langkah awal yang harus anda lakukan adalah sebagai berikut:

1. MEMBUAT HALAMAN

Halaman merupakan hal yang penting dalam membuat sebuah web, cara membuatnya adalah sebagai berikut:

1. Buka dokumen baru dengan pilih menu file > new atau tekan ctrl+n, maka akan tampak gambar sbb, kemudian sesuaikan dgn kotak dialog berikut, klik ok.

2. tekan tombol D pd keyboard untuk mengubah warna foreground & background dgn warna hitam dan putih.

3. tekan Alt+Backspace, untuk mengubah warna halaman dengan warna hitam.

4. klik ikon new layer yang terdapat dibawah palet layer untuk membuat layer baru.

5. gunakan grid yaitu dengan pilih menu view > show > grid, dan lakuan seleksi seperti gambar dengan menggunakan polygonal lasso tool .

6. tekan Ctrl+Backspace untuk mengisi warna putih.

7. pilih layer 1 yang sedang aktif, kemudian tekan Ctrl+J untuk mengcopy layer 1 ini menjadi layer 1 copy.

8. tekan Ctrl+layer 1 copy maka tepi image ini akan terseleksi, kemudian pilih select > modify > contract dan ganti dengan angka 5 .

9. tekan delete, kemudian pilih layer 1, ubah angka opacity menjadi 32 %.

10. maka hasilnya sbb:

MEMBUAT BORDER

1. pilih layer 1 copy yang aktif.

2. kemudian klik ikon layer style , yg tardapat pd bawah palet layer dan pilih bevel and emboss, dan sesuaikan dengan table dibawah ini kemudian klik OK.

3. maka hasilnya sebagai berikut:

MEMBUAT TOMBOL NAVIGASI

1. buat layer baru dgn klik ikon new layer.

2. klik ikon rectangular marquee tool

3. buat selesi seperti pada gambar berikut:

4. pilih gradient tool , dan pilih reflected gradient , dan lakukan drag dari tengah sampai batas bawah seleksi, hasilnya sbb:

5. buat layer baru, klik ikon new layer, buat seleksi menggunakan rectangular marquee tool. Seperti berikut:

6. kemudian lakukan seperti langkah 4 diatas, maka anda akan mendapatkan halaman anda seperti berikut:

7. lakukan duplikasi terhadap layer ini yaitu dgn pilih layer ini dan kemudian tekan ctrl+J sebanyak 3 kali, dan atur masing2 image tsb seperti berikut ini:

MEMBUAT TEKS BOTTON

1. klik text tool, gunakan font arial black 36pt, dan ketikan dimasing-masing tombol dengan Home, About, Gallery, Club,

2. kemudian masukan gambar sesuai keinginan anda, dengan cara copy dan paste kehalaman web yang telah anda buat, seperti gambar:

3. kemudian anda lakukan pemotongan terhadap masing-masing gambar yang telah dibuat dengan cara layer > new layer based slice, kemudian save dengan format save for web.

4. hasil setelah dipotong

5. kemudian anda bisa tambahkan teks, dengan cara anda ketik di notepad, kemudian paste kan kehalaman web yang telah anda buat, hasilnya sbb:

SELAMAT MENCOBA..!!!