Adobe Muse'da nesnelerle çalışma

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

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. Aç'ı 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.

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.

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

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

3. 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.
4. 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.
5. 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.
6. 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.

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.

3. 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.
4. 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.

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

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

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

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

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

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

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

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.

2. Sol, Sağ, Üst ve Alt Dolgu özelliklerinin değerlerini belirleyin. Farklı değerler girmek istiyorsanız  düğmesinin seçimini kaldırın.

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

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