Dicas web

Posted: domingo, 13 de março de 2011 by Mari in Marcadores:
1

Olá, pra quem não me conhece, sou Mariana, estou agora fazendo parte deste blog e, a partir de hoje, estarei aqui para compartilhar com vocês usuários/visitantes meus conhecimentos na area de webdesign, edição de imagens e também disponibilizar donwloads de fontes, imagens, psds e afins. Enfim, todo o conteúdo que eu puder oferecer e que, de alguma forma, pode ser util a vocês. Pois bem, vamos a postagem de hoje.

CRIAÇAO DE BANNERS ANIMADOS UTILIZANDO COMO BASE O PHOTOSHOP!

Para muitas pessoas, saber manipular o programa Adobe Photoshop é abrir portas para que as pessoas enxergem seu talento e seu trabalho seja como webdesigner ou até mesmo com edições de imagens. Mas, existem dicas e macetes que são importantes na construção, por exemplo, de um banner dinamico para flash utilizando o photoshop e, sim, é possivel voce arquitetar e construir a base do seu banner dinamico utilizando o Photoshop e também utilizar as ferramentas como a pen too para facilitar quando você precisar cortar uma foto. Vamos as dicas principais para construção, como foi exemplificado antes, de um banner no photoshop e depois transferir tudo para o flash.

Dica número 1:
Quando voce for cortar uma foto, sempre faça uma cópia dela para que você ainda tenha a foto original a sua disposição se voce precisar.

Dica número 2:
Crie uma pasta que identifique o nome do seu banner. Exemplo, se meu banner será sobre um site ou blog, logo vou identificar minha pasta com o nome correspondente a ele.

Dica número 3:
Faça uma pesquisa na internet das imagens que você precisará para criação do banner e separe-as na pasta que você criou para armazená-las.

Dica número 4:
Abra o Photoshop com as imagens que você colheu e renomeia-as para facilitar na hora de procurá-las. Depois, começe a cortar os elementos que você deseja utilizar, com a ferramenta PEN TOOL (P é seu atalho). Se voce sentir dificuldades em cortar as imagens com esta ferramenta, treine com outras imagens e pratique bastante, isso facilitará para que depois de muito treino, você seja capaz de cortar com mais rapidez os elementos necessários.

IMPORTANTE: CONVERTA A IMAGEM DEPOIS DE CORTADA, EM SMART OBJECT (OU OBJETO INTELIGENTE), pois quando voce precisar diminuir o tamanho dela para se adequar ao banner, ela nao perderá qualidade.
COMANDO:
clique com o botão direito do mouse na imagem e escolha aopção SMART OBJECT ou se estiver em portugues: objeto inteligente.

Dica número 5:
Depois de cortar as fotos do jeito que voce quer e fazer os ajustes de cor e também de sombras, começe a escrever os textos e separe-os criando, se voce achar necessário, uma pasta no porgrama mesmo e renomeie com o nome "textos" por exemplo.

Dica número 6:
E, eu não poderia deixar de falar aqui, defina o tamanho do documento, qual é o tamanho do banner? Podem variar, mas os padrões web são estes:
Super Banner: 728 x 90 px
Full Banner: 468 x 60 px
Banner Botão: 120 x 60 px
Relógio: 169 x 50 px
Banner Notícia: 180 x 150 px
Central Banner: 466 x 68 px
Square Banner: 300 x 250 px
Banner Destaque: 320 x 240 px

Dica número 7:
Organize como ficará seu banner, desde posição do texto, imagem e também, ajuste cor, qual fonte voce irá utilizar, desde que não seja a fonte Comic Sans(não me perguntem aqui o porque, pois realmente não sei explicar) as outras fontes padrões como: Arial e Helvetica, vale!

Dica numero 8:
Depois de "montado" o esquema no photoshop, procure o seguinte comando, no menu acima, no Photoshop: Layer -> New Layer Based Slice. Pois voce salvará cada imagem editada, com o tamanho correto e cortado do jeito que voce quer, seguindo este comando no teclado:
ALT + SHIFT + CTRL + S e escolha a opção salvar em png marcando a opção com transparencia.

Dica nove:
Anote a fonte que voce utilizou e a cor escolhida para facilitar quando voce for animar o seu banner no flash de acordo com o modelo que voce montou.

Dica 10:
Depois de tudo salvo, abra o flash e com o comando:
FILE - IMPORT - IMPORT TO LIBARY
(File - importar - importar para a biblioteca)
e depois anime o banner de acordo o seu gosto!
(lembre-se de ajustar o palco (stage) para o tamanho do banner escolhido!)

Espero que estas dicas tenham sido boas, qualquer dúvida, por favor, me procurem nos seguintes endereços abaixo:

*Portfolios online:
WEBCOLETIVO:
http://webcoletivo.wordpress.com/
PORTFOLIO/BLOG
http://marimulti.wordpress.com/
...FLICKR:
http://www.flickr.com/photos/marihmulti
TWITTER:
@marimulti

Abraço e até o próximo post!




1 comentários:

  1. Gustavo says:

    No Chrome tive problemas de ver esse post, mas consegui ver normal em outros navegadores, no mas, fica a dica ai para os designers graficos, ótimo post.

Related Posts Plugin for WordPress, Blogger...