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

Como Criar os Adesivos iMessage no Adobe Illustrator e Ganhar um Dinheiro Extra!

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

Portuguese (Português) translation by Adriana Takagi (you can also view the original English article)

Final product image
What You'll Be Creating

Você pode ter notado que há uma mania pelos adesivos iMessage desde que eles foram introduzidos com o iOS 10. Hoje, você pode criar agora e vender seus próprios adesivos digitais, ao invés de utilizar os emojis pré-instalados.

Os adesivos iMessage são uma maneira legal e divertida de expressar suas ideias e pensamentos porque você pode descolar, posicionar, e colar eles em suas conversas!!

Se você já se perguntou o que vai fazer em um pacote de adesivo para o iOS, neste tutorial, vamos trabalhar a partir de um esboço até um design simples dos adesivos iMessage no Adobe Illustrator usando linhas, formas, e cores. Depois vamos rapidamente transferir para o iTunes Connect e Xcode para lançar seu próprio pacote de adesivo iMessage no App Store.

Se você está procurando por inspiração de emoticon para o seus próprios designs de adesivo, vá para GraphicRiver.

1. Elabore um Conceito e Prepare o Seu Arquivo de Adesivo no Adobe Illustrator

Passo 1

Estou sentindo falta de casa por um tempo. Não importa o quanto eu aproveite as maravilhas da viagem, minha barriga está sempre cheia com o aroma da comida "caseira". Por isso eu decidi basear o meu temo em "Comida Libanesa". Não existe nada absolutamente tão rico e abundante com variedade como a culinária Libanesa.

Então vamos começar esboçando a nossa concepção de comida no papel ou digitalmente.

Eu esbocei 12 "adesivos" de comida da minha mesa Libanesa, e identifique seus nome em Libanês, apenas para referência.

Geralmente é bom ter cerca de 24 designs para um pacote de etiqueta, mas por causa deste tutorial estaremos trabalhando em apenas 12.

Comece a esboçar 12 itens em uma forma de grade de 4 x 3 , como abaixo.

sketch lebaanese food

Depois que você terminar de esboçar, mova o esboço para o Adobe Illustrator.

Passo 2

Inicie o Adobe Illustrator CC.

Abra um Novo Documento: File > New (Command-N) e defina o seu arquivo Custom:

Name: "Lebanese_Food_iMessage_Stickers".

  • Number of Artboards: 12 (respectivo para o número de adesivos, como cada adesivo deve ter sua própria prancheta)

Você tem três escolhas de tamanhos de adesivo para criar.

  • Pequeno: 300 x 300 pixels
  • Médio: 408 x 408 pixels
  • Grande: 618 x 618 pixels

Eu pessoalmente prefiro trabalha em 618 x 618. Então ajuste as Configurações do Novo Documento:

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

Passo 3

Use o atalho Place (Command-Shift-P) para posicionar o esboço na primeira Prancheta. Arraste a imagem para preencher todas as pranchetas, assim os seus esboços preenchem todas as pranchetas criadas.

Command Shift P Place

Em seguida, precisamos criar um camada para a nossa linha de trabalho.

Abra o painel Layers, Window > Layers.  

Clique no sub-menu do painel Layers:

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

Depois de bloquear a camada "Sketch", Crie uma Nova Camada, em cima do 'Sketch', e nomeie-a 'Linework'.

File > Save (Command-S), e salve o seu arquivo do Illustrator.

2. Como Desenhar a Linha de Trabalho

Passo 1

Vamos preparar para desenhar em nossa linha trabalho.

Primeiro, precisamos criar uma "pressão" de pincel de arte Caligráfica. Abra o painel Brushes: Window > Brushes.

Selecione a Ferramenta Ellipse (L), com um Preenchimento preto, sem Traço, e desenhe uma pequena elipse do tamanho do pincel com que você quer desenhar.

create art brushes

Passo 2

Com a elipse selecionada, arraste e solte ela no painel Brushes.

Uma nova caixa de diálogo New Brush vai abrir. Selecione Art Brush, e OK.

create art brush new brush

A caixa de diálogo Art Brush Options vai abrir.

Nota: Se você tem uma caneta de mesa digitalizadora, é perfeita para criar um pincel de arte que reaja à pressão da caneta.

Para criar um pincel para mover com a pressão da caneta, na caixa de diálogo Art Brush Options, selecione:

  • Width: Pressure
  • Brush Scale Options: Stretch to Fit Stroke Length
  • Colorization Method: Tints; este vai nos permitir personalizar as cores dos traços do pincel personalizado mais tarde.
  • Clique em OK.
create art brush

Uma vez que o pincel de arte for criado, Delete a elipse criada.

Agora temos um pincel de arte orientado pela pressão pronto!

Passo 3

Vamos começar desenhando o esboço.

  1. Abra o painel Stroke: Windows > Stroke.
  2. Do painel Brushes, selecione o pincel de arte que acabamos de criar.
  3. Escolha a Ferramenta Paintbrush (B), do painel Tools.
  4. No painel Stroke, selecione o Traço preto de 0.5 pt e sem Preenchimento.

Certifique-se de que seu pincel não está muito suave quando você desenhar, assim ele parece coo se fosse desenhado à mão. Para suavizar o pincel de arte, dê duplo clique na Ferramenta Paintbrush (B), do painel Tools, e a caixa de diálogo Paitbrush Tool Options vai abrir.

Diminua a Fidelity um ou dois níveis.

paint brush tool artbrush fidelity

Passo 4

Vamos começara desenhar com a Ferramenta Paintbrush (B).

Siga o esboço e desenhe na linha de trabalho. Não tem que ser perfeito, como quer dar a ele um simples efeito de rabisco feito à mão.

sketch trace linework

Uma vez que toda a linha de tralho está aplicada, Lock a sua camada "Linework" do painel Layers.

Crie uma Nova Camada, sob "Linework", e nomeie-a "Color", assim podemos aplicar a cor abaixo da linha de trabalho.

adobe illustrator create new layer

Sempre Salve o seu arquivo. File > Save (Command-S).

3. Como Colorir Rapidamente a Arte

Passo 1

Vamos colorir!

Do painel Tools, selecione a Ferramenta Blob Brush (Shift-B). O Blob Brush é similar a um marcados, e é divertido de usar.

Apenas selecione a amostra de Cor de Traço da sua escolha, sem preenchimento, e cor nos ícones de comida.

  • Uma dica rápida: Para gerenciar o tamanho da Ferramenta Blob Brush, segure a tecla do colchete esquerdo ([) para diminuir o tamanho do pincel e o colchete direito (]) para ampliar.
  • Junto com a Ferramenta Blob Brush (Shift-B), use a Ferramenta Eraser (Shift-E), para apagar quaisquer formas de gota que você queira limpar.

A coloração não tem que ser perfeita, como precisamos disso para tem uma sensação de orgânica.

Comece com o hummus.

adobe illustrator tip blob brush tool

Como você vê, você pode alcançar muito com a Ferramenta Blob Brush apenas mudando seu tamanho e suas cores. Além disso é rápida de usar.

Então divirta-se e pinte o resto da obra de arte!

Passo 2

Você precisa arrumar as formas de gota à medida que você colorir, então para Arrumar os objetos, use estes atalhos para aumentar o fluxo de trabalho.

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

Depois de ter organizado tudo, você deve ter um lindo conjunto colorido de ícones.

arrange layers

Passo 3

Agora vamos limpar nossas pranchetas.

  1. Desbloqueie a camada "Linework" do painel Layers.
  2. Delete a camada "Sketch", arrastando ela do painel Layers para o ícone da lixeira nesse painel.
  3. Selecione a Ferramenta Selection (V), e para cada ícone de comida, selecione a respectiva linha de trabalho e a cor.
  4. Agrupe (Command-G) eles juntos. Automaticamente, quando você agrupar as duas camadas, o novo grupo se move para a camada "Linework".
  5. Centralize cada ícone para o centro da prancheta simplesmente mirando nele.
selection tool

6. Dimensione os objetos agrupados para caber dentro das dimensões da prancheta, e mantenha um pequeno espaço ao longo das bordas. Para manter as proporções do objeto, mantenha pressionada a tecla Shift enquanto você arrasta a alça da caixa delimitadora até que o objeto tenha o tamanho desejado.

Quando todos os ícones de comida tiverem sido dimensionados, delete a camada "Color", pois ela está vazia.

selection v tool

File > Save (Command-S).

4. Como Exportar e Criar Nossos Ícones do App

Passo 1

Exporte os arquivos de arte, usando o recurso Export for Screens (File > Export > Export for Screens).

  1. Exporte como PNG.
  2. Clique no ícone Advanced Settings, selecione o local para exportar seus arquivos, e defina Scale para 1px.
  3. Defina Background Color: Transparent.
  4. Exporte para Prancheta.
adobe illustrator export files

Passo 2

Você tem duas opções. Também pode optar por usar um app Marketplace secundário para lançar os adesivos, como LINE Creators Market, ou desenvolva-a você mesmo usando o Apple Developers Account.

Para este tutorial eu vou brevemente guiar você através da abertura da Apple Developers Account, que custa $100 por ano. O processo de aplicação é bastante direta, e a aceitação é rápida. No entanto, depois você precisa fazer o login no iTunes Connect e configurar o material administrativo  como o Tax and Banking (Imposto e Banco), se você está planejando vender seus adesivos (Isto não é necessário para pacotes de adesivos gratuitos).

Para obter mais detalhes, acesse o Guia do Desenvolvedor do iTunes Connect e reserve um tempo para se familiarizar com ele.

Passo 3

Para gerar os nossos adesivos, precisamos usar o Xcode.

Baixe a última versão do Xcode 8 direto do Mac App Store e Instale.

Passo 4

Carregar os adesivos para o Xcode é fácil; apenas siga os passos:

Abra o Xcode.

Certifique-se de que você e está logado no Xcode com o seu Apple ID.

Preference > Account > Select + > Sign in.

  1. Crie um Novo Projeto Xcode.
  2. Selecione Sticker Pack Application.
  3. Clique Next.
  4. Dê ao pacote de adesivo um Product Name para identificá-lo: 'Comida Libanesa'.
  5. Depois preencha o Team, Organization Name, e Identifier (com.yourcompany.ProductName), de acordo com os seus detalhes.
  6. Clique Next
  7. Selecione a pasta Stickers.xcstickers > Sticker Pack, e carregue os adesivos, arrastando e soltando as imagens.
Xcode
Xcode Select sticker pack application
Xcode Sticker Bundle
Xcode

Passo 5

Em seguida carregue o iMessage App Icons.

A pasta está sobre a pasta 'Sticker Pack'.

Escolha uma imagem do conjunto de comida que você quer usar para o App Icon, e converta-o em um JPG no Adobe Photoshop, assim ele tem um fundo branco. Renomeie a imagem App Icon: "Lebanese_Food_App_Icon.jpg".

Há 12 imagens de ícones no total que você vai precisar para o Xcode e 1 para o iTunes Connect. Para gerar os ícones do app facilmente, visite MakeAppIcon.

Upload o ícone da comida selecionada no website, insira seu Email, e isto vai gerar todos os diversos tamanhos de arquivo do ícone do aplicativo para você.

Você pode Baixar eles direto do seu e-mail.

makeappicon generator app

Depois que você tiver baixado as imagens geradas, Upload no Xcode arrastando e soltando.

Deve ser algo assim quando você fizer o upload para o Xcode.

Xcode upload iMessage app

5. Configure e Registre os Adesivos

Passo 1

Quando você tiver carregado os adesivos, você preciso 'Test the Build' do Xcode, para ver se os adesivos em ação estão bons. Você pode fazer isto através do Xcode Simulator, ou você pode executar isto no seu próprio dispositivo. Tudo o que você fazer é:

  1. Selecione o seu dispositivo móvel, sob Set the Active Scheme.
  2. Clique no botão Run.
Xcode select iphone device

Se uma notificação de erro estiver sendo exibida, faça as alterações solicitadas, exporte e faça o upload dos ícones corrigidos novamente.

Depois teste os adesivos no Xcode Simulator clicando no ícone Run. Parece fabuloso!

test run stickers imessage

Se você precisar ajustar o tamanho de exibição dos seus adesivos no iMessage, você pode fazê-lo no painel direito, como visto abaixo.

Os tamanhos "Medium" ou "Small" funcionam bem.

Xcode sticker

Quando estiver pronto, precisamos registrar um App ID para os adesivos.

Passo 2

Entre em seu Apple Developer Account para registrar um App ID.

  1. Entre Account > Identifiers > App ID > Selecione +
  2. Preencha os detalhes e Register.
apple developer account app

Passo 3

Agora podemos finalmente Exportar & Carregar a nossa "build" para o iTunes Connect!

Volte para o Xcode

  1. Selecione "Generic iOS device" sob Set the Active Scheme.
  2. Depois selecione a pasta 'Stickers.xcstickers', e do menu principal superior clique em Product > Archive, para Arquivar a criação.

Deve aparecer uma nova janela que mostrará a "Build" arquivada. Você vai ver os adesivos no painel esquerdo.

Clique Validate para ver se todos os adesivos estão bons para enviar. Se há problemas, o Xcode vai exibir uma notificação em vermelho no topo da barra do menu.

Se tudo ir bem com a "Build", depois você precisa fazer o upload dele para o iTunes Connect para Review.

Clique em Upload to App Store. Isto vai carregar os adesivos para o iTunes Connect. Depois que o upload estiver terminado, deve aparecer em sua conta do iTunes Connect. Dê a ele alguns minutos.

xcode archives sticker pack

Passo 4

Hora de enviar os adesivos para o App Store!

No iTunes Connect:

  1. Selecione My Apps.
  2. Selecione + > New App, e selecione o 'Build' que nós apenas carregamos para envio.
itunes connect plus add new app
  1. Selecione plataforma iOS.
  2. Name: Comida Libanesa.
  3. Selecione Language e Bundle ID.
  4. Crie um único SKU "eg.location.com.bundle_title".
  5. Create!
itunes new app

No painel do menu esquerdo, preencha  o App information e Pricing & Availability. Aqui você pode escrever a descrição do app, linguagem, categorias, e preço do app. Nós não vamos estabelecer todos os detalhes, como isto é bastante simples, mas deve ser semelhante a isto:

itunes connect app

Passo 5

No Adobe Photoshop, crie algumas capturas de tela, usando o Xcode Simulator, e faça o upload deles para o iTunes Connect, para criar imagens de visualização do iMessage para as imagens da tela de exibição. Isto vai levar algum tempo. Crie 5 dimensões de capturas de tela: iPhone tela de 5.5 polegadas (1242 x 2208 px). O sistema vai gerar o restante dos tamanhos para você.

itunes imessage preview images app

Depois de feito, clique em Submit for Review.

E é isso!

Agora tudo o que você tem a fazer é esperar pelo processo de revisão por alguns dias, para ser aprovado.

Enquanto seus adesivos estão em revisão, você pode enviar Convites de Teste para seus fãs através do TestFlight, para testar os adesivos gratuitamente por 60 dias. Ou você pode usar o tempo para configurar seus impostos, contratos, certificados e detalhes bancários com a Apple.

É um pouco demorado, e você vai enfrentar alguns erros ao longo do caminho, mas com um pouco de paciência e ajuda, você vai chegar lá.

Parabéns! Nossos Adesivos iMessage de "Comida Libanesa" Estão Prontos!

Uau, eu espero que você tenha aproveitado este tutorial! Projetar adesivos é divertido, especialmente se você pode ganhar algum dinheiro com isso!

Compre o pacote de adesivo 'Lebanesy Food' do iTunes.

Espero que você tenha achado este tutorial útil! Eu adoraria ver o que você criou! Compartilhe seus designs de adesivos conosco.

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.