Cara Mengatur Ikon dengan Benar di Adobe Illustrator

Akhir-akhir ini saya mendapatkan lebih banyak teknis dan mulai mengeksplorasi solusi untuk berbagai tantangan yang mungkin Anda temui sepanjang perjalanan kreatif Anda. Salah satu tantangan khusus yang akan kita bahas hari ini adalah penskalaan ikon, yang dapat terbukti menjadi proses yang sulit bagi banyak orang.

Pertimbangkan bahwa ketika saya mengatakan ikon, saya sebenarnya berbicara tentang yang dibuat menggunakan alur kerja pixel-perfect, karena ini adalah yang paling sensitif ketika datang ke proses mengubah ukuran.

Sekarang, sebelum kita masuk ke proses yang sebenarnya, saya akan mengambil beberapa saat dan berbicara tentang beberapa gagasan terkait ikon yang harus kita pertimbangkan ketika akan mengubah ukuran ikon berharga kita.

Apakah Anda menskala ikon Anda sendiri atau ikon yang dibeli dari Envato Market, prosesnya harus cukup mudah dipahami dan digunakan setelah membaca tutorial singkat ini.

1. Mulailah dengan Memilih Ukuran Dasar untuk Ikon Anda

Saat membuat paket ikon, sangat penting bagi Anda untuk memulai dengan membuat keputusan yang tepat ketika memilih ukuran dasar. Ukuran dasar adalah ukuran terkecil yang Anda akan anda buat dan kemudian gunakan untuk menghasilkan semua ukuran variasi lain dalam paket Anda.

Selain itu, ukuran dasar Anda akan juga bertindak sebagai grid kustom Anda, yang akan Anda gunakan untuk membuat paket ikon kohesif, karena akan memungkinkan Anda untuk membuat elemen-elemen Anda dalam permukaan yang dibatasi.

Yang sedang berkata, ada beberapa hal yang harus Anda lakukan untuk mendapatkan ukuran dasar yang tepat.

1.1. Berpikir ke depan

Saya merekomendasikan bahwa sebelum Anda mulai melakukan sesuatu, Anda harus terlebih dahulu meluangkan waktu beberapa menit dan memikirkan berapa ukuran yang Anda inginkan atau perlu untuk mengirimkan paket ikon. Apakah Anda akan membuat dua ukuran, tiga, lima? Usahakan untuk selalu berpikir ke depan dan merencanakan langkah-langkah Anda sehingga prosesnya bisa selancar dan se depan mungkin.

Percayalah, jauh lebih mudah untuk membuat variasi Anda dari awal daripada menyelesaikan proyek Anda dan kemudian menyadari bahwa Anda mungkin perlu menambahkan ukuran ekstra, yang seperti yang akan Anda lihat nanti, mungkin menimbulkan beberapa masalah.

1.2. Go Small

Setelah Anda memiliki visi yang jelas mengenai jumlah ukuran yang dibutuhkan oleh proyek, ambil variasi terkecil dari semuanya, dan gunakan itu sebagai ukuran dasar Anda. Jadi misalnya jika Anda ingin membuat tiga variasi ukuran untuk ikon Anda, katakanlah 32 x 32 px , 64 x 64 px dan 128 x 128 px, Anda akan ingin mengatur kisi dasar Anda menggunakan ukuran terkecil, yang dalam hal ini adalah 32 x 32 px.

Ini mungkin tampak aneh, tetapi jika Anda membuat menggunakan alur kerja pixel-perfect, Anda selalu ingin memulai dari ukuran sekecil mungkin, karena proses pengubahan ukuran sangat terhubung ke nilai lebar dan tinggi dari elemen komposisi ikon Anda. Saya akan menjelaskan lebih lanjut tentang ini di bagian berikut.

2. memperhatikan nilai-nilai nomor ikon Anda

Nilai Lebar dan Tinggi ikon Anda sangat penting karena mereka terhubung langsung dengan cara perilaku ikon Anda setelah Anda mulai mengubah ukurannya. Ada beberapa hal yang harus Anda pertimbangkan ketika memulai proses pembangunan yang sebenarnya.

2.1. Selalu menggunakan nilai angka bulat

Jika Anda belum pernah memperhatikan Nilai Lebar dan Tinggi pada bagian penulisan ikon Anda sebelumnya, sekarang adalah waktu yang tepat untuk mengubahnya, karena angka memainkan peran penting ketika harus membuat dan mengubah ukuran ikon Anda.

Alasannya cukup sederhana: ikon adalah bentuk digital dari karya seni yang biasanya ditampilkan di layar digital, yang seperti yang Anda tahu bergantung pada piksel untuk mereproduksi semua jenis citra. Itu berarti bahwa semua yang Anda buat perlu menempati jumlah piksel tertentu dari kisi monitor, agar karya seni menjadi sejernih mungkin.

Sekarang, saya tidak akan membahas proses menciptakan karya seni pixel-sempurna, karena saya sudah memiliki artikel yang menyentuh subjek itu, tetapi saya akan berbicara sedikit tentang bagaimana angka berperilaku setelah Anda mengubah ukuran ikon Anda, dan saya akan lakukan itu dengan memberi Anda contoh dasar.

Jadi katakanlah kita memiliki kisi dasar 32 x 32 px , yang telah kita buat persegi panjang 29,49 x 29,45 px (disorot dengan merah) dengan hanya menyeret menggunakan Rectangle Tool , yang akan menjadi bagian pertama dari ikon teoritis. Seperti beberapa dari Anda mungkin sudah menebak, bentuk itu sendiri tidak sepenuhnya menempati piksel dari grid yang mendasarinya, yang berarti bahwa jika kita mengubah ukurannya, semuanya akan berantakan.

Tidak percaya padaku? Baiklah, mari kita pilih bentuk dan mengubah ukurannya menggunakan alat Skala dengan menggandakan permukaannya menggunakan nilai kenaikan 200% .

Seperti yang Anda lihat, bentuk yang dihasilkan sekarang memiliki Lebar dari 58,98 x 58,9 px yang berarti bahwa Illustrator memiliki untuk menerapkan efek antialiasing untuk menambahkan saluran alpha untuk piksel yang tidak sepenuhnya diduduki oleh permukaan persegi panjang, yang di ujungnya akan menghilangkan ketajaman bentuk.

Jika Anda tidak membuat dengan kesempurnaan piksel dalam pikiran yang mungkin tidak menimbulkan masalah, tetapi bagi kita semua pecandu piksel di luar sana itu adalah sesuatu yang harus diperbaiki, karena itu hanya akan menciptakan masalah baru di sepanjang jalan.

Solusinya sangat sederhana: Anda hanya perlu memilih bentuk dan kemudian memaksanya untuk benar-benar snap ke pixel grid dengan mengaktifkan opsi Align to Pixel Grid yang ditemukan di bawah panel Transform . 

Kemudian Anda hanya perlu memastikan bahwa setiap bagian ikon kecil yang Anda buat berikutnya menggunakan nilai-nilai nomor bulat. Untuk itu, Anda mungkin ingin menggunakan Snap untuk pilihan Grid yang ditemukan di bawah menu View, dalam kombinasi dengan mode Pixel Preview, yang akan memberikan Anda total kontrol atas ukuran benda Anda.

2.2. Gunakan Nomor Genap sesering mungkin

Prinsip ini sangat berkaitan dengan grid ukuran dasar ikon yang Anda memilih untuk bekerja dengan. Jika Anda ingat, beberapa saat yang lalu saya katakan bahwa Anda harus selalu mencoba untuk mengetahui ukuran terkecil bahwa Anda akan perlu untuk ikon Anda, dan membangun variasi yang lebih besar menggunakan itu sebagai sebuah blok bangunan.

Dengan demikian Anda akan selalu memastikan bahwa ikon Anda adalah "anatomis benar", karena karya seni Anda akan skala benar tanpa menjadi sasaran deformasi apapun.

Sekarang, seperti yang Anda tahu, nomor genap dan ganjil skala benar karena, ketika dua kali lipat, angka ganjil selalu menjadi bahkan orang-orang. Masalah dengan menggunakan nilai angka yang aneh muncul ketika Anda dihadapkan ke skala ke aset Anda, sejak memotong mereka dalam setengah akan selalu menghasilkan nilai-nilai desimal, yang pasti akan merusak desain Anda.

Jika Anda telah melakukan penelitian Anda dan memilih grid tepat dasar, ini seharusnya tidak menimbulkan masalah, tetapi jika untuk beberapa alasan Anda perlu menambahkan variasi ukuran lebih kecil, maka Anda akan hanya perlu skala itu dan kemudian menyesuaikan bagian-bagian yang berbeda sebagai diperlukan.

3. proses Resize aktual

Jadi, sampai saat ini kami telah berbicara tentang beberapa pra-skala pengertian bahwa Anda harus selalu diingat setiap kali Anda mulai membuat variasi ukuran untuk ikon Anda.

Dalam bagian ini saya akan memandu Anda melalui proses sebenarnya benar ukuran ikon Anda menggunakan alat skala, tapi pertama-tama saya ingin secara singkat berbicara tentang salah satu metode tertentu yang digunakan secara luas tetapi menurut saya harus dihindari.

3.1. Bagaimana TIDAK Mengubah Ukuran Ikon Anda Menggunakan Metode Pilih-dan-Seret

Akhir-akhir ini, saya telah memperhatikan bahwa banyak orang, beberapa rekan-rekan saya yang disertakan, cenderung untuk mengubah ukuran ikon mereka menggunakan metode pilih-dan-seret.

Biarkan aku tetap sederhana dan jelas: tidak pernah, pernah mengubah ikon dengan memilih dan kemudian mengheret satu sisi atau sudut. Ini akan selalu bisa mematahkan ikon Anda jika Anda buat menggunakan landasan pixel sempurna, karena bentuk Anda akan snap off pixel grid, karena fakta bahwa nilai-nilai nomor mereka akan berakhir menjadi desimal yang, yang tidak akan mampu benar menempati mendasari grid.

Alasannya cukup sederhana: ketika Anda tarik, ilustrator telah memperluas permukaan karya seni Anda, dengan menambahkan piksel lebar dan tinggi Anda bentuk, jalur, dan bahkan ruang-ruang kosong total. Tapi itu tidak selalu benar melakukan ini, karena beberapa objek mungkin skala baik-baik saja, sementara orang lain istirahat karena proses peregangan dan menambahkan piksel.

Karena saya ingin mengajar dengan contoh, mari kita mengatakan bahwa kita memiliki ikon kecil yang dibuat dengan 48 x 48 px dasar grid, padding px 2 all-around. Ikon ini dibangun dengan menggunakan alur kerja pixel sempurna, memiliki setiap bentuk sempurna bentak ke grid pixel mendasari, tetapi menggunakan nilai-nilai yang aneh dan bahkan nomor seluruh unsur-unsur pembentuk.

Sekarang, mari kita menyalakan modus pratinjau Pixel (Lihat > Pixel Preview atau Alt-kontrol-Y) Mari kita pilih sudut kanan bawah kotak icon yang melompat-lompat dan tarik diagonal ke arah luar oleh 2 px.

Seperti yang Anda lihat, beberapa bentuk (baris teks, bingkai jendela batin, garis pembatas bawah jendela, dll) telah benar-benar berhasil untuk skala tanpa jatuh dari grid, sementara yang lain tidak melakukan semua itu dengan baik (tombol melingkar jendela, ikon di garis, scrollbar, dll).

Itu karena selama proses menyeret, ilustrator mencoba untuk menambahkan bahwa nilai px 2 untuk masing-masing dari objek yang dipilih, namun karena pengaturan dan spasi di antara setiap bentuk, itu tidak berhasil untuk menjaga. Yang menghasilkan bentuk yang telah melihat peningkatan lebar dan tinggi, orang lain hanya dalam lebar (baris teks) sementara beberapa belum telah meningkat di semua (garis vertikal di bawah pembatas horisontal bawah).

Sekarang hal yang perlu diingat adalah bahwa kita benar-benar pergi melalui proses Resize dengan modus pratinjau Pixel pada, yang memungkinkan kita untuk lihat dan menerapkan kenaikan nilai nomor yang tepat. Jika kita untuk mengulangi proses yang sama tapi kali ini dalam modus pratinjau normal, seperti Anda dapat melihat hasilnya akan sangat menyakitkan untuk menonton.

Sejak saat ini saya berharap bahwa saya telah membuat kasus saya jelas, mari kita bergerak dan mengambil melihat lebih dekat cara yang betul untuk mengubah ukuran ikon menggunakan alat skala yang kuat.

3.2. Cara benar skala ikon menggunakan metode alat skala

Jadi mengubah ukuran ikon Anda yang Anda inginkan, muda Jedi. Nah setelah Anda selesai membaca bagian ini sedikit, Anda akan menjadi master di itu.

Memahami alat

Saya harus jujur: ketika saya mulai membuat ikon, aku pada dasarnya melakukan itu ditutup matanya, karena saya tidak tahu banyak tentang berbagai aspek dari proses, terutama bagian Resize. Saya selalu melakukan pekerjaan yang baik membuat batch ukuran pertama, tapi ketika itu datang untuk mengubah ukuran mereka, mari kita hanya mengatakan hal-hal mulai mendapatkan frustasi karena kebanyakan dari mereka akan hancur berantakan.

Yah, seperti yang Anda mungkin sudah menebak, itu berarti aku harus secara manual memperbaiki mereka, yang pada akhirnya mengarah pada proses yang sangat memakan waktu, yang pada dasarnya mengisap semua energi saya. Untungnya saya ingin belajar dari kesalahan-kesalahan saya, jadi saya mulai menjelajahi dan tidak lama sampai saya menemukan bahwa solusi adalah tepat di depan saya: alat skala Mahakuasa.

Jika Anda belum pernah menggunakan alat sebelum, jangan khawatir karena ketika datang ke menggunakan alat skala, hal-hal cukup sederhana.

Pertama kita harus pilih objek atau sekelompok objek yang kita ingin mengubah ukuran, dan kemudian klik kanan dan pergi ke mengubah > skala.

Ilustrator akan memunculkan jendela kecil dengan banyak pilihan.

Seperti yang Anda lihat dari contoh di atas, kita akan disambut dengan dua metode yang berbeda skala.

Yang pertama adalah seragam yang, seperti namanya, akan skala bentuk Anda baik secara horizontal dan vertikal, yang berarti bahwa itu akan menambah piksel lebar dan tinggi dari pilihan Anda.

Yang kedua adalah Non-Seragam , yang memungkinkan Anda untuk mengukur Lebar dan Tinggi objek Anda secara individualmenggunakan nilai yang berbeda, atau bahkan skala hanya satu dari dua. Sekarang, saya tidak akan menggunakan opsi khusus ini ketika mengubah ukuran ikon, tetapi mungkin terbukti bermanfaat dalam situasi ketika Anda ingin dengan cepat menyesuaikan Lebar atau Tinggi objek menggunakan persentase sederhana.

Jadi kita telah berbicara tentang dua pilihan yang berbeda tersedia dalam perangkat, tapi sihir yang nyata terjadi hanya ketika Anda tahu yang persentase untuk menerapkan benda Anda.

Memilih nilai persentase tepat

Seperti yang telah saya sebutkan, alat Skala adalah sekutu yang sangat kuat, tetapi hanya ketika Anda tahu persis cara menggunakannya, karena tidak semua nilai persentase akan menghasilkan ikon yang terlihat segar. Percayalah, saya belajar satu ini dengan cara yang keras.

Alasan untuk itu ada hubungannya dengan nilai-nilai yang lebar dan tinggi dari unsur-unsur pembentuk ikon. Yup, kita kembali ke itu lagi. Seperti yang sudah saya tunjukkan, bilangan ganjil berperilaku berbeda dari yang genap ketika digandakan. Hal yang sama benar ketika Anda mengalikan mereka dengan nilai-nilai desimal seperti 1.5.

Hal ini penting karena ketika berhadapan dengan ukuran, kita harus memilih persentase tepat tergantung pada nilai-nilai yang kami bentuk memiliki, karena persentase bahkan pengganda. Tidak percaya padaku? Baiklah mari kita berpikir sedikit tentang cara Illustrator menggunakannya dari sudut pandang matematika.

Jadi seperti yang Anda semua tahu, 100% adalah 100 dibagi 100 yang memberi kita 1. Illustrator menggunakan nilai ini dan mengalikannya dengan nilai Lebar dan Tinggi dari setiap bentuk yang dipilih. Sekarang karena jika Anda mengalikan 1 dengan apa pun (tetapi 0) Anda masih mendapatkan nomor yang sama, ini bukan contoh terbaik.

Tetapi, jika kita melihat pada nilai seperti 200% yang merupakan 200 dibagi dengan 100, kita mendapatkan pengali 2x , yang akan menggandakan jumlah piksel dari objek yang dipilih.

Di sisi lain, jika kita mengubah ukuran ikon menggunakan nilai 50%, yang adalah 50 dibagi dengan 100, jadi pengali 0,5x , yang benar-benar akan memotong dimensi objek yang kita pilih menjadi setengah.

Sekarang kuncinya adalah untuk mengetahui apa pengganda menggunakan ketika berhadapan dengan ikon yang hanya nilai-nilai bahkan nomor dan orang-orang yang memiliki yang genap dan yang ganjil.

Jika kami memiliki ikon yang dibangun hanya dengan menggunakan angka genap, maka Anda dapat menerapkan persentase berapa pun asalkan 100% peningkatan dari nilai default 100%. Jadi pengganda seperti 200%, 300%, 400%¸ 500%, 600% ... Anda mengerti intinya. Itu karena angka genap (2, 4, 6, 8) selalu mengubah langkah-langkah pengganda ini menjadi nilai genap (2 x 2 = 4, 2 x 3 = 6, 2 x 4 = 8, 2 x 5 = 10, 2 x 6 = 12, dll.).

Anda juga dapat menggunakan pengganda seperti 150%, 250%, 350%, 450%, dll. Tetapi Anda harus membatasi penggunaannya hanya satu kali, karena jika tidak, nilai-nilai ini akan mengubah bilangan genap menjadi ganjil.

Untuk memahami mengapa, mari kita mengatakan bahwa kita memiliki 20 x 20 px persegi.

Kami ingin skala itu menggunakan pengganda 150%.

Jika kita menggunakannya sekali, kita akan mendapatkan bentuk yaitu 30 x 30 px .

Gunakan dua kali dan Anda akan mendapatkan 45 x 45 px .

Jika kita menggunakan pengali 300% sebagai gantinya, maka bentuk yang dihasilkan akan menjadi 60 x 60 px .

Jika Anda bertanya-tanya mengapa, itu karena 20 x 1,5 = 30 yang dikalikan lagi dengan 150% (1,5) adalah 45. Sedangkan 150% + 150% = 300%, hasil menggunakan pengganda yang sama dua kali dibandingkan dengan nilai tambahnya sangat berbeda, karena 20 x 3 = 60.

Hal lain yang perlu diingat adalah bahwa beberapa nomor bahkan berubah menjadi aneh yang bahkan jika Anda menerapkan pengganda sekali saja, misalnya 2 x 1,5 = 3; 6 x 1.5 = 9; 2 x 2.5 = 5; 6 x 2.5 = 15; dll sedangkan 4 x 1.5 = 6; 8 x 1.5 = 12; 4 x 2.5 = 10; 8 x 2,5 = 20; dll.

Tergantung pada kompleksitas ikon Anda, Anda mungkin ingin memberikan pengganda semacam ini mencoba, tetapi Anda harus selalu periksa jika ukurannya hal-hal seperti yang Anda ingin mereka.

Sekarang, ketika datang ke ikon yang memiliki nilai Lebar dan Tinggi genap dan ganjil, Anda harus selalu menggunakan kenaikan langkah 200%, jadi nilai-nilai seperti 200%, 400%, 600%, 800%, dll. Karena dengan cara ini Anda ikon akan mengubah ukuran persis seperti yang Anda inginkan.

Jangan pernah menggunakan pengali 50%, karena ini akan merusak ikon pixel-perfect, karena memotong angka ganjil menjadi setengah akan menghasilkan nilai desimal, yang akan mematikan grid pixel.

Sekarang kita telah melihat pengganda mana yang bekerja paling baik tergantung pada skenario kasus, mari kita ambil contoh cepat dan lihat proses mengubah ukuran ikon dari awal hingga selesai.

Proses

Jadi kita memiliki ikon yang sama bahwa kami telah digunakan sebagai contoh beberapa hari lalu, yang kau tahu memiliki nilai-nilai yang aneh dan bahkan seluruh bentuk yang menyusun. Itu berarti bahwa kita hanya dapat menggunakan peningkatan langkah 200% saat menentukan nilai pengali, tapi itu sama sekali tidak masalah karena untuk contoh ini kita ingin menggandakan ukuran aset kita dari 48 x 48 px menjadi 96 x 96 px.

Untuk melakukan itu, saya hanya akan memilih ikon saya, lalu klik kanan dan pergi ke Transform > Scale. Dalam hitungan detik saya akan disambut dengan jendela popup Alat skala kecil tempat saya memilih untuk pergi dengan Uniform dan memasukkan 200 ke bidang nilai, yang secara default diatur ke 100%.

Segera setelah saya mengklik tombol OK , Illustrator akan menghitung dan mengubah ukuran ikon saya dengan menggandakan jumlah pikselnya, menjaga semuanya tersentak dengan sempurna ke Pixel Grid.

Sesederhana itu.

Kiat Cepat: meskipun Illustrator biasanya memiliki opsi Pojok Siku Persegi Panjang dan Stroke Skala & Efek yang diperiksa, Anda harus selalu mengeceknya untuk memastikan semuanya berjalan dengan baik.

3.3. Keterbatasan menggunakan metode alat skala

Jadi seperti yang Anda mungkin telah melihat sekarang, alat skala adalah pilihan yang benar-benar layak ketika datang untuk mengubah ukuran ikon Anda. Jika Anda tahu bagaimana dan kapan menggunakan pengganda, Anda harus dapat membuat variasi ukuran untuk paket ikon Anda dalam waktu singkat.

Tetapi, ada sedikit batasan dalam menciptakan variasi ukuran yang harus Anda perhatikan, terutama jika Anda ingin membuat ikon dengan penambahan ukuran kecil (mis. 16 x 16 px; 24 x 24 px; 32 x 32 px; 48 x 48 px; 64 x 64 px; 72 x 72 px; 96 x 96 px; 128 x 128 px; dll.).

Masalahnya adalah, untuk mendapatkan variasi ukuran benjolan kecil (misalnya 24 x 24 px; 48 x 48 px; 72 x 72 px; 96 x 96 px), Anda harus menggunakan pengganda 150% (sejak 16 x 1.5 = 24; 32 x 1.5 = 48; 48 x 1.5 = 72; 64 x 1.5 = 96; dll.), yang seperti yang Anda ketahui dapat menyebabkan masalah, terutama ketika Anda memiliki nilai ganjil di seluruh bentuk komposisi ikon Anda.

Itu berarti Anda mungkin harus menyesuaikan beberapa bentuk di sana-sini untuk mendapatkan ikon yang konsisten. Itu mungkin tidak terlalu sulit ketika berhadapan dengan paket ikon kecil, tetapi jika Anda mengerjakan sesuatu yang lebih besar maka Anda akan memilih yang lama.

Cara yang baik untuk melakukan ini adalah dengan membuatikon kenaikan ukuran 150% pertama (misalnya, 24 x 24 px), sesuaikan di mana diperlukan, dan kemudian gunakan langkah-langkah 200% untuk mendapatkan sisanya ketika Anda bisa (48 x 48 px ; 96 x 96 px).

Bergantung pada kebutuhan proyek Anda, Anda mungkin perlu mengotak-atik ikon Anda dan mencari solusi yang tepat untuk Anda, tetapi bukankah itu yang dilakukan oleh seorang desainer, menyelesaikan masalah?

Kesimpulan

Jadi begitulah: presentasi mendalam tentang bagaimana Anda harus mengubah ukuran ikon menggunakan metode yang cukup sederhana. Seperti biasa, cobalah untuk bermain-main dengan alat ini setelah Anda membaca tutorial ini, dan saya yakin Anda akan segera terbiasa.