Bugün internetteki “en sıcak” tekniklerden biri paralaks kaydırmadır. Hepimiz, farenizdeki kaydırma tekerleğini döndürdüğünüz sitelere gittik ve sayfadaki içerik, fare tekerleğini döndürdüğünüzde yukarı ve aşağı veya sayfa boyunca hareket ediyor.
Web tasarımı ve grafik tasarımı için yeni olanlar için, bu teknik gerekli CSS miktarı nedeniyle elde etmek için son derece zor olabilir.
Eğer bu sizi açıklarsa, sadece grafik sanatçılarına hitap edebilecek bir dizi uygulama vardır. Temel olarak web sayfalarına tanıdık bir sayfa düzeni yaklaşımı kullanırlar, yani kodlama söz konusu olduğunda çok fazla şey olmadığı anlamına gelir. Ön plana gerçekten roketli bir uygulama Adobe Muse.
Muse kullanarak grafik uzmanları tarafından yapılan çalışma oldukça şaşırtıcı ve The Muse Site of the Day'i ziyaret ederek yapabileceğiniz şeylerin bir örneklemesini görebilirsiniz. Web profesyonelleri Muse'u bir çeşit “kurmalı oyuncak” olarak görmeye eğilimli olsa da, tasarımcılar tarafından en sonunda ekiplerinde geliştiricilere dağıtılacak olan mobil ve web prototipleri oluşturmak için kullanılıyor.
Muse ile başarmak son derece kolay olan bir teknik paralaks kaydırmadır ve eğer egzersizin tamamlanmış halini görmek istiyorsanız, yürürken gezeceğiz, tarayıcınızı bu sayfaya yönlendirin. Farenizin kaydırma tekerleğini döndürdüğünüzde, metin sayfada yukarı veya aşağı doğru hareket eder ve görüntüler değişir.
Başlayalım.
07/07
Web sayfası oluştur
Muse'u başlattığınızda Yeni Site bağlantısını tıklayın. Bu Yeni Site Özellikleri'ni açacaktır. Bu proje bir masaüstü uygulaması için tasarlanacak ve İlk Yerleşim açılır menüsünde bunu seçebilirsiniz. Sütun, Oluk Genişliği, Kenar Boşlukları ve Dolgu Sayısı için değerleri de ayarlayabilirsiniz. Bu durumda, biz bununla korkunç bir endişe duymadık ve sadece TAMAM'a tıkladık.
02/07
Sayfayı Biçimlendir
Site özelliklerini ayarlayıp Tamam'a tıkladığınızda, Plan görünümü olarak adlandırılana yönlendirildiniz. Üstte bir Ana Sayfa ve pencerenin altında bir Ana Sayfa var . Sadece bir sayfaya ihtiyacımız vardı. Tasarım Görünümü'ne ulaşmak için, arayüzü açan Ana sayfayı çift tıkladık.
Sol tarafta birkaç temel araç vardır ve sağ tarafta, sayfadaki içeriği değiştirmek için kullanılan çeşitli paneller bulunmaktadır. Üstte, sayfaya uygulanabilecek özellikler veya sayfada seçilen herhangi bir şey bulunur. Bu durumda, siyah bir arka plana sahip olmak istedik. Bunu başarmak için Tarayıcı Dolgusu renk çipine tıklar ve Renk Seçici'den siyahı seçeriz.
03 of 07
Sayfaya Metin Ekleme
Bir sonraki adım sayfaya biraz metin eklemektir. Metin Aracı'nı seçtik ve bir metin kutusu çizdik. "Hoş Geldiniz" kelimesine girdik ve Özellikler bölümünde metni Arial, 120 piksel Beyaz olarak ayarladık . Merkezi Hizalanmış.
Daha sonra Seçim aracına geçtik, Metin kutusuna tıkladık ve Y konumunu en üstünden 168 piksele ayarladık. Metin kutusu hala seçiliyken Hizala panelini açtık ve metin kutusunu merkeze hizaladık.
Son olarak, seçilen metin kutusu ile Option / Alt ve Shift tuşlarını basılı tuttuk ve metin kutusunun dört kopyasını aldık. Her kopyanın metnini ve Y konumunu değiştirdik:
- Kimden, 871
- Grafikler, 1621
- Yazılım, 2371
- @ Şirket Bilgisi, 3181
Her metin kutusunun konumunu belirledikçe, sayfanın metnin yerini alacak şekilde yeniden boyutlandığını fark edeceksiniz.
04/07
Resim Yer Tutucu Ekle
Bir sonraki adım, metin blokları arasında görüntü koymaktır.
İlk adım, Dikdörtgen Aracının seçilmesi ve sayfanın bir tarafından diğerine uzanan bir kutumuzun çizilmesidir. Seçilen dikdörtgen ile, yüksekliğini 250 piksel ve Y konumunu 425 piksel olarak ayarladık. Plan, kullanıcının tarayıcı görüntü alanını yerleştirmek için sayfa genişliğine her zaman esnetmek veya sözleşme yapmak zorundadır. Bunu başarmak için, Özellikler'deki % 100 genişlik düğmesini tıkladık. Bu, X değerinin gri olduğunu ve görüntülerin her zaman bir tarayıcıdaki görüntü genişliğinin% 100'ünü sağladığından emin olmaktır.
05/07
Görüntü Yer Tutucularına Görüntü Ekleme
Dikdörtgen seçiliyken , Renk Çipini değil - Dolgu bağlantısını tıkladık ve dikdörtgene bir görüntü eklemek için mürekkep mürekkebine tıkladık. Fitting alanında, Resme Ölçeklendir seçeneğini seçtik ve görüntünün merkezin merkezinden ölçeklendiğinden emin olmak için Konum alanındaki merkez tutamacını tıkladık.
Ardından, ilk iki metin bloğu arasında resmin bir kopyasını oluşturmak, Dolgu panelini açmak ve görüntüyü bir başkası için değiştirmek için Option / Alt-Shift-drag tekniğini kullandık. Bunu kalan iki görüntü için de yaptık.
Resimler yerinde olduğunda, hareket eklemenin zamanı geldi.
06/07
Paralaks Kaydırma Ekle
Adobe Muse'da paralaks kaydırma eklemek için bir çok yol var. Size bunu yapmanın basit bir yolunu göstereceğiz.
Dolgu paneli açıkken, Kaydırma sekmesini tıklayın ve açıldığında Hareket onay kutusunu tıklayın .
İlk ve Son Hareket için değerler göreceksiniz. Bu, görüntünün Kaydırma Tekerleğine göre ne kadar hızlı hareket ettiğini belirler. Örneğin, 1,5 değeri, görüntüyü, tekerleğe göre 1,5 kat daha hızlı hareket ettirecektir. Görüntüleri yerinde kilitlemek için 0 değerini kullandık.
Yatay ve Dikey oklar hareketin yönünü belirler. Değerler 0 ise, hangi oku tıklattığınıza bakılmaksızın görüntüler düzenlenmez.
Orta değer- Tuş Konumu - görüntülerin hareket etmeye başladığı noktayı gösterir. Resmin üstündeki çizgi, bu görüntü için sayfanın en üstünde 325 piksel başlar. Kaydırma bu değere ulaştığında görüntü hareket etmeye başlar. Bu değeri, iletişim kutusunda değiştirerek veya satırın üstündeki noktayı yukarı veya aşağı sürükleyerek veya sürükleyerek değiştirebilirsiniz.
Bunu, sayfadaki diğer görüntüler için tekrarlayın.
07/07
Tarayıcı Testi
Bu noktada bitirdik. Yaptığımız ilk şey, belli sebeplerden dolayı, Dosya> Siteyi Kaydet'i seçmekti. Tarayıcı testine, Tarayıcıda Dosya> Önizleme Sayfasını seçtik. Bu, bilgisayarımızın varsayılan tarayıcısını açtı ve sayfa açıldığında, kaydırma yapmaya başladık.