Salah satu teknik "terpanas" di web saat ini adalah gulir paralaks. Kami telah mengunjungi situs-situs tempat Anda memutar roda gulir pada mouse Anda dan konten pada halaman bergerak ke atas dan ke bawah atau melintasi halaman saat Anda memutar roda mouse.
Bagi mereka yang baru mengenal desain web dan desain grafis, teknik ini bisa sangat sulit dicapai karena jumlah CSS yang dibutuhkan.
Jika itu menggambarkan Anda, ada sejumlah aplikasi yang mungkin hanya menarik bagi seniman grafis. Mereka pada dasarnya menggunakan pendekatan tata letak halaman akrab ke halaman web, yang berarti tidak ada banyak, jika ada, coding yang terlibat. Salah satu aplikasi yang benar-benar meroket menjadi terkenal adalah Adobe Muse.
Pekerjaan yang dilakukan oleh pro grafis menggunakan Muse cukup menakjubkan dan Anda dapat melihat contoh dari apa yang dapat Anda lakukan dengan mengunjungi Muse Situs Hari Ini . Meskipun web pro cenderung menganggap Muse sebagai semacam "mainan angin", itu juga digunakan oleh para desainer untuk membuat prototipe mobile dan web yang pada akhirnya akan diserahkan kepada para pengembang di tim mereka.
Salah satu teknik yang sangat mudah dicapai dengan Muse adalah gulir paralaks dan, jika Anda ingin melihat versi lengkap dari latihan ini. Saat Anda menggulir roda gulir mouse Anda, teks tampak bergerak ke atas atau ke bawah halaman dan gambar berubah.
Mari kita mulai.
01 07Buat Halaman Web
Ketika Anda memulai Muse klik Situs Baru link. Ini akan membuka Properti Situs Baru. Proyek ini akan dirancang untuk aplikasi desktop dan Anda dapat memilihnya di Tata Letak Awal menu pop-down. Anda juga dapat mengatur nilai untuk jumlah Kolom, Lebar Gutter, Margin, dan Padding. Dalam hal ini, kami tidak terlalu peduli dengan ini dan hanya mengklik baik.
Format Halaman
Ketika Anda mengatur properti situs dan diklik baik Anda dibawa ke apa yang disebut Rencana melihat. Ada sebuah Rumah halaman di bagian atas dan a Halaman Utama di bagian bawah jendela. Kami hanya membutuhkan satu halaman. Untuk mendapatkan Tampilan Desain, kami mengklik ganda halaman Beranda yang membuka antarmuka.
Di sebelah kiri adalah beberapa alat dasar dan di sebelah kanan adalah berbagai panel yang digunakan untuk memanipulasi konten di halaman. Di bagian atas adalah properti, yang dapat diterapkan ke halaman, atau apa pun yang dipilih di halaman. Dalam hal ini, kami ingin memiliki latar belakang hitam. Untuk mencapai ini, kita klik pada Pengisi Browser chip warna dan pilih hitam dari Color Picker.
03 07Tambahkan Teks ke Halaman
Langkah selanjutnya adalah menambahkan beberapa teks ke halaman. Kami memilih Alat Teks dan menggambar sebuah kotak teks. Kami memasukkan kata "Selamat Datang" dan, di Properti mengatur teks ke Arial, 120 piksel Putih. Pusat Selaras.
Kami kemudian beralih ke alat Seleksi, mengklik Textbox dan mengaturnya Y posisi ke 168 piksel dari atas. Dengan kotak teks yang masih dipilih, kami membuka Selaraskan panel dan selaraskan kotak teks ke pusat.
Akhirnya, dengan kotak teks yang dipilih, kami menekan tombol Option / Alt dan Bergeser kunci dan membuat empat salinan dari kotak teks. Kami mengubah teks dan posisi Y dari setiap salinan untuk:
- Ke, 871
- Grafik, 1621
- Perangkat Lunak, 2371
Anda akan melihat, ketika Anda mengatur lokasi setiap kotak teks, halaman mengubah ukuran untuk mengakomodasi lokasi teks.
04 07Tambahkan Placeholder Gambar
Langkah selanjutnya adalah menempatkan gambar di antara blok teks.
Langkah pertama adalah memilih Alat Persegi Panjang dan gambar kotak yang membentang dari satu sisi halaman ke sisi lainnya. Dengan persegi panjang yang dipilih, kami mengaturnya tingginya hingga 250 piksel dan itu Y posisi ke 425 piksel. Rencananya adalah agar mereka selalu melakukan peregangan atau kontrak ke lebar halaman untuk mengakomodasi viewport browser pengguna. Untuk mencapai hal ini, kami mengklik Lebar 100% tombol di Properties. Apa yang dilakukan adalah abu-abu nilai X dan untuk memastikan gambar selalu 100% dari lebar viewport di browser.
05 07Tambahkan Gambar ke Gambar Placeholder
Dengan Rectangle dipilih kami mengklik Isi tautan - bukan Chip Warna - dan mengklik Itinta mage untuk menambahkan gambar ke persegi panjang. Dalam Tepat daerah, kami memilih Skala Agar Sesuai dan mengklik pegangan pusat dalam Posisi area untuk memastikan gambar diskalakan dari pusat gambar.
Selanjutnya, kami menggunakan Option / Alt-Shift-drag teknik untuk membuat salinan gambar antara dua blok teks pertama, membuka panel Isi dan mengganti gambar dengan yang lain. Kami melakukan ini untuk dua gambar yang tersisa juga.
Dengan gambar di tempat, saatnya untuk menambahkan gerakan.
06 07Tambahkan Parallax Scrolling
Ada sejumlah cara menambahkan paralaks bergulir di Adobe Muse. Kami akan menunjukkan kepada Anda cara sederhana untuk melakukannya.
Dengan panel Isi terbuka, klik Tab Gulir dan, ketika terbuka, klik Gerak kotak centang.
Anda akan melihat nilai untuk Awal dan Final Motion. Ini menentukan seberapa cepat gambar bergerak dalam kaitannya dengan Roda Gulir. Misalnya, nilai 1,5 akan memindahkan gambar 1,5 kali lebih cepat daripada roda. Kami menggunakan nilai 0 untuk mengunci gambar di tempat.
Itu Panah Horisontal dan Vertikal tentukan arah gerak.Jika nilainya adalah 0, gambar tidak akan bergoyang terlepas dari tanda panah mana yang Anda klik.
Nilai tengah – Posisi Kunci - menunjukkan titik di mana gambar mulai bergerak. Garis di atas gambar dimulai, untuk gambar ini, 325 piksel dari bagian atas halaman. Ketika gulungan mencapai nilai itu, gambar mulai bergerak. Anda dapat mengubah nilai ini dengan mengubahnya di kotak dialog atau dengan mengklik dan menyeret titik di bagian atas garis baik ke atas atau ke bawah.
Ulangi ini untuk gambar lain di halaman.
07 07Uji Browser
Pada titik ini, kami selesai. Hal pertama yang kami lakukan, untuk alasan yang jelas, adalah memilih File> Simpan Situs. Untuk uji browser, kami hanya memilih File> Halaman Pratinjau di Browser. Ini membuka browser default komputer kami dan, ketika halaman dibuka, kami mulai menggulir.
