Photoshop ile Web Tasarımına 10 İpucu

photoshop logo Photoshop ile Web Tasarımına 10 İpucuPhotoshop’u daha efektif kullanmanın onlarca yolu var ve bizler her geçen gün bir yenisini daha öğreniyoruz.

Sizler için, Photoshop ile web tasarımı taslakları oluştururken işinize yarayacak birkaç tavsiyemiz var. AdobeWordPress daha iyi tasarım yapmanız için yüzlerce makale sunuyor. Fakat bu sefer amaç tasarım sürecini ve işlevini arttırmak.

Photoshop ile web tasarımındaki önemli 10 kritik maddeye birlikte göz atalım.

1.Grid sistemini kullanın

Grid (ızgara) sistemini kesinlikle kullanmalısınız. Gridler sayesinde daha ölçülü ve düzgün tasarımlar oluşturabilirsiniz. Gridler sizin rehber çizgileriniz olacaktır.

110 Photoshop ile Web Tasarımına 10 İpucu

Web tasarımındaki birçok can sıkıcı problemlerden grid sistemi kullanarak kurtulabilirsiniz. Kolay ve doğru grid yöntemi için Grid System Generator türündeki ücretsiz uygulamalardan yararlanın.

2.Her şeyi Photoshop’a atın gitsin

Tasarım yaparken yaptığımız en büyük hatalardan biri görselleri siteye yerleştirirken kaybettiğimiz zaman ve ağırlık dengesidir. Photoshop ile web tasarımı yaparken ilerde kullanmayı düşündüğünüz tüm görselleri PSD dosyanıza atın ve hızlıca sağa sola serpin. İster istemez bir ağırlık dengesi oluşturacaksınız.

Daha sonra ise tasarım sürecinde gördüğünüz hataları teker teker düzeltin. Böylece obje yerleştirme yüzünden zaman kaybetmeyeceksiniz.

3.Belge hazır ayarlarını özgünleştirin

Yeni çalışma alanı oluşturmak için bildiğiniz gibi CTRL/CMD+N tuşlarına basıyoruz. Açılan pencerede bütün çalışma alanlarınız için özel çalışma türleri oluşturun. Web bannerları için, iOS ve Android cihazları için, logolarınız için, her şey için. Ölçütlendirmeyi yaptıktan sonra Save Presets alanına gidin ve aşağıdaki gibi proje boyutlandırmanızı kaydedin.

new document preset Photoshop ile Web Tasarımına 10 İpucu

Böylece her defasında aynı ayarlarla uğraşmanıza gerek kalmayacak.

4.Yazı tipinizi varsayılan olarak ayarlayın

Tüm açık çalışma alanlarını kapayın. Window > Character alanına gidin ve en sık kullandığınız yazı tipi ailesini, kalınlığını, harf-satır boşluklarını ve rengini seçin. Böylece her defasında aynı seçimi yapmak zorunda kalmazsınız, hem de  Photoshop’un varsayılan yazı tipi Myriad’dan kurtulursunuz.

5.Hızlı renklendirmelere hakim olun

fore background Photoshop ile Web Tasarımına 10 İpucuALT/OPT+Delete tuşuna basarak seçili yazı, şekil veya katmanı foreground color ile boyayabilirsiniz. CTRL/CMD+Delete ile ise aynı işlemi yapıyor fakat bu sefer boyama işlemini background rengine göre yapıyor. D tuşu renklerinizi siyah ve beyaza çevirirken X tuşu ise iki rengin yerini değiştiriyor.

6.Organize çalışın

Seçili katmanları grup yapmak için CTRL/CMD+G tuşunu kullanabilirsiniz. İçerikleri, görselleri ve her türlü illüstrasyonu gruplamak çalışma alanınızı daha düzenli kılacaktır. Böylece çalışırken fazlasıyla zaman kazanacaksınız.

katmanlar Photoshop ile Web Tasarımına 10 İpucu

7.Smart Objects kullanın

Filter > Convert for Smart Filters ve üzerinde çalıştığınızı layerı sağ tıklayarak Convert to Smart Object diyerek akıllı objeler oluşturabilirsiniz. Bu objeler üzerine uyguladığınız efektleri katmanın aşağısında listeler ve yeri geldiğinde geriye dönüp efekt ayarlarıyla tekrar oynamanızı mümkün kılar. Özellikle büyük boyutlardaki görsel rötuşlerinde büyük önem taşıyan bu teknik hızınıza hız katacaktır.

8.Kısayol tuşlarını kullanın

Her programda olduğu gibi Photoshop için de onlarca kısayol tuşu var. Copy, Paste, Cut, New ve Open… Bunlar sadece bildiklerimiz. Sık kullanılan Photoshop kısayol tuşlarını öğrenmek için aşağıdaki makaleme göz atın.

Photoshop Kısayol Tuşları

9. Snap ayarlarınızı düzenleyin

snap to grid Photoshop ile Web Tasarımına 10 İpucu

View > Snap bölümünden yukarıdaki görseldekine benzer ayarlar yapın. Böylece çizimleriniz köşelere otomatik olarak tutunacak, eksik veya fazla büyültme, küçültme, döndürme hataları bir daha başınıza gelmeyecektir.

10.”Save for Web” kullanın

Photoshop’un Save for Web (Web için Kaydet) seçeneği, biz web geliştiricileri için büyük önem taşımaktadır. File > Save for Web seçeneğinden dosyalarınızı kaydedin.

Aşağıdaki makalemi okuyarak bu işlemi daha detaylı araştırabilirsiniz.

Photoshop ile Görsellerinizi Sıkıştırarak Web Sayfanızın Açılış Hızını Arttırın

save for web Photoshop ile Web Tasarımına 10 İpucu

Bu kaydetme aracı sayesinde kalite kaybını minimuma indirip dosya boyutunu büyük oranda azaltabiliriz. Web sayfanızdaki görsellerin dosya boyutunu azaltamanız;

  • Sitenizin daha hızlı açılmasına,
  • Ziyaretçilerin daha az kota harcamasına,
  • Açılış hızına eşdeğer Google puanınızın artmasına,

ve daha birçok işe yarar sonuç verir.

Kaynaklar

  1. http://www.adobewordpress.com/photoshop-ile-gorsellerinizi-sikistirarak-web-sayfanizin-acilis-hizini-arttirin/
  2. http://www.adobewordpress.com/photoshop-kisayol-tuslari/
  3. http://help.adobe.com/en_US/photoshop/cs/using/WSD578BD7D-07BC-46f6-AAC2-6E491E8AD818a.html
  4. http://1200px.com/
facebook Photoshop ile Web Tasarımına 10 İpucutwitter Photoshop ile Web Tasarımına 10 İpucudiggit Photoshop ile Web Tasarımına 10 İpucutumblr Photoshop ile Web Tasarımına 10 İpucuemail Photoshop ile Web Tasarımına 10 İpucugoogle Photoshop ile Web Tasarımına 10 İpucustumbleupon Photoshop ile Web Tasarımına 10 İpucupinterest Photoshop ile Web Tasarımına 10 İpucubuffer Photoshop ile Web Tasarımına 10 İpucuflattr Photoshop ile Web Tasarımına 10 İpucureddit Photoshop ile Web Tasarımına 10 İpuculinkedin Photoshop ile Web Tasarımına 10 İpucu


  • Gökhan Dalkılınç

    Yeni başlayanlar için 10 numara bir kaynak olmuş, alışkanlık haline getirilirse zamandan çok büyük tasarruf edilir. :)

  • ekrem

    ya herşey süper diyecek yok süper fotoşop kullanıcısıyım diyelim öyleyim ama yanlız foto için web için neden çok geçiş bir yayın yapmıyorsunuz bence çok fazla fotoşop kullanıcısı var ama şu sıkıntı var fotoşopta bir fotoşopcunun en kral siteyi hazırlaması otuz dakikayı geçmez ama gel görelim bu konu hakkında döküman çok az

    • http://www.adobewordpress.com/ Vatanay

      İçerisinde uygunsuz linkler bulunan yorumunuzu sildim. Photoshop ile site çizimi son yıllarda türedi. Öncesinde insanlar eline kağıt kalem alıp çizerdi. Yahoo, Facebook ve Twitter böyle ortaya çıktı. Bahsettiğiniz PSD to HTML ise onu ne video ile, ne de makale ile anlatabilirim. Çünkü her kalıbı tek tek JS, CSS ve HTML ile iskeletlendirmek gerekiyor. Egemen Özbeyli bu konuda makaleler yazıyordu ama kendisi yoğunluğu sebebiyle şu sıralar fazla zaman ayıramıyor.

  • ekrem

    mesela kendi sitemde çok uğraştım jet-film.com , sitesinde bir türlü başaramadım biraz premiumfilmizle.com ,sitemde fotoşopta yapmaya çalıştığım noktalar vardı yine başarılı olamadım bu konu hakkında bana destek verecek olan arkadaşlar olursa buna çok sevinirim en azından ,jet-film.com yada premiumfilmizle.com sitesinin tasarımını adobe de yaparım.