Salah satu teknik "terpanas" di web saat ini adalah gulir paralaks. Kita semua pernah mengunjungi situs-situs di mana 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 Site of The Day . 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 latihan yang telah selesai Kami akan berjalan, arahkan peramban Anda ke halaman ini. Saat Anda menggulung roda gulir mouse Anda, teks tampak bergerak ke atas atau ke bawah halaman dan gambar berubah.
Mari kita mulai.
01 07
Buat Halaman Web
Ketika Anda memulai Muse klik tautan Situs Baru . Ini akan membuka Properti Situs Baru . Proyek ini akan dirancang untuk aplikasi desktop dan Anda dapat memilihnya di menu pop-down Layout Awal . 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 OK .
02 07
Format Halaman
Ketika Anda mengatur properti situs dan mengklik OK Anda dibawa ke apa yang disebut tampilan Plan . Ada halaman Home di bagian atas dan 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 chip warna Pengisian Browser dan memilih hitam dari Color Picker.
03 07
Tambahkan 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 mengatur posisi Y -nya menjadi 168 piksel dari atas. Dengan kotak teks yang masih dipilih, kami membuka panel Align dan menyejajarkan kotak teks ke pusat.
Akhirnya, dengan kotak teks yang dipilih, kami menekan tombol Option / Alt dan Shift dan membuat empat salinan dari kotak teks. Kami mengubah teks dan posisi Y dari setiap salinan untuk:
- Ke, 871
- Grafik, 1621
- Perangkat Lunak, 2371
- @ About.com, 3181
Anda akan melihat, ketika Anda mengatur lokasi setiap kotak teks, halaman mengubah ukuran untuk mengakomodasi lokasi teks.
04 07
Tambahkan Placeholder Gambar
Langkah selanjutnya adalah menempatkan gambar di antara blok teks.
Langkah pertama adalah memilih Rectangle Tool dan gambar kotak yang membentang dari satu sisi halaman ke sisi lainnya. Dengan persegi panjang yang dipilih, kami menetapkan tingginya hingga 250 piksel dan posisi Y -nya menjadi 425 piksel . Rencananya adalah agar mereka selalu melakukan peregangan atau kontrak ke lebar halaman untuk mengakomodasi viewport browser pengguna. Untuk mencapai ini, kami mengklik tombol lebar 100% di Properties. Apa yang dilakukan adalah abu-abu nilai X dan untuk memastikan gambar selalu 100% dari lebar viewport di browser.
05 07
Tambahkan Gambar ke Gambar Placeholder
Dengan Rectangle dipilih, kami mengklik tautan Fill - bukan Chip Warna - dan mengklik tinta I mage untuk menambahkan gambar di persegi panjang. Di area Fitting , kami memilih Scale To Fit dan mengklik pegangan tengah di area Posisi untuk memastikan gambar diskalakan dari pusat gambar.
Selanjutnya, kami menggunakan teknik Option / Alt-Shift-drag 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 07
Tambahkan 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 kotak centang Gerakan .
Anda akan melihat nilai-nilai untuk Gerakan Awal dan Akhir . 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.
Panah Horizontal dan Vertikal menentukan arah gerakan. Jika nilainya adalah 0, gambar tidak akan bergerak tanpa memperhatikan 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 07
Uji Browser
Pada titik ini, kami selesai. Hal pertama yang kami lakukan, karena alasan yang jelas, adalah memilih File> Save Site . Untuk uji browser, kami cukup memilih File> Preview Page di Browser . Ini membuka browser default komputer kami dan, ketika halaman dibuka, kami mulai menggulir.