You are currently browsing the tag archive for the ‘Tutorial’ tag.

Olá galera. Hj vou passar algo que ainda não tinha feito aqui no Inatitude. Um tutorial de como fazer um sistema de comentário simples em Php.

Pra fazer o tutorial vc vai precisar criar x arquivos:

  1. index.php (que vai conter o formulário para a interação do internauta)
  2. conexao.php (vai fazer a conexão com o banco de dados)
  3. validar.php (que vai fazer a validação dos dados enviados pelo formulário e enviá-los ao banco de dados)

Vamos começar com o index

Abra um editor php de sua preferência e vamos inserir as seguintes linhas

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Sistema de comentário</title>
</head>
<body>
<h1>Digite seu comentário</h1>
<form method=”post” action=”validar.php”>
<div>Nome: </div>
<div><input type=”text” name=”nome” />
</div>
<div>Email: </div>
<div>
<input type=”text” name=”email” />
</div>
<div>Comentário: </div>
<div>
<textarea cols=”30″ rows=”5″ name=”comentario”></textarea>
</div>
<hr />
<div>
<input type=”submit” value=”Enviar” />
</div>
</form>
</body>
</html>

A princípio nada de php. Mas é importante vermos alguns pontos. Repare que eu deixei alguns pontos do código em vermelho. Apesar disso ser HTML ele será importante para a interação com o Php.

Onde vemos “method=post” estamos dizendo que o método de envio dos dados será através do post.  Algusn podem estar se perguntando “Qual é a diferença entre os metodos post e get?”. Bem, o método post faz o envio dos dados de maneira “invisível”. Já o método get usa as urls para enviar as informações deixando dados importantes à mostra (o que pode ser perigoso).

Onde vemos “action=validar.php” estamos dizendo para qual página vamos enviar os dados do formulário.

Repare que no formulário eu defini uma propriedade name (name=”nome”) para cada um dos campos criados. Isso irá identificar os campos que serão enviados ao php.

Salve essa página com o nome “index.php”.

Definido a primeira etapa vamos até o banco de dados mysql e vamos criar a tabela necessária para armazenar as informações que serão enviadas pelo formulário.

Crie um novo banco de dados chamado “aula” como mostra a figura abaixo.

Agora crie a tabela que será usada para armazenar os dados conforme mostra o exemplo abaixo

Repare que no campo “Número de arquivos” eu defini o número 4. Por que quatro? Porque nós vamos armazenar nesta tabela quatro linhas de informação de dados.

  1. id
  2. nome
  3. email
  4. comentario

Exatamente o nome dos campos que usamos para criar o formulário acrescido de um “id” que identificará numericamente cada dado enviado. Complicado? Fica de boa, daqui a pouco vc vai entender melhor.

Preencha os campos conforme o exemplo abaixo:

Vamos explicar cada campo:

  1. No campo id eu defini o tipo de informações que ele receberá como INTt (números inteiros) índice PRIMARY (definida uma chave primária) e A.I. (Auto Incremento)
  2. Nos campos nome e email defini o tipo de informações como VARCHAR (string) e com no máximo 50 caracteres permitidos
  3. No campo comentario eu defini o tipo de dado como TEXT para que não haja limitação de caracteres.

Cliquem no botão salvar e pronto. Criamos nossa tabela.

Vamos criar agora o arquivo conexao.php

O arquivo vai pedir para que vc informe o servidor que vc está usando, o usuário e a senha. Também vai pedir o banco de dados que vc vai usar. Mas como eu faço para saber o usuário e a senha do servidor que eu estou usando? É fácil, na raíz da mysql (geralmente este endereço http://127.0.0.1/home/mysql/) procure por um link chamado privilégios. Clique nele e lá vc encontrará o nome do seu servidor, usuário e senha.

Repare que aqui eu tenho todas as informações que preciso.

  • Usuário : root
  • Servidor : localhost
  • Senha : não tem senha

Com base nestas informações, crie um arquivo novo chamado conexao.php e insira as seguintes linhas.

<?php
$conectar = mysql_connect(‘localhost’,’root’,’ ‘) or die (“Erro ao se conectar com o servidor ” . mysql_error());
$banco = mysql_select_db(‘aula’) or die (“Erro ao se conectar com o banco de dados ” . mysql_error());
?>

Explicando as linhas.
$conectar = mysql_connect(‘localhost’,’root’,’ ‘) or die (“Erro ao se conectar com o servidor ” . mysql_error());
Aqui eu criei uma váriável chamada $conectar e atribuí o comando mysql_connect (que faz a conexão com o servidor). Repare que entre parênteses eu defini o nome do servidor, usuário e senha conforme indicado no link de privilégios. O comando or die reporta um possível erro.
$banco = mysql_select_db(‘aula’) or die (“Erro ao se conectar com o banco de dados ” . mysql_error());
Nesta eu criei uma variável chamada $banco que escolhe o banco de dados que eu vou usar para fazer as interações com o php (no nosso caso o banco de dados  aula).
Salve o arquivo com o nome conexao.php.
Vamos criar o arquivo validar.php.
Pra que vai servir esse arquivo? Pra três coisas.
  1. Receber os dados do formulário
  2. Validar esses dados
  3. Inserir os dados no banco de dados (mais precisamente na tabela “comentarios”)

Vamos ao primeiro passo que é receber os dados do formulário. Para isso, vamos criar uma variável chamada $nome e definir o comando $_POST[‘nome’];

Vai ficar assim:

$nome = $_POST[‘nome’];

Explicando a linha.

Criei uma variável chamado $nome e defini o comando $_POST[]. Este comando irá buscar os dados postados pelo formulário (lembra do método que usamos para enviar os dados?). Claro que pra isso eu preciso identificar qual campo ele vai buscar pra armazenar na variável. Basta definir a name do campo que vc quer dentro do colchetes [ ] e com aspa simples ficando conforme está mostrado  nas linhas acima.

É bom ressaltar que vc pode inserir vários comandos de segurança aqui mas vamos deixar isso pra outra aula, ok?

Faça o mesmo com os outros campos do formulário (email e comentario)

Seu arquivo ficará assim.

$nome = $_POST[‘nome’];
$email = $_POST[‘email’];
$comentario = $_POST[‘comentario’];

Vamos começar a validar os dados. Vai ser algo bem simples e rápido, ok? Vou deixar uma aula só de validações de dados pra vcs em um outro tuto. Vamos dizer que todos os campos do formulário precisam ser preenchidos, senão ele não envia os dados para o banco de dados.

Pra isso vamos usar a estrutura if

if(empty($nome)){
echo “<script>alert(‘Atenção! O campo nome não pode ficar em branco. )</script>”;
echo ‘<script>history.back();</script>’;
}

Outro comando simples. bastou usar dentro o if o comando empty($nome). este comando diz que a variável $nome está vazia. Se ela estiver vazia o php executa os comandos dentro das chaves {}. No nosso caso eu defini um alert do javascript pra informar o erro e um history.back para voltar à página anterior (o index)

Podemos inserir os mesmos comandos para as outras variáveis ($email e $comentario). Nosso script vai ficar assim.

if(empty($nome)){
echo “<script>alert(‘Atenção! O campo nome não pode ficar em branco. )</script>”;
echo ‘<script>history.back();</script>’;
} else if(empty($email)){
echo “<script>alert(‘Atenção! O campo email não pode ficar em branco. )</script>”;
echo ‘<script>history.back();</script>’;
} else if(empty($comentario)){
echo “<script>alert(‘Atenção! O campo comentario não pode ficar em branco. )</script>”;
echo ‘<script>history.back();</script>’;
}

Entendendo a lógica. Se o campo nome estiver vazio ele vai vai informar o erro e voltar ao index. Se não ele vai fazer o teste para o campo email.  E assim por diante. Se todas as requisições forem atendidas ele pode inserir os dados no banco de dados. Pra isso vamos pedir para o php buscar as informações do arquivo conexao.php. Vc pode deixar esse comando no topo do script.

O comando usado é require(‘conexao.php’);

Até agora o nosso script deve estar com esse formato

require(‘conexao.php’);

$nome = $_POST[‘nome’];
$email = $_POST[‘email’];
$comentario = $_POST[‘comentario’];

if(empty($nome)){
echo “<script>alert(‘Atenção! O campo nome não pode ficar em branco. )</script>”;
echo ‘<script>history.back();</script>’;
} else if(empty($email)){
echo “<script>alert(‘Atenção! O campo email não pode ficar em branco. )</script>”;
echo ‘<script>history.back();</script>’;
} else if(empty($comentario)){
echo “<script>alert(‘Atenção! O campo comentario não pode ficar em branco. )</script>”;
echo ‘<script>history.back();</script>’;
}

Vamos inserir os dados no banco de dados.

Pra isso vamos usar este comando dentro do else

$inserir = mysql_query(“INSERT INTO comentarios (nome, email, comentario) VALUES (‘$nome’, ‘$email’, ‘$comentario’)”);
echo “<script>alert(‘Dados enviados com sucesso!)</script>”;
echo ‘<script>history.back();</script>’;

Explicando o código.

Criei uma variável $inserir que executa o comando mysql_query. O mysql_query executa um comando mysql que está em uma string (no nosso caso esta string “INSERT INTO comentarios (nome, email, comentario) VALUES (‘$nome’, ‘$email’, ‘$comentario’)”) Este comando diz que os dados serão inserido (INSERT) dentro da tabela comentarios (into comentarios) e os campos nome, email e comentario (nome, email, comentario) são iguais respectivamente (VALUES) às variáveis $nome, $email e $comentario (‘$nome’, ‘$email’, ‘$comentario’). repare no uso das aspas simples para definir as variáveis. Não vá esquecer elas, hein? Eu vivia esquecendo esse detalhe.

Depois eu defini uma alert para dizer ao usuário que os dados foram enviados com sucesso e volto para o index.

Está quase pronto. Só falta exibir esses dados na index.

Abra o arquivo novamente e abaixo do formulário defina os seguintes comandos.

<?php
require(‘conexao.php’);
?>

Primeiro vamos fazer a conexão com o servidor e com o bando de dados usando o arquivo conexao.php

continuando…

$tabela = mysql_query(“SELECT * FROM comentarios ORDER BY id DESC”);
Aqui eu criei uma variável chamada $tabela que executa o comando mysql (mysql_query que busca a tabela comentarios (SELECT * FROM comentarios) e ordena os dados de forma decrescente pela id (ODER BY id DESC). Caso vc queira que os dados sejam exibidos de maneira ascendente basta substituir o DESC por ASC.

continuando…

$exibir = mysql_fetch_array($tabela);
Nesta linha de comando nós vamos armazenar dentro da variável $exibir os dados do banco de dados. O problema é que são muitos dados, como podemos armazenar tantas informações em uma variável? É aí que entra o comando mysql_fecth_array. Ele busca os dados do banco de dados (que está armazenada na variável $tabela) e define setores de posicionamento dos dados na variável.

Vamos exibir os dados que vc vai entender.

Se inserirmos o comando echo $exibir vc vai ver na tela algo como array. então nós só precisamos definir o campo da tabela que queremos exibir

Vamos tentar o comando echo $exibir[‘nome’];

Pronto, este comando exibe o conteúdo da variável no setor que representa o campo nome

Vc pode ainda concatenar tags html ao comando php

echo $exibir[‘nome’] . “<br />”;
echo $exibir[‘email’] . “<br />”;
echo $exibir[‘comentario’] . “<hr />”;

O problema é que ao testar vc vai perceber que só aparece um comentário. Como eu faço para aparecer todos?

Basta usar a estrutura while. A estrutura while executa os comandos dentro da chave enquanto ele encontrar comentários.

while($exibir = mysql_fetch_array($tabela)){
echo $exibir[‘nome’] . “<br />”;
echo $exibir[‘email’] . “<br />”;
echo $exibir[‘comentario’] . “<hr />”;
}

O index.php ficará com esse formato.

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Sistema de comentário</title>
</head>
<body>
<h1>Digite seu comentário</h1>
<form method=”post” action=”validar.php”>
<div>Nome: </div>
<div><input type=”text” name=”nome” />
</div>
<div>Email: </div>
<div>
<input type=”text” name=”email” />
</div>
<div>Comentário: </div>
<div>
<textarea cols=”30″ rows=”5″ name=”comentario”></textarea>
</div>
<hr />
<div>
<input type=”submit” value=”Enviar” />
</div>
</form>

<?php

require(‘conexao.php’);
$tabela = mysql_query(“SELECT * FROM comentarios ORDER BY id DESC”);
while($exibir = mysql_fetch_array($tabela)){
echo $exibir[‘nome’] . “<br />”;
echo $exibir[‘email’] . “<br />”;
echo $exibir[‘comentario’] . “<hr />”;
}

?>

</body>
</html>

Beleza galera, espero que tenham gostado. se precisarem de alguma ajuda ou ficarem com algum dúvida é só dar um toque.

abs.

Salve Galera!!!

 Hoje vou postar um tuto em Fireworks CS4. Vamos aprender a criar um CD.

Primeiro, abra seu Fireworks e configure sua tela para o tamanho para 660 x 440 (o padrão do fireworks).

fire1

Pegue a ferramenta Elipse do conjunto de ferramentas de Vetor e crie um círculo. Que tamanho? Tanto faz!!! Faz um aí, porque nós iremos configura-lo com um tamanho adequado ok?

fire2

Repare que ao terminar de desenhar o círculo o Painel de Propriedades estará exibindo informações pertinentes ao seu objeto selecionado. Repare na base da barra de propriedade que nós temos as letras L, A, X, e Y com alguns números na caixa ao seu lado! As letras L e A definem a largura e a altura do objeto e as letras X e Y definem o posicionamento da tela. Defina a largura e a altura como 400 x 400.

fire4

Faça uma cópia deste círculo (Ctrl + c  e Ctrl + v ) e visualize-o na janela ancorada da camada. Nas versões anteriores ela ficava na lateral direita da tela. Mas aí você abre o seu Fireowrks e pergunta: Cadê essa janela? Caso ela não esteja aparecendo será necessário ativa-la. Vá ao menu “Janelas” e selecione “Camadas” (você pode ativar a janela de camadas através do atalha F2).

fire5

Pronto ela irá aparecer na lateral direita da sua tela junto com as janelas de “Páginas” e “Estados”.

fire6

Repare que você tem duas camadas chamadas “Elipse”. Para facilitar a didática do tutorial, vamos renomear as camadas. A camada de cima se chamará “menor” e a de baixo se chamará “maior”.

fire7

 

Selecione a camada menor e redimensione o círculo criado de 400 x 400 para 100 x 100

fire8

 

Vamos centralizar os círculos Maior e Menor. Para isso, selecione tudo usando o atalho CTRL + A. Para centralizar os objetos nós iríamos precisar ter um baita de uma mira. Mas o Fireworks em recursos que facilitam certas edições. Para que você faça uma centralização horizontal use o atalho CTRL + ALT + 2. Repare que ao executar este atalho, com os dois círculos (menor e maior) selecionados ele alinha os objetos horizontalmente. Vamos fazer o mesmo procedimento para alinhar os objetos verticalmente. Use o atalho CTRL + ALT + 5.

fire10

Com os objetos alinhados verticalmente e horizontalmente temos nossos círculos centralizados. A idéia é usar o círculo menor para furar o círculo maior! Como?

 Com os dois objetos ainda selecionados acesse o menu Modificar, Combinar Caminhos, Perfuração

fire11

Repare que o círculo ficou com um furo no meio e as camadas “menor” e “maior” passaram a se chamar “Caminho composto”.

  fire111

Faça uma cópia do nosso novo objeto e renomeie a camada para “Centro”. Defina o tamanho deste novo objeto para 90 x 90 (lembra das letras L e A?) e centralize os dois objetos (selecione os dois objetos [CTRL + A] e use os atalhos CTRL + ALT + 2 e CTRL + ALT + 5). Sua imagem ficará assim!

fire12

Para dar um efeito mais bacana, vamos pintar a tela de preto. Selecione a ferramenta “Ponteiro”, acesse o Painel de Propriedades e procure por um quadradinho branco com o nome “tela do desenho”. Clique no quadradinho e escolha a cor preta.

fire13

Selecione o círculo maior e acesse o Painel de Propriedades. Procure pelo baldinho de tintas com as cores de preenchimento de objeto e mude de sólido para “Gradiente”. Depois selecione a opção “Cone” como mostra  a imagem abaixo!

fire14

Depois disso, selecione o quadradinho com as cores atuais do seu círculo e escolha a predefinição “Espectro” . Eeeeeeeee….

fire15

EURECA!!!!! Até que está parecido com um CD!!!

fire16

Vamos ao toque final!!!

Um CD não é tão brilhante e colorido assim!!! Precisamos dar a sensação de que o nosso CD tenha uma película protetora para tirar esse coloridão todo. Para isso, Faça uma cópia do Círculo Maior (CTRL + C e CTRL +V) e mude a cor desta cópia para “Sólido” , Cinza Escuro (#333333)

fire17

Para dar a sensação da película, mantenha selecionado a camada do CD Cinza escuro  e mude seu formato de “Normal ” para “Negação”.

fire18

Está quase terminando! Para encerrar, Vamos aparar nossa tela para que ela tenha o mesmo tamanho do CD. Acesse o menu “Modificar”, opção “Tela do desenho”, sub opção “Aparar tela do desenho”.

fire19

Eis o resultado final!

fire20

Espero que tenham gostado do Tuto. Na próxima aula faremos um disco de vinil, ainda em Fireworks CS4!

 Aquele abraço!

Hoje vamos aprender uma grande manha para que você possa dominar de uma vez por todas este poderoso aplicativo de criação de imagens vetoriais. Vamos fazer uma vetorização. Mas o que é uma vetorização? Vetorização nada mais é que o fato de você pegar uma imagem Bitmap e transformá-la em Vetor. Qual é a vantagem? Bem, teve uma vez que eu estava precisando criar um cartaz no tamanho A2 com uma determinada logomarca. Eu só tinha a imagem da Logomarca no tamanho 50px x 50px, ou seja, com baixíssima qualidade. Então bastou eu fazer uma vetorização da logomarca que ela passou a ter uma qualidade muito maior.

Vamos começar então?

Pegue a imagem abaixo e abra-a no corel através do menu Arquivo, opção Importar.

gato

A imagem é uma homenagem à Sexta Feira 13 ehuehuehueheuheuh!!!

Para fazer uma vetorização é necessário conhecer alguns pontos importantes sobre uma imagem!!! Primeiro, uma imagem é formada por pontos e nós! Os pontos indicam o caminho que uma linha deve seguir e assim, formam a imagem. Podemos dizer, inclusive que, um objeto feito em CorelDraw nada mais é que um conjunto de pontos e nós. Com a ferramenta seleção tool você seleciona o objeto criado. Com a ferramenta Forma toolsvocê seleciona os pontos e nós!

Antes de continuar a vetorização, repare na imagem abaixo.

exemplo

Veja que a imagem em questão tem 4 pontos, todos definindo uma linha reta. Por isso temos um quadrado. Quando temos controle sobre os pontos e nós podemos criar qualquer formato para objeto que você quiser. Basta ter controle sobre a ferramenta “forma”!!! Vamos imaginar que eu queira fazer uma leve curvatura na linha superior do quadrado. Primeiro, temos que levar em consideração que uma imagem pré definida pelo Corel Draw está trancada de modo que você não terá todos os controles necessários para que a curva seja feita da sua maneira. Logo, nós teremos que “quebrar a imagem” (ou tranformá-la em curva). Para isso use o atalho Ctrl + Q.

pontos

Repare que os pontos da imagem estão azuis e agora você pode editá-los individualmente e de maneira mais prática.

Para editar esse ponto e definir a direção que a linha deve percorrer para formar o traçado, use a forma. Selecione o ponto superior direito e mova-o.

pontos21

Caso você queira criar mais pontos basta posicionar a ferramenta forma na linha exatamente no local onde v0cê quer que o ponto seja criado e verifique se apareceu um sinal em formato curvo sobre o ponteiro. Dê dois cliques e pronto, criamos um novo ponto. Caso você queira deletá-lo, basta selecionar e apertar a tecla delete!

Beleza, mas eu não tive controle total sobre meu desenho, afinal os formatos que esses pontos criam são somente retos. Dá pra transformá-los em um formato curvado? Sim!! Através da barra de propriedades.

curvas1

Veja que ao selecionar um determinado ponto com a ferramenta Forma a barra de propriedades muda e passa a ter uma opção chamada “Converter Linha em Curva” (como mostra a imagem acima).

Selecione a ferramenta Converter Linha em Curva e veja que a linha passa a ter duas setas que indicam o caminho que ela deve percorrer. Use a “Forma” para indicar o novo caminho e veja como você conseguiu fazer a alteração necessária para determinar o formato que ela deve ter.

curvas2

Usando estes mesmos princípios, vamos trabalhar a vetorização do gato. Abra-o no CorelDraw.

Veja que esta imagem é bem escura de modo que podemos ter dificuldades em visualizar linhas pretas. Use a ferramenta “Transparência Interativa” para deixar o gato mais clarinho e assim visualizarmos melhor a imagem. Basta selecionar o gato, pegar a ferramenta Transparência Interativa e selecionar a propriedade padrão “Uniforme” e aproveite para aumentar sua opacidade como mostra a figura abaixo.

gato1

Agora que nosso gato está mais clarinho vamos começar a vetorização. É necessário lembrar que o CorelDraw só consegue pintar objetos fechados, logo teremos que ficar atentos a esse detalhe. Já vi muitos alunos fazerem vetorizações belíssimas mas na hora de colorir… Nada feito! A imagem estava com linhas abertas e por isso o comando não funcionava.

Para facilitar o trabalho vamos vetorizar as menores partes do gato. Seus olhos, por exemplo!!! Aproxime o zoom dos olhos do gato e usando a ferramenta “Mão livre” crie linhas retas ao redor dos olhos como mostra a figura abaixo.

gato21

Repare que eu não tive o menor cuidado em deixar a imagem arredondada. Minha única preocupação foi deixar a imagem fechada e contornando o olho esquerdo do gato. Vamos adicionar curvas ao objeto. Selecione a ferramenta “forma” e “converta a linha em curva”. D~e formas arredondadas ao objeto até que fique com o formato do olho.

gato3

Faça o mesmo com a pupila do olho do gato!!

Repare que eu desloquei a imagem da pupila um pouco para mostra apenas que o objeto está fechado!!! Nunca faça uma imagem com linhas abertas, sempre feche o objeto ok?

gato41

Posicione a pupila no local correto.

Vamos fazer o mesmo com o outro olho!! Não se preocupe em colorir nada, ainda!!

gato52

Vamos a uma outra parte bem fácil do gato, seus bigodes. Use a mesma técnica porém, faça com uma linha cinza clara.

gato61

Vamos a uma parte importante, as unhas do bichano!!! Faça primeiro as unhas e depois as patas. Faça como uma linha comum na cor preta mesmo como mostra a imagem abaixo!!

gato7

Vamos ao corpo do gato!!! Crie linhas retas que contornem o corpo dele sem se importar com as curvas.

gato8

Repare também que eu usei poucos pontos, deixando todo o trabalho do formato para as curvas. Você pode optar por crair vários pontos já fazendo com que o gato tenha formas mais definidas quanto a sua vetorização porém o trabalho de transforma-los em vurva será bem maior e possivelmente a arte não fique tão boa. Repare nos pelos das costas do gato (os pelos arrepiados). Vamos nos preocupar com eles depois. por enquanto vamo dar formas ao bichano. Transforme as linhas em curvas e dê formas ao seu vetor.

gato9

Vetorize os pelos do mesmo modo como vetorizamos o restante do gato.

gato10

Por fim vamos pintar a imagem. Com um detalhe, temos que respeitar as cores exatas da imagem original. Separe as imagens e veja como está ficando. Tire a transparência do gato original!

gato11

use a conta gotas para selecionar a cor amarela do olho do gato. Para isso, basta selecionar a conta gotas e clicar sobre uma parte amarelada do olho do gato. repare que a cor será exibida no canto inferior direito da tela. caso a cor não apareça por mais que você clique, selecione a opção “Amostrar cor” na barra de propriedades. Siga a imagem abaixo!

gato12

Segure o ponteiro do mouse sobre a cor que apareceu e arraste para o olho do gato. Cuidado para  imgem não ficar como está abaixo. Se você soltar a cor no olho do gato com o gráfico no formato abaixo este irá pintar o contorno. O quadrado tem que estra totalemtne preenchido ok?

gato-errado

Pinte o restante do gato usando as mesmas técnicas. Caso você não consiga pintar algum parte do gato é poque a imagem está aberta e você terá que vetorizar de novo (ai).

Eis o resultado final!!!

vetor_gato_preto

Espero que tenham gostado do tuto e até a próxima.

Esta é pra você Joel, que não pode vir na aula passada e me pediu o tutorial. Vamos estar fazendo um planeta usando os recursos doPhotoshop CS3. Nada de pegar imagens na internet, nem nada disso, só usando ferramentas do Photoshop.

Primeiro, vá em File New  e  crie um arquivo com as configurações abaixo.

pds1

Pinte sua tela de preto (use o atalho Alt + Backspace). Vá em Filter, Render, Clouds.

Repare que você terá criado algumas nuvens na tela.

psd2

Vá novamente em Filter, Render porém,desta vez vá em Diference Clouds. Repare que as nuvens ficam mais destacadas. Isso será muito útil para a criação deste planeta. Você deve eestar se perguntando, eu não poderia ir êdireto para o Diference Clouds? A resposta é não. Mesmo indo em Diference Clouds antes ele iria ativar a Clouds comum.

psd3

Vá novamente em Filter (de novo? Isto é só o começo!), acesse a opção Distort e depois Polar Coordinates.

psd4

 Repare que sua imagem começa a ter formas de um planeta porém ele está com um traço feio no meio. Isso porque a Polar Coordinates pega os dois extremos da imagem e junta-as em formato circular gerando a lista.Isso não vai dar nenhuma sensação de realismo entãovamos precisar enganar ela. Selecione a opção Polar to rectangular como mostra a figura abaixo.

psd5

Vamos renomear a camada. Dê dois clicks sobre a mesma e dê o nome de Planeta. Repare que o cadeado que trancava parcialmente a layer Background sumiu e você tem agora totral controle sobre ela.

psd6

Deixe a camada de cabeça pra baixo.Vá em Edit – Transform – Rotate 180º.

Vá novamente em Filter, Distort, Polar Coordinates e, agora sim, selecione Rectangular to Polar. Clique em Ok. Sua arte agora está com formas de um planeta sem a faixa do meio.

psd7

Usando a ferramenta Eliptcal Marquee,selecione o planeta e inverta a seleção (Ctrl+ Shift + I).

psd8

 Delete o fundo. Crie uma noca camada chamada espaço e deixe a mesma embaixo do planeta como indicado na imagem abaixo.

psd91

Para criar o espaço, vamos pintar ele de branco (????) .  Calma que vocês vão entender. Pinte de branco usando Ctrl + Backspace.  Sabe aqueles quadradinhos preto e branco que são usados para pintar os objetos no Photoshop? Inverta-os usando a setinha.

psd10

Vá em Filter, Sketch, Reticulation. Aumente a Density da ferramenta e veja as estrelas aparecerem. deixe-a doseu gosto e clique em OK.

psd11

Vamos diminuir um pouco o tamanho do planeta. Pra isso, pegue a Move Tool e ative a Show Transform Control que está na barra de propriedades.

Dimensione a imagem e aplique as transformçoes clicando no botão Apply.

psd12

Vamos pintar nosso planeta de outra cor. Com a camada doplaneta selecionada ative aopção Hue saturation (Ctrl + U). Ative a opção colorize.

Repare que aparece três opções de edição de cor.

A hue é o tom da cor;
A saturation é a saturação da cor (aqui você aumenta e diminui a força da cor)
Brightness é o brilho da imagem (mais escuro e mais claro).

Mude apenas a Hue e escolha uma cor bacana para o seu planeta. Por que não mudar a Saturation e a Brightness? Porque elas podem tirar o realismo da imagem. Veja como está ficando!

psd13

Vamos dar mais sensação de realismo ainda. Você já deve ter visto fotos deplanetas que não estão totalmente iluminados pelo sol. Aqueles que ficam com uma parte escura. Vamos fazer o mesmo. Use a ferramenta Burn Tool para criar a sombra que queremos.

psd14

Passe o mouse repetidas vezes no planeta até chegar ao resultado abaixo.

psd15

Mescle as camadas (Ctrl + E) e vamos fazer o efeito final. Vamos criar um sol nascendo atrás do Planeta.

Vá em filter, Render, Lens Flare e configure como na imagem abaixo.

psd16

O resultado final é esse aí em baixo. Espero  que tenham gostado do tuto.

planeta-pronto

Salve Galerinha!!! Desta vez o tutorial é de Javascript. Não, eu não estou ficando louco. apesar do meu foco maior é a parte de Design hoje eu resolvi mudar e parti pra programação web.

Hoje vamos ver como definir a cor de um plano de fundo quando o usuário digita um hexadecimal em uma caixa de texto de formulário, usando Javascript!! Vamos usar o Bloco de Notas do Windows para a criação desta página.

Primeiro, crie a estrutura base de uma página HTML seguindo a imagem abaixo.

index1

A princípio nada de mais. Apenas as tags de definição de cabeçalho com título da página (<head> e <title> e o corpo (<body>). Salve como index.html.

Vamos começar a incluir um formulário em nossa página (<form>). Dentro do formulário inclua a tag de criação de caixa de texto (<input type=”text”>).  Repare que foi definido um nome, tanto para o formulário quanto para a caixa de texto (hexa e cor, respectivamente). Atenção também para o fato que eu defini o nome usando letra minúscula (lembre-se que Javascript faz distinção entre letras maiúsculas e minúsculas. Ou seja, é uma Case Sensitive). Repare também na propriedade maxlength. Ela define a quantidade máxima de caracteres que poderá ser digitada na caixa de texto. No nosso caso, poderá ter  no máximo seis caracteres.

index2

Veja como está ficando no navegador.

pag1

Vamos incluir um botão que processe nossas informações. Siga o modelo da imagem abaixo. Repare que na tag <input type=”button”> foi inserido um value “Processar” (apenas para ter um rótulo no botão) e uma chamada de evento Javascript (onClick). O que é um evento? É uma chamada para uma determinada função com vários comandos. Ou seja, quando o usuário clicar no botão processar (onClick) ele irá chamar uma função chamada cores(). Fique atento para a letra maiúscula no onClick.

index3

Veja como está ficando no navegador.

pag2

Pra finalizar, vamos ao Javascript. Lembre-se das suas aulas de lógica, para que eu possa ter uma cor diferente toda vez que o usuário digitar um hexadecimal na caixa de texto, será preciso declarar uma variável. No nosso caso eu declarei com o valor “x”. Uma variável pode ser tipo texto, número, função etc. No nosso caso, eu declarei que o valor da variável é o que será digitado dentro da caixa de texto. Como o Javascript trabalha em cima dos objetos que formam uma página web, deve ser declarado os objetos usados para a formação da página.

x = document.hexa.cor.value

document = O documento na qual estamos trabalhando

hexa = O nome do formulário (lebra da name=”hexa” que foi inserido na tag form?

cor = O nome dado a caixa de texto onde é digitado o hexadecimal

value = O valor que vai ser inserido no objeto especificado.

Abaixo da declaração da variável vai a especificação da cor do documento.

document.bgColor = x

document.bgColor = Especifica a cor de plano de fundo do documento em Javascript .

x = Variável declarada anteriormente.

Para chamar este comando que está dentro das tags <head> foi declarado uma função (function) chamada cores(). O botão chama a função através do evento onClick=cores().

Ou seja, ao clicar sobre o botão ele ativa a função cores() que executa o comando que declara uma variável x cujo valor está dentro do formulário que contém uma caixa de texto e após ser definido o valor da variável ele mostra o plano de fundo de acordo com o valor de x.

Veja como vai ficar o código abaixo.

index4

Veja como fica no navegador.

pag3

Espero que tenham gostado deste tuto e até a próxima galera.

Salve galera. Pela primeira vez eu vou estar fazendo um tutorial de Photoshop aqui no Inatitude. Este é um pedido da Laíz, que está afim de lembrar como trabalhar com máscaras.

Primeiramente vamos saber o que são as máscaras do Photoshop. Este é um recurso que , assim como uma máscara comum, esconde  e exibe alguma coisa. Se você está usando uma máscara, parte do seu rosto ficará escondido e parte será revelada (os olhos por exemplo). Com o Photoshop é igual. Pra que algo fique escondido, usa-se a cor preta, para que algo seja revelado, usa-se a cor branca.

Vamos ao tutorial e tudo ficará mais claro!

Primeiro, pegue a imagem do planeta Terra abaixo e abra no Photoshop (File – Open ou CTRL+o).

terra

Faça o mesmo para a imagem da bola abaixo.

bola

Repare que seu Photoshop CS3 terá as duas imagens abertas porém cada uma como um arquivo diferente. Em outras palavras, temos que fazer com que as duas imagens utilizem a mesma janela.

psd1

O que você tem que fazer é o seguinte, pegue a camada (ou layer) da bola e arraste-a para cima do planeta, como mostra a imagem abaixo.

psd2

Fique a vontade para fechar a janela da bola de futebol

Repare que agora, temos apenas uma janela contendo as layers daTerra e da Bola, sendo que a bola está por cima da Terra. A intenção é essa mas o problema é que a bola está muito maior que o planeta.

psd3

Vamos reduzir seu tamanho. Para isso, com a camada da bola selecionada, ative a ferramenta “Show Transform Control” na barra de propriedades.

psd4

Aproveite também para afastar o zoom (Ctrl -) para que você possa visualizar melhor o controlador de dimensões de imagem. Diminua o tamanho da bola.

Atenção, diminua a imagem pressionando a tecla shift para que o dimensionamento não fique com uma forma achatada (em outras palavras, cuidado para não transformar a bola em um ovo). Aplique a transformação e desative a “Show Transform Control”. Se quiser, renomeie a camada da Bola dando um nome para ela.

psd5

Vamos eliminar o fundo da bola. Para isso, use a ferramenta Eliptical Marquee Tool. O problema que você deve estar vendo é: Eu vou precisar de uma tremenda pontaria para selecionar essa bola. Vamos então usar uma técnica do PaiMei.

pai-mei

Usando o atalho Ctrl + R, ative a Ruler (régua) do Photoshop. Posicione o ponteiro do mouse sob a régua superior e arraste-a para o topo da bola.

psd6

Faça o mesmo na base da bola e nas suas laterias, formando um quadrado ao lado da mesma. A imagem vai ficar assim.

psd7

Agora sim, usando a Eliptical Marquee Tool, posicione a cruz da ferramenta exatamente na intersecção superior esquerda e arraste até a intersecção inferior direita. Selecamos nossa bola de forma perfeita. Para que você saiba que posicionou a cruz extamente na intersecção, repare que ela fica vermelha quando está no local correto. Não há como errar. Outro problema, se apertarmos a tecla delete, vamos deletar a bola, e queremos deletar o fundo. Para resolver isso basta inverter a seleção usando o atalho Ctrl + Shift + I, ou então vá no menu Select, Inverse. Agora sim delete. Sua imagem ficará assim.

psd8

Fique a vontade para retirar as linhas guias (basta arratar para fora da janela) e tirar a seleção (Ctrl + D). Agora sim entra a máscara (até que enfim). Com a camada da bola selecionada, vá até o menu Layer, Layer Mask, Reveal All. repare que ao lado da camada da bola apareceu a máscara com a cor branca. lembre-se a cor branca exibe o objeto que está sob a máscara, a cor preta esconde. Como a máscara está branca a bola ainda está sendo exibida.

psd9

Vamos colocar um efeito bem interessante. usando a ferramenta Gradiente e certificando-se que as cores padrões do Photoshop continuam sendo a branca e a preta,  faça um traço diagonal na bola e veja como ficará a máscara.

psd10

Repare com a bola passou a “incorporar” a Terra. Observando a máscara, vemos que ela agora está com gradientes preto e branco. Como a cor branca exibe o conteúdo da máscara e a cor preta esconde, temos como resultado o fato da bola estar sendo exibida parcialmente e conforme vai sendo feito a mistura das cores a bola vai sendo escondida. Ela ainda está lá, porém parcialmente coberta pela máscara.

O probleminha é que a bola ficou maior que a terra. Vamos voltar a ativar a Show Transform Control e dimensionar a bola até que ela tenha o mesmo tamanho que a Terra. O resultado final é este.

montagem_final_photoshop

Espero que tenham gostado do Tuto e até a próxima.

Este é um efeito muito interessante que podemos fazer rapidamente através do Photoshop. Primeiro, escolha uma foto que você queira trabalhar. No meu acaso, escolhi a foto abaixo, por através dela conseguir um efeito interessante ao usar a técnica que irei descrever:

boxe01

Após escolher a foto, vamos abrir a mesma no PhotoShop.

O primeiro passo, é criar uma nova camada, que vamos por o nome de Moldura. Na camada moldura, nós vamos pinta-la de branco, e colocar uma opacidade (transparencia) de 50%.

Depois de criada e tratada a nova camada, ainda com ela selecionada, vá em Editar -> Transformar -> Distorcer, e coloque esta camada como uma foto, na área que vc deseja manter dentro da moldura. Tente criar um efeito tridimensional com a camada, sobre a imagem que ficará como foto.

boxe011

Volte para a camada principal, e selecione toda a imagem que vai permanecer fora da foto, deixando o fundo fora da seleção. Selecione também o formato da camada Moldura.

boxe012

Agora vá na camada foto, clique com o control no thumbnail da foto ( aquele quadradinho da foto no menu
das camadas ), vá em Selecionar -> Modificar -> Contração

Esse comando fará que você diminua a seleção em uma certa quantidade de pixels que você desejar.
Vamos colocar no caso 5 px. Delete a seleção que foi feita e teremos um efeito de moldura da foto.

Apague a parte que está em volta do lutador, agora altere a opacidade da camada foto para 100% e pronto!

Veja como ficou nossa foto de exemplo:

boxe02

Espero que tenha gostado, este tutorial foi adaptado do site: www.oficinadanet.com.br.

Até mais pessoal, e mandem suas imagens para nosso blog, estaremos colocando um post no ar com as melhores imagens feitas em Photoshop, utilizando-se esta técnica. Basta deixar um comentario e enviar sua imagem para o nosso e-mail: douglas.sferreira@yahoo.com.br

===============================================
Outro site com muito conteúdo tecnológico, onde você poderá estar acessando também diversas dicas para cursos, seminarios e palestras, é no Fórum Triade-SP. Entre e faça seu cadastro gratuítamente. Aproveite tambem para conhecer a seção de RPG e participe de uma aventura medieval online.
================================================publicidade-baner

Salve galera. Tendo em vista que alguns dos meus alunos vão fazer uma prova de CorelDraw, resolvi publicar este tutorial que mostra entre várias ferramentas, uma bela alternativa para busca de banco de imagens grátis.

Comecemos com o tema. O tema escolhido é para uma escola de informática (fictícia) que está querendo vender matrículas para um curso de Web Design. Minha idéia com relação a esta arte é mostrar para o público alvo que fazer escolhas certas podem determinar o alcance do objetivo. Para isso, estava precisando de uma imagem que mostrasse conquista, sucesso, satisfação pessoal, ou algo voltado para o genêro. Buscar imagens para publicidade no Google, nem sempre é uma boa idéia já que esta podem conter direitos autorais. Então, acessei o site do sxc (http://www.sxc.hu) e encontrei exatamente a imagem que eu precisava.

sxc

Este é um site que contém um imenso banco de dados de imagens gratuitas e de altíssima qualidade. Já usei em várias oportunidades.

Procure pela palavra “Sucess” no canto superior esquerdo do site.

Você irá reparar que logo de cara encontrará muitas imagens disponíveis. Atenção. As imagens que ficam no topo são pagas (logo as melhores?) e pertecem a “Stockxpert”.  Sem problemas! Tem uma muito boa que encontramos e que irá cair como uma luva para nossa publicidade.

sxc2

Após clicar na foto, o site irá pedir o login. Caso você não tenha uma conta de usuário do site, não perca tempo e cadastre-se (sign up), é gratuito.

sxc3

Salve a imagem!

Vamos abrir essa imagem em CorelDraw. Para isso basta ir no menu “arquivo”, “importar” e abrir a imagem escolhida.corel1

Vamos deixar nossa folha num formato mais adequado para uma publicidade. Claro que tudo vai depender da situação a qual será feita a mesma. Em nosso caso, vamos usar um formato padrão A2. Basta mudar o formato na barra de propriedades. podemos aproveitar e deixar a folha no formato paisagem, como mostra a imagem abaixo.

corel3

Vamos criar um quadrado perfeito, do mesmo tamanho da nossa folha. Clique dus vezes sobre a ferramenta retângula na caixa de ferramentas e veja que o Corel irá criar um contorno perfeito na mesma. Esse retângulo será usado para armazanar a foto na folha.

Para armazenar a foto “dentro” da folha, será usada a ferramenta “Power Clip”. Selecione a foto e  vá até o menu “Efeito”, opção “Power Clip”, sub-opção “Colocar em recipiente”. repare que uma seta preta irá aparecer. É como se ela te perguntasse, “onde eu devo armazenar essa imagem?” Clique no retângulo (na folha) e pronto, sua imagem está armazenada.corel4

Reparem que a minha imagem está menor que a folha A2. isso vai dar um efeito horrível na hora de imprimir. Vamos dar um jeito nisso. Clique com o botão direito do mouse sobre a imagem e vá até a opção “Editar conteúdo”.

Veja que a imagem está aparecendo de uma maneira que a folha ainda fique visível. isso acontece para que tenhamos uma base de como deixar afigura no formato desejado no recipiente. A minha sugestão é aproveitar a modelo que está na foto, realssando a “sua conquista”. Ao mesmo tempo em que ela está realssada, a imagem da montanha mais próxima deve aparecer, mostrando que a modelo atingiu o topo ou conquistou seu objetivo. Basta altera o tamanho da imagem até ficar algo parecido com a imagem abaixo, ou da sua preferência. Lembre-se, você é o artista e para isso, deve ter suas criações.

conquista

Quando terminar, clique com o botão direito do mouse sobre a imagem e vá até a opção “Concluir a edição deste nível”.

A pimeira etapa está concluída vamos a segunda etapa. As informações sobre o curso de Web. Dê dois cliques sobre a ferramenta retângulo e crie mais um retãngulo com o mesmo contorno feito anteriormente. Pinte ele na cor principal da empresa. Como estarei usando a Triade-SP como exemplo, escolhi a cor verde. Assim que você pintar o retângulo na cor escolhida algo estranho acontece. Nada. (???) Mas como? Bem, o Corel deixa seus objetos armazenados um sobre o outro. O retângulo verde criado está por baixo de todas as imagens  que criamos até agora (o retângulo principal e a foto). Basta trazer o retângulo verde pra frente usando o atalho CTRL + PAGE UP.  Aperte este atalho até aparecer a imagem que acamos de criar. Assim que ela aparecer, diminua seu tamanho como a imagem abaixo.

conq21

Vamos dar formas curvadas para essa retângulo. Primeiramente, temos que “quebrar” a imagem para que seus pontos e nós possam ser editáveis. selecione o retângulo e use o atalho CTRL + Q.

Use a ferramenta “forma” e vamos dar formatos curvos para a imagem.

forma

 Selecione o ponto superior direito do retângulo e depois a opção “converter linha em curva” na barra de propriedades.

forma2

Repare que setas irão aparecer na linha superior do retãngulo verde. Essas setas indicam ao ponto ou nó o caminho que a linha deve percorrer e assim dá a forma que aparece. Se nós tivermos controle sobre esses pontos e nós, podemos criar qualquer tipo de imagem vetorial no corel. Ainda usando a ferramenta forma direcione essas setas para cima e para baixo de maneira que seu retãngulo adquira o formato abaixo.

formato

Agora vem a parte mais fácil. Vamos digitar neste rodapé os módulos que farão parte do curso. Basta digitar usando a ferramenta “Texto artístico” as palavras que se seguem: “Triade-SP – Web Design * CorelDraw, Fireworks, Photoshop, Dreamweaver, Lógica de Programação, HTML, CSS, Javascript, PHP/My SQL, ASP, Flash e Action Script”. Posicione-o de modo a ficar harmônico com o rodapé. Use também a fonte “Impact” para todos os textos que serão introduzidos nesta arte.

Após isso, digite o nome da empresa que está promovendo o curso (Triade-SP) e posicione-o em um lugar de destaque na arte. Usando a ferramenta retângulo, crie um retângulo ao redor do nome da empresa e posicione-o atrás do mesmo. Pinte-o com a cor principal da empresa, assim como o texto. Até agora nossa arte ficará com o seguinte formato.

triade-sp_curva

Usando o retângulo que está contornando o nome da empresa, faça uma cópia do mesmo (CTRL + C, CTRL + V). Pinte-o com a cor secundária da empresa. Agora dê um clique a mais sobre esta cópia e repare que alguma setas curvas aparecem nos cantos do retângulo. Estas setas indicam que podemos girar a imagem através do seu “ponto de centro”. Faça uma leve curvatura na cópia e deixe-a como a imagem abaixo.triade-sp

Precisamos informar ao cliente como entrar em contato com a empresa. Coloque em fonte menor, logo abaixo do nome da empresa o telefone e o endereço da mesma.

triade-sp_tel

Vamos a data de início do curso, 12/02/2009. Simplesmente digitar a data de maneira comum não chamará a atenção. Temos que caprichar. Digite o dia e logo abaixo dele faça um retângulo como se este fosse um sublinhado. Não use a formatação sublinhada já que usaremos esse mesmo retângulo para contornar o mês. Deixe-o no formato abaixo.

data

Use a mesma técnica para informar o horário do curso (13:30 – 16:30, de segunda a quinta). Logo acima digite “Faça já a sua matrícula” e curve-o, como fizemos com o retângulo acima.

data_hora

Pra finalizar, precisamos de uma frase que faça com que a pessoa interessada no curso decida-se a fechar a matrícula. Um estímulo por assim dizer. Ao mesmo tempo, a frase tem que ser algo que condiza com a imagem que escolhemos. Decidi pela frase “Suas atitudes determinarão suas altitudes”.

Deixe-o como na imagem abaixo.

publicidade_corel

Por fim, mande-o para a gráfica no formato .cdr de preferência com os textos tranformados em curvas. Espero que tenham  gostado e até o próximo tuto.

Salve galera. Ao som de Renato Russo, desenvolvi este pequeno tutorial que ensina a fazer uma engrenagem 3D usando Corel Draw X4. Neste tutorial você irá usar, “Linhas guia”, ”Aparagem de objetos” e “Extrusão interativa”. Vamos começar?

Ao abrir o Corel Draw X4, desenhe um círculo perfeito usando a ferramenta Elipse (F7). Para que o círculo fique perfeito, segure a tecla CTRL.

 circulo

Usando as linhas guias, faça um traçado no centro do círculo tanto no sentido horizontal como vertical. Para criar as linhas, basta posicionar o ponteiro do mouse sobre a régua e arrastar para a área de trabalho do Corel. A imagem vai ficar nesse formato.

 circulo2

Crie mais duas linhas guia, porém desta vez elas ficarão posicionadas num ângulo de 45 e 315 graus. Você pode definir o ângulo na qual as mesmas ficarão através da barra de propriedades. Como mostra o exemplo abaixo.

 barra

A imagem ficará assim.

circulo3

Crie agora um pequeno círculo e posicione o seu centro exatamente na intersecção da linha guia com o círculo maior.

 circulo4

 

Usando a tecla  “+”, crie cópias do círculo menor e posicione-os nas demais intersecções. Sua imagem ficará assim.

 circulo5 

Crie um último círculo um pouco maior que os últimos que acabamos de criar e posicione-o no centro do círculo maior.

 circulo6 

Agora que temos todos os círculos posicionados no seu devido lugar, vamos a parte mais legal da brincadeira. Selecione todos os círculos criando uma área de seleção por sobre toda a imagem. Você pode fazer isso usando o atalho “CTRL + A”. Repare que sua barra de propriedades contém novas ferramentas de edição. São elas a “Soldar”, “Aparar”, “Frente menos verso” etc. Selecione a segunda ferramenta (Aparar).

barra2

Nossa engrenagem está quase terminada. Quer saber como nossa imagem vai ficar? Siga o coelho branco.coelho

Delete todos os círculos pequenos anteriormente criados, assim como as linhas guias (para isso, basta selecionar os círculos individualmente e apertar a tecla “Delete”. Faça o mesmo com a linha guia. Preserve o círculo principal. Sua imagem ficará nesse formato.

 engrenagem1 

O que a ferramenta “Aparar” fez? Ela usou os círculos menores que estavam sobre o círculo maior e usando suas linhas, criou um novo objeto. Usando a criatividade você pode criar imagens muito interessantes, assim como facilitar o seu trabalho.  Vamos agora fazer o preenchimento da imagem. Com a engrenagem selecionada, vá até a ferramenta, preenchimento gradiente (F11).

 preenchimento

Ao aparecer a caixa de diálogo, defina a seguinte configuração: predefinição (escolha 64 – Cilindro Cinza 1),  e ângulo 45 graus. Siga a imagem abaixo. 

preenchimento2

Retire a borda da sua engrenagem. Isso é fácil, basta selecionar a transparência com o botão secundário do mouse (o direito).

 cor

Sua imagem ficará assim.

 

 engrenagem-2

Estamos quase terminando. Com a engrenagem selecionada, use a ferramenta “Extrusão Interativa”, posicionando-a sobre o objeto e arrastando para qualquer direção. Repare que ao mover o mouse, você vê uma caixa 3D sobre o objeto, mostrando como sua engrenagem ficará.

extrusao

Sua imagem ficará assim.

engrenagem3 Repare que existe um pequeno traço na linha que mostra a direção da extrusão e está em destaque na imagem acima. Ela define o tamanho da sua extrusão. Diminua a mesma arrastando a pequena barra em direção ao centro da engrenagem, deixando-a com uma melhor sensação de realismo.

 engrenagem4

Repare novamente que sua barra de propriedades tem ferramentas próprias para personalização de acordo com a ferramenta que está selecionada (bem como o objeto ou grupo de objetos selecionados). Com a engrenagem selecionada usando a “Extrusão interativa” selecione a ferramenta “Extrusão de Rotação”. Um “número três” vai aparecer, gire-o e defina como sua engrenagem deverá ficar.

 extrusao2 

Aí está o resultado final. Espero que tenham gostado e até o próximo tutorial.

final

================================================

publicidade-baner

Twittando por ai…

Erro: o Twitter não respondeu. Por favor, aguarde alguns minutos e atualize esta página.

Musicas – Last.FM

maio 2017
S T Q Q S S D
« jun    
1234567
891011121314
15161718192021
22232425262728
293031  

Links e Selos

Uêba - Os Melhores Links

WWF-Brasil. Cuidando do ambiente onde o bicho vive. O bicho-homem.

Firefox - Download

Quer Divulgar?

Selo Inatitude

Add to Google

BlogBlogs

BlogBlogs
Pingar o BlogBlogs
Adicionar aos Favoritos BlogBlogs

Web Rádio Studio

Visitas

  • 3,187,013 com atitude

In-Atitude Apoia:

Creative Commons License
Inatitude por https://inatitude.wordpress.com esta licença se refere a Creative Commons Atribuição-Vedada a Criação de Obras Derivadas 2.5 Brasil License.


Creative Commons License
Inatitude por https://inatitude.wordpress.com esta licença se refere a Creative Commons Atribuição 2.5 Brasil License.



Compras pelo e-mail: prof.medeiros@gmail.com ou através do site:
Adriano Medeiros