Membuat website Dengan Photoshop CS2

Cara Mudah Sablon Kaos
20/05/2011
Memulai Belajar Design Grafis
20/05/2011
Show all

Membuat website Dengan Photoshop CS2

Membuat website Dengan Photoshop CS2

Membuat website dengan Photoshop CS2 tidaklah sulit, pada artikel berikut ini akan diberikan penjelasan dalam membuat web site dengan menggunakan program Adobe Photoshop.

net yang sering dikunjungi orang merupakan nilai plus bagi seorang web desainer. Banyaknya pengunjung yang datang dapat dijadikan tolok ukur keberhasilan seseorang dalam merancang dan mengembangkan sebuah web page 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 web page yang kita buat.
Saat ini website sudah menjadi salah satu bagian dari identitas sebuah institusi, sama pentingnya dengan alamat perusahaan. site dapat dijadikan “guide” bagi pelanggan untuk mengetahui lebih jauh tentang profil sebuah institusi secara on-line.

Ada beberapa sofware yang dapat digunakan untuk merancang interface sebuah web site pribadi, diantaranya: Adobe Fireworks dan Adobe Photoshop. Rancangan yang dibuat dalam Adobe Photoshop dapat disimpan menjadi Html kemudian dapat diolah menggunakan Adobe Dreamweaver. Jadi anda tidak perlu lagi membuat kode html yang rumit dan panjang, cukup menggunakan perpaduan Adobe Photoshop dan Adobe Dreamweaver.

Tutorial Membuat web site Dengan Photoshop CS2

Berikut ini, saya akan memberikan sedikit tutorial tentang pembuatan web page pribadi yang impresif menggunakan Adobe Photoshop. Artikel yang saya muat di sini merupakan cuplikan dari salah satu bab buku saya yang dalam proses pencetakan di penerbit Datakom Lintas Buana. Jadi, apabila tutorial ini kurang dari sempurna, sebaiknya membeli buku tersebut icon_smile.gif.

Buku tersebut terdiri dari 5 bab yaitu:

Bab 1. Pengantar web Design
1.1. guidelines Membuat web Profesional
1.2. Prinsip Dalam Mendesain website online
1.three. device Desain Grafis
1.four. format Grafis

Bab 2. Konsep Dasar Membuat website

Bab 3. Merancang web
three.1. Kategori internet3.2. Dasar-dasar Pemilihan Warna
3.3. Mengatur format

Bab four. Proses Pengembangan
4.1. Situs Pribadi
4.1.1. Membuat Dokumen Baru
4.1.2. Membuat Interface
four.1.3. Membuat Tombol
4.1.four. Menambahkan Efek Khusus
four.1.5. Membuat Heading
4.1.6. Menambahkan image / Gambar
four.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.three. Menambahkan Efek pada Interface
four.2.four. Membuat Tombol
4.2.5. Membuat Heading
4.2.6. Teknik Slice

Bab 5. Proses modifying
5.1. modifying Awal
5.1.1. Mengubah Objek menjadi historical past
5.1.2. Memasukkan Objek
5.2. Membuat link dan Navigasi
5.2.1. Membuat Pop-up Menu
5.2.2. Membuat Rollover picture 116

Dengan melihat bentuk format tersebut di atas, akan lebih mudah proses pengembangannya dalam Adobe Photoshop ( biasanya disingkat dengan Photoshop ). Sebelum membuat dokumen baru, kita harus mengetahui bahwa tidak semua resolusi monitor pengguna sama dengan yang kita miliki. Sebagai contoh, resolusi display 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 web site akibat ukuran dokumen terlalu lebar. Sebaiknya lebar tidak melebihi 800 pixel.

OKE. kita mulai saja pembahasan membuat website online pribadi dengan Adobe Photoshop ( Anda bisa menggunakan Adobe Photoshop versi 7, 8, atau 9).

4.1.1. Membuat Dokumen Baru
Diasumsikan Anda menggunakan Adobe Photoshop 7, Adobe Photoshop CS maupun Adobe Photoshop 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 eight bit dan latar belakang white. Beri nama dokumen baru tersebut (misal: Situs Pribadi), setelah selesai klik good enough.
  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 shade untuk memilih warna sebagai latar belakang.
  4. Setelah kotak dialog colour Picker muncul, masukkan kode warna #0066cc pada kotak kode.
  5. Tekan tombol Alt+Backspace secara bersama-sama untuk memberi warna pada layer heritage.
  6. Buatlah layer baru dengan nama “Up” kemudian aktifkan Rectangle Marquee instrument 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.

four.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 possibility di bagian atas, pilih shape Layers.
  3. Klik Set Foreground colour untuk memilih warna.
  4. Setelah kotak dialog color Picker muncul, masukkan kode warna #ff5d6c pada kotak yang disediakan.
  5. Buatlah shape menggunakan Pen instrument dengan bentuk seperti nampak pada gambar berikut.
  6. Aktifkan Convert level software untuk membuat efek lengkung.
  7. Klik pada segmen yang ingin diberi efek lengkung. Klik dan tahan sambil menggeser salah satu convert level ke kanan secara perlahan agar membentuk lengkungan yang diinginkan.
  8. Selanjutnya memilih segmen yang lain. Klik dan tahan sambil menyeret pointer ke kanan secara perlahan agar membentuk objek yang diinginkan.
  9. Jika telah selesai maka akan terbentuk sebuah asesoris up to date seperti nampak pada gambar berikut.
  10. Aktifkan layer shape 1, buatlah duplikat layer tersebut dengan cara mengklik dan tahan sambil menggerakkan ke ikon Create New Layer.
  11. Jika berhasil, pada Palet Layer akan muncul hasil duplikasi layer tersebut dengan nama form 1 copy.
  12. Aktifkan layer shape 1 reproduction 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.
  13. Kurangi tingkat kepekatan (opacity) dengan cara menggeser slider pada menjadi 50%.
  14. Aktifkan Direct selection device.
  15. Buatlah seleksi untuk memilih dua buah segmen yang akan dipindahkan secara bersama-sama.
  16. Gunakan tombol panah ke kiri untuk menggeser dua buah segmen tersebut.
  17. 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 level device sehingga akan membentuk sebuah latar belakang yang up to date. Ubahlah opacity-nya menjadi 20%.
  18. Berikutnya, aktifkan Pen software dan buatlah shape yang berbentuk seperti gambar berikut.
  19. Seperti biasa, aktifkan Convert level device untuk membuat bagian yang lengkung.
  20. Sehingga akan didapatkan sebuah bentuk interface yang impresif.
  21. Duplikasi form 2 dengan cara menyeret layer tersebut ke ikon Create New Layer. Kemudian ubahlah bentuknya agar lebih menarik lagi. Untuk memodifikasi, gunakan Convert point device dan Direct selection device. Jika mengikuti petunjuk buku ini, bentuk shape akan seperti nampak pada gambar berikut.
  22. Terakhir, aktifkan Rectangle device.
  23. Kemudian buatlah form berbentuk kotak memanjang. Jangan lupa memberi warna shape tersebut dengan kode warna #ea1c30.

4.1.3. 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 choice device 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 type (f) di bagian bawah Palet Layers.
  6. Setelah kotak dialog Layer model muncul, aturlah beberapa spesifikasi seperti nampak pada gambar berikut. Setelah selesai klik good enough.
  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.

4.1.4. Menambahkan Efek Khusus
Interface tersebut mungkin masih sangat sederhana, kita perlu memberi efek khusus agar terlihat menarik. Ada beberapa teknik ketika membuat efek khusus pada tombol (button) yaitu memberi warna putih agar kelihatan seperti “button gel” atau hanya memberikan efek shadow saja.

  1. Pertama kali aktifkan layer yang bentuk objeknya seperti nampak pada gambar berikut.
  2. Menuju ke palet direction, ubahlah path tersebut menjadi seleksi dengan cara mengklik tombol ikon Load route as choice di bagian bawah palet route.
  3. Buatlah layer baru dengan nama “gentle”. Kemudian aktifkan Brush tool, pilihlah ukurannya 9 pixel. Pada option bar, kurangi opacity menjadi sekitar 6% saja. Tekan huruf D lalu huruf X.
  4. Goreskan pada bagian yang lengkung secara perlahan-lahan sehingga akan terbentuk warna seperti nampak pada gambar berikut.
  5. Sekarang tekan tombol Ctrl+Shift+I atau pilih menu choose > Inverse untuk membalikkan posisi seleksi. Tekan huruf X untuk memilih warna Foreground menjadi Hitam.
  6. Arsirlah secara perlahan-lahan pada bagian yang lengkung menggunakan Brush tool sehingga akan memiliki efek bersinar dan muncul bayangan.

4.1.5. Membuat Heading
Umumnya judul utama sebuah situs pribadi maupun perusahaan berada di bagian atas. Nama area dapat dijadikan sebagai judul heading dengan tujuan untuk lebih mengingatkan kepada pengunjung tentang alamat situs. Sebagai contoh, nama domain Anda : dix-um.com. Ambillah nama domain tersebut sebagai judul heading.

  1. Untuk membuat sebuah heading, pertama kali aktifkan Horizontal type device.
  2. Kemudian, klik ikon Foreground colour untuk menentukan warna teks. Setelah kotak dialog colour Picker muncul, masukkan kode warna #ea1c30.
  3. Ketiklah judul heading, misal: Dixs-um.com, pilihlah jenis huruf (font) yang tidak berkait (Sans Sherif).
  4. Buatlah layer baru dengan nama “coloration-head”, kemudian buatlah seleksi berbentuk kotak menggunakan Rectangle Marquee tool.
  5. Aktifkan Gradient instrument, kemudian pada possibility bar pilihlah tipe Linier. Aturlah warna Foreground (#ea5765), dan heritage (#ffffff).
  6. Letakkan pointer di atas dan tarik ke bawah untuk membuat warna gradasi. Tekan Ctrl+D untuk membuang seleksi.

4.1.6. Menambahkan picture/Gambar
Gambar yang ditampilkan dalam sebuah situs dapat berupa foto maupun clipart. Pada umumnya, ilustrasi yang digunakan dalam bentuk fotografi karena memiliki beberapa kelebihan diantaranya, warna realistis, bentuknya sesuai dengan objek sesungguhnya, lebih alami, dan masih banyak lagi kelebihannya.

Oleh karena yang akan kita buat adalah situs pribadi, tidak ada salahnya menempatkan gambar (foto) pribadi seseorang dalam halaman utama. Baiklah, langsung saja kita akan mencoba melakukannya.

  1. Pertama kali bukalah foto yang akan dijadikan ilustrasi di halaman muka situs.
  2. Pilih menu Window > arrange > Tile Vertically untuk menampilkan dua buah dokumen.
  3. Aktifkan layer yang bergambar orang, klik dan tahan sambil menyeret layer tersebut ke dokumen Situs Pribadi.
  4. Jika gambarnya terlalu besar, ubahlah ukurannya dengan cara menekan tombol Ctrl+T kemudian seretlah salah satu titik pegangan (handle) ke tempat tujuan.
  5. Aktifkan Horizontal sort device, dan ketikkan beberapa kata sebagai identitas situs tersebut.


4.1.7. Menambahkan Teks untuk Menu
Tombol-tombol yang telah dibuat tersebut belum dapat berfungsi sebagai menu karena tidak ada teksnya. Nah, pada bagian berikut ini kita akan mencoba menambahkan teks pada beberapa tombol yang telah dibuat agar dapat berfungsi sebagai menu.

Menu tersebut dapat berupa mouse over maupun menu pull down. Jadi sebaiknya Anda memikirkan sejak awal sebelum memutuskan untuk memilih bentuk yang diinginkan. Apabila Anda mengikuti petunjuk dalam buku ini, bentuk menu yang akan dibuat adalah menu pull down.

  1. Langkah yang pertama, aktifkan Horizontal kind software kemudian buatlah area teks dengan cara mengklik pada tempat tombol sambil ditahan dan menyeretnya ke bagian lain membentuk kotak teks.
  2. Buatlah teks sebagai menu (misal: residence, Profile, Gallery, news, dan Contact). Anda bebas memilih jenis huruf (font), penulis menggunakan jenis font Myriad professional 10 point. Gunakan warna putih untuk teks tersebut.
  3. Lakukan hal yang sama untuk membuat menu di bagian lain.

four.1.eight. Memotong Gambar (Slice)
Adobe Photoshop memang dapat diandalkan dalam segala hal, terbukti beberapa bidang sangat memerlukan instrument yang satu ini diantaranya untuk keperluan fotografi, percetakan, animasi, periklanan, maupun untuk membuat site.

Salah satu keunggulan Adobe Photoshop dalam membuat sebuah halaman net adalah adanya teknik Slice. Dengan fasilitas tersebut, gambar akan secara otomatis terpotong sesuai dengan garis Slice. Anda tidak perlu memotong secara guide kemudian menyimpan potongan gambar tersebut satu per satu.

Hal yang perlu diperhatikan ketika memotong gambar adalah membaginya sesuai keperluan saja. Artinya, jika gambar tersebut akan digunakan sebagai tombol menu maka sebaiknya dipotong sesuai masing-masing judul menu tersebut. Misal menu dwelling harus terpisah dari menu Profile. Jangan memotong gambar yang memiliki dua menu karena akan mengalami masalah ketika mengeditnya dalam Macromedia Dreamweaver.

  1. Sebelum memotong gambar menggunakan Slice software, kita memerlukan beberapa garis bantu untuk menandai bagian mana saja yang akan dipotong. Letakkan pointer pada ruler information di sebelah kiri tangan Anda, klik dan tahan sambil menyeret ke kanan.
  2. Buatlah beberapa garis bantu untuk menandai bagian yang akan dipotong. Apabila mengikuti pentunjuk dalam buku ini, kurang lebih seperti gambar berikut.
  3. Sekarang buatlah garis bantu secara horisontal dengan cara mengambilnya dari ruler guide di atas (horizontal ruler), sehingga hasilnya akan nampak seperti gambar berikut ini.
  4. Setelah tersusun beberapa garis bantu, langkah selanjutnya adalah memotong gambar tersebut menggunakan Slice instrument. Kita harus memilih bagian mana saja yang perlu dipisahkan, dan umumnya semua tombol harus dipisahkan karena memiliki fungsi yang berbeda. Sedangkan untuk bagian yang akan digunakan sebagai latar belakang, sebaiknya tidak perlu dipisahkan. Untuk memotong bagian tersebut, pertama kali aktifkan Slice device. Perlu diingat, setelah mengaktifkan Slice device secara otomatis akan muncul angka 1 di sudut kiri atas. Hal itu memiliki arti gambar tersebut telah siap dipotong.
  5. Letakkan pointer di sudut kiri atas.
  6. Kemudian klik dan tahan sambil menyeret ke sebelah kanan sesuai luas yang diinginkan.
  7. Setelah memotong gambar tersebut secara otomatis akan muncul angka 2.
  8. Letakkan pointer di atas angka 2, klik dan tahan sambil menyeret ke kanan untuk memotong gambar.
  9. Setelah memotong gambar tersebut secara otomatis akan muncul angka three dan 4. Hal ini dikarenakan Adobe Photoshop secara otomatis memotong pada bagian lain agar bentuknya tetap utuh. Anda dapat memotong gambar pada space yang telah ditandai angka tersebut.
  10. Langkah selanjutnya adalah memotong tombol-tombol yang ada secara terpisah. Letakkan pointer pada angka three, klik dan tahan sambil menyeret ke bagian lain yang telah ditandai dengan garis bantu.
  11. Lakukan dengan cara yang sama untuk memotong bagian lain sehingga akan terbentuk seperti gambar berikut.
  12. Untuk bagian yang memiliki fungsi sama, sebaiknya tidak perlu dipisah/dipotong.
  13. Perlu diperhatikan, ketika memotong pada bagian lain usahakan irisannya tepat pada irisan sebelumnya agar tidak muncul irisan lain yang tidak diinginkan. Jika hal itu terjadi, hasilnya tidak akan maksimal dan tidak sesuai seperti yang kita harapkan. Anda dapat memotong gambar yang terlalu besar menjadi beberapa bagian agar proses koneksi lebih cepat ketika menampilkan gambar.
  14. Langkah selanjutnya, irislah tombol-tombol pada bagian kanan.
  15. Berikutnya, memotong gambar yang bukan berfungsi sebagai tombol.
  16. Untuk gambar yang akan dijadikan latar belakang, irislah menjadi dua bagian saja seperti nampak pada gambar berikut.
  17. Begitu pula pada bagian lain, irislah gambar sesuai keperluan.
  18. Apabila sudah mengiris gambar menjadi beberapa bagian maka akan nampa sepeti gambar berikut.
  19. Dan untuk langkah selanjutnya adalah menyimpan dokumen tersebut menjadi web (save for internet). Pilih menu File > shop for web.
  20. Maka akan muncul kotak dialog shop for web. Klik tombol store.
  21. Kemudian akan muncul kotak dialog store Optimized As. Tentukan folder untuk menyimpan file kemudian beri nama file tersebut, misal index lalu pilih HTML and pictures untuk retailer as sort, Seting=Default surroundings, dan Slice=All Slices. Setelah selesai klik tombol shop untuk menyimpan.
  22. Setelah menyimpan dokumen tersebut, akan nampak nama file index.html dan folder pictures yang berisi beberapa gambar yang telah dipotong menggunakan Slice tool.
  23. Tahap selanjutnya adalah mengeditnya menggunakan Adobe Macromedia Dreamweaver untuk menambahkan teks dan membuat menu pull down agar tampilan situs lebih menarik dan lebih profesional. Teknik pembuatannya akan dibahas pada bab selanjutnya dalam buku tersebut,  Silakan beli bukunya ya..

source : Slamet Riyanto

  

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>