Fresh oRange's blog

Seperti kita ketahui, photoshop mungkin tidak asing lagi ditelinga anda. Kita dapat membuat dan mengedit gambar ataupun foto. Sementara disini kita menggunakan Photoshop untuk membuat suatu Website. Adapun langkah-langkahnya adalah sebagai berikut :

Membuat Dokumen Baru

1. Kita buat 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.



Setelah itu untuk membuat interfaces, kita masukkan gambar bentuk layout ke dalam dokumen Adobe Photoshop kita tadi dengan meng-copynya.



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.



6. Aktifkan Convert Point tool untuk membuat efek lengkung.



7. 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.



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 modern 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 Shape 1 copy.



12. 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.



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



14. Aktifkan Direct Selection tool.



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.



Setelah itu kita buat Tombol
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.



6. Setelah kotak dialog Layer Style muncul, aturlah beberapa spesifikasi seperti nampak pada gambar berikut. 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.



Membuat Heading

Umumnya judul utama sebuah situs pribadi maupun perusahaan berada di bagian atas. Nama Domain dapat dijadikan sebagai judul heading dengan tujuan untuk lebih mengingatkan kepada pengunjung tentang alamat situs. Ambillah nama domain tersebut sebagai judul heading.
1. Untuk membuat sebuah heading, pertama kali aktifkan Horizontal Type tool.



2. Kemudian, klik ikon Foreground Color untuk menentukan warna teks. Setelah kotak dialog Color Picker muncul, masukkan kode warna #ea1c30.



3. Lalu ketik judul heading yang anda inginkan.
4. Menambahkan Image/Gambar

Kita menempelkan gambar (foto) pribadi kita dalam halaman utama agar terlihat foto dari identitas kita.
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 Type tool, dan ketikkan beberapa kata sebagai identitas situs tersebut.

Menambahkan Teks untuk Menu

Pada bagian ini kita akan mencoba menambahkan teks pada beberapa tombol yang telah dibuat agar dapat berfungsi sebagai menu karena tombol-tombol yang telah dibuat tersebut belum dapat berfungsi sebagai menu karena tidak ada teksnya.
1. Langkah pertama, kita aktifkan Horizontal Type tool kemudian buatlah area teks dengan cara mengklik pada tempat tombol sambil ditahan dan menyeretnya ke bagian lain membentuk kotak teks.



2. Buat teks sebagai menu (misal: Home, Profile, Gallery, News, dan Contact). Anda bebas memilih jenis huruf (font), penulis menggunakan jenis font Myriad Pro 10 point. Gunakan warna putih untuk teks tersebut.



3. Dan untuk langkah terakhir adalah menyimpan dokumen tersebut menjadi web (Save for web). Pilih menu File > Save for Web.



1. Maka akan muncul kotak dialog Save for Web. Klik tombol Save.

2. Kemudian akan muncul kotak dialog Save Optimized As. Tentukan folder untuk menyimpan file kemudian beri nama file tersebut, misal index lalu pilih HTML and images untuk Save as type, Seting=Default Setting, dan Slice=All Slices. Setelah selesai klik tombol Save untuk menyimpan.



3. Setelah menyimpan dokumen tersebut, akan nampak nama file index.html dan folder images yang berisi beberapa gambar yang telah dipotong menggunakan Slice tool.




Referensi :http://slametriyanto.com/2007/01/18/tutorial-membuat-website-dengan-photoshop-cs2/