Adobe Illustrator CC'den SVG grafikleri, arka planı olan dijital tasarımcılara nadiren verilir. Normalde grafikler, web sitesinde, uygulamada, animasyonda veya etkileşimli bağlamda mevcut olan herhangi bir arka planın üzerinde yüzer.
SVG resimlerinin arkasındaki arka planı ortaya çıkarmanın ne anlama geldiğini tartışmadan önce, SVG grafiklerine şeffaflık uygulamaya odaklanın. Şeffaflık panelini kullanarak resmin opaklığını tanımlamanız gerekir. Örneğin, şekildeki sarı şekle yüzde 50 şeffaflık uygulanmış ve şeffaflığın etkisini görebilirsiniz. Ve evet, bu görüntü , SVG'de yerleşik olarak bulunan tüm hafif, hızlı yüklenen ve sonsuz ölçeklenebilir özelliklere sahip bir SVG dosyasıdır.
Renkli bir arka planın üzerinde yarı opak bir SVG şekli.
Tasarımcılar, şeffaf hale getirilen veya görünür durumda kalan arka planlar açısından düşünmeye alışkındır. Bir arka planı nakavt etmeyi düşünüyoruz. PNG görüntüleri ve GIF görüntüleri bu şekilde çalışır; ya bir arka planla oluşturursunuz ya da bu arka planı çıkarmak için Illustrator veya Photoshop gibi bir programda saydam bir arka plan seçersiniz.
GIF'ler ve PNG'ler ile, arka plan renklerinin veya resimlerin web sayfalarında gösterilmesini sağlayan tek bir şeffaf renge sahip olabilirsiniz. Ancak bir SVG dosyasında arka planı devre dışı bırakma mantığı PNG'ler ve GIF'lerden farklıdır. Esasen, arka planı olmadığı için şeffaf olmayan bir arka plana sahip bir SVG grafiği diye bir şey yoktur. Başka bir deyişle: varsayılan olarak SVG grafikleri arka plan olmadan kaydeder ve dışa aktarır.
Sorun nedir? SVG dosyalarını kaydederken veya dışa aktarırken yanlışlıkla şeffaf bir arka planla sonuçlanmak kolaydır! Aşağıdaki şekil beyaz bir arka plana sahip olabilir veya şeffaf bir arka plana sahip olabilir. Sadece Illustrator ekranına bakarak anlayamazsınız; Görünüm → Şeffaflık Izgarasını Göster'i seçmelisiniz.
Bu grafik beyaz bir arka plana sahip olabilir veya arka planı olmayabilir.
Saydamlık Izgarası etkinleştirildiğinde, gösterildiği gibi, kuşun arkasında beyaz bir dikdörtgen olduğunu ve dosyayı bir SVG olarak kaydederseniz veya bir SVG olarak dışa aktarırsanız, bu beyaz arka planın grafikle "giteceğini" görebilirsiniz.
Saydamlık ızgarasını görüntülemek, grafiğin arkasında beyaz bir dikdörtgen ortaya çıkarır.
Bunu başka bir açıdan vurgulayayım ve ışık tutayım. Bu görüntüyü bir SVG olarak dışa aktarmaya gittiğimde, gösterilen Ekranlar için Dışa Aktar iletişim kutusunda saydamlık rengi seçme seçeneği yok.
Arka plan rengi olmadığı için SVG'de saydamlık rengi seçemezsiniz.
SVG hedefli resimlerinin arkasına bir arka plan dikdörtgeni koymakta ısrar eden tasarımcılarla sık sık karşılaşıyorum, böylece hedef ortamdaki (bir web sayfası veya uygulama gibi) bir renk tarafından arka plana alındığında grafiğin nasıl görüneceğini görebilirler. Sorun değil, SVG'yi kaydederken veya dışa aktarırken o arka plan dikdörtgenini kaldırmayı hatırladığınız sürece onları uyarıyorum. Ve günümüzün yüksek basınçlı, yüksek üretkenlikli, hızlı geri dönüşlü dünyasında, kimin hatırlaması için bir şeye daha ihtiyacı var?
Daha iyi bir çözüm, grafiğin yerleştirileceği ortamla eşleşen tek bir renkle bir saydamlık "ızgarası" tanımlamaktır. Neden ızgarayı tırnak içine alıyorum ? Çünkü bu teknik hile yapar: Bununla, bir web sayfasını veya bir uygulama arka plan rengini etkin bir şekilde simüle ederek her iki ızgara rengini de aynı renk olarak tanımlarsınız.
SVG resmi geliştirirken özel bir arka plan oluşturmak üzere bu tekniği kullanmak için şu adımları izleyin:
Dosya → Belge Kurulumu'nu seçin.
Genel sekmesinde, Saydamlık ve Üst Baskı Seçenekleri bölümünü bulun.
İstediğiniz değişiklikler, iletişim kutusunun bu bölümünde kontrol edilir.
Izgaradan etkin bir şekilde vazgeçtiğiniz için ızgara boyutunu tanımlama konusunda endişelenmeyin.
İletişim kutusunun Saydamlık Izgarası bölümünde, iki ızgara rengi panelinden ilkini tıklayın ve aşağıdaki şekilde gösterilen Renkler açılır penceresindeki çeşitli renk paletlerinden birini kullanarak bir arka plan rengi seçin.
Bu renk paletlerinin hiçbiri bu arada özellikle dijital dostu değil. RGBA, onaltılık veya diğer standart web renk biçimleri için bir palet yoktur, ancak renk seçici damlalık, eşleştirmeyi hedeflediğiniz arka plan rengini elde etmenize yardımcı olabilir.
Bir Saydamlık Izgarası ile bir önizleme arka plan rengi tanımlama.
İki ızgara rengi panelinden ikincisini seçin ve ona aynı rengi atayın.
Unutmayın, o rengi yakalamak için renk seçici damlalığı kullanabilirsiniz.
Belge Kurulumu iletişim kutusunda Tamam'a tıklayın.
Önceki adımlarda yaptığım tek şey , etkinleştirildiğinde Şeffaflık Izgarasının nasıl görüntüleneceğini tanımlamaktı . Bu nedenle, Şeffaflık Izgaranız etkin değilse, Görünüm → Şeffaflık Izgarası'nı seçin.
Bu şekilde, grafikli çalışma yüzeyini seçtim ve projeyi simüle edilmiş bir arka plan rengine karşı önizliyorum.
Çıktı arka plan rengini özel bir Şeffaflık Izgarası ile önizleme.
SVG grafiklerine saydamlık (yüzde 50 opaklık gibi) veya renk yakma, koyulaştırma veya çarpma gibi saydamlık efektleri uygulandığında, bu efektler SVG'nin ölçeklenebilirliğini korur.
Bu şekil, bir PNG dosyası (üstte) ve bir SVG olarak dışa aktarılan aynı grafiği (üç yarı saydam turuncu dikdörtgen) göstermektedir. Bir tarayıcıda yakınlaştırdığımda PNG dosyasının kalitesinin nasıl düştüğünü görebilirsiniz. Göremediğiniz şey, PNG dosyasının SVG'nin neredeyse iki katı büyüklüğünde olmasıdır.
Saydamlık uygulandığında PNG çıktısını (üstte) SVG ile karşılaştırma
Şeffaflık efektleri için SVG kullanmanın avantajlarının bir özetini burada bulabilirsiniz:
Bu arada, bu dikdörtgen kümesi için oluşturulan SVG kodunun neye benzediğini ve bir web veya uygulama geliştiricisinin bununla çalışmasının ne kadar kolay olduğunu merak ediyorsanız, işte üç SVG kutusundan ilkinin kodu , yüzde 60 opaklık uygulanmış olarak:
<="" kod="">
Son olarak, SVG'nizin arka planının renkli dolguya sahip olmasını istiyorsanız, bunu Belge Özellikleri aracılığıyla da gerçekleştirebilirsiniz. Menü. Arka Plan Rengi yazan yerin yanındaki beyaz şeridi tıklamanız yeterlidir. Ekranınızda bir renk seçici açılacaktır.
Renk dolgusuna rağmen, A sütunu (bu sütunu temsil ettiği sürece) SVG arka planınızın şeffaf olmaya devam edeceğini unutmayın. rengin şeffaflığı) 0 olarak kalır. Dokümanın gerçekten bu arka plan rengine sahip olmasını istiyorsanız (dışa aktarmalarda bile) bu sütunu 0 'dan 'ye getirebilirsiniz. 100.
Inkscape'te arka planlarla çalışmak için de bu yeterli olacaktır. Bu yazıda ele alınmayan herhangi bir sorunuz varsa aşağıya bir yorum bırakın; yardımcı olabilirsem size tekrar yazarım.
Adobe Acrobat CS5'teki Anlık Görüntü aracını, hem metin hem de görüntü seçmek ve bir PDF dosyasında belirli bir alanın resmini oluşturmak için kullanabilirsiniz. Sonuç genellikle bir PDF dosyası içindeki bir bölümün ekran görüntüsü olarak adlandırılır. Sonuç bir resimdir ve metniniz […]
Araştırmacılar ve bilim adamları için tasarlanan Photoshop CC'deki ölçüm yetenekleri oldukça güçlüdür. Teknik bir görüntüdeki hemen hemen her şeyi ölçebilir ve bunların sayısını sayabilirsiniz, belki bir mikroskop veya teleskoptan. Bir görüntüdeki herhangi bir öğenin tam boyutunu biliyorsanız, hemen hemen her şeyi keşfedebilirsiniz […]
Adobe Creative Suite 5 (Adobe CS5) Illustrator'daki Sıvılaştırma araçlarını kullandığınızda, basitten karmaşığa doğru bozulmalar oluşturarak nesneleri bükebilir, dalgalı, yapışkan veya dikenli hale getirebilirsiniz. Sıvılaştırma araçları, nesnelerinizdeki her türlü yaratıcı veya tuhaf (nasıl baktığınıza bağlı olarak) çarpıtmalar gerçekleştirebilir. Sen […]
Adobe XD projenizde metniniz olduğunda, metin özelliklerini değiştirmeye başlayabilirsiniz. Bu özellikler, Yazı Tipi Ailesi, Yazı Tipi Boyutu, Yazı Tipi Ağırlığı, Hizalama, Karakter Aralığı (karakter aralığı ve izleme), Satır Aralığı (önde gelen), Dolgu, Kenarlık (kontur), Gölge (alt gölge) ve Arka Plan Bulanıklığını içerir. Şimdi bu özelliklerin nasıl uygulandığını gözden geçirelim. Okunabilirlik ve yazı tipi hakkında […]
QR kodu grafikleri oluşturmak ve değiştirmek için InDesign'ı kullanabilirsiniz. QR kodları, kelimeler, sayılar, URL'ler veya diğer veri biçimleri gibi bilgileri depolayabilen bir barkod biçimidir. Kullanıcı, akıllı telefon gibi bir cihazdaki kamerasını ve yazılımını kullanarak QR kodunu tarar ve yazılım […]
Adobe Illustrator'da olduğu gibi, Photoshop çalışma yüzeyleri tek bir belge içinde ayrı sayfalar veya ekranlar oluşturma yeteneği sağlar. Bu, özellikle bir mobil uygulama veya küçük broşür için ekranlar oluşturuyorsanız yardımcı olabilir. Çalışma yüzeyini, Katmanlar paneli kullanılarak oluşturulan özel bir katman grubu türü olarak düşünebilirsiniz. Onun […]
Adobe Illustrator CC'de metni sarmak, bir hediyeyi sarmakla aynı şey değildir - bu daha kolaydır! Metin sarma, metni bu şekilde gösterildiği gibi bir grafiğin etrafına sarmaya zorlar. Bu özellik, herhangi bir parçaya biraz yaratıcılık katabilir. Grafik, metni etrafına sarmaya zorluyor. İlk önce, oluştur […]
Adobe Illustrator CC'de tasarım yaparken, genellikle tam boyutta (örneğin, 2 x 3 inç) bir şekle ihtiyacınız vardır. Bir şekil oluşturduktan sonra, onu tam ölçülere göre yeniden boyutlandırmanın en iyi yolu, bu şekilde gösterilen Dönüştür panelini kullanmaktır. Nesneyi seçtikten sonra Pencere → Dönüştür'ü seçin ve […]
Illustrator'da SVG grafiklerine saydamlığın nasıl uygulanacağını öğrenin. Saydam arka planlara sahip SVG'lerin nasıl çıktı alınacağını ve saydamlık efektlerinin nasıl uygulanacağını keşfedin.
Görüntülerinizi Adobe XD'ye aktardıktan sonra, çok fazla düzenleme denetiminiz yoktur, ancak görüntüleri herhangi bir şekilde yaptığınız gibi yeniden boyutlandırabilir ve döndürebilirsiniz. Ayrıca, köşe widget'larını kullanarak içe aktarılan bir görüntünün köşelerini kolayca yuvarlayabilirsiniz. Görüntülerinizi maskeleme Kapalı bir şekil tanımlayarak […]
