Web tasarımcının el çantasında olması gerekenler!.

Bir çok makale, yazı, video var bu konu hakkında. Aslında […]

Bir çok makale, yazı, video var bu konu hakkında.

Aslında burada bahsedeceğim şeyler bu işe ilk başlamış arkadaşlar için pek bir şey anlam ifade etmeyebilir.

Şahsen ben kullandığım yöntemleri ve araçları yazmak istedim.

Öncelikle tasarım yaparken yapılan ar-geydi, tasarım rengiydi, site yerleşimiydi vs bunlara girmeden direk neler yanında kullanılabilir bunlardan bahsedeyim.

Kullandığım program Photoshop CC, Fireworks vs değil yani.

Benim kullandığım ve vazgeçemediğim ilk şey 1140px. Kimi 960px kullanıyor ama artık ekranlar büyüdü, responsive olayıda vazgeçilmez oldu bu yüzden dar bir alan kullanmaya gerek yok.

1140px Responsive CSS   1140px.com

 

1140px’lin öncelikle elinizin altında PSD dosyası olması lazım. Bu birader Github sayfasından paylaşmış, genişliğini canvas size ile 1920 veya 2000 yaparak rahatlıkla kullanabilirsiniz.

Tasarımı yaptınız ve sıra siteyi parçalamaya geldi.

Tek tek tüm resimleri, iconları, layerları dosya açıp kaydetmek yerine en kolay nasıl yaparız buna bakalım.

En kolay dosyaları dışarıya aktarmanın yolu Photoshop’a eklenen bir script, ismi Layer Saver. Ferdi kardeşim bu yazısında oldukça açıklayıcı bir şekilde anlatmış kullanımını, eklemesi kaydetmesi de oldukça basit. Sadece şunu söyleyebilriim, pngleri kaydetmek için jpgleri silin, jpgleri kaydetmek için geri alıp pngleri silin. Tümünü png kaydetmeye gerek yok, png dosyalar daha büyük yer kaplar.

Siteyi de parçaladık sıra geldi, kodlamaya.

Kodlamada da yine 1140px kullanıyoruz. Css dosyasını siteye ekledikten sonra colonları class kısmınıa ekleyince site oluşuyor zaten. 1140px css dosyasına buradan ulaşabilirsiniz.

Kendi sitelerinde colonlara col1 col2 diye isim verdikleri halde css dosyasında bu isim farklıdır. Benim kullandığım “container12” sitenin ana kısmını kapsıyor. Diğer classlar ise col1 değil column1 column2 diye 12’ye kadar gidiyor. Eğer sağıda boşluk olmasın isterseniz omega, solunda boşluk olmasın isterseniz alpha class eklemeniz gerek. İki yanında da boşluk olmaması için ikisini de ekleyin.

Kodlama konusunda neredeyse tüm kodlamalarımda kullandığım başka bir icat “Font Awesome“.

Zaten oluşturduğum dosyada 1140px ve Font Awesome cssleri başta ekli oluyor. Bunların haricinde bir de reset.css var, Normalize.css‘de kullanılabilir. Buradan bakınız.

webfonticon (1)

Font Awesome konusunda ise tasarımınıza eklemenin farklı yolları var. 1. yol fontu bilgisayarınıza yükleyin ve kendi yayınladıkları Pdf dosyasını indirin ve pdf dosyasından iconları yazı kopyalıyor gibi kopyalayıp tasarımda da yapıştırın. Diğeri ise Flaticon’un yayınladığı bu paket. Bunu da ister png ister vektörel olarak indirip kullanabilirsiniz.

icomoon

Font ikon için kendi kullandığını ikonları da svg olarak kaydedip Icomoon‘dan font ikona çevirebilirsiniz. Tavsiyem artık olabildiğince bitmap kullanmayın.

Owl Carousel

Responsive ise artık vazgeçilmez. Kesinlikle bir responsive.css kullanmalısınız.Aslında 1140px’in responsive özelliği de var fakat her zaman kendiniz de müdahale etmelisiniz.

 

Hemen hemen tüm sitelerde kullandığım olaylar bunlar, jQuery olayı ise biraz daha zevke kalıyor. Slider için genelde Bx Slider ve Easy Slider‘ı, Carousel slider için ise kesinlikle Owl Carousel’ı  kullanıyorum.

Geri kalan her şey tasarıma veya ihtiyaca göre değişir.

Sizinde bu şekilde bırakamadığınız bağımlısı olduğunuz araçlar varsa paylaşın bilelim:)

Hayırlı işler:))

| Yayın tarihi: 28 / 02 / 15
Bilgi / Web Tasarım | 0 Yorum
  • Mutlu Ol Yeter Nerede Çekiliyor?

    Nerede?

  • Web Whatsapp geldi!

    Whatsapp sonunda web üzerinden de etkin hale geldi.

  • Mobil Platformlarda FullWidth Sorunu!

    Mobil’de 100% Width Sorunu!

we love design & photography
uğradığınız için teşekkürler.
Bir sonraki işte görüşmek üzere
!
İletişim.
info[at]guvenceylan.net
Menu