Photoshop ile Web Tasarımına 10 İpucu

PhotoshopPhotoshop’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.

AdobeWordPress Logo

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

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

Foreground-BackgroundALT/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.

Bu da ilginizi çekebilir  Photoshop ile Yüze Sıçrayan Boya Efekti

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

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

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 Aracını Tanıyalım

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. https://www.adobewordpress.com/photoshop-ile-gorsellerinizi-sikistirarak-web-sayfanizin-acilis-hizini-arttirin/
  2. https://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/