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

Cum să creezi autocolante iMessage în Adobe Illustrator şi să faci bani în plus!

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

Romanian (Română) translation by Cath Vectorielle (you can also view the original English article)

Final product image
What You'll Be Creating

Poate ai observat că există o nebunie de autocolante iMessage, de când acestea au fost introduse cu iOS 10. Astăzi, deja poţi crea şi vinde propriile tale autocolante digitale, în loc să utilizezi emojiurile pre-instalate.

iMessage autocolante este o modalitate mișto şi distractivă să-ți exprimi ideile şi gândurile pentru ca le poți selecta, plasa, şi lipi în conversațiile tale!

Dacă te-ai întrebat vreodată ce muncă întră în a face un pachet de autocolant pentru iOS, in acest tutorial, vom lucra de la o schiţă pentru a proiecta autocolante simple iMessage în Adobe Illustrator folosind linii, forme şi culori. Apoi ne vom deplasa pentru scurt timp la iTunes Connect şi Xcode să lansăm propriiul nostru pachet de  autocolante iMessage pe App Store.

Dacă ești în căutarea pentru inspiraţie emoticon pentru autocolantele proiectate de tine, dă o fugă pe GraphicRiver.

1. Vino cu un Concept şi pregătește fişierul de autocolant în Adobe Illustrator

Pasul 1

Am lipsit de acasă pentru un timp. Nu contează cât de mult mă bucur de minunile călătoriei, burta mea este întotdeauna plină cu arome de alimente de "acasă". Aşa că m-am decis pe tema "Mâncarea libaneză". Nu există absolut nimic mai bogat şi mai abundent ca varietate decât bucataria libaneză.

Deci să începem schiţarea conceptului nostru de produse alimentare, pe hârtie sau digital.

Am schiţat 12 "etichete"  alimente din meniul libanez, şi am etichetat numele lor în libaneză, doar pentru referinţă.

În general, este bine să aibă aproximativ 24 modele un pachet de autocolant, dar din motive legate de acest ghid fac doar 12.

Începe să schiţezi 12 elemente într-o formă grilă de 4 x 3, ca și mai jos.

sketch lebaanese food

După ce ai terminat schiţa, mut-o în Adobe Illustrator.

Pasul 2

Lansează Adobe Illustrator CC.

Deschide un Document nouFile > New (Command-N) şi setează-ți fişierul particularizat:

Name: "Lebanese_Food_iMessage_Stickers".

  • Number of Artboards: 12 (egal cu numărul de etichete, încât fiecare autocolant ar trebui să aibă propria planşă de lucru)

Ai trei opţiuni de dimensiuni de autocolant pentru a le crea.

  • Mici: 300 x 300 pixeli
  • Medii: 408 x 408 pixeli
  • Mari: 618 x 618 pixeli

Eu personal prefer lucru pe 618 x 618. Deci ajustez setările pe Documentul nou:

  • Coloane: 4
  • Lăţime: 618 px
  • Înălțime: 618 px
  • Unităţi: pixeli
  • Modul de culoare: RGB
  • Fă clic pe Create Document
Adobe illustrator open new document

Pasul 3

Utilizează comanda rapidă Place (Command-Shift-P) pentru a plasa schița pe prima planşă de lucru. Trage imaginea pentru a umple toate planșele de lucru, astfel încât schițele tale să umple toate planșele de lucru create.

Command Shift P Place

Apoi, avem nevoie să facem un layer pentru linia noastră de muncă.

Deschide panoul Layers, prin Window > Layers.

Fă clic pe sub-meniul din panoul Layers

  1. Name: Sketch
  2. Selectează Lock
  3. Estompează imaginile la: 20 %
  4. OK
Adobe Illustrator layer options

După blocarea layer-ului "Sketch" , du-te la Create New Layer, deasupra la "Sketch" , şi numește noul layer 'Linework'.

Cu File > Save (Command-S) salvează noul tău fișier Illustrator.

2. Cum să desenezi cu linii

Pasul 1

Să ne pregătim să desenăm cu linii.

În primul rând, trebuie să creăm o pensulă artistică caligrafică "de presiune". Deschide panoul Brushes : Window > Brushes.

Selectează Ellipse Tool (L), cu Fill negru, cu Stroke nul, şi desenează într-o elipsă mică dimensiunea pensulei cu care dorești să desenezi.

create art brushes

Pasul 2

Elipsa selectată, trage-o şi las-o deasupra în panoul Brushes.

O casetă de dialog New Brush va apărea. Selectează Art Brush, apoi OK.

create art brush new brush

Se va deschide caseta de dialog Art Brush Options .

Notă: Dacă ai o tabletă digitală cu stilou, este perfect să creezi o pensulă artistică, care reacţionează la presiunea stiloului (pen pressure).

Pentru a crea o pensulă influențată de presiunea stiloului digital, în caseta Art Brush Options, selectează:

  • Width: Pressure
  • Brush Scale Options: Stretch to Fit Stroke Length
  • Colorization Method: Tints; Acest lucru ne va permite să particularizăm culorile trăsăturilor de pensulă personalizate ale noastre mai târziu.
  • Fă clic pe OK.
create art brush

După ce este creată pensula artistică, şterge elipsa creată.

Acum avem o pensulă artistică sensibilă la presiune gata!

Pasul 3

Să începem să copiem schiţa.

  1. Deschide panoul Stroke: Windows > Stroke
  2. Din panoul Brushes, selectează pensula artistică tocmai creată.
  3. Selectează Paintbrush Tool (B), din panoul Tools.
  4. În panoul Stroke selectează un contur negru de 0,5 pt şi cu Fill setat la nul.

Asigură-te că pensula nu este foarte netedă atunci când desenezi, astfel încât se pară că este o schiță de mână. Pentru a modifica pensula,  dă dublu clic pe Paintbrush Tool (B), din panoul Tools, şi se va deschide caseta de dialog Paintbrush Tool Options.

Setează Fidelity în jos cu o crestătură sau două.

paint brush tool artbrush fidelity

Pasul 4

Să începem copierea cu Paintbrush Tool (B) .

Urmărește schiţa şi copiaz-o cu linii. Aceasta nu trebuie să fie perfectă, căci ne dorim să-i dăm un efect simplu de mâzgălitură de mână.

sketch trace linework

Odată ce toate liniile tale sunt la loc, blochează cu Lock layerul "Linework" din panoul Layers.

Create New Layer, sub "Linework", cu numele "Color", astfel putem aplica culori sub linii.

adobe illustrator create new layer

Întotdeauna salvează-ți fişierul. File > Save (Command-S).

3. Cum să colorezi rapid opera de artă

Pasul 1

Hai sa colorăm!

Din panoul Tools, selectează instrumentul Blob Brush Tool (Shift-B). Blob Brush Tool este similar cu un marker, şi distractiv de utilizat.

Doar selectează un swatch de culoare pentru Stroke la alegere, cu fill nul, şi colorează pictogramele alimente.

  • Un sfat rapid: pentru a gestiona dimensiunea Blob Brush Tool, ţine tasta paranteză pătrată stânga ([) pentru a micşora dimensiunea pensulei şi dreapta paranteză pătrată (]) pentru a o mări.
  • Laolaltă cu Blob Brush Tool (Shift-B),folosește și Eraser Tool (Shift-E), să ștergi orice formă nedorită.

Colorarea nu trebuie să fie perfectă, pentru că avem nevoie de o senzație organică.

Începe cu humusul.

adobe illustrator tip blob brush tool

După cum vezi, poţi realiza multe cu Blob Brush Tool doar prin schimbarea dimensiunii si culorilor. Plus este rapid de folosit.

Deci, distrează-te și colorează și restul operei de artă!

Pasul 2

Trebuie să aranjezi formele în timpul colorării, adică Arrange, utilizând aceste comenzi rapide pentru a accelera fluxul de lucru:

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

Odată ce ai aranjat totul, ar trebui să ai un frumos set colorat de pictograme.

arrange layers

Pasul 3

Acum haide să cureţăm planșele noastre de lucru.

  1. Deblochează stratul "Linework" din panoul Layers.
  2. Şterge stratul  "Sketch", prin tragerea acestuia de pe panoul Layers peste pictograma coş de gunoi din același panou.
  3. Selectează Selection Tool (V), şi pentru fiecare pictogramă alimentară, selectează desenul linie şi culoarea corespunzătoare.
  4. Grupează-le (Command-G) împreună. Automat, odată ce ai grupat cele două straturi, noul grup se mută în stratul "Linework".
  5. Centrează fiecare pictogramă în centrul planşei de lucru măsurând din ochi.
selection tool

6. Scalează obiectele grupate pentru a se încadra în dimensiunile planşei de lucru şi păstrează un mic spaţiu pe margini. Pentru a păstra proporţiile obiectului, ţine apăsată tasta Shift în timp ce tragi de caseta de încadrare, până când obiectul este la dimensiunea dorită.

7. Odată ce toate pictogramele au fost scalate, şterge stratul "Color", pentru că este gol.

selection v tool

File > Save (Command-S).

4. Cum să exporți şi să creezi icoanele App

Pasul 1

Exportă fişierele, utilizând caracteristica Export for Screens (File > Export > Export for Screens).

  1. Exportă-le ca și PNG.
  2. Fă clic pe pictograma Advanced Settings, selectează locaţia la care să fie exportate fişierele şi setează Scale la  1x.
  3. Setează  Background Color: Transparent.
  4. Export Artboard.
adobe illustrator export files

Pasul 2

Ai două opţiuni. Fie alegi să utilizeze o piață de aplicaţii secundară  pentru a lansa etichetele, precum LINE Creators Market, sau construiește-o tu folosind Apple Developers Account

Pentru acest tutorial te voi instrui pe scurt legat de deschiderea unui  Apple Developers Account, care costă 100 $ pe an. Procesul de aplicare este destul de simplu, şi acceptarea este rapidă. Cu toate acestea, apoi ai nevoie pentru să te conectezi la iTunes Connect şi să configurezi chestii administrative fiscale şi bancare Tax and Banking, în cazul în care plănuiești să vinzi etichetele (acest lucru nu este necesar pentru un pachet gratuit de etichete).

Pentru mai multe detalii, du-te la iTunes Connect Developer Guide, şi familiarizează-te cu el.

Pasul 3

Pentru a genera etichetele noastre, avem nevoie să utilizăm Xcode.

Descarcă cea mai recentă versiune de Xcode 8 direct la Mac App Store şi instalează-l.

Pasul 4

Încărcarea etichetelor pe Xcode este uşoare; Doar urmează paşii:

Deschide Xcode.

Asigură-te că vă ești conectat la Xcode cu  Apple ID-ul tău

Preference > Account > Select + > Sign in.

  1. Create a New Xcode Project.
  2. Selectează Sticker Pack Application.
  3. Dă clic pe Next
  4. Dă-i setului de etichete un Product Name pentru identificare : 'Lebanese Food'.
  5. Apoi completează Team, Organization Name, și Identifier (com.yourcompany.ProductName), în funcţie de detaliile tale.
  6. Dă clic pe Next
  7. Selectează dosarul Stickers.xcstickers > Sticker Pack, şi încarză etichetele, prin glisarea şi fixarea imaginilor.
Xcode
Xcode Select sticker pack application
Xcode Sticker Bundle
Xcode

Pasul 5

Apoi încarcă iMessage App Icons.

Dosarul este cel de deasupra la folderul 'Sticker Pack'

Alege o imagine din setul alimentar pe care dorești să o utilizezi pentru pictograma App, şi convertește-o într-un JPG în Adobe Photoshop, cu fundal alb. Redenumește imaginea pictogramă App: "Lebanese_Food_App_Icon.jpg".

Sunt 12 imagini pictogramă în total de care ai nevoie pentru Xcode şi 1 pentru iTunes Connect. Pentru a genera icoane app uşor, vizitează MakeAppIcon.

Încarcă pictogramele alimentare selectate pe site, introdu-ţi adresa de Email, si se vor genera toate icoanele pe mărimi pe diferite app-uri pentru tine.

Le poți descărca direct din email.

makeappicon generator app

Odată ce ai descărcat imaginile generate, încarcă-le în Xcode trăgându-le deasupra și dându-le drumul.

Ar trebui să arate ceva de genul ăsta, după ce le-ai încărcat în Xcode.

Xcode upload iMessage app

5. Configurarea şi înregistrarea etichetelor

Pasul 1

Odată ce ai încărcat etichetele, trebuie să "Testezi construcția" în  Xcode, pentru a vedea dacă etichetele în acţiune sunt bune. Poţi face acest lucru prin intermediul Xcode Simulator, sau le poţi rula pe propriul dispozitiv. Tot ce trebuie sa faci este:

  1. Selectează dispozitivul tău mobil, sub Set the Active Scheme.
  2. Dă clic pe butonul Run.
Xcode select iphone device

În cazul în care apare o notificare de eroare, efectuează modificările solicitate, exportă şi încarcă pictogramele corectate din nou.

Apoi, testează etichetele pe Xcode Simulator făcând clic pe pictograma Run. Arată fabulos!

test run stickers imessage

În cazul în care ai nevoie să ajustezi dimensiunea de afișare a etichetelor pe iMessage, poţi face acest lucru în panoul din dreapta, aşa cum se vede mai jos.

Dimensiunile "Medium" sau "Small" funcţionează bine.

Xcode sticker

O dată ce acestea sunt gata, trebuie să înregistrăm un App ID pentru etichete.

Pasul 2

Conectează-te la Apple Developer Account să înregistrezi un App ID.

  1. Intră la Account > Identifiers > App ID > selectează +
  2. Completează detaliile şi Register.
apple developer account app

Pasul 3

Acum putem în cele din urmă Export & Upload ale noastre "construcții" pe iTunes Connect!

Du-te înapoi pe Xcode.

  1. Selectează "Generic iOS device" sub Set the Active Scheme.
  2. Apoi selectează folderul 'Stickers.xcstickers', şi din meniul principal de sus dă clic pe Product > Archive, pentru a arhiva construcția.

O nouă fereastră care ar trebui să apară care va arăta ca și arhivate "construcțiile". Vei vedea etichetele în panoul din stânga.

Dă clic pe Validate pentru a vedea dacă toate etichetele sunt bune. În cazul în care există probleme, Xcode va afișa o notificare în roşu pe bara de sus din meniu.

Dacă totul merge bine cu "construcțiile", atunci le vei încărca pe iTunes Connect pentru revizuire.

Dă clic pe Upload la App Store. Acest lucru va încărca etichetele pe iTunes Connect. După ce a terminat de încărcat, acestea ar trebui să apară pe contul iTunes Connect . Dă-i cateva minute.

xcode archives sticker pack

Pasul 4

E vremea să pui etichetele pe App Store!

  Pe iTunes Connect:

  1. Selectează My Apps.
  2. Selectează + > New App, şi selectează 'construcțiile' tocmai încărcate doar pentru prezentare.
itunes connect plus add new app
  1. Selectează platforma iOS.
  2. Name: Lebanese Food.
  3. Selectează Language şi Bundle ID.
  4. Creează un SKU unic "eg.location.com.bundle_title".
  5. Create!
itunes new app

Pe panoul de meniul din stanga, completează  App information and Pricing și  Availability. Aici poţi scrie descrierea etichetelor, limba, categoriile, și prețul. Nu vom intra în toate detaliile, fiind evidente, dar ar trebui să arate similar cu aceasta:

itunes connect app

Pasul 5

În Adobe Photoshop, crează niște capturi de ecran, folosind simulatorul Xcode, şi încarcă-le pe iTunes Connect, pentru a crea previzualizare imagini iMessage  pentru capturi de ecran. Acest lucru ar putea dura ceva timp. Creează 5 dimensiuni de capturi de ecran: iPhone display de 5,5 inch (1242 x 2208 px). Sistemul va genera restul dimensiunilor pentru tine.

itunes imessage preview images app

Odată ce ai terminat, dă clic pe Submit for Review.

Şi asta e tot!

Acum tot ce trebuie să faci este să aştepţi pentru procesul de evaluare pentru câteva zile, pentru a obţine aprobare.

În timp ce aștepți etichetele să fie revizuite, poţi trimite Test invitations la fani tăi prin TestFlight, pentru a încerca etichetele gratuit pentru 60 de zile. Sau poţi folosi timpul pentru a-ți seta impozitele, acordurile, certificatele, şi detaliile bancare cu Apple.

Este un pic de consumator de timp, şi te vei confrunta cu unele erori pe parcurs, dar cu puţină răbdare şi ajutor, vei ajunge acolo.

Felicitări! Etichetele noastre "Lebanese Food" sunt gata!

Oau, sper că te-ai bucurat de acest tutorial! Proiectarea de etichete este distractivă, mai ales în cazul în care se pot face nişte bani din ea!

Cumpără pachetul de etichete "Lebanesy Food" din iTunes.

Sper ca ai găsit acest tutorial util! Mi-ar plăcea să văd ce creezi tu! Împărtășește modelele de etichete cu noi.

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