Tr.Gg>>WwW.NegRoDizayn.Tr.Gg<<Tr.Gg

Tasarimaktarma 1

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.

http://resim.sanalkurs.net/uploads/1_499.jpg

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.

http://resim.sanalkurs.net/uploads/2_421.jpg

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.

http://resim.sanalkurs.net/uploads/3_355.jpg

Ç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.

http://resim.sanalkurs.net/uploads/4_297.jpg

Gradient Tool ile istediğimiz renk geçişini gerçekleştiriyoruz. Gri renkten siyah renge geçiş yapalım.

http://resim.sanalkurs.net/uploads/5_247.jpg
http://resim.sanalkurs.net/uploads/6_198.jpg

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.

http://resim.sanalkurs.net/uploads/7_146.jpg

Şimdi de sitemizin logosunu koyacağımız bir yer yapalım. 190?a 190lık bir kare oluşturalım Marquee Tool ile.

http://resim.sanalkurs.net/uploads/8_112.jpg

Yeni bir katman oluşturup alanımızı belirleyip içerisini belirlediğimiz bir renk ile dolduruyoruz. Ben siyahı tercih ettim.

http://resim.sanalkurs.net/uploads/9_92.jpg

Ş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.

http://resim.sanalkurs.net/uploads/10_80.jpg

Alanımızı seçtik. Kenarları ovalleştirmek tasarımımızı doğrudan etkilemiş oluyor.

http://resim.sanalkurs.net/uploads/11_63.jpg

Seçtiğimiz alanı beyaz renk ile boyuyoruz. Daha sonra buraya logomuzu
yerleştireceğiz.

http://resim.sanalkurs.net/uploads/12_49.jpg

Ş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.

http://resim.sanalkurs.net/uploads/13_40.jpg

Ş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.

http://resim.sanalkurs.net/uploads/14_30.jpg


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.

http://resim.sanalkurs.net/uploads/15_24.jpg

Şimdi çalışmamızı File / Save for Web ile kaydediyoruz.

http://resim.sanalkurs.net/uploads/16_21.jpg

İş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.

http://resim.sanalkurs.net/uploads/17_14.jpg

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.

http://resim.sanalkurs.net/uploads/18_11.jpg

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.

http://resim.sanalkurs.net/uploads/19_10.jpg

Dersimizin 1. bölümü burada sona eriyor. 2. Bölümde görüşmek üzere...
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=