This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Indonesian (Bahasa Indonesia) translation by astri astari (you can also view the original English article)
Dalam tutorial ini saya akan menunjukkan kepada Anda cara untuk membuat sebuah tombol di Photoshop dan menggunakannya, dengan berbagai semua keadaan, dalam proyek Adobe Muse. Setelah kita merancang dan mengimpor aset Photoshop kita ke Adobe Muse, kita akan melihat apa yang terjadi jika kita ingin memperbarui PSD lebih lanjut seluruhnya.
Melihat Screencast
Mengunduh Video atau berlangganan Tuts+ Web Design di Youtube.
Membaca Tutorial
Selamat datang di tutorial panduan singkat tentang Adobe Muse. Video di atas menunjukkan bagaimana Anda dapat membuat sebuah tombol di Photoshop dan menempatkannya di Adobe Muse.
Sebuah tombol di Adobe Muse memiliki empat keadaan. Jadi, jika Anda menempatkan sebuah persegi panjang di sini di Adobe Muse Anda tahu bahwa secara default, Anda memiliki empat keadaan.
- Normal.
- Rollover (ketika mouse di atas elemen Anda).
- Mouse Down (ketika Anda klik).
- dan Active.
Untuk membuat tombol, menggambar persegi panjang dan kemudian mengisinya dengan warna atau gradient, atau menambahkan gambar di latar belakang.
Ini bagus, tetapi kadang-kadang Anda akan ingin untuk mendesain segalanya dalam Adobe Photoshop, dan dapat mengimpor keadaan dari sana.
Menggunakan Photoshop
Membuka Photoshop dan membuat bentuk vektor; tombol hijau normal. Style yang Anda inginkan, dengan sudut membulat, perbatasan dan seterusnya. Saya ingin membuat empat keadaan, jadi saya akan mulai dengan menamakan layer pertama ini Button Normal.
Kemudian saya akan menduplikasi layer-ini layer berikutnya akan menjadi Mouse Over State saya.
Dalam hal ini kita hanya akan mengubah warna, membuatnya lebih terang.
Mengulangi proses untuk semua empat keadaan yang Anda butuh, kemudian simpan file sebagai ButtonGreen.psd.
Memindahkan ke Adobe Muse
Sekarang di Adobe Muse, jika saya ingin menggunakan desain ini tanpa mengekspor layer ke PNG file, Saya bisa langsung melakukan File > Place Photoshop Button, pilih ButtonGreen.psd, dan kemudian, itu akan mengurai semua layer yang tersedia dalam Photoshop file.
Menetapkan setiap layer ke keadaan tombol, kemudian menempatkan itu di atas layar, dan mengubah ukuran jika diperlukan.
Kemudian menggunakan Text tool, kita dapat menambahkan label di atasnya (misalnya, SUBSCRIBE).
Peninjauan
Jika Anda sekarang melihat Preview itu dalam Browser Anda akan melihat bahwa memang, kita memiliki empat keadaan. Ketika kita Rollover, dan ketika kita klik, akan mengubah keadaan tombol.
Kembali ke Photoshop
Sekarang, apa yang terjadi jika saya mengubah atau memodifikasi desain saya di Photoshop?
Sebagai contoh, di Photoshop mari kita mengubah warna keadaan Normal. Kita akan membuat sebuah Tombol Biru, kemudian simpan PSD file. Jika kita sekarang kembali ke Adobe Muse, tidak ada perubahan yang terlihat, tetapi jika kita membuka * Assets Panel *, Anda akan melihat pesan peringatan.
Itu akan berkata bahwa aset telah berubah sejak data diimpor, sehingga kita dapat klik kanan dan hanya mengatakan kita ingin Memperbarui Aset.
Kesimpulan
Ini menunjukkan bahwa bekerja dengan aset antara Adobe Photoshop dan Adobe Muse lebih mudah daripada sebelumnya. Saya harap Anda menikmati panduan singkat ini!
Adobe Muse Lagi
Untuk melihat lebih rinci Adobe Muse dapat melihat di kursus gratis saya Designing and Publishing Websites With Adobe Muse.
