Web Tasarımcıları için 20 Photoshop Püf Noktası

Muhtemelen her web tasarımcısının kollarında kendi favori Photoshop hileleri vardır. İyi bir sebep için. Adobe'nin güçlü görüntü düzenleme özelliği, web tasarım dünyasının temelini oluşturur. Çok az program, bu mükemmel yazılıma ve onun geniş özellik yelpazesine rakip olabilir.

Bununla birlikte, çoğu web tasarımcısı Photoshop'ta kendi yollarını bilse de, her zaman öğrenebileceğiniz daha çok şey vardır. Sonuçta, program sadece güçlü değil, aynı zamanda karmaşıktır. Ayrıca, güncellemeler yoluyla düzenli olarak yeni şeyler eklenir.

Bu nedenle, favori aracınızı keşfetmeye devam etmek iyi bir fikirdir. Bunu yapmanıza yardımcı olmak için, bu makalede bulabileceğiniz en iyi Photoshop hilelerinden bazılarına bakacağız. İş akışınızı iyileştirebilecek, işinizi ve hayatınızı kolaylaştırabilecek, zaman kazandırabilecek ve mümkün olan en iyi web sitelerini tasarlamanıza yardımcı olabilecek şeyler.

Photoshop hakkında daha fazla bilgi edinmeye hazır mısınız? O zaman okumaya devam et.

Sizi Web Tasarım Sihirbazına Dönüştürecek Photoshop Püf Noktaları

Aşağıdaki ipuçları başlangıç ​​seviyesinden daha karmaşık materyallere kadar uzanmaktadır. Her biri, olabileceğiniz en iyi web tasarımcısı olmanıza yardımcı olmak için seçilmiştir.

1. Çalışma Alanınızı Kolaylaştırın

Temel bilgilerle başlayalım. İş akışınızı iyileştirmek için yapmanız gereken ilk şey, Photoshop'u kullanma şeklinizi destekleyecek şekilde kurmaktır. Sonuçta, daha keskin bir aletle iş kolaylaşıyor.

Bu nedenle ilk durağımız Window > Workspace > Graphic and Web . Bu seçeneğin seçilmesi, mevcut araçları web tasarımı için kullanma olasılığınızın en yüksek olduğu araçlarla değiştirecektir.

Bundan sonra Edit > Preferences'a geçin. Burada en önemli duraklardan biri Birimler ve Cetveller. Burada hangi ölçümü seçerseniz seçin (büyük olasılıkla pikseller), gelecek tüm belgeler için varsayılan değer olacaktır.

(Hızlı ipucu: Tek belgeler için cetvelleri değiştirmek için üzerlerine sağ tıklayın ve istediğiniz ölçü birimini seçin.)

Bundan sonra Tercihler > Performans > Geçmiş ve Önbellek'e gidin ve Web / UI Tasarımı'na tıklayın .

Bunu yapmak, önbellek ayarlarını, çoğunlukla birlikte çalışacağınız çok sayıda katmana sahip daha küçük dosyaları tercih edecek şekilde değiştirecektir.

Aynı yerde, geçmiş durumların sayısını da seçebilirsiniz. Bir şeyi geri almak istiyorsanız geri dönebileceğiniz adım sayısı budur.

Son olarak tercihlerden çıkın, tüm belgeleri kapatın ve klavyenizdeki T düğmesine basın. Bu, yazı tipi menüsünün ekranın üst kısmında görünmesini sağlayacaktır. Burada ayarladığınız her şey bundan sonra yeni belgeler için standart olacaktır. Çünkü kimse Myriad Pro'yu bu kadar çok sevmez.

2. Klavye Kısayollarını Öğrenin

Düzenli olarak kullandığınız herhangi bir program için klavye kısayollarını öğrenmek genellikle iyi bir tavsiyedir.

Örneğin bu yazıyı yazarken h2 ve h3 başlıkları oluşturmak için Ctrl+Alt+2/3 kullanıyorum. Ellerimi klavyeden çekmem gerekmediği için editör araç çubuğunu kullanmaktan çok daha hızlı.

Aynı şey Photoshop için de geçerlidir. Basit tuş vuruşlarıyla eylem gerçekleştirmeyi bilmek, menülere tıklamaktan çok daha hızlıdır.

Bu makale boyunca bir dizi klavye kısayolundan bahsedeceğiz. Ancak, en yaygın Photoshop işlemlerinin kısayollarını öğrenmek için bu hile sayfasını da tavsiye ederim. Bunun yanı sıra, yaptığınız şeyler için klavye kısayollarına tekrar tekrar bakmayı alışkanlık haline getirmek de iyi bir fikirdir.

3. Grup ve Ad Katmanları

Photoshop ile çalışırken, çok sayıda katmanla çalışacaksınız. Çoğu öğeyi yalnızca kendi katmanına almakla kalmaz, aynı zamanda parlaklık/kontrast gibi değişiklikler de katmanlar olarak eklenir.

Bu nedenle, çok hızlı bir şekilde kafa karıştırıcı olabilir. Neyse ki, daha az yapmak için bir sürü seçenek var, bunlardan ikisi katmanları gruplama ve adlandırma yeteneği.

İlk olarak, herhangi bir katmana çift tıklayarak adını istediğiniz herhangi bir şeyle değiştirebilirsiniz.

Bu şekilde, bir katmanın arka plan resmi, menü veya kenar çubuğu içerip içermediğini kolayca anlayacaksınız.

Alternatif olarak, tek tek katmanları seçmek için Ctrl tuşunu basılı tutarak veya bir dizi komşu katmanı işaretlemek için Shift tuşunu basılı tutarak aynı anda birkaç katman da seçebilirsiniz. Ctrl+G daha sonra onları bir gruba dönüştürür.

Alternatif olarak, katmanlara sağ tıklayın ve oradan grup seçeneğini seçin. Her iki durumda da katmanlarınız çok daha düzenli hale gelir. Ayrıca, gruplandırılmış katmanları da adlandırabilirsiniz!

4. Filtre Katmanları

Katmanları adlandırmak ve gruplandırmak iyi bir başlangıçtır. Bununla birlikte, onlarca hatta yüzlerce ile çalışırken, yine de kolayca kafanız karışabilir.

Bu durumlarda, katmanlarınızı filtreleme seçeneğiniz de vardır. Bunu yapmak için, türe, ada, efekte, renge ve daha fazlasına göre filtrelemek için Katmanlar menüsünün en üstündeki menüyü kullanın.

Alternatif olarak, Ctrl tuşunu basılı tutup bir katmana veya nesneye tıklayarak Taşı aracını kullanarak doğrudan bir katman seçin.

5. Bir Izgara Oluşturun

PureSolution / Shutterstock.com'dan görüntü.

Izgara, web tasarımında en önemli ilkelerden biridir. Tasarıma düzen getirir ve objelerinizi yerleştirmenize yardımcı olur. Bu nedenle, yalnızca Photoshop'ta bir ızgara oluşturmak mantıklıdır.

Bunu yapmak için Görünüm > Yeni Kılavuz Düzeni'ni kullanın . Alternatif olarak, bir cetvele tıklayıp belgeye sürükleyerek yatay ve dikey kılavuzlar oluşturun. Mevcut kılavuzları taşımak için Ctrl tuşunu kullanın.

6. Renk Örneklerini İçe Aktarın

Renk örneklerini doğrudan Photoshop'a HTML, CSS veya SVG dosyalarından yükleyebilirsiniz. Bu şekilde, logo gibi mevcut varlıklarla çalışırken renk şemanız için harika bir başlangıç ​​noktanız olur.

Bu Photoshop hilesinden yararlanmak için Renk Örnekleri panelini açın, sağ üst köşedeki açılır menüyü tıklayın ve Renk Örneklerini Yükle'yi seçin . Şimdi söz konusu dosyaya gidin ve yeni renk örneğinizi içe aktarmak için açın.

7. Özel Şekilleri Kaydet

Özellikle aynı site veya benzer tasarıma sahip web siteleri için birden fazla sayfa tasarlarken, kendinizi tekrar tekrar aynı nesneleri ve şekilleri kullanırken bulacaksınız. Bu nedenle, hızlı yeniden kullanım için bunları özel şekiller olarak kaydetmek mantıklıdır.

Bunu yapmak için, yol seçim aracıyla (siyah ok) söz konusu şekle sağ tıklayın. Ardından, Özel Şekil Tanımla'yı seçin. Bunu yaptıktan sonra, Özel Şekil aracının üst çubuk seçeneklerinden bu şekle erişebilirsiniz. Sadece Shape: yazan açılır menüyü tıklayın ve kaydettiğiniz şekli seçin.

8. Arka Plan ve Ön Plan Renkleri Arasında Geçiş Yapın

Simgeye tıklamadan arka plan ve ön plan rengi arasında iki geçiş yapın, klavyenizdeki X tuşuna basın. Ayrıca, renklerin basit siyah beyaza dönmesini istiyorsanız, D tuşuna basarak bunu yapabilirsiniz.

9. Opaklığı Klavye ile Değiştirin

Başka bir klavye kısayolu: Opaklığı değiştirebilen herhangi bir araç için bunu klavyeden yapabilirsiniz. 1'den 0'a kadar olan sayılar, opaklığı %10 ile %100 arasında herhangi bir değere ayarlayacaktır. Aynı şey, katmanların opaklığı ile de çalışır.

10. Düz Çizgiler Çizin

Herhangi bir araçla düz bir çizgi çizmek için Shift tuşunu basılı tutmanız yeterlidir. Bundan sonra, otomatik olarak çivi gibi düz olacak bir çizgi (hem yatay hem de dikey) çizebilirsiniz. Alternatif olarak, aralarında düz bir çizgi oluşturmak için iki farklı noktayı tıklayın.

11. Örnek Renk

Photoshop hileleri çantamızda bir sonraki adım, herhangi bir rengi örnekleme yeteneğidir. Herhangi bir nesneden renge ihtiyacınız varsa, Alt düğmesini basılı tutun ve istediğiniz renk tonuna tıklayın. Bu, hem Fırça , Kurşun Kalem , Boya Kovası hem de renkleri kullanan diğer araçlarla çalışır.

12. Seçime Ekle veya Seçimden Kaldır

Varolan bir seçime shift tuşunu basılı tutup dahil etmek istediğiniz parçayı seçerek ekleyebilirsiniz. Çıkarmak için aynı şeyi Alt düğmesiyle yapın.

13. Birden Fazla Adımı Geri Al

Son işleminizi geri almanın klasik yolu Ctrl+Z kullanmaktır . Ancak, bu yalnızca yaptığınız en son şey için işe yarar. Birkaç adım geri gitmek için Ctrl+Alt+Z tuşlarını kullanın.

14. Fırça Boyutunuzu Dinamik Olarak Değiştirin

Fırça boyutunuzu değiştirmek için açılır menüyü tıklayıp doğru boyuta sürüklemeniz gerekmez. Bunun yerine, Alt ve sağ fare düğmesini basılı tutun ve ardından fırçanızın boyutunu küçültmek ve artırmak için sola ve sağa sürükleyin.

15. Web için Kaydet

Görüntü boyutunun mümkün olduğunca küçük olmasını sağladığından, Web için Güvenli işlevini kullanmak çok önemlidir. Bu site hızını artırmak için çok önemlidir.

Photoshop'ta bunu File > Export > Save for Web ile yapabilirsiniz . Ancak, daha hızlı bir yol Ctrl+Alt+Shift+S kullanmaktır . Rica ederim!

16. Görüntüleri Katmanlar Olarak Açın

Bazen çok sayıda görüntüyü Photoshop'a aynı anda içe aktarmak gerekir. Ancak bunları çalışma alanınıza sürüklediğinizde, bunları manuel olarak yerleştirmeniz istenecektir.

Bunu yapmanın daha pratik bir yolu File > Scripts > Load Files into Stack'tır . Söz konusu görüntülere atın, onları işaretlemek ve iki kez Tamam'ı çarptı. Artık her görüntü otomatik olarak kendi katmanına aktarılacaktır.

17. CSS'yi Doğrudan Photoshop'tan Kopyalayın

Web tasarımcıları için en rahat Photoshop hilelerinden biri, programın dışa aktarabileceğiniz CSS oluşturmasıdır. Uygulamak için hepsini elle yazmanıza veya deneme yanılma yöntemine başvurmanıza gerek yok.

Bundan yararlanmak için, bir katmana sağ tıklayın ve CSS'yi Kopyala'yı seçin. Alternatif olarak, aynı seçeneği bulmak için Katman menüsünü kullanın. Artık stil sayfanıza veya kullandığınız başka bir programa yapıştırmak için gerekli tüm stillere sahipsiniz.

18. Aynı Anda Birkaç Cihaz ve Yönelim için Tasarım

Günümüzde web için tasarım yapmak, çok sayıda farklı cihaz için tasarım yapmak anlamına geliyor. Mobil cihazların dünyanın her yerinde masaüstü bilgisayarları gölgede bıraktığı zamanlarda, mobil tasarımı uygulamak bir zorunluluktur.

Kaynak: ComScore

Neyse ki Photoshop, tasarımınızı farklı biçimlere ölçeklendirmeyi çok kolaylaştıran çalışma yüzeylerine ve akıllı nesnelere sahiptir.

Her ikisini de burada ayrıntılı olarak açıklayabilirim, ancak Phlearn bu konuda benim yapabileceğimden çok daha iyi bir iş çıkaran mükemmel bir eğitim yaptı:

19. Tekrarlanan Görevler için Otomatik İşleme Kullanın

Bir başka harika Photoshop özelliği de otomatik işlemedir. Bu, kaydedilen görevleri manuel olarak gerçekleştirmek zorunda kalmadan tekrar tekrar tekrarlayabileceğiniz anlamına gelir. Bu, örneğin web için çok fazla resim kaydetmeniz gerekiyorsa çok kullanışlıdır.

İşte nasıl çalıştığı. Önce dosyanızı açın. Ardından, Eylemler'i ( Alt+F9 ) açın, Yeni Eylem Oluştur'u bulun ve tıklayın. Bir ad girin ve isteğe bağlı olarak ona bir tuş kombinasyonu ve bir renk atayın.

Eylemlerinizi kaydetmek için Kaydet'e basın. Ardından tekrarlamak istediğiniz işlemi gerçekleştirin. Benim durumumda, bir klasörden bir resim açıp web için başka bir klasöre kaydediyorum.

Tamamlandığında, kaydı durdurun. Artık bu eylemi diğer tüm görüntüler için yeniden kullanabilir ve zamandan tasarruf edebilirsiniz. Photoshop'ta neleri otomatikleştirebileceğiniz hakkında daha fazla bilgi için bu makaleye bakın.

20. Cihazda Önizleme

Son olarak, Photoshop ile birlikte Adobe, çalışmanızı birkaç iOS cihazında önizlemenize olanak tanıyan bir uygulama da sunar. En iyi yanı: Bilgisayarda yaptığınız gibi cihazdaki değişiklikleri gözlemleyebilirsiniz.

Bunu yapmak için uygulamayı yükleyin ve Photoshop'u USB veya wifi aracılığıyla harici bir cihaza bağlamak için Cihaz Önizleme'yi kullanın. Seçeneği Pencere > Aygıt Önizleme altında bulabilirsiniz.

Favori Photoshop Püf Noktalarınız Nelerdir?

Photoshop, orada en çok kullanılan web tasarım araçlarından biridir. Güçlü özellikleri, onu yüksek kaliteli web siteleri ve varlıklar tasarlamak için mükemmel kılar.

Ancak, büyük güçle birlikte büyük bir karmaşıklık da gelir ve özellikle yeni başlayanlar için yazılımda ustalaşmak biraz zaman alabilir.

Öğrenme eğrisini kısaltmak için, yukarıda web tasarımcıları için bir dizi faydalı Photoshop hilesi sağladık. Genel iş akışından otomatik dosya işlemeye kadar pek çok şeyi kolaylaştırırlar.

Photoshop'un içini ve dışını bilmek, kârlılığınız için harika bir yatırımdır. İşleri daha hızlı yapabildiğinizde, daha fazla iş üstlenebilir, böylece daha fazla gelir elde edebilirsiniz. Ve bu asla kötü bir şey olamaz.

En sevdiğiniz Photoshop hilelerinden bazıları nelerdir? Lütfen aşağıdaki yorum bölümünde bize bildirin, böylece hepimiz birbirimize yardımcı olabiliriz.

Creative Stall / Shutterstock.com'dan makale küçük resmi