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

'Webmaster Genel' forumunda semyav5mitq tarafından 13 Ocak 2009 tarihinde açılan konu

  1. Sponsorlu Bağlantılar
    Grafik Yazılımları ile Kolay Yoldan Web Tasarımı konusu 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ı 55 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 wwwquarkcom/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ı
     

Bu Sayfayı Paylaş