Araçlar panelinden Dikdörtgen Çerçeve aracını veya Elips Çerçeve aracını tıklatın.
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.
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.
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.
Araçlar panelinden Dikdörtgen Çerçeve aracını veya Elips Çerçeve aracını tıklatın.
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.
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:
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.
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.
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.
Bir yer tutucu şekli; görüntü, metin veya renkle doldurabileceğiniz bir elips, dikdörtgen veya çokgen olabilir.
Araçlar panelinden Dikdörtgen aracını veya Elips aracını seçin.
Dikdörtgen veya elips şeklini Adobe Muse projenize yerleştirmek için sürükleyin.
Şekilleri grafikler, metin veya renkle doldurabilirsiniz.
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:
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 Aç'ı (Windows) tıklatarak dosyayı seçin.
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.
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.
A-Kalıp sayfasındaki üstbilgi alanının sağ tarafını bir kez tıklatarak Photoshop dosyasını orijinal boyutunda yerleştirin.
Ö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.
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.
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:
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.
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:
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.
Katie's Cafe
Noe Valley
123 Elizabeth Street
MON–FRI 6AM–10PM
SAT–SUN 7AM–10PM
Katie's Cafe
Laurel Heights
800 Spruce Street
MON–FRI 5AM–12AM
SAT–SUN 9AM–1AM
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.
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.
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.
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.
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.
SWF dosyasını, varolan logo görüntü dosyasının konumuyla eşleştirerek sol üst köşeye yerleştirin.
Eski statik logoyu yerleştirdiğiniz yeni SWF penceresini hizaladıktan sonra statik logoyu seçip Delete tuşuna basarak silin.
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.
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 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.
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: