Photoshop Ekstresi: Mobil Grafik Üretimi Afterburner Üzerinde Devam Ediyor

01/08

Ekstrakt Varlıkları Nedir

Photoshop'ta bir derleme oluşturun.

Photoshop CC 2014'ün yeni Ekstrakt Varlıkları özelliği, Responsive Web Design (RWD) için görüntü yaratmanın başka bir sıkıcı iş akışı üzerinde bir afterburner'ı askıya alıyor. Asset Assets komutunun, bir web sayfasını derleme hazır varlıklara birkaç dakika içinde hızlı bir şekilde nasıl azaltabileceğine bir göz atalım.

Açık bir soruyla başlayalım: Varlıkların Varlığı Nedir?

Basit bir şekilde, Ayıklama Öğeleri, Photoshop'ta, Photoshop dosyalarınızdan web ve ekran tasarımı için görüntüleme varlıklarının oluşturulmasını otomatikleştirmeye yardımcı olacak bir arabirim olan Photoshop'ta Jeneratör özelliği sağlayan yeni bir özelliktir. Varlıkları Ayır komutu, varlıklar oluşturmak istediğiniz katmanı veya katmanları, fiziksel boyutlarını, dosya biçimini ve diskte kayıtlı konumu tanımlamanıza olanak tanır. Niyetin metni bir bitmap haline getirmediği sürece bu özellik metin için geçerli değildir, bu gerçekten iyi bir fikir değildir.

Başlayalım.

02/08

Photoshop .psd Dosyasını Aç

Photoshop'ta hazırlanmış bir web sayfası ile başlıyoruz.

Kullandığım örnek, Illustrator'dan bir Akıllı Nesne, bir metin, metin içeren bir kahraman birimi, bir görüntü ve bir düğme ve sitenin temasını güçlendiren bir dizi açık hava resmi içeriyor. Buradaki anahtar, Katmanları gruplara ayırıyor. Bu zorunludur çünkü görev, tüm bu öğeleri comp dışında tutmaktır, böylece çeşitli ekran çözünürlüklerine ve boyutlarına uyum sağlayan web düzenlerine hızlıca eklenebilir.

03/08

Varlıkları Ayıklamak İçin İki Yol

Ayıklama Varlıklar, Dosya menüsünde veya bir katmana sağ tıklayarak bulunabilir.

Nesneleri aynı zamanda katman adına bir grafik uzantısı ekleyerek nesneleri ayıklayan Generate'den farklı olarak, Extract Assets bir katmanı sağ tıklatıp bir katmanı seçerek ve Dosya> Varlıkları Ayıkla'yı seçerek erişilebilen bir arabirim kullanır.

04/08

Varlık Arabirimi Arabirimi

Varlıkları Ayır iletişim kutusu.

Varlıkları Ayır iletişim kutusu oldukça sezgiseldir. Çıkarılacak katman veya seçim gösterilir. Bunun üstünde, dosya boyutunun altında ve altında, nesneye yakınlaştırma ve uzaklaştırma yapmanızı sağlayan denetimdir. İletişim kutusunun sağ tarafı, sihrin gerçekleştiği yerdir. Üstteki dört düğme, nesnenin çözünürlüğünü / boyutunu seçmenizi sağlar. Bir sonraki şerit size seçilen katmanı gösterir ve + işaretini tıkladığınızda seçilen katmanı başka bir formatta da çıkartabilirsiniz. Çöp Kutusu Ca , sırayı kuyrudan kaldırır. Sonraki şeritte, dosya türünü seçebilir ve çıktı görüntüsünün genişliğini ve yüksekliğini ayarlayabilirsiniz.

05/08

Bir SVG Görüntüsünün Çıkarılması

Bir svg görüntüsü ayıklanıyor.

Photoshop svg görüntülerini tümüyle iyi işlemez ve tarayıcılar ve cihazlar bir Illustrator görüntüsünü görüntüleyemez. Bu, burada gösterilen Illustrator logosu gibi vektör resimleri için kullanılan svg dosyalarının yükselmesine neden oldu. Çözünürlüklerini vektör olarak almaları, detaydan veya görüntüden hiçbir kayıp olmadan ölçeklenebilecekleri cihazdan bağımsız anlamlıdır. Illustrator Smart Object'i svg'ye dönüştürmek için pop'tan svg'yi seçin ve Extract'ı tıklayın.

06/08

Öz Varlık Süreci

Görüntüler, .psd görüntüsü ile aynı noktadaki bir klasöre yerleştirilir.

Ayıkla düğmesine tıkladığınızda birkaç şey olacaktır. Önce dosya adı değişebilir uyarılacaksınız. Bu büyük bir sorun değil. Daha sonra, varlığın tutulması için yeni bir klasör oluşturulduğu söylenecektir. İşlem bittiğinde, orijinal .psd dosyasıyla aynı konuma yerleştirilen klasör açılır ve size yeni varlığı gösterir.

07/08

Ayarlar Düğmesi Yeni En İyi Arkadasın mı?

Cihaz çözünürlüğü kabul edilir.

Ayarlar düğmesine basıldığında, ciddi olarak faydalı olan bir Ayarlar iletişim kutusu açılır. Soldaki ayarlar ölçeklendirme faktörleridir. Yaptıkları şey, geliştiricinin belirli bir cihazın ekran çözünürlüğünü hedeflemek için medya sorgularında kullanacağı resmin çeşitli kopyalarını oluşturmaktır. Örneğin, 3x sürümü bir iPhone veya iPad Retina ekranına hedeflenirken, bir Android cihazında 1.25 faktör işaret edilir. Sonek, geliştiricinizin bir medya sorgusunda kullanılacak resmi kolayca tanımasını sağlamak için dosya adının sonuna eklenir. Bitirdikten sonra Tamam düğmesini tıklayın ve seçiminiz iletişim kutusundaki Varlıkları Ayıkla alanında yanacaktır. Arayüzün sağ tarafında bulunan Varlıkları Ayıkla alanındaki dişli çark simgesini tıklayarak da bu ayara erişebilirsiniz.

08/08

Bitirmek

Değişik format ve çözünürlükte birden çok görüntü çıkarılır.

Ayıkla düğmesini tıklattığınızda tüm varlıklar oluşturulacak ve klasöre eklenecektir. Bu noktada yapmanız gereken tek şey geliştiricinizi klasörün bir kopyasına göndermek ve sonraki projenize geçmek.