Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 25 postagens
Mais de 25 postagens
Tópico Autor
Mensagens: 43
Nome: Vinicius
Descrição do site: Hospedagem de sites
Localização: santa rosa de viterbo
Contato:

Layout completo - Parte I

01-01-2009 12:24

Satisfação caros internautas, neste tutorial iremos aprender a criar um layout básico para um site de game e com o conhecimento aqui adquirido vocês poderam aplicá-los em vários outros trabalhos.

Eis aqui o nosso exemplo:

Imagem

Selecione a cor do primeiro plano #343232
e clique no menu "Filtro> Ruído> Texturizador", configura da seguinte maneira:
Tamanho: 82% - Relevo 4. Cilque em OK.
Agora clique no menu "Filtro> Artistíco>Lapis de Cor", confiure da seguinte maneira.
Espessura: 6 - Pressão: 2 - Brilho: 19. Clique em OK.
Agora clique no menu "Filtro> Estilização - Vento" configure apenas em "Ziguezague" - "Da direita" Clique em OK.
Novamente clique no menu "Filtro> Ruído >Adicionar Ruído", configure da seguinte maneira:
Intensidade: 5,89 - Distribuição: Uniforme -Monocromático.

Bom nosso Plano de Fundo deverá estar com uma textura parecida com a imagem abaixo:

Imagem

Agora crie uma nova camada e nomeia para "Grade", selecione a ferramenta de formas personalisadas...

Imagem

. escolha a que possui o formato de grade. Veja Figura abaixo:

Imagem

Faça algumas grades e com blocos médios, se necessário crie novas camadas e mescle-as, mas no final fique apenas com uma camada chama Grade. Nesta mesma camada aplique o estilo Chanfro e Entalhe:

Imagem

Coloque a Opacidade da camada 40% e preenchimento com 50%. Teras um resultado semelhante ao da figura abaixo:

Imagem

Pegue a ferramenta "Retangulo Arredondado" e na barra de propriedades altere o "Raio" para 10px, lembrando que até aqui ainda estamos trabalhando com a mesma cor de plano de fundo #343232.

Crie uma nova camada e nomei-a para "Quadrado G".

Trace um retângulo semelhante ao da figura abaixo:

Imagem

Calma que ainda iremos aplicar os efeitos. Aplique um estilo de Chanfro e Entalhe com as seguintes configurações:

Imagem

Agora clique no menu "Filtro > Textura> Texturizador com as configurações: "Textura - Arenito", "Tamanho:82%", "Relevo: 4", "direção da luz: Acima".
Agora clique em "Filtro> Artístico> Lápis de Cor" configure com "Expessura do Traço: 3", "Pressão do Traço: 2", "Brilho do Papel: 13".
Pronto agora basta fazer uma seleção eliptica nos cantos Superior Direito e Inferior Direito e para furar apenas pressione a tecla "delete".

Vamos agora para o outro Retângulo. Crie uma nova camada e nomei-a para "Retângulo P". Desta vez iremos traçar um retângulo normal sem arredondamento semelhante ao da figura abaixo:

Imagem

Agora iremos aplicar os efeitos: Clique no menu "Filtro> Textura> Texturizador", configura da seguinte maneira:
"Textura: Arenito", "Tamanho: 67%", "Relevo:4", Direção da Luz: Acima.
Clique no menu "Filtro> Artístico> Lápis de Cor", configura da seguinte maneira: "Expessura do Traço: 3", "Pressão do Traço: 5", "Brilho do Papel: 13".

Aplique agora o estilo Chanfro e entalhe e coloque configure como na figura abaixo:

Imagem

Agora adicione uma camada de "Matiz/Saturação" clicando no menu "Camada> Nova camada de Ajuste> Matiz/Saturação e configure como na figura abaixo:

Imagem

Coloque a opacidade desta camada com 66%.

Bom agora vamos adicionar a figura abaixo para termos uma noção melhor de espaço para a criação dos botões. Copie e cole-a no seu trabalho, será necessário recortar o fundo da figura para podermos coloca-la sobre as outras camadas. Aqui não explicarei como retirar o fundo pois já existem diversos tutoriais ensinando isso e cada um escolhe a maneira mais adequando podendo ser com a varinha mágica, caneta e etc. Caso não queira ter tanto trabalho assim pegue a figura já sem o fundo.

Imagem

Nomeie a camada com a figura para "ET".

Fiaremos então com este conteúdo abaixo:

Imagem

Bom encerraremos por hoje esta etapa e aguardem a próxima parte deste tutorial onde explicarei como criar as janelas, botões e adicionar os textos.

Até a próxima pessoal.

Aproveite e visite meu stoke de RENDER http://photobucket.com/roxzin
0
 
Primeiras postagens
Primeiras postagens
Mensagens: 1

Layout completo - Parte I

23-03-2009 13:19

Este tutorial é recomendado a ser feito em qual versão do PS?
0
 
Mais de 25 postagens
Mais de 25 postagens
Tópico Autor
Mensagens: 43
Nome: Vinicius
Descrição do site: Hospedagem de sites
Localização: santa rosa de viterbo
Contato:

Layout completo - Parte I

23-03-2009 17:10

foi usado Adobe Photoshop CS2 mais pode ser o cs3 tb como o 4
0
 
Primeiras postagens
Primeiras postagens
Mensagens: 5

Layout completo - Parte I

16-06-2009 13:30

Há necessidade de converter para jpg, para colocar como fundo de pagina web
0
 
Primeiras postagens
Primeiras postagens
Mensagens: 5

Layout completo - Parte I

19-06-2009 19:44

Fiz alguns testes mas não consegui chegar no que eu preciso; eu já tenho a imagem do fundok, preciso pegar o logo e colocar em cima dele para ser fundo de uma pagina web, consegui eliminar o fundo deste logo só que quando converto em jpg ou png forma uma caisa e não somente o logo em cima do fundo alguem pode me ajudar.
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado