Psd To HTML Nasıl Yapılır?

PSD To HTML Nedir? Gelişen teknoloji ile bilgisayar destekli tasarım ve çizim yaygın olarak kullanılmaya başlanmıştır. Psd to HTML, Adobe Photoshop programı üzerinden hazırlanıp psd formatında kaydedilmiş olan tasarımların sanal ortama aktarılması için yapılması gereken bir kodlama türüdür. Grafikerlerin ya da bir ajansın göndermiş olduğu grafik dosyası ilk etapta html formatında kodlanır. Yapılmış olan grafik tasarımında ihtiyaca göre javascript kodlamaları hazırlanarak html tasarım ile birlikte çalışır duruma getirilebilir.

PSD to HTML’ nin nasıl yapıldığına geçmeden önce PSD ve HTML’ nin ne olduğuna ayrı ayrı göz atalım.

PSD Nedir?​

Psd nedir (Photoshop Document); Adobe Photoshop programında kaydedilen dosyaların formatıdır. PSD dosyasında oluşturulan katmanlar kaydedilmiş şekilde bulunur. Program tekrar açıldığında psd uzantılı dosyalardaki veriler işlenebilir hale gelir.

HTML nedir?​

Html nedir, bir işaretleme dili sistemidir. Sanıldığının aksine bir programlama dili olmayan HTML, web sitelerinin oluşturulmasında kullanılır. Mozilla Firefox, İnternet Explorer ve Google Chrome gibi tarayıcılar işledikleri HTML kodlarını web sayfasına dönüştürürler.

Psd dosyasının HTML’ ye dönüştürülme sürecinde yapılan anlaşmaya göre html tasarım, açık kaynaklı ya da özel kodlu bir içerik yönetim sistemine giydirilmektedir. Kaynak içerik yönetim sisteminin en yaygın kullanılanı WordPress’tir. WordPress içerik yönetim sistemlerinin yanı sıra seo olarak bilinen arama motorları optimizasyonlarında da oldukça başarılıdır.

Özel kodlu yazılımlar ise tamamen müşteriye göre yazılır ve güvenlik konusunda anlaşmalar yapılır. Bu yazılımlarda olası durumlarda sisteme müdahale edebilecek tek kişi yazılım yazan firma veya kişidir.

Peki psd dosyasını html’ ye çevirirken nelere dikkat edilmelidir? Psd to html nasıl yapılır?

PSD to HTML Nasıl Yapılmalıdır?​

Photoshop’ ta bir PSD dosyası katman şeklinde yapılmalıdır. HTML’i kodlayacak kişi ya da kişilerin bu PSD dosyasını rahatça anlayabilmelerini sağlamak için katmanlar gruplandırılmalı ve bu işlem bittikten sonra dosya PSD formatında kayıt edilmelidir. Hazırlanan PSD dosyasını alarak HTML’ i kodlayan kişi de düzenli bir şekilde ve herkesin anlayabileceği tarzda kodlanma yapmalıdır. Sadece kod düzeni değil, dosya düzeni de oldukça önem taşımaktadır. Dosya açıldığında font dosyaları ayrı, css dosyaları ayrı, resim dosyaları ayrı dosyalarda görüntülenebilmelidir. Bu düzenli çalışma sayesinde arka planı kodlayan kişi işini daha kolay yapar ve ileride bir değişiklik yapmak gerekirse düzenleme basit şekilde sağlanabilir.

PSD to HTML’de Hangi Programlar Kullanılabilir?​

İlk aşamada tasarımın oluşturulmasında Photoshop programı kullanılmaktadır. Tasarımınızın içine nitelikli görseller yapmak isterseniz Adobe Illustrator programını da kullanmanız mümkündür. Oluşturulmuş bir tasarımı HTML şeklinde kodlayan kişi derleyici programlar kullanılır. Derleyici programlar arasından Adobe’nin Dream weaver programını, ücretsiz bir açık kaynak olan Notepad++‘ ı veya Sublime Text editörünü kullanabilirsiniz. Farklı formatlara sahip pek çok derleyici program olsa da en sık kullanılan popüler ve kullanışlı uygulamalar bunlardır.