Curso INFO de Flash e Photoshop CS3

Posted by Richard Quintanilha On 11:19 0 comentários

Obs.: Agradeço a Ramon Sousa do blog Castelo Web, pela indicação do site, valeu Ramon a galera daqui te agradece.

As boas novas do Flash.

Nascido há dez anos como um programa simples de criação de animações na
internet, o Flash evoluiu para uma plataforma de desenvolvimento de respeito.Na novíssima versão CS3, a primeira sob a direção da Adobe, o Flash ganhou novas ferramentas de desenho, componentes prontos mais fáceis de personalizar e recursos para auxiliar na produção de conteúdo para celulares e handhelds. Ganhou também mais integração com o Photoshop, melhorando a produtividade do usuário. Neste curso, vamos apresentar os principais recursos do Flash, destacando as novidades da versão CS3. Abordaremos desde a utilização e vídeo.
Confira aqui

Photoshop para toda Obra.

O que era bom ficou melhor. O Photoshop, ferramenta poderosa para o tratamento de imagens, traz, na versão CS3, novidades muito bem-vindas. Interface baseada em painéis e botões, recursos melhorados, novas ferramentas que favorecem a produtividade e um organizador de imagens mais sofisticado fazem parte do pacote.
O novo Photoshop é oferecido em duas versões: CS3 e CS3 Extended. A CS3 se
destina a fotógrafos, designers gráficos, web designers e profissionais de impressão.
Já a CS3 Extended acrescenta recursos para profissionais multimídia, médicos e
arquitetos. Entre eles destacamos a edição quadros de vídeo, de objeto 3D e a produção de animações. Neste Curso Info, vamos explorar os principais recursos do software, incluindo novidades da versão Extended.
Confira aqui

Categories:
Posted by Anônimo On 21:08 0 comentários

Meu primeiro tutorial Galera, desculpa a demora estava doente e sem net...

Espero que gostem..

Ps: Fonte, webtutoriais...

Categories:

Botões Macintosh

Posted by Bruno Leonardo On 10:02 0 comentários



Botões Macintosh

O efeito translúcido inspirado nos iMac que afectaram tudo desde computadores, telefones, monitores até canetas e ratos.
Com este tutorial vamos aprender as técnicas que permitem criar este brilhante efeito e aplicá-lo em interfaces comuns na Web, com o Corel Draw.Desta forma teremos vectores facilitando os redimensionamentos, a impressão e a utilização dos botões noutros programas como o Flash, o Director ou em apresentações Corel R.A.V.E.
Como bónus irás ter a possibilidade de praticar alguns efeitos do Corel, aplicar perspectivas e criar formas não muito fáceis de desenhar.
Iniciaremos

Em primeiro lugar, vamos começar por criar as formas básicas do botão.
Com a ferramenta rectângulo desenha um botão com um tamanho que te agrade
Escolhe a ferramenta forma agarra um dos quatro cantos e cria um rectângulo arredondado


O teu rectângulo deve estar parecido com este.

Escolhe a ferramenta selecção (a primeira de todas as ferramentas). Pressiona a Tecla Shift e arrasta uma das alças da largura do rectângulo até a status bar (barra que está no fim do documento) mostrar cerca de 80 - 85 porcento. Mantêm pressionado o botão esquerdo do rato e dá um clique com botão direito. Liberta agora o botão esquerdo para finalizares a transformação.


Ao dares um clique no botão direito do rato, uma cópia do rectângulo é criada deixando o original no sítio.

Selecciona o novo rectângulo, pressiona a tecla shift outra vez. Agora escolhe uma das alças da altura e arrasta-a até a status bar mostrar uma alteração entre 15 - 20%.
Enquanto pressionas a tecla Ctrl, arrasta o pequeno rectângulo até ao fundo do rectângulo original, verifica se deixas um pequeno espaço como mostrado na imagem abaixo.



O pequeno rectângulo é colocado estrategicamente no fundo do rectângulo original

Cria agora um novo rectângulo e arredonda os cantos da mesma forma usada no 1º.Este novo rectângulo deve ser comprido e fino

Um terceiro rectângulo é criado com os cantos arredondados

Arrasta a alça da altura do 3º rectângulo com a tecla Shift pressionada para cerca de 150%.

A altura do novo rectângulo é ajustada

Move agora o novo rectângulo para o topo do 1º. Deixa apenas uma pequena margem entre o rectângulo original e o novo rectângulo.Selecciona agora o novo rectângulo, (o que criaste a pouco) e e escolhe no menu em cima Effects > Add Perspective a ferramenta forma fica activa.
Pressionado ambas as teclas Shift e Ctrl agarra primeiro a alça do topo e depois a do fundo para aplicares um efeito de perspectiva ao rectângulo como mostra a imagem de baixo.

Ao arrastares as alças dás ao botão uma aparência 3d

Temos agora criados todos os rectângulos necessários. Compara o teu trabalho com a imagem abaixo.

As tuas formas devem estar parecidas com esta.

Precisamos agora de definir as cores que iremos usar no botão. Sente-te a vontade para escolheres o esquema de cores que mais te agrade. Nós iremos aplicar as cores características do iMac.

Selecciona o 1º rectângulo (aquele que criamos no inicio) e preenche-o com a cor Azul Marinha (HSB: 220, 100, 60). Retira-lhe o Outline.
Selecciona o 2º rectângulo (aquele que está no fundo do 1º) e preenche-o com a cor (HSB: 189, 100, 100). Retira-lhe também o Outline.
Selecciona por fim o 3º rectângulo e preenche-o de branco sem Outline


Cria agora um novo rectângulo e arredonda os cantos da mesma forma usada no 1º.Este novo rectângulo deve ser comprido e fino

Depois de preencheres todos os rectângulos o resultado deve ser este


Selecciona a ferramenta Interactive Blend


Clica a partir do centro do 2 rectângulo até ao centro do 1º rectângulo, criando uma mistura de cerca de 20 steps (passos).


A mistura de cor foi aplicada

Com o 3º rectângulo seleccionado escolhe a ferramenta Interactive Transparency



Com a tecla Ctrl, clica e arrasta a apartir do topo do 3º rectângulo até ao fim do mesmo de modo a criar um esbatimento.

A imagem depois de aplicarmos a transparência interactiva

Por fim para fazermos com que o nosso botão fique realmente brilhante e translúcido, deveremos aplicar uma sombra sobre o botão.

Selecciona o 1º rectângulo. Se a Status bar disser qualquer coisa como "Control Rectangle on Layer 1" seleccionas-te o correcto, se disser "Blend Group on Layer 1" seleccionas-te o errado.

Selecciona a ferramenta Interactive Drop Shadow


Com a tecla CTRL pressionada arrasta do centro do botão até ultrapassar ligeiramente o fim do botão.

clica e arrasta o drop shadow

Para finalizarmos o botão resta-nos inserir um texto.
Com a ferramenta Text escreve o teu texto. Nós usamos a palavra "designer" com a fonte TahomaEscolhe a ferramenta Interactive Drop Shadow outra vez e aplica uma pequena sombra ao texto de modo a realçar a palavra.

Com o texto lá dentro temos por fim o nosso botão criado

Fonte:www.truquesedicas.com/tutoriais

Categories:

Tutoriais para Dreamweaver - Do começo

Posted by Aimée Bruzzi On 16:05 2 comentários

  • Dreamweaver é um editor html WYSIWYG (What You See Is What You Get) editado pela Macromedia
    que se distinge dos outros pela possibilidade de dar dinamismo as páginas, utilizando o DHTML
    (Dynamic html).

  • A construção das páginas faz-se dentro de uma janela com 3 janelas flutuantes: a 1ª serve para
    inserir diferentes objectos (Window > Objects), a 2ª permite modificar as propriedades dos elementos seleccionados (Window > Properties) e a 3ª serve para abrir outras janelas como a do código html, a dos behaviores (comportamentos) (Window > Launcher), ou
    ainda a janela de gestão do site.



Dreamweaver interface

Dreamweaver interface





  • A primeira coisa a fazer assim que abrimos o Dreamweaver é aceder à área de trabalho (site) se esta existir, senão terás de cria-la da seguinte maneira:

    1. Na barra do menu, fazer Site > New Site....

    2. Deverá aparecer uma janela (Site Definition), onde irá dar um nome a área de trabalho do site, e a sua localização no disco rígido (será um directório a sua escolha).

    3. Com isto a janela de gestão do site vai ser construída. Aqui poderás criar, apagar, copiar,... ficheiros e directórios.

1

2 - "site Definition"

3 - Janela de Gestão do site






  • Na janela de gestão ( Site > Site Files) do site é onde se organiza o site. Aqui pode-se criar uma pagina "html" (na barra do menu, File > New File) com o nome desejado, ao executar o novo ficheiro ele irá abrir no interface do Dreamweaver , onde iremos construir a nossa página... Aqui podemos alterar o nome de um ficheiro, com a particularida do Dreamweaver alterar automaticamente os links a esta página o que é muito útil.



    • Assim que entrares no ambiente do dreamweaver, uma das primeiras coisas a fazer é abrir as propriedades da página.

      1. Para isso tens de aceder ao Modify > Page Properties. Ou ainda mais rápido é com o atalho Ctrl+j.

      2. Nessa janela podes dar um título a página, escolher uma imagem de fundo ou uma cor, também podes escolher a cor dos textos e dos links.

    1

    2







    Janela de objectos

    • O Dreamweaver, dá-nos 3 janelas flutuantes (objects, properties e launcher) para podermos trabalhar. Caso que estas não aparecem, podemos activa-las indo em Window na barra menu.


    • A 1ª janela que nos aparece é a dos objectos (figura à direita). Desta janela só vou falar de 4 objectos (aqueles que são mais usados).

    • Apesar de não estar em primeiro, vou começar por falar das layers. As layers vieram revolucionar as páginas html! Imagina as layers como um quadro invisível, que controlas completamente a sua posição e o seu tamanho. Quando alteras uma propriedade a uma layer todo o seu conteúdo é afectado (imagens, tabelas, texto,...) Por isso aconselho-te que todos os objectos que criares estejam dentro de uma layer. Se queres inserir uma imagem numa layer, tens de a criar e depois com o cursor a piscar dentro da layer clica no botão de inserir imagem, a mesma coisa se quiseres inserir uma tabela ou um rollover image.


    • Esta janela apresenta sempre as propriedades do objecto que está seleccionado.

    • Se tiveres uma imagem seleccionada a janela permite-te: dar um nome à imagem, alterar a largura e altura, dar-lhe um link, um alt, até podes edita-la.

    • As propriedades das layers são bastante importante, sobretudo se queres controlar a sua posição com precisão. Podes alterar a sua profundidade, a sua visibilidade, inserir uma imagem ou uma cor de fundo, entre outras coisas.










    Propriedades de uma layer




    Propriedades de texto



    Propriedades de uma tabela



    Propriedades de uma imagem












    Fonte: http://www.truquesedicas.com/tutoriais/dreamweaver/00001a.php

Categories:

Vetor X Bitmap

Posted by Richard Quintanilha On 13:47 0 comentários

Vetor

As imagens vetoriais são objetos gráficos desenhados, que independente de resolução ou seja você pode aumenta um formiga até o tamanho de um elefante, mantendo o mesmo nível de detalhamento visual, clareza e bordas regulares na impressão.

Bitmap

São formadas em mapas de bits, elas são criadas ou armazenadas como equações matemáticas puras, ao serem criadas, exigem que o usuário especifique resoluções e dimensões da imagem no momento em que são criadas.

Resolução: É a qualidade da imagem.

Vantagens e Desvantagens:

"Com uma descrição em modo BITMAP, os dados são armazenados diretamente numa memória de vídeo (tipo vídeo RAM). O armazenamento e a leitura deste tipo de imagens é relativamente rápido e fácil. Entretanto o tamanho dos arquivos finais (estacados em disco) de imagens bitmaps são diretamente associado ao tamanho e a resolução da imagem. Se você fizer um "zoom" na imagem você terá a sensação de ver pixels grandes e quadrados pois você atingiu a resolução máxima da imagem. O trabalho com imagens do tipo bitmap podem ser extremamente complexos e muito dependente de softwares profissionais (ex. Adobe Photoshop) que disponibilizam ferramentas poderosas para a seleção de áreas precisas da imagem.

Uma imagem descrita na forma vetorial precisará de uma técnica de "RENDERIZAÇÃO", de uma conversão dos elementos básicos (pontos, círculos , ...) na forma de uma imagem, porque a maior parte das placas de vídeo modernas possibilitam apenas o trabalho com memórias de vídeo organizadas sob forma bitmap. Por outro lado, uma imagem vetorizada não perderá em definição (resolução) ao ser reduzida ou ampliada, pois cada elemento pode ser recalculado em função da nova resolução. Estas imagens são bastante utilizadas pois permitem se adaptar função da qualidade de impressão que temos disponível. Podemos trabalhar com uma imagem na tela do computador (96dpi) e enviar para impressora objetos com maiores resolução (ex.600dpi). Outra grande vantagem de imagens vetoriais e poder selecionar facilmente diferentes objetos no seu interior e conseqüentemente isolá-los para trabalhar."(Fonte: http://www.cbpf.br/~mpa/bitxvet.htm)

Pixels: São pontos luminosos coloridos ou não formando a imagem.

Categories:

Por uma chama no mouse

Posted by MaRio AxL On 11:18 1 comentários

Fala ae pessoal!!! estou aqui para postar meu primeiro tutorial!!
Não vai ser uma parada muito complexa não é?! mesmo porque é um tutorial básico para iniciantes...
Então vamos lá:


1°- Primeiro começamos abrindo um novo projeto no Flash...Depois de abrir o Flash, vamos desenhar uma esfera com a cor mais parecida com uma chama( laranja ou vermelho). Para ficar mais parecido com uma chama usaremos a ajuda do radial. Abaixo segue uma figura demonstrando...



2°- Bom...Agora precisamos fazer um Movie Clip.É só clicar no menu de Insert e escolher a opção de New Symbol. Ae quando aparecer a caixa de diálogo,só escolher a opção Movie clip, e daremos o nome de chama.Após criar o nosso movie clip, vamos copiar para dentro dele a esfera que acabamos de criar,posicionando no centro do movie clip.

3°- Em nossa linha do tempo iremos criar uma Keyframe na frame 20.Para tal vamos clicar uma vez sobre o frame 20 e pressionar a tecla F6. Em seguida,vamos arrastar para cima um pouco a nossa esfera, devemos tornar o alpha para os 0%.

4°- Na frame 21 vamos colocar uma Blank keyframe. Para fazer é só clicar com o botão direito do mouse no frame 21 e escolher a opção Insert Blank Keyframe.

5°- Em seguida. Sobre a frame 21, com o botão direito do mouse, vamos escolher a opção de Actions e inserir a seguinte linha de comando:

stop( );


6°- Agora criaremos um novo Movie Clip de acordo com os passos feitos anteriormente. coloque o nome de Puff, e com o mesmo nome à Instance Name. copie para dentro do novo movie clip uma copia do primeiro movie clip...





7°- Neste movie clip, vamos acrescentar uma nova layer e vamos da o nome de actions. Nessa nova layer vamos criar uma Keyframe, na frame 1 e acrescentar o seguinte código:

duplicateMovieClip(_root.smoke.puff,puff+c,c);
setProperty(_root.smoke.puff,_rotation,randon(6));



8°- Na frame 2 da layer actions, coloque o seguinte código:



c= c+1;
if(c>20){
c=0;
}
gotoAndPlay(1);

9°- Depois clique sobre o botão Scene 1 ou sobre a seta do lado esquerdo.

10°- Vamos criar em nossa cena principal mais uma layer. Uma será para actions e a outra para os nossos filmes. Então, na layer 1, frame 1, vamos colocar o nosso ultimo filme, onde criamos a nossa animação. Daremos o nome de smoke na Instance Name.

11°- Agora copie o seguinte código para a layer 2, frame 1


startDrag(_root.smoke.puff,true)

12°- Pronto chegamos a fase final, vamos testa a nossa criação. Para isso é só pressionar simultaneamente as teclas Ctrl+Enter.




Bom galera por aqui fica meu primeiro tutorial (*-* auUAh )
Espero que vocês gostem...
Abraços


By: Mario Medeiros =D





Categories:

Ferramentas

Posted by Trunfo do Designer On 19:54 1 comentários

O que é o Adobe Photoshop ?

Adobe Photoshop é um software caracterizado como editor de imagens bidimensionais do tipo raster (possuindo ainda algumas capacidades de edição típicas dos editores vectoriais) desenvolvido pela Adobe Systems. É considerado o líder no mercado dos editores de imagem profissionais, assim como o programa de facto para edição profissional de imagens digitais e trabalhos de pré-impressão.

Sua mais recente versão é apelidada como Adobe Photoshop CS4 (sigla cujo significado é Creative Suite 4, correspondente à décima primeira edição desde seu lançamento), disponível para os sistemas operativos Microsoft Windows e Mac OS X. Pode ser rodado também no Linux, através da camada de compatibilidade Wine. Algumas versões anteriores foram lançadas também para IRIX, mas o suporte a esta versão foi descontinuado após a versão 3.0.

Utilizado na edição de imagens.

Fonte: http://pt.wikipedia.org/wiki/PhotoShop


O que é Dreamweaver ?

O Adobe Dreamweaver, antigo Macromedia Dreamweaver é um software de desenvolvimento voltado para a web criada pela Macromedia (adquirida pela Adobe Systems), e que está atualmente na versão CS4. Suas versões iniciais serviam como um simples editor HTML WYSIWYG ("What You See Is What You Get", ou "O que você vê é o que você tem"), porém as suas versões posteriores incorporaram um notável suporte para várias tecnologias web, tais como XHTML, CSS, JavaScript, Ajax, PHP, ASP, ASP.NET, JSP, ColdFusion e outras linguagens Server-side.

Utilizado na criação de Sites.

Fonte: http://pt.wikipedia.org/wiki/Dreamweaver


O que é Adobe Flash ?

Adobe Flash (antes: Macromedia Flash), ou simplesmente Flash, é um software primariamente de gráfico vetorial - apesar de suportar imagens bitmap e vídeos - utilizado geralmente para a criação de animações interativas que funcionam embutidas num navegador web. O produto era desenvolvido e comercializado pela Macromedia, empresa especializada em desenvolver programas que auxiliam o processo de criação de páginas web.

Utilizado para fazer animações.

Fonte: http://pt.wikipedia.org/wiki/Adobe_Flash


O que é Corel Draw ?

O CorelDRAW é um programa de desenho vetorial bidimensional para design gráfico desenvolvido pela Corel Corporation, Canadá. É um aplicativo de ilustração vetorial e layout de página que possibilita a criação e a manipulação de vários produtos, como por exemplo: desenhos artísticos, publicitários, logotipos, capas de revistas, livros, CDs, imagens de objectos para aplicação nas páginas de Internet (botões, ícones, animações gráficas, etc) confecção de cartazes, etc.

Fonte: http://pt.wikipedia.org/wiki/Corel_draw

Categories:
Assinar: Postagens (Atom)