ile

Tasarımı HTML5 ve CSS3’e dökmek (1) – Font işleri

Genellikle bir web projesine başladığımda, tasarımcıdan tasarım Psd formatında gelir. Bazı tembel tasarımcı arkadaşlar, aynı psd dosyası üzerinde katman katman çalışıp o photoshop gözleriyle oynattırırlar insanı, buradan onlara sesleniyorum. Ayrı ayrı her sayfa için .psd yapın şunu lütfen. Tasarımı koda dökerken kulaklarını baya çınlatıyoruz o photoshop gözlerini açıp kapatırken.

Aşama aşama yapacağımız şeyler şöyle:

  1. PSD olarak gelen dosyadaki fontları webfont’a çevirmek
  2. Tasarımdaki mantıksal öğeleri, hiçbir süsleme kullanmadan saf HTML’ye dökmek
  3. İmajlar, ikonlar, logolar için tasarımcının kafasını ütülemek
  4. Hangi CSS framework’ünü kullanacağımıza karar vermek
  5. Tasarıma özgü CSS kodunu oluşturmak.
  6. JS ile sağlanabilecek interaktif öğeleri jQuery ile yazmak.
  7. Back-End kısımını halletmek. (Bu projeyi wordpress teması olarak oluşturacağız. Bir sonraki seride bu işi yapacağız.)

1. Font çevirme işlemi

Tasarımcıların tasarımlarında kullandıkları fontları web üzerinden, tarayıcı ile uyumlu hale getirmemiz gerekiyor. Genellikle font dosyaları farklı farklı olur ve bunları CSS içinde kullanabilmemiz için uyumlu formatlara çevirmemiz gerekir. Bu çevirme işlemin

http://www.fontsquirrel.com/tools/webfont-generator adresini tarayıcıdan açalım.

Screen Shot 2014-03-06 at 15.55.26

Elimizdeki .ttf veya .otf dosyalarını add fonts diyerek siteye yükleyelim.

Yükleme işlemini yaptıktan sonra, expert seçeneğini işaretleyelim.

Screen Shot 2014-03-06 at 15.46.31

Expert seçeneğinin altında, “Subsetting” bölümünden “Custom subsetting” kısmını seçelim. Fontumuzun Türkçe karakterlerle uyumlu olması için “language” bölümünden “Turkish” seçeneğini işaretleyelim.

Screen Shot 2014-03-06 at 15.27.17

Daha sonra “Download Your Font” butonunu tıklayalım ve fontumuzu zip olarak indirelim.

Screen Shot 2014-03-06 at 15.27.28

Bir adet zip dosyası indirecek.

Screen Shot 2014-03-06 at 15.47.18

Zip dosyasında sitemiz için gerekli olan font ve css dosyası yeralıyor. Ben genellikle font dosyalarını fonts klasörüne atmayı tercih ediyorum. O nedenle dosya isimlerinin başına “../fonts/” eklemek sorunumu çözüyor.

Screen Shot 2014-03-06 at 15.47.35

CSS dosyasının içeriği:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 6, 2014 */

@font-face {
    font-family: 'garamond_three_medium';
    src: url('garamond_three_medium-webfont.eot');
    src: url('garamond_three_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('garamond_three_medium-webfont.woff') format('woff'),
         url('garamond_three_medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'akzidenz-grotesk_bqmedium';
    src: url('akzidenzgrotesk-medium-webfont.eot');
    src: url('akzidenzgrotesk-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('akzidenzgrotesk-medium-webfont.woff') format('woff'),
         url('akzidenzgrotesk-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

kendi asıl CSS dosyamıza eklerken “src: url(‘../fonts/akzidenzgrotesk-medium-webfont.eot’);” değiştirip, bu dosyaları da fonts klasörüne atarsak, daha derli toplu bir klasör yapısı olur.

Şimdilik bu kadar. Bir sonraki yazıda mantıksal öğeleri süsleme veya CSS kodu kullanmadan HTML5’e dökmeye başlayacağız

Yorumla

Yorum

  1. Merhaba kendi sitesini yapmak isteyen birisi , sadece HTML5, CSS3, Javascript, JQuery kullanarak(framework yok, photoshop yok) fron-end kısmını halledemezmi? yani css kullanarak button falan oluşturma işlemleri.