Tutorial Membuat Website
dengan Photoshop CS2
Web yang sering dikunjungi orang merupakan nilai plus bagi seorang web designer.
Banyaknya pengunjung yang datang dapat dijadikan tolok ukur keberhasilan seseorang
dalam merancang dan mengembangkan sebuah website profesional.
Ada beberapa unsur yang mempengaruhi keberhasilan tersebut, diantaranya: mudah
digunakan, proses koneksi cepat, tampilan menarik, perpaduan warna sangat tepat,
navigasi mudah dipahami dan digunakan, isi artikel sangat berguna, dan masih banyak
lagi unsur lain. Semua itu bergantung pada respon pengunjung/pengguna terhadap
website yang kita buat.
Saat ini website sudah menjadi salah satu bagian dari identitas sebuah institusi, sama
pentingnya dengan alamat perusahaan. Website dapat dijadikan “guide” bagi pelanggan
untuk mengetahui lebih jauh tentang profil sebuah institusi secara online.
Ada beberapa sofware yang dapat digunakan untuk merancang interface sebuah website
pribadi, diantaranya: Adobe Macromedia Firework dan Adobe Photoshop. Rancangan
yang dibuat dalam Photoshop dapat disimpan menjadi html kemudian dapat dioleh
menggunakan Adobe Macromedia Dreamweaver. Jadi anda tidak perlu lagi membuat
kode html yang rumit dan panjang, cukup menggunakan perpaduan Adobe Photoshop
dan Adobe Macromedia Dreamweaver.
Bab 4. Proses Pengembangan
4.1. Situs Pribadi
4.1.1. Membuat Dokumen Baru
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
4.1.2. Membuat Interface
4.1.3. Membuat Tombol
4.1.4. Menambahkan Efek Khusus
4.1.5. Membuat Heading
4.1.6. Menambahkan Image/Gambar
4.1.7. Menambahkan Teks untuk Menu
4.1.8. Memotong Gambar (Slice)
4.2. Situs Bisnis
4.2.1. Membuat Dokumen Baru
4.2.2. Membuat Interface
4.2.3. Menambahkan Efek pada Interface
4.2.4. Membuat Tombol
4.2.5. Membuat Heading
4.2.6. Teknik Slice
Dengan melihat bentuk layout tersebut di atas, akan lebih mudah proses
pengembangannya dalam Adobe Photoshop. Sebelum membuat dokumen baru, kita harus
mengetahui bahwa tidak semua resolusi monitor pengguna sama dengan yang kita miliki.
Sebagai contoh, resolusi monitor kita menggunakan ukuran 1024 x 768 pixel sedangkan
pengguna (user) hanya memiliki resolusi 800 x 600 pixel. Apabila Anda membuat ukuran
dokumen 900 x 600 pixel maka menimbulkan ketidaknyamanan pengunjung karena harus
sering menggulung halaman website akibat ukuran dokumen terlalu lebar. Sebaiknya
lebar tidak melebihi 800 pixel.
OKE. kita mulai saja pembahasan membuat website pribadi dengan Adobe Photoshop
(Anda bisa menggunakan Adobe Photoshop versi 7, 8, atau 9).
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
4.1.1. Membuat Dokumen Baru
Diasumsikan Anda menggunakan Adobe Photoshop 7, CS maupun CS2. Jalankan
program Adobe Photoshop kemudian ikuti beberapa petunjuk berikut ini.
1. Buatlah dokumen baru dengan ukuran 800 x 600 pixel. Mode warna RGB,
resolusinya 72 pixel, mode warna RGB 8 bit dan latar belakang white. Beri nama
dokumen baru tersebut (misal: Situs Pribadi), setelah selesai klik OK.
2. Untuk mempermudah proses pembuatan interface situs, ada baiknya memasukkan
gambar bentuk layout ke dalam dokumen Adobe Photoshop. Anda dapat
menduplikasi (copy dan paste) ke dalam dokumen tersebut.
3. Klik Set Foreground color untuk memilih warna sebagai latar belakang.
4. Setelah kotak dialog Color Picker muncul, masukkan kode warna #0066cc pada
kotak kode.
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
5. Tekan tombol Alt+Backspace secara bersama-sama untuk memberi warna pada
layer Background.
6. Buatlah layer baru dengan nama “Up” kemudian aktifkan Rectangle Marquee
tool dan buatlah seleksi seperti nampak pada gambar berikut.
7. Tekan huruf D pada keyboard untuk mengubah warna default Foreground dan
Background (Hitam dan Putih) kemudian tekan huruf X untuk membalik warna
tersebut. Tekan tombol Alt+Backspace secara bersama-sama untuk memberi
warna putih pada layer “Up” . Tekan Ctrl+D untuk membuang seleksi.
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
4.1.2. Membuat Interface
Bentuk interface yang bagus dapat membangkitkan “gairah” para pengguna
untuk tetap menikmati berbagai berita dan informasi yang disajikan. Keunikan
bentuk interface memiliki nilai tersendiri karena tidak semua orang memiliki
kemampuan untuk menciptakan bentuk tersebut. Berikut ini akan membahas
salah bentuk interface yang modern.
1. Pertama kali, aktifkan Pen tool.
2. Pada menu option di bagian atas, pilih Shape Layers.
3. Klik Set Foreground Color untuk memilih warna.
4. Setelah kotak dialog Color Picker muncul, masukkan kode warna #ff5d6c
pada kotak yang disediakan.
5. Buatlah Shape menggunakan Pen tool dengan bentuk seperti nampak pada
gambar berikut.
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Tidak ada komentar:
Posting Komentar