Web tasarım

Web tasarım Grafik tasarım ve meydana getirirken ihtiyaç duyulan bazı programlar vardır. Grafik tasarımda en aşırı bilinen Photoshop ve Corel DRAW, sanal ortam tasarımında ise Adobe Master Collection ve Adobe Dreamweaver. After Effects ise bunlar ufak farkında olunanlardır. After Effects bir dizayn tasarım yazılımı değildir, bir çizim yazılımıda değildir. After Effects bir animasyon programıdır. Peki öyle ise After Effects bizim ne ihtiyacımıza yarar sağlayacak Web genelde durağan hareketsiz grafikler kullanılıyor, oysa animasyon grafikler kullanımı sanal ortam sitesini daha şık göstermektedir. After’ın temelde mantığı keyframedir. Yani anahtar kareler. Bu Anahtar kareler, efektimizin gelişini gidişini konumunu ve duruşunu belirtirler. Keyframe olmaksızın bir animasyon düşünülmemektedir. Nasıl ki bir yapılırken web sitesi grafiksiz düşünülmez ise. After Effects’i bir sayfa ile belirtmek olası değildir. Burada her zaman kısaca teorik şekilde keyframe’nin tanıtımını yapıcaz. üst resimde sağ tarafta görülen saate aynı bir ikon bulunmaktadır. Bu saate benzer ikonlar her layer’ın (çalışma katmanlarının,photoshoptaki katmanlar gibi düşünebiliriz) altında her zaman bulunurlar. Bunlar keyframeler yani anahtar karelerdir. After Effects’de her bir layerin ve efektin alt menülerinde her zaman keyframe ikonları olur. Bu keyframeler ile animasyonlar tamamlanır. Tekrarlamak gerekirse; keyframeler bir efektin hareketini konumunu ve zamanını belirler. Yani on.saniyede yaklaş, 20.saniyede uzaklaş.Web tasarım Keyframeler bu verilen komutların kaydını tutarlar ve verilen yıllarda verilen değerleri uygulamaktalar. After Effects’deki keyframe mantığına sırf yüzeysel olarak kısa bir şekilde deyindik. Teorik olarak keyframeler verilen senelerde verilen kayıtları tutarlar. siteye hazırlayacağımız hareketli bannerlarda bir çok aşırı keyframeler ile çalışıcaz. Bu makale’de sırf yüzeysel olarak teorik keyframe bilgisi anlatılmış ve after effects’in tanıtımı yapılmakta idi. Yeni başlayanlar hiç bilmeyenler açısından teorik olarak kısa bir tanıtım makalesidir. Web tasarımcının çantası Web tasarım ile uğraşanlar bir aşırı programdan ve ilave bileşenlerden yardım alarak dizaynı gerçekleştirirler. Tasarımın en mühim kurallarından bir tanesi renklerdir, renk seçimidir. Renk seçimleri tasarımcının çantasındaki en önemli malzemesidir, tasarımcı renklerin uyumluluğu ile ilgili bir programdan ve bir internet sitesinden yardım alabilir. Tasarımcının çantasındaki belki en basit fakat en çok fazla başvurduğu program Adobe Photoshoptur. Adobe photoshop’un yapabildikleri sınırlı olsada bir çok fazla hızlı tasarım için güzel seçenekler sunmakta. Tasarımcının çantasında olması gereken programları sıralayalım. Photoshop -Adobe After Effects -Adobe Premiere -Adobe ıllustrator -Adobe Fireworks -Adobe Dreamweaver ve CorelDRAW aslında internet tasarım yaparken içlerinden sadece photoshop ve ıllustrator yeterli olacaktır fakat yinede bir tasarımcının diğerleri meselesi için da ön bilgi sahibi olması yararına olacaktır. örneğin Adobe After Effects programı bir animasyon ve video düzenleme programıdır, hareketli grafik tasarımları sunmaktadır, tasarımcının hareketli ova geçiş vs bu gibi ihtiyaçlarında başvuracağı en azından küçük flash düzenlemeleri yapması için güzel bir programdır. Tasarımcı sabit düşünmemeli. Yeri geldiğinde bir çok fazla tasarım programından yardım alabilmelidir, hepsine tam hakim olması da beklemez ama en azından ön bilgi sahibi olmalıdır. Tasarımcının çantası bu kadarla da sınırlamak haksızlık olur gerçekte, daha bir çok fazla tasarım programı ve tasarım bileşenleri ile çalışabilirler. Internet tasarım aslına bakarsanız sınır tanımaz. Web tasarım da CSS kodları Web tasarım için kolay ve şık tasarımlar yapmamızı sağlamakta. Bu tasarımların kullanımlarında bilmemiz gereken mühim kısa yol olarak kullanabileceğimiz bazı kısaltılmış kodlar olmaktadır. Bunlar hem süre açısından hemde kolaylık açısından etmek istediğimizi kolay bir bir duruma getirir. CSS’debir fasıla sima tasarlarken en çok fazla kullandığımız ana özellikler, background yani arka pilan; border (kenarlık) ve fontlar. örnek Css’de yapacağımız bir temlateyi öncelikle bunun üzerine inşa ediyoruz. Geri pilan kenarlık ve fontlar. Bu üçü için çok aşırı vakit kaybetmemize gerek yoktur. Kısaca; background-image yazıyı: url(resim.jpg); – resim dizinini belirlemek için background-color yazıyı: #ccc; – renk belirlemek için background-repeat metni: no-repeat; – arkapilanın tekrar etmemesi çin background-position metni: left-top; – arkaplan resminin sol üst köşeden başlamasını için pozisyon ayarı. background-attachment yazıyı: fixed; – geri pilanı sabitlemek için. bundan öncelikle arka pilan pozisyonunu belirtmek için background-repeat komutunu no-repeat olarak değiştirmemiz gerekiyor. sanal ortam tasarım templateleri için sadece bunlar değil; border kenarlık kısımlarıda mühim bir şeydir. Kenarlıkları şu şekilde özelleştirebiliriz; border-width metni: 1 px; – çizgi genişliğini 1 px olarak ayarlar. border-style yazıyı: solid; – kenarlığı tek çizgi olarak ayarlar. border-color yazıyı: #00aeff; – ve çizgi rengini ayarlar; yani #00aeff (turkuaz mavisi) Renk kodlarını photoshoptan’da alabilirsiniz. Bunlar kadar mühim olan, ki tasarımcılar bilir ki; bir tasarıma uygun ova karakterleride çok aşırı mühim bir şeydir. Kurumsal bir tasarıma, cafcaflı ova karakterleri kullanırsak pekte hoş durmaz, tasarımı gösterenlerden biride yazı karakterleridir. Css’de arayüz tasarlarken; farklı farklı font renk ve puntolarda yazılar yararlanırız. Bu yazıları renk stil ve puntolarını şu şekilde belirleyebiliriz. font-family yazıyı: arial; – arial fontunu belirtir. font-size metni: 12px; – punto (yazı boyutu) belirler. font-weight yazıyı: bold; – fontun kalın olmasını sağladık line-height yazıyı: 10px; – satır arasında ki boşluğu belli eder on px yazıldığında satırlar arası boşluk 10px şekilde ayarlarlanır. fontlarına diğerleri kadar ehemmiyet verin, renk punto ve fontları tasarımınıza müsait olarak tercih belirleyin

Web tasarım