Transcrições
1. Introdução: Ei, o que foi, todo mundo só aqui. Então eu sou um designer e empreendedor do Reino Unido. E este tem sido um tutorial muito requisitado sobre como criar seus próprios ícones iOS. Desde que eu lancei meu próprio pacote de ícones iOS, eu fiz mais de US $30 mil e eu tive um monte de pedidos de pessoas perguntando como eles podem fazer seus próprios pacotes de
ícones e como eles podem fazer seus próprios ícones em geral. Então este tipo de guia é muito, muito rápido sobre como fazer o seu próprio. Então vamos entrar nisso.
2. Parte 1 em seu ícone: Então vamos começar em Sigma. Se você não tem uma conta figura, por favor inscreva-se. É gratuito para se inscrever e é gratuito para usar. Vamos fazer um novo documento. E então vamos fazer um quadro pressionando f. Basta fazer um quadro, um popa onde podemos fazer nossos ícones. E o que eu gostaria de fazer primeiro é que eu gostaria de trazer uma captura de tela da minha tela inicial, por exemplo, gostaria de trazer isso para dentro. Portanto, esta é, na verdade, o dobro da resolução. Podemos mudar isso indo para a largura, colocando uma barra e, em seguida, colocar para você, e então eu vou metade da largura. E o que fazemos a partir daqui é que você pode ver que esses ícones têm um raio de fronteira. Então vamos copiar o raio da fronteira. Então vamos fazer uma oração retangular pressionando r.
torná-lo em torno do mesmo tamanho que este aqui. Vamos nos certificar de que isso está aqui embaixo. Na moldura. Eles são como, oh, vamos lá. Lá vamos nós. Por isso, queremos ter a certeza. Então vamos ampliar. E está alinhado perfeitamente. E então vamos ajustar a largura para ser perfeito. 9091 não está correto. 90 por 91, isso não vê o meu enlameado. Farei isso por 90, por 90. Então, isso está feito. E então podemos derrubar o raio indo para qualquer outro canto da forma, trazendo isso para baixo e obtendo-o o mais próximo possível do ícone iOS. Acho que está perto o suficiente. Então, agora que fizemos isso, podemos tirar isso do caminho. E podemos começar a fazer o nosso primeiro ícone.
3. Parte 2 Faça seu primeiro ícone: Então meu pacote de ícones era principalmente ícones pretos. Então eu vou fazer ícones pretos aqui também. Então vamos fazer a cor de preenchimento é preto. E vamos começar com algo simples. Então, por exemplo, se eu olhar para os ícones que temos aqui à direita, vamos começar com o aplicativo lembretes que vemos aqui. Então eu vou fazer um pequeno círculo. Tornar esse círculo branco, eu acho. Sim, vamos torná-lo branco. E vamos fazer dez por dez. Lá vamos nós. Então meu objetivo aqui não é que os ícones sejam réplicas exatas do que você vê aqui. Eu quero que esses ícones tenham mentes ou estilo e gosto para eles. Então eu estou indo para um olhar monocromático, como você pode ver aqui. Então é por isso que vamos procurar e podemos até tornar as coisas mais simples. Assim, por exemplo, o aplicativo de lembretes tem três pontos com os anéis em torno deles. Talvez eu nem coloque os anéis. Então vamos copiar e colar. 12345678. Sim, acho que parece legal. E então podemos mover a segunda ou terceira forma até oito. Lá vamos nós. E então vamos ter certeza que está centrado. - Legal. E então vamos colocar em uma fila. Então eu gostaria de colocar em uma linha com um retângulo porque a linha vai ser,
bem, é basicamente um retângulo de qualquer maneira. Vamos fazer com que seja 49. Na verdade, vamos torná-lo um pouco mais curto, a largura dele. Vamos fazer 34 e, em seguida, dois pixels de altura. E então vamos torná-lo branco, vamos enviá-lo com o nosso círculo, 12345678 ano. Acho que funciona. E então podemos fazer o mesmo aqui. Temos o nosso primeiro ícone. Muito simples, muito fácil, muito simples assim. Deixe-me, bem, vamos faturar GUI em lembretes. Então agora que sabemos que o nosso aplicativo Lembretes.
4. Parte 3 Reca o aplicativo de notas: Em seguida, vamos fazer o próximo passo que você vê aqui. Então vamos apenas copiar e colar nosso ícone de lembretes 1234. Então, para mover um ícone dez pixels cada vez que você mantenha pressionada a tecla shift
e, em seguida, pressione a tecla de seta para a esquerda ou para a direita, e ele irá movê-lo ao longo de dez pixels. Vamos avançar para isso, e vamos fazer o aplicativo dos cavaleiros. Então vamos ampliar. Fizemos essa mesa, e então tomaremos essa forma aqui. Coloque-o aqui, e vamos trazê-lo, embora Erlang, bom. Então o WhatsApp tem uma espécie de vir para cima e
, em seguida, alinhado para o topo do bloco de notas e tem duas linhas. Então você está tentando descobrir o que ficaria bem aqui. Talvez não devêssemos realmente torná-lo completamente de largura total. As linhas, quero dizer, então fizemos esta e vamos selecionar a nossa linha. Talvez façamos com que seja de 90 largura agora, vamos diminuí-la em dois. Então vamos diminuir a largura para 70, centralizá-la. E então vamos colocar sim, você sabe o que, eu acho que isso pode funcionar. E então eu vou ver que temos três linhas aqui agora que eu copiei e colado. Podemos mudar a largura entre cada um deles indo para o lado direito aqui e depois mudá-lo para o que achamos apropriado. Acho que 12 parece bom. Eu realmente também quero mudar a largura dos ícones novamente. Então vamos reduzir isso talvez para 60. E então vamos enviar para os ícones. Agora estamos realmente acho que parece muito bom nisso como um aplicativo de notas. Mais uma vez, muito, muito simples. Não precisa ser complicado. Eu acho que isso é o principal. Faça ícones tão simples quanto você possivelmente quiser, especialmente quando você está começando a fazer os ícones porque é muito fácil de superar complicado com ícones e realmente entrar no design, porque eu conheço alguns designers de líquen pode realmente passar horas apenas em um ícone quando você está começando pela primeira vez, eu recomendo que você está começando simples com ícones como estes.
5. Parte 4 Faça um ícone para seu aplicativo favorito: Agora, e se você quiser fazer um ícone do seu aplicativo favorito como o Twitter? Então o que vamos fazer é copiar. Na verdade, precisamos de um nome, nosso ícone também. Então vamos dar um nome a este, notas. E vamos nomear este Twitter. Então o que fazemos é procurar Twitter,
logotipo, SVG, talvez como provavelmente a melhor maneira de fazê-lo. Vamos suportar recurso marrom de epsilon que eu tenho aqui. E então podemos baixar o logotipo do Twitter. Uma vez que você salvar o logotipo do Twitter, você vai querer voltar para a sua queda FISMA, irá remover essas linhas aqui rapidamente área. E então podemos arrastar o arquivo SVG aqui. Uma vez que você tem um arrasto, Dan é bastante grande, definitivamente muito grande para caber no próprio ícone real. E você também pode ver que o Twitter SVG realmente tem duas formas lá e seu espaçamento em torno do ícone real do Twitter. Para que possamos remover essa forma. Podemos pegar o ícone do Twitter aqui e arrastá-lo para o nosso ícone do Twitter aqui. E então podemos mudar o tamanho dele. Oh, eu estou mudando o tamanho de toda a forma. Na verdade, só precisamos mudar o tamanho do vetor. Agora, quando se trata de quão grande o ícone real do Twitter deve ser relativo ao ícone, isso depende totalmente de você. Mas o que eu recomendo é que se você tem formas
como esta, como o ícone do Twitter, e você vai ser mais ícones que estão no meio do próprio ícone, é tentar manter a mesma largura e altura relativamente, então nós sabemos que o nosso ícone é 90 por 90. Vamos mudar a largura deste pequeno ícone para talvez 48, por exemplo. Na verdade, precisamos conectá-los, então precisamos ter certeza de que as proporções são restritas. Você aperta esse botão aqui para fazer isso. Mas sim, vamos mudar isso para 48. E nós podemos centralizá-lo também vai mudar a cor dele. E sim, eu acho que isso parece muito bom como um ícone do Twitter. Agora podemos ver a altura e a largura é diferente. Mas enquanto mantivermos uma altura relativa de 48 e uma largura relativa de 48, qualquer que seja o lado mais longo. Eu acho que essa é uma boa maneira de garantir que todos os seus ícones parecem em proporção e você tem um tipo de olhar mais coeso e consistente entre eles.
6. Parte 5 como criar ícone de mensagens: Por que não fazemos o ícone de mensagens a seguir? Então vamos copiar este. Trazendo IVR. E fazemos as mensagens que recebi. Então, vamos excluir o ícone 2s dentro de lá, vai renomear nosso grupo. Então o que estamos fazendo hoje é inserir um círculo. Então podemos fazer isso subindo aqui, ou podemos apenas pressionar o teclado. Eu tinha um cara. E então vamos fazer um ícone de malhas. Então eu estou indo muito duro aqui. Então eu só estou tentando descobrir mais pernas, certo? E então o que faremos é trazer um vetor. Então nós usamos a ferramenta de caneta aqui que você pode ver p. E então o que vamos fazer é fazer uma forma como essa. Oh, desculpe, você se conectou. Mas nossa forma obviamente só tem uma greve. Na verdade, precisamos dar um preenchimento. Então removemos a greve e vamos dar-lhe um preenchimento. Lá estamos nós. Na verdade, já somos um módulo bonito lá. Então o que fazemos é pegar essas duas formas e transformá-las em uma. Então nós subimos aqui e você pode fazer a seleção do sindicato e eu vou fazer a forma em um. Então podemos mudar a cor dele para y. agora estamos, que é o nosso ícone de malhas feito muito rápido e fácil.
7. Parte 6 Exportação: Para exportar seus ícones, basta
selecionar cada um deles. Como assim. Você vai para mais na exportação. Normalmente gosto de exportá-los em resoluções bastante altas. Então vamos fazer quatro vezes. E então você pode fazer PNGs facilmente funcionou melhor. Você exporta quatro camadas e, em seguida, você simplesmente salvá-los onde quiser. E é tão simples assim. Você pode basicamente passar por cima de
todos os ícones, ícones favoritos de urina e copiá-los. Faça-os apenas usar ferramentas vetoriais e ferramentas de forma para copiá-los tanto quanto você quiser. E você também pode obter logotipos de marca como Facebook, Twitter, Tesla, outros logotipos da internet. Arraste e solte não altere a cor deles, coloque-os no topo do ícone. E é basicamente isso. Claro que sim. Leva tempo e isso é o principal. Demora algumas horas para fazer todos os ícones para todos os seus aplicativos favoritos. Mas com o tempo, você pode fazê-lo e você pode ter qualquer tipo de sorte como. Então, eu espero que vocês tenham gostado deste tutorial e obrigado por assistir.
Oliur, Designer and creator.
