Katmanlardan CSS oluşturma

Son güncelleme: 2 Kas 2026

Adobe Photoshop'ta tasarım özelliklerini web'e hazır stil sayfalarına dönüştürmek için şekil ve metin katmanlarından CSS kodunun nasıl çıkarılacağını öğrenin.

Copy CSS özelliği, Photoshop katmanlarından doğrudan Basamaklı Stil Sayfası özellikleri oluşturur ve stil sayfası dosyalarınıza yapıştırılabilecek tasarım özelliklerini yakalar. Bu iş akışı, görsel tasarım ile kod uygulaması arasındaki boşluğu kapatır; özellikle web projeleri için varlıklar hazırlanırken veya kesin stil özellikleri gereken geliştiricilerle iş birliği yapılırken işe yarar.

Görsel tasarım öğelerini koda hazır stil bildirimlerine translate etmeniz gerektiğinde Copy CSS'yi kullanın. Bu özellik, tek tek şekil katmanları, metin katmanları veya bu öğeleri içeren katman gruplarıyla çalışır.Stil sayfanıza doğrudan yapıştırılabilecek CSS oluşturur ve tasarım özelliklerini piksel düzeyinde doğrulukla yakalar. Daha kapsamlı tasarımdan web'e iş akışları için ek stil seçenekleri açısından katman efektleri ve stilleri konusunu, diğer çıkış biçimleri açısından ise varlıkları dışa aktarma konusunu inceleyin.

Katmanlardan yakalanan CSS özellikleri

Copy CSS, seçtiğiniz katman türüne bağlı olarak farklı özellikler çıkarır.

Şekil katmanları şunlar için CSS oluşturur:

Boyut ve konum koordinatları
Kontur rengi
Dolgu rengi, degrade tanımları dahil
Alt Gölge Efektleri

Metin katmanları, şekil özelliklerinin yanı sıra tipografi özelliklerini de içerir:

Font ailesi
Font Boyutu ve Kalınlık
Satır yüksekliği
Metin dekorasyonu (alt çizili, üstü çizili)
Dikey hizalama (üst simge, alt simge)
Metin hizalama

Katman grupları, üst-alt ilişkileri temsil eden yapılandırılmış CSS sınıfları oluşturur.Grubun kendisi bir Asıl div haline gelir, grup içindeki her Katman ise bir alt div oluşturur. Alt öğelerin üst ve sol konum değerleri, standart CSS konumlandırma davranışını yansıtacak şekilde üst kapsayıcıya göre hesaplanır.

Copy CSS sınırlamaları

CSS Kopyala, Akıllı Nesnelerle çalışmaz. Katmanınız bir Akıllı Nesne ise içeriğini düzenlemek için çift tıklayın ve Akıllı Nesne belgesindeki katmanlardan CSS kopyalayın veya iş akışına uygunsa katmanı önce rasterleştirin.

Özellik, gruplandırılmadıkları takdirde aynı anda seçilen birden fazla şekil veya metin katmanını işleyemez. Birden fazla katmandan aynı anda CSS kopyalamak için önce bunları bir katman grubuna yerleştirin.

Katmanlarınızdan CSS kodu oluşturun

Katmanlar panelinde bir şekil katmanına, metin katmanına veya katman grubuna sağ tıklayın ve bağlam menüsünden CSS Kopyala seçeneğini seçin. Alternatif olarak, katmanı seçin, ardından Katmanlar panel menüsünden CSS Kopyala seçeneğini seçin.

Stil sayfası belgenizi açın ve Ctrl + V (Windows) veya Command + V (macOS) tuş kombinasyonunu kullanarak oluşturulan kodu yapıştırın.

CSS kodu artık panoda ve web projenize entegre edilmeye hazır. Oluşturulan özelliklerin geliştirme gereksinimlerine uygun olduğundan emin olmak için bunları inceleyin ve dinamik tasarım veya tarayıcı uyumluluğu için gerektiğinde değerleri ayarlayın.

Photoshop ile etkileyici görseller oluşturun
Bildiğiniz ve sevdiğiniz sektör lideri yaratıcı araçlarla fotoğrafları düzenleyin, rötuş yapın ve dönüştürün.

Uygulamayı açın

Photoshop'ta notlarla çalışma

Öğrenin

Doğrudan uygulama içinden adım adım video eğitimleri ve uygulamalı rehberlikle bilgi edinin.

Topluluk

Tartışmalara katılın, yanıtlar bulun, uzmanlardan öğrenin ve bilginizi paylaşın.

Adobe Ana Sayfa

Favori Creative Cloud uygulamalarınıza, hizmetlerinize, dosya yönetimine ve daha fazlasına erişin.