Adobe Photoshop CS5'te Akıllı Nesneler. Illustrator ve Photoshop birlikte çalışır: Akıllı Nesneler

Görsel olarak bir nesne (örneğin düğmeler) için katman sayısı, düzenleme yeteneği korunurken nasıl azaltılır?
Mizanpajlarda üstbilgi ve altbilgiyi tek bir katmanda birleştirerek katman sayısını azaltma dahili sayfalar, hala onları değiştirme olasılığını bırakırken?
Bir düzen tasarımcısının, tek bir çizgiyi oluşturan bir veya iki piksel çizgisinden, gölgelerden, ayrıca düğmelerden ve simgelerden çizgiler kesmesini nasıl kolaylaştırabilirim?
Sayfadaki aynı türdeki tüm öğelerde hızlı bir şekilde nasıl değişiklik yapılır?
Kaliteyi kaybetmeden ve efektlerin doğru oranlarını korumadan bir raster görüntü nasıl küçültülür (200*200px nesne için 5px gölge, 100*100px boyutundaki aynı nesneden tamamen farklı görünür)

Tasarımcı olarak çalışıyorum ve son birkaç projede Smart Object kullanıyorum. Bu özellik Photoshop'ta uzun süredir var ama web tasarımında kullanma fikri şahsen bana yakın zamanda geldi. Belki bu bir bisiklet icat etme girişimi ama bence paylaşmaya değer.

Akıllı Nesne, raster veya vektörden görüntüler içeren bir katmandır Photoshop katmanları, tüm stilleri ve efektleri düzenlenebilir bir durumda tutan veya Illustrator katmanları. Akıllı Nesne katmanları özel bir simgeyle işaretlenmiştir (Şek. 1).

-de çift tıklama Bu simge üzerinde farenin sol düğmesi açılır yeni dosya(.psb çözünürlüğü ile), tüm katmanlar bu Akıllı Nesne içinde yuvalanmıştır. Onlarla normal katmanlarla aynı şekilde çalışabilirsiniz. Bu dosyanın boyutu, içindeki katmanlara bağlıdır (Şekil 2).

İncir. 2

Katmana gölgeler veya dış ışıma uygulanmazsa - Akıllı Nesnenin boyutları, uygulanmışsa, içinde bulunan katmanların boyutlarına kesinlikle karşılık gelir - o zaman her tarafta bir girinti görünür, bu, yanlışlıkla kesmemenizi sağlar. kötü bir monitörde görünmeyen gölge (Şek. 2). Bu işlev, bu tür gölgelerin kesilmesini kolaylaştırır (Şek. 3).
Tasarımcı rahat bir nefes alacaktır - düzen tasarımcısı, monitöründe görünmeyen gölgenin yarısını kesmeyecektir ve düzen tasarımcısının arka planı kapatıp bu gölgenin sınırlarını aramasına gerek yoktur. Bu dosyadan hemen ayrı bir resim olarak .png olarak kaydedebilirsiniz.

Şek. 3

Gerçekten birkaç tane var tuzaklar. Mizanpajda Akıllı Nesne ile katmanın boyutunu ölçeklerseniz hesaba katmanız gerekir - dahili dosyada (.psb) tüm katmanlar %100 ölçekte olacaktır. Akıllı Nesne, yakınlaştırma sırasında özel bir çerçeve görüntüler (Şek. 4).

Şekil 4

İkincisi, Akıllı Nesneye bir Ayarlama Katmanı eklerseniz - Akıllı Nesnenin boyutu, örneğin istenen simgenin değil, tüm sayfa düzeninizin boyutu olacaktır.

Başka bir keyif, bir Akıllı Nesneyi kopyalarken, birkaç katman elde edersiniz. tam bir kopya ve birinde değişiklik yapıldığında hepsi değişir. Bu bize ne veriyor? 9 adet “Satın Al” butonlu bir katalog sayfa düzeniniz var, müşteri bakmış ve bu butonlara sepet ikonu eklemek istemiş. Bu önemli bir çaba gerektirmez, Akıllı Nesne katmanlarından birine giriyoruz, gerekli değişiklikleri yapıyoruz, kaydediyoruz - ve ah mutluluk! - tüm düğmelere sahibiz yeni tür.

Ve yine kullanışlılık - bir Akıllı Nesneye büyük bir bitmap görüntüsü ekleyerek, görüntü kalitesini kaybetmeden onu serbestçe ölçeklendirebilirsiniz. Akıllı Nesne ile ve Akıllı Nesne olmadan ölçeklendirme örneği - Şekil 5 ()
Yeniden ölçeklendirme artık planlanmıyorsa ve büyük bir dosyayı daha fazla çalışmaya aktarmanın bir anlamı yoksa, istediğiniz zaman resminizi rasterleştirebilirsiniz.

Şekil 5

Bu kullanışlı Akıllı Nesne nasıl oluşturulur? Her şey, birlikte çalışmanın kolay olduğu kadar kolaydır. Gerekli katmanları seçin. Ve katmanlar panelinde, seçilen katmanlardan birine sağ tıklayın - Akıllı Nesneye Dönüştür'ü seçin (Şekil 6) veya kendi klavye kısayolunuzu yazabilirsiniz.

Şekil 6

Otomatik katman seçimi etkinleştirildiğinde Taşı Aracını kullanarak istenen katmanları seçmek kolaydır (Şekil 7). Yani farenin sol tuşu ile tıklanan katman seçilir, ancak açıp açmamak herkesin işine gelir.

Şekil 7

Akıllı Nesne kullanmak dosyaya biraz ağırlık katar, ancak buna değip değmeyeceğine karar vermek size kalmıştır.
Kendim için şu sonuca vardım - buna değer!

Bu eğitimde, Akıllı Nesneleri keşfedeceğiz ve Akıllı Nesneleri Photoshop'ta kullanmanın inanılmaz avantajlarından bazılarına bakacağız.

Akıllı Nesneler, Photoshop'ta katman düzenleme sürecinin ayrılmaz ancak bağımsız bir parçasıdır. Esasen, Akıllı Nesneler şu şekilde düşünülebilir: ayrı dosya Geçerli dosyaya yerleştirilen Photoshop. Onlar. diğer rasterleri içerebilen bir "gruplama" katmanıdır veya vektör görüntüleri. Ve bu, orijinal görüntüyü tüm ilk özellikleriyle kaydetmenize olanak tanır.

Örneğin web tasarımında akıllı nesnelerin kullanılması, belirli bir düzeni veya tüm tasarımı bozmadan içerik eklemeyi ve güncellemeyi kolaylaştırır.

Akıllı Nesnelerin Faydaları

Akıllı Nesneleri kullanmanın çeşitli faydaları vardır, ancak en önemli üç tanesi şunlardır:

Kolay güncellenen içerik

Örneğin, bir Akıllı Nesneyi dönüştürür ve bir dönüştürme uygularsanız, daha sonra dönüştürmeyi ayarlamanız gerekebileceği için orijinal dönüştürme kullanılabilir durumda olacaktır. Bir Akıllı Nesnenin içeriğini değiştirirken, ilk Akıllı Nesneye uygulanan tüm ölçekleme, deformasyon ve efektler korunur.

Akıllı Nesneleri çoğaltıyorsanız her zamanki gibi V Photoshop belgesi, bağlantı kaynak dosyayı etkiler. Bu, bir akıllı nesneyi birden çok kez çoğaltabileceğiniz ve daha sonra tek bir kaynak dosyayı değiştirerek hepsini birlikte güncelleyebileceğiniz anlamına gelir. Buna Bağlantılı Akıllı Nesneler denir. Kaynakların başka projelerde yeniden kullanılması gerektiğinde özellikle kullanışlıdırlar.

Akıllı bir nesnenin içeriğini değiştirmek oldukça basittir. Tek yapmanız gereken, katman küçük resmine çift tıklamak ve orijinal dosyayı düzenlemek.

Orijinal veri veya kalite kaybı olmadan görüntü düzenleme.

Birlikte çalışmak bit eşlemler Photoshop'ta oldukça karmaşıktır, çünkü " Serbest dönüşüm”, kaynağın kalitesinin düşmesine neden olabilir. Bir bitmap katmanını Akıllı Nesneye "geçiştirdiğinizde", Photoshop satır içi veya bağlantılı dosya, orijinal görüntü için gerekli bilgileri sakladığı. Böylece, katmana kaç kez dönüşüm uyguladığınıza bağlı olmayan görüntünün orijinal kalitesi korunacaktır. Bu, Akıllı Nesneleri orijinal boyutlarından daha büyük ölçeklendirmenin yine de bir miktar pikselleşmeye ve kalite kaybına neden olması farkıyla, vektörlerle çalışmaya benzer. Ancak orijinal boyutta çalışırsanız kaliteden bir şey kaybetmezsiniz!

Akıllı filtreler

Akıllı nesnelerde Akıllı Filtreler (Akıllı filtreler) kullanmak, her zamanki "yıkıcı" Filtrelerden çok daha iyidir. Bu düzenlenebilir efektler istiflenebilir ve ayrı ayrı ayarlanabilir. Akıllı bir nesneye filtre uygularken, akıllı filtre (maskeli) gömülür. Filtrelerin kendileri değiştirilebilir ve düzenlenebilir.

Akıllı Nesneler Oluşturma

Bir katmandan akıllı bir nesne birkaç şekilde oluşturulabilir: örneğin, katmanlar panelinden, katmana sağ tıklayıp " Akıllı Nesneye Dönüştür” (“Akıllı Nesneye Dönüştür”) veya Katman - Akıllı Nesneler - Akıllı Nesneye Dönüştür menüsü aracılığıyla veya bir dosyayı içe aktarırken "Akıllı Nesne Olarak Aç" komutunu seçerek. Bu katmanın Akıllı Nesne olduğunun göstergesi, katman simgesinin sağ alt köşesindeki küçük bir dikdörtgendir.

Metin Katmanlarını Akıllı Nesnelere Dönüştürme

Metin katmanları, rasterleştirilmeden ölçeklenebilir, bozulabilir ve döndürülebilir ve en iyi yolçünkü bu onları akıllı nesnelere dönüştürmek olacaktır. Bu, onları değiştirmenize ve Akıllı Nesne kaynağı içindeki düzenlenebilir metne erişimi kaybetmemenize olanak tanır.

Küçük Örnek: Duyarlı Tasarım Mockup Sunumu Oluşturma

Görevimiz, yeni oluşturulan siteyi, sitenin görüntüsünü görselleştirdiğimiz küçük bir düzen sunumu kullanarak temsil etmektir. çeşitli cihazlar. Yani sitemizin responsive olduğunu ve farklı cihazlarda iyi görüntülendiğini gösterelim.

Bu amaçla, site düzeninin ekran görüntülerini kullanmaya ve Photoshop'ta Akıllı Nesneler kullanmaya karar verdik. Ayrıca tam da bu cihazların görüntüsüyle bir modele (sahte, boş) ihtiyacımız var (bir dizüstü bilgisayarın Maketini kullanmaya karar verdik). Kendi modelinizi bulmak için makaleyi okuyun.

Cihaz düzenini açın ve sizin için uygun olan araçları kullanın (örneğin, Dikdörtgen Seçim – kısayol tuşu M) ekranını vurgulayın ve kopyalayın yeni katman. Ekranımız tam olarak dikdörtgen olmadığı için Pen Tool (P) kullandık. Daha sonra ekran katmanını Akıllı Nesne için maske olarak kullanacağız.

Sitenin ekran görüntüsünü açın. Ekran görüntüsünü şuraya sürükleyin: psd maketi. Ekran katmanının üzerine yerleştirin. Katmana sağ tıklayın ve Akıllı Nesneye Dönüştür'ü seçin. Önemli: Katmanı Akıllı Nesneye dönüştürmeden önce yeniden boyutlandırmayın.
Artık ekran görüntüsünü masaüstü ekranınızın genişliğine uyacak şekilde yeniden boyutlandırabilirsiniz. Kullan " serbest dönüşüm» - Ctrl+T. Ya da cihaz ekranı dik açıda değilse Eğme aracı ( Düzenle - Dönüştür - Eğrileştir ).
Şimdi ekran görüntüsünü ekran boyutuna tam olarak sığacak şekilde kırpalım. Bunun için ekran katmanını maske olarak kullanacağız. Kelepçe alt tuşu ve fare imlecini Ekran ve Ekran Görüntüsü katmanları arasında hareket ettirin. Kareli bir ok göründüğünde, sol tıklayın - bu bir kırpma maskesi oluşturacak ve Ekran katmanının boyutlarının ötesine geçen her şey gizlenecektir. Ayrıca bir kırpma maskesi de oluşturabilirsiniz. Alt+Ctrl+G.

Bu kadar! Sunum düzeninizde birden fazla cihaz varsa, Akıllı Nesneleri kullanmak, orijinal ekran görüntüsünün kalitesini korumanıza ve onu sınırsız sayıda dönüştürmenize olanak tanır.

Akıllı nesneler inanılmaz güçlü araç Photoshop'ta. İş akışını hızlandırmak, tasarruf etmek için kullanılabilirler. orjinal kalite görüntülerin yanı sıra son dosyanın boyutunu küçültme.

Umarız bu ders sizin için faydalı olmuştur ve kendiniz için yeni bir şeyler öğrenmişsinizdir.

Akıllı bir nesnenin en önemli özelliklerinden biri, otomatik kaydetme dönüştürülen piksellerin orijinal boyutu hakkında veriler ve boyutun durumu hakkında bilgi şu an orijinaline göre. "Serbest Dönüşüm"ü etkinleştirmek için istediğiniz zaman Ctrl+T tuşlarına basabilir ve değişikliklerle ilgili veriler için seçenekler paneline bakabilirsiniz:

Not. Normal bir katmanda "Serbest Dönüşüm"ü etkinleştirirseniz, Photoshop her durumda boyutu %100 olarak gösterecektir.

Akıllı Nesnelerdeki diğer materyallere bakın:
Photoshop'ta Akıllı Filtreler atama ve uygulama
Photoshop'ta Pratik Akıllı Nesne Uygulamaları
Photoshop'ta Akıllı Nesne Nedir?

4. Bağlantılı ve Bağlantısız Akıllı Nesneler

Akıllı nesneyi normal şekilde, basit bir katman olarak çoğaltırsanız (Ctrl+J kullanarak veya katmanı, katmanlar panelinin altındaki "Katman Ekle" simgesine sürükleyerek), bağlı akıllı nesne
Bu, kopyada veya orijinalde yapılan herhangi bir değişiklikle, aynı değişikliklerin ikinci nesnede ve varsa diğer kopyalarda da olacağı anlamına gelir. Ayrıca, bağlantılı kopyaların sayısı sınırlı değildir, tüm kopyalarda değişiklikler olacaktır:

Akıllı nesnelerin kopyalarının alınmasını istiyorsanız ilgisiz, yani bir nesneyi değiştirmek diğerlerini etkilemedi, ana menü sekmesi Katmanlar --> Akıllı Nesne --> Kopyalayarak Akıllı Nesne Oluştur (Katman -->) aracılığıyla kopyalama yöntemini kullanın Akıllı Nesneler--> Kopyalama Yoluyla Nev Akıllı Nesneler).

5. Akıllı nesnenin içeriğini değiştirin

Bir Smart'ın içeriğini düzenlemek çok kolaydır. Simgesine çift tıklayın, gerekli değişiklikleri yapın ve değişiklikleri kaydetmek için Ctrl + S tuş bileşimine basın:

6. Metin Katmanlarını Akıllı Nesnelere Dönüştürün

Metin katmanları, rasterleştirme olmadan ölçeklenebilir, döndürülebilir ve aynalanabilir, ancak Gauss Bulanıklığı gibi deformasyonlar ve filtreler uygulamak için bunların rasterleştirilmesi gerekir ve rasterleştirildikten sonra metin değiştirilemez. Bir metin katmanına Gauss Bulanıklığı uygulamaya çalıştıktan sonra Photoshop'un söyledikleri:

Ancak bu kuralı aşmanın bir yolu var ve bu da metin katmanını Akıllı Nesneye dönüştürmektir. Şimdi, filtreyi uyguladıktan sonra, metni düzenlemek için. 5. adımda açıklandığı gibi akıllı nesneye gitmem ve metni değiştirmem gerekiyor:

7. Akıllı Filtreler Kullanın

Akıllı Nesneleri kullanmanın bir diğer büyük avantajı, kendisine uygulanan herhangi bir filtrenin otomatik olarak tahribatsız bir filtreye dönüştürülmesidir. akıllı filtre. Bu, filtre uygulandıktan sonra tamamen düzenlenebilir hale gelir, ayrıca herhangi bir akıllı filtrenin geçici olarak devre dışı bırakılabileceği veya silinebileceği anlamına gelir. Akıllı filtre kullanmanın bir diğer faydası da maskesinin olmasıdır, yani. filtre onu görüntünün tamamında etkileyebilir, ancak yalnızca resmin belirli bir bölümünde etkileyebilir.

Not. Ufuk Noktası filtresi gibi bazı filtreler akıllı filtreler olarak kullanılamaz.

8. Akıllı filtre maskesi

Yukarıda belirttiğim gibi, bir akıllı filtre uygularken, katman maskesine benzer şekilde, filtreye otomatik olarak bir maske eklenir. Bu nedenle, maskenin bir bölümünü siyaha boyayarak, filtrenin bu alandaki etkisini kaldırmış olursunuz:

Dezavantajı, kaç tane filtre eklerseniz ekleyin, maskenin tüm filtreler için aynı olmasıdır:

Ancak bu kural da aşılabilir. Akıllı Nesneye bir filtre uyguluyoruz, ardından Akıllı Nesneyi filtreyle birlikte yeni bir Akıllı Nesneye dönüştürüyoruz, sonraki filtreyi ortaya çıkan Akıllı Nesneye uyguluyoruz ve bu böyle devam ediyor. Daha sonra, düzenlemek o kadar kolay olmayacak, ancak bir Akıllı Nesne için her filtrenin kendi maskesi olacaktır.

Görsel olarak bir nesne (örneğin düğmeler) için katman sayısı, düzenleme yeteneği korunurken nasıl azaltılır?
Dahili sayfaların mizanpajlarındaki üstbilgiyi, altbilgiyi tek bir katmanda birleştirerek ve yine bunları değiştirme olasılığını bırakarak katman sayısı nasıl azaltılır?
Bir düzen tasarımcısının, tek bir çizgiyi oluşturan bir veya iki piksel çizgisinden, gölgelerden, ayrıca düğmelerden ve simgelerden çizgiler kesmesini nasıl kolaylaştırabilirim?
Sayfadaki aynı türdeki tüm öğelerde hızlı bir şekilde nasıl değişiklik yapılır?
Kaliteyi kaybetmeden ve efektlerin doğru oranlarını korumadan bir raster görüntü nasıl küçültülür (200*200px nesne için 5px gölge, 100*100px boyutundaki aynı nesneden tamamen farklı görünür)

Akıllı Nesne, tüm stilleri ve efektleri düzenlenebilir bir durumda veya Illustrator katmanlarında tutan, Photoshop'un raster veya vektör katmanlarından görüntüler içeren bir katmandır. Akıllı Nesne katmanları özel bir simgeyle işaretlenmiştir (Şek. 1).

Bu simge üzerinde farenin sol düğmesine çift tıklandığında, tüm katmanları bu Akıllı Nesnede iç içe geçmiş yeni bir dosya (.psb çözünürlüklü) açılır. Onlarla normal katmanlarla aynı şekilde çalışabilirsiniz. Bu dosyanın boyutu, içindeki katmanlara bağlıdır (Şekil 2).

İncir. 2

Şek. 3

Burada gerçekten birkaç tuzak var. Mizanpajda Akıllı Nesne ile katmanın boyutunu ölçeklerseniz hesaba katmanız gerekir - dahili dosyada (.psb) tüm katmanlar %100 ölçekte olacaktır. Akıllı Nesne, yakınlaştırma sırasında özel bir çerçeve görüntüler (Şek. 4).

Şekil 4

İkincisi, Akıllı Nesneye bir Ayarlama Katmanı eklerseniz - Akıllı Nesnenin boyutu, örneğin istenen simgenin değil, tüm sayfa düzeninizin boyutu olacaktır.

Başka bir keyif de, bir Akıllı Nesneyi kopyalarken birbirinin birebir kopyası olan birkaç katman elde edersiniz ve bunlardan birinde değişiklik yaptığınızda her şey değişir. Bu bize ne veriyor? 9 adet “Satın Al” butonlu bir katalog sayfa düzeniniz var, müşteri bakmış ve bu butonlara sepet ikonu eklemek istemiş. Bu önemli bir çaba gerektirmez, Akıllı Nesne katmanlarından birine giriyoruz, gerekli değişiklikleri yapıyoruz, kaydediyoruz - ve ah mutluluk! - Tüm düğmelerimiz yeni bir görünüme sahip.

Şekil 5

Şekil 6

Şekil 7

Akıllı Nesne kullanmak dosyaya biraz ağırlık katar, ancak buna değip değmeyeceğine karar vermek size kalmıştır.
Kendim için şu sonuca vardım - buna değer!

Son sonuç

Akıllı nesneler en güçlülerinden biridir Photoshop özellikleri. Bu derste, birkaç parçadan bir düzen hazırlayacaksınız. bilgisayar ekranları ve ardından bunlara akıllı nesne katmanları ekleyin. Her şey ayarlandıktan sonra, yalnızca orijinal katmanı güncelleyerek tüm ekranlardaki resimleri değiştirebilirsiniz. Her Akıllı Nesne birden çok katmandan oluşabilir. Bu, sunumunuzu değiştirmeyi kolay ve hızlı hale getirir.

1. Düzeni hazırlamak

Aşama 1

Üç ile başlayacağım çeşitli ekranlar. Bulabilirsin bireysel fotoğraflar her biri PhotoDune veya GraphicRiver üzerindedir ve kompozisyonunuzda istediğiniz sayıda cihazı kullanabilirsiniz. Bu eğitim dosyası, cihazların kendileri, gölgeleri ve parlak noktaları için katmanlara bölünmüştür.

çevirmenin notu : Ücretsiz bir alternatif olarak 365psd.com'daki düzeni kullanabilirsiniz.

Adım 2

Her ekran için ayrı bir katman hazırlayın. Bir araç seçin Dikdörtgen(Dikdörtgen Aracı) ve ekranın kendisiyle aynı boyutta bir dikdörtgen çizin. Alternatif olarak, aracı kullanabilirsiniz dikdörtgen alan(Dikdörtgen Seçim Çerçevesi Aracı) ve seçimi piksellerle doldurun. Hangi yöntemi seçerseniz seçin, asıl önemli olan dikdörtgenin ayrı bir katman üzerinde olmasıdır.

Ekranla aynı boyutta bir dikdörtgen çizin. Herhangi bir görüntü ile doldurun ve ayrı bir katmana yerleştirin.

Araçla düzenlemeleri daha kolay olduğu için şekil katmanlarını kullanmayı tercih ediyorum. serbest dönüşüm(Serbest dönüşüm). tıklayarak aktif edebilirsiniz ctrl+t.

Aşama 3

Her ekran için aynı katmanı yapın. Formlar her renkte doldurulabilir. Bu şekilleri akıllı nesne maskeleri olarak kullanacağız. Şimdi böyle bir şeye sahip olmalısınız:

Adım 4

Şimdi düzenimizi düzenlemek güzel olurdu. Katmanları yeniden adlandırmak ve düzenlemek, gelecekte çok zaman kazandıracaktır. Aşağıdaki ekran görüntüsünde, her cihaz için katmanları renklendirdim. Katmanın rengini değiştirmek için göz simgesine sağ tıklayın ve istediğiniz rengi seçin.

Ayrıca her ürün için katman grupları oluşturabilirsiniz. Aynı cihaza ait tüm katmanları seçin ve katmanlar panelindeki açılır menüden yeni bir grupkatmanlardan(Katmanlardan Yeni Grup). Grup renginin ayarlanması çok kolaydır. Gruba sağ tıklayın ve istediğiniz rengi seçin.