criar um Hi-Tech altamente detalhadas Power Button - Basix
Tutorial Detalhes
Baixar arquivos de origem
Get a Premium MembershipFinal Product Que você estará criando
Passo 1
Etapa 2
Passo 3
Passo 4
Passo 5
Passo 6
Passo 7
Passo 8
Passo 9
Etapa 10
Etapa 11
Etapa 12
Etapa 13
Etapa 14
Etapa 15
Etapa 16
Etapa 17
Etapa 18
Etapa 19
Etapa 20
Etapa 21
Etapa 22
Etapa 23
Etapa 24
Etapa 25
Etapa 26
Etapa 27
Etapa 28
Etapa 29
Etapa 30
Etapa 31
Etapa 32
Etapa 33
Etapa 34
Etapa 35
Etapa 36
Etapa 37
Etapa 38
Etapa 39
Etapa 40
Etapa 41
Etapa 42
Etapa 43
Etapa 44
Etapa 45
Etapa 46
Etapa 47
Etapa 48
Etapa 49
Etapa 50
Etapa 51
Etapa 52
Etapa 53
Etapa 54
Etapa 55
Etapa 56
Etapa 57
Etapa 58
Etapa 59
Etapa 60
Etapa 61
Etapa 62
Etapa 63
Etapa 64
Etapa 65
Etapa 66
Etapa 67
Etapa 68
Etapa 69
Etapa 70
Etapa 71
Conclusão
Com este tutorial vamos criar um botão estilo oi-tech, que podem ser utilizados em páginas de abertura, aplicações ou apresentações de Powerpoint. Iremos usar o Illustrator para criar vetores complexos e Photoshop para desenvolver os efeitos realistas.
Usando Illustrator criamos um retângulo com o tamanho indicado. Com a ferramenta Rectangle clicamos na área de trabalho e será exibida uma janela que nos permitirá determinar o tamanho exato para o objeto. Eu recomendo para definir as preferências do Illustrator usando pixels como unidade de medida.
Nós colocamos um guia de referência para o alinhamento horizontal. Usando a ferramenta Caneta Plus (para adicionar pontos de ancoragem para um vetor existente), acrescentamos um ponto de ancoragem extra na parte superior do retângulo.
Agora vamos selecionar este novo ponto de ancoragem e levá-la superior à linha e nós separamos o ponto mais baixo da escora do outro para obter um objeto com esta forma de aproximação.
Com o ponto de ancoragem alças que usamos o ponto superior como um eixo de uma curva suave.
Agora temos que conseguir mais dois objetos que irão integrar um objeto de três pontos. Nós rodar este vetor usando sua parte inferior central, como eixo de rotação. Para começar vamos selecionar a ferramenta Rotação e clique na parte inferior. Então vamos ver a mudança do cursor em uma pequena seta preta.
Pressionando a tecla Alt (que é usado para duplicar, você verá a seta preta com uma seta branca), podemos arrastar o objeto. Nós usamos a janela Informações para girar o objeto repetido uma certa quantidade de graus. Considerando que este é um objeto de três pontos, temos que dividir 360 ° para este número (3), assim que nosso vetor repetido deve girar 120 °. Arrastá-lo até que você veja esse número aproximado na janela Info.
Pressionando Ctrl + D (Windows), nós automaticamente duplicar o que temos feito. Portanto, este vetor será repetido novamente em 120 °.
Unimo-nos esses objetos em um. Na janela Pathfinder unimos os vetores: clique na opção Unite e clique no botão Expandir para converter o grupo em um objeto sólido.
Agora vamos arredondar os cantos deste objeto. Ir para o efeito> Stylize> Round Corners.
Definir um raio de 10 pixels e visualizar o resultado, marcando a caixa de opção Preview. O Raio depende das curvas de amplitude de ter desenhado no objeto principal. Com a opção de visualização que você vai perceber se o raio suaviza corretamente os cantos: se a quantidade de pixels é excessivo, o objeto ficará distorcido e não suavemente arredondados.
Agora vamos separar a aparência (o efeito criado) do vetor original. Go to Object> Expand Aparência e obter o vetor final.
Este é o resultado do nosso trabalho com vetores no Illustrator. É um objeto complexo de ser feito manualmente e é por isso que usamos algumas técnicas para obter um vector simétrico e ergonômico.
Como o nosso botão terá uma inserção interior de algum tipo de objeto montado na parte frontal, vamos repetir os passos anteriores, mas desta vez com um objeto muito menor e mais curto.
Seguindo exatamente os mesmos passos da Etapa 1 para a etapa 12, criamos esse novo objeto. O resto dos vetores podem ser criadas manualmente ou de forma automática, sem complexidade tanto.
Criamos apenas uma metade de um novo objeto e, em seguida, refletimos para torná-lo simétrico. Por favor, siga cuidadosamente os passos que você vê neste gráfico.
Usando a ferramenta Reflect que duplicar o objeto mantendo as teclas Shift + Alt pressionada.
Agora vamos unir as duas metades usando a ferramenta Pathfinder. Você pode apagar os pontos de ancoragem restante desta união com a ferramenta Pen Minus.
Usamos o método de duplicação mesmo descrito anteriormente, girando o objeto de 120 ° para obter objetos também 3 idênticos e uniformemente distribuída.
Finalmente vamos criar um círculo simples, um vetor que será usado como diodos emissores de luz que se acende o botão em seu estado hover. Vamos finalizar a edição no Photoshop, para adicionar camadas de máscara em forma de técnicas.
Agora vamos selecionar todos os vetores e pressionando Ctrl + C (Windows) que copiá-los para a área de transferência do sistema.
Fechamos Illustrator e Photoshop podemos abrir. Nós criamos um PSD. De 1024 × 768 pixels e esta configuração inicial.
Nós pintamos a camada inicial de preto. Em seguida, aplicar um estilo de camada para criar um gradiente de fundo.
Usando cores cinza escuro e preto, criamos um gradiente radial e levá-la à sua escala máxima (% 130-150). Lembre-se que nesta janela Layer Style você pode arrastar o gradiente de ter o seu centro para o local na tela que você desejar.
Agora vamos colar os vetores como Shape Layers. Ctrl + V ou Editar> Colar.
Temos a vetores em um Shape Layer e devemos separá-las em camadas diferentes. Vamos duplicar as camadas tanto quanto as peças temos -4, neste caso, e eliminar os objetos desnecessários em cada um deles deixando a forma em que estamos interessados
A ordem das camadas é o que você vê na imagem e não se esqueça de nomear todas as camadas para organizar melhor o seu trabalho. Algumas camadas será acrescentado a estes os que serão criados totalmente no Photoshop. Nós vamos adicionar estilos camadas de nosso botão principal.
Fazer um clique duplo sobre a camada na janela principal botão, abrimos a janela de edição desta camada estilos. Em "Blending Options: Default" Nós tomamos a opacidade desta camada de zero a fim de ver apenas efeitos nossa camada. Começamos pela adição de um gradiente circular com as cores de fundo mesmo # 333333 (cinza escuro) e # 000000 (preto). Certifique-se este gradiente é macio do centro para a borda, aumentando seu tamanho até 120%.
Com uma sombra interna e unclicking a opção Use Global Light (que sempre usará a 90 °) que inverter essa sombra, arrastando o editor do ângulo da sombra de -90 °. Isto nos ajudará a reforçar as sombras área inferior. .
Concluímos a primeira parte do processo de edição botão. Temos agora pronta a parte frontal do mesmo que tem uma superfície opaca, que mais tarde irá acrescentar brilho e pseudo 3D extrusões.
Agora vamos criar um curso cromado ao redor do botão. Nós adicionamos um curso de 3 pixel com o tipo de gradiente de preenchimento. Nós adicionamos mais alguns detalhes a esse gradiente dentro do curso.Reproduzimos uma superfície de metal cromado reflexivo onde usamos o recurso de refletir o horizonte eo céu de um palco ao ar livre.
Nós aplicamos o estilo refletido ao gradiente para ampliar a quantidade de reflexões cromado. Ao transformar o ângulo de inclinação que damos as áreas mais claras onde queremos. Neste caso, o brilho máximo deve ser visto na zona superior do curso.
Agora vamos fazer a superfície cromada mais complexa, adicionando mais luzes e sombras detalhes para o metal. Com Bevel & Emboss eo contorno Gloss que você vê nesta imagem que acrescentar mais detalhes pouco à superfície.
Com Inner Glow nós adicionamos uma borda interna chanfrada para o botão como se fosse 3D, tentando fazer mais nítida a fusão com o fundo do objeto.
Agora precisamos de uma seleção para pintar alguns detalhes manualmente sobre o botão. O primeiro passo é usar a camada de forma do botão e obter uma seleção que será usado como uma máscara para ser pintada. Ir para a janela Paths e escolha a camada de botão para criar uma seleção com a mesma forma.
Agora temos contrato o tamanho dessa seleção indo ao menu Select> Modify> Contract. Reduzimos 10 pixels a seleção de seu tamanho original.
Agora vamos suavizar a seleção. Go to Select> Modify> Feather ou Alt + Ctrl + D (Windows). Nós aplicamos penas 1 pixel e pressione OK.
Escondemos a seleção usando Ctrl + H para visualizar melhor o que vamos fazer. Com a ferramenta Pincel, usando um pincel de 35 pixels e um fluxo de 10%, pintamos dentro de uma nova camada de luz algumas reflexões sobre o botão, usando a cor branca. Como a luz de nossa cena vem de cima, vamos aplicar mais brilho à parte superior do botão e vamos melhorar com pouca luz manchas algumas áreas escuras na parte inferior do objeto.
Ainda segurando a nossa selecção (o que irá tornar-se visível novamente com Ctrl + H) que reduzir alguns pixels para apagar um pouco do trabalho que temos feito com o pincel e conseguir um efeito mais sofisticado. Desta vez temos contrato de 3 pixels a seleção.
Nós escondemos essa seleção novamente usando Ctrl + H e pressionando a tecla Delete que apagar algumas partes dos nossos traços pincel anterior. Isso nos permitiu pintar manualmente e, em seguida, polonês nosso trabalho de criação de uma área de borda chanfrada que reforça o aspecto 3D do botão e dar uma textura de plástico para a sua superfície.
Nós terminamos a estrutura botão. Agora temos de criar uma inserção em seu centro. O primeiro passo é trazer a forma de opacidade da camada para zero (0%).
Vamos criar um novo Inner Shadow no ângulo invertido apenas como nós fizemos antes do botão principal.Certifique-se adicionar os valores que você vê nesta imagem.
Agora, um curso pouco irá representar um chanfro entre os dois objetos.
O passo seguinte é um Drop Shadow usado como uma superfície iluminada por o Blend Mode da tela e na cor branca. O tamanho dessa luz deve ser de 2 pixels para torná-lo muito forte, como se fosse uma borda chanfrada que recebe alguma luz de cima.
Finalmente com um Inner Glow podemos recriar a borda chanfrada do botão interior. Isso faz com que o observador interpretar esse objeto como uma pequena faca de dois chanfrados painel que está em malha dentro do botão principal.
Nós somos feitos com o botão principal. Na verdade ele não é um botão colocado sobre um fundo: através de alguns efeitos adicionais, será visto como um encarte da superfície do fundo, que tem um derrame metálico ao redor e que contém um botão dentro do que pode ser pressionado.
Agora vamos criar o ícone do botão Power. Download this free font: http://www.dafont.com/guifx-v2-transports.font. Você será capaz de criar esse objeto usando o "q" chave e este tipo de letra 48 pontos.
Nesta foto você vê como é que pode adicionar uma borda externa chanfrada para o ícone, utilizando-se um curso de 3 pixel da mesma cor que a superfície botão e depois aplicar o efeito Stroke Emboss com esses valores.
The Stroke efeito de relevo como uma opção para criar uma borda chanfrada nos permitirá criar o efeito biselado do ícone no fundo.
Finalmente vamos adicionar uma textura metálica para o ícone utilizando um gradiente de como você pode ver nesta imagem.
Agora vamos criar 3 leds que acende o botão quando colocamos o mouse sobre ele. O primeiro passo é dar a camada de forma a cor # 06B9FB, fazendo duplo clique sobre ele para editar a sua cor.
Usando a camada de forma do botão principal, criamos uma seleção.
Nós ampliamos o tamanho dessa seleção indo ao menu Select> Modify> Expandir.
Nós estabelecemos um 8 pixels expandir e nós pressionamos OK.
Nós inverter esta seleção usando Select> Inverse.
Com esta selecção invertida, criamos uma máscara para obter a forma final eo tamanho dos leds ao redor do botão.
Com um curso com a mesma cor da superfície do botão (uso seletor de cores para obtê-lo), criamos um pequeno chanfro ao redor das luzes. Isto irá permitir-nos dar a idéia de um objeto inserido na superfície de fundo.
Com Chanfro e Entalhe damos uma sombra superior e uma luz de fundo para o nosso curso (como se a luz de cima, teria impacto sobre as bordas chanfradas).
Com uma invertida Inner Shadow e Multiply criamos uma reflexão sobre a área de acrílico superior destes leds.
Pretendemos finalizar a edição desses objetos com uma sombra que nos permitem dar a idéia de que esses detalhes no design botão alterar a superfície de fundo, pressionando-o para baixo e da criação de áreas sombreadas em torno deles.
Isto é como o nosso botão parece até agora, mas ainda existem alguns efeitos em falta.
Nós vamos duplicar a camada dos LEDs anterior e pintar essa nova forma de camada de branco.Começamos a criar o efeito de acender liderado Outer Glow e com esses valores.
Nós adicionamos a iluminação da área próxima à leds usando Sombra na tela do modo de Blend.
O estado de rolagem do botão ele é feito. Agora, usando uma seleção com 20 pixels Feather dentro da nova camada fazemos a fundo para ter uma aparência convexa atrás do botão, como se o fundo iria sair do seu centro de criação de uma esfera 3D suave que vai reagir com a luz acima.
Nós pintar essa seleção em branco, previamente amolecida com uma pena de 20 pixels. Você pode usar a ferramenta Paint ou o atalho de teclado Alt + Backspace que pinta a camada com a cor que você está usando como primeiro plano.
Nós ajustamos a opacidade desta esfera de zero (0%) na janela de edição Layer Styles.
Agora, com um gradiente de 50% de transparência e sobreposição Blend (usando cores branca e preta que são definidas por padrão no editor de gradientes) chegamos a essa sensação esférico no fundo botão.
Agora, estamos a terminar com o botão e todos os seus detalhes. Nós apenas precisamos de criar algumas arestas chanfradas no fundo usando os vetores simétrico criado no Illustrator.
Como sempre, nós tomamos a opacidade para zero.
Com um curso e os valores que nós criamos o baixo-relevo destas chanfros em segundo plano.
Com branco Drop Shadow e Tela Blend, nós criamos o iluminado área dessas bordas chanfradas.
Finalmente vamos esconder uma parte dessas bordas chanfradas com uma máscara de 20 pixels amaciado. A idéia é que estes iriam fundir-se suavemente com o fundo e desaparecer para os cantos.
Foi uma longa viagem, mas os resultados valeram a pena. O toque final é uma lente de pouco brilho sobre a área superior brilhante da borda cromada. Sempre salvar um arquivo. Arquivo PSD com estes recursos que proporcionam um efeito realista e fotográfica para objetos reflexivos. Você pode visualizar a imagem final abaixo ou visualizar uma versão maior aqui.
Categories:
Design