Teknik Membuat Web Profesional dengan Photoshop

Teknik Membuat Web Profesional dengan Photoshop

MULAI
Pada bagian ini kita akan membahas tentang teknik pengembangan situs sesuai dengan sketsa.
Proses pengembangan diawali dengan pembuatan layout halaman menggunakan Adobe Photoshop, kemudian diolah dalam Macromedia Dreamweaver untuk menambahkan isi (content) dan sedikit tambahan menu pop up (pull down) menggunakan Javascript.
Untuk studi kasus, pertama kali kita akan mencoba membuat situs pribadi. Dalam hal pemilihan warna, terserah para pembaca. penulis hanya memberikan teknik membuat bentuk layout halaman website profesional.
4.1. SITUS PRIBADI

Dengan melihat bentuk layout tersebut di atas, akan lebih mudah proses pengembangannya dalam Adobe Photoshop. Sebelum membuat dokumen baru, kita harus mengetahui bahwa tidaksemua 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.
4.2.1. Membuat Dokumen Baru
Diasumsikan Anda menggunakan Adobe Photoshop 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.

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.

4.2.1. 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.
8. Pertama kali, aktifkan tool Pen.

9. Pada menu option di bagian atas, pilih Shape Layers.

10. Klik Set Foreground Color untuk memilih warna.

11. Setelah kotak dialog Color Picker muncul, masukkan kode warna #ff5d6c pada kotak yang disediakan

12. Buatlah Shape menggunakan Pen tool dengan bentuk seperti nampak pada gambar 4.1.2.5.

13. Aktifkan Convert Point tool untuk membuat efek lengkung. (Lihat gambar 4.1.2.6.).
14. Aktifkan Convert Point tool untuk membuat efek lengkung

15. Klik pada segmen yang ingin diberi efek lengkung. Klik dan tahan sambil menggeser salah satu convert point ke kanan secara perlahan agar membentuk lengkungan yang diinginkan.

16. Selanjutnya memilih segmen yang lain. Klik dan tahan sambil menyeret pointer ke kanan secara perlahan agar membentuk objek yang diinginkan.

17. Jika telah selesai maka akan terbentuk sebuah asesoris modern seperti nampak pada gambar berikut.

18. Aktifkan layer Shape 1, buatlah duplikat layer tersebut dengan cara mengklik dan tahan sambil menggerakkan ke ikon Create New Layer.

19. Jika berhasil, pada Palet Layer akan muncul hasil duplikasi layer tersebut dengan nama Shape 1 copy. (Lihat gambar 4.1.2.10.).

20. Aktifkan layer Shape 1 copy kemudian tekan Ctrl+T untuk mentransformasikan. Klik tombol mouse kanan dan pilih Flip Horizontal. Setelah selesai klik tombol Commit pada option bar atau dapat juga menekan tombol Enter. (Lihat gambar 4.1.2.11.).

21. Kurangi tingkat kepekatan (opacity) dengan cara menggeser slider pada menjadi 50%.

22. Aktifkan Direct Selection tool.

23. Buatlah seleksi untuk memilih dua buah segmen yang akan dipindahkan secara bersama-sama.

24. Gunakan tombol panah ke kiri untuk menggeser dua buah segmen tersebut.

25. Langkah selanjutnya adalah membuat ilustrasi yang sama untuk memperindah tampilan.
Buatlah duplikat layer Shape 1 sekali lagi dengan cara menggeser layer tersebut ke ikon Create New Layer. Kemudian modifikasi bentuknya menggunakan Convert Point tool sehingga akan membentuk sebuah latar belakang yang modern. Ubahlah opacity-nya menjadi 20%.

26. Berikutnya, aktifkan Pen tool dan buatlah Shape yang berbentuk seperti gambar berikut.

27. Seperti biasa, aktifkan Convert Point tool untuk membuat bagian yang lengkung

28. Sehingga akan didapatkan sebuah bentuk interface yang modern.

29. Duplikasi Shape 2 dengan cara menyeret layer tersebut ke ikon Create New Layer.
Kemudian ubahlah bentuknya agar lebih menarik lagi. Untuk memodifikasi, gunakan Convert Point tool dan Direct Selection tool. Jika mengikuti petunjuk buku ini, bentuk shape akan seperti nampak pada gambar berikut.

30. Terakhir, aktifkan Rectangle tool .

31. Kemudian buatlah Shape berbentuk kotak memanjang. Jangan lupa memberi warna Shape tersebut dengan kode warna #ea1c30

4.2.1. Membuat Tombol
Setelah sebelumnya membuat bentuk interface untuk halaman situs, langkah selanjutnya adalah membuat tombol yang eksklusif.
1. Pertama kali, aktifkan Rectangle Rounded tool.

2. Buatlah sebuah tombol berbentuk kotak.

3. Aktifkan Direct Selection tool kemudian buatlah seleksi untuk memilih empat buah segmen di bagian bawah.

4. Geser ke kanan sebanyak 10 kali menggunakan tombol tanda panah ke kanan.

5. Berilah efek bayangan (Drop Shadow) dengan cara mengklik ikon Layer Style (f) di bagian bawah Palet Layers. (Lihat Gambar 4.1.3.5.).
6. Setelah kotak dialog Layer Style muncul, aturlah beberapa spesifikasi seperti nampak pada gambar 4.1.3.6. Setelah selesai klik OK.


7. Langkah selanjutnya adalah membuat beberapa duplikasi tombol tersebut dengan cara menggesernya ke ikon Create New Layer.

8. Buatlah tiga buah tombol lagi dengan cara yang sama seperti sebelumnya. Anda dapat menduplikasi tombol yang sudah ada atau membuat tombol baru lagi. Jika Anda telah membuat tiga buah tombol, kira-kira bentuknya seperti gambar berikut ini.

Posted in: Teknik Membuat Web Profesional dengan Photoshop