Adobe Muse'da çeşitli nesneleri organize etme, yönetme ve dönüştürme hakkında bilgi edinin. Adobe Muse'da görüntüleri optimize etme hakkında bilgi için makaleyi okumaya devam edin.

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ı.

Adobe Muse'daki nesneler, içeride oluşturulan ya da harici kaynaklardan içe aktarılan tasarım öğeleri içerir. Görüntüler, metin, görüntü kareleri ve daha fazlası web sayfasına eklenebilir ve Adobe Muse'daki çeşitli araçlar kullanılarak değiştirilebilir.

En sık kullanılan iş akışlarından biri, Adobe PhotoShop'ta düğme oluşturmak ve içe aktarmaktır. Adobe Muse bunun için Photoshop'ta oluşturulan katmanları ve katman kompozisyonlarını tanır. Adobe Muse, bu katmanları web sitenizdeki düğmenin Durumları olarak ayarlamanızı sağlar.

Web sayfası tuvaline yerleştirilen nesneler için web sitesinin tasarım ihtiyaçlarına uygun dönüştürmeler ekleyebilirsiniz. Ayrıca iç içe geçmiş öğeleri aralıklandırmak için uygun dolgu ve cilt payı özelliklerini eklemek üzere bir nesneyi yalıtabilirsiniz.

Adobe Muse projelerinde görüntüler kullanma

Adobe Muse projelerine görüntü çerçeveleri yerleştirme

Görüntü Çerçevesi aracını tıklatarak görüntü çerçevelerini doğrudan Adobe Muse projelerinize yerleştirebilirsiniz. Araçlar panelinden Görüntü Çerçevesi aracını tıklatın ve ardından projenizde gerekli konumu tıklatın.

  1. Araçlar panelinden Dikdörtgen Çerçeve aracını veya Elips Çerçeve aracını tıklatın.

    Adobe Muse'da görüntü çerçevesi aracı
    Adobe Muse'da dikdörtgen ve elips görüntü çerçevelerini sürükleyip bırakın.

  2. Görüntü çerçevesi aracını tıklatın ve görüntü çerçevesini projenize yerleştirmek için sürükleyin.

    Birkaç görüntü çerçevesini tıklatıp projenize yerleştirmeye devam edebilirsiniz. Görüntü çerçevelerini tasarım ihtiyaçlarınıza uygun şekilde yeniden boyutlandırabilir ve taşıyabilirsiniz.

    Çerçeveyi renkle doldurabilir veya çerçeveye bir görüntü yerleştirebilirsiniz. Görüntü yerleştirmek için bir görüntüyü sürükleyip çerçeveye bırakın. Görüntü, çerçeveye sığacak şekilde yeniden boyutlandırılır.

    Dikdörtgen ve elips görüntü çerçeveleri
    Dikdörtgen ve elips görüntü çerçeveleri

Sayfaya tek bir görüntü yerleştirme

Muse çalışma alanı, ilk önce yerleştirilen görüntüyü yükleyip ardından bu görüntünün görünmesini istediğiniz sayfayı tıklatarak işlem yapılan Illustrator ve InDesign'a benzer şekilde çalışır. Doğrudan sayfaya yerleştirerek bir görüntü dosyası eklemek için aşağıdakileri yapın:

  1. Dosya > Yerleştir'i seçin veya Command-D (Mac) ya da Control-D (Windows) klavye kısayollarını kullanarak İçe Aktar iletişim kutusunu açın.
  2. Örnek dosyalar klasöründe made-with-muse.png adını taşıyan dosyayı bulup seçin. 'ı tıklatarak dosyayı açın ve İçe Aktar iletişim kutusunu kapatın.

Görüntüyü yerleştirmek için sayfanın alt kısmını bir kez tıklatın. Bu örnekte, görüntüyü tam boyutlu olarak yerleştirmek istediğimiz için sadece bir kez tıklatmak yeterlidir. Ancak, yerleştirilen görüntünün boyutlarını değiştirmek istediğinizde, görüntüyü tıklatıp sürükleyerek belirli bir boyutta ölçeklendirebilirsiniz. 

Seçim aracını kullanarak görüntüyü döşenmiş altbilgi dikdörtgeninin dikey yönde merkez noktasına sürükleyin. Bu işlemi yaptığınızda kırmızı kılavuzlar ve turkuaz renkli ölçüm kutularının görüntüyü merkez noktaya göre hizalamanıza yardımcı olmak için kısa bir süre göründüğünü fark edeceksiniz.

Bu değişiklikler yapıldıktan sonra altbilgi bölümü neredeyse tamamlanmış olur.

Adobe Muse'da görüntü yerleştirme
Altbilgi, üst kısımda merkeze hizalı şekilde yerleştirilmiş görüntü ile döşenmiş bir arka plan görüntüsü içeren tek bir dikdörtgenden oluşur.

Bir siteyi yayınlarken veya dışa aktarırken Muse görüntüleri nasıl en iyi hale getirir?

Baskıya hazır görüntüleri de Adobe Muse'a yerleştirebilirsiniz. Muse, bu görüntüleri web için uygun bir formata dönüştürür. Ancak görüntüleri web için uygun hale getirmek, genellikle görüntüyü sıkıştırarak görüntü kalitesinden ödün vermek anlamına gelir. Web'e uygun olmayan görüntülerin Muse'a yerleştirilmesi, otomatik sıkıştırma yapılmasına sebep olur. Bir siteyi yayınlar veya dışa aktarırsanız ve otomatik sonuçlardan memnun kalmazsanız kendinize ait web'e uygun görüntüleri Photoshop veya Adobe Fireworks® yazılımlarında elle oluşturup en iyileştirerek denemeler yapabilirsiniz. Orijinal görüntüleri silin ve yeni en iyileştirilmiş görüntüleri sayfalara yerleştirin, ardından sitenizi yeniden yayınlayın veya dışa aktarın.

Muse'da bir görüntü üzerinde yaptığınız kırpma, yeniden boyutlandırma veya eğimler, gölgeler ve ışımalar ekleme gibi değişikliklerin Muse'un görüntüyü sizin yerinize yeniden oluşturmasına ve otomatik olarak sıkıştırmasına yol açacağını unutmayın. En iyileştirme işlemi üzerinde daha fazla kontrol sahibi olmak istiyorsanız Photoshop veya Fireworks kullanarak bir görüntüye efektler ekleyebilir, dosyayı bir görüntü düzenleme programında en iyileştirebilir, ardından görüntüyü Muse'a yerleştirerek sıkıştırma düzeyini kendiniz ayarlayabilirsiniz. PNG, JPG veya GIF dosyalarını dışa aktarmaktansa, Photoshop'tan alınan PSD dosyalarını doğrudan Muse'a yerleştirebilirsiniz. Fakat bu işlem de Muse'un kendi otomatik sıkıştırma algoritmalarını kullanarak otomatik olarak yeni bir görüntü dosyası oluşturmasına sebep olabilir.

Görüntüleri web'de görüntülemek için en iyileştirme

Bağlantılı bir dosya çok yüksek bir çözünürlükle yerleştirildikten sonra sayfada çok daha küçük bir boyuta ölçeklendiğinde dışa aktarma hataları ve dışa aktarma işlemlerinde yavaşlama görülebilir. Bu, önerilen bir iş akışı değildir. Tam boyutlu (2000 pikselden fazla) görüntüler tekrar tekrar yerleştirilerek bir tasarıma sığacak şekilde ölçeklendiğinde bu sorunlar daha da belirgin bir hal alır.

Çok büyük bir görüntü dosyası yerleştirirseniz Muse boyutu otomatik olarak sınırlar ve görüntü genişliğini 2048 olarak yeniden ölçekler. Varlıklar panelinde imlecinizi bir varlığının adının üzerine getirdiğinizde, bir araç ipucu yerleştirilen görüntünün orijinal boyutunu ve yeniden örneklenen görüntü boyutunu (maksimum boyut sınırı içinde sığacak şekilde ölçeklenmiş boyut) gösterir.

Sayfalara yerleştirmeden önce bir siteye ait web grafiklerini bir görüntü düzenleme programında yeniden boyutlandırıp en iyileştirmek en kullanışlı yöntemdir. Aşırı büyük boyutlara sahip görüntüler yerleştirmek, .muse dosyasının gerekenden büyük bir dosya boyutuna sahip olmasına yol açabilir. .muse dosyası, web'de görüntüyü görüntülemek için gerekenden fazla piksel verisini işlemek zorunda kalır. Bu durum, siteleri dışa aktarırken ve yayınlarken daha uzun işleme sürelerine yol açabilir. Bazı durumlarda, çok büyük bir .muse dosyası, dışa aktarma ya da yayınlama işlemi sırasında tüm dosyaları yeniden boyutlandırmayı ve en iyileştirmeyi denediğinizde zaman aşımına uğrayabilir. Zaman aşımı hataları oluşabilir.

Bu sorunu, varlık adlarını sağ tıklatıp Varlık Boyutunu En İyileştir'i seçtikten sonra ölçeklenen görüntünün görüntülenmesi için gerekenden fazla veriyi kaldırarak çözebilirsiniz.

En iyileştirilmiş bir görüntüyü bir tasarım içinde daha büyük görünecek şekilde ölçeklerseniz Artı Üst Örneklenmiş varlık hatasıyla karşılaşabilirsiniz. Bu sorunu çözmek için Daha Büyük Boyut İçe Aktar'ı seçerek ölçeklenen görüntüyü kabul edilebilir şekilde görüntülemek için gereken ekstra görüntüyü geri alabilirsiniz.

Yer tutucu şekilleri çizme

Bir yer tutucu şekli; görüntü, metin veya renkle doldurabileceğiniz bir elips, dikdörtgen veya çokgen olabilir.

  1. Araçlar panelinden Dikdörtgen aracını veya Elips aracını seçin.

    Adobe Muse'da yer tutucu şekiller yerleştirme
    Araç çubuğundan Dikdörtgen aracını veya Elips aracını seçin

  2. Dikdörtgen veya elips şeklini Adobe Muse projenize yerleştirmek için sürükleyin. 

    • Kare oluşturmak için Shift tuşunu basılı tutup Dikdörtgen aracını tıklatın.
    • Daire oluşturmak için Shift tuşunu basılı tutup Elips aracını tıklatın.

    Şekilleri grafikler, metin veya renkle doldurabilirsiniz.

  3. Nesne sığdırma özelliklerini ayarlamak için dikdörtgeni veya elipsi seçip Nesne > Sığdırma'yı tıklatın.

    Aşağıdaki Sığdırma seçeneklerinden birini kullanabilirsiniz:

    • İçeriği Orantılı Sığdır: İçeriği çerçeveye sığacak şekilde yeniden boyutlandırır ve içerik oranlarını korur. Çerçevenin boyutları değiştirilmez. İçerik ve çerçeve farklı oranlara sahipse boş alan oluşmasına neden olur.
    • Çerçeveyi Orantılı Sığdır: İçeriği tüm çerçeveyi dolduracak şekilde yeniden boyutlandırır ve içerik oranlarını korur. Çerçevenin boyutları değiştirilmez. İçerik ve çerçeve farklı oranlara sahipse çerçevenin sınırlayıcı kutusu tarafından bir miktar içerik kırpılır.
    Adobe Muse'da nesneler için içeriği orantılı olarak sığdırma
    İçeriği nesnelere orantılı olarak sığdırma

    Çerçeveyi nesnelere orantılı olarak sığdırma (Adobe Muse)
    Çerçeveyi nesnelere orantılı olarak sığdırma

Photoshop dosyasını rollover düğmesi olarak yerleştirme

  1. Dosya > Photoshop Düğmesi Yerleştir öğesini seçin. Görüntülenen Photoshop İçe Aktarma iletişim kutusunda PSD dosyasını bulun. Seç (Mac) veya 'ı (Windows) tıklatarak dosyayı seçin.

  2. Photoshop İçe Aktarma Seçenekleri iletişim kutusu açılır. Ayarların nasıl uygulandığını inceleyin. Menüleri kullanarak Photoshop dosyasındaki hangi katmanın düğmenin Normal Durumu (sayfa ilk yüklendiğinde düğmenin görünme şekli), Rollover Durumu (ziyaretçiler imleçlerini düğmenin üzerine getirdiğinde düğmenin görünme şekli) ve Fare Tuşu Basılı Durumu (ziyaretçiler tıklattığında düğmenin görünme şekli) olarak görüneceğini belirleyebilirsiniz. Üç durum menüsünde Photoshop katmanlarının adı görüntülenir ve minik resim görüntüleri, seçilen her bir katmanın nasıl görüneceğini görsel olarak gösterir.

  3. Bu örnekte, Photoshop katmanları düğme durumlarını görüntüleyecek şekilde gerektiği gibi sıralanmıştır. Menü ayarlarının değiştirilmesine gerek yoktur. Tamam'ı tıklatarak durumları varsayılan olarak düzenlendikleri şekilde kabul edin.

    Photoshop İçe Aktarma Seçenekleri iletişim kutusunu kullanarak varolan Photoshop katmanlarını dilediğiniz düğme durumlarıyla ilişkilendirin.
    Photoshop İçe Aktarma Seçenekleri iletişim kutusunu kullanarak varolan Photoshop katmanlarını dilediğiniz düğme durumlarıyla ilişkilendirin.

  4. A-Kalıp sayfasındaki üstbilgi alanının sağ tarafını bir kez tıklatarak Photoshop dosyasını orijinal boyutunda yerleştirin.

  5. Önizleme bağlantısını tıklatarak WebKit tabanlı resim oluşturma emülatörünü kullanın. A-Kalıp sayfasının görüntüsünü gözden geçirin. Sayfayı ilk görüntülediğinizde, düğmenin Normal Durumu görünür. İmleci düğmenin üzerine getirdiğinizde görünüm hafifçe değişir (kahverengi damla rengi daha açık bir renk alır); düğmeyi tıklattığınızda ise fare düğmesini basılı tuttuğunuz sürece beyaz metin açık kahverengi bir renk alır.

  6. Tasarım'ı tıklatarak Tasarım görünümüne dönün ve A-Kalıp sayfasını düzenlemeye devam edin.

Paylaş düğmesi, durumları beklenen şekilde görüntülemektedir. Bir sonraki bölümde, Paylaş düğmesini site navigasyonunun sağ tarafında bulunan damla görüntüsüyle hizalama yöntemleri açıklanacaktır.

Bir sonraki bölümde, kalıp sayfadaki altbilgi ve üstbilgi alanlarını belirleme yöntemleri açıklanacaktır.

Nesneleri tarayıcı penceresine iğneleme

Bir görüntü yerleştirerek veya başka bir yöntem kullanarak bir sayfaya resim eklerken resmi yerleştirmek için Seçim aracını ve ok tuşlarını kullanırsınız. Sayfa çevresinde taşınan resim, sayfada bulunan diğer öğelerle (görüntüler, metin ve medya) birlikte hareket eder. Diğer öğeleri de taşıyabilirsiniz, ancak sayfanın tamamı bir broşür veya poster davranışı sergiler. Sayfadaki öğeler tek bir düzlemde yer alır. Sayfa uzunsa (çok sayıda dikey içerik içeriyorsa) ve ziyaretçi sayfayı aşağı kaydırırsa görüntüleri sayfanın en üst kısmında göremez.

Bu, tıpkı web sitelerini görüntülerken iğnelenmiş nesneleri görmenize benzer; iğnelenmiş öğeler her zaman tek bir konumda görüntülenen “kalıcı” öğelerdir. Bunlar geri kalan sayfa içeriğinin üstünde gezinir.

İğnele aracını kullandığınızda, aslında görüntüyü sayfa akışından kaldırmış olursunuz. Görüntünün yerini diğer sayfa öğelerine göre belirlemek yerine, tarayıcıya göre belirli bir konuma ayarlamış olursunuz. İğnelenmiş görüntüler “yapışık” gibi görünürler ve kaydırılan diğer sayfa öğeleri her ne olursa olsun, her zaman tek bir noktada (sağ üst köşe veya alt kısma yakın bir konum gibi) kalırlar. Ziyaretçi tarayıcısının boyutunu değiştirdiğinde, iğnelenmiş görüntüler her zaman tarayıcı penceresine göre iğnelendikleri konumda kalırlar.

İğneleme işlevini, “görüntüyü sayfa tasarımından serbest bırakma” yolu olarak görebilir ve görüntüyü tıpkı bir panoya not iğnelermiş gibi tarayıcıya iliştirebilirsiniz. İğnelenmiş öğe, ziyaretçi tarayıcısının boyutunu değiştirdiğinde tarayıcıya göre iğnelendiği konumunu korur, ancak ziyaretçi sayfa içeriğini yatay ya da dikey olarak kaydırdığında hareket etmez.

İğnele aracını kullanmak için şu adımları uygulayın:

  1. Tasarım görünümünde A-Kalıp sayfası açıkken Seçim aracını kullanarak Facebook simgesini seçin.
  2. Kontrol panelindeki İğnele arabiriminde sağ üste iğneleme konumunu tıklatın. Bu ayar, öğeyi sağ üst köşesindeki geçerli konumuna göre "iğneler".
  1. 1. ve 2. adımları tekrarlayarak Google+ ve Twitter simge düğmelerini, sayfanın geri kalanı kaydırıldığında tarayıcı penceresinin içinde hareket etmeyecekleri şekilde sağ üst konumlarına iğneleyin.
  2. Plan'ı tıklatarak sayfa minik resimlerini görüntüleyin. Tüm sayfaların artık kalıp sayfaya eklemiş olduğunuz sosyal medya simgelerini içerdiğini göreceksiniz.
  3. Plan görünümünde food (yiyecek) sayfasını çift tıklatıp Tasarım görünümünde açın. Sayfa açıksa food sayfası sekmesini tıklatarak etkinleştirin. Dosya > Sayfayı Tarayıcıda Önizle'yi seçerek sayfayı bir tarayıcıda açın.
  4. Dessert (Tatlı) menü öğesini tıklatarak uzun sayfada Dessert menüsü bölümüne geçin. Diğer sayfa öğeleri kaydırılırken üç sosyal medya simgesinin iğnelendikleri için sayfanın sağ tarafındaki yerlerini koruduklarını göreceksiniz.
Adobe Muse sitelerinde nesneleri tarayıcı penceresine sabitleme
Nesneleri tarayıcı penceresine iğneleme

Nesne gruplarını tek bir öğe olarak davranmaları için gruplama yolları hakkında bilgi edineceğiniz Muse ile ilk web sitenizi oluşturma, 6. Bölüm kısmına geçin. Ayrıca, ziyaretçilere Katie's Cafe'nin yerlerini gösteren gömülü bir Google haritası ekleyerek Visit (Ziyaret Edin) sayfasını tamamlayacaksınız. Siteyi bitirdikten sonra siteyi (Business Catalyst ile desteklenen) bir barındırma sunucusuna yükleyip çevrimiçi olarak yayınlayarak ilerleme durumundaki çalışmanızı müşterileriniz ve iş arkadaşlarınızla paylaşma yolları hakkında bilgi alacaksınız.

Muse ile ilk web sitenizi oluşturma belgesinin 4. Bölümünde, bağlantı etiketleri ekleme ve bunları bir manuel Yatay Menü widget'ındaki menü öğelerine bağlama yöntemleri hakkında bilgi edindiniz. Ayrıca, öğeleri sayfaya iğneleyerek kaydırılmalarını engelleme yollarını öğrendiniz. Bunun yanı sıra ziyaretçilerin dosya indirebilmeleri için dosyalara bağlantılar eklemeyi gördünüz.

Bunların yanı sıra, içerik gruplarını sayfalara yapıştırmak için nesneleri gruplandırma ve gruplarla çalışma yöntemleri hakkındaki bilgilere de göz atabilirsiniz. Ayrıca, bu kez daha çok gömülü HTML ile çalışarak Visit (Ziyaret Edin) sayfasına etkileşimli bir Google haritası ekleyeceksiniz. Son olarak, bir Sık Kullanılan Simgesi ekleyerek ve deneme sitesini dahil olan barındırma sunucularında yayınlayarak sitenizin son rötuşlarını nasıl yapabileceğinizi öğreneceksiniz.

Nesneleri gruplandırma ve grupları tek bir birim olarak yapıştırma

Tıpkı InDesign ve diğer tasarım programlarında olduğu gibi, birden fazla nesneyi bir grup halinde birleştirerek bunları tek bir birim olarak ele alabilirsiniz. Bu bölümde, birden fazla öğeden (yerleştirilmiş görüntüler ve metin çerçeveleri) oluşan bir tasarım oluşturacak ve bu öğeleri gruplandırarak tek bir öğe halinde kolayca yerleştirme ve kopyalama yollarını göreceksiniz. Şu adımları uygulayın:

  1. Plan görünümünde, home (ana sayfa) sayfasının minik resmini çift tıklatarak sayfayı Tasarım görünümünde açın.
  2. Dosya > Yerleştir'i seçin. Örnek dosyalar klasöründe panel-open-bottom.png adlı dosyayı bulup seçin. Aç'ı tıklatarak İçe Aktar iletişim kutusunu kapatın ve ana sayfa sayfasının en alt kısmına yakın bir yeri (Işıklı Kutu Kompozisyonu widget'ının altı ile altbilginin üstü) bir kez tıklatarak grafiği tam boyutuyla yerleştirin.

PNG dosyası düşük opaklık değerine ayarlanmış olduğundan yarı saydam çiçek tasarımı, döşeme arka plan görüntüsünün hafifçe görünmesini sağlar.

  1. Tekrar Dosya > Yerleştir'i seçin. Bu kez, spoon-map.png adlı görüntüyü bulup seçin. Aç'ı tıklatın ve üst orta kısımdaki çiçek yaprağını bir kez tıklatarak yerleştirin.
  2. Kaşık görüntüsü seçiliyken, Option (Mac) veya Alt (Windows) tuşunu basılı tutarak kaşık görüntüsünü çoğaltın ve hemen orta noktanın sağındaki çiçek yaprağına sürükleyin. Bu eylemi bir kez daha tekrarlayarak ortadaki kaşık görüntüsünü çoğaltın ve çoğalttığınız kopyayı soldaki çiçek yaprağına sürükleyin. Seçim aracını kullanarak üç kaşığı aşağıdaki resimde gösterildiği gibi yerleştirin.
Üç kaşık görüntüsünü tasarımın en üst kısmındaki üç çiçek yaprağına yerleştirin.
Üç kaşık görüntüsünü tasarımın en üst kısmındaki üç çiçek yaprağına yerleştirin.

  1. Metin aracını kullanarak ortadaki çiçek yaprağına bir metin çerçevesi çizip şunu yazın:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

  1. Metin panelinde, aşağıdaki ayarları uygulayarak metni formatlayın:
    • Font: Droid Serif (veya herhangi bir serif fontu)
    • Font Boyutu: 14
    • Font Rengi: #222222  (5. bölümde katieblack olarak yeniden adlandırdığınız renk)
    • Font hizalama: Orta
    • Satır Aralığı: %120
  1. Ardından, sadece son iki satırı (haftanın günleriyle başlayan) seçin ve font rengini kırmızı (#A6342A) olarak ayarlayın.
  2. Seçim aracını kullanarak metin çerçevesini seçin. Option (Mac) veya Alt (Windows) tuşunu basılı tutarak metin çerçevesini çoğaltın ve hemen sağdaki, kaşık görüntüsünün üstünde bulunan çiçek yaprağına sürükleyin. Bu eylemi bir kez daha tekrarlayarak ortadaki metin çerçevesini çoğaltın ve çoğalttığınız kopyayı soldaki çiçek yaprağına sürükleyin. Seçim aracını kullanarak üç metin çerçevesini aşağıdaki resimde gösterildiği gibi üç kaşığın üst kısmında hizalanacak şekilde yerleştirin.
Adobe Muse'da nesneleri gruplandırma
Üç adresi, tasarımın üst üç çiçek yaprağında bulunan üç kaşığın üst kısmında görüntülenecek şekilde yerleştirin.

  1. Metin aracına geçin. Soldaki adres metnini seçin ve şu şekilde değiştirin:

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

  1. Metin aracını kullanarak sağdaki adres metnini seçin ve şu şekilde değiştirin:

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

Tasarım artık tamamlandığına göre, öğeleri seçip gruplandıralım.

  1. Seçim aracını kullanarak çiçek tasarımının tamamını tıklatıp sürükleyin. Yerleştirilen her iki çiçek görüntüsünün, üç kaşık görüntüsünün ve üç metin çerçevesinin seçildiğinden emin olun. Sağ tıklatıp açılan menüden Grup'u seçin. Dilerseniz Nesne > Grup'u da seçebilirsiniz.

Nesne grubunu gruplandırdıktan sonra, Kontrol Panelinin sol üst köşesinde bulunan Seçim Göstergesinde Grup sözcüğünün görüntülendiğini göreceksiniz.

  1. Seçilen grubu kopyalayın. Plan'ı tıklatarak Plan görünümüne geri dönün ve Visit sayfası minik resmini çift tıklatarak Tasarım görünümünde açın. Düzenle > Yerinde Yapıştır'ı seçerek öğe grubunun tamamını aynı konuma yerleştirin.

Bu kısa örnekten de anlayacağınız gibi, gruplar tamamladığınız bir tasarımı yeniden bir sayfaya yerleştirmek veya kopyalayıp başka bir sayfaya yapıştırmak için tasarımla tek bir öğe olarak çalışmak istediğinizde oldukça yararlıdır.

Bir tasarımı tamamladığınızda, gruplandırma işleminin yanı sıra Kilitle özelliğini de faydalı bulabilirsiniz. Bir grubu ya da seçilen öğe grubunu sağ tıklatın ve açılan bağlam menüsünden Kilitle'yi seçerek kilitleyin. (Dilerseniz Nesne > Kilitle'yi de seçebilirsiniz). Kilitleme işlevi, bir sayfadaki bitmiş öğeler artık seçilebilir durumda olmadığından bunları yanlışlıkla taşımanızı veya silmenizi önler. Daha sonra kilitli öğeleri güncellemeniz gerekirse Nesne > Sayfadaki Tümünün Kilidini Kaldır'ı seçin.

Çiçek tasarımını Visit (Ziyaret Edin) sayfasının alt kısmına yapıştırdıktan sonra sayfa içeriği kısmen tamamlanmış olur. Bir sonraki bölümde, Visit (Ziyaret Edin) sayfasını düzenlemeye devam ederek müşterilerin en yakındaki kafeyi bulmalarına yardımcı olacak etkileşimli bir harita arabirimi ekleyeceksiniz.

Animasyon eklemek için zengin medya içeriği yerleştirme

  1. Plan görünümünde, MasterFlash minik resmini çift tıklatarak sayfayı düzenlemek üzere Tasarım görünümünde açın. Daha önce A-Kalıp sayfasını çoğaltmış olduğunuz için statik logonun halen sayfada olduğunu göreceksiniz. Animasyon dikdörtgeninin yerini eşleştirmek için statik görüntüyü kullanmak iyi bir uygulamadır, ancak zengin medya öğesini gömdükten sonra yerleştirilen statik logoyu silmeyi unutmayın.

  2. Dosya > Yerleştir'i seçin. İçe Aktar iletişim kutusunda, Kevins_Koffee_Kart klasörüne gidin ve logo.swf adlı dosyayı seçin.

  3. SWF dosyasını, varolan logo görüntü dosyasının konumuyla eşleştirerek sol üst köşeye yerleştirin.

  4. Eski statik logoyu yerleştirdiğiniz yeni SWF penceresini hizaladıktan sonra statik logoyu seçip Delete tuşuna basarak silin.

  5. Ana Sayfa sayfasında yapılan yeni değişikliklerle tüm sitenin nasıl göründüğünü gözden geçirmek için Dosya > Siteyi Tarayıcıda Önizle'yi seçerek logonun farklı sayfalardaki görüntüsünü test edin. Siteyi yayınlamadan, bilgisayarınızda yerel olarak çalışabilir ve siteyi bir tarayıcıda önizleyerek site navigasyonunda sayfaları tıklatarak gezinebilirsiniz. Animasyon (SWF dosyası) bir kez görünecek ve Ana Sayfa sayfasında duracaktır. Diğer sayfaları tıklattığınızda yalnızca statik logo görüntülenir.

    Not:

    Dosya > Sayfayı Tarayıcıda Önizle'yi seçerseniz yeni tarayıcı penceresi Ana Sayfa sayfasını görüntülemek için daha hızlı yüklenecek, ancak yalnızca etkin (Ana Sayfa) sayfayı önizleyecektir. Web sitesinin tamamı yerine sitedeki tek bir sayfayı kontrol edecekseniz bu seçeneği belirleyin.

Aralık panelini kullanma

Aralık paneli, CSS dolgu ve Cilt Payı özelliklerinden yararlanmanızı sağlar. Dolgu, bir öğenin (sınır içindeki) içeriğinin çevresindeki alanı temizler. Dolgu, öğenin arka plan renginden etkilenir.

Üst, sağ, alt ve sol dolgu, ayrı özellikler kullanılarak birbirinden bağımsız olarak değiştirilebilir. Ayrıca tüm dolgu özelliklerini eşit oranda düzenleyerek eşitleyebilirsiniz.

  1. Adobe Muse'da Pencere > Aralık'ı seçerek Aralık panelini açın.
Adobe Muse'da Aralık panelini açma
Adobe Muse'da Aralık panelini açma

  1. Sol, Sağ, Üst ve Alt Dolgu özelliklerinin değerlerini belirleyin. Farklı değerler girmek istiyorsanız  düğmesinin seçimini kaldırın.
Aralık panelinden dolgu ve cilt payı ayarlarını yapılandırın.
Aralık panelinden dolgu ve cilt payı ayarlarını yapılandırın.

  1. Ayrıca Yatay ve Dikey Cilt Payı özelliklerini de belirleyebilirsiniz.

Dönüştür panelini kullanarak nesneleri ölçekleme ve döndürme

Adobe Muse, nesnelere 2D dönüştürme uygulamanızı sağlar. Nesneleri X ve Y eksenlerinde konumlandırabilir, ölçekleyebilir ve döndürebilirsiniz.

Dönüştür Panelindeki %100 Genişlik düğmesi, nesnelerin genişliğini %100'e ayarlamanızı sağlar. Ayrıca tarayıcının genişliği boyunca yayılması ve bilgisayarınızın ekranına sığması için ölçeklenebilir nesneler ayarlayabilirsiniz.

Seçilen bir nesneye dönüştürme işlemi uygulamak için şunları yapın:

  1. Adobe Muse'da Pencere > Dönüştür'ü seçin.
Adobe Muse'da Dönüştürme panelini açın.
Adobe Muse'da Dönüştürme panelini açın.

  1. Nesne seçiliyken şu dönüştürme işlemlerinden birini uygulayın:
    • Konum: Nesneyi web sayfasında istediğiniz bir konuma yerleştirmek için X ve Y değerlerini girin.
    • Ölçek: Nesneniz için Genişlik ve Yükseklik değerlerini girin. Ayrıca  düğmesini tıklatarak nesneyi eşit genişlik ve yükseklikte ölçekleyebilirsiniz.
    • Dönüş (): Nesne için dönüş açısını girin.
    • %100 Genişlik (): Nesnenin genişliğini %100'e ayarlayıp tarayıcının genişliği boyunca yayılarak sığmasını sağlayabilirsiniz.

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