Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Do 's dan Don'ts menciptakan ikon baris

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

Dalam tutorial hari ini kita akan melihat proses membuat ikon baris kedua di Adobe Illustrator dan afinitas desainer. Anda akan melihat bagaimana Anda dapat kerajinan produk selesai dapat digunakan yang menggunakan beberapa bentuk dasar yang kami akan menyesuaikan di sana-sini.

Jadi, jika Anda selalu ingin tahu apakah dan larangan ketika bekerja pada gaya ini ikon, Anda pasti harus memberi membaca bagian ini!

Juga, jangan lupa Anda selalu dapat memperluas Perpustakaan aset Anda dengan judul di atas untuk GraphicRiver, mana Anda akan menemukan banyak pilihan vektor ikon paket untuk memilih dari.

Beberapa tahun yang lalu, aku menjelajahi dua metode utama yang dapat digunakan untuk membuat ikon baris, dan dibandingkan mereka untuk melihat mana yang akan lebih cocok untuk Anda.

Hari ini, kita akan memperluas salah satu metode, lebih tepat Stroke, dan berbicara tentang do 's dan don'ts sehingga Anda bisa menyempurnakan keterampilan Anda ketika datang untuk menciptakan jenis ikon.

Kita akan menciptakan persis ikon yang sama menggunakan dua keping yang berbeda dari perangkat lunak, lebih tepatnya Adobe Illustrator dan perancang afinitas, sehingga semua orang dapat mengambil bagian dalam proyek.

Bahwa menjadi kata, mari kita mulai!

Cara membuat ikon baris dalam Adobe Illustrator

1. cara mengatur File proyek baru

Seperti dengan setiap proyek yang baru, kita akan menendang hal off dengan cepat melalui proses menyiapkan dokumen baru. Jadi pergi ke File > baru (atau menggunakan Control-N pintasan keyboard), dan kemudian menyesuaikan sebagai berikut:

  • Profil: Web
  • Jumlah Artboards: 1
  • Lebar: 128 px
  • Tinggi: 128 px
  • Unit: piksel

Dan dari Advanced tab:

  • Warna Mode: RGB
  • Efek raster: Layar (72 ppi)
  • Pratinjau Mode: standar
setting up a new document in ai

2. cara mengatur lapisan

Setelah kami membuat dokumen kami, kita perlu mengambil beberapa saat dan struktur proyek menggunakan beberapa lapisan, sehingga kami dapat menerapkan dan memelihara alur kerja yang jelas dan mantap dengan memisahkan grid referensi kami dari ikon yang sebenarnya.

Untuk melakukannya, cukup membuka Layers panel dan kemudian membuat dua lapisan menggunakan tombol Buat Layer baru, penamaan mereka sebagai berikut:

  • lapisan bawah: referensi grid
  • lapisan atas: ikon
setting up the layers in ai

3. cara membuat Grid referensi

Segera setelah kami selesai layering dokumen kami, kita bisa fokus dalam membangun grid referensi, yang akan membantu kami menentukan ukuran sebenarnya dari ikon akhir, sementara memungkinkan kita untuk menambahkan padding pelindung kecil.

Langkah 1

Pilih lapisan bawah, dan kemudian membuat permukaan referensi utama (ukuran base) yang menggunakan square px 128 x 128, yang kami akan warna menggunakan #F15A24 dan kemudian posisi di pusat Artboard mendasari yang menggunakan panel rata horisontal dan vertikal rata Pusat pilihan.

creating the base grid in ai

Langkah 2

Tambahkan gambar daerah aktif menggunakan kecil 112 x 112 px persegi, yang kami akan warna menggunakan putih (#FFFFFF) dan kemudian pusat menyelaraskan yang mendasari lebih besar, yang akan mengakibatkan all-around 8 px padding.

creating the active drawing area in ai

Langkah 3

Sekali Anda memiliki kedua bentuk di tempat, pilih dan kelompok mereka bersama-sama menggunakan cara pintas keyboard kontrol-G, membuat yakin untuk mengunci lapisan ini sebelum pindah ke langkah berikutnya.

locking the layers in ai

4. Bagaimana cara membuat ikon koran

Segera setelah kami selesai pengaturan file proyek kami, kita dapat mulai bekerja pada ikon yang sebenarnya, yang kita secara bertahap akan menciptakan satu bagian pada suatu waktu.

Langkah 1

Ambil Ellipse Tool (L) dan menciptakan latar belakang menggunakan 112 x 112 px lingkaran, yang kami akan warna menggunakan #AEEDEA dan kemudian pusat menyelaraskan Artboard mendasari.

creating the background in ai

Langkah 2

Membuat bentuk utama yang untuk bagian depan koran menggunakan 40 x 44 px persegi panjang, yang kita akan warna menggunakan #FFFFFF dan kemudian posisi pada jarak 30 px dari daerah gambar aktif kiri edge dan 34 px dari atas satu.

Seperti Anda mungkin telah menyadari, bahkan meskipun nilai kesenjangan angka genap (karena mereka dapat dibagi oleh dua), mereka dapat hanya dipotong dalam setengah sekali sebelum menjadi aneh. Biasanya saya mencoba untuk menjauh dari jenis angka, tapi karena kami menciptakan ikon baris, itu adalah sesuatu yang akan diperbaiki secepat kita menambahkan garis-garis yang sebenarnya, seperti yang Anda lihat dalam beberapa saat.

creating the front section in ai

Langkah 3

Menyesuaikan bentuk yang kita baru saja dibuat dengan menetapkan Radius sudut kiri bawah ke 6 px dari dalam Transform panel Rectangle properti. Sekali lagi, aku sudah dengan nilai nomor aneh, tetapi semua akan membuat rasa segera setelah kita menambahkan garis besar.

adjusting the corner of the front section in ai

Langkah 4

Membuat salinan (Control-C > kontrol-F) dari bentuk yang dihasilkan, yang kita akan posisi pada sisi kanan sehingga jalan mereka berakhir tumpang tindih seperti yang terlihat dalam gambar referensi.

creating a duplicate of the front section in ai

Langkah 5

Membuka dua jalur dengan memilih secara individual masing-masing dari mereka jangkar tepat poin menggunakan alat seleksi langsung (A), dan kemudian segera menghapusnya dengan menekan Delete.

opening up the paths of the front section in ai

Langkah 6

Dengan dua jalur yang masih dipilih, menyatukan mereka menjadi satu bentuk lebih besar dengan menekan pintasan keyboard kontrol-J (Gabung) dua kali.

uniting the path segments in ai

Langkah 7

Sekarang bahwa kita telah selesai menyesuaikan bentuk utama yang untuk bagian depan, kita bisa pergi tentang menambahkan garis besar. Bagian ini benar-benar lebih penting daripada Anda mungkin berpikir, karena ketebalan Stroke akan berakhir secara langsung mempengaruhi nilai kesenjangan sekitarnya, serta bagian terlihat radius sudut, seperti yang Anda akan melihat di saat-saat berikut.

Sebagai aturan umum, Anda selalu ingin pergi dengan nilai bahkan numerik (misalnya 2, 4, 6, 8, dll), karena kita akan pergi untuk menyelaraskan Stroke ke pusat. Dengan demikian, kami akan memastikan bahwa bentuk kami akan tetap sempurna bentak ke Grid Pixel mendasari, karena keselarasan akan berakhir sama membelah berat mereka di setengah.

Untuk menambahkan garis yang sebenarnya, mulailah dengan membuat salinan (Control-C) bentuk dihasilkan, yang kita akan paste di depan (kontrol-F) dan kemudian menyesuaikan dengan mengubah warnanya untuk #43435B. Setelah Anda selesai, flip yang mengisi dengan Stroke yang menggunakan cara pintas keyboard Shift-X, dan kemudian membuka Stroke panel dan mengatur beratnya 4 px, memastikan bahwa Stroke sejalan dengan pusat.

Sejak setengah dari garis akan berakhir jatuh di luar jalan mengisi bentuk, ini berlaku akan mengurangi nilai kesenjangan dengan 2 px, membuat tampilan sudut lengkung yang kurang bulat.

adding the outline to the front section in ai

Jika kita menggunakan angka ganjil (misalnya 3, 5, 7, 9, dll), Stroke kami akan berakhir menjadi sasaran beberapa antialiasing yang jahat, jelas terlihat bila Anda mengaktifkan modus pratinjau Pixel (Alt-kontrol-Y). Hal ini terjadi karena perangkat lunak tidak dapat menemukan pusat yang sempurna, karena fakta bahwa setelah dibagi di setengah, angka ganjil menjadi orang-orang desimal.

example of stroke using odd numbers

Untuk membuat keadaan lebih buruk lagi, jika Anda mencoba dan menggunakan opsi membuat Pixel Perfect (klik kanan > membuat Pixel Perfect), jalan stroke akan berakhir gertakan dari Grid Pixel karena itu keterpaduan pusat.

using the make pixel perfect option on odd strokes

Langkah 8

Karena kami ingin ikon untuk merasa di sekitar lebih ramah, kita akan mengatur semua sudut yang stroke untuk bergabung dengan putaran, yang adalah trik kecil yang rapi yang membantu Anda melakukan hal itu. Dalam hal bentuk saat ini, ini juga memperbaiki penampilan titik anchor kanan bawah, yang jika tidak akan terlihat seolah-olah itu adalah keliru cincang.

setting the corner join to round in ai

Langkah 9

Segera setelah kami sudah selesai membuat semua sedikit penyesuaian garis, kita perlu untuk memilih ini dan mengisi bentuk yang mendasari dan kemudian kelompok mereka bersama-sama menggunakan baik pintasan keyboard kontrol-G atau klik kanan sedikit lebih lambat > kelompok metode.

Aku biasanya berakhir mengelompokkan saya mengisi bentuk dan garis besar karena jika saya kemudian memutuskan untuk memindahkan salah satu dari mereka, yang lain secara otomatis akan mengikutinya. Juga, jika Anda pernah perlu membuat penyesuaian ke salah satu dari dua, Anda dapat dengan mudah melakukannya dengan mengisolasi kelompok dan membawa mereka.

grouping the main shapes of the front section in ai

Langkah 10

Membuat bentuk utama bagian samping menggunakan 12 x 36 px persegi panjang, yang kita akan menggunakan #59C9C9 warna dan kemudian posisi ke sisi kanan bentuk yang kami hanya telah dikelompokkan, memastikan bahwa jalan mereka tumpang tindih. Bagian yang tumpang tindih sangat penting, karena membantu memastikan bahwa ketika Anda menambahkan semua garis-garis, mereka sempurna mencakup satu sama lain, tanpa menambahkan ketebalan desain akhir.

creating the main shape for the side section in ai

Langkah 11

Menyesuaikan bentuk yang kami buat hanya dengan mengatur Radius sudutnya bawah 6 px, yang merupakan nilai yang sama digunakan untuk bagian depan. Ketika bekerja pada baris ikon, konsistensi memainkan faktor kunci ketika datang ke tumpang tindih sempurna dari jalan Anda, jadi selalu menjaga mata pada nilai-nilai Anda, sehingga Anda tidak perlu kembali dan memperbaikinya nanti.

adjusting the shape of the side section in ai

Langkah 12

Tambahkan bayangan halus menggunakan 6 x 36 px persegi, yang kita akan posisi di sisi kiri dari bagian saat ini, pewarnaan itu menggunakan nilai yang sama digunakan untuk garis (#43435B) dan memastikan untuk menurunkan Opacity yang menjadi 24%. Ini adalah sedikit trik lain yang saya ingin menggunakan banyak, yang mana bukan memilih nilai bayang-bayang gelap, aku hanya mencicipi warna stroke dan kemudian menurunkan Opacity mereka sampai aku mendapatkan sesuatu yang bekerja.

adding the shadow to the side section in ai

Langkah 13

Topeng bayangan menggunakan salinan (Control-C) dari bentuk dasar yang lebih besar, yang kita akan paste di depan, dan kemudian dengan kedua dari mereka dipilih, klik kanan > membuat kliping masker.

masking the shadow in ai

Langkah 14

Segera setelah Anda telah bertopeng bayangan, Anda dapat pergi ke depan dan memberikan garis tebal px 4 bagian yang sekarang dengan menciptakan salinan (Control-C > kontrol-F), dan kemudian mencicipi garis yang ada menggunakan pipet Tool (I).

Ini adalah sedikit trik lain yang saya gunakan sepanjang waktu, karena membantu saya menyalin semua atribut yang ada garis besar (warna, berat) ke bentuk saya saat ini. Selain itu, itu juga memastikan bahwa nilai warna yang digunakan all-around konsisten, yang merupakan benar-benar penting saat merancang garis ikon, karena ketika menambahkan volume Anda melakukannya menggunakan warna-warna gelap untuk mengisi bentuk tapi tidak menguraikan mereka.

adding the outline to the side section in ai

Quick tip: berikut ini adalah gambaran yang cepat dari apa yang akan terjadi jika Anda melakukan beberapa hal yang saya telah berdebat terhadap (jalur tidak tepat tumpang tindih, tidak konsisten sudut untuk tumpang tindih bentuk jari-jari, nilai-nilai warna yang berbeda untuk garis).

example of bad shape overlapping in ai

Langkah 15

Bergerak kembali ke bagian depan koran, dan mari kita mulai menambahkan rincian yang kecil dengan membuat kotak foto menggunakan 12 x 12 px bulat persegi dengan 2 px sudut Radius, yang kita akan menggunakan #43435B warna dan kemudian posisi pada jarak 4 px dari ou depan tline's benar edge dan 8 px dari atas satu.

positioning the main shape for the photo in ai

Pada titik ini, Anda mungkin bertanya-tanya mengapa saya tidak memasukkan orang-2 px dari garis besar dalam nilai yang ditunjukkan spasi, dan jawabannya adalah bahwa karena dalam kasus ini kami tidak dapat mendistribusikan bentuk menggunakan panel rata, nilai-nilai tersebut tidak relevan. Setiap kali kita posisi bentuk dalam garis besar, kita akan selalu melakukannya dalam kaitannya dengan tepi batin dan berat, sehingga mengabaikan yang setengah batin.

Jika kita untuk posisi bentuk di luar garis di permukaan, maka kita akan perlu untuk menambahkannya ke kejauhan akhir, karena perangkat lunak akan selalu posisi mereka dalam hubungannya dengan garis besar di jalan, yang mengarah ke pusat.

example of positioning shapes inside an outline in ai

Langkah 16

Membuat pertama dari boneka baris teks menggunakan 8 px lebar 4 px tebal Stroke (#43435B) dengan topi putaran, yang kita akan posisi dengan gambar atas tepi, pada jarak 4 px dari dengan salah satu kiri.

Seperti yang Anda lihat, aku pergi dengan garis-garis stroke daripada persegi panjang bulat, yang merupakan sesuatu yang saya mencoba untuk melakukan sepanjang waktu ketika ketebalannya identik dengan yang garis besar, karena jika saya merasa perlu untuk mengubah warna mereka, saya dengan mudah dapat menargetkan mereka menggunakan pilih > sama > Stro ke warna.

positioning the first text line in ai

Pemberitahuan bahwa saya menggunakan kata "posisi" bukannya "rata", karena jika kita menggunakan panel rata vertikal menyelaraskan atas pilihan, perangkat lunak akan melakukan penyelarasan ke objek kunci ditunjukkan didasarkan pada pusat stroke, yang akan menghasilkan beberapa hasil yang berbeda.

example of stroke aligning in ai

Langkah 17

Tambahkan baris teks kedua menggunakan salinan (Control-C > kontrol-F) salah satu yang kita baru saja dibuat, yang kita akan posisi hanya 4 px di bawah ini.

Ini adalah contoh yang bagus dari stroke posisi, karena kita memiliki dua cara untuk melakukannya. Yang pertama ini bergantung pada menggunakan tombol panah arah secara bertahap pindah stroke satu pixel pada waktu, sampai kita memilikinya dalam posisi yang diinginkan.

adding the second text line in ai

Kedua melibatkan menggunakan panel rata Vertical Penjarangan mendistribusikan pilihan, yang mengharuskan Anda untuk menyesuaikan nilai spasi, karena Anda perlu menyertakan bagian bawah dan atas dua pukulan berat. Jadi, daripada menggunakan nilai 4 px, Anda akan berakhir menggunakan 8 px (2 + 4 + 2). Secara pribadi, saya sarankan Anda tongkat untuk metode pertama ketika datang untuk jarak yang lebih kecil, dan menggunakan panel rata ketika berhadapan dengan lebih besar, yang jujur tidak semua yang sering terjadi.

example of multiple stroke aligning in ai

Langkah 18

Membuat baris teks yang lebih luas, menggunakan salinan (Control-C > kontrol-F) satu dari langkah sebelumnya, yang kita akan posisi 4 px di bawah ini dan kemudian menyesuaikan dengan lebar dari 8 meningkatkan px-24 px. Untuk melakukannya, Buka panel mengubah dan pertama centang pilihan efek skala stroke &, karena jika tidak akan meningkatkan berat Stroke seperti Anda Sesuaikan. Kemudian, mengatur titik referensi ke alun-alun kiri dan masukkan nilai yang ditunjukkan (24 px) dalam bidang masukan W(idth).

example of increasing of the length of a stroke in ai

Langkah 19

Menambahkan baris akhir teks menggunakan salinan (Control-C > kontrol-F) salah satu yang kita telah disesuaikan, yang kita akan posisi di bawah ini menggunakan sama 4 px jarak. Setelah Anda memiliki semua garis di tempat, pastikan Anda memilih dan kelompok (kontrol-G) mereka bersama-sama, melakukan hal yang sama untuk seluruh koran sesudahnya.

adding the last text line in ai

Langkah 20

Menyelesaikan ikon dengan menambahkan garis-garis gerakan kecil menggunakan 8 px tinggi 4 px tebal Stroke (#43435B) untuk 4 lebih pendek satu, dan dua pusat px yang untuk sisi, posisi mereka seperti yang terlihat dalam gambar referensi. Luangkan waktu Anda, dan setelah Anda selesai, jangan lupa untuk memilih dan group (kontrol-G) mereka semua bersama-sama, melakukan hal yang sama untuk semua yang menyusun bentuk sesudahnya.

finishing off the icon in ai

Cara membuat ikon baris di afinitas desain

Sekarang bahwa kita memiliki ide yang lebih baik ketika datang ke do 's dan don'ts menciptakan ikon baris, mari kita lihat bagaimana kita dapat membangun produk yang sama di afinitas desain.

1. cara mengatur File proyek baru

Seperti yang kita lakukan dengan ilustrator, kita akan mulai dengan membuat dokumen baru dengan judul di atas ke File > baru (atau dengan menggunakan cara pintas keyboard kontrol-N), yang kami akan menyesuaikan sebagai berikut:

  • Jenis: Web
  • Dokumen unit: piksel
  • Buat artboard: memeriksa
  • Latar belakang transparan: memeriksa
  • Lebar halaman: 128 px
  • Tinggi Halaman: 128 px
  • DPI: 72
setting up a new document in ad

2. cara mengatur lapisan

Mengambil beberapa saat dan struktur file proyek dengan membuka Layers panel dan kemudian menciptakan dua lapisan menggunakan tombol Tambahkan lapisan, penamaan mereka sebagai berikut:

  • lapisan bawah: referensi grid
  • lapisan atas: ikon
setting up the layers in ad

3. cara membuat Grid referensi

Setelah kami selesai layering dokumen kami, kita dapat melanjutkan untuk membangun sedikit referensi grid.

Langkah 1

Mulailah dengan memilih lapisan bawah dan kemudian menciptakan permukaan referensi utama (ukuran base) yang menggunakan square px 128 x 128, yang kami akan warna menggunakan #F15A24 dan kemudian posisi di pusat Artboard mendasari, menggunakan Alignment panel rata pusat dan rata Tengah pilihan.

creating the base grid in ad

Langkah 2

Tambahkan gambar daerah aktif menggunakan kecil 112 x 112 px square, yang kami akan warna menggunakan putih (#FFFFFF) dan kemudian pusat sejajar dengan permukaan referensi utama, yang akan memberi kita sama 8 px pelindung padding.

adding the active drawing area in ad

Langkah 3

Dengan kedua bentuk di tempat, pastikan Anda memilih dan kelompok mereka bersama-sama menggunakan cara pintas keyboard kontrol-G, mengunci lapisan ini menggunakan sedikit mengunci/mengaktifkan beralih, sebelum pindah ke yang berikutnya.

locking the layers in ad

4. Bagaimana cara membuat ikon koran

Posisi sendiri pada lapisan atas, dan mari kita mulai bekerja pada ikon koran kami kecil.

Langkah 1

Mulailah dengan membuat latar belakang menggunakan 112 x 112 px lingkaran, yang kami akan warna menggunakan #AEEDEA dan kemudian pusat menyelaraskan Artboard mendasari.

creating the background in ad

Langkah 2

Menambahkan bentuk utama untuk Surat Kabar bagian depan menggunakan 40 x 44 px persegi panjang, yang kita akan warna menggunakan putih (#FFFFFF) dan kemudian posisi pada jarak 30 px dari daerah gambar aktif kiri edge dan 34 px dari atas satu.

creating the main shape for the front section in ad

Langkah 3

Menyesuaikan bentuk pertama menghapus centang opsi tunggal Radius, dan kemudian menetapkan sudut kiri bawah (BL) untuk dibulatkan, pastikan untuk memberikan nilai absolut 6 px.

adjusting the corner of the front section in ad

Langkah 4

Membuat salinan (Control-C > Control-V) dari bentuk yang dihasilkan, yang kita akan kemudian posisi di sebelah kanan gambar daerah aktif, sehingga jalan mereka berakhir tumpang tindih.

creating a duplicate of the front section in ad

Langkah 5

Dengan kedua bentuk yang dipilih, gunakan dikonversi ke kurva pilihan sehingga kita dapat menyesuaikan jalan mereka, dan kemudian secara individual membuka mereka dengan memilih mereka atas node tepat menggunakan Node Tool (A) dan kemudian tindakan kurva istirahat. Setelah Anda membuka jalan mereka, pastikan Anda memilih dan menghapus semua node mereka tepat menggunakan tombol Delete.

opening up the paths of the front section in ad

Langkah 6

Bersatu segmen path yang dihasilkan menjadi satu bentuk lebih besar menggunakan Node Tool bergabung kurva dan dekat kurva tindakan.

uniting the paths of the front section in ad

Langkah 7

Memberikan dihasilkan bentuk garis besar menggunakan metode Stroke, dengan menciptakan salinan (Control-C), yang kita akan paste di depan (Control-V) dan kemudian menyesuaikan dengan terlebih dahulu mengubah warnanya untuk #43435B dan kemudian membalik yang mengisi dengan Stroke yang (Shift-X), pengaturan lebar ke 4 PT. Setelah Anda selesai, pastikan Anda memilih dan kelompok dua bersama-sama menggunakan cara pintas keyboard kontrol-G.

adding the outline to the front section in ad

Quick tip: dibandingkan dengan ilustrator, di mana Anda harus mengatur Stroke bergabung ke babak secara manual, desain afinitas melakukannya secara otomatis karena pilihan default yang digunakan.

Langkah 8

Membuat bentuk utama untuk Surat Kabar sisi bagian menggunakan 12 x 36 px persegi (#59C9C9), yang kami akan menyesuaikan dengan mengatur radius sudutnya bawah 6 px, posisi bentuk dihasilkan pada sisi kanan bagian depan, memastikan jalan mereka sempurna tumpang tindih.

creating the main shape for the side section in ad

Langkah 9

Tambahkan bayangan halus menggunakan 6 x 36 px persegi (#43435B), yang kita akan posisi di sisi kiri dari bagian saat ini, pastikan untuk menurunkan Opacity yang menjadi 24%.

adding the shadow to the side section in ad

Langkah 10

Menutupi bayangan dengan membuka Layers panel dan pertama menambahkan (Control-C) salinan bagian sisi mengisi bentuk ke Clipboard, dan kemudian hanya menyeret bentuk yang lebih kecil di atasnya.

masking the shadow in ad

Langkah 11

Menambahkan garis dengan menyisipkan salinan dari Clipboard di tempat Control-V menggunakan keyboard shortcut, dan kemudian mengubah warna untuk #43435B dan membalik yang mengisi dengan Stroke yang (Shift-X), pastikan untuk mengatur lebar untuk 4 pt. Setelah Anda selesai, jangan lupa untuk memilih dan kelompok (kontrol-G) semua bagian sisi 's menulis bentuk sebelum pindah ke langkah berikutnya.

adding the outline to the side section in ad

Langkah 12

Menggeser fokus Anda kembali ke bagian depan Surat Kabar, dan membuat kotak foto menggunakan px bulat persegi panjang 12 x 12 (#43435B) dengan 2 px sudut Radius, yang kita akan posisi pada jarak 4 px dari tepi kanan garis besar dan 8 px dari atas satu.

positioning the main shape for the photo in ad

Langkah 13

Tambahkan baris teks pertama yang menggunakan 8 px lebar pt 4 tebal Stroke (#43435B), yang kita akan posisi dengan foto atas tepi, pada jarak 4 px dari dengan salah satu kiri.

positioning the first text line in ad

Langkah 14

Membuat baris teks kedua menggunakan salinan (Control-C > Control-V) satu dari langkah sebelumnya, yang kita akan posisi 4 px di bawah ini.

adding the second text line in ad

Langkah 15

Tambahkan baris teks yang lebih luas, menggunakan salinan (Control-C > Control-V) salah satu yang kita baru saja dibuat, yang kita akan posisi 4 px di bawah ini dan kemudian menyesuaikan dengan meningkatkan lebar-24 px. Untuk melakukan ini, membuka Transform panel, dan pertama-tama pastikan penyesuaian yang dibuat sehubungan dengan jangkar yang kiri titik dengan mengklik pada titik Anchor pemilih kiri kotak, dan kemudian hanya memasukkan nilai ditunjukkan (24 px) dalam bidang masukan W(idth).

example of increasing the length of a stroke in ad

Langkah 16

Membuat baris akhir teks menggunakan salinan (Control-C > Control-V) satu yang hanya kita disesuaikan, pastikan untuk posisi itu di bawah ini menggunakan sama 4 px jarak. Setelah Anda memiliki semua garis di tempat, pastikan Anda memilih dan kelompok (kontrol-G) semuanya bersama-sama, melakukan hal yang sama untuk seluruh koran sesudahnya.

adding the last text line in ad

Langkah 17

Menyelesaikan ikon dengan menambahkan garis-garis gerakan kecil menggunakan 8 px tinggi 4 pt tebal Stroke (#43435B) untuk 4 lebih pendek satu dan dua pusat px yang untuk sisi, posisi mereka seperti yang terlihat dalam gambar referensi. Luangkan waktu Anda, dan setelah Anda selesai, jangan lupa untuk memilih dan group (kontrol-G) mereka semua bersama-sama, melakukan hal yang sama untuk semua yang menyusun bentuk sesudahnya.

finishing off the icon in ad

Rekap

Sebelum aku naik ke matahari terbenam, saya ingin sedikit rekap poin kunci yang telah kita pelajari ketika datang untuk menciptakan ikon baris berbasis stroke, jika beberapa dari Anda ingin melewatkan bagian seluruh proyek.

Do 's:

  • Ketika Anda mulai meletakkan ikon Anda menyusun berbagai bentuk, selalu melakukan matematika dan pastikan Anda menyertakan nilai mereka menguraikan (stroke mereka) ketika melakukan Jadi, karena ini akan membantu Anda mengetahui aspek-aspek kunci dalam hal posisi mereka dalam hubungannya dengan Artboard dan satu sama lain.
  • Ketika memilih berat untuk stroke Anda, selalu mencoba untuk pergi dengan angka genap (misalnya 2, 4, 6, 8, dll) daripada aneh yang (misalnya 3, 5, 7, 9, dll), karena jika tidak menguraikan Anda akan berakhir menjadi tersentak dari Pixel Grid.
  • Ketika posisi bentuk Anda, selalu pastikan bahwa jalan mereka sempurna tumpang tindih, terutama jika Anda sedang berhadapan dengan benda-benda yang memiliki dibulatkan sudut atau garis lebih organik.
  • Ketika menambahkan garis besar sebuah bentuk, pastikan Anda memilih dan kelompok mereka bersama-sama sehingga mereka akan berperilaku sebagai satu unit, yang membuat lebih mudah untuk memposisikan mereka jika Anda perlu untuk nanti.
  • Saat Anda mulai membangun ikon Anda, selalu pastikan Anda menjaga nilai warna yang sama dan berat seluruh stroke Anda untuk mencapai konsistensi.
  • Ketika bentuk-bentuk dalam garis besar posisi, selalu melakukannya dari stroke yang batin tepi dan tidak pusat.
  • Ketika menyelaraskan berbasis stroke benda-benda yang non-stroke-based, selalu pastikan untuk menyesuaikan posisi akhir mereka jika Anda menggunakan panel rata, karena perangkat lunak akan selalu membuat keselarasan yang didasarkan pada stroke pusat, dan tidak dengan tepi luar.
  • Ketika posisi beberapa stroke berbasis objek dalam hubungannya dengan satu sama lain, selalu melakukan matematika dan termasuk nilai-nilai mereka bagian atas dan/atau bawah ketika menggunakan panel rata, jika tidak Anda tidak akan mendapatkan hasil yang diinginkan.

Larangan:

  • Ketika datang ke larangan, mereka cukup banyak tepat berlawanan peluru item dari daftar sebelumnya, sehingga selama Anda tetap pengertian kunci tersebut dalam pikiran, Anda harus baik untuk pergi.

Seperti biasa, saya sangat berharap Anda bersenang-senang bekerja pada proyek dan yang paling penting berhasil belajar satu atau dua selama proses.

Bahwa menjadi kata, jika Anda memiliki pertanyaan, jangan ragu untuk mengirim mereka di bagian komentar dan aku akan kembali kepada Anda segera setelah aku bisa!

finished project preview

Memperluas kemampuan ikon-bangunan Anda!

Ingin belajar lebih banyak tentang menciptakan ikon? Yah, kami mengambil kebebasan tangan-memetik beberapa tutorial yang mengagumkan yang akan membantu Anda melakukan hal itu!

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.