Webly: Logomarca Navegador Opera - Webly

Ir para

IMPORTANTE: Todos os tutoriais postados neste fórum irão automaticamente para o portal Webly. Contribua você também e faça parte da equipe de colaboradores que fazem a evolução da web. Obrigado.


Página 1 de 1

Logomarca Navegador Opera Avaliar tópico: -----

#1 Membro offline   Strous Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 75
  • Cadastrado: 29-junho 07
  • Localização:Recife - PE
  • Interesses:Fireworks, Flash, ActionScript, Teoria do Design, PHP, Padrões Web, Usabilidade, AI.

Postou 29 junho 2007 - 07:53

Quote

Olá galera!



Estão curtindo a série Logomarca?! Muito bacana os recursos que os designers utilizam para desenvolver as logomarcas, não é?!



Não raramente, visualizamos logomarcas tão bem feitas e ficamos imaginando o trabalho que o profissional a produziu deve ter tido. Mas, a verdade é que na maioria das vezes estes profissionais utilizaram recursos bem simples para a construção de tal. E isso pode ser percebido na prática, através desta série que é dedicada justamente a esclarecer os simples procedimentos utilizados no desenvolvimento das logomarcas.



Esta semana irei ensinar a criar a logomarca do navegador Opera, um dos concorrentes do Microsoft Internet Explorer.



Preparados?! Então vamos lá!



1) Crie um novo arquivo com as seguintes configurações:



» Largura: 100 pixels.

» Altura: 150 pixels.

» Resolução: 72 dpi.

» Cor da tela: Branco.



Imagem



2) Selecione a Ferramenta Texto e digite a vogal “O†obedecendo aos seguintes parâmetros:



» Fonte: Times New Roman.

» Tamanho: 70.

» Estilo: Negrito.

» Cor de preenchimento: vermelho (#C60000).

» Cor do contorno: sem cor de contorno.



Imagem



Imagem

3) O próximo passo é converter a vogal em um símbolo gráfico para podermos trabalhar os efeitos que serão empregados. Para isso, mantenha a vogal selecionada e pressione a tecla do atalho F8. Surgirá a janela Propriedades do símbolo. Configure-a conforme o exemplo abaixo:



Imagem



4) Teremos assim nossa vogal convertida em símbolo. Vamos agora “esticar†a vogal para se assemelhar ao da logomarca do navegador Opera. Selecione a Ferramenta Dimensionar, ou simplesmente o atalho do teclado Ctrl+T, para realizar tal ação. Veja o exemplo na figura abaixo:



Imagem



5) Desta forma definimos a vogal na proporção correta em relação a logo original. Como próximo passo, vamos aplicar o efeito de degrade no símbolo Logo. Utilize o efeito Linear. Para chegar à janela apresentada abaixo, você deve dar um clique no “balde de tinta†referente à cor de preenchimento do símbolo e acessar a opção Opções de preenchimento... na paleta de cores. Logo após, escolha no combo box Categoria de preenchimento a opção Linear.



Imagem



6) Ao escolher a opção Linear no combo box, acesse o botão Editar para modificarmos as cores. Configure da seguinte maneira:



Imagem



Imagem



OBS: Nas extremidades e nos dois vértices criados ao redor do vértice central, a cor utilizada foi a mesma que configuramos no início deste tutorial para criar a vogal “O†– (#C60000). Já o vértice central possui a cor branca (#FFFFFF).



Dica: Para adicionar vértices em um efeito Linear, basta apontar o ponteiro do mouse sobre o eixo de vértices. Este ponteiro irá admitir um sinal de positivo. Daí basta clicar no local que deseja inserir o vértice. Veja:



Imagem

7) O efeito será aplicado em sua orientação padrão. Modifique-a conforme a figura abaixo:



Imagem



8) Aplique o efeito Sombra interna, através do menu Efeitos (+), Sombra e brilho, Sombra interna, conforme segue:



Imagem



» Distância: 4.

» Opacidade: 65%.

» Suavidade: 4.

» Ângulo: 315.



Imagem



9) Para aplicar o próximo efeito – o efeito sombra, duplique este símbolo através do atalho do teclado Ctrl+Alt+D, lembrando de manter a vogal selecionada.



Imagem



10) Selecione a cópia criada e exclua todos os efeitos aplicados (efeito linear e sombra interna) e modifique sua cor de preenchimento para cinza escuro (#969696).



Imagem



11) Como se trata da sombra, temos que diminuir o tamanho da vogal duplicada e incliná-la. Utilize as ferramentas Dimensionar e Inclinar.



Imagem



Imagem



12) Vamos ao nosso último passo para concluir a logomarca. Organize as vogais no palco, sendo que a sombra será enviada para trás para proporcionar o efeito desejado – o de sombra.



Imagem

Eis o efeito final:



Imagem



Sendo assim, finalizamos mais um tutorial da série Logomarca.

[b]


Fonte: http://www.juliobatt...ogomarca004.asp
"Evite a ressaca, matenha-se bêbado"

-> rtaveiras@hotmail.com
0

#2 Membro offline   Strous Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 75
  • Cadastrado: 29-junho 07
  • Localização:Recife - PE
  • Interesses:Fireworks, Flash, ActionScript, Teoria do Design, PHP, Padrões Web, Usabilidade, AI.

Postou 29 junho 2007 - 07:59

Houve um pequeno erro de BBCode aí, porém dá pra visualiza-lo bem.
"Evite a ressaca, matenha-se bêbado"

-> rtaveiras@hotmail.com
0

#3 Membro offline   ckav Ícone

  • cadastre-se no fórum e participe^~
  • Ícone
  • Grupo: Coordenadores
  • Posts: 1695
  • Cadastrado: 08-setembro 06
  • Sexo:Male
  • Localização:São Paulo/SP
  • Interesses:Design, Animação, Ilustração, Vetor, Criação, Cores, Flash, Action Script, notepad++, XHTML/CSS, Fireworks, Photoshop, Illustrator, InDesign, After effects, 3D, PHP, Web standards...

Postou 01 julho 2008 - 03:06

Bom tuto, porém, leia-se Logotipo onde o autor declarou Logomarca(termo incorreto) ou Símbolo gráfico que considero mais apropriado, pois a idéia aqui creio que seja representar um significado e não a Logotipia em si. Eu precisaria analisar o caso do Opera pra ser mais preciso nas minhas palavras.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
------------------------------------------------------------------------------------------------------------------
"A cada pergunta idiota que eu faço e tenho a resposta, significa que estou um pouco menos idiota!!!"
Eu
------------------------------------------------------------------------------------------------------------------
Leu? gostou? ajudou?! Então cadastre-se, comente, peça, poste, ajude, participe!!!
------------------------------------------------------------------------------------------------------------------
0

Página 1 de 1


Resposta rápida

  

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)