FreeHand ve Photoshop”un aksine QuarkXPress”in 5. ve 6. sürümlerinde Web”e yönelik birçok araç bulunuyor. Öyle ki Web tasarımı konusunda en ufak bir fikri bile olmayan Quark kullanıcıları, sayfa mizanpajı hazırlar gibi detaylı Web siteleri kurup HTML olarak kaydedebiliyorlar.

QuarkXPress üzerinde yeni bir belge açacağınız zaman baskı için mi, Web için mi bir proje açacağına ilişkin bir seçim yapmanız gerekiyor. Yeni bir belge açarken yaptığınız bu seçim Quark”ın bazı araçlarının görünümünü ve araç paletinde yer alacak araçları etkiliyor. Web için bir proje açmış iseniz araç paletinin altına Web araçlarını içeren ikinci bir araç paleti daha açılıyor.

Eğer Quark ile hazırlanabilecek sitelerin niteliği hakkında aklınızda birtakım soru işaretleri bulunuyorsa www.quark.com/products/ xpress/resources/Web_templates/ adresini ziyaret ederek QuarkXPress kullanılarak hazırlanmış siteleri görebilir hatta template”lerini indirerek üzerine kendi içeriğinizi koyabilir ve Web”de yayınlayabilirsiniz.

Şimdi adım adım Quark”ta bir Web sitesi hazırlayalım. Burada kullanacağımız site tasarımı FreeHand”de yaptığımız Web sayfası gibi az butonlu, az özellikli olursa daha rahat çalışabiliriz.

Biz örnek çalışmamızda QuarkXPress Passport 6″yı kullanıyoruz. Anlattığımız özelliklerin önemli bir kısmı QuarkXPress”in 5. sürümü ile de yapılabilir. Ama eğer elinizde QuarkXPress 4 ya da daha öncesi varsa hiç denemeyin bile…

1-File menüsünden New > Project komutunu vererek işe başlıyoruz. Komutu verdiğimiz anda açılacak olan pencere, bizlere yapmak istediğimiz işin bir Web projesi mi, bir basılı materyal projesi mi olacağı konusunda seçim imkanı tanıyacak. Bu pencerede bulunan “Layout Name” kısmına projenin adını yazdıktan hemen sonra “Layout Type” menüsünden Web”i seçiyoruz. Web seçeneğini seçtiğimiz an pencerenin alt tarafının görünümü değişiyor. Bu bölümü kullanarak sitemizin sahip olması gereken bazı temel ayarları yapmalıyız. Colors bölümü altından linklerin ve sayfamızın renklerini seçmeliyiz. Layout bölümünden sayfanın boyutlarını belirlemeliyiz. Burada Page Width bölümüne 800 px”den yukarı bir değer girmemenizi öneririz. Eğer sayfalarınızın zemininde bir fotoğraf bulunmasını istiyorsanız bunu Background Image seçeneği ile yapabilirsiniz.

2-Bu noktada tasarımımızı oluşturmamız gerekiyor. İşin FreeHand bacağında da anlattığımız gibi aslında tasarım, işin en zor kısmı. Ama burada biraz hızlı geçmek durumundayız. Birkaç basit link içeren bir sayfa tasarımı hazırlıyoruz.

3-QuarkXPress üzerinde sayfa tasarımı yapar gibi master sayfadan istediğimiz kadar (link sayısı kadar) sayfayı oluşturuyoruz. Bu iş için Page Layout penceresini kullanabiliriz. Hazırlayacağınız anasayfada bulunan linkin içeriğini alt sayfalara koymalısınız. örneğin bizim hazırladığımız örnek tasarımda anasayfa üzerinde “Hazır Şablonlar” isminde bir link bulunuyor. Açacağımız alt sayfaya hazır şablonlar ile neyi kastediyorsak o içeriği koymalıyız.

4-QuarkXPress”te linkleri aktif hale getirme işini Hyperlinks paleti yapmaktadır. Eğer açık değilse Window menüsünden Show Hyperlinks seçeneği ile açabilirsiniz. Hyperlinks paletini kullanarak QuarkXPress sayfalarına veya Web sitelerine linkler verebiliriz. Bunun için hazırladığımız örnek tasarımda oluşturduğumuz butonlardan birini seçiyoruz ve sonrasında Hyperlinks panelinden sol üstte bulunan zincir ikonuna tıklıyoruz. Burada dikkat etmeniz gereken nokta şu. Eğer butonunuzun zemin rengini oluşturacak bir dikdörtgen açıp ve üzerine de bir yazı alanı oluşturduysanız bu iki objeyi gruplamamanız gerekiyor. Eğer gruplarsanız link veremezsiniz. Size tavsiyemiz, yazının altındaki renkli alanı link alanı olarak tanıtmanız olacaktır.

5-Hyperlinks panelindeki zincir ikonuna tıkladığınız anda karşınıza bir pencere açılacaktır. Bu pencerede linkinize bir isim verebilirsiniz, bir Quark sayfasına mı, yoksa bir Web sitesine mi link vereceğini belirleyebilirsiniz, Web sitesine gönderim yapılacaksa sitenin adresini de bu pencere içinden yazabilirsiniz. Penceredeki seçenekler arasından en alttaki Target bölümünde bulunan seçenekler, linkinize tıklandığı anda açılacak sayfanın yeni bir sayfada mı, yoksa aynı sayfa içerisinde mi açılacağını belirlemeye yarar. Yeni bir sayfada açılmasını isterseniz _blank, aynı sayfa içerisinde açılmasını isterseniz_self seçeneğini işaretlemelisiniz.

6-Bütün butonlarınıza Hyperlinks paletini kullanarak linkler atadıktan sonra sayfanızın alt tarafında bulunan HTML preview butonuna (üzerinde çark resmi olan buton) tıklayarak sayfanızı Web browser”ınızda görebilirsiniz.

7-Son iş olarak da sayfanızı HTML olarak kaydetmek kalıyor. Bunun için File > Export > HTML komutunu vermelisiniz. komutu verdiğinizde açılan Save dialog kutusunu kullanarak bilgisayarınız üzerinde yeni bir klasör oluşturup bu klasöre kayıt işlemini yapmalısınız.

Uzmanından Püfler

Dergimizin Web konusunda uzman editörlerinden Aycan Gönenç, hergün kullandığınız yazılımları kullanarak Web’e yönelik olarak yapabilecekleriniz konusunda kısa kısa önerilerini sizler için yazdı.

Photoshop için aslında “Web dışı” bir program denemez, tasarımın hemen her alanında olduğu gibi Web tasarımında da en büyük yardımcıdır Photoshop.

Save for Web komutu: File > save for the Web komutu, Web sitemizde kullanacağımız görsellerin kaliteden olabildiğince az ödün vererek dosya boyutlarının küçültülmesine yarar. Web”de kullanacağınız bir resmi açın bu komuta ulaştığınızda, karşınıza çıkan pencereden resminizin görüntü kalitesini, bu kalitede toplam dosya boyutunu ve resmin yaklaşık ne kadar sürede dolacağını görebilir, farklı formatlarda resmin kalitesi ve dosya boyutu ile oynayarak karar verebilirsiniz. Tek ya da birkaç renkten oluşan resimler için gif formatını, çok renkli tasarımlar ve resimler için ise jpeg formatını tercih edin. Jpeg olarak kayıt edeceğiniz resimlerde genelde “Maksimum” ve “High” seçenekleri yerine “Medium” seçeneğini tercih edin. Eğer bu seçenekte resim kaliteden çok ödün vermiyorsa, bu seçeneği tercih edin. Böylece dosya boyutunuz yarı yarıya azalacak ve resim sayfanızda çok daha hızlı görüntülenecektir.

Web photo gallery komutu: File>Automate>Web Photo Gallery komutu, zahmetsiz bir şekilde Web için bir fotoğraf galerisi yapmanızı sağlıyor. Ancak bu komutun Web tasarımında sağladığı bir kolaylık daha var. Diyelim ki yaptığınız Web sitesinde 100 - 200 tane resim var ve bunların hepsini en olarak aynı boyuta getirmek ve Web için optimize etmek istiyorsunuz. Ya da resimlerin hem küçüklerini (thumbnail) hem de büyük versiyonlarını oluşturmak istiyorsunuz.. İşte bu ihtiyaçlar için Web photo gallery seçeneğini kullanabilirsiniz. Resimlerin içinde olduğu kaynak klasörü ve oluşturulacak resimler için hedef klasörü tanımladıktan sonra tuşa basın ve kendinize bir kahve koyup seyretmeye başlayın, Mac”iniz çalışırken siz dinlenin

Multi page PDF to PSD: File > Automate> Multi page PDF to PSD komutu çok sayfalı bir pdf dosyasından, her sayfa için bir Photoshop dokümanı yaratılmasını sağlar. Bu Web tasarınımda ne işe mi yararı Diyelim ki müşteriniz pdf formatındaki ürün broşüründeki bazı resimleri Web sitenize koymanızı istedi… Bu yöntemle broşürün her sayfasını birer Photoshop belgesi haline getirip, istediğiniz gibi kesip, biçerek hazırlayabilirsiniz.