charless Posted February 14, 2011 Share Posted February 14, 2011 Bom últimamente vejo muitas pessoas copiando templates ou fazendo layout horríveis. Eu ainda digo, faze um site requer um investimento alto. Evite pessoas mal preparadas ou novatos que fizeram apenas um curso e acham que são "Design". Sério está virando moda ser design. Faze um site não e apenas abrir o o photoshop e sair fazendo o que vem na cabeça, requer planejamento, tempo, e muito carinho. E nisso eu decidir ajuda pessoas que realmente precisam mas estão meio que sem dinheiro ou com falta de criatividade. Neste tutorial eu mostrarei como criar um layout de um site de hosting muito detalhado. Se você tem uma empresa de hospedagem você vai precisar de um modelo de site muito detalhado porque o mercado está muito saturado, e você vai precisar para se destacar na multidão. Nesse tutorial recomendo o uso do Photoshop CS4 ou Superior CS5. Esse é um tutorial em inglês que resolvir traduzir e para ajudar quem precisa. Este é o nosso resultado final. Para começar, você precisa criar um documento vazio. Vou usar uma cor escura para o fundo. Observe que você pode usar o Paint Bucket Tool para preencher o seu whit camada de fundo de qualquer cor que você deseja. Eu vou selecionar a ferramenta Brush, e eu vou fazer um desenho branco em uma nova camada. Então eu vou mudar o modo de mistura para a nova camada de sobreposição. Continua.... Link to comment Share on other sites More sharing options...
charless Posted February 14, 2011 Author Share Posted February 14, 2011 Agora (vá em Exibir> Mostrar Grade). Com a ferramenta Pen desenhar uma forma, como na imagem a seguir. Este formato será utilizado para nossa tabela de preços. Aqui nós vamos adicionar os preços de todos os nossos planos de hospedagem. No topo da tabela de preços você irá adicionar uma outra forma. Você pode usar a ferramenta caneta para criar esta forma. Aqui será o nome da sua empresa e planos. Abaixo você tem o estilo da camada eu usei para criar o cabeçalho da tabela. Guarde esta camada de estilos, porque você vai usá-la mais tarde neste tutorial várias vezes. Vou nomeá-la LayerStyle1 Link to comment Share on other sites More sharing options...
charless Posted February 14, 2011 Author Share Posted February 14, 2011 Por favor note que todo o gradiente usado neste tutorial é pacote enorme com mais de 25 mil gradientes. Mas você pode usar a sua criatividade e criar seu gradiente. Com a ferramenta de linha irá criar algumas linhas verticais. Link to comment Share on other sites More sharing options...
charless Posted February 14, 2011 Author Share Posted February 14, 2011 No meio da layout você vai criar um espaço onde vou colocar mais tarde um efeito 3D. Esta forma será alterada posteriormente por outra. Enfim, se você gosta do layout desta maneira é por isso que eu dei-lhe duas opções. Abaixo você encontrará os estilos de camada utilizado para esta forma com um olhar recuado. Por favor, salve este estilo da camada, pois você precisará mais adiante neste tutorial. Vou nomeá-la LayerStyle2. Link to comment Share on other sites More sharing options...
charless Posted February 14, 2011 Author Share Posted February 14, 2011 Aqui está uma nova forma para utilizar nesse tutorial. Eu criei este forma com Rounded Rectangle Tool, então eu tenho aplicado um filtro de ruído ( Filter > Noise > Add noise ) O próximo passo é carregar a seleção para essa camada. Selecione a camada na sua paleta de camadas e, em seguida vá em Select> Load Selection. Crie uma nova camada, e com a ferramenta Pincel adicionar uma área branca. O próximo passo é carregar a seleção para essa camada. Selecione a camada na sua paleta de camadas e, em seguida vá em Select> Load Selection. Crie uma nova camada, e com a ferramenta Pincel adicionar uma área branca. Link to comment Share on other sites More sharing options...
charless Posted February 14, 2011 Author Share Posted February 14, 2011 Alterar o modo para Overlay para a camada com o desenho branco, layout será semelhante a imagem a seguir. Não se esqueça de pressionar CTRL + D para desmarcar. Com a ferramenta Rounded Rectangle criar um botão azul agradável. Como você pode ver que terá uma cor diferente do nosso layout, porque este botão necessidade de atrair muita atenção. Abaixo você encontrará os estilos da camada usada para criar o botão azul. Link to comment Share on other sites More sharing options...
charless Posted February 14, 2011 Author Share Posted February 14, 2011 Vou criar também uma outra forma. aqui será o formulário de busca. Ele permitirá que seus usuários façam pesquisas de registro de domínios. No lado direito você terá de criar também um botão Link to comment Share on other sites More sharing options...
charless Posted February 14, 2011 Author Share Posted February 14, 2011 Com a ferramenta Rounded Rectangle voce pode criar outra formas. Você pode criar lá um ticker de notícias, e no lado direito você pode usar esse botão para um chat ao vivo. Sobre o preço da área da tabela vai criar mais duas formas, com o rectangle Tool, e vou acrescentar também algumas linhas. Então eu vou acrescentar outros botões. E como você pode ver eu vou acrescentar outra formas em torno das primeiras. Link to comment Share on other sites More sharing options...
charless Posted February 14, 2011 Author Share Posted February 14, 2011 Abaixo você tem os estilos de camada utilizado para as formas de cima. Com o Ellipse Tool eu vou criar alguns círculos. Link to comment Share on other sites More sharing options...
charless Posted February 14, 2011 Author Share Posted February 14, 2011 (edited) Depois que você adicionar alguns estilos de camada em seus círculos terá uma aparência agradável quando pressionado. Você pode usar os estilos de camada de cima. Se tiver guardado os estilos de camada como eu disse agora você vai ser muito fácil para você. No meio dos círculos você irá adicionar alguns pequenos triângulos. E então, o passo mais importante é a de adicionar alguns ícones com alguns servidores preto e branco, e também alguns preços. Se desejar você pode acessar o iconfinder e encontrar diversos icones que podem ser utilizados. No rodapé do layout você vai criar outra formas, e eu vou enchê-lo com o texto. Continuaa na página 2 .... Edited February 14, 2011 by Hello Interactive Link to comment Share on other sites More sharing options...
Recommended Posts