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

Kako Izraditi iMessage Naljepnice u Adobe Illustratoru i Ostvariti Dodatnu Zaradu!

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

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Final product image
What You'll Be Creating

Možda ste primijetili da su svi poludjeli za iMessage naljepnicama otkada su se pojavile zajedno sa iOS10. Danas možete izraditi i prodati vlastite digitalne naljepnice, umjesto upotrebe već unaprijed instaliranih emojija.

iMessage naljepnice su "cool" i zabavan način da izrazite svoje ideje i misli jer ih možete odlijepiti, smjestiti i zalijepiti na svoje razgovore!

Ako ste se ikada pitali što je potrebno da stvorite paket naljepnica za iOS, u ovom tutorialu ćemo od skice dizajnirati jednostavne iMessage naljepnice u Adobe Illustratoru koristeći linije, oblike i boje. Zatim ćemo se nakratko prebaciti u iTunes Connect i Xcode da pokrenemo vlastiti iMessage paket naljepnica na App Storeu.

Ako tražite inspiraciju za emotikone kako biste izradili vlastiti dizajn naljepnica, skoknite do naše stranice GraphicRiver.

1. Smislite Koncept i Pripremite Datoteku Naljepnice u Adobe Illustratoru

1. korak

Već dugo mi nedostaje dom. Ma koliko god uživam u čarima putovanja, trbuh mi je uvijek ispunjen aromom "domaće" hrane. Zato sam odlučila bazirati svoju temu na "libanonskoj kuhinji". Ne postoji apsolutno ništa toliko bogato, izdašno i raznovrsno kao što je libanonska kuhinja.

Počnimo stoga skicirati koncept hrane na papiru ili digitalno.

Ja sam skicirala 12 "naljepnica" jela s libanonskog stola i dodala im imena na libanonskom jeziku, samo za referencu.

Općenito je najbolje imati oko 24 dizajna za paket naljepnica, ali za potrebe ovog tutoriala, mi ćemo raditi na njih 12.

Počnite skiciranjem 12 stavki u formi 4 x 3 mreže, kao što je prikazano ispod.

sketch lebaanese food

Nakon što završite skiciranje, premjestite skicu u Adobe Illustrator.

2. korak

Pokrenite Adobe Illustrator CC.

Otvorite novi dokument (New Document): File > New (Command-N) i podesite svoju Custom datoteku:

Name: "Lebanese_Food_iMessage_Stickers".

  • Number of Artboards: 12 (ovisno o broju naljepnica, pošto bi svaka naljepnica trebala imati svoju "artboard" površinu za crtanje)

Možete birati između tri veličine naljepnice.

  • Small: 300 x 300 pixels
  • Medium: 408 x 408 pixels
  • Large: 618 x 618 pixels

Ja osobno preferiram raditi na 618 x 618 veličini. Prilagodite New Document postavke:

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

3. korak

Upotrijebite Place prečac (Command-Shift-P) da smjestite skicu na prvi Artboard. Odvucite sliku da ispunite sve "artboarde", tako da vaše skice ispunjavaju sve "artboarde" koje smo kreirali.

Command Shift P Place

Zatim, moramo kreirati sloj za linijski crtež.

Otvorite Layers karticu, Window > Layers.

Kliknite na pod-izbornik Layers kartice:

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

Nakon što zaključate "Sketch" sloj, idite na Create New Layer da izradite novi sloj iznad 'Sketch' sloja i nazovite ga 'Linework'.

File > Save (Command-S) i pohranite svoju Illustrator datoteku.

2. Kako Nacrtati Linijski Rad

2. korak

Pripremimo se za crtanje na linijskom radu.

Prvo, moramo izraditi "pressure" Calligraphic umjetnički kist (art brush). Otvorite Brushes karticu: Window > Brushes.

Odaberite Ellipse Tool (L), Fill podesite na crnu boju, Stroke ostavite bez boje i nacrtajte malenu elipsu veličine kista kojim želite crtati.

create art brushes

2. korak

Dok je elipsa selektirana odvucite  je i ispustite u Brushes karticu.

Otvoriti će se New Brush dijaloški okvir. Odaberite Art Brush i kliknite OK.

create art brush new brush

Otvoriti će se Art Brush Options dijaloški okvir.

Napomena: Imate li grafički tablet, bilo bi odlično da kreirate umjetnički kist koja reagira na pritisak.

Kako biste izradili kist koji se miče s pritiskom, u Art Brush Options dijaloškom okviru odaberite:

  • Width: Pressure
  • Brush Scale Options: Stretch to Fit Stroke Length
  • Colorization Method: Tints; ovo će nam omogućiti da kasnije prilagodimo boje naših poteza kista.
  • Kliknite OK.
create art brush

Kada je umjetnički kist kreiran, obrišite (Delete) izrađenu elipsu.

Sada imamo gotovi umjetnički kist koji odgovara na pritisak!

3. korak

Počnimo ocrtavati skicu.

  1. Otvorite Stroke karticu: Windows > Stroke.
  2. Iz Brushes kartice odaberite umjetnički kist koji smo upravo kreirali.
  3. Odaberite Paintbrush Tool (B), u Tools kartici.
  4. U Stroke kartici odaberite Stroke crne boje, debljine 0.5 pt i Fill podesite u "none".

Pobrinite se da vam kist nije previše gladak kada ocrtavate, tako da izgleda kao da je crtano rukom. Kako biste izgladili umjetnički kist, dvaput kliknite Paintbrush Tool (B) u Tools kartici i otvoriti će se Paintbrush Tool Options dijaloški okvir.

Smanjite Fidelity za jedan ili dva stupnja.

paint brush tool artbrush fidelity

4. korak

Počnimo ocrtavati sa Paintbrush Tool (B) alatom.

Pratite skicu i ocrtavajte linijski rad. Ne mora biti savršeno, jer želimo postići efekt kao da je crtano rukom.

sketch trace linework

Kada je završen sav linijski rad, zaključajte (Lock) svoj "Linework" sloj u Layers kartici.

Izradite novi sloj (Create New Layer), ispod 'Linework" i nazovite ga "Color", kako bismo mogli primijeniti boju ispod linijskog crteža.

adobe illustrator create new layer

Uvijek primijenite Save i spremite svoju datoteku. File > Save (Command-S).

3. Kako Na Brzinu Obojiti Rad

1. korak

Idemo bojati!

U Tools kartici odaberite Blob Brush Tool (Shift-B). Blob Brush kist je sličan markeru i zabavno ga je koristiti.

Samo odaberite Color Stroke uzorak po vlastitom izboru, Fill podesite bez boje i obojite ikone jela.

  • Kratki savjet: Za podešavanje veličine Blob Brush Tool alata, držite lijevu tipku uglate zagrade ([) da smanjite veličinu kista i desnu uglatu zagradu (]) da je povećate.
  • Zajedno sa Blob Brush Tool (Shift-B) , upotrijebite Eraser Tool (Shift-E), kako biste obrisali sve oblike koje želite očistiti.

Bojenje ne mora biti savršeno, pošto želimo postići organski dojam.

Počnite sa humusom.

adobe illustrator tip blob brush tool

Kao što vidite, možete postići zaista mnogo sa Blob Brush alatom samo mijenjajući njegovu veličinu i boje. Plus, brzo se radi s njime.

Stoga... zabavite se i obojite ostatak rada!

2. korak

Kako bojite, morate aranžirati oblike stvorene sa "blob" kistom, stoga kako bi primijenili Arrange funkciju na objekte, upotrijebite ove prečace da ubrzate proces rada:

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

Kada sve poravnate, trebali biste imati zgodan, raznobojan set ikona.

arrange layers

3. korak

Očistimo sada naše "artboard" radne površine.

  1. Otključajte "Linework" sloj u Layers kartici.
  2. Obrišite “Sketch” sloj tako da ga odvučete iz Layers kartice u ikonu smeća na toj kartici.
  3. Odaberite Selection Tool (V) i za svaku ikonu jela odaberite odgovarajući linijski rad i boju.
  4. Idite na Group (Command-G) da ih grupirate zajedno. Automatski, jednom kad grupirate dva sloja, nova grupa se premješta u "Linework" sloj.
  5. Centrirajte svaku ikonu u sredinu "artboarda".
selection tool

6. Skalirajte grupirane objekte tako da pristaju dimenzijama unutar "artboarda" i ostavite mali prostor uzduž rubova. Kako biste zadržali proporcije objekta. držite tipku Shift dok vučete ručku okvira sve dok ne postignete željenu veličinu objekta.

7. Kada skalirate sve ikone, obrišite "Color" sloj pošto je prazan.

selection v tool

File > Save (Command-S).

4. Kako Eksportirati i Kreirati Vlastite App Ikone

1. korak

Eksportirajte sve datoteke koristeći Export for Screens značajku (File > Export > Export for Screens).

  1. Eksportirajte kao PNG.
  2. Kliknite Advanced Settings ikonu, odaberite lokaciju na koju želite eksportirati svoje datoteke i podesite Scale na 1x.
  3. Podesite Background Color: Transparent.
  4. Eksportirajte Artboard.
adobe illustrator export files

2. korak

Imate dva izbora. Odaberite sekundarni app Marketplace da objavite naljepnice, poput LINE Creators Market, ili ga izgradite sami koristeći Apple Developers Account.

Za ovaj tutorial nakratko ću vas voditi kroz otvaranje Apple Developers Accounta, koji košta 100$ godišnje. Proces je prilično jednostavan i prihvaćanje je brzo. Ipak, tada se morate prijaviti u iTunes Connect i podesite administrativne stvari kao što su Tax and Banking, ako planirate prodavati svoje naljepnice (ovo nije potrebno za besplatne pakete naljepnica).

Za više detalja, idite na iTunes Connect Developer Guide i odvojite malo vremena da se upoznate sa sistemom.

3. korak

Kako bismo generirali naše naljepnice, moramo upotrijebiti Xcode.

Preuzmite posljednju verziju Xcode 8 izravno iz Mac App Store-a i instalirajte je.

4. korak

"Uploadanje" naljepnica na Xcode je lako; samo pratite korake:

Otvorite Xcode.

Obavezno morate biti prijavljeni na Xcode sa svojim Apple ID-jem.

Preference > Account > Select + > Sign in.

  1. Izradite novi Xcode projekt (New Xcode Project).
  2. Odaberite Sticker Pack Application.
  3. Kliknite Next.
  4. Dodijelite svojem kompletu naljepnica Product Name (ime proizvoda) da ga identificirate: 'Lebanese Food'.
  5. Zatim ispunite Team, Organization Name, i Identifier podatke(com.yourcompany.ProductName), ovisno o vašim detaljima.
  6. Kliknite Next
  7. Odaberite Stickers.xcstickers > Sticker Pack mapu i učitajte naljepnice tako da vučete i ispuštate slike.
Xcode
Xcode Select sticker pack application
Xcode Sticker Bundle
Xcode

5. korak

Zatim učitajte iMessage App Icons.

Mapa je iznad 'Sticker Pack' mape.

Odaberite jednu sliku s seta jela koju želite upotrijebiti za App Icon i konvertirajte je u JPG u Adobe Photoshopu, tako da ima bijelu pozadinu. Promijenite ime App Icon slici: "Lebanese_Food_App_Icon.jpg".

Ukupno imate 12 ikona koje ćete trebati za Xcode, i 1 za iTunes Connect. Kako biste lako generirali app ikone, posjetite MakeAppIcon.

Napravite Upload odabrane ikone jela na web stranicu, unesite svoj Email i to će vam generirati sve razne veličine datoteka app ikona.

Možete ih preuzeti (Download) izravno na svoj email.

makeappicon generator app

Nakon što preuzmete generirane slike, povucite ih i ispustite u Xcode da ih uploadate.

Nakon što ih uploadate na Xcode, to bi trebalo izgledati otprilike ovako.

Xcode upload iMessage app

5. Konfigurirajte i Registrirajte Naljepnice

1. korak

Nakon što ste uploadali naljepnice, morate primijeniti 'Test the Build' (testiranje "Builda") u Xcode-u, kako biste vidjeli jesu li naljepnice u upotrebi dobre. To možete učiniti kroz Xcode Simulator, ili možete pokrenuti na svojem uređaju. Sve što trebate učiniti jest:

  1. U Set the Active Scheme odaberite svoj mobilni uređaj.
  2. Kliknite Run gumb.
Xcode select iphone device

Ako se pokazuje obavijest o grešci, primijenite tražene promjene, eksportirajte i uploadajte ispočetka ispravljene ikone.

Zatim testirajte naljepnice na Xcode Simulatoru pomoću klika na Run ikonu. Izgleda odlično!

test run stickers imessage

Ako trebate prilagoditi veličinu prikaza svojih naljepnica na iMessage, to možete učiniti na desnoj kartici, kao što je prikazano ispod.

"Medium" ili "Small" veličine funkcioniraju vrlo dobro.

Xcode sticker

Nakon što završite, moramo registrirati App ID za naljepnice.

2. korak

Prijavite se na svoj Apple Developer Account račun da registrirate App ID.

  1. Unesite Account > Identifiers > App ID > Odaberite +
  2. Popunite detalje i idite na Register.
apple developer account app

3. korak

Sada konačno možemo napraviti Export & Upload našeg "Builda" na iTunes Connect!

Vratite se na Xcode.

  1. Pod Set the Active Scheme odaberite “Generic iOS device”.
  2. Zatim odaberite 'Stickers.xcstickers' mapu i u gornjem glavnom izborniku kliknite Product > Archive, da arhivirate izgradnju. 

Trebao bi se pojaviti novi dijaloški okvir koji će prikazivati arhivirani "Build". Naljepnicu ćete vidjeti u lijevoj kartici.

Kliknite Validate da vidite jesu li sve naljepnice u redu. Ako ima nekih problema, Xcode će prikazati obavijest crvenom bojom na traci gornjeg izbornika.

Ako sa "Buildom" prođe sve u redu, tada je morate uploadati u iTunes Connect za Review.

Kliknite na Upload to App Store. To će uploadati naljepnice na  iTunes Connect. Nakon što upload završi, trebale bi se pojaviti na vašem iTunes Connect računu. Pričekajte nekoliko minuta da se pojave.

xcode archives sticker pack

4. korak

Vrijeme je da proslijedimo naljepnice na App Store!

U iTunes Connect:

  1. Odaberite My Apps.
  2. Odaberite + > New App i odaberite 'Build' koji smo upravo uploadali.
itunes connect plus add new app
  1. Odaberite iOS platformu.
  2. Name: Lebanese Food.
  3. Odaberite Language i Bundle ID.
  4. Izradite jedinstveni SKU "eg.location.com.bundle_title".
  5. Kliknite Create!
itunes new app

U lijevoj kartici izbornika ispunite App information i Pricing & Availability. Ovdje možete upisati opis aplikacije, jezik, kategorije i cijenu aplikacije. Nećemo ulaziti previše u detalje, sve je prilično jednostavno i jasno, ali trebalo bi izgledati slično ovome:

itunes connect app

5. korak

U Adobe Photoshopu, kreirajte neke "screenshotove" koristeći Xcode Simulator i uploadajte ih na iTunes Connect, da kreirate iMessage pregled slika za "screenshot" prikaze. Ovo bi moglo malo potrajati. Izradite 5 "screenshot" dimenzija: iPhone 5.5 inch display (1242 x 2208 px). Sistem će generirati preostale veličine za vas.

itunes imessage preview images app

Kada završite, kliknite Submit for Review.

I to je to!

Sve što je sada preostalo učiniti jest da nekoliko dana pričekate proces ocjenjivanja (review), do odobrenja.

Dok su vaše naljepnice na ocjenjivanju, kroz TestFlight možete svojim fanovima poslati Test invitations (pozivnice za testiranje), da isprobaju naljepnice besplatno, tijekom vremenskog roka od 60 dana. Ili možete upotrijebiti vrijeme da podesite svoje takse, sporazume, certifikate i bankovne detalje s Appleom.

Prilično je dugotrajno i putem ćete zasigurno naići ćete na neke greške, ali uz malo strpljenja i pomoći, uspjeti ćete.

Čestitam! Naše "Lebanese Food" iMessage Naljepnice su Završene!

Nadam se da ste uživali u ovom tutorialu! Dizajniranje naljepnica je zabavno, naročito ako možete zaraditi na njima!

"Lebanese Food" paket naljepnica možete kupiti na iTunesu.

Nadam se da će vam ovaj tutorial biti od koristi! Voljela bih vidjeti što ćete kreirati! Podijelite s nama dizajn svojih naljepnica.

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.