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

Cara Membuat Stiker iMessage di Adobe Illsutrator dan Menghasilkan Pendapatan Tambahan!

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Home Sweet Home.
How to Create a Mini 3D House in 3D Studio Max
How to Create an Abstract Vietnamese Woman Portrait in Adobe Photoshop

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Final product image
What You'll Be Creating

Kamu mungkin telah menyadadi ada hal gila di iMessage stickers semenjak mereka dimunculkan di iOS 10. Sekarang, kamu bisa membuat dan menjual stiker digitalmu sendiri ketimbang menggunakan emoji yang tersedia di bawaan.

Stiker iMessage adalah cara keren dan seru untuk mengekspresikan idemu karena kamu bisa menggunakannya di chat-mu.

Jika kamu pernah berpikir untuk membuat sebuak kemasan stiker untuk iOS, di tutorial ini, kita akan bekerja dari sketsa hingga stiker iMessage sederhana di Adobr Illustrator menggunakan garis, bentuk dan warna. Lalu, secara sigksf  memindahkannya ke iTunes Connect dan Xcode intuk memunculkan stikermu sendiri ke App Store.

Jika kamu mencari inspirasi emoticon untuk desain stikermu, pergilah menuju GraphicRiver.

1. Mulai dengan Sebuah Konsep dan Siapkan Berkas Stikermu di Adobe Illustrator

Langkah 1

Saya beberapa waktu ini merindukan rumah saya. Tidak peduli seberapa menyenangkannya jalan-jalan, perut saya selalu terisi dengan aroma makanan "rumahan". Jadi saya putuskan untuk menjadikan "Makanan Lebanon" sebagai tema dasarnya. Tidak ada yang lebih kaya dalam keanekaragamannya seperti yang dimiliki masakan Lebanon.

Jadi mari mulai dengan menggambar konsepnya secara digital maupun di atas kertas.

Saya telah menggambar 12 stiker makanan dan memberi label namanya dalam bahasa Lebanon, hanya untuk acuan.

Umumnya, akan jadi bagus jika memiliki sekitar 24 desain untuk sebuah paket stiker. Tapi untuk tutorial ini kita hanya akan mengerjakan 12.

Mulai dengan menggambar sketsa dari 12 item dalam format grid 4 x 3 seperti di bawah.

sketch lebaanese food

Setelah kamu selesai membuat sketsa, mari pindahkan sketsa ke Adobe Illustrator.

Langkah 2

Buka Adobe Illustrator CC.

Buka sebuah Dokumen Baru: File > New (Command-N) dan atur berkas kustom-mu:

Nama: "Lebanese_Food_iMessage_Stickers".

  • Number of Artboards: 12 (Mengikuti ke jumlah stiker, karena tiap stiker akan memiliki artboardnya masing-masing).

Kamu punya tiga pilihan dari ukuran stiker untuk dibuat.

  • Kecil: 300 x 300 pixels
  • Sedang: 408 x 408 pixels
  • Besar: 618 x 618 pixels

Saya sendiri kebih suka bekerja di 618 x 618. Jadi atur pengaturan Dokumen Baru.

  • Columns: 4
  • Width: 618 px
  • Height: 618 px
  • Units: Pixels
  • Color Mode: RGB
  • Klik Create Document.
Adobe illustrator open new document

Langkah 3

Gunakan jalan pintas Place (Command-Shift-P) untuk meletakkan sketsa di Artboard. Pindahkan gambar hingga memenuhi Artboard.

Command Shift P Place

Selanjutnya, kita harus membuat sebuah layer untuk menggarisi.

Buka panel Layers, Window > Layers

Klik di sub-menu dari panel Layers:

  1. Name: Sketch
  2. Pilih Lock
  3. Dim Images to: 20%
  4. OK
Adobe Illustrator layer options

Setelah mengunci layer "Sketch", Buat Layer Baru. di atas 'Sketch' dan beri nama 'Linework'

File > Save (Command-S) dan simpan berkas illustratormu.

2. Cara Menggarisi

Langkah 1

Mari kita siapkan penggambaran garis kita.

Pertama, kita harus buat sebuah "pressure" Calligraphic art brush. Buka panel Brushes: Window > Brushes.

Pilih Ellipse Tool (L), beri warna hitam, Stroke null, dan gambar sebuah lingkaran kecil dengan ukuran kuas yang kamu ingin gunakan untuk menggambar.

create art brushes

Langkah 2

Dengan lingkaran terpilih, geser ke panel Brushes.

Sebuah kotak dialog New Brush akan terbuka, Pilih Art Brush dan OK.

create art brush new brush

Kotak dialog Art Brush Options akan terbuka.

Catatan: Jika kmau memiliki pen tablet digital, akan sangat bagus untuk membuat kuas yang bereaksi dengan tekanan pulpen.

Untuk membuat sebuah kuas yang berreaksi dengan tekanan pulpen, di kotak dialog Art Brush Options, pilih:

  • Width: Pressure
  • Brush Scale Options: Stretch to Fit Stroke Length
  • Colorization Method: Tints; ini akan mengizinkan kita untuk mengkustomisasi warna dari kuas kustom kita nanti.
  • Klik OK
create art brush

Ketika sebuah art brush terbuat, Hapus lingkaran yang telah dibuat.

Sekarang kita telah memiliki art brush yang berreaksi pada tekanan!

Langkah 3

Mari mulai memindai sketsanya/

  1. Buka panel Stroke: Windows > Stroke.
  2. Dari panel Brushes, pilih art brush yang baru saja kita buat.
  3. Pilih Paintbrush Tool (B) dari panel Tools.
  4. Di panel Stroke, pilih sebuah Stroke dengan 0.5 pt berwarna hitam. Dan atur Fill ke kosong.

Pastikan kuasnya tidak terlalu lembut ketika melacak. Sehingga itu tampak digambar dengan tangan. Untuk mengkasarkannya klik dua kali Paintbrush Tool (B) dari panel Tools, dan kotak dialog Paintbrush Tool Options akan terbuka.

Turunkan fidelity satu atau dua notch.

paint brush tool artbrush fidelity

Langkah 4

Mari mulai dengan Paintbrush Tool (B).

Ikuti sketsanya. Ini tidaklah harus sempurna karena kita ingin efek gambar doodle yang sederhana.

sketch trace linework

Setelah semuanya sudah digarisi. Kunci layer "Linework" dari panel Layers.

Buat sebuah layer baru, di bawah "Linework" dan beri nama "Color" sehingga kita bisa menerapkan warna di bawah garisnya,

adobe illustrator create new layer

Selalu Simpan berkasmu. File > Save (Command-S).

3. Cara cepat mewarnai Artwork

Langkah 1

Mari Mewarnai!

Dari panel Tools, pilih Blob Brush Tool (Shift-B). Blob Brush mirip dengan marker dan menyenangkan untuk digunakan.

Cukup pilih warna Stroke dari pilihanmu, pilih null untuk fill dan warnai ikon makanannya.z

  • Tip singkat: Untuk mengatur ukuran Blob Brush Tool, tahan kurung siku kiri ([) untuk mengurangi ukurannya dan kurung siku kanan (]) untuk memperbesar.
  • Seiringan dengan Blob Brush Tool (Shitf-B) gunakan Eraser Tool (Shift-E) untuk menghapus blob yang ingin kamu bersihkan.

Pewarnaannya tidak harus sempurna karena kita memerlukan kesan organik.

Mulai dengan hummus.

adobe illustrator tip blob brush tool

Seperti yang kamu lihat, kamu bisa mendapatkan banyak hal dengan Blob Brush Tool hanya dengan mengganti ukuran dan warnanya. Dan juga ini cepat untuk digunakan.

Bersenang-senanglah dan warnai sisanya!

Langkah 2

Kamu perlu mengatur ukuran blob dan warnanya bersama-sama, jadi untuk Arrange objek, gunakan pintasan berikut untuk mempercepat alur kerja.

  • Arrange > Bring to Front (Command-Shift-])
  • Arrange > Bring Forward (Command-])
  • Arrange > Send Backward (Command-[)
  • Arrange > Send to Back (Command-Shift-[)

Ketika semua sudah diatur, kamu akan memiliki ikon-ikon penuh warna yang indah.

arrange layers

Langkah 3

Sekarang mari bersihkan artboard kita:

  1. Unlock later "Linework" dari panel Layers.
  2. Hapus layer "Sketch" dengan menggesernya dari panel Layers ke ikon tempat sampah di panel tersebut.
  3. Pilih Selection Tool (V) dan untuk tiap ikon makanan, pilih line work dan warnanya.
  4. Grup (Command-G) mereka jadi satu. Secara otomatis ketika kamu menggabungkan dua layer itu akan memindahkan grup barunya ke layer "Linework"
  5. Atur ketengah setiap ikon dari artboard.
selection tool

6. Ubah ukuran dari objek untuk membuatnya muat di artboard, and menyimpan ruang kecil di pinggir. Untuk menjaga proporsi objek, tahan Shift sambil menggesernya hingga mencapai ukuran yang diinginkan.

7. Ketika semua ikon makanan telah diatur, hapus layer "Color" karena itu kosong.

selection v tool

File > Save (Command-S).

4. Cara Mengekspor dan Membuat Ikon Aplikasi Kita

Langkah 1

Export semua berkas, menggunakan fitur Export for Screens (File > Export > Export for Screens )

  1. Export ke PNG.
  2. Klik Advanced Settings Icon, pilih lokasi untuk ekspor berkasmu dan atur Scale ke 1x.
  3. Atur Background Color: Transparent.
  4. Export Artboard.
adobe illustrator export files

Langkah 2

Kamu memiliki dua pilihan. Baik menggunakan aplikasi sekunder untuk meluncurkan stiker seperti LINE Creators Market atau membuatnya sendiri menggunakan Apple Developers Account.

Di tutorial ini sya akan secara singkat membimbingmu membuka sebuah Akun Pengembang Apple yang menghabiskan $100 tiap tahunnya. Proses aplikasinya cukup mudah dan cepat. Namun, kamu harus masuk ke iTunes Connect dan menyiapkan hal-hal administratif seperti Tax and Banking, jika kamu berniat untuk menjual stikermu (ini tidak dibutuhkan untuk paket stiekr gratis)

Untuk detil lebih lanjut, pergi ke Panduan Pengembang iTunes Connect dan familiarlah dengan aturan di sana.

Langkah 3

Untuk menggenerasi stiker kita, kita harus menggunakan Xcode.

Unduh dan pasang versi terbaru dari Xcode 8 langsung dari Mac App Store.

Langkah 4

Mengunggah stiker ke Xcode tidaklah susah, hanya ikuti langkah berikut:

Buka Xcode

Pastikan kamu telah masuk ke Xcode dengan Apple ID-mu.

Preference > Account > Select + > Sign in.

  1. Buat sebuah pryek Xcode baru.
  2. Pilih Sticker Pack Application.
  3. Klik Next
  4. Berikat sticker bundle sebuah nama untuk mengidentifikasikannya: 'Lebanese Food'.
  5. Lalu isikan Team, Organization Name dan Identifier (com.yourcompany.ProductName), sesuai dengan detilmu.
  6. Klik Next
  7. Pilih Stickers.xcstickers > Sticker Pack, dan unggah stikernya, dengan menggeser gambarnya.
Xcode
Xcode Select sticker pack application
Xcode Sticker Bundle
Xcode

Langkah 5

Lalu unggah ikon Aplikasi iMessage.

Foldernya di atas folder 'Sticker Pack'

Pilih satu gambar dari set makanan yang ingin kamu gunakan untuk ikon aplikasi dan konversi ke JPG di Adobe Photoshop sehingga dia memiliki background warna putih. Ganti nama ikon aplikasi: "Lebanese_Food_App_Icon.jpg".

Ada 12 ikon gambar yang perlu kamu gunakan untuk Xcode dan 1 untuk iTunes Connect. Untuk menggenerasi ikon aplikasi secara mudah, kunjungi MakeAppIcon.

Unggah ikon makanan terpilih di situs, masukkan email-mu dan dia akan menggenerasi beraneka berkas ikon aplikasi untukmu.

Kamu bisa mengunduhnya-nya langsung dari email-mu.

makeappicon generator app

Ketika kamu telah mengunduh gambar yang digenerasi, Unggah ke Xcode dengan menggesernya.

Itu harusnya tampak seperti ini ketika kamu telah mengunggahnya ke Xcode.

Xcode upload iMessage app

5. Konfigurasi dan Daftarkan Stikernya.

Langkah 1

Ketika kamu telah mengunggah stiekrnya, kamu perlu 'Test the Build' dari Xcode, untuk melihat apakah stikernya berjalan baik. Kamu bisa melakukannya dengan menggunakan Xcode Simulator, atau kamu bisa menjalankannya di perangkatmu. Yang perlu kamu lakukan adalah:

  1. Pilih perangkat mobile-mu, di bawah Set the Active Scheme.
  2. Tekan tombol Run.
Xcode select iphone device

Jika sebuah notifikasi eror muncul, buat perubahan yang diminta, ekspor dan unggah ikon yang benarnya lagi.

Lalu, tes stiker di Xcode Simulator dengan mengklik ikon Run. Kelihatan keren!

test run stickers imessage

Jika kamu perlu mengatur ukuran dari stikermu di iMessage, kamu bisa melakukannya dari panel di kanan seperti di bawah ini.

Ukuran "Medium" atau "Small" akan berjalan baik.

Xcode sticker

Setelah selesai, kita perlu mendaftarkan sebuah App ID untuk stikernya.

Langkah 2

Masuk ke Akun Pengembang Apple untuk mendaftarkan sebuah App ID.

  1. Masuk ke Account > Identifiers > App ID > Pilih +
  2. Masukkan detilnya dan pilih Register.
apple developer account app

Langkah 3

Sekarang akhirnya kita bisa Export & Upload "build" kita ke iTunes Connect!

Kembali ke Xcode.

  1. Pilih "Generic iOS device" di bawah Set the Active Scheme.
  2. Lalu pilih folder 'Stickers.xcstickers', dan dari menu utama di atas klik Product > Archive untuk mengarsipkan build.

Sebuah jendela baru akan tampil dan menunjukkan "Build" yang telah terarsipkan. Kamu akan melihat stiker di panel kiri.

Klik Validate untuk melihat apakah semua stiker siap untuk digunakan. Jika ada isu, Xcode akan menampilkan notifikasi merah di bagian atas.

Jika semua berjalan lancar dengan "Build"-nya, kamu perlu mengunggahnya ke iTunes Connect untuk ditinjau.

Klik di Upload to App Store. Ini akan mengunggah stiker ke iTunes Connect. Setelah selesai mengunggah, ini akan muncuk di akun iTunes Connect-mu. Beri waktu beberapa menit.

xcode archives sticker pack

Langkah 4

Waktunya untuk memasukkan stiker ke App Store!

Di iTunes Connect:

  1. Pilih My Apps.
  2. Pilih + > New App, dan pilih 'Build' yang baru saja kita unggah untuk submission.
itunes connect plus add new app
  1. Pilih Platform iOS.
  2. NameLebanese Food.
  3. Pilih Language dan Bundle ID.
  4. Buat sebuah SKU unik "eg.location.com.bundle_title".
  5. Create!
itunes new app

Di menu panel kiri, isi App Information dan Pricing & Avaibility. Di sini kamu bisa menulis deskripsi aplikasi, bahasa, kategori, dan harga dari aplikasi. Kita tidak akan membahasnya hingga detil, karena ini cukup mudah, tapi ini akan seperti ini:

itunes connect app

Langkah 5

Di Adobe Photoshop, buat beberapa screenshots, menggunakan Xcode Simulator, dan unggah mereka ke iTunes Connect, untuk membuat pratinjau iMessage dari tampilan screenshots. Ini mungkin memamakan beberapa waktu. Buka 5 Screenshot berukuran: iPhone 5.5 inch display (1242 x 2208 px). Sistem akan menggenarasikan sisanya untukmu.

itunes imessage preview images app

Ketika selesai, klik Submit for Review.

Dan itulah!

Sekarang yang perlu kamu lakukan adalah menunggu proses peninjauan beberapa hari hingga diterima.

Selagi stikermu ditinjau, kamu bisa mengirim Test Invitation ke penggemarmu melalui TestFlight, untuk mencoba stikernya secara gratis selama 60 hari. Atau kamu bisa menggunakan waktumu untuk mengatur pajak, perjanjian, sertifikat, dan detil bank dengan Apple.

Ini akan cukup memakan waktu, dan kamu akan menghadapi beberapa error dalam perjalanan, dengan pertolongan dan kesabaran kamu akan tiba di sana.

Selamat! Stiker iMessage "Makanan Lebanon" kita telah siap!

Wow, saya harap kamu menikmati panduan ini! Mendesain stiker iu menyenangkan, terutama, jika kamu bisa membuat uang darinya!

Beli set stiker 'Lebanesy Food' dari iTunes

Aku harap panduan ini berguna! Saya akan senang untuk melihat yang telah kamu buat! Bagikan desakn stikermu dengan kami.

Lebanese Food Final
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.