Penpot’a SVG aktarma: Düzenlenebilir şekiller hazırlayın

Penpot’a SVG aktarmak için bir tasarım dosyası açın ve .svg dosyasını tuvale sürükleyin ya da araç çubuğundaki görsel aracını seçerek dosyayı bulun. Kontrol panelindeki Import files komutu Penpot proje dosyaları içindir. Bir simge yerleştirmek istiyorsanız tasarımın içinden başlayın. Penpot’un katman ekleme kılavuzu ve proje içe aktarma belgeleri bu iki ayrı yolu açıklıyor.

Grafik göründüğünde tek bir renk bölgesini değiştirip tek bir konturu düzenleyebildiğinizi kontrol edin. Bir simge doğru görünebilir, ancak yine de üzerinde değişiklik yapmak zor olabilir. Kaynak zaten vektörse gerektiğinde onarın veya yeniden dışa aktarın. PNG ya da JPG’yi yalnızca piksellerden şekiller elde etmeniz gerektiğinde vektörleştirin.

Yeniden kullanmadan önce içe aktarılan grafiği kontrol edin

Orijinal SVG’yi saklayın, seti temsil eden bir simgeyi içe aktarın ve bir kopya üzerinde çalışın. Görünümü, bir dolguyu, bir eğriyi ve varsa düzenlenebilir metni test edin. İş akışını kitin tamamına uygulamadan önce ayrı bir SVG dışa aktarın ve orijinaliyle karşılaştırın.

Tuvalden başlayın, ardından katmanları inceleyin

Grafiğin yer alacağı Penpot dosyasını açın. Kaydettiğiniz SVG’yi boş bir alana ekleyin; böylece tasarımın geri kalanından ayrı inceleyebilirsiniz. Sürükleme başarısız olursa görsel aracının dosya seçicisini kullanın. Böylece sorunun sürükle ve bırak işleminden kaynaklanıp kaynaklanmadığını ayırt edebilirsiniz.

İçe aktarılan grafiği seçin ve Layers panelindeki kaydını genişletin. Grup, düzeni korumaya yarar; SVG’nin bitmap’e dönüştüğünün kanıtı değildir. Panelden bir alt öğeyi seçebilir veya gruba girmek için çift tıklayabilirsiniz. Penpot ayrıca Ctrl-tıklama ya da Command-tıklama ile içteki öğeleri doğrudan seçmeyi destekler. Bu kontroller katman seçme kılavuzunda açıklanıyor.

Farklı SVG içerikleri farklı nesne türlerine dönüşebilir. Penpot’un yayımlanmış içe aktarıcısında yollar, dikdörtgenler ve elipsler gibi yaygın şekiller uygulamanın kendi şekil işleyicileriyle ele alınır; diğer öğeler ham SVG olarak korunabilir. İçe aktarıcı, görsel öğelerini de ayrı işler. Bu yüzden yalnızca dosya adına bakarak her parçanın nasıl düzenleneceği anlaşılamaz. SVG şekil içe aktarıcısına bakabilirsiniz.

Başlangıçta tüm grupları çözmekten veya her şeyi tek yapıda birleştirmekten kaçının. Önce değiştirmek istediğiniz parçayı belirleyin. Alt öğeleri ihtiyaç duyduğunuz kontrolü zaten sağlıyorsa grubu koruyun.

Bir dolguyu ve bir eğriyi test edin

Parçaları belirgin biçimde ayrılan küçük bir simge kullanın. Saksıdaki bir bitki uygun bir örnektir: saksının rengini değiştirdiğinizde yapraklar değişmemeli, tek bir yaprağı düzenlediğinizde de bütün bitkinin şekli bozulmamalıdır.

İçe aktarılan simgenin bir kopyasında:

1. Saksının katmanını seçip dolgusunu zıt bir renge değiştirin. Yalnızca amaçlanan bölgenin değiştiğini kontrol edin.
2. Bir yaprak yolunu seçin. Düğümlerini düzenlemek için Enter’a basın, bir noktayı hafifçe taşıyın ve ardından işlemi geri alın. Penpot bunu düğüm düzenleme talimatlarında açıklıyor.
3. Kopyayı, dokunmadığınız içe aktarılmış grafikle karşılaştırın. Testi geri aldıktan sonra orijinal silüetin, küçük boşlukların ve kontur kalınlığının korunduğunu doğrulayın.

Saksı ve yapraklar birlikte değişiyorsa seçimi ve kaynak yapısını inceleyin. Dış grubu seçmiş olabilirsiniz ya da kaynak, birkaç bölgeyi tek bir yolda birleştiriyor olabilir. Başarılı bir renk değişikliği, her konturun ayrı bir Penpot yolu olduğunu kanıtlamaz.

Ham SVG içeriği de bir başka olasılıktır. Penpot’un bunun için ayrı bir seçenek paneli vardır; desteklenen öğeler için görünüm kontrolleri de sunar. Dolgu veya kontur kontrollerinin bulunması, bu nedenle normal düğüm düzenlemenin mümkün olduğunu garanti etmez. Parçayı istediğiniz gibi düzenleyemiyorsanız kaynak düzenleyicide o parçayı basitleştirin veya yeniden çizin, ardından yeni bir kopyayı içe aktarın. Bu ayrım Penpot’un ham SVG seçeneklerinin uygulamasında görülebilir.

Dosyayı değiştirmeden önce belirtinin nedenini bulun

Değiştirilmemiş SVG’yi referans olarak kullanın. Bir tarayıcıda açın ve oradaki görünümü Penpot’a aktarılan grafikle karşılaştırın. Tarayıcıda zaten yanlış görünüyorsa Penpot kopyasını onarmaya çalışmadan önce kaynak dışa aktarma işlemine dönün.

Eksik konturlar ve görünmeyen grafikler

Seçili katmanı silmeden önce dolgu ve kontur ayarlarını kontrol edin. Penpot, kontur rengi, opaklık, genişlik, stil ve görünürlük kontrollerinin yanı sıra açık yollar için uç biçimi kontrolleri sunar. Konturla çizilmiş kısa bir işaret, farklı bir uç biçimiyle oldukça farklı görünebilir. Bu yüzden çizginin yok olduğunu varsaymak yerine şekli karşılaştırın. Mevcut kontroller Color and Strokes belgesinde açıklanıyor.

Görünmeyen bir nesne için gizli katmanları ve kırpmayı da inceleyin. Tarayıcı kaynağı doğru görüntülüyor, ancak Penpot görüntülemiyorsa kaynak dosyanın bir kopyasında sorunlu öğeyi ayırın. Daha basit örneği yeniden dışa aktarın ve tekrar karşılaştırın. Böylece birkaç ayarı aynı anda değiştirmek yerine araştırabileceğiniz belirli bir dosya ve belirti elde edersiniz.

Eski bir geçici çözüm öneriyor diye her style öğesini, maskeyi veya tanımı kaldırmayın. Bu öğeler görünüm bilgisi taşıyabilir. Sorun kaynaktaki kontur yapısıysa ayrıntılı kaybolan SVG konturlarını teşhis etme kılavuzunu izleyin ve konturları dolgulu şekillere dönüştürmeden önce düzenlenebilir bir ana dosya saklayın.

Doğru görünen, ancak düzenlenemeyen metin

Bir düğme etiketinde bir sözcüğü değiştirmeyi deneyin. Bir logo içinse harf şekillerini korumanın yeterli olup olmadığına karar verin. Bunlar farklı gereksinimlerdir.

İçe aktarılan yazı zaten vektör yollarına dönüştürülmüş olabilir veya Penpot’un kendi metin katmanı yerine SVG içeriği olarak kalabilir. İçe aktarılan her SVG metin öğesinin düzenlenebilir Penpot metnine dönüştüğünü varsaymayın. Sözcüklerin düzenli olarak değişmesi gerekiyorsa Penpot’un metin aracıyla yazıyı yeniden oluşturun, amaçlanan yazı tipini seçin ve harf aralıklarını ve satır sonlarını karşılaştırın. Penpot’un metin kılavuzu metin katmanları oluşturmayı ve içeriklerini düzenlemeyi açıklıyor.

Harflerin şekli değişiyorsa veya metin farklı biçimde satırlara bölünüyorsa SVG yazı tipi sorunlarını giderme kılavuzunu kullanın. Teslim sürümünde yazının vektör yollarına dönüştürülmesi gerekse bile düzenlenebilir metin içeren bir kopyayı saklayın.

PerfectVector iş akışında ne zaman yer alır?

Raster görüntü biçiminde bir simgeniz veya çiziminiz varsa ve Penpot’ta düzenlenebilir konturlara ihtiyaç duyuyorsanız PerfectVector yararlıdır. PNG veya JPG’yi SVG yollarına dönüştürün, silüeti ve renk bölgelerini inceleyin, ardından sonucu içe aktararak bir dolgu ve bir eğri testini uygulayın. Vektörleştirme sonucunu yine de kullanmak istediğiniz grafikle karşılaştırıp değerlendirmeniz gerekir.

SVG içine yerleştirilen raster görüntünün kapsayıcısı değişti diye düzenlenebilir yaprak veya saksı konturları oluşmaz. Penpot’un içe aktarıcısında ayrı bir görsel işleyicisi vardır; görseli, içe aktarıcı kodunun başka bölümünde işlenen Penpot’un kendi yol nesnelerine dönüştürmez.

Elinizde varsa orijinal vektör dışa aktarımını kullanın. Basit bir arayüz simgesini Penpot’un kendi şekilleriyle çizmek, vektörleştirmeye göre geometri üzerinde daha bilinçli kontrol sağlayabilir. Pikselleri tasarımın bir parçasıysa fotoğrafları ve yoğun dokulu grafikleri görsel olarak koruyun. Görsel vektörleştirme açıklaması, vektörleştirmenin neleri elde edebildiğini ve neleri değiştirdiğini anlatıyor.

Kiti oluşturmadan önce bir örnek dışa aktarın

Çalışma tasarımını Penpot’ta tutun ve teslim için ayrı bir SVG dışa aktarın. Simgeyi veya panosunu seçin, Design panelinin Export bölümündeki artı düğmesiyle bir dışa aktarma ön ayarı ekleyin ve SVG’yi seçin. Penpot bunu Exporting layers belgesinde açıklıyor.

Dışa aktarılan dosyayı bir tarayıcıda açın. Renkleri, konturları, metnin görünümünü, kırpmayı ve boş alanları referansla karşılaştırın. Dosya yeniden bir tasarım düzenleyiciye aktarılacaksa bu dışa aktarımı ayrı bir alana içe aktarın ve düzenleme testini tekrarlayın. Doğru görünüm ve kullanışlı düzenleme yapısı ayrı ayrı kontrol edilmelidir.

Örneği daha büyük bir kite eklemeden önce şunları doğrulayın:

• Ayrı renkler gerektiren bölgeler bağımsız olarak seçilebiliyor.
• Yeniden şekillendirmeyi beklediğiniz konturlar kullanışlı düzenleme kontrolleri sunuyor.
• Düzenlenebilir etiketler çalışma tasarımında metin olarak kalıyor.
• Dışa aktarılan simge amaçlanan sınırlara ve kenar boşluklarına sahip.
• Simge, arayüzde kullanılacağı gerçek boyutta hâlâ kolayca anlaşılabiliyor.

Ardından aynı kontrolleri setin tamamına uygulayın. PNG simgelerini SVG arayüz kitine dönüştürme iş akışı, tek tek içe aktarımlar sorunsuz hâle geldikten sonra ortak ızgaralar, optik boyutlandırma ve adlandırma kurallarını ekler.

Sık sorulan sorular

Penpot’un Import files iletişim kutusu SVG’mi neden reddediyor? Bu iletişim kutusu Penpot proje dosyalarını içe aktarır. Bir SVG grafik yerleştirmek için tasarım dosyası açın ve görsel aracını kullanın ya da SVG’yi tuvale sürükleyin.

SVG içe aktarmak her parçayı düzenlenebilir hâle getirir mi? Yaygın vektör şekilleri Penpot’un kendi nesnelerine dönüşebilir, ancak diğer içerikler ham SVG veya görsel olarak kalabilir. Grafiği yeniden kullanmadan önce ihtiyaç duyduğunuz dolgu, eğri veya metin değişikliğini test edin.

İçe aktarılan bir SVG’nin grubunu çözmem gerekir mi? Yalnızca grup yapısını değiştirmek işinize yardımcı olacaksa. Önce Layers panelinde bir alt öğeyi seçmeyi deneyin. Kullanışlı bir grubu korumak, seçilebilir alt öğelerini düzenlemenizi engellemez.

Yanlış içe aktarılan bir SVG’yi vektörleştirmeli miyim? Mevcut vektör grafiğini onararak veya yeniden dışa aktararak başlayın. Vektörleştirme, mevcut grafik raster görüntü olduğunda ve yollara ihtiyaç duyduğunuzda yararlıdır; mevcut bir SVG için genel bir onarım adımı değildir.

Kaynaklar

1. Penpot: Layers — Grafik ekleme, alt öğeleri seçme ve yol düğümlerini düzenleme.
2. Penpot: Export and import Penpot files — Tuvale grafik eklemekten ayrı olan Penpot’un kendi proje dosyalarını içe aktarma yolu.
3. Penpot: SVG shape importer — Yayımlanmış bir sürümde Penpot’un kendi şekillerinin, görsellerin ve ham SVG içeriğinin ayrı işlenmesi.
4. Penpot: Raw SVG options — Görünüm kontrollerinin tek başına Penpot’un kendi yollarının düzenlenebilirliğini kanıtlamaması.
5. Penpot: Color and Strokes — Teşhis kontrollerinde kullanılan dolgu, kontur ve uç biçimi kontrolleri.
6. Penpot: Text and Typography — Penpot’un kendi metin katmanlarını oluşturma ve içeriklerini düzenleme.
7. Penpot: Exporting layers — Bir katman veya pano için SVG dışa aktarma ön ayarı ekleme.

---

Kaynağınız PNG veya JPG ise ve düzenlenebilir şekillere ihtiyaç duyuyorsanız PerfectVector ile bir SVG hazırlayın. Grafiği tasarım kitinize dâhil etmeden önce Penpot’a aktarın, bir dolguyu değiştirin ve bir eğriyi test edin.