Creative Cloud Ayıkla, katmanlar ve katman kompozisyonları da dahil bir PSD'yi doğrudan tarayıcınızda incelemenize olanak veren yeni ve ücretsiz bir Creative Cloud Varlıkları özelliğidir. PSD'leri paylaşabilen web tasarımcılarının ve geliştiricilerin tasarım bilgilerinin kilidini açmalarına ve üretime hazır varlıkları indirmelerine olanak tanır. Ayıkla'yı kullanarak, PSD dosyasıyla tarayıcıda şu işlemleri gerçekleştirebilirsiniz:

  • Metni ve CSS'yi kopyalama
  • Renk, degrade ve font bilgilerini alma
  • Öğeler arasındaki mesafeleri ölçme
  • Üretim için en iyileştirilmiş görüntü varlıklarını kaydetme

PSD dosyalarıyla çalışan bir web tasarımcısı ya da geliştiricisiyseniz, Creative Cloud Ayıkla yorucu adımları azaltarak ve gereksiz yere bir ileri bir geri iletişimi en aza indirerek tasarımı koda dönüştürme işlemini önemli ölçüde basitleştirir.

Not:

Ayıkla salt okunurdur ve PSD dosyalarını düzenlemek için kullanılamaz.

Stil bilgilerini ayıklama

  1. Creative Cloud web sitesinde oturum açın.
  2. Creative Cloud hesabınızın Varlıklar bölümüne gidin.
  3. PSD dosyasını sürükleyip Dosyalar alanına bırakarak veya Dosya Seç seçeneğini kullanarak yükleyin. Daha önce yüklenen bir PSD dosyasına da gidebilirsiniz.
  4. PSD dosyasının minik resmini tıklatarak dosyayı Ayıkla görünümünde açın.
Dosya, Ayıkla görünümünde açılır

Bu Ayıkla görünümünde, PSD tasarımını tamamen tarayıcı içinden inceleyebilirsiniz. Katman hiyerarşisini inceleyebilir, farklı katman kompozisyonlarını görüntüleyebilir ve PSD'nin bazı kısımlarını yeni görüntü dosyaları olarak ayıklayabilirsiniz. PSD önizlemesinde herhangi bir öğeyi tıklatırsanız bir katman seçilir ve bu katman ile ilgili bilgi sağlanır. Seçimden sonra yapabilecekleriniz:

Öğe koordinatlarını ve boyutlarını görüntüleme ve kopyalama

PSD dosyasında tek bir öğeyi tıklattığınızda bilgi paneli görünür. Bu panel öğenin genişlik ve yükseklik boyutlarının yanı sıra öğe katmanının tasarımdaki x ve y konumunu da görüntüler.

Piksel (px) değerinde görüntülenen bir tasarım öğesinin koordinatları ve boyutları
Yüzde (%) olarak görüntülenen bir tasarım öğesinin koordinatları ve boyutları

Not:

W, H, X veya Y değerlerinden birini tıklatıp panoya kopyalayın.

Ayıkla'daki ölçüler piksel veya yüzde birimi olarak görüntülenebilir. Seçili bir öğeniz varsa, yüzde genişlik ve yükseklik ölçüleri PSD tasarımının toplam genişlik ve yükseklik değerine göredir. Birinin diğeri tarafından tamamen kaplandığı iki öğe seçilirse içte kalan öğenin genişliği ve yüksekliği, dış öğenin boyutlarına göre bildirilir.

İçte kalan öğelerin ölçüleri diğer öğeyi kaplayan öğenin ölçülerine göre görüntülenir

Not:

Değerlerden birini tıklatıp panoya kopyalayın.

İki öğe arasındaki mesafeyi görüntüleme

İki öğe arasındaki mesafeyi görüntülemek için Shift tuşunu basılı tutarak bu öğeleri tıklatın. Öğeler arasındaki mesafelerin bilinmesi, kenar boşluğu veya doldurma bilgilerinin belirlenmesi için faydalıdır.

İki öğe arasındaki mesafe

CSS kodunu kopyalama

PSD tasarımında bir öğe seçildiğinde, mavi bilgi panelinde CSS'yi Kopyala seçeneğini tıklatarak öğenin CSS'sini kopyalayın. CSS kodunu CSS Denetçisi'nden de görüntüleyebilir ve kopyalayabilirsiniz.

CSS kodunu görüntüleme

Not:

Ayıkla ön işlemcileri destekler. CSS ön işlemcilerini kullanmayla ilgili seçenekleri görüntülemek için Stiller sekmesinde CSS'nin yanındaki (aşağı ok) simgesini tıklatın.

CSS ön işlemcilerini kullanma seçeneği

Metni kopyalama

Seçtiğiniz öğe metin içeriyorsa metni panoya kopyalamak için Metni Kopyala'yı tıklatın.

Seçili metni panoya kopyalama

Font, renk ve degrade bilgilerini görüntüleme ve kopyalama

Tasarım belgesinde (PSD) kullanılmakta olan fontlar, renkler ve degradeler ile ilişkili bilgileri Stiller panelini açarak görüntüleyebilir ve kopyalayabilirsiniz. Bilgileri görüntülerken değerini panoya kopyalamak için bir font boyutu, renk veya degrade renk örneğini tıklatın.

Renk degradesi değerine örnek

Bir öğeyi seçtiğinizde, kullanılan metin ve renk stilleri Stiller panelinde vurgulanır.

Not:

Ayıkla, Adobe Typekit'le entegrasyon yoluyla size binlerce yüksek kaliteli fonta erişim sağlar. Typekit simgesi () Stiller panelinde, Typekit fontlarının yanında görüntülenir. Bu Typekit simgesini tıklattığınızda Ayıkla, Typekit'teki fontla ilgili sayfayı açar.

Kullanmak istediğiniz, web'le uyumlu bir font bulduğunuzda bunu Typekit'te bir kite ekleyin ve üretim kodunuza bağlayın.

Seçili öğenin font ve renk bilgileri

Renk seçici aracını kullanın

Renk seçici aracı () tasarımdaki bir öğenin rengini hızlı bir şekilde bulmanızı sağlar.

  • Renk seçici aracını seçin ve ardından tasarımınızda herhangi bir yeri tıklatın. Renk seçici aracı, rengi algılar ve Stiller paneline renk örneği olarak ekler. Artık, renkle ilgili CSS bilgilerini kolaylıkla görüntüleyip kopyalayabilirsiniz.
Renk seçici aracı

Görüntü varlıklarını ayıklama

Creative Cloud Ayıkla'yı kullanarak PSD içinde bir veya daha fazla katman seçebilir ve görüntü varlığını ayıklayabilirsiniz. Varlıklar 8 bit PNG, 32 bit PNG, JPG ve SVG görüntüleri olarak ayıklanabilir.

Bir görüntü varlığını ayıklama

Bir öğenin mavi bilgi panelinde simgesini tıklatın ve aşağıdakileri yapın:

  1. Görüntü varlığı ayarlarını inceleyin. Gerekirse, farklı bir desteklenen görüntü formatı seçin (PNG, JPG veya SVG).
  2. Bir JPG varlığı oluşturuyorsanız görüntü varlığı kalitesini ayarlayın.
  3. Gerekirse bir ölçek seçeneği belirleyin. Örneğin, Ölçek: 2x seçeneğini belirleyin. Varlığı 0,1 ile 5 kat arasında ölçeklendirebilirsiniz.
  4. Kaydet'i tıklatın.
  5. Oluşturulan varlığı Varlıklar panelinde bulun. Varlıklar ayrıca Creative Cloud Varlıkları görünümünde PSD dosyasının yanındaki yeni oluşturulmuş bir klasörden de kullanılabilir. Oluşturulan klasörün adı -assets biçimindedir. Örneğin, dosyanın adı adventure.psd ise varlıklar klasörü adventure-assets adını alır.

    Varlıklar panelinde bir görüntü minik resmini tıklattığınızda söz konusu varlık yerel makinenize indirilir.
Varlıklar paneli

Not:

Oturum açıp Creative Cloud Varlıkları klasörünüzdeki bir PSD dosyasını görüntülüyorsanız gelişmiş varlık ayıklama özelliklerine erişiminiz vardır. İndirdiğiniz her varlık Creative Cloud Varlıkları'ndaki Varlıklar paneline ve .psd_assets klasörüne eklenir. Varlıklar panelinde bir görüntü minik resmini tıklatarak söz konusu varlığı yerel makinenize indirebilirsiniz.

Varlıklar paneli başka bir kullanıcıdan bir bağlantıyı tıklatarak PSD dosyasını görüntülediğinizde kullanılamaz. Bu durumda Ayıkla'yı her zamanki gibi kullanabilirsiniz, ancak  simgesini tıklattığınızda varlıklar derhal bilgisayarınıza indirilmeye başlar. Yerel diskinizdeki varlıkları bulmak için tarayıcınızın indirme yöneticisini kullanın.

Katmanlarla çalışma

Katmanlar paneli bir PSD tasarımındaki tüm katmanları ve katman gruplarını görüntüler. Creative Cloud Ayıkla salt okunur bir özellik olduğundan katmanlarda yapılan herhangi bir değişiklik PSD dosyasına kaydedilmez.

Katmanlar paneli görünürlüğü açıp kapatmanıza, katman öğeleri seçmenize ve varlıkları ayıklamanıza olanak tanır. 

Katmanları veya katman gruplarını görüntü varlıkları olarak ayıklama

PSD dosyasındaki bir katmanı veya katman grubunu bir görüntü varlığı olarak ayıklayabilirsiniz. Aşağıdakileri yapın:

  1. PSD dosyasındaki katman hiyerarşisini görüntülemek için Katmanlar panelini tıklatın.
Katman hiyerarşisi

Not:

Hiyerarşide birden fazla katman seçebilir ve tüm seçili katmanları birleştiren tek bir yeni görüntü varlığını dışa aktarabilirsiniz. 

  1. Katman hiyerarşisini inceleyin ve içinde gezinin. 
    • Bir katman grubunu genişletmek için yanındaki klasör simgesini () tıklatın.
    • Katmanlar bölmesinde karşılık gelen katmanı/katman grubunu vurgulamak için bir öğeyi tıklatın.
  2. Görüntü varlığı olarak ayıklamak istediğiniz katmanı/katman grubunu seçin. Birden fazla katman seçmek için Command tuşunu (Mac) veya Ctrl tuşunu (Windows) basılı tutun. Birden fazla nesne seçilirse bunlar seçili katmanları veya grupları birleştiren tek bir varlık olarak ayıklanır.
  3. Katmanın veya katman grubunun yanındaki  simgesini tıklatın. Birden fazla katman/katman grubu seçtiyseniz seçili katmanlardan birinin yanındaki  simgesini tıklatın.
  4. Yeni görüntü varlığı için bir ad girin.
  5. Bir görüntü varlığı formatı seçin (PNG 8 Alpha, PNG 32, JPG veya SVG).
  6. (İsteğe bağlı) Bir JPG görüntü varlığı oluşturuyorsanız kalitesini ayarlayabilirsiniz.
  7. Kaydet'i tıklatın. 
  8. Oluşturulan varlığı Varlıklar bölmesinde bulun. Varlıklar ayrıca Creative Cloud Varlıkları'nda, PSD dosyasının yanındaki yeni oluşturulmuş bir klasörden de kullanılabilir.

Not:

Katmanları Sıfırla seçeneği, katman görünürlüğünü tasarımdaki ilk haline döndürür.

Bir katmanı veya katman grubunu gizleme

Bir katmanı veya katman grubunu gizlemek/göstermek için Katmanlar panelinde katmanın ya da katman grubunun yanındaki göz simgesini () açın/kapatın.

Katman kompozisyonlarıyla çalışma

Creative Cloud Ayıkla farklı Photoshop katman kompozisyonlarını görüntüleyebilmenizi sağlar. Ayıkla için katman kompozisyonları içeren bir PSD dosyası yüklerseniz PSD'nin üst kısmında bir açılır menü görürsünüz. Bu açılır menü PSD'nizdeki tüm katman kompozisyonlarını ve Son Belge Durumu adlı bir seçim içerir. Son Belge Durumu, dosya kaydedilip Creative Cloud'a yüklenmeden önce dosyanın Photoshop'taki son durumudur. Bu durum bir katman kompozisyonu olabilir veya olmayabilir.

Ayıkla'da katman kompozisyonlarıyla çalışma

Dosya paylaşma

Ayıkla sekmesinde bir PSD dosyasını görüntülerken Creative Cloud paylaşım işlevselliğiyle paylaşabilirsiniz. Dosyayı paylaştığınız kullanıcılar Creative Cloud'da oturum açmamış olsalar bile varlıkları ve ölçümleri ayıklayabilirler.

Ayrıntılar için bkz. Dosya ve klasörleri paylaşma.

Geri bildirim sağlama

Daha fazla sorunuz, bildirilecek sorununuz veya başka bir geri bildiriminiz varsa PSD için Ayıkla Forumu'na gönderin.

SSS

Ayıkla, Photoshop Generator etiketlerini destekliyor mu?

Evet. Mümkün olduğu kadarıyla, bir görüntü varlığı ayıklanırken kullanılan ayarların varsayılanı olarak, karşılık gelen katman adında belirtilen Generator etiketleri kullanılır.

Ayıkla'yı kullanarak bir PSD dosyasını düzenleyebilir miyim?

Hayır. Ayıkla salt okunurdur.

PSD veya varlık adlarında desteklenmeyen karakterler var mı?

PSD dosya adlarında veya görüntü varlığı adlarında |, ", ?, <, >, /, \, ;, * ve : özel karakterleri desteklenmez.

Yüklediğim PSD dosyalarına kimler erişebilir?

Ayıkla'ya yüklediğiniz tüm dosyalara yalnızca Creative Cloud hesabınızdan erişilebilir.

Bir PSD dosyası paylaşmak istiyorsanız bunu genel yapabilir ve bağlantıyı paylaşabilirsiniz. Paylaşım sırasında Ayıkla seçeneği etkinse bağlantıya sahip olan herkes Ayıkla'da PSD'nizi görüntüleyebilir ve bundan varlıkları ayıklayabilir.

Ayıkla, CMYK renk uzayını kullanan PSD dosyalarıyla çalışıyor mu?

Hayır. CMYK PSD dosyalarını Ayıkla'ya yüklemeden önce RGB renk uzayına dönüştürün.

PSD dışında dosya formatları da destekleniyor mu?

Hayır. Şimdilik yalnızca PSD dosyaları destekleniyor.

Ayıkla'nın işleyebileceği PSD dosyaları için kısıtlamalar var mı?

Ayıkla, Photoshop uygulamasında oluşturulan PSD dosyaları için tasarlanmıştır. Ayıkla'nın 2 GB'tan daha büyük olan veya 1000'den fazla katmanı bulunan PSD dosyalarıyla kullanılması önerilmez.

Ayıkla ve Photoshop CC için Adobe Generator ne yönden farklıdır?

Generator ve Ayıkla, işlemin kodlanması amacıyla tasarımcı ve geliştirici uyuşmazlığını ortadan kaldırma amacına yöneliktir. Generator, Photoshop CC dahilinde görüntü varlıkları ayıklarken Ayıkla, bir Creative Cloud hizmeti olarak doğrudan tarayıcınızda çalışır. Ayıkla, Photoshop'un yüklenmiş veya çalışıyor olmasını gerektirmez.

Ayrıca, Ayıkla'da birden çok katmandan tek bir varlık oluşturabilirsiniz.

Ayıkla'yı kullanmak için Creative Cloud aboneliğine ihtiyacım var mı?

Ücretsiz veya ücretli bir Creative Cloud hesabına sahip herkes Creative Cloud Varlıkları'na bir PSD dosyası yükleyip Ayıkla'yı kullanabilir.

Bir Ayıkla bağlantısı paylaşırsanız alıcının, PSD dosyanızdaki varlıkları ve ölçüleri ayıklayabilmesi için bir Creative Cloud hesabında oturum açmış olmasına gerek yoktur.

Bazı renkler veya degradeler Ayıkla Stiller panelinde neden bulunmuyor?

Bu gibi durumların çoğunda renkler veya degradeler Ayıkla tarafından desteklenmeyen piksel tabanlı dolgulardır. PSD dosyanız bu tür dolgular kullanıyorsa renkleri yakalamak ve renk örneklerini Stiller paneline eklemek için renk seçiciyi kullanın.

CSS'de Ayıkla'nın degradeler için sağladığı sınırlamalar var mı?

Evet, bazı degrade türleri birtakım püf noktalar olmadan CSS'de oluşturulamaz. Ayıkla an itibarıyla Açı, Yansımış, Baklava veya Şekil Patlaması degrade türleri için doğru CSS sağlamaz. Ancak Doğrusal ve Radyal degrade türleri desteklenir.

Ayıkla'daki PSD önizlemem Photoshop'ta gördüğüm görüntüyle neden eşleşmiyor?

Ayıkla görünümünde Photoshop'ta gördüğünüzden farklı görüntü oluşturma durumları olabilir. Bu tür farklılıklar gözlemlerseniz bunları bilmek isteriz.

Gördüğünüz görüntüyü açıkladığınız bir sorunu forumumuzda açıklayın. Daha da iyisi, söz konusu farklılığa ilişkin bir görüntü yayınlayın, bunu sizin için çözümlemeyi deneyelim.

Ayıkla'yı mobil cihazlarda kullanabilir miyim?

Mobil cihazlarda, PSD'nizin önizlemesini görebilir ve renkler, fontlar ve degradeler gibi stilleri görüntüleyebilirsiniz. PSD ile masaüstünüzde yaptığınız gibi etkileşim kuramazsınız.

Tüm varlıklarımı tek seferde indirebilir miyim?

An itibarıyla Ayıkla, tüm varlıklarınızı tek seferde indirmenizi desteklememektedir. Varlıkları ayrı ayrı ayıklayıp indirmeniz gerekir.

Bir tasarım için tüm CSS kodlarını tek seferde indirebilir miyim?

An itibarıyla Ayıkla, bir tasarım için tüm CSS kodlarını tek seferde indirmeyi desteklememektedir. Öğeleri ayrı ayrı seçmeniz ve bunların CSS'sini üretim kodunuza kopyalamanız gerekir.

Bu özellikle ilgileniyorsanız, CSS çıktısının düzenlenmesine ilişkin beklentilerinizi forumumuzda yayınlayın.

PSD dosyamı paylaştım, ancak alıcı Ayıkla sekmesini göremiyor. Neden?

PSD dosyasını Ayıkla'nın Ağustos 2014'ün sonlarında yayınlanmasından önce paylaştıysanız PSD dosyasının Ayıkla sekmesi etkin değildir. Etkinleştirmek için şunları yapın:

Bu seçenek genel olarak paylaşılan URL'yi değiştirmeden Ayıkla'yı etkinleştirir.

  1. Bağlantıyı Gönder iletişim kutusunda Gelişmiş Seçenekler'i açın.
  2. Ayıkla Sekmesine İzin Ver seçeneğinin etkin olduğundan emin olun.

Project Parfait ile Ayıkla arasında ne fark vardır?

Project Parfait, Adobe'nin artık Ayıkla'da gördüğünüz iş akışlarını kullanıma almak için beta olarak sunduğu hizmettir. Ayıkla tüm Project Parfait işlevlerine ve daha fazlasına sahiptir. Project Parfait artık resmi olarak Creative Cloud'da sunulduğu için, PSD dosyasından bilgi ve varlıkları ayıklamak için Project Parfait hizmetinin kullanılması artık mümkün olmayacaktır. 

Project Parfait'e yüklediğim PSD'lere ne olacak?

Project Parfait kullandıysanız ve üzerinde çalıştığınız dosyaları indirmek isterseniz bunu 2014'ün sonuna kadar yapabilirsiniz. 

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi