Dersimizin 1. bölümünde Photoshop’ta sitemizi tasarlamıştık. Şimdi de bu tasarımı Dreamweaver’da kullanmada.

Sitemizi tasarlayıp Photoshop’ta kaydetmiştik ve elimizde images adlı bir klasör ve sitemiz.html oluşmuştu. Sitemiz.html bizi fazla alakadar etmiyor. images klasörü içerisindeki parçaladığımız resimleri sitemizde uygun yerlere koyacağız.

Şimdi Dreamweaver?ı açıyoruz, sıfırdan başlıyoruz. Layout Table ile 800?e 600lük bir alan hazırlıyoruz. Arka plan rengimizi kırmızının tonlarından bir tanesini seçtim. Şimdi resimleri üzerine yerleştirme zamanı geldi.

Şimdi tek yapmamız gereken ölçülerle Layout Table oluşturmak. En önde 190 piksellik bir kare vardı. Oraya logomuzu koyacaktık. Öncelikle onun için bir tablo oluşturalım.

Şimdi de arka plan için üst tarafta oluşturduğumuz bölümü yapalım. Onun da yüksekliği 90 pikseldi. Aşağıda göründüğü gibi çizelim.

Şimdi arka plan belirlemek için Standard görünüme geçiyoruz.

Properties bölümünde bulunan Bg bölümünden resmimizi buluyoruz.

Resmi bölerken üst bölümdeki geçişi 2 piksellik bir resim olarak kaydetmiştim. Resim kendisini devam edeceği için bu resmi seçiyoruz.

Sitemiz şu hâli aldı. Oluşan çizgiler de çizdiğimiz tabloların kılavuz çizgileri. Siteyi kaydettiğimizde bu çizgiler gözükmeyecek.

Butonlarımız vardı. Draw layout cell ile butonların büyüklüğü kadar bölümler oluşturuyoruz. İstersek bu alanı tek bir bölme olarak hazırlayıp öyle de butonları yerleştirebiliriz.

Alanı seçip Common menüsünde Image seçeneği ile ekliyoruz. Diğer seçenekleri de kullanabiliriz ama dersin içeriği bakımından yüzeysel olarak anlatıyorum.

Resmi ekledikten sonra butonları seçip Properties bölümünden bağlantıyı sağlıyoruz.

Üstteki butonlara isim verdikten sonra kabaca sitemiz bitmiş oluyor. Şimdi metinlerin bulunacağı bölümü yapmaya başlıyoruz.

Şimdi şöyle bir detay verelim. Layout bölümünde ?Layout Table? ve ?Draw Layout Cell?i inceleyelim. Sitemizin temelini buradan oluşturuyoruz. Layout Table ile sitemizdeki tabloları oluşturuyoruz. Draw Layout Cell ile de yazı alanımızı oluşturuyoruz. Her ikisini de gerektiği yerde kullanabiliyoruz. Layout Table?ın içerisine Layout Table tekrar çizebiliyoruz. Ama Draw Layout Cell içerisine Layout Table veya Draw Layout Cell çizemiyoruz. Bu mantığı oturttuktan sonra alanımızı çizelim.

Şimdi Photoshop ile tasarladığımız klasörden gerekli parçaları buluyoruz. Soldaki menü için anlatmak gerekirse, 3 parçadan oluşmaktadır. Bir tane gelişigüzel bir Layout Table çiziyoruz. Genişliğimiz 200 pikseldi. Gölgelendirme verdiğimiz için 200 pikselden biraz daha büyük olmayacaktır. Resmimizin üzerine geldiğimizde bir bilgilendirme kutusu çıkıp resmin boyutlarını görmemize yardımcı olacaktır. Resmimiz gördüğünüz gibi 205 piksel genişliğinde ve 9 piksel uzunluğundaymış.

Üstte ve altta bulunan oval köşeli bölüm için bir tane uygun boyutlarda Layout Table çizip arka plana gerekli resmi koyacağız. Ama önce dediğimiz gibi menü uzunluğunda bir Layout Table çiziyoruz. Resmimiz 205 piksel genişliğindeydi. Bu Layout Table da 205 piksel genişliğinde olmalı. Yüksekliği de şimdilik önemli değil. Gelişi güzel bir uzunlukta bırakıyoruz.

Deminki resmimizi yerleştireceğiz. Bir tane daha Layout Table çizeceğiz. 9 piksel uzunluğunda, table?ın içerisine ve en üstüne sabitlemeliyiz.

Tablomuzu oluşturduktan sonra Standart görünüme geçip arka planımızı bu bölgeye atıyoruz. Aşağıdaki Properties bölümünden yapıyoruz. Ardından aynı işlemi aşağıdaki bölüm için de yapıyoruz. Bu resmimizin uzunluğu da 15 pikselmiş. Onun için tablomuzun alt tarafına 15 piksel uzunluğunda bir tablo çizip bu resmimizi yine arka plan olarak atıyoruz. Bu işlemden sonra işimiz bitti gibi.

Ön izleme yaparak yerleştirdiğimiz şekilde bulunduğunu görebiliriz. Şimdi Layout bölümüne gelerek ortada bulunan alanı yapıyoruz. Bu bölgeye yazı yazacağımız için bu bölgeyi Draw Layout cell ile yapacağız. Arada kalan bölgeyi tamamen Draw Layout cell ile oluşturup arka planı belirlediğimiz 2-3 piksel olarak kaydettiğimiz aradaki bölümü arka plan olarak atıyoruz buraya.

Gördüğümüz gibi 3 piksellik bir resim ile tüm bölümü oluşturmuş olduk. Bu sayede sitemiz hem hantallıktan kurtulmuş, hem de güzel bir görünüme kavuşmuş olacaktır. Ortadaki bölümü Draw Layout cell ile yaptığımız için yazı yazdığımız zaman biraz fazla menü olursa bölüm kendini otomatik olarak uzatacaktır. Arka plan resmimiz de kendini otomatik olarak uzayan bölgeyle beraber uzamaya devam edecektir. Şimdi Aynı şekilde orta bölgedeki yazılarımızın olacağı bölümü de oluşturuyoruz?

Sitemiz kullanılabilir bir durumda. Size sadece içerisini doldurmak kalıyor.

Mesela bir ayakkabı firmasının sitesi olarak tasarlamış olalım? Sitemizin içeriğini yerleştirdikten sonra işimiz bitmiş oluyor.

Tasarım aşamasındayken transparan çalışmıştık. Şimdi de bu transparan çalışmamızın kolaylıkları sayesinde sitenin görünümünde değişiklikler yapalım?

Gerisi sizin yaratıcılığınıza kalmış bir şey. Başarılar dilerim?

(Unutmayın: Bu dersi tablolarla anlattım. Yeni başlayanlar “Tablolarla anlatılmış, daha kolaydır, divlerle hiç uğraşmayayim” gibi bir düşünceye kapılmasın. 1. dersin başında da bahsettiğim gibi bu 2 ay önce hazırlamış olduğum bir ders. O zamanlar divlerle pek aram olmadığı için tablolarla hazırlamıştım. Kesinlikle divlerle çalışmanızı öneririm. Div mantığını kavradığınız zaman bu tip siteleri yapmanız çok daha basit olabiliyor.)

The post Photoshop ile yaptığımız bir tasarımı Dreamweaver'a nasıl aktarırız first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

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…

The post Photoshop ile yaptığımız bir tasarımı Dreamweaver'a nasıl aktarırız first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.