Projetando iOS Tab e barras de navegação no Photoshop

Quando você está criando a próxima grande iOS app, é importante para garantir que a interface é projetada com usabilidade e função em mente ao mesmo tempo que ao mesmo tempo está ótimo e cumprir o propósito. Este artigo tem como objetivo chegar até você e em funcionamento com a concepção de uma parte fundamental de muitos iOS apps, o guia e barra de navegação no Photoshop.

Guia de Configuração

Em primeiro lugar, é preciso se configurar com o Photoshop, para fazer isso, vamos criar nossa tela, geralmente ao projetar uma interface de iOS, um teria para a tela retina e então redimensionar conformidade. Criar um novo documento, dar-lhe um nome relevante e fazer o 640px largura e 960px heigh e mudar a resolução para 326 pixels por polegada e pressione OK e salvar.

Criação de nosso novo Photoshop documento.

Agora temos nossa tela tudo pronto, vamos adicionar o esqueleto básico do nosso aplicativo. Isso inclui a navegação básica guia e barra de status.

Primeiro, a barra de status. Selecione a ferramenta Retângulo (U) e crie um retângulo de qualquer tamanho em sua tela e selecione a ferramenta Transformação (Command / Control + T) e modificar as dimensões da forma, utilizando os valores dentro da barra de opções no topo. Alterar a altura para 40px e largura para 640px e mova o retângulo inteiro para topo da interface.
Para este tutorial, eu mudei a cor para # c9c4c4.
Em seguida, crie outro retângulo da mesma forma, mas desta vez fazer a 88 pixels de altura e 640px de largura e esta posição logo abaixo da barra de status.
Eu mudei a cor para # 34a2ca.
Finalmente, vamos adicionar uma barra de abas. Crie um outro retângulo com a largura de 640px e fazer a 98px altura e coloque este na parte inferior da interface.

O esqueleto básico de nosso aplicativo que nós estaremos acrescentando estilo eficaz.

Não temos, de ter criado o esqueleto de uma aplicação baseada em abas básica.
Agora vamos adicionar um pouco de estilo para o nosso navegação e barra de guia e torná-los aptos para o efeito.

Adicionando Estilo

Vamos começar com a barra de navegação.
Clique duas vezes na camada que contém o retângulo barra de navegação e da Camada de diálogo Estilos deve aparecer. Selecione Gradient Overlay na barra lateral e mudar a opacidade para 25%, a escala para 85%, o ângulo de 90 graus e certifique-se o gradiente selecionado é aquele que desaparece de preto para branco.

Encorajo-vos a brincar com esses valores até encontrar algo que você está completamente satisfeito com.

Verifique Drop Shadow na barra lateral estilos de camada, certifique-se a opacidade é 100%, a distância ea propagação são definidos para 0 eo tamanho é em torno de 8 e também garantir que a cor da sombra é o preto.

Agora, a beleza do design dentro do Photoshop é que é fácil de transferir esses estilos para a nossa barra de abas. Direito do mouse na camada barra de navegação e selecione Copy Layer Style e depois o botão direito do mouse na camada barra de abas e clique em Paste Layer Style.

Agora, selecione a ferramenta Retângulo (U) de novo e criar um retângulo que se estende por toda a tela e organizar esta camada por isso é na parte inferior. Eu escolhi para preencher o retângulo com # 31657b e acrescentou um sutil gradiente estilo de camada de sobreposição em escala de 60% e 20% de opacidade.

O que uso é uma barra de abas, sem abas? Em seguida vamos adicionar alguns guias.
Para fazer isso, vamos dividir 640 pela quantidade de guias que queremos. Para este exemplo eu vou fazer o que equivale a 4 160.
Crie um retângulo usando a ferramenta Retângulo e alterar a altura para 98px e largura para 160px e depois dentro da paleta de camada, altere o preenchimento para 0 e abrir estilos de camada e adicionar uma sombra bastante sutil interior. Mina tem uma opacidade de 45% e um tamanho de 27px; distância e estrangulamento são definidos como 0.
Duplicar esta camada quatro vezes e alinhá-los lado a lado na barra de abas. Este será o fundo da camada seleccionada.
Você pode alternar a visibilidade do fundo da camada - Eu mantive o primeiro visível.

O esqueleto básico do nosso aplicativo com algumas Layer Style inteligente aplicado.

Agora, vamos adicionar alguns ícones para as barras da guia.
Em vez de projetar estes a partir do zero, ir para http://app-bits.com/free-icons.html e baixar esses.
Nós vamos adicionar o nosso próprio toque a esses ícones. Uma vez terminado o download, selecione quatro dos ícones da retina PNG e arrastá-los para a tela e posição de cada um no centro de cada retângulo que criamos anteriormente.

Uma vez que você posicionou-los, dê um duplo clique no ícone da camada de primeira para abrir o diálogo Estilos de camada e adicionar uma sobreposição do ícone. Eu escolhi # 040e47 e acrescentou uma sombra preta na opacidade de 55% e um tamanho de 8px.
Agora, adicione os outros três ícones e coloque em conformidade. Eu usei a sombra mesmo, mas fez a sobreposição de cor branca.

A barra de guia final, com um design personalizado e os nossos próprios ícones.

Finalmente, vamos adicionar o título para a nossa barra de navegação.
Para fazer isso, selecione a ferramenta de texto (T) e clique em algum lugar em sua tela e digite um título para o seu guia. Eu usei fonte Couture (http://www.dafont.com/couture.font), juntamente com uma apresentação de gota negra na opacidade de 80%, um tamanho de 8 e o tamanho da fonte é de 48px.

Em seguida, selecione a ferramenta Move (V) e por isso é reposicionar no centro da barra.

A barra de navegação final, de novo, com um design personalizado e nossa própria fonte personalizada.

Não temos que - de ter criado a sua navegação personalizada e barra de abas, bem como adicionados guias personalizadas. Como você pode ver, acrescentando sobreposições sutil gradiente de elementos de interface do iOS pode ter um efeito dramático ainda refrescante.

O objetivo deste tutorial foi para guiá-lo através de como criar uma navegação iOS e guia de interface

O resultado final: uma barra de guia projetado junto com uma barra de navegação - agora tudo o que precisa é um conteúdo!