Ossada!!!!
Ele é Magnifico Erra nada!!
10 de abril de 2009
9 de abril de 2009
Fazendo o logo tipo do google chorme
Olá Neste tutorial aprenderemos a criar a logo marca do navegador google
Chrome.
Abra um arquivo 500 x 500 px 72 dpi ( escolha um tamanho que você quiser)
Tutoriais, tutorial, photoshop google chrome logo
Selecione a Ferramenta Elipse tool e
desenhe uma circunferência ( deixa a circunferência perfeita, pressione Shift
para isso)
antes configure sua barra de parâmetros como mostra-se a seguir.
Tutoriais, tutorial, photoshop google chrome logo
Tutoriais, tutorial, photoshop google chrome logo
Vá em add layer style e
selecione a opção Gradient Overlay
configure como mostra a imagem abaixo
Tutoriais, tutorial, photoshop google chrome logo
Tutoriais, tutorial, photoshop google chrome logo
teremos o seguinte resultado.
Tutoriais, tutorial, photoshop google chrome logo
Faça uma cópia da camada que acabamos de aplicar o efeito.
Tutoriais, tutorial, photoshop google chrome logo
depois disso limpe o estilo que está aplicado a camada shape copy 1. veja
a animação com os procedimentos.
Tutoriais, tutorial, photoshop google chrome logo
selecione a ferramenta
Pen tool e
configure seu modo como mostra abaixo
Tutoriais, tutorial, photoshop google chrome logo
Tutoriais, tutorial, photoshop google chrome logo
faça cortes na camada como mostra abaixo.
Primeiro no centro com a ferramenta Elipse tool depois
com a pen tool
deixe mais ou menos assim
Tutoriais, tutorial, photoshop google chrome logo
após usar a elipse tool utilize a ferramenta pen tool
faça um recorte mais ou menos assim
lembre-se do modo da ferramenta
Tutoriais, tutorial, photoshop google chrome logo
vá em add layer style e adicione bevel and emboss com os seguintes
parametros
Tutoriais, tutorial, photoshop google chrome logo
Tutoriais, tutorial, photoshop google chrome logo
Agora vem uma das partes mais difícieis. colocar a sobra.
Duplique a Shape 1 copy.
Tutoriais, tutorial, photoshop google chrome logo
Mude a cor da shape sombra para a cor #252525 e limpe seus estilos. mova a
camada para baixo
Tutoriais, tutorial, photoshop google chrome logo
Rasterize a camada sombra.
Tutoriais, tutorial, photoshop google chrome logo
aqui que vem todo o problema.
selecione a ferramenta lasso tool e circule cada setor. e mova a sombra um
pouco para o centro. veja a imagem.
Tutoriais, tutorial, photoshop google chrome logo
Faça o mesmo com os outros setores
Tutoriais, tutorial, photoshop google chrome logo
Se você chegou até aqui, o resto será moleza.
Crie uma nova camada acima de todas as outras.
Tutoriais, tutorial, photoshop google chrome logo
Selecione a camada que você acabou de criar e aperte Ctrl + Alt + G para criar
uma cliping mask. ( Repare na setinha apontando para baixo) esse passo é muito
importante.
Tutoriais, tutorial, photoshop google chrome logo
Selecione a ferramenta Brush e
escolha a seguinte cor #DA0000 e pinte o setor superior.
Tutoriais, tutorial, photoshop google chrome logo
para os outros setores, use os seguintes valores. #189720 (Verde) e #ffd912
( Amarelo)
Tutoriais, tutorial, photoshop google chrome logo
Diminua um pouco a opacidade da camada sombra
Tutoriais, tutorial, photoshop google chrome logo
selecione a ferramenta Pen tool modifique
o modo para paths
Tutoriais, tutorial, photoshop google chrome logo
e faça uma marcação como mostra a imagem abaixo.
Tutoriais, tutorial, photoshop google chrome logo
selecione a ferramenta burn tool e
faça a seguinte configuração
Tutoriais, tutorial, photoshop google chrome logo
selecione novamente a pen tool e clique com o botão direito sobre a marcação,
escolha strok path e depois burn
Tutoriais, tutorial, photoshop google chrome logo
ps - quando for fazer esses passos nos setores amarelo e vermelho, mude o
modo da ferramenta burn tool para highligths.
Tutoriais, tutorial, photoshop google chrome logo
Tutoriais, tutorial, photoshop google chrome logo
selecione a ferramenta burn tool coloque
o calibre do brush em 150 e passe na parte externa da logo.
Tutoriais, tutorial, photoshop google chrome logo
Nosso resultado até agora.
Tutoriais, tutorial, photoshop google chrome logo
selecione a ferramenta elipse tool e
crie uma circunferência no centro. lembre-se de ativar o modo shape layers.
Tutoriais, tutorial, photoshop google chrome logo
vá em add layer style e
adicione os seguintes parâmetros.
Tutoriais, tutorial, photoshop google chrome logo
Tutoriais, tutorial, photoshop google chrome logo
Tutoriais, tutorial, photoshop google chrome logo
Tutoriais, tutorial, photoshop google chrome logo
para finalizar iremos colocar mais um efeito.
selecione a ferramenta elipse tool e
faça uma nova circunferência abrangendo toda a cincunferência do centro e uma
parte dos setores.
Tutoriais, tutorial, photoshop google chrome logo
Agora com a mesma ferramenta só que com o modo de subtração selecionado, faça
uma circunferência um pouco menor.
Tutoriais, tutorial, photoshop google chrome logo
Tutoriais, tutorial, photoshop google chrome logo
Agora aplique uma clique mask nas ultimas camadas criadas mas antes mova a
camada para baixo da bolinha azul.. veja a animação.
Tutoriais, tutorial, photoshop google chrome logo
mude a opacidade da camada para 50% e pronto.
Tutoriais, tutorial, photoshop google chrome logo
Criando Ilustração
Bem vamos agora aprender a criar uma montagem simples mas interessante.... crie um arquivo 400x300 px com 72 de dpi Bem após criar o arquivo selecione a ferramenta pen tool escolha a cor 9f0100. Clique na palheta Fore e back ground após configurar as cores faça um desenho conforme a imagem abaixo. agora mude a cor para db5800 e faça outro desenho parecido com a imagem abaixo cuidado com a organização das camadas.... tente sempre deixar a vermelha em cima.... siga a ordem de deixar a ultima camada criada sempre por baixo... bem faça a imagem do jeito que você quiser mas deixe bem parecido com a imagem abaixo.... use tambem as cores que são informadas. bem após o termino da coloração da nosso "arco-íres" vamos dar um efeito nas camadas criadas... vá em add a layer Style preste atenção na cor vermelha veja que ela ficou bem mais "estilosa" depois do efeito... agora vamos aplicar esse mesmo efeito nas outras camadas para isso clique com o botão direito do e escolha depois escolha qualquer camada, clique com o direito e vá em Paste Style... devemos ter mais ou menos a imagem abaixo após a aplicação em todas as camadas. Selecione a ferramenta brush crie uma nova camada e pinte a parte direita perceba que ficou uma sobra. pegue a imagem abaixo e jogue para o nosso carco íris. apague o fundo e deixe desse jeito aqui. Duplique a camada da sombra e afaste ele um pouco para baixo e mova para a direita. mude a opacidade para 30% de um pouco de distoção(Ctrl+t) na sombra. gire ela um pouco. pronto um efeito simples e legal.... se quiser da um gaussian blur fique a vontade.
Vamos aprender a fazer a seguinte animação Bem comece criando um novo arquivo... o tamanho não importa mas criei um arquivo 250x150 px e com 50 frames por segundo... Bem Crie um texto com a TEXT TOOL(T) bem após isso acionei a ferramenta Subselection TOOL (A) isso fará com que o texto seja quebrado por letra. veja a imagem bem agora vamos transfomar cada letra em um grático... com a ferramenta subselection clique na letra E. após isso aperte no seu a tecla F8. faça como mostra a imagem abaixo... após isso faça com todas as camadas a mesma coisa. após terminar isso aperte no seu teclado F11. aparecerá a caixa da library Selecione todas as letras pressioando CTRL + A e apos isso vá em Modify - Timeline - Distribute to layers ou simplesmente pressione (Ctrl + Shift + D) você pode apagar a layer 1. ela não servirá para nada... o próximo passo você tem que ter bastante atenção... selecione a letra T e afaste ela tres frames... selecione a letra U e afasta 6 frames.... secile a outra letra T e afaste 9 frames... repita com essa progressão nas outras camadas. selecione a camada da letra E e vá no quadro 20. aperte F6 para adicionar um Key Frame nele. selecione a camada da letra T e vá ao frame 23 e faça a mesma coisa. aperte F6 faça a mesma coisa seguindo a proporção para as demais camadas. selecione o primeiro frame da camada E e faça o seguinte... ative a ferramenta Free Transformation(Q) após isso vá ao painel das propriedades... Ctlr + F3 e procure color mude para alpha e deixe o sue valor em 0% A letra vai sumir... não se preoculpe... agora procure abra o painel do histórico... Ctrl + F10 e procure pelas as ações Scale e Instance Alpha selecione as duas e clique onde mostra imagem Selecione Salvar Comando nomei o comando como comando... agora na camada T selecione o o frame que contem o primeiro T. Digo o 3 frame da camada T Vá em Commands e Clique sobre o comando que você criou... repita nas demais cadamas(Importante somente nos primeiros frames de cada camada... assim como na camada T. Agora Selecione o o frame subsequente ao ultimo da cadada S e arrasta uma seleção para baixo ate a camada E. Veja como deve ser na imagem. após isso aperte F5 para criar frames Estamos terminando. agora vamos na primeira camada[E] e na propriedades mude o tween de nome para motion Faça isso em todas as camadas. vamos ter um resultado de mais ou menos assim. bem agora basta testar... CTRL + ENTER
\eu fiz uma ta filézinha aheehahea/
Fonte etutorias.net
Fazendo um menu ilustrado com o Dreamweaver MX.
Uma aplicação interessante das camadas é um menu ilustrado. Admita que você deseja mostrar foto e texto explicativo de cinco produtos numa mesma página. À esquerda, vão ficar cinco links com os nomes dos produtos. À direita, cinco camadas superpostas, cada uma com a foto e o texto descritivo de um dos produtos. Comecemos com as camadas. Insira as cinco camadas e depois as respectivas fotos e descrições. Selecione cada camada de 2 a 5 e, no Inspetor de Propriedades, caixa Vis (de Visualização), torne-as todas invisíveis. Como padrão, a única camada visível será a 1. Em seguida, empilhe as camadas umas sobre as outras, todas ocupando a mesma posição na página. Agora, os links. Acione Inserir/Hyperlink. Abre-se a janela Hyperlink. No campo Texto, digite o nome do produto 1. No campo Link, digite apenas o sinal #, que indica um link interno. Acione OK. Repita essa operação para os outros produtos.
Façamos, agora, a ligação entre os hyperlinks e as camadas. Selecione o hyperlink e clique no botão + no painel Comportamentos. Abre-se um menu. Escolha a opção Mostrar-Ocultar as camadas. Para o hyperlink 1, mostre a camada 1 e oculte todas as outras. Replique esse procedimento, adequadamente, até o último link. Se você precisar manipular as camadas ocultas, acione Janela/Outros/Camadas, ou F2. No painel Camadas, os objetos ocultos aparecem com o ícone de um olho fechado. Os visíveis vêm marcado com um olho aberto. Clique nesse ícone para inverter a condição. Salve a página e veja o resultado.
Para tornar esse menu mais profissional, em vez de links você pode usar botões de duas cores, conforme foi mostrado na dica 2. Assim, quando o usuário clicar no botão Produto 1, ele assumirá uma cor diferente, indicando seleção. Quando o clique for dado em outro botão, Produto 1 será restaurado para a cor normal e o outro botão assumirá a cor de seleção.
8 de abril de 2009
Tutorial Basico Dreamweaver MX
| Tutorial Dreamweaver MX Básico Com este turorial pretendo passar a todos os conceitos básicos do dreamweaver, este que é o melhor e o mais fácil programa de edição de páginas html da atualidade. Com este tutorial você que não conheçe nada sobre o Dreamweaver, já estará apto à conhecer conceitos avançados desse revolucionário software. Iremos enfatizar os botões e suas características. Vamos ao tutorial: | |
1º Vamos conhecer a área principal do Dreamweaver:  | |
| 1 - Área do código html - Aqui é onde aparece o código HTML ou aonde você pode digitar o código Html caso você saiba. 2 - Área de edição do Dreamweaver (Projeto) - Nesta área você edita livremente, adiciona tabelas, digita, desenha camadas (Layers), insere links, flashs, tudo o que quiser. 3 - Mostrar a visualização do código - Se este botão estiver apertado ficará aparecendo somente a área do código HTML. 4 - Mostrar as visualizacões de código e do projeto - Se este obtão estiver apertado ficará aparecendo as duas áreas descriminadas nos itens 1 e 2. 5 - Mostrar a visualização do Projeto - Se este botão estiver apertado estará aparecendo somente a área descriminada no item 2. 6 - Visualizar/depurar no navegador - Apertando esse botão aparece um sub-menu com três opções, para usuários iniciante é importante ressaltar simplesmente a primeira opção que é Visualizar em iexplorer que ao ser apertado abre o navegador Internet Explorer para efeito de visualização do andamento do seu projeto. 7 - Opções de visualização - Ao apertar esse botão aparecem um monte de opções auto-explicativas como régua, número de linhas, grade, realçar html incorreto e etc. 8 - Tamanho da janela - Aqui você escolhe o tamanho da janela do Dreamweaver, isso serve só para facilitar a sua visão no programa com relação a resolução do seu desktop. Esse botão não influencia em nada no tamanho da sua página html, é mais para um efeito de conforto ao trabalhar com o programa. | |
Barra de Ferramentas Comum | |
 | |
| 1 - Hiperlink - Ao apertar esse botão aparecerá uma caixa onde vc pode escolher nome, arquivo, destino e etc do seu link. 2 - Link de correio eletrônico - ao apertar aparece uma caixa onde você digita o texto e o endereço do link de e-mail que quer fazer link. 3 - Âncora com nome - Âncora é um auxiliar que você coloca em uma certa parte da sua página html e depois coloca um link para essa ancora em outra parte da página, por exemplo eu posso colocar uma âncora em uma palavra no topo dessa página e fazer um link para essa âncora aqui. (EX: Área de trabalho) 4 - Tabela - ao apertar aparece um tela onde você escolhe tamanho, linhas, colunas e etc. 5 - Camada(Layers) - Esse botão desenha os famosos layers pelo qual todos são doidos, realmente usar layers é realmente muito melhor que trabalhar com tabelas. Ao apertar neste botão é só você posicionar o mouse na área do projeto eaonde vc queira que apareça por exemplo os posts do seu template e desenhar. Funciona como desenhar um retangulo no Paint Brush. 6 - Inserir Imagem - Ao apertar esse botão você visualiza uma tela onde vc escolhe a Url da sua imagem, entre outras características. 7 - Alocador de espaço de imagem - serve para você adaptar uma imagem que não cabe em um certo lugar ao tamanho que você desejar e que caiba no espaço que lhe tiver disponível. 8 - Html do Fireworks - serve para colocar um html mostrado pelo Fireworks. Como o Fireworks é um editor de imagens próprio para web ele também visualiza a imagem no IE e fornece o código html para ser enviado para o Dreamweaver. (usuários avançados). 9 - Flash - Serve para colocar um arquivo flash. 10 - Imagem Cambiável - É aquele tipo de link de imaçem onde aparece uma imagem e quando você passa o mouse por cima aparece outra. Funciona como a função Hover de css de links. 11 - Barra de Navegação - Inserir Barra de Navegação, não é interessante para usuários iniciantes. 12 - Régua Horizontal - Serve para inserir aquela barra divisória de dois blocos de textos por exemplo. 13 - Data - Iserir Data e Hora 14 - Dados tabulares - Serve para ajustar parágrafos, não é importante (eu nunca usei). 15 - Comentários - Adiciona comentários ao código html... Esses comentários não aparecem no resultado da página. 16 - Seletor de tags - Muito útil quando você esquece aquela tag super importante e não lembra, você aperta e entra em uma telinha onde você procura e adiciona a tag desejada. | |
Painel de Propriedades | |
 | |
| O painel de propriedades provavelmente já está aberto ao abrir o Dreamweaver. Ele funciona sempre que você sublinha alguma coisa, marca, um texto, uma imagem, uma tabela, um link ou qualquer outra função do Dreamweaver. Portanto se você esta procurando como editar uma tabela (por exemplo) é só você marcar a ordar da tabela com o mouse e as propriedades irão aparecer neste painel. Esta é a aparência principal do painel, ela muda sempre que algo é selecionado dando opções novas opções aos usuários. 1 - Formato - Aqui você pode escolher o formato de parágrafo que todos nós já conhecemos através dos programas do Office. 2 - Fonte - Aqui você escolhe a fonte do seu texto. Geralmente na lista principal estão somente as fontes padrões, se quiser colocar alguma você tem que editar clicando no item editar lista, no mesmo menu de escolha de fonte. 3 - Tamanho - Escolhe o tamanho da fonte. 4 - Cor - Aqui você escolhe a cor do seu texto. 5 - Caixa de código da cor - Ao escolher uma cor o seu código html aparece nessa caixa. Caso a cor que você gostaria de usar não esteja disponível, é só você colocar o código da cor nesse campo que o programa reconhece. 6 - Link - Ao sublinhar um texto, digite nesse campo o url destino do seu link, após isso o seu link está pronto. 7 - Procurar arquivo - Se um texto estiver sublinhado e você quiser fazer link para um arquivo é só apertar nessa pastinha e procurar o arquivo. 8 - Destino - Nesse campo você escolhe se o link vai abrir em uma janela nova (_blank) na mesma janela (_self), em outra janela que já esteja aberta (_parents) e (_top) ao qual vocês me desculpem eu não sei pra que serve. (tentei descubrir mas não consegui). 9 - Da Esq. para a Direita: todos conhecidos, Negrito, Itálico, Alinhar à esquerda, alinhar ao centro, alinhar à direita, Justificar. | |
Painel Design | |
 | |
| Esse painel serve para os estilos css. Com isso você não precisa ficar editando cada frase que você digitar no seu texto. Nele você pode editar por exemplo links, body(corpo da página), fonte, cores e estc (Estes serão direcionados a todo o documento) e os estilos classe que você pode direcionar para uma parte do documento (Ex de estilo classe: você crias o estilo css .div e na parte do documento que você queira usar as características desse estilo é só dentro da tag por exemplo | class="div">... | . Você pode colocar ná tag que quiser, como
 | |
| Nesse painel é aonde você começa a editar os estilos classe. 1 - Link - Fazer link para um estilo em outra página ou em um arquivo esterno ao documento. 2 - Novo - Adicionar novo estilo css ao documento ao apertar esse botão vai aparecer o painel que nós vemos mais abaixo... 3 - Concluído - ao apertar esse botão conclui a edição da página de estilos, claro que isso não impede você de voltar aqui para editar o que você não achou que ficou bom. 4 - Área de estilos - Nessa área ficam listados todos os estilos que você adicionou. Para voltar a edita-lo é só clicar duas vezes no que você deseja editar ou clicar nele uma vez e apertar o botão Editar. Para remover é só clicar no que deseja excluir e apertar o botão Remover. | |
 | |
Essa é a tela onde você define qual é o estilo que quer formatar ou onde você define um estilo classe. | |
| |
Assinar:
Postagens (Atom)