Parça parça, kayan menü, kaplama ve diğer birçok farklı kaydırma efektini eklemeyi ve kullanmayı öğrenin.

Not:

Adobe Muse artık yeni özellikler eklemeyecek ve 26 Mart 2020'de desteği sonlandıracak. Ayrıntılı bilgi ve yardım için bkz. Adobe Muse hizmet sonu sayfası.

Kaydırma Efektleri için Tasarım Fikirleri

Bu bölümde, Muse sitelerinize etkileşimli özellikler, benzersiz site navigasyonu ve etkileyici hareketli grafikler eklemek için kaydırma efektlerini kullanabileceğiniz pek çok yoldan birkaçı hakkında bilgi edineceksiniz.

Başlamak için aşağıdaki adımları izleyin:

  1. Yayındaki örnek siteyi ziyaret edin ve her bir bölümü tıklatarak hedeflere yönelik örnekleri tek tek inceleyin. Her bir örnek sayfayı kaydırarak, kaydırma efektlerinin sayfa öğelerinin görüntülenme şeklini nasıl kontrol ettiğini görün.
  2. Yayındaki örnek sitenin sonuna kaydırarak .muse dosyasını indirin.
  3. Örnek siteyi açın ve projeyi Muse çalışma alanında inceleyin.
  4. Katmanlar panelini açın ve İçerik etiketini taşıyan bölümü genişleterek her bir örneği oluşturmak için kullanılan öğelere bakın.

Parça parça efekti

Bu efektle, bağımsız öğelerden oluşan bir grup sayfada akarken ziyaretçi sayfayı aşağı doğru kaydırdıkça sayfa tasarımında yeniden bir araya gelir. Grafikler ve metin çerçeveleri etkileşimli bir derleme oluşturan kaydırma efektleri kullanılarak kontrol edilir ve bir yapbozun parçaları halinde bir araya getirilir. Bu efekt, ürün bilgilerini bir web sayfasında göstermenin en ilgi çekici yöntemlerinden biridir.

Bu örnekte kullanılan iş akışında, Kaydırma Efektleri panelindeki Hareket sekmesinde bulunan İlk Hareket bölümü kullanılarak öğelerin birleşik bir tasarım halinde bir araya getirilmesi sağlanır. Her parça yerine oturduktan sonra, Son Hareket ayarları 0 olarak ayarlanarak varolan öğelerin yeni öğeler şeklinde akarak hareket etmesi engellenir.

Benzer şekilde bir parça parça efekti oluşturmak için aşağıdaki adımları izleyin:

  1. Tasarım görünümünde Sayfa > Sayfa Özellikleri'ni seçin. Min. Yükseklik alanını yüksek bir değere ayarlayın. Bu örnek sitede, sayfanın minimum yüksekliği 14,120 piksel olarak ayarlanmıştır.
  2. Metin aracını kullanarak bir metin çerçevesi oluşturun ve istediğiniz metin içeriğini girin.
  3. Kaydırma Efektleri panelinde Hareket sekmesini açın ve Hareket onay kutusunu işaretleyin. Bu örnekte, İlk Hareket bölümü ayarları metin çerçevesinin aşağı doğru hareket etmesini ve kaydırma hızının 0,25 misli (hızın dörtte biri) bir hızla yerine oturmasını sağlamaktadır. Sayfa, metin çerçevesinin temel konumuna ulaştığında, metin çerçevesi Tasarım görünümünde yerleştirildiği konuma gelmektedir. Ardından, Son Hareket ayarları (her iki yön için 0 değeri) ilk öğenin yerinde kalmasını ve iğnelenmesini sağlamaktadır.
  4. Metin çerçevesinin altına yerleştirilmiş saydamlık içeren bir PNG dosyası (bir cep telefonu çerçevesi) göreceksiniz. Bu öğe, sayfanın sol tarafından içeri doğru akmak, yerine oturmak ve burada sabitlenmek için Kaydırma Efektleri panelindeki Hareket sekmesinde bulunan ayarları kullanır.
  5. Telefon çerçevesinin yakınında, daha küçük beyaz bir öğe de benzer hareket modelini kullanarak sayfanın sol tarafından akar ve yerine oturur. Beyaz grafik, cep telefonlarının üst kısmında bulunan ahizeyi temsil eder. Bu varlık (phone-earpiece.png adını taşır) Katmanlar panelinde cep telefonu çerçevesinin üst kısmına yerleştirilir ve böylece tasarımda telefon çerçevesinin üstünde görüntülenir. 
  6. Ahizenin hemen ardından cep telefonunun Ana Sayfa düğmesini temsil eden küçük beyaz bir öğe, tıpkı ahizenin davranışına benzer şekilde sol taraftan akarak çerçeveye girer ve tasarımda yine cep telefonu çerçevesinin üstünde görüntülenir.
  7. Ardından, beyazdan açık griye doğru akan belli belirsiz bir degradesi bulunan açık renkli dikdörtgen bir grafik Kaydırma Efektleri panelindeki Hareket sekmesini kullanarak yerini alır ve cep telefonu çerçevesinin saydam orta alanına tam olarak oturur. Yerine oturan grafik sabitlenir ve telefonun ekranını temsil eder. Katmanlar panelinin alt kısmında katmanlanan ekran öğesi (phone-screen.png), sayfa tasarımındaki diğer öğelerin arkasında yer alacak şekilde yerleştirilir.
  8. Bunun ardından, dört dikdörtgenden oluşan bir grup (düz mavi, yeşil, sarı ve kırmızı renk dolgulu) yerlerini alır. Bir arada uçuşan öğelerle dağınık bir etki yaratmak için dikdörtgenlerin her birinin yönü ve hızı Kaydırma Efektleri panelindeki Hareket sekmesinde ayrı ayrı ayarlanır. İlk Hareket bölümünde mavi dikdörtgen aşağı ve sağa doğru hareket ederken yeşil ve sarı dikdörtgenler yukarı ve sağa doğru, kırmızı dikdörtgen ise yukarı ve sola doğru hareket eder. Son Hareket bölümünde, dikdörtgenlerin hepsinin ayarı her iki yönde de 0 olarak belirlenmiştir; böylece her bir öğe cep telefonu ekranının üstünde son yerlerini aldıklarında bulundukları yere iğnelenmiş gibi davranır.
  9. Diğer tüm parçalar bir araya geldiğinde, ikinci bir metin çerçevesi sayfa kaydırma hızının 0,5 misli (yarısı) hızda yukarı doğru hareket ederek birinci metin çerçevesinin altında yerini alır.

Son olarak en altta iki öğe kalır: Sayfanın rengiyle aynı renk dolgulu düz bir dikdörtgen (tasarımda görünmez olarak taranır) ve bunun ardındaki bir grup nesne (ampul grafiği içeren sarı bir dikdörtgen).

Düz renkli dikdörtgen grubu gizlemek için grubun arkasına yerleştirilir.

Adobe Muse'da parça parça kaydırma efekti
Adobe Muse'da parça parça kaydırma efekti

Not:

Her iki öğe de seçiliyken tüm seçili öğeler için aynı olan değerlerin alanlarda görüntülendiğini fark edeceksiniz. Bu örnekte, hem dikdörtgen hem de grubun dikey yönü İlk Hareket bölümünde 0, Son Hareket bölümünde ise 0,0 olarak ayarlanmıştır. İlk Hareket bölümündeki yatay alanında hiç değer görünmemesinin nedeni, grubun sola kaydırma hızının 1 misli hızda (kaydırma hızıyla aynı hızda) hareket edecek şekilde ayarlanmış olması, dikdörtgen ayarının ise 0 olmasıdır.  

  1. Dikdörtgen yerine iğnelenir ve kesinlikle hareket etmez, çünkü hem İlk Hareket hem de Son Hareket alanlarındaki değerler 0 olarak ayarlanmıştır. Sayfa, ampul grafiğini içeren grubun temel konumuna kaydırıldığında grup sola doğru hareket eder ve kendisini gizleyen dikdörtgenin ardından çıkarak görünür hale gelir. Ampul grubu cep telefonunun ekran öğesinin üstüne, cep telefonu çerçevesinin ise üstüne katmanlanmıştır; böylece, ampul grafiği kayarak yerine iğnelenir (bu, gerçek cep telefonları yatay olarak kaydırıldığında oluşan telefon geçişiyle aynı davranıştır). Ampul grubu, daha önce telefon ekranını temsil eden degradeli dikdörtgenin üzerini kaplar.

Bu örnekte de gördüğünüz gibi, çok uzun bir sayfa kombinasyonunu, Katmanlar panelinde stratejik biçimde katmanlanmış bir dizi öğeyi ve Kaydırma Efektleri panelindeki Hareket sekmesini kullanarak sayfa aşağı doğru kaydırıldıkça parçaların bir araya geldiği ve illüzyon yarattığı animasyonlar oluşturabilirsiniz.

Kayar menü

Kayar menü efekti, parça parça efektinde anlatılan pek çok standardın aynısını kullanır. Kaydırma Efektleri panelindeki Hareket sekmesi kullanılarak öğeler akıyormuş gibi gösterilir ve dikdörtgenler, bazı öğeleri sayfa tasarımında görünmeye hazır oluncaya dek gizler.

Bu örnekte, karmaşık açılı bir tasarım görünümü oluşturmak için stratejik olarak yerleştirilmiş dikdörtgen grupları kullanılmaktadır.

Örnek siteyi bir tarayıcıda görüntülediğinizde, uçağın sayfa boyunca sağ taraftan sol tarafa yatay olarak uçtuğunu ve uçağın ardından bir dizi stilize edilmiş menü seçeneğini ve verev çizgiler içeren degradeli bir arka planın sayfaya yerleştiğini göreceksiniz.

Benzer şekilde bir kayan efekt oluşturmak için aşağıdaki adımları izleyin:

  1. Tasarım görünümünde Sayfa > Sayfa Özellikleri'ni seçin. Min. Yükseklik alanını yüksek bir değere ayarlayın. Bu örnek sitede, sayfanın minimum yüksekliği 4.665 piksel olarak ayarlanmıştır.
  2. Uçak görüntüsü, sayfadaki diğer tüm içeriklerin üstüne katmanlanır ve böylelikle Katmanlar panelindeki listede ilk sırada görünür. Kaydırma Efektleri panelindeki Hareket sekmesinde uçak görüntüsü temel konumundan önce ve sonra sola doğru hareket edecek şekilde ayarlanır.
Adobe Muse kaydırma efektlerinde kayan menü efekti
Adobe Muse kaydırma efektlerinde kayan menü efekti

  1. Dört metin çerçevesi sola doğru akacak şekilde yapılandırılır ve dikey olarak yığınlanarak gezinme menüsünü oluşturur. Kaydırma Efektleri panelindeki Hareket sekmesinde, her bir metin çerçevesi İlk Hareket bölümünde aynı hıza sahiptir (kaydırma hızının 1,25 misli). Ayrıca her bir metin çerçevesi için farklı bir temel konum belirlenir. Sayfa aşağı doğru kaydırıldıkça, her bir metin çerçevesi kayarak yerine oturur ve tasarımın sol tarafıyla hizalanır. Tüm metin çerçeveleri İlk Hareket bölümünde 0,0 değerine ayarlanır ve böylelikle menü öğelerinin yerlerini aldıklarında sabitlenmeleri sağlanır.
  2. Metin çerçeveleri düz arka plan rengiyle doldurulmuştur; bununla birlikte, kesim kenarları düz dikey köşeler yerine verev olduğu için ilk bakışta resim gibi görünürler. Bu efekt, tarayıcı dolgusu rengiyle aynı düz renk kullanılarak doldurulan üç dikdörtgen grubunun metin çerçevelerinin üstüne katmanlanmasıyla elde edilir.
Sol ve sağ kenarlarda açı oluşturmak için dikdörtgenleri menü öğelerinin üzerinde gruplayın ve yerleştirin.
Sol ve sağ kenarlarda açı oluşturmak için dikdörtgenleri menü öğelerinin üzerinde gruplayın ve yerleştirin.

  1. Metin çerçeveleri Katmanlar panelinde grubun altına yerleştirildiği için metin çerçevesi animasyonu ilk başta başka bir dikdörtgen grubu ile gizlenir. Grup, üç dikdörtgenin bir araya getirilmesiyle oluşur: Dikey degradeli büyük bir dikdörtgen ve en üstteki degrade rengiyle aynı düz renkte doldurulmuş iki küçük dikdörtgen (biri kare, diğeri dönüşlü).
  1. Grubun alt kısmını incelemek için sayfayı aşağı kaydırdığınızda, dönen ve büyük degrade dikdörtgenin sağ alt köşesine hizalanan farklı genişliklerde dört dikdörtgenden oluşmuş bir grup daha göreceksiniz.
Degrade dolgulu dikdörtgenin köşesini dilimlere ayırmak için sayfanın dolgu rengiyle aynı renge sahip dönüşlü dikdörtgenleri döndürün.
Degrade dolgulu dikdörtgenin köşesini dilimlere ayırmak için sayfanın dolgu rengiyle aynı renge sahip dönüşlü dikdörtgenleri döndürün.

Gruplar, bir dizi öğeyi bir araya getirerek bunları tek bir öğe olarak kontrol etmek için kullanışlı yöntemlerdir. Bu örnekte, farklı dikdörtgenlerden oluşan gruplara hareket kaydırma efektleri uygulanarak grubun bir bütün halinde hareket etmesi sağlanmıştır.

Bu örnek aynı zamanda negatif alanın yaratıcı bir biçimde nasıl kullanılabildiğini de göstermektedir. Tarayıcı dolgusuna düz bir arka plan rengi uygulandığında, aynı renk dolgulu dikdörtgenleri diğer dikdörtgenlerin üstüne katmanlayarak pek çok ilginç efekt oluşturabilirsiniz. Grafikleri bir düzenleme programında tasarlayıp sayfaya tek bir görüntü yerleştirmek yerine, Muse çalışma alanının içinde dikdörtgenleri kullanarak grafikler oluşturabilirsiniz.

Soldurma

Bu animasyonlu gün doğumu ve gün batımı örneği, hareket ve opaklık olmak üzere iki kaydırma efekti birlikte kullanılarak elde edilmiştir. Bu örnek, degrade renk dolgulu bir sayfa arka planı ile PNG görüntüsü olarak yerleştirilmiş bir güneş görüntüsünden oluşmaktadır. PNG görüntüsü, arka plan sayfa dolgu renginin görünmesini sağlayan saydam alanlar içermektedir.

Örnek siteyi bir tarayıcıda görüntüleyerek güneşin soluk halinin %100 saydamlık değerinden artarak sayfa boyunca nasıl hareket ettiğini inceleyebilirsiniz. En tepe noktada tamamen opak olan güneş, sayfa aşağı kaydırıldıkça batmaya başlar ve tam olarak soluklaşana dek soluklaşma oranı kademeli olarak artar.
Benzer şekilde bir soldurma efekti oluşturmak için aşağıdaki adımları izleyin:

  1. Tasarım görünümünde Sayfa > Sayfa Özellikleri'ni seçin. Min. Yükseklik alanını monitörün görüntüleyebileceği ortalama değerden daha yüksek bir değere ayarlayarak sayfanın kaydırılmasını sağlayın. Bu örnek sitede, sayfanın minimum yüksekliği 2.988 piksel olarak ayarlanmıştır.
  2. Güneş görüntüsü sayfanın ortasına yerleştirilir. Kaydırma Efektleri panelindeki Hareket sekmesinde, temel konum 1410 piksel olarak ayarlanır. İlk Hareket ve Son Hareket bölümlerindeki ayarları da kontrol edin.
Solma efekti için İlk Hareket ve Son Hareket ayarlarını yapın.
Solma efekti için İlk Hareket ve Son Hareket ayarlarını yapın.

Bu ayarlar, güneşin yarı dairesel bir çizgide, sayfanın sol alt köşesinde bir yay çizerek yukarıya hareket edip orta noktaya gelmesini (temel konuma ulaşıldığında) ve ardından aşağı doğru hareket edip sayfanın sağ alt köşesine ilerlemesini sağlar.

  1. Güneş seçiliyken Opaklık sekmesini tıklatarak ayarları kontrol edin. Soldurma Konumu 1 öğesi, 726 piksel olarak ayarlanmıştır (güneşin üstünde). Soldurma Konumu 2 öğesi, 1925 piksel olarak ayarlanmıştır (güneşin altında). Güneş, %0 opaklık değeriyle (tamamen saydam) başlar ve sayfa güneşin temel konumuna ulaştığında tamamen opak hale gelir. Sayfa, güneşin temel konumunu aşacak şekilde aşağı kaydırıldığında ise %100 olan opaklık değeri %0'a doğru ilerleyerek bir soldurma efekti oluşturulur.
Kaydırma Efektleri panelindeki Opaklık sekmesinde saydamlık miktarını ayarlayın.
Kaydırma Efektleri panelindeki Opaklık sekmesinde saydamlık miktarını ayarlayın.

  1. Dosya > Sayfayı Tarayıcıda Önizle'yi seçerek sayfayı test edin. Sayfayı kaydırın ve güneşin opaklaşarak doğuşunun ve soluklaşarak batışının nasıl göründüğünü kontrol edin.
  2. Tarayıcıyı kapatın ve Muse çalışma alanına geri dönün.

Edge Animate

Bu örnek, kaydırma efektleri kullanılarak Adobe Edge Animate'ten dışa aktarılan OAM dosyalarının nasıl kontrol edildiğini göstermektedir. Bu örnekte, sayfaya açık turkuaz ile başlayarak koyu maviye dönen dikey degrade dolgu uygulanmıştır.

Bu animasyonlu efekt, Hareket ve Edge Animate sekmelerinde uygulanan ayarlardan oluşur.

Aynı OAM dosyasının üç örneği yatay olarak yan yana yerleştirilerek bir animasyonlu pusula oluşturulur. Örnek siteyi bir tarayıcıda görüntülediğinizde, üç pusula görünüme gelerek yerlerini alır. Üç pusulanın her birinin farklı hızlarda hareket ediyormuş gibi görünmesinin nedeni, Edge Animation dosyasının yapısı değil, Kaydırma Efektleri panelinde farklı şekillerde belirlenmiş ayarlardır.

Yerleştirilmiş üç OAM dosyasıyla benzer bir efekt oluşturmak için aşağıdaki adımları uygulayın:

  1. Tasarım görünümünde Sayfa > Sayfa Özellikleri'ni seçin. Min. Yükseklik alanını yüksek bir değere ayarlayın. Bu örnek sitede, sayfanın minimum yüksekliği 7465 piksel olarak ayarlanmıştır.
  2. Sayfadaki üç pusulanın bütün örneklerini seçin. Kaydırma Efektleri panelindeki Hareket sekmesinde aynı temel konum ve hareket ayarlarına sahip olan üç OAM dosyası görmenizin nedeni tüm değerlerin görüntüleniyor olmasıdır.
Kaydırma efektlerini kullanarak OAM dosyaları için animasyonlu efekt oluşturma
Kaydırma efektlerini kullanarak OAM dosyaları için animasyonlu efekt oluşturma

Örneği bir tarayıcıda önizlediğinizde, üç OAM öğesinin uyum içinde yukarı yöneldiğini, ardından da iğnelendiklerinde bir sıra halinde yerlerini aldıklarını göreceksiniz.

  1. Üç pusulanın her birinin işaretini kaldırmak için sayfada başka bir yeri tıklatın ve yalnızca soldaki pusulayı seçin. Shift tuşunu basılı tutarak sağdaki pusulayı tıklatın ve her ikisini birden seçin. Kaydırma Efektleri panelindeki Edge Animate sekmesini açarak ayarları gözden geçirin.
Üç pusulanın her birinin işaretini kaldırın ve soldaki ve sağdaki pusulayı seçin.
Üç pusulanın her birinin işaretini kaldırın ve soldaki ve sağdaki pusulayı seçin.

Yanlardaki iki pusula, zaman çizelgesi animasyonunda bir döngü yapacak ve sayfa aşağı doğru her 350 piksel kaydırıldığında bir sonraki kareye ilerleyecek şekilde yapılandırılır.

  1. Yanlardaki iki pusulanın işaretlerini kaldırın. Ortadaki pusulayı seçin ve tekrar Edge Animate sekmesine bakıp Şu Piksellerde Çerçeve Değiştir alanının 400 piksel olarak ayarlanıp ayarlanmadığını kontrol edin. Bu ayar, ortadaki animasyonun diğer iki pusulaya göre daha yavaş hareket ettiğini gösterir.
Ortadaki pusulayı ve ardından kaydırma efektleri ayarını seçin.
Ortadaki pusulayı ve ardından kaydırma efektleri ayarını seçin.

Pek çok Edge Animate animasyonunun hızını sayfa kaydırma hızına göre değiştirerek ilgi çekici animasyonlar oluşturabilirsiniz. Örneğin, aynı OAM dosyasının birden çok örneğini kullanıp her birine farklı kaydırma efekti ayarları uygulayarak bir balık sürüsü, hareket eden bulutlarla dolu bir gökyüzü veya başka efektler oluşturabilirsiniz.

Slayt Gösterisi efekti

Bir Slayt Gösterisi widget'ındaki resim grubunun, sayfanın kaydırılma biçimine göre nasıl görüntüleneceğini kontrol edebilirsiniz. Bunun için sayfaya bir Slayt Gösterisi widget'ı ekleyip ardından Kaydırma Efektleri panelindeki Slayt Gösterisi sekmesini kullanarak slayt gösterisi seçeneklerini güncellemeniz gerekir.

Bu örnekte, slayt gösterisi bir sırt çantasının 360 derecelik dönüşlerini gösteren bir dizi resimden oluşmaktadır. Bir üç ayakla döner bir stand üzerine yerleştirilmiş herhangi bir nesnenin fotoğraflarını çekerek buna benzer slayt gösterisi resimleri elde edebilirsiniz. Bu efekt, bir ürün açıklamasını görüntülerken olası müşterilerin satın almadan önce ürünü her açıdan görmelerini sağlamak açısından kullanışlıdır.

Slayt Gösterisi widget'ını kullanarak benzer bir efekt oluşturmak için aşağıdaki adımları izleyin:

  1. Tasarım görünümünde Sayfa > Sayfa Özellikleri'ni seçin. Min. Yükseklik alanını yüksek bir değere ayarlayın. Bu örnek sitede, sayfanın minimum yüksekliği 7465 piksel olarak ayarlanmıştır.
  2. Superpack sözcüğünü içeren bir metin çerçevesi, kaydırma efektlerini kullanacak şekilde ayarlanır. Hareket sekmesinde, İlk Hareket ayarlarını metnin sayfa kaydırma hızıyla aynı hızda soldan sağa doğru hareket edeceği şekilde yapılandırın. Son hareket ayarlarında ise her iki yön 0 değerine ayarlanır ve metin sayfada iğnelendiği yerde kalır.
     
Hareket onay kutusunu etkinleştirin ve kaydırma efektlerini metin çerçevesinin sağa doğru hareket etmesini sağlayacak şekilde yapılandırın.
Hareket onay kutusunu etkinleştirin ve kaydırma efektlerini metin çerçevesinin sağa doğru hareket etmesini sağlayacak şekilde yapılandırın.

  1. Widget Kitaplığını açın ve Slayt Gösterisi widget'ını sayfanın ortasına, metin çerçevesinin son hedef noktasının sağına sürükleyin.
  2. Seçenekler menüsündeki Görüntü Ekle seçeneğini kullanarak slayt gösterisini görüntü dosyalarıyla doldurun. 

Slayt Gösterisi seçiliyken, Slayt Gösterisi widget'ını seçebilir ve Kontrol panelindeki iğnele arabirimini kullanarak Slayt Gösterisini yerine iğneleyebilirsiniz. Ayrıca, Tam Ekran Slayt Gösterisi widget'ı ekleyerek ve bu widget'ı kaydırma efektleriyle kontrol ederek denemeler de yapabilirsiniz. 

  1. Slayt Gösterisi seçiliyken Kaydırma Efektleri panelindeki Slayt Gösterisi sekmesini açın ve Slayt Gösterisi onay kutusunu etkinleştirin.
  2. T tutamacını sürükleyerek veya alana bir değer girerek temel konumu belirleyin. Bu örnekte, temel konum 1066 piksel olarak ayarlanmıştır.
  3. Şu Piksellerde Slayt Değiştir radyo düğmesini etkinleştirin ve altındaki alanı 50 piksel olarak ayarlayın.
Slayt gösterisini, sayfa her 50 piksel kaydırıldığında bir sonraki resme ilerleyecek şekilde ayarlayın.
Slayt gösterisini, sayfa her 50 piksel kaydırıldığında bir sonraki resme ilerleyecek şekilde ayarlayın.

  1. Önizleme alanında veya bir tarayıcıda sayfayı test edin. Sayfayı aşağı kaydırarak sırt çantasının dönüşünü kontrol edin. Slayt gösterisini, tıpkı animasyonlu bir GIF dosyasındaki kareler gibi, benzer fakat aralarında ufak farklılıklar olan bir dizi görüntüyle doldurarak yukarı doğru akıyormuş veya aşağı doğru düşüyormuş izlenimi veren görüntüler de oluşturabilirsiniz.
  2. Kaydırma efektlerini test ettikten sonra, Muse'da Tasarım görünümüne geri dönerek sayfaları düzenlemeye devam edin.

Kaplama

Kaydırma efektlerini kullanarak tamamen farklı görüntülere sahip bölümlere ayrılan çok uzun bir sayfa oluşturabilirsiniz. Ziyaretçi sayfayı kaydırdıkça, sayfalar, animasyonlu metin efektleri ve gölge efekti kullanılarak oluşturulmuş ayırıcı sınırlarla birbirinin üzerini örtüyormuş gibi görünen sayfa bölümleri arasında geçiş yapar.

Ziyaretçilerin her bir bölümü görmek üzere sayfayı aşağı kaydırmalarını sağlamak için bağlantı etiketlerini kullanabilir veya bir not ekleyebilirsiniz. Örnek sitenin sonuna gelip Başa Dön düğmesini tıklattığınızda, bağlayıcı bağın sayfa tasarımının başına geri dönerek tüm sayfanın enerjik bir şekilde yukarı doğru kaydığını göreceksiniz.

Benzer şekilde bir kaplama efekti oluşturmak için aşağıdaki adımları izleyin:

  1. Tasarım görünümünde Sayfa > Sayfa Özellikleri'ni seçin. Min. Yükseklik alanını yüksek bir değere ayarlayın. Bu örnek sitede, sayfanın minimum yüksekliği 16.990 piksel olarak ayarlanmıştır.
  2. Tarayıcı Dolgusu menüsünde, tarayıcı dolgusu rengini düz mavi renge ayarlayın.
Tarayıcı Dolgusu menüsünde tarayıcı dolgusunun rengini ayarlayın.
Tarayıcı Dolgusu menüsünde tarayıcı dolgusunun rengini ayarlayın.

  1. Tüm sayfa seçiliyken Dolgu menüsünü kullanarak sayfanın rengini yok olarak ayarlayın; bu şekilde mavi tarayıcı dolgusu görünür.
  2. Sayfayı baştan itibaren yaklaşık 2248 piksel aşağı kaydırın. Dikdörtgen aracını kullanarak 3000 piksel genişliğinde ve 2000 piksel yüksekliğinde bir dikdörtgen çizin. Seçim aracını kullanarak dikdörtgeni sayfanın ortasına hizalayın ve her iki tarafını genişleterek tarayıcı penceresinin kenarlarından taşmasını sağlayın.
  3. Dikdörtgen seçiliyken, Dolgu menüsünü kullanarak düz yeşil renkte bir tarayıcı dolgusu ayarlayın. Efektler menüsünü kullanarak bir gölge efekti ayarlayın.
Daha belirgin bir sınır oluşturmak için dikdörtgene gölge efekti ekleyin.
Daha belirgin bir sınır oluşturmak için dikdörtgene gölge efekti ekleyin.

  1. Yeşil dikdörtgen seçiliyken Kaydırma Efektleri panelindeki Hareket sekmesinde Hareket onay kutusunu etkinleştirin. T tutamacını tıklatıp sürükleyerek temel konuma göre ayarlayacak şekilde daraltın. Örnek sitede, temel konum dikdörtgenin üst köşesidir ve 2248 piksel olarak ayarlanmıştır.
  1. İlk Hareket bölümünde, dikdörtgeni kaydırma hızının 1,5 misli hızda aşağı yönde hareket edecek şekilde ayarlayın. Diğer tüm yönleri 0 değerine ayarlayın.
  2. Metin aracını kullanarak yeşil dikdörtgenin üst kısmı yakınlarında bir metin alanı oluşturun. Bu örnekte, metin alanında şu sözcükler yazmaktadır: This is the roll-up (Bu, kaplama efektidir). Ancak siz başka bir metin içeriği girerek tercih ettiğiniz metin formatını uygulayabilirsiniz.
  3. Metin çerçevesi seçiliyken Kaydırma Efektleri panelindeki Hareket sekmesini etkinleştirin. T tutamacını sürükleyerek yeşil dikdörtgenin üst köşesiyle hizalayın ve sayfanın kaydırılma hızına göre metin çerçevesinin hareketini kontrol etmek için ayarları güncelleyin.
T tutamacını yeşil dikdörtgenin üst köşesiyle hizalayın.
T tutamacını yeşil dikdörtgenin üst köşesiyle hizalayın.

  1. İlk Hareket'i, kaydırma hızının 1,5 misli aşağı yönde hareket edecek şekilde ayarlayın. Paneldeki diğer tüm değerleri 0 olarak ayarlayın. Böylelikle metin çerçevesi, yeşil dikdörtgenle aynı yönde ve hızda aşağı doğru hareket eder. Sayfa kaydırılarak dikdörtgen ve metin çerçevesinin temel konumlarını aştığında hem dikdörtgen hem de metin çerçevesi sabit şekilde yerlerinde kalacaktır.
  2. Önizleme alanını tıklatıp sayfayı aşağı kaydırarak yeşil dikdörtgenin ve metin çerçevesinin üst kısımdan itibaren sayfayı kaplayarak nasıl görünüme girdiğini görebilirsiniz. Test işlemlerini tamamladığınızda Tasarım'ı tıklatarak sayfayı düzenlemeye devam edebilirsiniz.
  3. Görünüm menüsünü kullanarak site tasarımını %10 oranında uzaklaştırın. Yeşil dikdörtgeni ve metin alanını seçin. Option/Alt tuşunu basılı tutup iki öğeyi sayfada biraz daha aşağı sürükleyerek öğelerin birer kopyasını oluşturun. Çoğalttığınız örnek dikdörtgenin dolgu rengini koyu mavi olarak ayarlayın ve metin aracını kullanarak metin içeriğini güncelleyin.
Çoğalttığınız örnek dikdörtgenin arka plan dolgu rengini güncelleyin ve yeni sayfa bölümünün metin çerçevesi içeriğini değiştirin.
Çoğalttığınız örnek dikdörtgenin arka plan dolgu rengini güncelleyin ve yeni sayfa bölümünün metin çerçevesi içeriğini değiştirin.

Bu örnekte, çoğaltılan örnek metin çerçevesinde şu sözcükler yazmaktadır: Use it to drastically alter the appearance of your website (Web sitenizin görünümünü etkileyici bir şekilde değiştirmek için bu efekti kullanın). Sizse dilediğiniz metni girerek sayfanın mavi bölümünü oluşturabilirsiniz.

  1. Seçim aracını kullanarak çoğalttığınız örnek dikdörtgeni ve metin çerçevesini sayfanın başından yaklaşık 5448 piksel aşağıya yerleştirin.
  2. Koyu mavi dikdörtgen seçiliyken Kaydırma Efektleri panelindeki Hareket sekmesini etkinleştirin. Temel konum dikdörtgenin yeni konumuna göre (5448 piksel) otomatik olarak güncellenir ve İlk Hareket'te ayarlanmış olan aşağı hareket yönü kaydırma hızının 1,5 misli hızda hareket edecek şekilde kalır (ve tüm değerler 0 olarak ayarlanmış halde kalır). Çoğalttığınız metin çerçevesine baktığınızda, bu çoğaltılan öğe için kaydırma efektlerinin de değişmediğini göreceksiniz.
  3. Üzerlerinde metin olan altı farklı büyük dikdörtgen oluşturmak için 12. ve 13. adımları dört kez daha tekrarlayın. Her bir dikdörtgen gölge efekti içerir ve kaydırma efektleri önceden uygulanır. Son dört dikdörtgeni şu temel konumlara yerleştirin: 8648 piksel, 11.852 piksel, 15.058 piksel ve 18.251 piksel. Böylece her bir bölümü birbirinden yaklaşık 1200 piksel ayırmış olursunuz.
  4. Dolgu menüsünü kullanarak dikdörtgenlerin dolgu renklerini farklı renklere ayarlayın. Her bir bölümün birbirinden ayrılması ve diğer bölümlerden farklı olması için hem düz hem de degrade renk dolguları uygulayarak denemeler yapabilirsiniz.
  5. Metin aracını kullanarak her bir bölümün metin içeriğini güncelleyin. Örneğin, her bir bölümü, üzerindeki dikdörtgenin arka plan rengini gösterecek şekilde değiştirebilirsiniz. Örnek: This is the blue section (Burası mavi bölüm).
  6. Dosya > Sayfayı Tarayıcıda Önizle'yi seçerek sayfayı test edin. Sayfayı kaydırarak farklı sayfa bölümlerinin nasıl göründüğünü ve bir sonraki sayfa bölümüyle nasıl değiştiğini kontrol edin.
  7. Tarayıcıyı kapatın ve Muse çalışma alanına geri dönün.

Dinamik tür

Hareket kaydırma efektlerini ve Adobe Edge Web Fontlarını bir arada kullanarak sıra dışı tipografik tasarımlar oluşturabilirsiniz. Web fontları, sayfayla birlikte yüklenen çeşitli fontlardan yararlanarak metinleri stilize etmenizi sağlar. Bir görüntü düzenleme programında oluşturulmuş metinlerin görüntülerini yerleştirip animasyon oluşturmak yerine, Edge Web Fontlarını kullanarak mükemmel görünen ve kolayca güncellenebilen sayfalar oluşturabilirsiniz. Bunun yanı sıra kaydırma efektleri de sayfa kaydırıldığında belirgin bir animasyon hissi oluşturur.

Dinamik metinle benzer bir efekt oluşturmak için aşağıdaki adımları izleyin:

  1. Tasarım görünümünde Sayfa > Sayfa Özellikleri'ni seçin. Min. Yükseklik alanını yüksek bir değere ayarlayın. Bu örnek sitede, sayfanın minimum yüksekliği 4854 piksel olarak ayarlanmıştır.
  2. Sayfanın dolgu rengini yok olarak ayarlayın. Bir sonraki adımda sayfa uzun bir dikdörtgenle kaplanacağı için tarayıcı dolgusunun rengi önemli değildir.
  3. Dikdörtgen aracını kullanarak yaklaşık 1159 piksel genişliğinde ve 4854 piksel yüksekliğinde geniş bir dikdörtgen çizin. Dolgu menüsünü kullanarak dikdörtgeni düz veya degradeli bir dolgu rengiyle doldurun. Bu örnekte, dolgu rengi olarak camgöbeğinden fuşyaya değişen bir degrade renk uygulanmıştır. Seçim aracını kullanarak dikdörtgeni tüm tarayıcı alanını kaplayacak şekilde ortalayın. Dilerseniz sayfayı uzaklaştırarak dikdörtgenin sayfada ortalanıp ortalanmadığını kontrol edebilirsiniz.
Sayfayı uzaklaştırın ve dikdörtgeni uzun sayfanın ortasına yerleştirin.
Sayfayı uzaklaştırın ve dikdörtgeni uzun sayfanın ortasına yerleştirin.

  1. Dikdörtgeni ortaladıktan sonra, Görünüm menüsünde büyütme oranını tekrar %100 olarak ayarlayın.
  2. Sayfanın sol tarafında, Metin aracını kullanarak bir dizi metin çerçevesi oluşturun. Bu örnekte, toplam beş adet metin çerçevesi bulunmaktadır. Her bir metin çerçevesinin metin içeriği aşağıda verilmektedir; ancak siz her bir metin çerçevesine dilediğiniz metni girebilirsiniz:
    • Five Frames (Farklı Hızlarda)
    • Scrolling (Kayan)
    • At Different Speeds Will (Beş Çerçeve)
    • Create (Dinamik Gerilim)
    • Dynamic Tension (Dinamik Gerilim)

İsteğe bağlı fazladan bir adım olarak bazı metin çerçevelerini çoğaltabilir ve ufak tefek değişikliklerle farklı bir stil uygulayabilirsiniz. Bu örnekte, Create (Dinamik Gerilim) sözcüğünü içeren metin çerçevesi çoğaltılmış ve çoğaltılan iki kopya birbirinin üzerine katmanlanarak açık mavi renkte bir alt gölge efekti yaratılmıştır.

  1. Metin aracını kullanarak metin çerçevelerinin her birini seçin. Metin panelini (Kontrol panelindeki metin formatı seçeneklerini) kullanarak farklı web fontları, font boyutları, renkler ve diğer tipografi ayarları ile her bir metin çerçevesine birbirinden farklı bir görünüm kazandırın.
  2. Tüm metin çerçevelerini seçin. Metin çerçeveleri seçiliyken, Kaydırma Efektleri panelindeki Hareket sekmesini açın. Seçilen tüm metin çerçevelerinin temel konumunu bir kerede ayarlamak için aynı sayısal değeri girin. (Bu örnekte, temel konum 1372 piksel olarak ayarlanmıştır). Ayrıca İlk Hareket ve Son Hareket bölümlerinde yatay yönü sağ olarak ayarlayın. Metin çerçevelerinin dikey olarak hareket etmemesi için İlk Hareket ve Son Hareket bölümlerinde tüm dikey yönlerin değerini 0 olarak ayarlayın.
  3. Metin çerçevelerinin dışında bir yeri tıklatın, ardından her bir metin çerçevesini tek tek tıklatın. Metin çerçevelerinin her biri için birbirinden biraz farklı değerler girin. Aşağıdaki listede, ilk değer yatay (sağ) yönde İlk Hareket hızını, ikinci değer ise yine yatay (sağ) yönde Son Hareket hızını gösterir:
    • Five Frames (Farklı Hızlarda): 0,9 misli, 0,1 misli
    • Scrolling (Kayan): 0,12 misli, 0,5 misli
    • At Different Speeds Will (Beş Çerçeve): 0,7 misli, 0,17 misli
    • Create (Dinamik Gerilim): 1,1 misli, 0,005 misli
    • Dynamic Tension (Oluşturur).: 1 misli, 0,01 misli

Not:

Alt gölge efekti oluşturmak için bir metin çerçevesini çoğaltmak isterseniz metin çerçevesinin iki veya daha çok kopyasını gruplayıp tek bir grup halinde kontrol ederek kaydırma efektleri uygulayabilirsiniz.

  1. Metin aracını kullanarak bir metin alanı oluşturun ve sayfanın sağ tarafına 5 sayısını yazın. Tekrar hatırlatmak gerekirse metin çerçevesini çoğaltıp farklı renkler ve metin formatları uygulayarak eğimli kenarlar ve alt gölgelerle bir görünüm yaratabilirsiniz. Tasarım amaçlarına yönelik olarak bir metin çerçevesinin kopyalarını oluşturduğunuzda, metin çerçevelerini bir arada gruplandırarak gruba kaydırma efektleri uygulayabilirsiniz.
  2. 5 sayısını içeren metin alanı seçiliyken Kaydırma Efektleri panelindeki Hareket sekmesinde Hareket onay kutusunu etkinleştirin. Sayısal bir değer girerek veya T tutamacını sürükleyerek temel konumu ayarlayın (bu örnekte, temel konum 1425 piksel olarak ayarlanmıştır). İlk Hareket bölümünde, öğeyi kaydırma hızının 1 misli hızda sola doğru hareket edecek şekilde ayarlayın. Son Hareket bölümünde, öğeyi kaydırma hızının 0,01 misli hızda sola doğru hareket edecek şekilde ayarlayın.
  3. Dosya > Sayfayı Tarayıcıda Önizle'yi seçerek sayfayı test edin. Sayfayı kaydırarak beş metin çerçevesinin sol taraftan, 5 sayısını içeren metin çerçevesinin de sağ taraftan sayfaya nasıl girdiğini kontrol edin. Sayfayı yukarı ve aşağı doğru kaydırarak metin çerçevelerinin animasyonlarının nasıl oluştuğuna bakın.
  4. Tarayıcıyı kapatın ve Muse çalışma alanına geri dönün.
     

Yığınlanmış menü

Kaydırma efektlerini kullanarak farklı düğmelerin sayfadaki görünen alana girdiği ve birbirleriyle hizalanarak bir menü çubuğu oluşturduğu ilginç ve etkileşimli bir site navigasyonu oluşturabilirsiniz. Bu örnekte, dört rollover düğmesi sayfa kaydırıldığında sayfanın alt kısmından yukarı doğru hareket etmekte ve yerlerine sabitlenerek dikey bir menü çubuğu oluşturmaktadır.

Dört düğme hizalandığında, arka plan içeriği (ampul şeklinde bir grafik, renkli arka plan alanı, metin çerçevesi ve verev köşe çizgileri) sayfanın her iki tarafından hareket ederek bir site bölümü oluşturmaktadır.

Bu örnekte düğmeler bağlı değildir, ancak siz Köprü açılır menüsünü kullanarak bağlantılar ekleyebilirsiniz. Böylece ziyaretçiler bu düğmeleri tıklatarak yeni bir sayfa yükleyebilir veya bağlantı etiketlerini kullanarak geçerli sayfada başka bir konuma atlayabilirler.

Benzer şekilde bir yığınlanmış menü efekti oluşturmak için aşağıdaki adımları izleyin:

  1. Tasarım görünümünde Sayfa > Sayfa Özellikleri'ni seçin. Min. Yükseklik alanını yüksek bir değere ayarlayın. Bu örnek sitede, sayfanın minimum yüksekliği 7465 piksel olarak ayarlanmıştır.
  2. Sayfa dolgu rengini yok olarak, tarayıcı dolgusunu ise düz bir dolgu rengine ayarlayın. Bu örnek sitede, tarayıcı dolgusu açık bej renge ayarlanmıştır.
  3. Metin aracını kullanarak yeni bir metin çerçevesi oluşturun. Home (Ana Sayfa) yazın. Kontrol panelindeki format seçeneklerini kullanarak metin çerçevesine bir arka plan rengi ekleyin. Ayrıca, metnin stilini dilediğiniz gibi belirlemek için format seçeneklerini güncelleyin. Düğmenin kenarlarındaki tutamaçları kullanarak genişliğini 300 piksel, yüksekliğini ise yaklaşık 115 piksel olarak genişletin.
Kontrol panelindeki seçenekleri kullanarak metin çerçevesinin stilini oluşturun.
Kontrol panelindeki seçenekleri kullanarak metin çerçevesinin stilini oluşturun.

  1. Durumlar panelini açın. Rollover durumunu seçin ve farklı bir dolgu rengi ekleyerek (ya da istediğiniz bir stili uygulayarak) bir rollover düğmesi oluşturun.
Rollover durumunu seçin ve düğmenin stilini Normal durumdan farklı görünecek şekilde ayarlayın.
Rollover durumunu seçin ve düğmenin stilini Normal durumdan farklı görünecek şekilde ayarlayın.

  1. Rollover durumunu güncelledikten sonra tekrar Normal durumunu seçin.
  2. Kaydırma Efektleri panelindeki Hareket sekmesini açın. Düğme seçiliyken Hareket onay kutusunu etkinleştirin. T tutamacını sürükleyerek veya sayısal bir değer girerek temel konumu ayarlayın. Ayrıca İlk Hareket bölümünü kaydırma hızının 0,75 misli hızda hareket edecek şekilde ayarlayın. Diğer tüm alanların değerini 0 olarak bırakın.
Hareket sekmesinde kaydırma efektlerini etkinleştirin ve hareketin yönünü ve hızını ayarlayın.
Hareket sekmesinde kaydırma efektlerini etkinleştirin ve hareketin yönünü ve hızını ayarlayın.

  1. Option/Alt tuşunu basılı tutarak Home (Ana Sayfa) düğmesini sayfanın biraz daha aşağısına sürükleyin. Böylece düğmenin bir kopyası oluşturulur. Çoğalttığınız kopyanın Home (Ana Sayfa) düğmesiyle dikey olarak hizalandığından emin olun. İki öğe hizalandığında, çoğaltılan kopya halen seçiliyken sayfanın ortasında geçici olarak koyu mavi renkli bir akıllı kılavuz görüntülenir.
Option/Alt tuşunu basılı tutarak düğmenin çoğaltılan kopyasını sürükleyip dikey olarak hizalayın.
Option/Alt tuşunu basılı tutarak düğmenin çoğaltılan kopyasını sürükleyip dikey olarak hizalayın.

  1. Çoğaltılan düğme kopyasını sayfada aşağı doğru, orijinal düğmenin yaklaşık 460 piksel altına sürükleyin.
  2. 7. ve 8. adımları tekrarlayarak düğmeyi iki kez daha çoğaltın ve sayfada eşit aralıklarla ayrılan toplam dört düğme oluşturun. Metin aracıyla sayfanın başından itibaren ikinci, üçüncü ve dördüncü düğmeyi düzenleyerek metin içeriklerini şu etiketlerle güncelleyin: Products (Ürünler), Photos (Fotoğraflar), Contact Us (İletişim).
Metin çerçevelerindeki metinleri düzenleyerek her bir düğmenin birbirinden farklı olmasını sağlayın.
Metin çerçevelerindeki metinleri düzenleyerek her bir düğmenin birbirinden farklı olmasını sağlayın.

Home (Ana Sayfa) etiketli ilk düğmeyi çoğalttığınızda, metin çerçevesinin stilini, içeriğini ve kaydırma efekti ayarlarını da kopyalamış oldunuz. Çoğalttığınız düğmelerden birini seçip Kaydırma Efektleri paneline baktığınızda, Hareket sekmesindeki ayarların Home (Ana Sayfa) düğmesine uygulanmış olan ayarlarla aynı olduğunu ve her düğmenin temel konumunun bir önceki düğmenin yaklaşık 460 piksel altında (sayfadaki her bir düğmenin arasındaki boşlukla aynı mesafede) yer aldığını göreceksiniz.

  1. Yüksekliklerini ve birbirlerinin arasındaki boşlukları da ekleyerek dört düğme son konumuna hizalandığında ortaya çıkan toplam yüksekliği hesaplayın. Örnek sitede, düğmelerin her birinin yüksekliği 116 pikseldir ve her bir düğmenin arasında 4 piksel aralık vardır. Bu durumda, dikey menü çubuğunun (bir araya getirildiğinde) toplam yüksekliği 476 pikseldir. Dikdörtgen aracını kullanarak genişliği sayfada istediğiniz bir bölümün genişliğinde, yüksekliği ise menü çubuğuyla aynı yükseklikte bir dikdörtgen çizin. Bu örnekte, dikdörtgenin genişliği 931 piksel, yüksekliği ise 476 pikseldir.
  2. Örnek sitedeki tasarımı yinelemek isterseniz, dikdörtgenin dolgu rengini, düğmelerin Normal durumundan daha açık tonda, açık pembe olarak ayarlayabilirsiniz. Ayrıca Kontrol panelinde köşe yarıçapı değeri girerek istediğiniz zaman yuvarlatılmış köşeler de oluşturabilirsiniz. Bu örnekte, dört köşe de 10 piksel olarak ayarlanmıştır.
Dikdörtgeni seçin ve yuvarlatılmış köşelerin köşe yarıçapını ayarlayın.
Dikdörtgeni seçin ve yuvarlatılmış köşelerin köşe yarıçapını ayarlayın.

  1. Seçim aracını kullanarak dikdörtgenin üst köşesini sayfanın başından yaklaşık 5094 piksel aşağıya hizalayın. Ayrıca, dikdörtgenin sol tarafının düğmelerin sol tarafıyla hizalanmış olmasına da dikkat edin. Bu örnek sitede, dikdörtgen ve düğmeler sayfanın sol tarafından yaklaşık 14 piksel uzaklıktadır. Bir öğe seçip Dönüştür panelini açtığınızda bu ayarları görebilirsiniz. X değeri sol tarafa olan uzaklık (14 piksel), Y değeri ise sayfanın başına olan uzaklıktır (5094 piksel).
  2. Dikdörtgen halen seçiliyken Kaydırma Efektleri panelini açın ve Hareket sekmesinde Hareket onay kutusunu etkinleştirin. Temel konumu 4979 olarak ayarlayın.
  3. İlk Hareket bölümünü kaydırma hızının 1 misli hızda sağa doğru hareket edecek şekilde ayarlayın. Hareket sekmesindeki diğer tüm alanların değerini 0 olarak bırakın.
Kaydırma efektleri uygulayarak sol taraftan görünüme girip sağ tarafta yerine oturan bir dikdörtgen oluşturun.
Kaydırma efektleri uygulayarak sol taraftan görünüme girip sağ tarafta yerine oturan bir dikdörtgen oluşturun.

  1. Dikdörtgenin dört düğmenin arkasında yer almasını sağlamak için dikdörtgen seçiliyken Nesne > En Alta Gönder'i seçin.
  2. Dosya > Yerleştir'i seçin ve bir görüntü dosyası bulup seçerek sayfayı bir kez tıklatıp görüntüyü yerleştirin. Bu örnekte, saydam bir PNG yerleştirilmiştir ve bir ampul görüntülemektedir. Ampul büyük dikdörtgenin üst kısmına, menü düğmeleriyle kaplı alandan uzakta, sağ köşeye yerleştirilmiştir. Bu örnekte, görüntü soldan 501 piksel (X konumu) ve sayfanın başından 5245 piksel (Y konumu) uzağa yerleştirilmiştir.
  3. Yerleştirilen görüntünün dört düğmenin arkasında yer almasını sağlamak için görüntü seçiliyken Nesne > En Alta Gönder'i seçin. Buradaki hedef, yerleştirilen görüntüyü büyük dikdörtgenin önünde ve dört düğmenin arkasında görüntülemektir.
  4. Yerleştirilmiş görüntü seçiliyken Kaydırma Efektleri panelindeki Slayt Gösterisi sekmesini açın ve Slayt Gösterisi onay kutusunu etkinleştirin. Temel konumu dilediğiniz bir değere ayarlayın. Bu örnek sitede, temel konum 4979 piksel olarak ayarlanmıştır.
  5. İlk Hareket bölümünde, sağdaki değeri kaydırma hızının 0,75 misli hızda hareket edecek şekilde ayarlayın. Diğer tüm yönleri 0 değerine ayarlayın.
İlk Hareket'i, dikdörtgenle aynı hızda sağa doğru hareket edecek şekilde ayarlayın.
İlk Hareket'i, dikdörtgenle aynı hızda sağa doğru hareket edecek şekilde ayarlayın.

  1. Metin aracını kullanarak bir metin çerçevesi oluşturun. Örnek dosyada, metin çerçevesi şu metni içermektedir: Stack linked text frames with high contrast roll-overs to create unusual menus. Sizse dilediğiniz herhangi bir metni girebilirsiniz. Kontrol panelindeki format seçenekleri kullanarak metin çerçevesinin stilini oluşturun. Bu örnekte, metin çerçevesine bir arka plan dolgu rengi uygulanmamıştır.
  2. Seçim aracını kullanarak metin çerçevesini yerleştirilen görüntünün sağına yerleştirin. Bu örnekte, metin çerçevesinin X değeri (soldan) 357 piksel, Y değeri ise (sayfa başından) 5136 piksel olarak ayarlanmıştır. Gerçek konum, metin içeriğine ve metin çerçevesine uyguladığınız format seçeneklerine bağlı olarak değişir.
  3. Metin çerçevesi seçiliyken Nesne > Bir Alta Gönder seçeneğini kullanarak metin çerçevesini yerleştirin veya metin çerçevesini Katmanlar panelinde taşıyarak dört düğmenin arkasında, büyük dikdörtgenin ise önünde görüntülenmesini sağlayın.
  4. Kaydırma Efektleri panelindeki Hareket onay kutusunu etkinleştirin. T tutamacını sürükleyerek veya bir değer girerek temel konumu ayarlayın. Örnek sitede, temel konum, yerleştirilen görüntü (ampul grafiği) için kullanılan 4979 piksel değerine ayarlanmıştır.
  5. İlk Hareket bölümünde, metin çerçevesini sayfa kaydırma hızının yarım misli hızda (0,5) sola doğru hareket edecek şekilde ayarlayın. Diğer tüm alanları 0 değerine ayarlayın.
Metin çerçevesi, daha düşük bir hızda sola doğru (dikdörtgenin ve yerleştirilmiş görüntünün aksi yönünde) hareket edecek şekilde ayarlanmıştır.
Metin çerçevesi, daha düşük bir hızda sola doğru hareket edecek şekilde ayarlanmıştır.

Temel yığınlanmış menü bölümü tamamlandı. Ancak ekleyebileceğiniz bir tasarım öğesi daha var. Tıpkı Kayar Menü örneğindeki hareket eden dikdörtgenlerde olduğu gibi, büyük dikdörtgenin sağ alt köşesine çeşitli dönüşlü dikdörtgenler ekleyerek verev çizgili bir efekt oluşturabilirsiniz.

  1. Dikdörtgen aracını kullanarak farklı genişliklerde birkaç dikdörtgen çizin. Dikdörtgenleri, tarayıcı dolgusuna uygulanan arka plan rengiyle aynı renge ayarlayın. Böylece büyük dikdörtgen sağa doğru hareket ederek bu dikdörtgenlerin arkasında sabitleninceye dek dikdörtgenler görünmez. Dilerseniz verev dikdörtgenleri bir grup haline getirerek tek bir öğe ile çalışabilirsiniz.
Bir dizi dikdörtgeni hareket ettirerek büyük dikdörtgenin sağ alt köşesi boyunca verev çizgiler oluşturun.
Bir dizi dikdörtgeni hareket ettirerek büyük dikdörtgenin sağ alt köşesi boyunca verev çizgiler oluşturun.

  1. Gerekirse Katmanlar panelini kullanarak veya Nesne > En Alta Gönder'i seçerek büyük dikdörtgeni sayfadaki diğer tüm öğelerin arkasında görünecek şekilde yerleştirebilirsiniz.
  2. Önizleme'yi tıklatıp veya sayfayı bir tarayıcıda önizleyip sayfayı kaydırdığınızda yığınlanmış menünün yerine sabitlenip sabitlenmediği kontrol ederek kaydettiğiniz ilerlemeyi düzenli aralıklarla test etmeyi unutmayın. Test işlemlerinizi tamamladığınızda Muse'a geri dönün. 

Hareketli Arka Plan

Hareketli bir arka plan efekti oluşturmak için uzun bir sayfanın boyunu kaplayan döşeli arka plan görüntüleriyle doldurulmuş büyük dikdörtgenler dizisi oluşturabilirsiniz. Bu örnekte, hareket ayarları uygulamak için Dolgu menüsündeki Kaydır sekmesi (Kaydırma Efektleri panelindeki Hareket sekmesi yerine) kullanılmaktadır.

Benzer şekilde bir hareketli arka plan efekti oluşturmak için aşağıdaki adımları izleyin:

  1. Tasarım görünümünde Sayfa > Sayfa Özellikleri'ni seçin. Min. Yükseklik alanını yüksek bir değere ayarlayın. Bu örnek sitede, sayfanın minimum yüksekliği 6254 piksel olarak ayarlanmıştır.

Not:

Bu örnekte, sayfa dikdörtgenlerle kaplandığı için bir tarayıcı dolgu rengi ayarlayıp ayarlamamak önemli değildir. Sayfa dolgu rengini yok olarak ayarlayın.

  1. Sayfanın başında Dikdörtgen aracını kullanarak büyük bir dikdörtgen çizin. Bu örnek sitede, dikdörtgenin genişliği 1159 piksel, yüksekliği ise 1312 pikseldir. Seçim aracını kullanarak dikdörtgeni sayfanın ortasına hizalayın ve her iki tarafını genişleterek tarayıcı penceresinin kenarlarından taşmasını sağlayın.
  2. Dikdörtgen seçiliyken Dolgu menüsünü kullanarak bir arka plan görüntüsü belirleyin. Sığdırma menüsünü Döşe ayarına getirerek görüntüyü döşeyin.
Döşenmiş bir arka plan görüntüsünü dikdörtgenin dolgusu olarak ayarlayın.
Döşenmiş bir arka plan görüntüsünü dikdörtgenin dolgusu olarak ayarlayın.

  1. Dilerseniz Efektler menüsünü kullanarak bir gölge efekti oluşturabilir ve dikdörtgeni çevreleyen belirgin bir kenarlık hazırlayabilirsiniz.
  2. Doldurulmuş dikdörtgen seçiliyken Dolgu menüsündeki Kaydır sekmesini seçin. Hareket onay kutusunu etkinleştirin ve T tutamacını tıklatıp sürükleyerek veya ilgili alana sayısal bir değer girerek temel konumu belirleyin. Örnek sitede, temel konum 512 piksel olarak ayarlanmıştır. Dilerseniz tutamacı daraltarak dikdörtgenin üst köşesiyle hizalayabilirsiniz.
  3. İlk Hareket bölümünde, yönü aşağı ve sola doğru hareket edecek, her iki hızı da kaydırma hızının 0,2 misli olacak şekilde ayarlayın. Son Hareket bölümünde aynı ayarları tekrarlayın. 
Dolgu menüsündeki Kaydır sekmesinde Hareket ayarlarını belirleyin.
Dolgu menüsündeki Kaydır sekmesinde Hareket ayarlarını belirleyin.

  1. 2. - 6. adımları tekrarlayarak başka bir dolgulu dikdörtgen oluşturun. Yeni dikdörtgeni doğrudan oluşturduğunuz ilk dikdörtgenin üzerine yerleştirin. Böylece tarayıcı dolgusu alanlarından hiçbirinin alttan görünmemesini ve iki dikdörtgen arasında hiç boşluk kalmamasını sağlamış olursunuz. Yeni dikdörtgeni farklı bir döşenmiş görüntülü arka plan dolgusuyla doldurun.
  2. 7. adımı tekrarlayarak ikinci dikdörtgenin hemen altına yerleştireceğiniz üçüncü bir dikdörtgen daha oluşturun. Dolgu menüsünü kullanarak farklı bir döşenmiş arka plan görüntüsü oluşturun. Tüm dikdörtgenleri görmek ve sayfada dikey olarak hizalamak için Görünüm menüsünü kullanarak sayfayı uzaklaştırmak işe yarayabilir.
Sayfayı uzaklaştırın ve Seçim aracını kullanarak üç dikdörtgeni dikey olarak hizalayın.
Sayfayı uzaklaştırın ve Seçim aracını kullanarak üç dikdörtgeni dikey olarak hizalayın.

Not:

Örnek sitede, üçüncü dikdörtgen ilk ikisinden uzundur. Tutamaçları sürükleyerek çoğaltılan üçüncü dikdörtgenin yüksekliğini artırabilir veya dördüncü bir dikdörtgen oluşturarak sayfanın en altında kalan alanı doldurabilirsiniz.  

  1. İkinci dikdörtgen seçiliyken Dolgu menüsündeki Kaydır sekmesini seçin. İlk Hareket bölümünde, dikdörtgeni kaydırma hızının 0,3 misli hızda sağa doğru hareket edecek şekilde ayarlayın. Son Hareket bölümünde, aynı ayarları dikdörtgenin kaydırma hızının 0,3 misli hızda sağa doğru hareket etmesini sağlayacak şekilde belirleyin. Her iki dikey yön ayarını 0 olarak bırakın.
İlk Hareket ve Son Hareket ayarlarını ikinci dikdörtgen sağa hareket edecek şekilde ayarlayın.
İlk Hareket ve Son Hareket ayarlarını ikinci dikdörtgen sağa hareket edecek şekilde ayarlayın.

  1. Üçüncü dikdörtgeni seçin ve Dolgu menüsündeki Kaydır sekmesinde ayarları güncelleyin. İlk Hareket bölümünü, kaydırma hızının 0,25 misli hızda yukarıya ve kaydırma hızının 0,6 misli hızda sola hareket edecek şekilde ayarlayın. Üçüncü dikdörtgen için Son Hareket bölümünde aynı ayarları belirleyin.
  2. Dosya > Sayfayı Tarayıcıda Önizle'yi seçerek sayfayı test edin. Sayfayı kaydırarak döşenmiş dikdörtgenlerin sayfa en alta kaydırılana kadar verev olarak hareket edip etmediğini kontrol edin. Sayfayı yukarı kaydırdığınızda da dikdörtgenler harekete devam edecektir.
  3. Tarayıcıyı kapatın ve Muse çalışma alanına geri dönün.

Maskeler

Bu örnekte, animasyonun yerine oturması için bir çubuk grafik görüntülenir. Grafikteki çubukların üzerinde ve arkasında örülen pembe bir grafik yukarıya doğru uzanır. Grafikteki çubuklar tablonun altından itibaren uzuyor gibi görünseler de aslında bunlar büyük beyaz dikdörtgenlerin arkasından görünen, hareket kaydırma efektleri uygulanmış düz renkli dikdörtgenlerdir (sayfanın arka plan rengiyle aynı düz beyaz renkle dolguludur).

Bu örnekte, kaydırma efektleriyle bağlantılı pek çok teknik kullanılır. Öğeler, Katmanlar paneli kullanılarak birbirlerinin önüne ve arkasına yerleştirilir. Beyaz dikdörtgenler grafik öğelerinin üstüne çizilir. Beyaz dikdörtgenler çubuk grafiğin üzerini kaplarken çubuklar ve ok maskelenir ve görünümden gizlenir. Beyaz dikdörtgenler ve tablo, sayfa kaydırıldıkça sabit kalmaları için hareket kaydırma efektlerinde 0 ayarını kullanır. Alta katmanlanan çubuklar ve pembe ok grafiğine hareket kaydırma efektleri uygular ve grafik çubuğu birleştikçe bunların yukarı doğru hareket ederek görünüme gelmeleri sağlanır.

Benzer şekilde bir maske efekti oluşturmak için aşağıdaki adımları izleyin:

  1. Tasarım görünümünde Sayfa > Sayfa Özellikleri'ni seçin. Min. Yükseklik alanını yüksek bir değere ayarlayın. Bu örnek sitede, sayfanın minimum yüksekliği 6076 piksel olarak ayarlanmıştır.
  2. Sayfa ve Tarayıcı Dolgusunu düz beyaz renge ayarlayın (tercihinize göre başka bir renk de kullanabilirsiniz, fakat bu rengi daha sonra maske dikdörtgenlerde de kullanmayı unutmayın).
  3. Dikdörtgen aracını kullanarak sayfada büyük bir dikdörtgen çizin. Örnek sitedeki dikdörtgenin genişliği 804 piksel, yüksekliği ise 489 piksel olarak ayarlanmıştır.
  4. Dikdörtgenin dolgu rengini yok olarak ayarlayın. Dilediğiniz bir kontur rengi seçin. Kontur menüsünde, dikdörtgenin sol ve alt taraflarını ağırlık değeri 20 olan bir kontur görüntülenecek şekilde ayarlayın. Dikdörtgenin sağ ve üst taraflarında kontur gösterilmeyeceği için değerin 0 olarak ayarlanması gerekir. Böylece çubuk grafik tablosunun temeli oluşturulmuş olur.
     
Kontur menüsünü kullanarak dikdörtgenin sol ve alt taraflarına bir kontur ayarlayın.
Kontur menüsünü kullanarak dikdörtgenin sol ve alt taraflarına bir kontur ayarlayın.

  1. Dikdörtgen seçiliyken Kaydırma Efektleri panelindeki Hareket sekmesini açın. Temel konumu ayarlayın ve dört alanın hepsine 0 değerini girin. Bu ayar, dikdörtgenin temel konuma ulaşmadan önce veya ulaştıktan sonra hareket etmeyeceğini ifade eder, dolayısıyla öğe sabit şekilde kalacaktır.
Dikdörtgeni sayfaya "iğnelemek" için bütün alanlara 0 girin.
Dikdörtgeni sayfaya "iğnelemek" için bütün alanlara 0 girin.

  1. Dikdörtgen aracını kullanarak iki büyük dikdörtgen çizin. Birinci dikdörtgeni çizerken tablonun sol tarafına hizalayın. Bu örnek sitede, dikdörtgenin genişliği 657 piksel, yüksekliği ise 1810 pikseldir.
  2. İkinci dikdörtgeni tablonun alt kısmına çizin ve alt kenarına hizalayın. Bu örnek sitede, dikdörtgenin genişliği 1002 piksel, yüksekliği ise 1541 pikseldir.
  3. Her iki dikdörtgenin dolgu rengini beyaz (veya tarayıcı dolgusu için kullandığınız renge), kontur değerini ise 0 olarak ayarlayın. Seçim aracını kullanarak dikdörtgenleri tablonun iki kenarıyla hizalayın.
İki büyük dikdörtgeni sola, grafik tablosunun altına yerleştirin.
İki büyük dikdörtgeni sola, grafik tablosunun altına yerleştirin.

  1. Dikdörtgenler seçiliyken sağ tıklatıp Nesne > Grup'u seçin ve iki maske dikdörtgeni bir arada gruplandırın.
  2. Dikdörtgen grubu seçiliyken Kaydırma Efektleri panelindeki Hareket sekmesini açın. Temel konumu belirleyin (örnekte temel konum 1516 piksel olarak ayarlanmıştır) ve dört alanın hepsine 0 girin. Bu ayar, beyaz dikdörtgen grubunun temel konuma ulaşmadan önce veya ulaştıktan sonra hareket etmeyeceğini ifade eder. Grup, tıpkı grafikteki dış tablo gibi yerinde sabit kalır.
  3. Katmanlar panelini kullanarak grubu geçici olarak gizleyip kilitleyin.
  4. Grubun alt kısmındaki boşluğa kaydırın ve Dikdörtgen aracını kullanarak her biri aynı genişlikte beş dikdörtgen çizin. Bu örnek sitede, çubukların hepsinin genişliği 74 piksel olarak ayarlanmıştır, fakat yükseklikleri farklıdır. Örnekteki beş dikdörtgenin yükseklikleri soldan sağa doğru 141, 188, 292, 444 ve 583 pikseldir. Dikdörtgenlerin tümü grafik tablosunun sol ve alt köşelerini vurgulayan konturla aynı yeşil renkle doldurulmuştur.
Beş dikdörtgeni sayfa boyunca kademeli olarak yerleştirin.
Beş dikdörtgeni sayfa boyunca kademeli olarak yerleştirin.

  1. Dikdörtgenlerin yerleri (soldan sağa) X ve Y değerlerine göre aşağıda verilmiştir:
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
  2. Ardından, soldaki dikdörtgenden başlayıp sağa doğru ilerleyerek dikdörtgenleri birer birer seçin. Her birini seçin, Kaydırma Efektleri panelindeki Hareket onay kutusunu etkinleştirin ve aşağıdaki temel konumları ayarlayın:
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
  3. Tüm dikdörtgenler seçiliyken, Kaydırma Efektleri panelindeki ayarları güncelleyerek İlk Hareket bölümünü kaydırma hızının 1 misli hızda hareket edecek şekilde ayarlayın. Diğer tüm alanları 0 değerine ayarlayın.
     
Kaydırma Efektleri panelinde beş dikdörtgenin hareket değerlerini aynı anda ayarlayın.
Kaydırma Efektleri panelinde beş dikdörtgenin hareket değerlerini aynı anda ayarlayın.

  1. Sayfaya saydamlık içeren bir PNG yerleştirin. Bu örnek sitede, PNG dosyası yukarı doğru zikzak çizerek uzanan bir pembe ok grafiğidir. Bu örnekte kullanılan PNG'nin genişliği 695, yüksekliği ise 443 pikseldir. PNG'yi sayfaya yerleştirdikten sonra X: 78 ve Y: 3427 değerlerindeki yerine taşıyın.
  2. Katmanlar panelinde, PNG dosyasını (soldan itibaren) ilk ve üçüncü çubuk dikdörtgenlerin altında, ikinci, dördüncü ve beşinci çubukların ise üstünde görünecek şekilde yerleştirin.
Katmanlar panelini kullanarak PNG ok görüntüsünü grafikteki çubuklar arasında dalga çizecek şekilde yerleştirin.
Katmanlar panelini kullanarak PNG ok görüntüsünü grafikteki çubuklar arasında dalga çizecek şekilde yerleştirin.

  1. Ok görüntüsü seçiliyken, Kaydırma Efektleri panelindeki Hareket sekmesini etkinleştirin. Temel konumu ayarlayın (temel konum örnekte 3238 piksel olarak ayarlanmıştır). İlk Hareket bölümünde, yukarı ve sağ hareket alanlarını kaydırma hızının 0,25 misli hızda hareket edecek şekilde ayarlayın. Son Hareket bölümündeki her iki alanı 0 olarak ayarlayın.
Kaydırma Efektleri panelinde hareket ayarlarını güncelleyin.
Kaydırma Efektleri panelinde hareket ayarlarını güncelleyin.

  1. Katmanlar panelinde, daha önce gizleyip kilitlediğiniz beyaz dikdörtgenler grubunun kilidini açın ve etkinleştirin. Grubu diğer öğelerin üstüne taşıyın. Böylece sayfadaki diğer içeriklerin üstünde görünecektir. Grup en üstte olduğu için bir maske görevi görecek ve tablonun çerçevesi içinde hareket ettiklerinde çubukları ve ok grafiklerini gösterecektir.
  2. Dosya > Sayfayı Tarayıcıda Önizle'yi seçerek sayfayı test edin. Sayfayı kaydırın ve çubuk grafik öğelerini tablonun içinde görünüme girene dek gizleyen çubukları maskeleyen iki beyaz dikdörtgen yerlerine otururken çubuk grafik tablosunun nasıl göründüğünü kontrol edin.
  3. Tarayıcıyı kapatın ve Muse çalışma alanına geri dönün.

Kaydırma efektleri kullanılarak tasarlanan site örnekleri

Kaydırma efektleri özelliğinin sunduğu işlevleri görmek için Demential Lab'in web sitesini inceleyin.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi