Malumunuz, Photoshop ile birçok şeyi yapabiliyoruz. Bu “birçok şey” içinde Photoshop’un kullanımının yaygın olduğu en büyük alanlardan birisi de web tasarımı. Web ikonlar, web şablonları, web bannerları gibi birçok uygulamayı rahatlıkla photoshop üzerinde yapabiliyoruz. Hemen hemen tüm tasarım projelerimin başlangıcında öncelikle Photoshop ile çalışıyorum. Bunu yapmamın nedeni sitenin genel arayüzünü Photoshop ile tasarlayarak webe aktarmak. Bu yazımda sizlere Photoshopta yaptığımız bir çalışmanın nasıl web şablonu olarak kaydedileceğinden ve bununla ilgili tekniklerden bahsedeceğim.
Öncelikle Photoshop üzerinde uygulamamızı yapacağımız bir çalışmamızın olması gerekiyor. Ben aşağıda gördüğünüz çalışmayı yaptım ve bunu örnek olarak kullandım. Sizde buna benzer bir çalışmayı basit işlemlerle oluşturabilirsiniz. Çalışmanın uzun uzadıya nasıl yapıldığını anlatmayacağım. Bunu biraz da sizlere bırakıyorum. Çünkü asıl anlatmak istediğim nokta Photoshop ile oluşturulan böyle bir sayfanın nasıl “kesileceği” ve “webe aktarılacağı”. (Zaten ileride Photoshop ile bir web arayüzü tasarlamakla ilgili bir makale yazmayı düşünüyorum)
Yazının Devamını Göster ▼
Çalışmamızı Photoshop üzerinde açıyoruz ve bundan sonra yavaş yavaş kesme işlemine başlayacağız. Bu kesme işleminden kastımız oluşturduğumuz PSD dosyasını Photoshop’un Slice aracını kullanarak belli parçalara ayırmak bu parçalara isim vermek ve bu işlemi yaptıktan sonra “web için kaydetmek”. Benim yapmış olduğum çalışmada izlediğim mantık yazı alanları için büyük parçalar kesmek ve her link içinse ayrı ayrı kesim alanları oluşturmak.
Şimdi bunu nasıl yaptığımıza sıra geldi. Çalışmamızı açtıktan sonra Photoshop’ta Araçlar menüsünden Slice Tool’u seçiyoruz. (K) Bıçak şeklindeki ikonumuzla çalışmamızı kesmek istediğimiz yerlerden kesmeye başlıyoruz. Bunu yaparken mümkün olduğunca mantıklı bölümleme yapıyoruz. Çünkü daha sonra bu çalışma webe aktarıldığında bu alanlar üzerinde değişiklikler yapacağız. Aşağıda yaptığım kesme alanlarına ufak notlar ekledim bu alandan yararlanarak nasıl bir kesim yaptığımı görebilirsiniz.
Gördüğünüz gibi ileride kullanacağım alanlarda kesim işlemlerimi uyguladım ve kesim alanlarımı tamamladım. Kestiğim noktaların herbirine Photoshop otomatik olarak numaralar veriyorlar. Shift+K tuş kombinasyonunu kullanarak kestiğim alanların üzerine 2 kere tıklayarak kestiğim alanlara kendi istediğim isimleri verebilirim. Şimdi çalışmam bu haldeyken File >> Save for Web veya Alt+Shift+Ctrl+S tuş kombinasyonunu kullanarak çalışmayı web için kaydediyoruz.
Açılan pencerede uyguladığımız kesme işlemini detaylı olarak görebiliyoruz. Bu haldeyken Save diyerek açılan pencerede istersek yeni bir klasör açıyoruz istersekte bilgisayarımızda belli bir alana çalışmamızı isim vererek kaydediyoruz. Ben yaptığım çalışmada index.html ismini vererek bir klasör içine çalışmamı kaydettim. Bu kayıt işlemi bittikten sonra isim verdiğiniz dosya .html uzantılı bir dosya olacak ve aynı dizinde bir images klasörüne rastlaycaksınız. Bu dosyayı tarayıcınızda açtığınızda oluşturmuş olduğunuz PSD dosyasının web biçiminde kaydedildiğini göreceksiniz. Webe aktarma işlemi bittikten sonra dosyamız üzerinde değişkilikler yaparak sayfamızı değiştirebiliriz.
DEĞİŞİK TEKNİKLER
Yukarıda anlattığım kesme işlemi yerine yine Photoshop’un kesme işlemini kullanarak web sayfalarımızı farklı şekilde Photoshop yardımıyla oluşturabiliriz. Örneğin yaptığımız PSD dosyasını yine aynı biçimde Slice aracıyla kesebilir ve kestiğimiz alanları tek tek resim olarak kaydedip bu resimleri daha sonra Dreamweaver gibi görsel editörlerde kullanabiliriz.
Bununla birlikte sürekli yaptığım bir teknikte yaptığım çalışmayı yine aynı biçimde keserek Photoshop açıkken Xhtml ve Css kodlarıyla sayfa kodlamamı yapıp resimleri kullanmamdır. Photoshop’taki çalışmama bağlı kalarak kodlamayı bu şekilde yaparım ve referans aldığım sayfaya en yakın tasarımı yapmaya uğraşırım.
Bunun gibi değişik teknikler kullanılarak Photoshop’ta web uygulamalarımızı rahatlıkla yapabiliriz. Umarım faydalı olabilmişimdir.
Hiçbiri
güzel bir makale olmuş tebrikler.. Her ne kadar tasarımcı olmasamda bazen benimde photoshop ile uğraşmam gerekiyor ve site arayüzü olutururken bence kullanılabilecek en sağlıklı yöntem 3. yöntem.. zira photoshop ve dw’nin ekstradan ekledeikleri kodlar tartışılamaz bile :)
Ben de aynen bu şekilde kullanıyorum Photoshop programını. Özellikle şu son yazdığın yerdeki gii;
Bununla birlikte sürekli yaptığım bir teknikte yaptığım çalışmayı yine aynı biçimde keserek Photoshop açıkken Xhtml ve Css kodlarıyla sayfa kodlamamı yapıp resimleri kullanmamdır. Photoshop’taki çalışmama bağlı kalarak kodlamayı bu şekilde yaparım ve referans aldığım sayfaya en yakın tasarımı yapmaya uğraşırım.
Evet Erhan bende bu şekilde kullanıyorum. Tasarıma ilk başladığım zamanlarda ilk tekniği kullanır sonra o tasarımı Dreamweaver’a atar orada işlerdim. Ama artık gelişen teknolojiyle bende geliştim. Daha çok resim bazlı tasarımı ortaya koyarak daha sonrasında kodlama yapmayı tercih ediyorum artık. Böylesi hem tasarımın selayeti hem de benim sağlığım açısından daha iyi oluyor.
Anlattığının farkında ben slice tool kullanmadan çalışanlardanım, sanırım ben bu konularda sivri kalıyorum :)
photoshop u gerçektende ögrenmek istıyorummm paylaşımınız için saolunn
Arkadaşım ne iyi yapmışta anlatmışsın bende ne zamandır bunu öğrenmek istiyordum hiç beklemediğim bi şekilde karşıma çıktı bilgini paylaştığın için teşekkür ederim.