Grafik SVG daripada Adobe Illustrator CC jarang diserahkan kepada pereka digital dengan latar belakang. Biasanya grafik terapung di atas sebarang latar belakang yang wujud dalam tapak web, apl, animasi atau konteks interaktif.
Sebelum membincangkan perkara yang terlibat dalam menyingkirkan latar belakang di sebalik karya seni SVG, fokus pada menerapkan ketelusan pada grafik SVG. Anda perlu menentukan kelegapan karya seni menggunakan panel Transparency. Contohnya, 50 peratus ketelusan telah digunakan pada bentuk kuning dalam rajah dan anda boleh melihat ketelusan itu berkuat kuasa. Dan ya, imej itu ialah fail SVG, dengan semua ciri ringan, pemuatan pantas dan tidak terhingga terbina dalam SVG.
Bentuk SVG separa legap di atas latar belakang berwarna.
Pereka bentuk digunakan untuk berfikir dari segi latar belakang yang sama ada dibuat telus atau kekal kelihatan. Kami berfikir tentang mengetuk latar belakang. Imej PNG dan imej GIF berfungsi seperti itu—anda sama ada membuat dengan latar belakang atau anda memilih latar belakang lutsinar dalam program seperti Illustrator atau Photoshop untuk menyingkirkan latar belakang itu.
Dengan GIF dan PNG, anda boleh mempunyai satu warna lutsinar yang membolehkan warna latar belakang atau imej dipaparkan dalam halaman web. Tetapi logik untuk mengetuk latar belakang adalah berbeza dalam fail SVG berbanding dengan PNG dan GIF. Pada asasnya, tidak ada grafik SVG yang mempunyai latar belakang tidak telus kerana tiada latar belakang. Dalam erti kata lain: secara lalai grafik SVG simpan dan eksport tanpa latar belakang.
Jadi apa masalahnya? Nah, mudah untuk tidak sengaja mempunyai latar belakang telus apabila menyimpan atau mengeksport fail SVG! Angka berikut mungkin mempunyai latar belakang putih, atau mungkin mempunyai latar belakang lutsinar. Anda tidak boleh memberitahu hanya dengan melihat skrin Illustrator; anda perlu memilih Lihat → Tunjukkan Grid Ketelusan.
Grafik ini mungkin mempunyai latar belakang putih atau ia mungkin tidak mempunyai latar belakang.
Dengan Grid Transparency didayakan, seperti yang ditunjukkan, anda boleh melihat bahawa burung itu mempunyai segi empat tepat putih di belakangnya dan latar belakang putih itu akan "bersama" dengan grafik jika anda menyimpan fail sebagai SVG atau mengeksportnya sebagai SVG.
Melihat grid ketelusan mendedahkan segi empat tepat putih di belakang grafik.
Biar saya tekankan dan terangkan perkara ini dari sudut lain. Apabila saya pergi untuk mengeksport imej ini sebagai SVG, dialog Eksport untuk Skrin, ditunjukkan, tidak mempunyai pilihan untuk memilih warna ketelusan.
Anda tidak boleh memilih warna ketelusan dalam SVG kerana tiada warna latar belakang.
Saya sering menemui pereka yang berkeras untuk meletakkan segi empat tepat latar belakang di belakang karya seni yang ditakdirkan SVG mereka supaya mereka dapat melihat rupa grafik apabila di latar belakangkan oleh warna dalam medium sasaran (seperti halaman web atau apl). Tidak mengapa, saya memberi amaran kepada mereka, selagi anda ingat untuk mengalih keluar segi empat tepat latar belakang itu apabila anda menyimpan atau mengeksport SVG. Dan dalam dunia tekanan tinggi, produktiviti tinggi, pemulihan pantas hari ini, siapa yang memerlukan satu perkara lagi untuk diingati?
Penyelesaian yang lebih baik ialah mentakrifkan "grid" ketelusan dengan satu warna yang sepadan dengan persekitaran tempat grafik akan diletakkan. Mengapa saya meletakkan grid dalam petikan? Kerana teknik ini menipu: Dengan itu, anda mentakrifkan kedua-dua warna grid sebagai warna yang sama, dengan berkesan mensimulasikan halaman web atau warna latar belakang aplikasi.
Untuk menggunakan teknik itu untuk mencipta latar belakang tersuai semasa anda membangunkan karya seni SVG, ikut langkah berikut:
Pilih Fail → Persediaan Dokumen.
Dalam tab Umum, cari bahagian Transparency dan Overprint Options.
Perubahan yang anda inginkan dikawal dalam bahagian dialog ini.
Jangan risau tentang menentukan saiz grid kerana anda menggunakan grid dengan berkesan.
Dalam bahagian Grid Ketelusan dialog, klik yang pertama daripada dua panel warna grid dan pilih warna latar belakang dengan menggunakan salah satu daripada pelbagai palet warna dalam pop timbul Warna yang ditunjukkan dalam rajah berikut.
Tidak ada palet warna ini yang sangat mesra digital. Tiada palet untuk RGBA, heksadesimal atau format warna web standard yang lain, tetapi penitis mata pemilih warna boleh membantu anda mendapatkan warna latar belakang yang anda sasarkan untuk dipadankan.
Menentukan warna latar belakang pratonton dengan Grid Ketelusan.
Pilih yang kedua daripada dua panel warna grid, dan tetapkan warna yang sama padanya.
Ingat, anda boleh menggunakan penitik mata pemilih warna untuk merebut warna itu.
Klik OK dalam dialog Persediaan Dokumen.
Apa yang saya lakukan dalam set langkah sebelumnya ialah mentakrifkan cara Grid Transparency dipaparkan apabila ia didayakan . Jadi, jika Grid Transparency anda tidak didayakan, pilih View → Transparency Grid.
Dalam angka ini, saya memilih papan seni dengan grafik, dan saya melihat pratonton projek terhadap warna latar belakang simulasi.
Pratonton warna latar belakang keluaran dengan Grid Ketelusan tersuai.
Apabila ketelusan (seperti 50 peratus kelegapan) atau kesan ketelusan seperti warna terbakar, menggelapkan atau berganda digunakan pada grafik SVG, kesan tersebut mengekalkan kebolehskalaan SVG.
Angka ini menunjukkan grafik yang sama—tiga segi empat tepat jingga separa lutsinar—yang dieksport sebagai fail PNG (atas) dan SVG. Anda boleh melihat bagaimana fail PNG merosot dalam kualiti apabila saya mengezum masuk padanya dalam penyemak imbas. Apa yang anda tidak dapat lihat ialah fail PNG hampir dua kali lebih besar daripada SVG.
Membandingkan output PNG (atas) dengan SVG apabila ketelusan digunakan
Berikut ialah ringkasan kelebihan menggunakan SVG untuk kesan ketelusan:
Ngomong-ngomong, jika anda ingin tahu tentang rupa kod SVG yang dijana untuk set segi empat tepat ini dan betapa mudahnya pembangun web atau apl bekerja dengannya, berikut ialah kod untuk yang pertama daripada tiga kotak SVG , dengan 60 peratus kelegapan digunakan:
<="" kod="">
Akhir sekali, jika anda ingin latar belakang SVG anda mempunyai isian warna, ini juga boleh dicapai melalui Sifat Dokumen menu. Cuma klik pada jalur putih yang diletakkan di sebelah tempat tertera Warna Latar Belakang. Pemilih warna akan muncul pada skrin anda.
Adalah penting untuk ambil perhatian bahawa latar belakang SVG anda akan terus telus walaupun diisi warna selagi Lajur (yang mewakili ketelusan warna) kekal pada 0. Jika anda mahu dokumen itu benar-benar mempunyai warna latar belakang itu (walaupun pada eksport), maka anda boleh membawa lajur itu dari 0 ke 100.
Dan itu sepatutnya melakukannya untuk bekerja dengan latar belakang dalam Inkscape. Jika anda mempunyai sebarang soalan yang tidak ditangani dalam siaran ini, tinggalkan komen di bawah dan saya akan menulis semula jika saya boleh membantu.
Anda boleh menggunakan alat Syot Kilat dalam Adobe Acrobat CS5 untuk memilih kedua-dua teks dan imej serta mencipta gambar kawasan tertentu dalam fail PDF. Hasilnya biasanya dirujuk sebagai rampasan skrin bahagian dalam fail PDF. Hasilnya ialah imej, dan teks anda bukan […]
Direka untuk penyelidik dan saintis, keupayaan mengukur dalam Photoshop CC agak berkuasa. Anda boleh mengukur apa sahaja dan mengira bilangan apa sahaja dalam imej teknikal, mungkin dari mikroskop atau teleskop. Jika anda mengetahui saiz tepat mana-mana elemen dalam imej, anda kemudian boleh menemui apa sahaja […]
Apabila anda menggunakan alat Liquify dalam Adobe Creative Suite 5 (Adobe CS5) Illustrator, anda boleh membengkokkan objek — menjadikannya beralun, melekit atau runcing — dengan mencipta herotan yang mudah kepada kompleks. Alat Liquify boleh melakukan semua jenis herotan yang kreatif atau aneh (bergantung pada cara anda melihatnya) pada objek anda. awak […]
Apabila anda mempunyai teks dalam projek Adobe XD anda, anda boleh mula menukar sifat teks. Sifat ini termasuk Keluarga Fon, Saiz Fon, Berat Fon, Penjajaran, Jarak Aksara (kerning dan penjejakan), Jarak Baris (terdepan), Isi, Sempadan (lejang), Bayangan (bayangan jatuh) dan Kabur Latar Belakang. Jadi mari kita semak cara sifat tersebut digunakan. Mengenai kebolehbacaan dan fon […]
Anda boleh menggunakan InDesign untuk mencipta dan mengubah suai grafik kod QR. Kod QR ialah satu bentuk kod bar yang boleh menyimpan maklumat seperti perkataan, nombor, URL atau bentuk data lain. Pengguna mengimbas kod QR menggunakan kamera dan perisiannya pada peranti, seperti telefon pintar, dan perisian itu menggunakan […]
Sama seperti dalam Adobe Illustrator, papan seni Photoshop menyediakan keupayaan untuk membina halaman atau skrin berasingan dalam satu dokumen. Ini boleh membantu terutamanya jika anda sedang membina skrin untuk aplikasi mudah alih atau risalah kecil. Anda boleh menganggap papan seni sebagai jenis kumpulan lapisan khas yang dibuat menggunakan panel Lapisan. Ia […]
Membungkus teks dalam Adobe Illustrator CC tidak sama seperti membungkus hadiah — ia lebih mudah! Balutan teks memaksa teks untuk membalut grafik, seperti yang ditunjukkan dalam rajah ini. Ciri ini boleh menambah sedikit kreativiti pada mana-mana karya. Grafik memaksa teks untuk membungkusnya. Pertama, buat […]
Apabila mereka bentuk dalam Adobe Illustrator CC, anda selalunya memerlukan bentuk untuk menjadi saiz yang tepat (contohnya, 2 x 3 inci). Selepas anda membuat bentuk, cara terbaik untuk mengubah saiznya kepada ukuran yang tepat ialah menggunakan panel Transform, ditunjukkan dalam rajah ini. Minta objek dipilih dan kemudian pilih Window→Transform to […]
Ketahui cara menggunakan ketelusan pada grafik SVG dalam Illustrator. Terokai cara untuk mengeluarkan SVG dengan latar belakang telus dan menggunakan kesan ketelusan.
Selepas anda mengimport imej anda ke dalam Adobe XD, anda tidak mempunyai banyak kawalan pengeditan, tetapi anda boleh mengubah saiz dan memutar imej seperti yang anda lakukan pada bentuk lain. Anda juga boleh dengan mudah membulatkan sudut imej yang diimport menggunakan widget sudut. Menyamarkan imej anda Dengan menentukan bentuk tertutup […]
