Artikel ini mengambil contoh Photoshop CS2 versi Cina. Langkah-langkah untuk Photoshop versi lain mungkin sedikit berbeda. Mari kita lihat efek akhirnya terlebih dahulu.
Langkah-langkah spesifik untuk
efek akhir
adalah sebagai berikut.1. Jalankan Photoshop CS2 versi Cina, tekan Ctrl+N untuk membuka kotak dialog "Baru", buat beberapa pengaturan sesuai kebutuhan (ukurannya harus dapat mengakomodasi menu navigasi selanjutnya), dan klik tombol "OK" untuk membuat dokumen baru.
2. Klik tombol "Buat Lapisan Baru" di bawah panel lapisan untuk membuat lapisan baru. Pilih "Alat Persegi Panjang Bulat" di kotak alat, atur radiusnya menjadi 15 piksel di bilah opsi, lalu gambar persegi panjang bulat seperti yang ditunjukkan pada Gambar 1 pada layer baru.
Gambar 1
3. Sekarang terapkan layer style berikut pada bentuk di atas.
proyeksi:
Gambar 2
bayangan bagian dalam:
Gambar 3
Cahaya batin:
Gambar 4
hamparan warna:
Gambar 5
pukulan:
pada Gambar 6
, diperoleh efek tombol yang ditunjukkan pada Gambar 7.
Gambar 7
4. Sekarang gunakan "Rounded Rectangle Tool" lagi, kali ini, gambarlah persegi panjang bulat putih yang lebih kecil di atas tombol, seperti yang ditunjukkan pada Gambar 8.
Gambar 8
5. Atur blending mode layer ini ke "Overlay" dan atur opacity menjadi 30%, Anda bisa mendapatkan efek tombol seperti yang ditunjukkan pada Gambar 9.
Gambar 9
6. Selanjutnya salin tombol-tombol ini dan susun menjadi menu navigasi dan tambahkan teks, seperti yang ditunjukkan pada Gambar 10.
Gambar 10
7. Pilih "Slice Tool" di toolbox, buka menu "View", dan konfirmasikan bahwa ada tanda centang di sebelah kiri "Align". Ini secara otomatis akan menyelaraskan irisan ke tepi dan membuat lebih akurat irisan. Gunakan "Slice Tool" untuk memotong tombol demi tombol, dan setiap irisan berisi sebuah tombol.
Gambar 11
8. Sekarang pemotongan telah selesai, Anda sekarang dapat menampilkannya sebagai file HTML untuk mempersiapkan desain web selanjutnya. Pilih perintah menu "File | Save for Web". Untuk mendapatkan efek gambar terbaik, gunakan pengaturan yang ditunjukkan pada Gambar 12. Setelah pengaturan, klik tombol "Simpan".
Gambar 12
9. Pada kotak dialog "Simpan hasil optimasi sebagai", pilih lokasi penyimpanan file halaman web, masukkan nama file seperti yang ditunjukkan pada Gambar 13, pilih jenis penyimpanan sebagai "HTML dan gambar (*. html)", lalu klik Klik tombol "Simpan".
Gambar 13
: Ini akan menghasilkan halaman HTML dan folder gambar, yang berisi gambar tombol.
Sekarang Anda hanya perlu menyalin kode HTML ke halaman web lain untuk menggunakannya, tetapi jangan menyalin tag header/body yang dihasilkan oleh Photoshop saat menyalin.