Photoshop ile yaptığımız bir tasarımı Dreamweaver'a aktarma (1. Bölüm - Photoshop'ta Tasarım)
Evet arkadaşlar. Bu derste sizlere Photoshop ile tasarlanan bir siteyi nasıl kullanılabilir duruma getireceğimizi anlatmaya çalışacağım. Takıldığınız noktalarda elimden geldiğince yardımcı olmaya çalışırım. Bu ders Sanalkurs 8. Sayı'da yayınlanmıştır. Dersi yaklaşık 2 aydan daha önce hazırlamış olduğumdan değişmiş bazı şeylerin eski olduğunu göreceksinizdir. Mesela siteyi ben 800 x 600 tasarlamışım. Halbuki artık bu boyutlar tercih edilmeyen boyutlardır. Şu anda genel olarak 1000 genişliğinde siteler tasarlanıyor ve çok daha verimli olduğu kanısındayım ben. Unutmadan belirteyim. Dersi Photoshop ve Dreamweaver CS3'te anlattım. Photoshop CS4 kullananlar fazla zorlanmayabilir belki ama Dreamweaver CS kullanan ve başlangıç aşamasında olanlar biraz zorlanabilir. Ama temel mantığı kaptığınız zaman pek sorun olacağını sanmıyorum.Ders biraz kapsamlı ve uzun olduğundan 2'ye böldüm. 1. Bölümde Photoshop'ta tasarımı, 2. Bölümde de Dreamweaver'da kullanımını anlatacağım. Fazla uzatmadan derse geçelim...
Ctrl+N ile yeni bir çalışma sayfası açıyoruz. Sitemizin boyutunu belirliyoruz. Genelde siteler 800 x 600 boyutlarıyla yapılır. Uzunluğu bazen 600?den fazla olur ama genişliği genelde 800 pikseldir. Arka planımız beyaz ya da belirlediğiniz herhangi bir renk olabilir. Ama şeffaf (transparent) olmasını ben daima öneririm. Nedeni ise sitemizde arka plan rengimizi değiştirdiğimiz zaman şeffaf bölgelerin o rengi alabilmesi olarak açıklayabilirim. Transparan özelliği size yeri geldiğinde çok yarar sağlayabilir. Yine de sizin tercihinize kalmış bir şeydir elbette.
Eğer Photoshopta cetvelimiz açık değil ise Ctrl+R ile cetvelimizi açık konuma getiriyoruz. Photoshop?un özellikle site tasarım konularında işimize yarayan bir özelliği de budur. İlerideki aşamalarda bu cetvel sayesinde referans noktalarını belirleyeceğiz.
Rectangular marquee tool ile işe başlıyoruz. Bildiğiniz gibi üst menüden gerekli ayarlamaları yapıyoruz. İstediğimiz ilk önce sitemizde üst taraftan bir alan yaparak başlayalım. Unutmayın ki tasarıma daima arka planları yaparak başlamanız yararınıza olur. 800?e 90 piksellik bir alanımız olsun ve bu alan renk geçişli olsun. Üst menüden gerekli ayarlamaları yapıyoruz.
Çalışmamıza tıkladığımız zaman belirlediğimiz ölçüde alanı çalışmamızda seçili hâle getirecektir. Bu alanı istediğimiz yere taşıyabiliriz.
Gradient Tool ile istediğimiz renk geçişini gerçekleştiriyoruz. Gri renkten siyah renge geçiş yapalım.
Alanımız seçili hâlde iken üstteki cetvele tıklayıp sürüklemek suretiyle kılavuz çizgisi atıyoruz. Bu aşama dreamweaver?a aktaracağımız zaman resimleri bölmemizde çok kolaylık sağlayacak. Atadığımız çizgi mavi bir şekilde çalışmamızın dışına taşacak ama merak etmeyin bu çizgi sadece kılavuz çizgisi ve çalışmamızda bu çizgi gözükmeyecek.
Şimdi de sitemizin logosunu koyacağımız bir yer yapalım. 190?a 190lık bir kare oluşturalım Marquee Tool ile.
Yeni bir katman oluşturup alanımızı belirleyip içerisini belirlediğimiz bir renk ile dolduruyoruz. Ben siyahı tercih ettim.
Şimdi de Marquee Tool ile çerçevesi yapalım alanımızın. Rectangular Marquee Tool?u seçtiğimiz zaman yukarıdaki seçeneklerden ?Intersect with selection? seçeneğini seçerek seçeceğimiz alan ile seçeceğimiz alanın ortak bölgesini seçili hâle getirelim.. Çerçevemiz 5 piksellik olması için şimdi oluşturacağımız kare 180?e 180 olmalıdır. Biraz daha estetik katmak için Feather?ını da 5 piksel verelim. Bu sayede köşeleri keskin olmak yerine yuvarlak olacaktır.
Alanımızı seçtik. Kenarları ovalleştirmek tasarımımızı doğrudan etkilemiş oluyor.
Seçtiğimiz alanı beyaz renk ile boyuyoruz. Daha sonra buraya logomuzu
yerleştireceğiz.
Şimdi 40 piksel uzunluğunda butonlarımızı yine Marquee tool ile yerleştirip üzerine isimlerini yazalım. Blending Options ile de butonlara gölge verelim.
Şimdi de sol tarafta menülerimizin bulunacağı alanı yapalım. 200?e 100?lük marquee tool ile alan belirliyoruz. Bu menünün uzunluğunu yeterince uzun yapmalıyız. Şimdiki aşamada sadece görünümü belirliyoruz. Uzunluğunu dreamweaver ile ayarlayacağız. Bu alanı daha rahat kullanabilmemiz için kılavuz çizgilerle de belirliyoruz. Ardından Rounded Rectangle Tool ile köşeleri yuvarlak bir dikdörtgeni seçtiğimiz alana oturtuyoruz. Aynı işlemi yazılarımızın gösterileceği yer için de yapıyoruz.
Aşağıda boş kalan kısımları Crop Tool ile kesiyoruz. Slice tool ile gerekli yerlerini ayırıyoruz. Burada dikkat etmeniz gereken şey ise kullandığınız gölgelendirmeler ile kesmek ve gerekli olduğu kadar kesmektir. Unutmamanız gerekiyor ki siz bunu dreamweaver?da yerleştirirken zorlanmamanız gereken her şeyi yapmalısınız. Zamanla bu bilinci kendinizde otomatik olarak oturduğunu göreceksiniz. Ardından çalışmamız son hâlini alıyor.
Şimdi çalışmamızı File / Save for Web ile kaydediyoruz.
İşte geldik işin en önemli noktasına. Dikkat ederseniz renklerimiz büyük ölçüde kaybolmuş gibi duruyor. Bunun nedeni çalışmamızı bölmüş olmamız. Aslında renkleri normal ama öyle gösteriliyor. Bu pencereden üzerine tıkladığınız yerlerin normal hâle geldiğini göreceksiniz. Seçili olup olmama durumu diyebiliriz. Ayrıca demin bahsetmediğimiz bir şeyden bahsetmek istiyorum. Bölme yaptığımız zaman kılavuz çizgilerimizi gerektiği kadar kullanmamız gerekiyor. Tekrarlanan resimleri daima 2-3 piksellik resimler hâline getirerek kullanmak sitenin hantallığını engellemek bakımından çok önemlidir. Unutmayın, sitenizin tasarımını burada ne kadar akılcı bölerseniz işinizi o kadar kolaylaştırırsınız ve sorunsuz halledersiniz.
Sağ taraftaki menüden gerekli ayarlamaları yapıyoruz. Transparan çalıştığımız için jpeg olarak kaydetmemiz yanlış olur. O yüzden png-24?ü seçiyoruz. Eğer transparan çalışma yapmasaydınız bile yine size jpeg olarak kaydetmenizi önermezdim. Çünkü jpeg olarak kaydettiğiniz zaman grafiklerde az da olsa değişiklik oluyor. Düz renklerde bile piksellerde bozulma görüyorsunuz. Bunun olmaması için de transparan olmayan çalışmalarınızda da png ya da gif ile çalışmanızı öneririm şahsen. Yine sizin tercihinize kalmış bir şey.
Sitemiz.html olarak kaydettiğimizde nereye kaydettiysek oraya html ve images klasörünü görebiliyoruz. Böldüğümüz resimler images klasörü içerisinde bulunuyor.
Dersimizin 1. bölümü burada sona eriyor. 2. Bölümde görüşmek üzere...