Beautiful Music Streaming Web Design no Photoshop

Mateus Heidenreich em Tutoriais com 20 comentários

Beautiful Music Streaming Website Design in Photoshop

Neste tutorial, você aprenderá a criar uma música bonita e limpa streaming site no Photoshop. Se você tem alguma dúvida sobre este tutorial não se esqueça de perguntar nos comentários. Além disso, lembre-se com todos os tutoriais, o PSD está disponível para download.

Best WordPress Themes

Resultado Final

Clique na imagem para ver o resultado final em escala completa.

Vamos começar

1. A primeira coisa que queremos fazer é criar um novo documento com as dimensões de 1020 × 1180.

2. A partir do topo, queremos começar com o nosso cabeçalho. Usando seu Rectangle Marquee Tool, faça uma seleção semelhante à seguinte e preencha com # 000000.

3. Mantendo-negro seria apenas chato, então o próximo passo é adicionar algumas opções de mistura. Para fazer isso, vá para a sua camada na paleta camadas e com o botão direito e escolha Opções de mesclagem no menu drop-down. Insira o seguinte:

4. Para a nossa navegação, queremos dar-lhe um olhar “borbulhante” na parte inferior. Para isso, existem algumas maneiras diferentes de fazê-lo, e do jeito que eu vou mostrar a vocês é muito simples. Usando seu Elliptical Marquee Tool, faça um círculo simples para o seguinte e preenchê-lo com # 000000.

5. Agora o que precisamos fazer é duplicar esta camada, selecionando a camada na paleta camadas e pressionando CTRL + J (Command + J). Coloque a camada duplicada em uma maneira similar como o seguinte:

6. Mesclar as camadas e continuar a repetir esse processo até conseguir algo parecido com este, atravessando o cabeçalho:

7. Usando seu Rectangle Marquee, faça um retângulo semelhante ao seguinte e preencha com # 000000 em sua própria camada.

8. Mesclar suas “bolhas” de camada e sua camada retângulo recém-criada em conjunto e, em seguida, diminuir sua opacidade camadas a cerca de 80% e insira as seguintes opções de mistura em sua camada.

9. Para o logotipo eu usei a fonte Chunk , e para o ícone musical, eu baixei o Mono Icon Set. Manter este jogo acessível como iremos utilizá-lo em outras partes desse tutorial. Eu, então, aplicar a mistura seguintes opções tanto para o ícone da camada, e minha camada de texto:

Será algo parecido com isto:

10. Nossos links serão bastante básico do lado direito do nosso cabeçalho. Usando uma fonte semelhante à Helvetica, vá em frente e adicione algum texto branco para representar os nossos links. Para o nosso texto do link ativo, eu usei a cor # 1F282F. Então, usei a ferramenta Rounded Rectangle com um raio de 5px para criar uma caixa atrás da minha ligação com as seguintes opções de mesclagem:

11. Seu cabeçalho deve ser algo parecido com isto:

12. Em seguida, queremos criar o brilho de cor que vai estar por trás de nossa previsão de tela em nossa área de destaque. Criar um novo grupo em sua paleta de layers (Ctrl + G), e rotulá-la “Color Brilho”. Então Command + Clique com o fundo azul visualização em miniatura camadas na sua paleta de layers para torná-lo uma seleção ativa. Com seu novo grupo selecionado na paleta de layers, vá em frente e escolhi o ícone de máscara de camada na parte inferior da paleta Camadas. Isto fará para que nada será visível em nossa área de conteúdo do site.

13. Em seguida, use uma escova macia para adicionar algumas cores brilhantes de uma forma semelhante à que se segue, cada um em sua própria camada. Em seguida, abaixe a opacidade de cada camada até que você gosta seus resultados. É isso que eu vim acima com:

14. Eu queria adicionar um efeito starburst pouco também que irá irradiar por trás de nossas imagens, então eu baixei esse pacote de brush sol nascente e adicionou um efeito de estrela.

15. Tire um screenshot do seu site de streaming de música favorita (eu escolhi last.fm para este tutorial) e colocar seus screenshots de forma semelhante.

16. Tudo o que resta para isso é adicionar um pouco de sombra embaixo do nosso screenshots. Use seu Elliptical Marquee com um pouco de pena, e preencher uma seleção semelhante à seguinte com # 000000 e abaixe a opacidade a um ponto que você gosta.

17. A última coisa que fiz foi adicionar um “Play” ícone que eu fiz usando o meu Elliptical Marquee com um preenchimento preto, e meu Polygonal Lasso Tool com um preenchimento branco. Diminua a opacidade sobre ela e do lado esquerdo de nossa área de destaque será algo parecido com isso quando nós somos completos.Vamos, então, ser capaz de se mover para o lado direito.

18. Usando sua ferramenta de texto, adicionar algum texto de uma forma semelhante à que se segue. Nossa posição é 1E282F #, enquanto o nosso corpo do texto é # FFFFFF.

19. Com o Pen Tool, fazer um caminho semelhante ao seguinte em seu título:

20. Queremos adicionar um golpe para o nosso caminho. Escolha a sua escova de sua paleta de ferramentas e verifique se o plano é definido como # 1E282F, com cerca de um pincel macio 2px ativo. Verifique se você está em uma nova camada e selecione o seu caminho a partir da paleta de Paths, e depois escolher o ícone do curso na parte inferior para adicionar um golpe para o seu caminho.

21. Em sua camada de cursos, insira as seguintes opções de mesclagem:

22. A última coisa que precisamos fazer para a nossa caixa de destaque é o nosso “Inscreva-se agora” e nossa “Saiba Mais”. Para fazer isso, queremos utilizar o nosso retângulo arredondado com um raio de cerca de 20px.

23. Adicione a mistura de opções a seguir para a sua camada:

24. Usando sua ferramenta de texto, adicionar algum texto de uma forma semelhante à que se segue. Em seguida, adicionei um ícone da Iconic Icon Pack.

25. Em sua camada de ícones, acrescentou as seguintes opções de mistura para dar-lhe um gradiente de cor verde.

26. Depois, siga os mesmos passos para criar um “Saiba mais” botão. A única coisa que muda é que o ícone irá usar um gradiente diferente. Eu usei o mesmo gradiente como o nosso fundo azul, exceto que ele é invertido. Seu cabeçalho ficará assim quando ele for concluído.

27. Nossa área de conteúdo é o próximo. Com o Rectangle Marquee, faça uma seleção semelhante à seguinte e preencha com # FFFFFF.

28. Insira o seguinte sobre as opções de mesclagem da sua camada.

29. Começando com o lado esquerdo de nossa área de conteúdo, vamos fazer o “Start Listening” caixa. Então puxe o Rounded Rectangle Tool Ferramentas do seu Paleta e definir o raio de 10px.

30. Nesta camada recém criada, então deseja adicionar as seguintes opções de mesclagem:

31. Para fazer o título de nossa casa, queremos Command + Click (CTRL + clique) a unha do polegar em nossa paleta de camadas da nossa camada de retângulo arredondado para selecioná-lo. Em uma nova camada, preencha sua seleção com # 000000. Usando seu Rectangle Marquee Tool, selecione a maioria da caixa que vai abrigar o conteúdo e escolha Editar> Limpar. Ele será parecido com o seguinte:

32. Inserir as seguintes opções de mistura em sua camada recém-criado:

33. Tudo o que resta para a posição é a de adicionar algum texto para descrever o conteúdo da caixa. Eu escolhi a adicionar um pequeno ícone à direita para adicionar um “abrir nova janela” opção tipo.

34. Depois de adicionar algum conteúdo na caixa, você pode ter algo que se parece com o seguinte:

35. O lado direito da nossa área de conteúdo abriga um “featured Artista” caixa, e “O que os membros dizem” caixa. Estas caixas são bastante básicas. Usando o retângulo arredondado com um raio de 10px é como eu criei o recipiente, e parte de trás do título. Use o mesmo gradiente que usou na etapa # 32 para o fundo da caixa e use o mesmo gradiente que usou para o seu link ativo na etapa # 10. Adicione um pouco de conteúdo e sua área de conteúdo será parecido com este:

36. Tudo o que resta é o rodapé e depois será feito! Usando seu Rectangle Marquee Tool novamente, fazer um retângulo semelhante ao seguinte e preenchê-lo com # 1F282F.

37. Agora insira as seguintes opções de mistura em sua camada:

38. Tudo o que resta é a de adicionar alguns ícones e texto e seu rodapé será completa. Todos os ícones são do Icon Iconic pacote que baixou anteriormente. Quando está tudo dito e feito, o modelo final deverá ser parecido com o seguinte:

Anúncios