Grafik Yazılımları ile Kolay Yoldan Web Tasarımı

+ Yorum Gönder
Webmaster ve Webmaster Genel Bölümünden Grafik Yazılımları ile Kolay Yoldan Web Tasarımı ile ilgili Kısaca Bilgi
  1. 1
    KemaaLL
    Emekli
    Reklam

    Grafik Yazılımları ile Kolay Yoldan Web Tasarımı

    Reklam



    Grafik Yazılımları ile Kolay Yoldan Web Tasarımı

    Forum Alev
    Bir grafik tasarımcı olarak Web tasarımına nasıl bakıyorsunuz? Web’e nasıl bakarsanız bakın ama önyargılı bakmayın. Çünkü her gün ustalıkla kullandığınız Photoshop, FreeHand, QuarkXPress gibi yazılımları kullanarak siz de basit bir broşür tasarımı hazırlar gibi Web’e yönelik animasyonlar, Banner’lar hatta siteler oluşturabilirsiniz.

    Bugüne kadar yaşamını grafik tasarım ile uğraşarak sürdürmüş ve Photoshop-FreeHand-QuarkXPress üçlüsünün dışında bir yazılıma ihtiyaç duymamış kullanıcıların birçoğu için Web kapalı bir kutu. Bir kere el verilirse, kolun kaptırılabileceği bir alan olarak görülür... ASP’ler, PHP’ler, script’ler kodlar, table’lar, CSS’ler insanın gözünü korkutmaya yeter de artar bile.

    Peki bu işin hiç kolayı yok mu? Web üzerinde insanların görebileceği siteler yapmak illa ki karmaşık bir şekilde mi olmak zorunda. Hergün kullandığımız yazılımlar ile Web tasarımı veya ilintili alanlarda işler ortaya koymak gerçekten mümkün değil mi?

    Programlar sürüm atladıkça birbirlerinin alanlarına daha çok girmeye başladılar. çok değil, bundan 5 sene önce Photoshop sadece görüntü işleme aracı, FreeHand ise vektörel çizim aracıydı. Bugün geldikleri noktada Photoshop ve FreeHand’in kendi uzmanlık alanlarının ötesinde birçok farklı işe bulaştığını görüyoruz. Elbette bu durum sadece Photoshop ve FreeHand’i kapsamıyor. QuarkXPress, Microsoft Word veya iView MediaPro... Gerek profesyonel uğraşımız için kullandığımız yazılımlar olsun, gerekse gündelik işlerimizi yürütmek için kullandığımız yazılımlar olsun birçok programa baktığımızda hiçbirinin yerinde durmadığını, kendi uzmanlık alanlarının dışında diğer alanlara sıçrama yaptıklarını görüyoruz.

    Genelde sıçrama yapılan alan da son yılların popüler medyası Web oluyor. Photoshop’ta işlenen bir görüntünün Web’de yayınlanmak üzere uygun format ve ölçülerde kaydedilmesi bir zorunluluk olarak yazılımın özellikleri arasına giriverdi. FreeHand 10. ve 11. sürümlerde özellikle Macromedia’nın bir yazılımı olmasının getirisi olarak Flash’tan birçok özelliği aldı.

    Bugün bulunduğumuz noktada Web için herhangi bir tasarım yapmak için Dreamweaver, Flash ya da Golive bilgisi %100 gerekmiyor. Elbette FreeHand’i kullanarak hazırlayacağınız bir site ile Golive’ı kullanarak hazırlayacağınız bir site arasında dağlar kadar fark olacaktır. Ama kırk yılda bir işi Web tasarımına düşen bir tasarımcının işini görebilecek türde araçlar Photoshop, FreeHand ve QuarkXPress’in içinde bulunuyor. Bunları kullanarak da kolay yoldan Web tasarımı yapılabilir.

    Bu noktada baştan şu uyarıyı yapmamız gerekiyor. Aslında Web, profesyonel bir uğraş ve kendine ait sorunları, araçları, çözümleri bulunuyor. Burada anlatacağımız özellikler bugüne kadar Web tasarımına hiç bulaşmamış bir kullanıcıyı Webmaster yapmaya yetecek bilgi donanımını sunmuyor. Sadece, Web üzerinde gereksinim duyulan basit çalışmaların grafik programları ile de yapılabileceğini işaret ediyor.

    Peki Ama Nasıl?

    çok kolay. Hatta bir broşür ya da katalog tasarımından çok daha kolay. Sadece birkaç aracın nasıl çalıştığını bilmeniz yeterli. Bugüne kadar ihtiyacınız olmadığı için pek sıklıkla uğramadığınız paletleri açmaya başlamalısınız. örneğin FreeHand’de çok sıklıkla kullanılmayan Layer’lar paleti FreeHand’de animasyon yapmak için anahtar rol üstlenir. Şimdi FreeHand’den başlayarak Internet üzerinden yayınlayabileceğiniz siteler, animasyonlar yapmaya başlayalım.

    FreeHand’de Animasyon

    FreeHand 10. sürümden bu yana animasyon yapma özelliğine sahip. Biz burada FreeHand’in MX sürümünü kullanıyoruz ama burada anlattığımız özelliklerin birçoğu (aksi belirtilmedikçe) FreeHand 10’da da yapılabilir.

    FreeHand’de animasyon hazırlamanın temel mantığı katmanları kullanmaktır. ‹st üste duran üç adet katmanı kullanarak animasyon yaptığınızda bu katmanlar art arda kapanıp açılarak kare kare bir görüntü elde etmemizi sağlarlar. çok küçük bir denemeyi şu şekilde yapabiliriz. Birbirlerinden farklı yerlerde duran üç adet elips oluşturup bunlara ayrı ayrı renkler verelim. Ardından Layers paletininin sağında bulunan pop-up menüden New Layer seçeneğini seçerek üç adet yeni katman açalım. ‹ç elipsi, üç ayrı katmana atayıp Window > Movie > Test komutunu verdiğimizde elipslerin arka arkaya hareket ettiklerini görebilirsiniz.

    Şimdi biraz daha detaylı olarak bir animasyon hazırlayalım. Hazırlayacağımız animasyonda biz bir elips şeklinin ‘MacLine’ kelimesine dönüşümünü kullanacağız.

    1-öncelikle bir elips şekli çiziyoruz ve Type aracı ile ‘MacLine’ yazıyoruz. Elbette siz istediğiniz yazıyı ve istediğiniz şekli kullanmakta serbestsiniz. Yazıyı yazdıktan sonra, Text > Convert to Paths komutu ile path’e dönüştürmek gerekiyor. Burada dikkat edilmesi gereken nokta yazının ve elips şeklinin çizgi ve alan bilgilerinin denk olması. Yani elipste çizgi varsa yazıda da olmalı ya da yazıda alan dolgusu varsa elipsin dolgusu ‘None’ olmamalı. Renkler birbirinden değişkenlik gösterse de geçişin iki adımı olacak olan objelerin alan ve çizgi dolgu seçenekleri tamamen aynı olmalı.

    2-Yazıya Blend komutunu uygulayabilmek için yazıyı oluşturan harflerin tek bir obje oluşturacak şekilde birleştirilmesi gerekir. Bu işlemi Join komutu ile yapmamız gerekiyor. Yazıyı birinci adımda yazdığımız gibi path’e çevirdikten sonra grubunu bozmamız gerekiyor. Bu işlemi Modify > Ungroup komutu ile yapabiliriz. Yazıya ungroup komutunu uyguladıktan sonra harflerin ayrı ayrı seçilebilir hale gelmiş olması gerekir. Bu işlemin ardından harflerin tamamını seçtikten sonra Modify > Join komutunu vermeliyiz.

    3-Join komutu, harflerin ayrı ayrı olan alanlarını birleştirerek bir tek alan haline dönüştürür. Bu şekilde elips ve yazı üzerinde blend komutu ile geçiş uygulama işlemini gerçekleştirdiğimizde sadece iki adet obje arasında geçiş uygulamış oluruz.

    Elips ve yazıya istediğimiz renkleri verdikten ve konumlarını da istediğimiz şekilde ayarladıktan sonra Xtras > Create > Blend ile aralarında bir geçiş oluşturalım. Blend komutu ile iki obje arasına eklenen yeni objelerin sayısını Properties panelinde bulunan Object penceresindeki Steps değerini yükselterek artırabilirsiniz.

    4-Objelerimiz arasındaki geçişi oluşturduktan sonra animasyon için burada bulunan tüm objeleri farklı katmanlara atamamız gerekiyor. Blend’in ‘Steps’ değerine girdiğiniz değer söz gelimi 50 ise, toplamda 50 adet katman açmanız gerekecek. Bu 50 katmanı açmak ve her objeyi ayrı ayrı katmanlara atamak oldukça zahmetli bir iş. Ancak bu zahmetli süreci yaşamamanız için geliştirilmiş yararlı bir araç FreeHand’in derin sularında keşfedilmeyi bekliyor.

    Blend komutu ile geçişinizi oluşturduktan sonra Xtras > Animate > Release to Layers komutunu verin. Bu komut blend’i oluşturan objelerin herbirini ayrı katmanlara otomatik olarak ayıracaktır. Burada yaptığımız örneğin dışında eğer Blend komutunu kullanmıyorsanız ve fazla sayıda objeden oluşan bir obje grubunuz varsa aynı komutu bu obje grubu için de kullanabilirsiniz. Release to Layers komutunu verdiğinizde karşınıza açılan pencerede bulunan Animate pop-up menüsü animasyonumuzun nasıl bir yapıda olacağını belirleyecek temel unsurdur. Animate menüsünde bulunan dört seçenekten ilki olan Sequence, kareleri teker teker oynatır. İkinci seçenek olan Build ile her açılan kare açık kalır, bir sonraki kare açık olan karenin üzerine açılır. Bu seçeneği bir sonraki bölümümüz olan FreeHand’de Banner yapma bölümünde özellikle bu seçeneği kullanacağız. Release to Layers penceresindeki üçüncü seçenek olan Drop’ta her karede tüm objeler görünür. Sadece her karede bir adet obje çıkarılır. Drop, stadyumlarda taraftarların yaptığı ‘Meksika Dalgası’na benzetilebilir. Son seçenek olan trail’de ise Trail by seçeneğine girilen değer kadar obje her karede görünür.

    Bu seçeneklerin nasıl çalıştığını anlamak için fazla karmaşık olmayan bir animasyon hazırlayarak hepsini tek tek deneyebilirsiniz.

    5-Uygun animasyon seçeneğini seçtikten sonra geriye sadece Window > Movie > Test komutunu verip arkaya yaslanmak kalıyor.

    Eğer gerekli görürseniz var olan katmanlarınıza yeni objeler ekleyebilirsiniz. FreeHand, bir katmanda birden fazla obje kullanımına izin verir. Bu nedenle rahat rahat animasyonunuzu ek öğeler ile zenginleştirebilirsiniz. Animasyonu tamamladığınızda SWF formatında export ederek ayrı bir belge olarak saklayabilirsiniz.

    FreeHand’de Banner Tasarımı

    Objelerden animasyon oluşturmanın bir uzantısı olarak FreeHand ile etkili Banner’lar hazırlamanız mümkün. Banner’daki mantık animasyonla tamamen aynı. Her kareyi ayrı ayrı katmanlar şeklinde düşünmek gerekiyor.

    Banner hazırlamaya başlamadan önce FreeHand’deki sayfamızı bir Banner sayfasına çevirmemiz gerekiyor. Bunun için Library paletinin sağ üst tarafında bulunan pop-up menüye girerek Import komutunu vermemiz gerekiyor. Açılan pencere FreeHand’in English > Settings klasörünü gösterir. Bu klasör Mac OS 9’da Macromedia FreeHand klasörünün içinde, Mac OS X’te ise Library > Application Support klasöründe bulunan Macromedia klasörünün içindedir. Bu pencere içinden Symbols klasörünün içinde bulunan Master Pages dokümanını açmamız gerekiyor. Bu noktada adı Import Symbols olan yeni bir pencere karşımıza çıkacaktır. Buradaki seçenekler arasından Web Banner’ı seçip Import komutunu verdiğinizde üzerinde kılavuz çizgileri de bulunan bir Banner sayfası Document panelindeki Master sayfalar içinde yerini alacaktır. Aslında açılan sayfa (eğer kılavuz çizgileri kullanmayacaksanız) sadece 468 x 60 piksel büyüklüğünde yeni bir sayfadır. Dolayısıyla hazır Banner sayfasından kullanmak yerine kendiniz manuel olarak 468 x 60 piksel büyüklüğünde bir alan da açabilirsiniz.

    Karışıklığa mahal vermemek için geri kalan işlemleri adım adım anlatalım.

    1-468 x 60 piksellik alan içinde örnek olarak bir tasarım hazırlayalım. Bizim hazırladığımız tasarımda MacLine’ın yeni yıl aboneliği için hazırlanmış bir Banner bulunuyor. Burada harfler teker teker eklenerek cümleyi oluşturacak.

    2-Her harfin eklendiği banner’dan bir adet çoğaltarak ilerlememiz gerekiyor. Bizim örnek çalışmamız için bu rakam 30 oldu. Toplamda 30 adet aynı Banner tasarımından çoğalttıktan sonra harfleri tek tek silerek de ilerlemeniz mümkün.

    3-Bu işlemi yaptıktan ve 30 adet Banner’i seçtikten sonra hem sayfaya, hem de birbirlerine ortalı olarak hizalamamız gerekiyor. Hizalamayı Align panelini kullanarak kolayca yapabilirsiniz. Burada hangi karenin en üstte olduğunun pek bir önemi yok.

    4-Kareleri hizaladıktan sonra Modify > Group komutu ile bir grup oluşturmamız gerekiyor. Bu grubu oluşturmamızın nedeni çok zahmetli olan tek tek Layer açma ve objeleri layer’lara atama işleminden kısa yoldan kurtulmak.

    5-Objelerimizi tek bir grup altında topladıktan sonra Xtras > Animate > Release to Layers komutunu vermemiz gerekiyor. Bu komutu verdiğimiz

    de açılan pencereden Animate seçeneği olarak Build’i seçeceğiz. Eğer işlemin sonunda animasyon tersten oynuyorsa, yani harfler birbirinin arkasına eklenerek cümleyi oluşturmak yerine bir cümle içinden teker teker çıkarılıyorsa Animate penceresinden Reverse Direction kutucuğunu işaretlememiz gerekir.

    6-Banner’ımız servise hazır. Hazırladığımız çalışmayı izlemek için Window > Movie > Test komutunu vermemiz gerekiyor. Eğer oynama hızını değiştirmek isterseniz Movie menüsünün altında bulunan Settings panelinden FPS (Frame Per Second: Saniyedeki kare sayısı) değerini düşürerek veya artırarak istediğimiz hıza ulaşabiliriz.

    7-Son olarak da bu banner’ı bağımsız bir Flash belgesi olarak kaydetmek için File > Export seçeneğini kullanarak SWF formatında export etmeliyiz.

    FreeHand’de Web Tasarımı

    Yılların eskitemediği vektörel çizim yazılımı FreeHand, bir Macromedia yazılımı olması dolayısıyla yüzünü son yıllarda tamamen Web’e döndü. Flash ve Fireworks ile etkileşimi artırıldı, içerisine SWF desteği eklendi. Animasyon, master sayfa, HTML çıkış gibi önemli Web araçları eklendi. Hal böyle olunca FreeHand vektörel çizim programı ve sayfa tasarım programı olmanın ötesine geçerek Web alanına da sıçramış oldu.

    Şimdi sadece FreeHand’i kullanarak herhangi bir Web tarayıcısında veya Flash player’da görüntülenebilecek ve kullanılabilecek basit bir Web sitesi hazırlayalım.

    Bu Web sitesini hazırlarken içinde fotoğraf da kullanma şansımız var. Ancak biz baştan sona kadar FreeHand’de hazırlanmış bir Web sitesi hazırlayacağız.

    1-öncelikle tasarımızı oluşturarak işe başlıyoruz. Aslında her grafik üründe olduğu gibi Web sitelerinde de tasarım aşaması çok önem arzeden bir aşamadır. Ancak biz burada bu dosya konusunu tasarım öğütleri ile değil, uygulama önerileri ile dolduracağız. Bu yüzden bu adımı hızlıca geçiyoruz.

    Hazırlayacağımız örnek tasarımda birkaç adet link bulunmalı. Yazının başlarında da belirttiğimiz gibi database sorgulaması yapabilen veya karmaşık yapılara sahip siteleri FreeHand gibi yazılımlar ile yapmak olanaklı değil. Aşağıdaki örnek FreeHand’de hazırlanabilecek sayfa tasarımlarına güzel bir örnek oluşturuyor.

    Butonlarımızı koyup yazıları da yazdıktan sonra yazıları Text>Convert to Paths komutu ile path’lere dönüştürüyoruz. Her linkin butonu ile yazısını da gruplamayı ihmal etmeyin.

    2-Bu sayfadan üzerindeki buton sayısı kadar çoğaltıyoruz. Gerekli görürseniz alt sayfalarda farklı bir sayfa düzeni veya farklı renkleri de tercih edebilirsiniz. Burada ana sayfanız olacak sayfanın en üstte bulunmasına özen gösterin.

    3-Sayfalardaki butonları linkler haline getirmek için iki ayrı yol bulunuyor. Bunlardan ilki FreeHand’e MX sürümünde eklenmiş olan Action tool. Yapmamız gereken iş, Action tool ile anasayfada ‘01’ isminde görülen butonun üzerine tıklayıp parmağınızı Mouse’tan kaldırmadan alttaki sayfalardan ilkine götürüp bırakmak. Siz Action tool ile bir objenin üzerine tıklayıp sürüklediğinizde imleci hareket ettirdiğiniz yere doğru bir çizgi belirecektir. Parmağınızı Mouse’un butonundan kaldırdığınız anda iki obje arasında bir bağlantı kurmuş olursunuz. Bunu yine FreeHand’de farklı yazı alanlarını birbirine bağlayarak tek bir yazı alanı oluşturmaya benzetebiliriz.

    4-Yukarıda yazdığımız şekilde Action tool’u kullanarak tek tek bütün butonlardan bütün sayfalara linkler atamalısınız. Bu biraz zahmetli bir iştir. çünkü anasayfadaki tüm butonlardan ilgili sayfalara ve alt sayfalardan hem anasayfaya hem de birbirlerine linkler vermelisiniz. Yani ortaya aşağıdaki gibi karışık bir şekil çıkacaktır.

    Linkleri atarken dikkat etmeniz gereken şöyle bir nokta var; 02 numaralı sayfada bulunan 02 isimli butonu pas geçmeli ve herhangi bir link atamamalısınız. Aynı şekilde anasayfada bulunan Anasayfa isimli butondan herhangi bir obje veya sayfaya link vermemelisiniz. Bu butonu biraz soluklaştırabilir, hatta silebilirsiniz.

    5-Bu FreeHand dokümanını Window > Movie > Test komutunu vererek izleyebilir, File > Export komutu ile SWF olarak kaydedebiliriz.

    6-<üçüncü adımda değindiğimiz gibi, objeleri link haline getirmenin iki yolu bulunuyor. İlki Action Tool (ki yukarıda bu aracın nasıl çalıştığını okudunuz), ikincisi ise Navigation paneli. Window > Navigation seçeneği ile açacağınız Navigation panelini de objeleri link olarak atamak için rahatlıkla kullanabilirsiniz. Bunun için herhangi bir objeyi seçtikten sonra Navigation paneli üzerindeki ‘Link’ menüsünden istediğiniz sayfayı seçmelisiniz.

    Burada da link olarak kullanılacak her obje için teker teker sayfaları belirlemeniz gerekiyor.

    Navigation panelini kullanarak Action Tool’un yaptığı gibi linkler atayabileceğiniz gibi linkinizin bağlandığı sayfada bir animasyon varsa onu da oynatabilmeniz mümkün.

    7-Linklerinizi ister Action tool ile, isterseniz de Navigation Panelini kullanarak verin, hazırladığınız sayfayı File > Export komutunu kullanarak SWF olarak kaydedebileceğiniz gibi File menüsünün altında bulunan

    Publish as HTML komutu ile SWF yerine HTML bazlı olarak da kaydedebilirsiniz.

    Photoshop’ta Web’e Yönelik Araçlar

    Photoshop programı 5.5 sürümünden itibaren Web araçlarını içeriyor. özellikle ImageReady, Save for Web ve Slice aracı Photoshop’un en önemli Web araçları arasında sayılabilir. Photoshop’un Web araçlarını ikiye ayırmak mümkün. İlk gruba Web tasarım ile profesyonel olarak uğraşan kullanıcıların yararlanacağı araçlar olan Save for Web, Slice tool, ImageReady girerken, ikinci gruba daha amatör kullanıcılara hitap eden HTML çıkış, Web Photo gallery gibi araçlar dahil olabilir. Şimdi kısaca bu araçların neler yapabildiklerine bakalım.

    Save for Web: Photoshop’ta hazırlanan görüntülerin Web sayfalarında hızlı bir şekilde görüntülenebilmesi için Save for Web komutu ile kaydedilmesi gerekir. Bir fotoğrafı Web üzerinde yayınlamak istediğinizde File menüsünden Save for Web’i açın. En üstte bulunan 4 UP sekmesine tıklayın. Sağ taraftaki seçenekler arasından kaydedeceğiniz formatı seçin (JPEG, GIF, PNG vs.) ve OK’e tıklayın. Bu kadar basit ayarlar ile birlikte bile önemli bir boyut kazancı elde edeceksiniz. Save for Web’in en önemli özelliği dosya boyutunu küçültürken kaliteyi mümkün olabilen en kaliteli şekilde tutmaktır.

    Slice Tool: Photoshop’ta işlediğiniz görüntüleri Web’de kolay yüklenebilmesi için parçalara ayırmaya yarar. Slice aracını kullanarak fotoğrafınızı istediğiniz kadar parçaya ayırabilir ve daha sonra Save for Web paleti yardımıyla parçalar halinda kaydedebiliriz. Eğer gerekli görürseniz Slice Tool’un hemen altında bulunan Slice Select Tool’u kullanarak dilimleri büyütebilir, küçültebilir veya yerlerini değiştirebilirsiniz.

    Slice aracı ile ayrılmış parçaları farklı dokümanlar olarak kaydetmek için:

    1. Slice Tool ile fotoğrafınızı dilimlere ayırın. Fotoğrafın büyüklüğüne göre dilimleri istediğiniz gibi büyük ya da küçük olarak parçalara ayırabilirsiniz.

    2. File menüsünden Save for Web’i açın. Sağ tarafta bulunan Output Settings butonuna tıklayarak kayıt ayarlarınızı yapmalısınız.

    3. Açılan pencerede HTML yazan pop-up menüden Slices’i seçin. Buradan dokümanınızda kullanacağınız tüm dilimleri ayrı ayrı dosyalar olarak kaydederken nasıl isimlendirileceklerini seçebilirsiniz. Bu işlemi yaptıktan sonra OK butonuna tıklayarak tekrar Save for Web penceresine dönebilirsiniz. Tekrar OK butonuna basarsanız dilimleriniz belirttiğiniz klasöre ayrı ayrı dokümanlar olarak kaydedilecektir. Burada Save penceresinde Biçim olarak Images Only seçeneğini seçmeyi unutmayın.

    Bir Slice’ı buton yapmak için:

    önceki adımda anlatıldığı gibi Slice’larınızı oluşturup Save for Web komutunu verdikten sonra Slice’larınızı buton haline getirebilir, linkler atayabilirsiniz. Bunun için çizilmiş slice’lardan herhangi birini Save for Web penceresinde bulunan Slice seçim aracı ile seçin. ‹zerine çift tıkladığınızda açılan pencereden atadığımız linke bağlı sayfanın içeriğine yönelik ayarlarımızı yapabiliyoruz. Durum çubuğunda yazacak mesajdan, açılacak sayfanın ayrı bir sayfada açılmasına kadar birçok ayar burada karşımıza çıkıyor. OK butonuna bastıktan sonra Save for Web penceresini de onaylayıp sayfamızı HTML olarak kaydedersek linkleri ile çalışan bir Web sayfasına sahip oluruz.

    QuarkXPress'te Web Tasarımı

    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.

    Alıntı



  2. 2
    Ayarsız
    Yeni Üye

    --->: Grafik Yazılımları ile Kolay Yoldan Web Tasarımı

    Reklam



    paylaşım i&#231;in tesekkurler...







  3. 3
    abidik
    Emekli
    Tesekkurler Kardes Bu Benİm İŞİme Yarayacak Ama Henuz Okumayi Bİtİrmedİm :)







  4. 4
    doganderya
    Yeni Üye
    bu alıntı olsa bile bunu araştırma kapasiten var sana teşekk&#252;r ediyorum g&#252;zel eğitmensin :)

  5. 5
    under
    Yeni Üye
    paylaşım i&#231;in saol teşek&#252;r

+ Yorum Gönder
5 üzerinden 5.00 | Toplam : 1 kişi