Anda sudah siap? Mari kita mulai

1. Buka Photoshop kemudian buka dokumen baru dengan ukuran sesuka Anda. Di sini saya menentukan ukuran 400×200 px.
   
2. Isi kanvas kosong ini dengan warna abu-abu gelap, di sini saya gunakan warna #4C4C4C. Pilih Rounded Rectangle Tool:
   
3. Pastikan setting Toolbar Anda terlihat seperti ini:
   
4. Saya menggunakan warna #D32424 tapi Anda bebas menggunakan warna yang Anda suka.
   
5. Rasterize Layer yang barusan Anda buat dengan Klik kanan Layer > Rasterize Layer, kemudian gandakan dengan Klik kanan Layer > Duplicate Layer. Ganti nama kedua layar dengan “Button Atas” (Layer yang di Atas) dan “Button Dasar” (Layer di bawah). Seharusnya Anda akan mendapatkan hasil seperti ini
6. Sekarang saatnya kita tambakan efek 3 dimensi. Sebelumnya, Anda perlu membuat warna dasar button Anda sedikit lebih gelap daripada Button Atas.
   Pilih Button Dasar, Pilih menu Image > Adjustments > Hue/Saturation (atau tekan dan Control+U) untuk membuka Jendela Hue/Saturation. Tentukan “Lightness” menjadi -35. Anda tidak akan langsung melihat perubahannya sampai proses berikutnya.
   
7. Sekarang tetap dengan layer Button Dasar tetap terpilih, tekan Panah Bawah Keyboard Anda 10 kali untuk memindah tampilan dasar button 10 pixel ke bawah. Hasilnya kurang lebih seperti ini:
   
8. Sekarang, tambahkan detail pada Button Atas. Pilih Button Atas pada Kotak Layer (Kanan). Tekan Ctrl + Klik pada layer tersebut. Pilih Menu Select > Modify > Contract, dan tentukan nilainya menjadi 1px.
   Selanjutnya pilih Burn Tool:
   
9. Tentukan setting-nya di taskbar atas sebagai berikut:
   Brush=65, Range=Midtones, Exposure-75% :
10. Klik di luar area seleksi. Tekan tombol Shift dan drag Burn Tool ke arah kanan, melewati seleksi Anda seperti ini:
    
11. Selanjutnya, mari kita tambahkan efek blend pada Button Atas. Deselect Layer (Ctrl + D), Klik pada Button Atas dalam Layer Palette. Pilih menu Layer > Layer Styles > Inner Glow dan atur settingnya sebagai berikut:
    
12. Lakukan hal yang sama pada Button Dasar dengan setting beikut ini:
    
13. Selanjutnya kita tambahkan efek cahaya pada button. Pertama, pilih Brush Tool, dan tentukan dengan setting berikut ini:
    
14. Pastikan, warna Foreground dan Background Anda pada posisi default (Hitam dan Putih), jika Anda tidak yakin, tekan tombol ‘D’. Kemudian tekan ‘X’ untuk menukar posisi keduanya. Sekarang, pilih Pen Tool pastikan Anda memilih “Paths”, bukan “Shape“. Untuk menentukan pilihan ini, pilih ikon Pen Tool Bar di bagian atas:
    
15. Buat path dari titik kiri ke kanan seperti gambar berikut:
    
16. Sekarang buat layer baru kemudian Pilih Path Selection Tool (atau tekan ‘A’) dan klik kanan pada Path, kemudian pilih ke bawah hingga ke bagian “Stroke Path…”. Tentukan settingnya seperti berikut ini:
    
17. Selanjutnya, klik kanan pada Path sekali lagi dan pilih “Delete Path”. Sekarang, button kita akan tampak kurang lebih seperti ini:
    
18. Mari kita tambahkan beberapa detail lagi. Pilih Dodge tool dan tentukan settingnya seperti ini:
    
19. Sekarang, pilih Layer Button Atas dengan menekan Ctrl + Klik pada Layer.
20. Dengan Dodge Tool, Klik pada tengah-tengah button kurang lebih 2 kali. Jangan terlalu banyak karena akibatnya bisa berabe.
    
21. Untuk sentuhan terakhir, pilih Burn tool dan pilih Button Dasar. Pastikan Burn Setting seperti ini:
    
22. Selanjutnya, gambar dua garis di dua sisi luar button seperti gambar berikut (Button Atas tidak tampak). Seperti ini:
    
23. Selesai! Anda telah berhasil. Selanjutnya Anda bisa tambahkan polesan ekstra seperti yang saya lakukan pada button Saya sehingga tampak seperti ini:
    

Anda puas dengan hasil Anda?

Langkah pertama setelah membuka file dengan Adobe Illustrator adalah menampilkan ruler. Lakukan dengan membukan menu View > Show Rulers (atau Ctrl+R). Kemudian tarik beberapa guidelines dari ruler atas dan bawah.

Saat ini saya akan fokus pada pemotongan menu di bagian atas. Ada baiknya Anda merancang dulu tata letak dengan sebaik-baiknya sehingga proses pemotongan bisa dilakukan lebih mudah. Tampilan guidelines yang sudah saya buat tampak sebagai berikut.

Pilih Slice Tool dari ToolBar dengan posisi seperti gambar di bawah, atau tekan tombol shortcut Shift+K.

Selanjutnya potong image-image yang akan dijadikan sebagai link. Gunakan fasilitas Snap untuk mempermudah pengirisan (View > Snap to Grid atau Snap to Point) Ilustrasinya seperti di bawah ini.

Dalam hal ini Anda lakukan dengan beberapa cara, sesuaikan dengan kebutuhan dan pilih cara yang paling efisien untuk keperluan Anda.
1. Iris dengan panduan guidelines yang sudah Anda buat sebelumnya. Usahakan jangan sampai ada irisan ganda. Potong irisan satu persatu dengan acuan guidelines yang sudah Anda buat. Simpan file yang anda kehendaki sebagai file image untuk web dari File > Save for Web&Devices (Alt+Shift+Ctrl+S). Cara ini berguna jika anda ingin meng-custom tiap bagian secara khusus.

2. Iris semua potongan sekaligus berdasarkan garis panduan/guidelines menu. Lakukan dengan membuka menu Object > Slice > Create from Guides. Simpan dengan Alt+Shift+Ctrl+S. Akan menu window penyimpanan sebagai berikut. Simpan dalam folder khusus karena metode ini akan menyimpan sekaligus semua potongan dalam satu folder. Jika ditampilkan lewat Windows Explorer akan tampak terlihat seperti ini.
Illustrator akan menyimpan rangkaian file image Anda dalam format HTML yang sudah siap diedit dan mengelompokkan file image Anda ke dalam folder images. Dalam gambar di atas saya membuat file “rancang-tampil-As-syariah” Metode kedua ini efektif jika Anda ingin membuat tampilan lengkap dari suatu halaman atau Anda sedang dalam proses awal pembuatan digital journal/website.

3.Iris dengan acuan seleksi. Pilih beberapa irisan yang telah Anda buat, kemudian aktifkan dari menu Object > Slice > Create from Selection. Cara ini berguna jika anda ingin menyimpan satu deret image untuk menu saja, misalnya untuk melakukan perubahan tampilan dari setting yang sudah ada sebelumnya. Misalnya saya hanya akan memotong ulang menu utama sebagai seperti ilustrasi berikut.

Anda masih dapat melakukan kreasi lebih banyak lagi dengan mengkombinasi fasilitas yang ada seperti menggandakan (Duplicate), mengkombinasi (Combine), menghapus sebagian (Select+Release), atau bahkan mengosongkan semua Slice (Delete All) dari menu Object > Slice. Kreasi ada di tangan Anda!

Semoga Bermanfaat!