Salah satu teknik "paling hangat" di web hari ini adalah menatal paralaks. Kita semua pernah ke laman-laman di mana anda memutarkan roda skrol pada tetikus anda dan kandungan pada halaman bergerak ke atas dan ke bawah atau merentasi halaman sambil anda memutarkan roda tetikus.
Bagi mereka yang baru dalam reka bentuk web dan reka bentuk grafik, teknik ini boleh menjadi sangat sukar untuk dicapai kerana jumlah CSS diperlukan.
Jika itu menggambarkan anda, terdapat beberapa aplikasi yang mungkin hanya menarik kepada artis grafik. Mereka pada asasnya menggunakan pendekatan susun atur halaman yang biasa untuk halaman web, yang bermaksud tidak banyak, jika ada, pengekodan terlibat. Satu aplikasi yang telah benar-benar meraih keunggulan ialah Adobe Muse.
Kerja yang dilakukan oleh kad grafik menggunakan Muse agak luar biasa dan anda boleh melihat persampelan mengenai apa yang boleh anda lakukan dengan melawat Muse Tapak Hari Ini . Walaupun sesetengah web cenderung untuk menganggap Muse sebagai sejenis "mainan angin", ia juga digunakan oleh pereka untuk membuat prototaip mudah alih dan web yang akhirnya akan diserahkan kepada pemaju pada pasukan mereka.
Satu teknik yang sangat mudah dicapai dengan Muse adalah menatal paralaks dan, jika anda mahu melihat versi latihan yang lengkap. Apabila anda melancarkan roda skrol tetikus anda, teks itu seolah-olah bergerak ke atas atau ke bawah halaman dan perubahan imej.
Mari kita mulakan.
01 dari 07Buat Halaman Web
Apabila anda melancarkan Muse klik pada Tapak Baru pautan. Ini akan membuka Hartanah Tapak Baru. Projek ini akan direka bentuk untuk aplikasi desktop dan anda boleh memilihnya di dalam Tata Letak Permulaan menu pop-down. Anda juga boleh menetapkan nilai untuk bilangan Lajur, Lebar Panjang, Margin, dan Padding. Dalam kes ini, kami tidak begitu bimbang dengan ini dan hanya klik okey.
Format Halaman
Apabila anda menetapkan sifat tapak dan diklik okey anda telah dibawa ke apa yang dipanggil Rancang pandangan. Ada Rumah halaman di bahagian atas dan a Halaman Utama di bahagian bawah tingkap. Kami hanya memerlukan satu halaman. Untuk sampai ke Design Design, kami double-klik Laman Utama yang membuka antara muka.
Di sebelah kiri adalah beberapa alat asas dan di sebelah kanan adalah pelbagai panel yang digunakan untuk memanipulasi kandungan pada halaman. Di sepanjang bahagian atas adalah sifat, yang boleh digunakan pada halaman, atau apa saja yang dipilih pada halaman. Dalam kes ini, kami mahu mempunyai latar belakang hitam. Untuk mencapai ini, kami klik pada Isi Pelayar cip warna dan memilih hitam dari Pemilih Warna.
03 dari 07Tambah Teks ke Halaman
Langkah seterusnya ialah menambahkan beberapa teks ke halaman. Kami memilih Alat Teks dan mengeluarkan kotak teks. Kami memasuki perkataan "Selamat Datang" dan, dalam Properties tetapkan teks kepada Arial, 120 piksel Putih. Pusat Diselaraskan.
Kami kemudian beralih ke alat Pemilihan, klik pada Kotak Teks dan tetapkannya Kedudukan Y ke 168 piksel dari atas. Dengan kotak teks masih dipilih, kami membuka Align panel dan selaraskan kotak teks ke pusat.
Akhirnya, dengan kotak teks yang dipilih, kami menahan Pilihan / Alt dan Shift kunci dan membuat empat salinan kotak teks. Kami menukar teks dan kedudukan Y masing-masing salinan kepada:
- Kepada, 871
- Grafik, 1621
- Perisian, 2371
Anda akan melihat, semasa anda menetapkan lokasi setiap kotak teks, saiz halaman diubah untuk mengakomodasi lokasi teks.
04 dari 07Tambah Pemegang tempat Imej
Langkah seterusnya adalah untuk meletakkan imej di antara blok teks.
Langkah pertama ialah memilih Alat Rectangle dan lukis kotak kami yang terbentang dari satu sisi halaman ke yang lain. Dengan segi empat tepat yang dipilih, kami menetapkannya ketinggian hingga 250 piksel dan yang Kedudukan Y ke 425 piksel. Rancangannya adalah untuk membolehkan mereka sentiasa menghulurkan atau membuat kontrak ke lebar halaman untuk menampung viewport pelayar pengguna. Untuk mencapai ini, kami mengklik 100% lebar butang dalam Properties. Apa yang dilakukannya adalah kelabu daripada nilai X dan untuk memastikan imej sentiasa 100% lebar paparan viewport dalam pelayar.
05 dari 07Tambah Imej kepada Pemegang Tempat Imej
Dengan Rektangle dipilih kami mengklik Isi pautan - bukan Chip Warna - dan klik pada sayadakwat mage untuk menambah imej ke segi empat tepat. Di dalam Pemasangan kawasan, kami memilih Skala Untuk Fit dan klik pada pemegang pusat di dalam Jawatan kawasan untuk memastikan imej berskala dari pusat imej.
Seterusnya, kami menggunakan Pilihan / Alt-Shift-drag teknik untuk membuat salinan imej antara dua blok teks pertama, membuka panel Isi dan menukar imej untuk yang lain. Kami melakukan ini untuk dua imej yang tersisa.
Dengan imej di tempat, sudah tiba masanya untuk menambah gerakan.
06 dari 07Tambah Parallax Scrolling
Terdapat beberapa cara untuk menambah menatal paralaks di Adobe Muse. Kami akan menunjukkan cara mudah untuk melakukannya.
Dengan panel Isi dibuka, klik Tab skrol dan, apabila ia dibuka, klik Kotak semak gerakan.
Anda akan melihat nilai untuk Awal dan Gerakan Akhir. Ini menentukan berapa pantas imej bergerak berhubung dengan Wheel Scroll. Sebagai contoh, nilai 1.5 akan menggerakkan imej 1.5 kali lebih cepat daripada roda. Kami menggunakan nilai 0 untuk mengunci imej di tempat.
The Anak panah mendatar dan menegak tentukan arah usul.Jika nilai adalah 0, imej tidak akan berubah tanpa mengira anak panah yang anda klik.
Nilai pertengahan – Kedudukan Utama - menunjukkan titik di mana imej mula bergerak. Garis di atas imej bermula, untuk imej ini, 325 piksel dari bahagian atas halaman. Apabila skrol mencapai nilai itu imej mula bergerak. Anda boleh mengubah nilai ini dengan mengubahnya di dalam kotak dialog atau dengan mengklik dan menyeret titik di bahagian atas garisan sama ada atas atau bawah.
Ulangi ini untuk imej lain pada halaman.
07 dari 07Ujian Penyemak Imbas
Pada ketika ini, kami telah selesai. Perkara pertama yang kami buat, atas alasan yang jelas, adalah memilih Fail> Simpan Tapak. Untuk ujian penyemak imbas, kami hanya memilih Fail> Halaman Preview dalam Penyemak Imbas. Ini membuka penyemak imbas lalai komputer kami dan, apabila halaman dibuka, kami mula menatal.
