Tutorial: Como projetar uma interface do usuário do IPhone do Chatroom
Neste tutorial, vamos projetar uma interface de usuário do iPhone para um aplicativo móvel baseado em bate-papo e fórum.
O aplicativo envolve vários elementos da interface de toque do dia a dia, como botões, campos de entrada e gestos de toque.
Nós estaremos cobrindo várias ferramentas do Photoshop, estilos de camada e, claro, abordar todas as restrições de design; além de tornar o design pixel-perfeito e bonito o suficiente para ser digno de um lugar na tela do iPhone.
O design foi criado usando o Photoshop CS5.5, mas todas as versões recentes do Photoshop funcionarão maravilhosamente.
Requisitos da tela de aplicativos
Nós vamos criar apenas uma tela neste tutorial. A tela será a tela de bate-papo principal de um aplicativo baseado em bate-papo, muito parecido com uma sala de chat pública, mas em seu telefone. Os requisitos desta tela são:
- Um cabeçalho - esta é a sala de bate-papo em que você está atualmente.
- Um botão voltar / fechar / tópicos - para voltar à tela anterior.
- Um botão de pessoas - mostra quem está atualmente na sala de bate-papo.
- Uma lista de mensagens - as mensagens devem ter avatar e registro de data e hora.
- Uma maneira de visualizar perfis de usuários e mensagens de relatórios.
- Um campo de texto para escrever suas mensagens.
- Um botão de envio para postar suas mensagens.
Planejamento, esboço e wireframing
Como acontece com qualquer projeto de interface de usuário, o planejamento, o esboço e a estruturação de sua interface são essenciais. Muitas vezes, elimina quaisquer ideias tolas (embora possam não parecer tolas na sua cabeça!) Antes de juntar conceitos e maquetes digitais. O que poderia parecer uma solução brilhante para consertar um problema em sua cabeça poderia, em última instância, não funcionar na prática real, e é por isso que wireframing antes de iniciar um projeto é um passo tão importante.
Pegue uma caneta e seu bloco favorito e comece a desenhar.
Como você pode ver na imagem acima, passei apenas alguns minutos reunindo três conceitos diferentes; geralmente esse processo leva dias ou às vezes semanas, mas como estamos apenas projetando uma tela e o propósito do aplicativo é simples, esboçar isso não deve demorar muito! Eles são na maioria muito semelhantes, mas cada um tem suas diferenças únicas, que eu resumirei abaixo.
Esboçar A
Inspirada na interface de usuário do Twitter original do iPhone, essa interface permite que os usuários digitem uma mensagem para ver mais opções, como "Ver Perfil" e "Denunciar Usuário", uma maneira divertida e econômica de permitir mais conteúdo nessa tela. Brinquei com a idéia de ter um botão de configurações na barra de navegação nesta tela, mas decidi seguir minha regra normal de "Menos é mais" - é improvável que o usuário acesse as configurações toda vez que usar o aplicativo para não ser necessário Aqui.
Esboço B
Este conceito é um pouco mais compacto, com os botões “Ver Perfil” e “Denunciar Usuário” como ícones estáticos à direita das mensagens. Brinquei com a ideia de não ter um botão “Enviar” aqui e, em vez disso, uso o botão Enviar no teclado do iOS. Eu decidi contra isso como a maioria dos aplicativos (incluindo aplicativos padrão do iOS, como mensagens) tem o botão de envio de teclado, bem como o botão de envio adicional ao lado do campo de entrada de texto. Eu gosto de manter minhas interfaces consistentes com outras na App Store.
Esboço C
Esboço C é o esboço que decidi seguir em frente - em vez de um botão voltar, temos um botão de fechar. Acho que isso torna mais óbvio que, quando você clicar em fechar, não fará mais parte dessa conversa (ao contrário dos aplicativos de mensagens, onde você volta e pode voltar para ver todas essas mensagens anteriores). O botão people mostra uma lista de usuários atualmente na sala de bate-papo, e eu readoptei a ideia de ter o slide para exibir mais elementos de recursos (como o aplicativo Twitter) para permitir que o usuário visualize o perfil do usuário ou relate-o.
Com isso pronto, é hora de começar a montar algo no Photoshop!
Etapa 1: barra de status e navegação
Antes de prosseguirmos com este passo, precisamos criar nosso documento. O tamanho padrão da tela do iPhone (na resolução Retina) é de 640 pixels de largura e 960 pixels de altura, com resolução de 326px. Eu costumo sempre começar com um fundo branco em meus projetos.
O primeiro passo é colocar na barra de status padrão do iOS. A barra de status é a barra na parte superior do seu iPhone que informa informações importantes, como sinal, operadora, tempo e duração da bateria. Existem três opções aqui: uma barra preta, uma barra preta de baixa transparência ou a barra de prata.
Se você quiser fazer o seu design de aplicativo parecer o verdadeiro negócio, você pode pegar a barra de status do kit PSD Retina iPhone GUI encontrado aqui . Simplesmente baixe e abra o PSD, e arraste a barra que você quer para o seu documento PSD. Posicione-o no topo da sua tela.
A barra de navegação é a próxima na nossa lista de tarefas. A barra de navegação padrão tem 86 px de altura e abrange toda a largura do seu iPhone (640px). Novamente, você pode arrastar esse elemento do kit PSD mencionado anteriormente ou criar manualmente (minha opção preferida, pois não há estilos anexados). Selecione a ferramenta Rectangle Shape e coloque um retângulo de 640 x 86px na sua tela.
Etapa 2: botões da barra de navegação
Referindo-se aos nossos wireframes, temos dois botões em nossa barra de navegação. Selecione a ferramenta Forma de retângulo arredondado (lembre-se sempre de usar ferramentas de formas para formas no design da interface do usuário, o que torna muito mais fácil dimensionar nosso documento para resoluções mais baixas!). Eu usei dimensões 100 x 50px com um raio de canto de 6px.
Coloque essa forma em ambos os lados esquerdo e direito da sua barra de navegação e posicione-os bem.
Etapa 3: seleção de estilo
É hora de começar a escolher nosso estilo de design. Este aplicativo permitirá que as pessoas conversem e conheçam novas pessoas e permita que as pessoas se divirtam fazendo isso. Por essa razão, eu sinto um esquema de cores divertido e peculiar, e a tipografia aqui é importante para ajudar nesse ponto.
Selecione a ferramenta Type e escolha um tipo de letra que corresponda à imagem que você tem em sua cabeça. Eu escolhi o borbulhante Arial Arredondado MT Negrito . Digite o nome do seu tópico (eu escolhi “UI Design”) e alinho-o central na sua barra de navegação.
Continuando com o tema divertido que selecionamos para o aplicativo, é hora de escolher algumas cores. Eu pessoalmente uso Amantes da cor para ajudar a inspirar minhas escolhas de cores quando estou criando. Neste caso em particular eu procurei por “diversão” e em segundos eu fui presenteado com muitas opções diferentes e paletas inspiradoras para usar como base para o meu design.
Acabei escolhendo um chamado Sala de jogos . É importante pensar em quais cores você precisará ao selecionar uma paleta; Acho que escolher algo leve, algo escuro e algo brilhante é sempre um bom ponto de partida. É importante ter um bom contraste no seu design.
Etapa 4: estilo da barra de navegação
Agora vamos voltar para a nossa barra de navegação e dar a cor que ela merece. Selecione a camada da barra de navegação (espero que você tenha mantido suas camadas organizadas!), Clique com o botão direito do mouse e selecione Opções de mesclagem. Esta é a casa das mais poderosas ferramentas do Photoshop quando se trata de criar designs de interface perfeitos para pixels. A partir daqui, você pode adicionar sombras, gradientes, padrões e stokes, com a capacidade de copiar e colar esses estilos em outras camadas.
Primeiro de tudo, vamos adicionar um gradiente ao nosso bar, então clique em Gradient Overlay. Eu selecionei a cor turquesa como a que eu quero usar para minha barra de navegação. É brilhante e tem um efeito poderoso e torna nosso design fácil de lembrar. Aplique um gradiente de ângulo de 90 graus indo da luz (superior) para escuro (inferior).
Agora clique no painel Stroke. Altere o tamanho do seu traçado para 2 em vez do padrão 3. Uma dica é sempre tentar evitar números ímpares no design da interface do usuário, especialmente em dispositivos móveis. Isso só servirá para mais trabalho, tanto para o designer quanto para o desenvolvedor, quando se trata de escalar o trabalho (você não pode usar metade dos 3 pixels, já que meio pixel não existe!).
Altere o tipo de preenchimento de seu traço para gradiente e verifique se o traçado aparecerá na parte externa da forma. Selecione uma cor turquesa escura para o fundo do seu traço e preta para o topo. Como o traço está do lado de fora da nossa barra de navegação, a parte preta do traçado não será exibida na parte superior da barra de status e, portanto, tudo que o usuário poderá ver é o traço na parte inferior.
Selecione o painel Inner Shadow e aplique uma sombra branca de opacidade de 15% em sua barra. Isso aparecerá no topo da sua barra e dará um belo destaque, fazendo com que pareça mais em 3D. Eu dei a minha sombra uma distância de 2px e um tamanho de 3px.
Agora é hora de realmente fazer nossa barra de navegação estourar. Ao usar padrões, podemos adicionar muita profundidade ao nosso design. Estou usando um padrão de grade branco na minha barra de navegação. Se você quiser usar este padrão, você pode baixar uma coleção deles gratuitamente em Pixels Premium .
Etapa 5: sombreamento de tipografia
Para dar alguma profundidade à nossa tipografia, abra o painel de opções de mesclagem e aplique um sombreamento. Altere o ângulo para -90 (certifique-se de que Usar estilo global não esteja marcado aqui, caso contrário, todas as sombras do desenho serão alteradas para -90) e use a mesma cor usada na parte inferior do traçado das barras de navegação. Dê à sombra uma distância de 2px e reduza o tamanho para 0px. Isto dá um corte limpo acima do seu texto instantaneamente, tornando-o mais interessante.
Etapa 6: estilo do botão da barra de navegação
Agora vamos aplicar alguns estilos incríveis aos nossos botões de barras de navegação. Queremos que esses botões se encaixem bem com a nossa barra de navegação, mas ao mesmo tempo eles precisam se destacar bem o suficiente para que o usuário reconheça instantaneamente que eles são botões. Para fazer isso, vamos usar mais estilos de camada para dar a eles um efeito 3D de arregalar os olhos.
Abra o painel de opções de mesclagem e clique em sobreposição de gradiente. Dê ao seu botão um gradiente de luz (topo) a escuro (fundo) usando cores da barra de navegação. A cor clara foi selecionada a partir do destaque da barra de navegação, e a cor escura foi selecionada no traço inferior da barra de navegação.
Selecione o painel de traçado e altere o tamanho do seu traçado para 2px, com uma posição externa. Altere o tipo de preenchimento para gradiente e o ângulo para 90 graus. Altere as cores do gradiente de leve (superior) para escuro (inferior), baseando as cores nas cores já usadas para a barra de navegação e botões. Imediatamente você pode ver que este traço dá ao seu botão uma aparência 3D, como se estivesse saindo da barra de navegação em vez de ficar em cima dele.
Para enfeitar um pouco mais o botão e torná-lo ainda mais visualmente atraente, vamos adicionar um brilho interno ao botão. Clique no painel de brilho interno e mude o modo de mesclagem para a tela. Diminua a opacidade para 20% e certifique-se de que o ruído está definido para 0%. Altere o brilho amarelo padrão para branco e verifique se o tamanho ainda está definido para o padrão 5px. Isso deve dar ao seu botão um brilho interno agradável, fazendo com que o botão pareça realmente palpável!
Agora vamos adicionar uma sombra interna para tornar nosso botão um pouco mais realista. Altere a opacidade para 15% e selecione preto como sua cor. Diminua a distância para 2px e o tamanho para 4px. Agora mude o ângulo para -90 graus (certificando-se de que a opção Usar luz global não esteja selecionada). Isso dá ao fundo do seu botão uma leve sombra, escondendo um pouco do brilho interno que acabamos de aplicar. Na vida real, esta área seria sombreada, por isso era importante esconder o brilho interior aqui.
Para finalizar o estilo do nosso botão, vamos adicionar uma sombra. Selecione o painel de sombra e altere a cor para branco com uma opacidade de 25%. Esta sombra vai agir como um destaque abaixo do nosso traço, então mude a distância para 4px (2px para cobrir a área do traçado, e 2px que será visto abaixo do traço).
Etapa 7: rótulos de botão
Um botão sem o seu rótulo é inútil, então agora vamos gastar um pouco de tempo para terminar nossos botões. Primeiro de tudo, clique com o botão direito no seu botão de estilo e selecione a opção Copy Layer Style. Agora clique com o botão direito no seu botão sem estilo e selecione a opção Paste Layer Style.
Vamos continuar trabalhando no botão direito primeiro. Este botão será identificado como "Pessoas" e queremos usar um ícone de duas ou mais pessoas. Por causa deste tutorial, vou usar ícones feitos pelo estúdio de criação Yummygum; você pode encontrar o pacote que eu usei no IconSweets.com - Estarei usando ícones deste pacote durante o tutorial.
Usando a mesma fonte usada para o título da barra de navegação, digite os rótulos dos seus botões. Redimensione e posicione-o no seu botão e, em seguida, coloque o seu ícone de escolha (ou faça o seu próprio) em seu documento. Posicione estas duas camadas igualmente sobre o seu botão. Eu espaçei minhas camadas para fora assim há 15px de cada lado deles e o botão e 10px entre o ícone e o texto. Cole o estilo da camada do texto do tópico da barra de navegação no ícone e no rótulo do botão. Se você precisar redimensionar o comprimento do botão, use a Direct Selection Tool para selecionar os 4 pontos de ancoragem à direita e arraste. Você pode manter a tecla Shift pressionada para manter esta modificação correta.
Repita este processo com o botão no lado esquerdo da barra de navegação, desta vez usando um ícone de cruz e a palavra "Fechar". Para adicionar um pouco mais de estilo aos meus botões, reduzi a opacidade das duas formas de fundo para 95%, isso permite que um pouco do padrão de grade abaixo dela brilhe.
Etapa 8: barra de campo de texto
Agora é hora de prestar atenção ao resto da nossa tela. Pegue a ferramenta Rectangle Shape Tool e, usando as mesmas dimensões de nossa barra de navegação (640 x 86px), coloque uma forma na sua tela. Posicione-o na parte inferior da tela.
Etapa 9: o plano de fundo
Agora vamos trabalhar no pano de fundo do nosso design. Abra o painel de opções de mesclagem para sua camada de plano de fundo e escolha um padrão para preenchê-lo. Eu usei um padrão escuro com linhas verticais passando por ele de Padrões sutis - você pode baixar o conjunto completo aqui que eu recomendo.
Se você quiser adicionar algumas de suas próprias cores ao padrão escolhido, poderá fazê-lo usando o estilo de sobreposição de cores. Eu apliquei um marrom (da minha paleta de cores que eu escolhi anteriormente) em 35%. Essa opacidade é baixa o suficiente para que sua textura / padrão apareça ainda alta o suficiente para tingir a cor ou o plano de fundo.
Agora nós temos um fundo escuro, você verá o ponto onde a nossa barra de navegação atende a nossa imagem de fundo não parece tão bom. Você pode corrigir isso aplicando um estilo de sombra à sua barra de navegação, o que fará com que pareça estar acima do plano de fundo.
Reabra o painel de opções de mesclagem para sua barra de navegação e selecione o painel de sombreamento. Certifique-se de que o preto esteja selecionado e altere a opacidade para 25%. Aumente a distância para 6 px e o tamanho para 10 px e clique em OK. Pode ser necessário experimentar essas opções, pois os resultados variam dependendo da cor e do tipo de textura / padrão que você selecionou para o plano de fundo.
Etapa 10: mensagens
Agora que concluímos o plano de fundo e a barra de navegação superior, vamos nos concentrar em exibir o conteúdo principal do aplicativo. Selecione a ferramenta Forma do retângulo e coloque um retângulo na sua tela. A largura que eu usei foi de 600px, permitindo 20px para mostrar em cada lado da forma. Eu usei uma versão muito mais clara da cor amarela / creme da paleta de cores que eu escolhi anteriormente.
Selecione a ferramenta Forma de retângulo arredondado e altere as dimensões para 80 x 80px e o raio para 6px. Coloque a forma (que deve ser usada como a forma do nosso avatar) na sua tela e posicione-a corretamente. Para manter meu design consistente, permiti que 20px ficasse entre as bordas da forma de fundo da minha mensagem e a forma do meu avatar.
Usando a ferramenta de texto, escreva seu nome e uma mensagem; Eu usei o Arial Rounded MT Bold para meu nome e o Arial normal para o texto da minha mensagem - formate seu texto para que ele se encaixe perfeitamente na sua caixa de fundo da mensagem.
Agora vamos adicionar algum estilo à nossa mensagem usando apenas cor; Eu mudei a cor do meu nome para um turquesa escuro (muito perto do preto) e um turquesa desbotado inspirado na minha barra de navegação.
Em seguida, inseri uma foto minha acessando Arquivo> Inserir. Uma vez inserida, redimensionei a imagem e coloquei-a acima da minha caixa de avatar preta que criamos anteriormente. Para salvar o corte da imagem, e também para dar a você a opção de mover ou redimensionar seu avatar em uma data posterior, clique com o botão direito e selecione a opção Create Clipping Mask. Isso irá vincular sua imagem de avatar à caixa preta de seu avatar e mostrará apenas o que está acima da caixa preta. Você encontrará usando a ferramenta Move que ainda pode mover e redimensionar essa imagem.
Usando outro ícone IconSweets, criei um timestamp bem legal. Eu tive que reduzir o tamanho do meu ícone - você pode fazer isso indo em Edit> Transform> Free Transform e alterando as dimensões (por pixels ou porcentagem). Eu usei 70% em largura e altura para manter as proporções. Eu adicionei algum texto e voila. Certifique-se de selecionar uma cor que seja fácil de ler, mas não grite por atenção.
Etapa 11: Mensagens Duplicadas
Duplique suas caixas de mensagens abaixo uma da outra, deixando um intervalo de 2px entre cada caixa de plano de fundo. Você pode fazer isso clicando e arrastando suas camadas sobre o ícone Nova Camada, ou alternativamente, pode pressionar Cmd + Shift + Seta para Baixo ao mesmo tempo para duplicar e empurrar as camadas para baixo.
Altere todo o conteúdo das caixas de mensagens, como se fosse uma conversa real. Se você precisar redimensionar suas caixas de plano de fundo, use a Ferramenta de Seleção Direta e redimensione-as usando os pontos de ancoragem. Isso mantém todas as bordas agradáveis e nítidas.
Etapa 12: estilo de mensagem
Com isso feito, agora podemos nos concentrar em dar vida às nossas caixas de mensagens. Abra o painel de opções de mesclagem e selecione o painel de sombreamento. Altere o modo de mesclagem para normal e selecione branco como sua cor. Aumente a opacidade para 80% em vez do padrão 75% e dê à sombra uma distância de 2px. Isso irá esconder a lacuna de 2px que deixamos entre cada um dos fundos da caixa de mensagem.
Copie e cole o estilo de camada acima em todas as camadas de plano de fundo da caixa de mensagem. Você deve acabar com algo como acima.
Passo 13: Adicionando cantos arredondados
Para tornar nosso design mais interessante, e também para adicionar mais profundidade, vamos adicionar cantos arredondados à parte inferior de nossas mensagens e fazer com que pareça que é papel empilhado em mais papel.
Selecione a ferramenta Rounded Rectangle Tool e atribua um raio de 10px. Altere a largura para 600px (ou qualquer largura que você usou para os fundos da caixa de mensagem) e uma altura que não exceda a altura do plano de fundo da caixa de mensagem inferior. Eu usei uma cor brilhante aqui para que seja facilmente visível.
Usando a Direct Selection Tool, selecione o conteúdo da sua camada de forma vetorial (a caixa arredondada que acabamos de desenhar) e vá para Edit> Copy. Clique na camada de forma de vetor do plano de fundo da caixa de mensagem inferior e vá para Editar> Colar. Isso irá colar o conteúdo da camada de forma em sua outra camada de forma. Agora você pode excluir a forma que desenhamos na etapa anterior. Você ainda deve ver a forma visível.
Abra as opções de mesclagem do fundo da caixa de mensagem inferior e aplique um sombreamento. Altere a cor para preto, a opacidade para 25%, a distância para 1 px e o tamanho para 3 px. Isso criará uma boa sombra sutil.
Duplique essa camada e desça 5px. Reposicione a camada de forma que fique abaixo do original. Você deve acabar com algo semelhante ao abaixo. Como você pode ver, esta é uma maneira simples de criar uma aparência de papel sobreposta.
Repita o passo novamente para que você tenha três pedaços de papel em vez de apenas dois. Você pode querer dar ao seu pedaço de papel de fundo uma sombra mais perceptível.
Etapa 14: sombra da barra de navegação
Você provavelmente percebeu que, ao projetar nossas caixas de mensagens, ocultamos a maior parte da sombra que nossa barra de navegação estava projetando em nosso plano de fundo. Para substituir isso, você pode posicionar suas mensagens abaixo da barra de navegação (a opção fácil, mas não realista) ou concluir a etapa a seguir.
Selecione a ferramenta Rectangular Marquee Tool e desenhe uma linha fina na parte superior de suas mensagens, semelhante à anterior. Preencha com preto em uma nova camada.
Vá para Filter> Blur> Gaussian Blur e aplique o desfoque. Agora, isso funcionará como uma sombra - basta cortar qualquer parte do desfoque que esteja sobrepondo as bordas do fundo da caixa de mensagem.
Etapa 15: botões de perfil e relatório
Referindo-nos novamente a nossos wireframes, decidimos permitir que os usuários passassem uma mensagem para a esquerda para revelar mais botões. Nesse caso, esses botões permitem que o usuário exiba o perfil dos pôsteres da mensagem ou informe o pôster da mensagem.
Selecione as camadas que compõem uma de suas mensagens (estou escolhendo a mensagem de Homer Simpsons) e usando a tecla shift e as teclas de seta, empurre sua mensagem 10px de cada vez para a esquerda. Usando a ferramenta de texto, escreva seus rótulos e, em seguida, selecione alguns ícones para corresponder a esses rótulos. Eu escolhi uma pessoa individual para o perfil e um alvo para o relatório (como se você estivesse atirando neles - achei isso muito divertido!).
Para dar mais profundidade a essa área, adicionei uma sombra preta aos ícones e ao texto.
Etapa 16: barra de campo de texto
A barra de campo de texto é um dos elementos mais importantes dessa tela. Os usuários precisam ser capazes de inserir suas mensagens com facilidade e sem confusão (é por isso que eu removi o botão de envio oculto nos conceitos iniciais de esboço).
Para começar, localize sua camada de plano de fundo e copie os estilos de camada. Cole esses estilos de camada na camada da barra de campo de texto que criamos anteriormente. Abra as opções de mesclagem para essa camada e selecione o painel de traçado. Aplique um traçado de 2px na parte externa da sua forma usando preto sólido como sua cor. Como o traço está do lado de fora, e a forma está tocando três bordas da sua tela, apenas o traçado na parte superior da forma será exibido.
Agora selecione a guia de sombra interna e mude o modo de mesclagem para normal, a cor para branco, a opacidade para 10% e a distância para 2px. Verifique se o ângulo está definido para o padrão de luz global (90 graus) e clique em OK. Isso nos dá um bom destaque abaixo do nosso traço preto. Com essas duas linhas simples de 2px aplicadas, nossa barra de campo de texto já parece bem separada do restante do plano de fundo, mesmo que tenha o mesmo plano de fundo!
Selecione a ferramenta Retângulo Arredondado. Dê a sua ferramenta um raio alto, usei 50px; isto lhe dará extremidades muito circulares (circulares). Coloque uma forma na sua barra, usei 460x54px como minhas dimensões. Certifique-se de que o lado esquerdo da forma do campo de texto esteja 20px distante do lado esquerdo da tela para manter o espaçamento entre os designs consistente.
Preencha a forma com uma cor escura (usei um marrom selecionado de um pixel escuro no plano de fundo) e, em seguida, abra o painel de estilos de camada. Aplique uma sombra branca de 2 pixels em seu campo de texto com uma opacidade de 10%.
Clique no painel de sombra interna e aplique uma sombra interna à sua forma de campo de texto. Isso lhe dará muito mais profundidade e parecerá que foi cortado no fundo das barras. Use preto com um modo de mesclagem de multiplicação e uma opacidade de 25%. Eu usei 5px como minha distância e 10px como meu tamanho, embora você possa querer experimentar aqui.
Usando a ferramenta de texto e equipado com Arial Arredondado MT Negrito, digite “Escrever um comentário…” e posicione-o em sua caixa de campo de texto. Abra as opções de mesclagem para sua nova camada de texto e aplique uma sombra preta com uma opacidade de 75%, distância de 2px e tamanho de 3px.
Etapa 17: Botão de campo de texto
Selecione novamente a ferramenta Forma de retângulo arredondado e, usando as mesmas configurações e altura de raio usadas anteriormente, coloque uma forma no plano de fundo da barra de campo de texto. Redimensione o tamanho do botão para que ele fique 10px do campo de texto e 20px da borda direita da tela.
Clique com o botão direito do mouse na nova camada de forma do botão e selecione as opções de mesclagem. Selecione o painel de sobreposição de gradiente e aplique um gradiente de claro (superior) a escuro (inferior). Eu usei a magnífica cor amarela que estava na paleta de cores que selecionei anteriormente.
Para manter nosso design consistente, vou aplicar um toque no botão que faz parecer que está saindo do plano de fundo, como fizemos com os botões na barra de navegação. Dessa vez, usei preto sólido em vez de um traço de gradiente, já que o plano de fundo é muito mais escuro e não é preenchido com um gradiente. Eu usei um traço 2px no interior da minha forma com 100% de opacidade.
Selecione a ferramenta de texto e digite "Enviar" no seu botão. Abra as opções de mesclagem para sua nova camada de texto e aplique uma sombra marrom no texto com uma distância de 1 px e tamanho de 3 px.
E com isso terminado, estamos todos prontos! Adoraríamos ver seus resultados, portanto, sinta-se à vontade para publicá-los na seção de comentários abaixo. Se você quiser ver o design em resolução total, você pode ver que Aqui .