Adobe Muse Grafiklerle Çalışmak

... konulu sunumlar: "Adobe Muse Grafiklerle Çalışmak"— Sunum transkripti:

1 Adobe Muse Grafiklerle Çalışmak
Yrd. Doç. Dr. Doğan AYDOĞAN

2 Sayfaya Resim Eklemek Dosya Menüsü-Yerleştir komutu ile bilgisayarımızdaki resimleri sayfamıza ekleriz. Öncelikle resim eklemek istediğimiz sayfayı ya da kalıbı tasarım görünümünde açmalıyız. Kırpma aracı ile resmin fazlalıklarını yok ederek, sayfamızda istediğimi şekilde görünmesini sağlarız. Resimleri olduğu gibi sayfaya yerleştirebileceğimiz gibi, fare içlerine yerleştirileceği bir pencerede oluşturabiliriz. Shift – tuşu yardımı ile birden çok nesne seçebiliriz. Ok tuşları yardımı ile resimleri sayfa içinde taşıyabiliriz. Bir resmi sağ tıklayıp, «Görüntüyü Değiştir» komutu ile o resmi başka bir resim ile değiştirebiliriz.

3 Sayfaya birden çok görsel nesne eklediğimizde ayarlar panelindeki hizala sekmesini kullanarak bu nesneleri kolayca hizalayabiliriz.

4 VARLIKLAR PANELİ İLE ÇALIŞMAK
Sitemizde yer alan bütün unsurlar «Varlıklar» Panelinde listelenmektedir. Buradan nesneye sağ tıklayarak farklı denetimler gerçekleştirebiliriz. Bu komutlar: Yeniden Bağla Nesnenin bilgisayarda yerinin değişmesi, ya da kaybolması durumunda yeni dosya konumunu belirlemek için kullanılır. Varlığa Git Nesneyi çalışma sayfamızın içinde bulur ve bizi oraya götürür. Bağlatıyı Göm Orjinali Düzenle Dosyanın orjinalini bir tasarım programında düzenlenmek üzere açar. Explorerda Göster Tam Yol Kopyala Görüntü Özelliklerini Düzenle

5 Resimleri Düzenlemek Bir resmi seçtiğimizde etrafında bir kutu belirir. Bu kutuyu boyutlandırarak resimleri otomatik olarak düzenleyebiliriz. Ya da araç çubuğunun sağ tarafından düzenleme panelerini açarak boyut, koordinat ve döndürme gibi özellikleri kontrol edebiliriz. (Araç çubuğunda (X) ya da (Y) koordinat düğmesine tıklayınca düzenleme paneli açılır. ) Bir veya daha fazla resmi seçip araç çubuğundan değişik ayarlar uygulayabiliriz. (Gölge, kenar çizgisi, saydamlık v.b.) Adobe Muse ve Adobe Photoshop programları paralel çalışabilir. Görselleri photoshopta açıp, değişikliği kaydedip, Muse programında otomatik olarak güncelleyebiliriz.

6 Görüntü Özellikleri Görüntülere iki nedenle açıklama yazarız. Arama motorlarının o görüntünün ne ile ilgili olduğunu bilmesi ve görme engellilerin bilgisayar kullanımına yönelik yapılan programların o resmin içeriğini okuyabilmesi. Resmi sağ tıklayıp görüntü özelliklerini düzenle sekmesinden bu özelliğe ulaşırız. Araç İpucu – Kişiler fare imlecini resmin üstüne getirdiğinde, baloncuk yoluyla açılacak olan resim ismidir. Alternatif Metin – resmin içeriğini arama motorlarına ve görme engellilere açıklayan metindir.

7 Arkaplana Resim Eklemek
Sayfamızın arka planına bir resim ekleyebiliriz. Eğer tüm sayfaların arkasında aynı resim olsun istersek kalıp tasarımının arkasına bir resim ekleriz. Ayarlar sekmesinde tarayıcı dolgusu sekmesinden, görüntü ekle komutu ile arka plana bir resim atarız.

8 Grafikler Çizmek Muse Programında kare diktörtgen, köşeleri oval kare ve diktörgen ve çember çizilebilir. Bunların dışındaki şekiller HTML dilinde sorun çıkarmaktadır. Bunların tamamı diktörtgen aracı ile çizilir. Shift tuşuna basılı tutarak bir diktörtgen çizersek, kare oluşacaktır. Kare veya diktörtgenin köşelerini ayarlar panelinden ovalleştirebiliriz. Bir kareyi seçip, ovalleştirme aracını mümkün olan en yüksek ovallik noktasına taşırsak çember oluşur.

9 Nesneleri Düzenlemek Nesneleri oluşturduktan sonra Ayarlar panelinden, koordinatlar sekmesi aracılığı ile aktifleştirdiğimiz düzenleme paneli aracılığı ile nesnelerimiz üzerinde kontroller uygulayabiliriz. Nesnenin genişlik ve yüksekliğini kontrol eder. Nesnenin sayfadaki koordinatlarını kontrol eder. Nesneyi sayfa genişliğinde genişletir. Düğmeler, galeriler gibi kapsayıcı unsurlarda işlevseldir. Nesnenin kaç derece döndürüleceğini kontrol eder.

10 Nesnelere Dolgu ve Çerçeve Eklemek
Bir nesneyi seçip, araç çubuğundan dolgu rengini, çerçeve (kontur) rengini ve çerçeve kalınlığını ayarlayabiliriz. Dolgu ve Kontur Araçlarına tıklarsak, gelişmiş ayarlara ulaşırız. Düz Renk: Düz bir rengi dolgu olarak kullanır. Degrade: Geçişli renk dolgusu için. Örn: Sarıdan siyaha Opaklık, dolgunun saydamlık derecesini ayarlar. Görüntü: Nesneyi resimler doldurur.

11 Nesneleri Gruplandırmak
Sayfada yer alan nesneleri birlikte hareket ettirmek, birlikte orantılamak için gruplama özelliğini kullanırız. Birden çok nesneyi seçip, sağ tıklayıp, «grup» komutunu verdiğimizde nesneler gruplandırılır. Gruplanmış nesneleri sağ tıklayıp, «grubu çöz» komutunu verdiğimizde grup çözülür.

12 Nesnelerin Katmanını Düzenlemek
Sayfamızdaki nesneler çoğu kez birbirini örtecek şekilde bir aradadır. Bir nesnenin hangisini örteceğini basit olarak sağ tıklayıp «düzenle» sekmesinden ayarlayabiliriz. Katmanlar paneli ise profesyonel olarak nesnelerin, katmanlarını düzenler. Nesneleri gruplar halinde düzenleriz Nesneleri ait olduğu grup içinde aşağı ya da yukarı taşırız. Bu panelde üstte olan, sayfa görünümünde üstte olur. Panelin solundaki göz işareti aracılığı ile nesnenin görünürlüğü açılıp, kapatılır. Nesneyi sağ tıklayıp, «katmana taşı» komutu ile diğer katmanlara taşıyabiliriz.

13 Nesneleri Hizalamak Birden çok nesne ile çalışılan tasarım programlarında en önemli unsurlardan biri hizalama özelliğidir. Ayarlar panelinden, hizala sekmesini tıklayınca hizalama aracı aktif hale gelir. Birden çok nesnesi seçerek, değişik yöntemlerle hizalayabiliriz. Muse programının bir diğer önemli özelliği, akıllı kılavuzlardır. Bir nesneyi sürüklediğinizde yatay ya da dikey olarak hesapları yaparak, düzgün oranlarda uyarı verir. (Örnekte ortadaki nesnenin dikey olarak tam ortada olduğu uyarısını vermektedir. )

14 Nesnelere Efekt Uygulamak
Bir nesneyi seçip ayarlar panelinde «Efektler» sekmesini tıkladığımızda ilgili panel açılır. Buradan gölge (shadow), Eğim(Bevel) ve parlıtı(Glow) efektlerini uygulayabiliriz. Gölge (Shadow): Nesneye gölge vermek için kullanılır. Bir nesneyi arkaplandan ayırmak için en çok kullanılan efekttir. Eğim (Bevel): Nesneye kabartma efekti verir. Eskiden üç boyutlu düğmeler yapmak için kullanılırdı. Güncel sitelerde bu tarz tasarımlar hoşa gitmemektedir. Parıltı (Glow): Nesneye parlama efekti vermek için kullanılır. Genelde yüzük, pırlanta, parfüm gibi nesnelerin etrafında kullanılır.

15 Grafik Sitilleri Oluşturmak
Bir efekti birden çok kere kullanacağımız zaman, o efekti «grafik stili» olarak kaydederiz ve ayarları tekrar hatırlama gereği kalmadan bir çok kez uygulayabiliriz. Menü Paneli – Pencere – Grafik Sitilleri (CTRL-F7) yoluyla grafik sitilleri penceresi açılır. Efekt uyguladığımız nesneyi seçeriz, grafik sitilleri penceresinde efekt kaydetme sekmesini tıklarız. Ve oluşturulan grafik sitiline hatırlamamıza yardımcı olacak bir isim veririz. Yeni nesneyi seçeriz, grafik stilleri sekmesinden ilgili efekte çift tıkladığımızda yeni nesneye uygulanır. Seçili nesnenin efektlerinden oluşan stili kaydeder. Seçili stili siler.

16 Sarma Efekti Oluşturmak
Birçok tasarımda, gazete ve dergilerde sık gördüğümüz şekli ile yazının içine girintilenmiş resimler bulunmaktadır. Buna sarma efekti (Wrap efekti) denir. Bir resim kesilir (ctrl-x) ya da kopyalanır (ctrl+c)paragrafın ilgili noktasına yapıştırılır (ctrl-v) Menü – Pencere – sarma / sekmesi aracılığı ile sarma efektinin niteliklerini ayarlayabileceğimiz panel açılır. Sarma efekti düzeni belirlenir Sarma efektinin ayarları yapılır. Kenarlara uzaklık gibi.

17 %100 genişlikte nesneler yapmak
Güncel sitelerin birçoğu hangi monitörde ya da hangi web tarayıcısında açarsak açalım tam ekran genişliğinde görünen nesnelerden oluşmaktadır. Bunu yapmak muse programında oldukça kolaydır. Bir nesne seçilir ve ayarlar panelinde %100 genişlik sekmesi tıklanır. Ardından sayfanın tarayıcıda önizleme yaparsak, nesnenin monitörü tam olarak doldurduğunu görürüz.

18 İğnelenmiş Nesneler Oluşturmak
Bazı sitelerde sayfada gezinsekte bazı nesnelerin yerini koruduğunu görürüz. Bunlar iğnelenmiş (pinned) nesnelerdir. Bazı sitelerde bunun reklam alanı için yapıldığını görsek de birçok sitede anamenü iğnelenmiş olarak yerini korur. Bunu yapmak muse programında oldukça kolay hale getirilmiştir. Bir nesneyi seçer ve ayarlar panelinde iğnele ikonunu tıklarız. Bu ikonu bir A4 kağıdını duvara iğneler gibi düşünün ve Nesnenizi (kağıdı) hangi noktadan iğneleyeceğinizi düşünerek ilgili kutucuğu tıklayın. Aşağıdaki link wollongong üniversitesine aittir. %100 genişlik ve iğnelenmiş ana menü mantığıyla düzenlenmiş oldukça güzel bir sitedir.