Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Icon Design

Cara Membuat Ikon Editor Teks Ditetapkan dalam Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Agus (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam tutorial hari ini, kami akan menangani proyek ikon lainnya, di mana kami akan secara bertahap belajar cara membuat serangkaian elemen editor teks, menggunakan beberapa bentuk dasar dan alat yang ditemukan dalam Illustrator lama yang baik.

Jadi, jika itu terdengar seperti sesuatu di lorong Anda, pastikan Anda mengambil secangkir jus segar kacang ajaib itu dan mari kita mulai!

Dan jangan lupa, Anda selalu dapat memperluas paket dengan menuju ke GraphicRiver di mana Anda akan menemukan banyak pilihan UI icons.

1. Cara Mengatur File Proyek Baru

Dengan asumsi Anda sudah memiliki Illustrator dan berjalan di latar belakang, angkat dan siapkan Dokumen Baru (File> Baru atau Kontrol-N) menggunakan pengaturan berikut: 

  • Number of Artboards: 24.
  • Spacing: 20 px.
  • Columns: 4.
  • Width: 32 px.
  • Height: 32 px.
  • Units: Pixels.

Dan dari Advanced tab:

  • Color Mode: RGB.
  • Raster Effects: Screen (72ppi).
  • Preview Mode: Default.
setting up a new document

2. Cara Menyiapkan Kotak Kustom 

Karena kami akan membuat ikon menggunakan alur kerja sempurna piksel, kami ingin menyiapkan Grid kecil yang bagus sehingga kami dapat memiliki kontrol penuh atas bentuk kami.

Langkah 1

Buka submenu,Edit > Preferences > Guides & Grid dan sesuaikan pengaturan berikut:

  • Gridline every: 1 px.
  • Subdivisions: 1.
setting up a custom grid

Tip cepat: Anda dapat mempelajari lebih lanjut tentang grid dengan membaca bagian mendalam ini tentang How Illustrator’s Grid System Works.

Langkah 2

Setelah kami menyiapkan jaringan khusus kami, semua yang perlu kami lakukan untuk memastikan bentuk kami terlihat tajam adalah memungkinkan Snap to Grid dan Snap to Pixel yang ditemukan di bawah the View menu, yang akan berubah menjadi Snap to Pixel setiap kali Anda memasuki mode Pixel Preview (jika Anda menggunakan versi perangkat lunak yang lebih lama).

Sekarang, jika Anda baru mengenal keseluruhan "alur kerja piksel-sempurna", saya sangat menyarankan Anda untuk melalui tutorial How to Create Pixel-Perfect Artwork, yang akan membantu Anda memperluas keterampilan teknis Anda dalam waktu singkat.

3. Cara Menyiapkan Lapisan 

Dengan Dokumen Baru yang dibuat, akan lebih baik untuk menyusun proyek kami menggunakan beberapa lapisan untuk memisahkan grid referensi dari ikon yang sebenarnya. Jika Anda sudah familiar dengan tutorial saya sebelumnya, Anda akan melihat bahwa dengan yang ini kami mengambil pendekatan yang sedikit berbeda, karena kami mendasarkan proyek tersebut pada Artboards, bukan Lapisan karena jumlah ikon yang tinggi.

Itu dikatakan, buka panel Layers, dan buat total dua lapisan, yang akan kami ganti namanya sebagai berikut: 

  • layer 1: referensi grid
  • layer 2: ikon
setting up the layers

4. Bagaimana Cara Membuat Grids Referensi

Referensi grid (atau grid dasar) adalah satu set permukaan referensi yang dibatasi secara tepat, yang memungkinkan kita untuk membangun ikon-ikon kita dengan berfokus pada ukuran dan konsistensi.

Biasanya, ukuran grid menentukan ukuran ikon sebenarnya, dan mereka harus selalu menjadi keputusan pertama yang Anda buat setelah Anda memulai proyek baru, karena Anda akan selalu ingin memulai dari ukuran terkecil yang mungkin dan membangunnya.

Sekarang, dalam kasus kami, kami akan membuat paket ikon menggunakan hanya satu ukuran, lebih tepatnya 32 x 32 px, yang berada di sisi skala yang lebih kecil.

Langkah 1

Pastikan Anda berada di lapisan kanan (yang akan menjadi yang pertama), lalu ambil Rectangle Tool (M) dan buat persegi 32 x 32 px oranye (# F15A24) persegi yang akan kita pusatkan sejajar dengan Artboard pertama dan gunakan untuk menentukan ukuran keseluruhan ikon kami.

creating the main shape for the reference grid

Langkah 2

Tambahkan yang lebih kecil 28 x 28 px satu (#FFFFFF) yang akan kita posisikan di atas bentuk sebelumnya, karena akan bertindak sebagai area gambar aktif kami, sehingga memberikan kita semua sekitar 2 px padding untuk bekerja dengan. 

creating the main shape for the active drawing area

Langkah 3

Pilih dan kelompok dua kotak bersama-sama menggunakan shortcut keyboard Control-G, dan kemudian buat grid yang tersisa menggunakan 23 salinan (Control-C> Control-F) yang akan kita posisikan ke masing-masing Artboards kosong. Luangkan waktu Anda, dan setelah selesai, pastikan Anda mengunci lapisan saat ini sebelum melanjutkan ke bagian berikutnya.

adding the remaining reference grids

5.Cara Membuat Ikon Justify

Dengan asumsi Anda berhasil membuat dan menempatkan petak referensi kecil, lanjutkan ke lapisan berikutnya (yang akan menjadi yang kedua), dan mari memulai proyek dengan membuat ikon pertama dari kumpulan. 

Langkah 1

Mulai dengan membuat garis horizontal bawah menggunakan Stroke 2 px, yang akan kita warnai menggunakan # 252A2D dan kemudian posisikan pada jarak 2 px dari pusat tepi bawah gambar aktif yang aktif. 

creating the bottom line for the justify icon

Langkah 2

Akhiri ikon dengan menambahkan baris yang tersisa menggunakan dua salinan (Control-C> Control-F dua kali) dari salah satu yang baru saja kita buat, yang akan kita susun secara vertikal pada jarak 4 px dari aslinya. Setelah selesai, pilih dan kelompokkan ketiganya bersama-sama menggunakan pintasan keyboard Control-G sebelum beralih ke grid referensi berikutnya.

finishing off the justify icon

6.Cara Membuat Ikon Kiri yang Rata 

Segera setelah kami selesai mengerjakan ikon kedua, kita dapat melanjutkan ke area gambar aktif berikutnya, di mana kami akan segera mengumpulkan yang berikutnya. 

Langkah 1

Karena beberapa ikon yang akan datang didasarkan pada salah satu yang baru saja selesai kami kerjakan, kami akan membuat salinan (Control-C) darinya yang akan kami tempelkan (Control-F) ke grid referensi saat ini, memastikan untuk mengeklik Artboard yang mendasari terlebih dahulu untuk membuatnya aktif. 

creating the main shapes for the left align icon

Langkah 2

Isolasikan stroke tengah dengan mengklik ganda di atasnya, dan kemudian persingkat panjangnya dari 24 px ke 16 px-Anda dapat melakukan ini dengan memilih anchor point kanan menggunakan Direct Selection Tool (A) dan kemudian mendorongnya ke kiri dengan 8 px menggunakan Move tool (right click > Transform > Move > Horizontal > - 8 px).

Setelah selesai, tekan tombol Escape untuk keluar dari Isolation Mode, lalu buat salinan (Control-C) dari ikon yang dihasilkan sebelum pindah ke grid berikutnya.

finishing off the left align icon

7. Cara Membuat Ikon Rata Kanan 

Selanjutnya, kami akan segera membuat ikon penyelarasan yang tepat, jadi pastikan Anda berada di Artboard kanan (yang akan menjadi yang ketiga) dan mari kita mulai.

Langkah 1

Tempel salinan ikon yang baru saja kami selesaikan di area gambar aktif yang kosong menggunakan pintasan keyboard Control-F.

creating the main shapes for the right align icon

Langkah 2

Sesuaikan salinan yang baru saja kita buat dengan memantulkannya secara vertikal menggunakan  the Reflect tool (right click > Transform > Reflect > Vertical). Setelah selesai, jangan lupa untuk membuat salinan (Control-C) dari ikon yang dihasilkan, sebelum melanjutkan ke yang berikutnya. 

finishing off the right align icon

8. Cara Membuat Ikon Rata Tengah 

Karena tidak ada editor teks yang lengkap tanpa opsi penyelarasan tengah, kami akan menambahkan satu di saat-saat berikutnya dengan cepat.

Langkah 1

Tempelkan salinan ikon sebelumnya ke Artboard keempat menggunakan pintasan keyboard Control-F sehingga menempatkannya di posisi yang sama persis.

creating the main shapes for the center align icon

Langkah 2

Isolasi Stroke menengah dari salinan yang baru saja kita buat dengan mengklik dua kali di atasnya, dan kemudian memusatkannya ke Artboard yang mendasari menggunakan opsi Horizontal Align Center panel Align. Setelah selesai, segera keluar dari Isolation Mode dengan menekan tombol Escape.

finishing off the center align icon

9. Cara Membuat Ikon Inden Tambah 

Pindah ke bawah ke baris kedua, dan kemudian perbesar artboard pertama di mana kita akan mulai bekerja pada ikon berikutnya.

Langkah 1

Buat bentuk utama ikon menggunakan salinan (Control-C) dari yang dibenarkan, yang akan kita tempelkan (Control-F) ke area gambar aktif saat ini dan kemudian menyesuaikan dengan mengisolasi dan memperpendek panjang dari Strokes  tengah dan bawah dari 24 px ke 12 px menggunakan Move tool ((left anchor points selected > right click > Transform > Move > Horizontal > 12 px).

creating and adjusting the main shapes for the increase indent icon

Langkah 2

Tambahkan bentuk utama untuk panah yang menghadap ke kanan menggunakan persegi panjang 8 x 12 px, yang akan kita warnai menggunakan # 252A2D dan kemudian posisikan di sisi kiri area gambar aktif, seperti yang terlihat pada gambar referensi.

creating the main shape for the arrow of the increase indent icon

Langkah 3

Akhiri ikon dengan memutar bentuk yang baru saja kita buat menjadi panah dengan terlebih dahulu menambahkan titik anchor baru ke tengah tepi kanannya menggunakan Add Anchor Point Tool (+), lalu menghapus bagian atas dan bawahnya menggunakan Delete Anchor Point Tool (-). Setelah selesai, keluar dari Isolation mode, lalu buat salinan (Control-C) dari seluruh ikon sebelum berpindah ke Artboard berikutnya.

finishing off the increase indent icon

10. Cara Membuat Ikon Indent Penurunan 

Dengan asumsi Anda telah selesai mengerjakan ikon sebelumnya, posisikan diri Anda di Artboard yang berdekatan, di mana kami akan membuat versi alternatifnya.

Langkah 1

Gunakan pintasan keyboard Control-F untuk menempelkan salinan ikon inden peningkatan ke area gambar aktif saat ini. 

creating the main shapes for the decrease indent icon

Langkah 2

Klik dua kali pada panah kecil untuk mengisolasi, lalu sesuaikan dengan cepat dengan memantulkannya secara vertikal menggunakan Reflect tool(right click > Transform > Reflect > Vertical). Setelah selesai, jangan lupa untuk keluar dari Isolation Mode menggunakan tombol Escape sebelum pindah ke ikon berikutnya.

finishing off the decrease indent icon

11. Cara Membuat Ruang Tambahan Sebelum Ikon Paragraf 

Segera setelah Anda selesai mengerjakan ikon inden penurunan, kita dapat melanjutkan ke area gambar aktif berikutnya, di mana kita akan membuat item berikutnya. 

Langkah 1

Buat bentuk utama ikon menggunakan salinan (Control-C) dari yang dibenarkan, yang akan kami tempelkan (Control-F) ke Artboard saat ini, pastikan untuk memusatkan itu ke tepi bawah gambar aktif yang aktif.

creating the main shapes for the add space before paragraph icon

Langkah 2

Lepaskan salinan yang sudah kami tempelkan (right click > Ungroup or Shift-Control-G), lalu sesuaikan dengan menghapus garis Stroke teratas dengan memilihnya lalu menekan Delete.

adjusting the shapes of the add space before paragraph icon

Langkah 3

Akhiri ikon saat ini dengan menambahkan panah yang menghadap ke bawah. Kita akan membuatnya menggunakan persegi panjang 12 x 8 px (# 252A2D), yang akan kita sesuaikan dengan menambahkan titik anchor baru ke tengah tepi bawahnya menggunakan Add Anchor Point Tool (+), dan kemudian menghapus bagian bawahnya menggunakan Delete Anchor Point Tool (-). Setelah selesai, pilih dan kelompokkan (Control-G) ketiga bentuk bersama-sama sebelum melanjutkan ke yang berikutnya.

finishing off the add space before paragraph icon

12. Cara Membuat Ruang Tambahan Setelah Ikon Paragraf 

Selanjutnya, kami akan segera membuat versi alternatif dari ikon yang baru saja kami selesaikan.

Langkah 1

Buat salinan (Control-C) dari ikon sebelumnya, yang akan kami tempelkan (Control-F) ke area gambar aktif yang kosong, seperti yang terlihat pada gambar referensi. 

creating the main shapes for the add space after paragraph icon

Langkah 2

Pisahkan salinan yang baru saja kita buat (right click > Ungroup or Shift-Control-G), lalu sesuaikan ikon dengan membalik posisi Stroke dengan panahnya seperti yang terlihat pada gambar referensi, pastikan untuk memilih dan mengelompokkan (Control-G) mereka sebelum pindah ke yang berikutnya. 

finishing off the add space after paragraph icon

13.Cara Membuat Ikon Jenis Perangkat 

Dengan asumsi Anda sudah pindah ke baris ketiga, mari mulai kerjakan kategori berikutnya, yang ada hubungannya dengan pemformatan teks.

Langkah 1

Buat bagian atas ikon menggunakan persegi panjang 20 x 6 px dengan Stroke tebal 4 px, yang akan kita warnai menggunakan # 252A2D dan kemudian tengah sejajar dengan tepi tepi area gambar aktif yang aktif.

creating the upper section of the type tool icon

Langkah 2

Buka jalur bentuk yang baru saja kita buat dengan menambahkan titik anchor baru ke tengah tepi bawahnya menggunakan Add Anchor Point Tool (+) dan kemudian segera memilih dan menghapusnya dengan menekan Delete.

opening up the path of the upper section of the type tool icon

Langkah 3

Tambahkan bagian tengah menggunakan garis Stroke vertikal tebal 20 px tinggi 8 px (# 252A2D), yang akan kita pusatkan sejajar dengan bentuk sebelumnya, seperti yang terlihat pada gambar referensi.

adding the vertical section to the type tool icon

Langkah 4

Akhiri ikon dengan membuat bagian bawah menggunakan garis tebal Stroke 16 px lebar 4 px (# 252A2D), yang akan kita garis tengahkan ke tepi bawah area gambar aktif. Luangkan waktu Anda, dan begitu selesai, pilih dan kelompokkan (Control-G) ketiga bentuk bersama-sama sebelum pindah ke yang berikutnya. 

finishing off the type tool icon

14.Cara Membuat Ikon Tebal

Selanjutnya, kami akan segera membuat satu ikon yang paling sering digunakan di semua sejarah editor teks, jadi pastikan Anda menempatkan diri Anda di Artboard berikutnya, dan mari langsung melompat ke dalamnya.

Langkah 1

Buat bagian bawah ikon menggunakan 12 x 12 px persegi dengan Stroke 4 px tebal, yang akan kita warnai menggunakan # 252A2D dan kemudian tengah sejajar dengan tepi bawah area gambar aktif.

creating the lower section of the bold icon

Langkah 2

Secara cepat sesuaikan bentuk yang baru saja kita buat dengan menyetel Radius sudut kanannya ke 6 px dari dalam the Transform panel’s Rectangle Properties.

adjusting the lower section of the bold icon

Langkah 3

Akhiri ikon saat ini dengan menambahkan bagian atas menggunakan 8 x 8 px persegi dengan Stroke 4 px tebal (# 252A2D), yang akan kita sesuaikan dengan menyetel Radius sudut kanannya ke 4 px dari dalam the Transform panel’s Rectangle Properties . Setelah selesai, posisikan bentuk yang dihasilkan seperti yang terlihat pada gambar referensi, pastikan untuk memilih dan mengelompokkannya bersama-sama setelah itu menggunakan pintasan keyboard Control-G.

finishing off the bold icon

15. Cara Membuat Ikon Garis Bawah 

Seperti biasa, buat jalan Anda ke Artboard berikutnya, di mana kita akan melihat cara menyatukan ikon garis bawah.

Langkah 1

Mulai dengan membuat bagian bawah menggunakan garis Stroke 24 px lebar 4 px tebal, yang akan kita warnai menggunakan # 252A2D dan kemudian tengah sejajar dengan tepi bawah area gambar aktif.

creating the lower section of the underline icon

Langkah 2

Buat bentuk utama untuk huruf “U” menggunakan persegi panjang 12 x 14 px dengan Stroke 4 px tebal (# 252A2D), yang akan kita pusatkan sejajar dengan tepi area gambar aktif yang aktif sehingga jalurnya tumpang tindih.

creating the upper section of the underline icon

Langkah 3

Mulai sesuaikan bentuk dengan menyetel Radius sudut bawahnya menjadi 6 px dari dalam the Transform panel’s Rectangle Properties.

adjusting the upper shape of the underline icon

Langkah 4

Akhiri ikon dengan membuka jalur bentuk yang telah kami sesuaikan sebelumnya, dengan menambahkan titik anchor baru ke tengah tepi atasnya menggunakan Add Anchor Point Tool (+), lalu segera memilih dan menghapusnya dengan menekan Delete. Setelah selesai, jangan lupa memilih dan mengelompokkan dua bentuk bersama menggunakan pintasan keyboard Control-G

finishing off the underline icon

16. Cara Membuat Ikon Miring

Kami sekarang berada di bawah ikon terakhir baris saat ini, jadi anggaplah Anda telah menempatkan diri Anda di Artboard, mari buat item berikutnya.

Langkah 1

Buat bagian bawah dan atas dari huruf “I” menggunakan dua garis tebal Stroke 16 px lebar 4 px (# 252A2D), yang akan kita posisikan seperti yang terlihat pada gambar referensi.

creating the bottom and upper sections of the italic icon

Langkah 2

Akhiri ikon saat ini dengan menambahkan garis diagonal yang menghubungkan dua bagian horizontal menggunakan Stroke setebal 4 px (# 252A2D). Seperti biasa, setelah Anda selesai, pilih dan kelompokkan (Control-G) ketiga bentuk bersama-sama sebelum melanjutkan ke yang berikutnya.

finishing off the italic icon

17. Cara Membuat Ikon Bawa ke Depan 

Dengan asumsi Anda telah berpindah ke baris lain, perbesar Artboard pertama dan mari buat ikon berikutnya.

Langkah 1

Mulai dengan membuat bentuk depan menggunakan persegi 12 x 12 px dengan Stroke tebal 4 px, yang akan kita warnai menggunakan # 252A2D dan kemudian sejajarkan ke sudut kiri atas area gambar aktif.

creating the front shape of the bring to front icon

Langkah 2

Membuat bentuk kembali menggunakan lain 12 x 12 px square dengan 4 px tebal Stroke (#252A2D), yang kita akan menyelaraskan wilayah gambar aktif sudut kanan bawah.

creating the back shape of the bring to front icon

Langkah 3

Sesuaikan bentuk persegi yang baru saja kita buat dengan menambahkan satu set titik jangkar baru di mana jalurnya berpotongan dengan yang pertama menggunakan Add Anchor Point Tool (A), pastikan untuk memposisikan salah satu sudutnya seperti yang terlihat di gambar referensi. 

adjusting the back shape of the bring to front icon

Langkah 4

Akhiri ikon dengan menambahkan isi ke bentuk yang dihasilkan, yang akan kita buat menggunakan salinan (Control-C) yang akan kita tempelkan di tempat (Control-F) dan kemudian menyesuaikan dengan membalik Stroke dengan Fill (Shift-X) ). Setelah selesai, pilih dan kelompokkan (Control-G) dua bentuk bersama-sama, lakukan hal yang sama untuk seluruh ikon sesudahnya. 

finishing off the bring to front icon

18.Cara Membuat Ikon Kirim ke Belakang 

Mulai sekarang, Anda sudah tahu latihannya, jadi lompat di Artboard berikutnya dan terus lanjutkan mengerjakan item berikutnya.

Langkah 1

Buat bentuk belakang menggunakan persegi 12 x 12 px dengan Stroke 4 px tebal (# 252A2D), yang akan kita sejajarkan ke sudut kiri atas area gambar aktif.

creating the back shape of the send to back icon

Langkah 2

Akhiri ikon saat ini dengan menambahkan bentuk depan menggunakan 12 x 12 px persegi dengan Stroke 4 px tebal (# 252A2D) dan bentuk 12 x 12 px (# 252A2D), yang akan kita kelompokkan (Control-G) dan kemudian sejajarkan ke sudut kanan bawah area gambar aktif. Setelah selesai, pilih dan kelompokkan (Control-G) semua bentuk bersama-sama sebelum pindah ke yang berikutnya.

finishing off the send to back icon

19. Cara Membuat Ikon Header Sisipan 

Pastikan Anda menempatkan diri Anda di Artboard kosong yang berdekatan, lalu mulai bekerja pada ikon berikutnya.

Langkah 1

Buat bagian atas menggunakan persegi panjang 20 x 6 px dengan Stroke tebal 4 px, yang akan kita warnai menggunakan # 252A2D dan kemudian tengah sejajar dengan tepi tepi area gambar aktif yang aktif. 

creating the upper section of the insert header icon

Langkah 2

Tambahkan bentuk utama untuk bagian bawah menggunakan persegi panjang 20 x 8 px dengan Stroke setebal 4 px (# 252A2D), yang akan kita posisikan sehingga jalur bawahnya tumpang tindih dengan tepi area gambar aktif, seperti yang terlihat pada gambar referensi . 

creating the lower section of the insert header icon

Langkah 3

Buka jalur bentuk yang baru saja kita buat dengan menambahkan titik anchor baru ke tengah tepi bawahnya menggunakan Add Anchor Point Tool (+) dan kemudian segera memilih dan menghapusnya dengan menekan Delete.

adjusting the lower section of the insert header icon

Langkah 4

Akhiri ikon dengan menambahkan segmen pengisian kecil menggunakan persegi panjang 12 x 4 px (# 252A2D), yang akan kita tengahkan sejajar dengan tepi bawah area gambar aktif. Setelah selesai, pilih dan kelompokkan semua bentuk penggabungan bersama-sama menggunakan pintasan keyboard Control-G.

finishing off the insert header icon

20. Cara Membuat Ikon Footer Insert 

Selanjutnya, kami akan segera membuat versi lain dari ikon tajuk, jadi pastikan Anda menempatkan diri Anda ke area gambar aktif berikutnya, dan mari kita mulai. 

Langkah 1

Buat salinan (Control-C) dari ikon sebelumnya, yang kemudian kita tempelkan ke Artboard saat ini menggunakan pintasan keyboard Control-F

creating the main shapes for the insert footer icon

Langkah 2

Akhiri ikon saat ini dengan secara horizontal mencerminkan salinan yang baru saja kita buat (right click > Transform > Reflect > Horizontal), pastikan untuk memusatkannya lagi sesudahnya.

finishing off the insert footer icon

21.Cara Membuat Ikon Daftar

Item kami berikutnya harus dimiliki untuk editor teks yang bagus, jadi naik ke baris berikutnya dan langsung lompat ke dalamnya.

Langkah 1

Buat peluru atas menggunakan persegi 4 x 4 px, yang akan kita warnai menggunakan # 252A2D dan kemudian sejajarkan ke tepi kiri gambar aktif, posisikan pada jarak 2 px dari bagian atasnya. 

creating the main bullet for the list icon

Langkah 2

Tambahkan item daftar menggunakan garis Stroke 16 px lebar 4 px tebal (# 252A2D), yang akan kita posisikan di sebelah peluru seperti yang terlihat pada gambar referensi, pastikan untuk memilih dan kelompokkan (Control-G) keduanya bersama sebelum pindah ke langkah selanjutnya. 

adding the top horizontal line to the list icon

Langkah 3

Akhiri ikon dengan membuat dua salinan (Control-C> Control-F  twice) dari bentuk yang baru saja kita kelompokkan, yang akan kita susun secara vertikal di bawah pada jarak 4 px dari aslinya. Setelah Anda memiliki bentuk di tempatnya, jangan lupa untuk memilih dan mengelompokkan semuanya bersama-sama menggunakan pintasan keyboard Control-G.

finishing off the list icon

22. Cara Membuat Ikon Sublist 

Kami sekarang memiliki ikon daftar, tapi bagaimana kalau kita beralih ke Artboard berikutnya dan membuat sub-level.

Langkah 1

Mulailah dengan membuat salinan (Control-C) dari ikon sebelumnya, yang akan kita tempelkan ke area gambar aktif saat ini menggunakan pintasan keyboard Control-F

creating the main shapes for the sublist icon

Langkah 2

Akhiri ikon saat ini dengan mengisolasi item daftar tengah dan bawah, lalu sesuaikan panjangnya sehingga pelurunya mengarah ke atas seperti yang terlihat pada gambar referensi. Luangkan waktu Anda, dan setelah Anda selesai, keluar dari Isolation Mode dengan menekan tombol Escape

finishing off the sublist icon

23. Cara Membuat Halaman Insert Icon Break 

Nomor 19 dari daftar item kami adalah ikon page break, yang akan kami buat dalam sekejap mata.

Langkah 1

Mulai dengan membuat garis tengah menggunakan Stroke lebar 24 px lebar 4 px, yang akan kita warnai menggunakan # 252A2D dan kemudian tengah sejajar dengan Artboard yang mendasari.

creating the center line for the insert page break icon

Langkah 2

Tambahkan bentuk utama untuk halaman menggunakan dua persegi panjang 12 x 6 px dengan Stroke 4 px tebal (# 252A2D), yang akan kita posisikan ke tepi atas dan bawah dari area gambar aktif seperti yang terlihat pada gambar referensi. 

adding the main rectangles for the insert page break icon

Langkah 3

Akhiri ikon dengan membuka jalur bentuk yang baru saja kita buat dengan menambahkan titik jangkar baru ke tengah tepi luarnya, lalu segera memilih dan menghapusnya menggunakan tombol Delete. Setelah selesai, pilih dan kelompokkan ketiga bentuk bersama-sama menggunakan pintasan keyboard Control-G.

finishing off the insert page break icon

24. Cara Membuat Ikon Resize 

Selanjutnya, kami memiliki alat lain yang sederhana namun bermanfaat yang sebagian besar waktu terlewatkan, tetapi tidak hari ini.

Langkah 1

Buat badan utama ikon menggunakan 20 x 20 px persegi dengan Stroke 4 px tebal (# 252A2D), yang akan kita pusatkan sejajar dengan Artboard yang mendasari.

creating the main shape for the resize icon

Langkah 2

Akhiri ikon saat ini dengan membuat persegi 12 x 12 px yang lebih kecil dengan Stroke 4 px tebal (# 252A2D), yang akan kita ratakan ke sudut kanan bawah gambar area aktif. Setelah selesai, jangan lupa untuk memilih dan mengelompokkan (Control-G) keduanya bersama-sama sebelum melanjutkan ke yang berikutnya.

finishing off the resize icon

25.Cara Membuat Ikon Bentuk

Kami sekarang berada di deretan ikon keenam dan terakhir, jadi anggaplah Anda telah menempatkan diri Anda di Artboards pertama, mari buat item berikutnya.

Langkah 1

Mulai dengan membuat lingkaran 16 x 16 px dengan Stroke tebal 4 px, yang akan kita warnai menggunakan # 252A2D dan kemudian sejajarkan ke sudut kiri atas area gambar aktif. 

creating the circle for the shapes icon

Langkah 2

Tambahkan lebih kecil 12 x 12 px persegi dengan Stroke 4 px tebal (# 252A2D), yang akan kita posisikan pada lingkaran seperti yang terlihat pada gambar referensi.

adding the square to the shapes icon

Langkah 3

Akhiri ikon saat ini dengan menambahkan satu set titik jangkar baru ke tepi persegi di mana dua jalur tumpang tindih menggunakan Add Anchor Point Tool (+), lalu pilih dan hapus salah satu sudutnya menggunakan tombol Delete. Seperti biasa, jangan lupa untuk memilih dan mengelompokkan (Control-G) dua bentuk bersama setelah Anda selesai. 

finishing off the shapes icon

26.Cara Membuat Ikon Bagan 

Jika Anda menyukai bagan, Anda akan senang mengetahui bahwa kami akan membuat salah satu dari kami sendiri di saat-saat berikutnya.

Langkah 1

Buat bagian bawah ikon menggunakan garis Stroke 24 px lebar 4 px tebal (# 252A2D), yang akan kita garis tengahkan ke tepi bawah area gambar aktif. 

creating the lower section of the chart icon

Langkah 2

Tambahkan segmen grafik vertikal menggunakan tiga Stroke setebal 16 px tinggi 4 px (# 252A2D), yang akan kita posisikan 4 px dari satu secara horizontal lainnya, dan kemudian tengahkan ratakan ke tepi tepi gambar aktif yang aktif. 

adding the vertical lines to the chart icon

Langkah 3

Akhiri grafik, dengan menyesuaikan panjang segmen vertikal luarnya seperti yang terlihat pada gambar referensi. Luangkan waktu Anda, dan setelah selesai, pastikan Anda memilih dan mengelompokkan (Control-G) semua bentuk penulisan ikon sebelum pindah ke yang berikutnya. 

finishing off the chart icon

27. Cara Membuat Ikon Meja 

Item berikutnya dari daftar kami adalah salah satu yang mungkin Anda gunakan cukup banyak, jadi pastikan Anda memposisikan diri Anda ke Artboard berikutnya, dan mari dengan cepat belajar cara membuatnya.

Langkah 1

Mulai kerjakan bagian atas dengan membuat 8 x 8 px persegi dengan Stroke 4 px tebal (# 252A2D), yang akan kita sejajarkan ke sudut kiri atas area gambar aktif.

creating the smaller square for the table icon

Langkah 2

Tambahkan yang lebih luas 12 x 8 px satu dengan Stroke 4 px sama tebal (# 252A2D), yang akan kita posisikan ke sisi kanan persegi sehingga garis luarnya tumpang tindih.

adding the top rectangle to the table icon

Langkah 3

Buat bentuk kiri untuk bagian bawah ikon menggunakan persegi panjang 8 x 12 px dengan Stroke 4 px tebal (# 252A2D), yang akan kita sejajarkan ke sudut kiri bawah gambar aktif. 

adding the bottom rectangle to the table icon

Langkah 4

Akhiri ikon saat ini dengan menambahkan 12 x 12 px persegi dengan Stroke 4 px tebal (# 252A2D) di sudut kanan bawah dari area gambar aktif, pastikan untuk memilih dan mengelompokkan keempat bentuk bersamaan setelah itu menggunakan Control- G pintasan keyboard.

finishing off the table icon

28. Cara Membuat Ikon Penguasa 

Kami kini sampai ke ikon terakhir kami, buat jalan Anda ke Artboard yang tersisa, dan mari kita selesaikan semuanya! 

Langkah 1

Buat bagian atas penggaris menggunakan persegi panjang 20 x 6 px dengan Stroke setebal 4 px (# 252A2D), yang akan kita garis tengahkan ke tepi tepi gambar aktif yang aktif. 

creating the upper section of the ruler icon

Langkah 2

Akhiri ikon, dan dengan itu proyek itu sendiri, dengan menambahkan persegi panjang 6 x 20 px dengan Stroke 4 px tebal (# 252A2D), yang akan kita pusatkan sejajar dengan tepi kiri gambar aktif. Seperti biasa, setelah selesai, jangan lupa memilih dan mengelompokkan (Control-G) dua bentuk bersama sebelum menekan tombol simpan itu.

finishing off the ruler icon

Kerja yang bagus!

Ini mungkin lebih lama dari biasanya, tetapi jika Anda berhasil sampai akhir, Anda sekarang harus memiliki satu set ikon praktis kecil yang bagus yang dapat Anda gunakan dalam proyek mendatang.

Seperti biasa, saya harap Anda telah berhasil mengikuti setiap langkah dan belajar sesuatu yang baru dan berguna di sepanjang jalan.

Dikatakan demikian, jika Anda memiliki pertanyaan, jangan ragu untuk mempostingnya di bagian komentar dan saya akan menghubungi Anda sesegera mungkin!

finished project preview
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.