Jump to content


Photo

Criando Userbars No Fireworks


  • Faça o login para participar
4 replies to this topic

#1 Renan L. Queiroz

Renan L. Queiroz

    Mestre

  • Usuários
  • 690 posts
  • Sexo:Masculino
  • Localidade:Brasilia - DF

Posted 23/12/2008, 10:30

Fonte: Buscas na internet e muita surra no Fireworks

O que são as userbars: geralmente imagens utilizadas em assinaturas de foruns afim de apresentar alguma informação sobre os usuários.
Tamanho de uma userbar: variável, mas os tamanhos mais ultilizados são 350 x 19 e 350 x 20 px.
O que é necessário: isso vem do gosto do criador, alguns ultilizam imagens, escritas e por ai vai,
vou fazer um exemplo simples, ultilizando apenas uma imagem e uma caixa de texto (além dos efeitos).

Então vamos à prática:

1º Passo:
Crie um novo documento (CTRL+N) com 350 x 19 px.
Posted Image


2º Passo:
Importe uma imagem de sua escolha (se caso necessite), aqui estou usando a imagem de um estádio
(Projeto do Mané garrincha para 2014), para importar a imagem vá no menu File > Import (CTRL+R).
Ajuste a imagem como preferir:
Posted Image


3º Passo:
Vamos incrementar nossa userbar, acrescentando um fundo degradê.

Crie um retàngulo com dimensões 350 x 19 px e crie uma máscara para o mesmo.
Posted Image

Após criada a máscara perceba o elemento incluido na aba das Layers.
Posted Image

Selecione a máscara criada e vá em Colors > Gradient.
Posted Image

Escolha como será feito o degrade (algulo e distância da troca de cores).
Posted Image

Ajustando para uma melhor cor e colocando a imagem importada à cima (painel Layers) vc terá o seguinte resultado.
Posted Image


4º Passo:
A marioria das userbars possuem um toque em comum, que são as linhas diagonais como textura ao fundo
(quase que trasparentes) então vamos criar a nossa:

Crie novamente um retangulo com as medidas da userbar, após isso vá nas propriedades do criado e em
Texture > Line-Diag 1, e será criada nossa textura de fundo.
Posted Image


5º Passo:
Agora acrescentamos uma trasparencia apra que seja apresentada os objetos por baixo da camada criada.
Posted Image


6º Passo:
Incluindo uma caixa de texto (fonte ultilizada: visitor - BRK -)
Posted Image


7º Passo:
Incluindo uma borda, crie novamente um retângulo com as medidas da userbar 350 x 19 px, e
após centraliza-la, retire seu preenchimento.
Posted Image

Inclua a borda com os atributos que lhe for mais interessantes, espessura, cor, textura ...
Posted Image


8º Passo:
Incluindo um efeito de luz (relevo), va no pincel (CTRL+P), e determine o espaço a ser alterado.
na imagem já incluí os quatro pontos. Para criar o efeito de arco basta após criar os quatro pontos
ir na ferrameta de seleção "seta branca", clicar no ultimo ponto criado, isso irá apresentar
um ponto a mais, fora dos 4 pontos criados (5 na imagem), esse altera o vertice em questão.
Posted Image

Veja o retuldado.
Posted Image


9º Passo:
Ajustes finais (caixa de texto com menos espaço entre as letras).
Resultado Final:
Posted Image


Arquivo para futricarem: maneGarrincha (PGN)


Existem outras formas de se criar uma userbar, então fique a vontade e crie o que der na cabeça! ;-)
Me perdoem a falta de combinações entre cores e objetos, não conheço nada disso ainda.

Outra coisa ... qualquer dica é bem vinda! Tenho muito para aprender!!
Espero que esse possa ser util para alguem!


Motivo da ultima alteração: links

Edição feita por: Renan L. Queiroz, 23/12/2008, 14:38.

Especialidade: Desenvolvimento e Banco de Dados.


Este post lhe ajudou? Agradeça: Posted Image


#2 helioth

helioth

    Projeção A

  • Usuários
  • 683 posts
  • Sexo:Masculino
  • Localidade:Mauá city - ABC - SP

Posted 23/12/2008, 11:15

Parabéns Renan, grande contribuição! (y)

Bateu uma dúvida, e fui olhar no google, a galera fala que é essa a medida que você falou 350 x 19 px é a correta, mas tem muita gente que coloca 350 x 20 px em alguns tutoriais, na verdade acho que isso é besteira, pois é apenas um pixel de diferença então não tem problema 19 ou 20 px de altura, sendo que a altura máxima permitida em nossas regras é de 20 px, mas pode fazer menor sem problemas pois userbar é "barra do usuário" a sua barra, então estando dentro das regras é só mandar ver em qualquer medida. ;)

Eu acho muito fera quando alguém faz um tutorial, tipo próprio, isso é muito bom! Meus parabéns!

Bons ventos!
Fórum WMO - Equipe de Design - Monitor
Macho que é macho não chupa mel, masca abelha.
Posted Image

#3 Renan L. Queiroz

Renan L. Queiroz

    Mestre

  • Usuários
  • 690 posts
  • Sexo:Masculino
  • Localidade:Brasilia - DF

Posted 23/12/2008, 11:29

Uso geralmente 19 para ter a 10ª linha como a linha central ... linha de corte.
Se bem que o fireworks tem as réguas de medida, para facilitar no uso de tamanhos com numeros pares!

Obrigado pelos parabéns! :yes:

Edição feita por: Renan L. Queiroz, 04/03/2009, 14:43.

Especialidade: Desenvolvimento e Banco de Dados.


Este post lhe ajudou? Agradeça: Posted Image


#4 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 11724 posts

Posted 31/10/2017, 08:00

Buy Xenical Over The Counter buy viagra online Priligy Administracion Get Levitra

#5 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 11724 posts

Posted 07/11/2017, 01:51

Cephalexin Behavioral Side Effects Children 379 Cailis viagra Buy Buspar Propecia Epididimitis Stendra Sale




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq