07 Nis
Tasarımcı 1 Yorum10.539 kez okundu

Web Tasarımda PSD çizim teknikleri

Kategori: Web Tasarım

960-grid-systemAjanslarda ya da freelance olarak çalışan web tasarımcıların en zorlandıkları konulardan biri de Photoshop‘ta tasarım yaparken düzenli çalışmamaktan doğan revizelerin zor yapılışıdır.Web  Tasarımını yapacağınız site taslağını bir kağıda çizdikten sonra Photoshop‘a geçmek çok daha mantıklı olacaktır. Sonraki aşamalar ise işinizi kolaylaştıracaktır.

Photoshop’ta Ölçülü ve Düzenli Çalışma

Ölçülü çalışma konusunda Türk tasarımcıların en büyük eksiği yabancıları örnek almamaktır. 960.gs ölçülü bir tasarım için en ideal yöntem. Hesaplama yapmak için hiç zorlanmadan kullanacağınız grid sistemi ile bu işi çözmüş olacaksınız.

http://github.com/nathansmith/960-Grid-System/zipball/master Bu adresten 960 grid sistemini indirin ve hangi programda tasarım yapacaksanız onun altında bulunan şablonlardan birini seçin. Ben Photoshop kısmını anlattığım için onu seçip açıyorm.

960gs-tasarim

Gördüğün gibi ölçülü bir şekilde gridlere ayrılmış dosyanız hazır. Sitenizin yükseklik ölçüsünü biraz daha fazla tutabilirsiniz. Çünkü iç sayfaların tasarımına da anasayfa üzerinden devam edeceksiniz.

1020 piksel ölçüsünde ve kenar boşluklarını çıkardığınızda 960 piksel de çalışabileceğiniz bir site şablonu mevcut.

Ayrıca http://grids.heroku.com/ bu sayfadan da belirlediğiniz boşluklara göre özel css dosyanızı hazır olarak indirmeniz de mümkün.

Örneğin sitenizin orta kısmını ve yan menüsünü çok kolay bir şekilde 300 – 620 şeklinde ayırmanız mümkün. Piksel ölçmenize de gerek yok. Çünkü bütün aralıklar bu şablonda 60 px (pembe ile boyanmış alanlar) Aradaki sutun genişliği de 20 px olduğu için 4 x60 px + 20×3 = 300 px olarak çözmüş oluyoruz.

181 px, 329 px gibi küsürlü ölçülerle uğraşmadan tam ölçülerle çalışmak yaptığınız işi hem iyi bir standrta taşıyacak hem de front end developer olarak çalışan kişi hiç yorulmadan slice lara ayırabilecektir.

Düzenli Çalışma Teknikleri

Photoshop’ta düzenli çalışmak için Group Layer kısmını mutlaka kullanın ve group klasörleri ile tasarımınızı bir düzene sokun. Örneğin

960-grid-sistemi-group-calisma

Resimde de gördüğün gibi sitenin id ile kodlanacak kısımlarını farklı group lara ayırmalısınız. Ve bunlar içinde bulunacak her class için de bunu yapmalısınız. Peki neden?

Revize talepleri geldiğinde dağınık bir layer yapısından yaptığınız tasarım öğelerini bulup yer değiştirmeniz çok zor olacak ve zamanınızı alacak. Bu nedenle çalışmanızda bu düzeni korursanız zamandan ve revizedeki yorgunluktan da siz kazanacaksnız.

Yeniliklere açık olmak ve bunları da kullanmak gerekiyor. Tüm tasarımcı arkadaşlara şimdiden kolay gelsin.

"Web Tasarımda PSD çizim teknikleri" yazısı için 1 yorumyapılmış.

  1. Kafa dedi:

    hocam paylaşım için teşekkürler grid sistemini uzun zamandır biliyorduk fakat hiç kullanmamıştım bu yazınız ile ilk defa uygulamaya geçiyorum.

Kafa için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

wordpress Temalar

Wordpress Tema Tasarımı
ücretiz wordpress mizah-eğlence-komedi teması
Wordpress SEO Teması

Abonelik

  • RSS

    Yazıları ve yorumları takip edin.

  • Friendfeed

    Friendfeed aracılığı ile yazılarımıza yorum yapabilir ve arkadaşlarınızla paylaşabilirsiniz.

 
Hakkında

Web tasarım günlüğümüzde özellikle Wordpress konusunda bilgiler bulunmaktadır. Seo hakkında bilgiler ve Wordpress eklentilerinin kullanımı anlatılmaktadır.
Tasarım yaparken bilmemeiz gereken püf noktalar belirli zaman aralıklarıyla yazılmaktadır.
Amaç Dizayn

AmaçSEO Teması

© 2011 Web Tasarım – Tasarım Günlüğü - Web tasarım hayal gücünüzle sınırlı değildir. Tasarım öğrendikçe gelişir.

Sitede yer alan tüm içerik Web Tasarım – Tasarım Günlüğü'na aittir.

Tasarım: AmacDizayn | Site Haritası