Photoshop ile web tasarımına 10 ipucu

Page 1

Ad o b ew o rd p ress. co m / Ph o to sh o p D ersl eri / İ p u çl a rı / Ph o to sh o p i l e W eb T a sa rı m ı n a 1 0 İ p u cu

Photoshop ile Web Tasarımına 10 İpucu Vatanay Özbeyli tarafından 02 Haziran 2013 tarihinde yazıldı. ~ 4 Yorum + Değiştir

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

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.

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


ALT/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.

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

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


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-gorsellerinizisikistirarak-web-sayfanizin-acilis-hizini-arttirin/ 2. http://www.adobewordpress.com/photoshop-kisayol-tuslari/ 3. http://help.adobe.com/en_US/photoshop/cs/using/WSD578BD7D07BC-46f6-AAC2-6E491E8AD818a.html 4. http://1200px.com/

Benzer Konular: Photoshop ile Görsellerinizi Sıkıştırarak Web… Photoshop Kısayol Tuşları WP Smush.it ile Görsellerinize Hükmedin! CSS Gradient Arkaplan ve Performans Photoshop’u Türkçe Yapma, Türkçeleştirme


Yazı Kategorisi : İpuçları , Photoshop Dersleri Anahtar Kelimeler : design , dizayn , ipuçları , Photoshop Dersleri , tasarımı , tips , web


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.