You are currently browsing the monthly archive for março 2009.

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.

Aqui temos mais uma das artes dos meus alunos. desta vez o Jeferson caprichou na criatividade com Brushes usando o Photoshop CS3.

Segue abaixo!!

jeka-santos

Veja o que aconteceu em um Suporte Técnico de Informática. Esta é uma historia verídica que ocorreu em uma famosa empresa de São Paulo. Não precisaria dizer que a pessoa que trabalhava no suporte foi demitida, mas ela esta movendo um processo contra a organização, que a demitiu por justa causa. Segue o diálogo entre o ex-funcionário e o cliente da empresa: – Help desk assistência, posso ajudar?

– Sim, bem… estou tendo problema com o Word.

– Que tipo de problema?

– Bem, eu estava digitando e, de repente, todas as palavras sumiram.

– Sumiram?

– Elas desapareceram. Nada.

– Nada?

– Está preta. Não aceita nada que eu digite.

– Você ainda está no Word ou já saiu?

– Como posso saber?

– Você vê o Prompt C: na tela?

– O que é esse ‘promete-se’?

– Esquece. Você consegue mover o cursor pela tela?

– Não há cursor algum. Eu te disse, ele não aceita nada que eu digite.

– Seu monitor tem um indicador de força?

– O que é monitor?

– É essa tela que parece com uma TV. Ele tem uma luzinha que diz quando está ligado?

– Não sei.

– Bom, olhe atrás do monitor, então veja aonde está ligado o cabo de força. Você consegue fazer isso?

– Acho que sim.

– Ótimo. Siga para aonde vai o cabo e me diga se ele está na tomada.

– Tá sim.

– Atrás do monitor, você reparou que existem dois cabos?

– Não.

– Bom, eles estão aí. Preciso que você olhe e ache o outro cabo.

– Ok, achei.

– Siga-o e veja se ele está bem conectado na parte traseira do computador.

– Não alcanço!

– Hum. Você consegue ver se está?

– Não.

– Mesmo se você ajoelhar ou se debruçar sobre ele? –

Ah, não, tá muito escuro aqui!

– Escuro?

– Sim, a luz do escritório tá desligada, e a única luz que eu tenho vem da janela, lá do outro lado.

– Bom, acenda a luz então!

– Não posso.

– Por que não?

– Porque estamos sem energia.

– Estão… sem energia…?

…Longa pausa…

– Ah! ok, descobrimos o problema agora! Você ainda tem a caixa de papelão e os manuais que vieram com o seu micro?

– Sim, estão no armário.

– Bom! Então, você desconecta o seu sistema, pega tudo, empacota e leva de volta para a loja.

– Sério?? O problema é tão grave assim?

– Sim, temo que seja.

– Bom, então tá. E o que eu digo na loja?

– Diga que você é BURRO demais pra ter um computador!!! @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

USUÁRIO: ‘Não consigo imprimir. Cada vez que tento, o computador diz: ‘Não é possível encontrar a impressora’. Já levantei a impressora e coloquei-a em frente ao monitor para ele ver, mas o computador continua dizendo que não consegue encontrá-la.’

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

SUPORTE: ‘Serviço ao Manual da HP.. Sérgio falando. Em que posso ser útil?’

USUÁRIO: ‘Tenho uma impressora HP que precisa ser reparada.’

SUPORTE: ‘Que modelo é?’

USUÁRIO: ‘É uma Hewlett-Packard…’

SUPORTE: ‘Isto eu já sei. Quero saber se é colorida ou preto e branco.’

USUÁRIO: ‘É bege!’

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

SUPORTE: ‘Bom dia. Posso ajudar em alguma coisa?’

USUÁRIO: ‘Não consigo imprimir.’

SUPORTE: ‘Pode clicar no ‘Iniciar’ e…’

USUÁRIO: ‘Caaalma aí! Não responda assim muito tecnicamente. Não sou o Bill Gates!’

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

USUÁRIO: ‘De repente aparece uma mensagem na minha tela que diz ‘Clique Reiniciar’… O que eu devo fazer?’

SUPORTE: ‘O senhor aperte o botão solicitado, desligue e ligue novamente.’ Sem pestanejar, o usuário desliga o telefone na cara do atendente e liga para o suporte novamente.

USUÁRIO: ‘E agora o que eu faço?’

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

USUÁRIO: ‘Tenho um grande problema. Um amigo meu colocou um protetor de tela no meu computador, mas a cada vez que mexo o mouse, ele desaparece!!!’

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

SUPORTE: ‘Em que posso ajudar?’

USUÁRIO: ‘Estou escrevendo o meu primeiro e-mail.’

SUPORTE: ‘OK, qual é o problema?’

USUÁRIO: ‘Já fiz a letra ‘a’. Como é que se faz o circulozinho em volta dela pra fazer o tal arroba?’

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

SUPORTE: ‘Suporte do seu Provedor de Internet, bom dia. O que deseja?’

USUÁRIO: ‘Moço, a Internet também abre aos domingos?’

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Depois de um tempo falando com o atendente do suporte.

SUPORTE: ‘O que tem do lado direito da tela?’

USUÁRIO: ‘Uma samambaia!’

SUPORTE: silêncio…

Aqui temos  algumas Dark arts das alunas Rafaela, Priscila, Jade e Kellton (Esse é aluno, não aluna).

Parabéns pelas artes.

dark-art1

Todos os times tem seus astros e ídolos maiores que fizeram história em sua passagem pelo clube. Recebi um e-mail de como seria o time dos sonhos entre os quatro grandes de São Paulo e o resultado está aí. Boa sexta feira treze hueheuhuheuehuehuehuehueh!!!

image001

image002

image003

image0041

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.

tirinha

ESSA É PARA A VIDA TODA!

Um professor de filosofia, parou na frente da classe e sem dizer uma palavra, pegou um vidro de maionese vazio e o encheu com pedras de uns 2 cm de diâmetro.Olhou para os alunos, e perguntou se o vidro estava cheio. Todos disseram que sim. Ele então, pegou uma caixa com pedregulhos bem pequenos e jogou-os dentro do vidro agitando-o levemente. Os pedregulhos rolaram para os espaços entre as pedras. Tornou a perguntar se o vidro estava cheio. Os alunos concordaram: agora sim, estava cheio! Dessa vez, pegou uma caixa com areia e despejou dentro do vidro preenchendo o restante. Olhando calmamente para os alunos, o professor disse: – Quero que entendam que isto simboliza a vida de cada um de vocês. As pedras, são as coisas importantes: sua família, seus amigos, sua saúde, seus filhos, coisas que preenchem a vida. Os pedregulhos, são as outras coisas que importam: como o emprego, a casa, um carro… A areia, representa o resto: as coisas pequenas… Experimentem colocar, a areia primeiro no vidro, e verão que não caberá as pedras e os pedregulhos… O mesmo vale para suas vidas. Priorizem cuidar das pedras, o que realmente importa. Estabeleçam suas prioridades. O resto é só areia! Após ouvir a mensagem tão profunda, um aluno perguntou ao professor se poderia pegar o vidro, que todos acreditavam estar cheio, e fez novamente a pergunta: – Vocês concordam que o vidro está realmente cheio? Onde responderam, inclusive o professor: – Sim está! Então, ele derramou uma lata de CERVEJA dentro do vidro. A areia ficou ensopada, pois a cerveja foi preenchendo todos os espaços restantes, fazendo com que ele, desta vez, ficasse realmente cheio. Todos ficaram surpresos e pensativos com a atitude do aluno, incluindo o professor. Então ele explicou: NÃO IMPORTA O QUANTO SUA VIDA ESTEJA CHEIA DE COISAS E PROBLEMAS, SEMPRE SOBRA ESPAÇO PARA UMA CERVEJINHA !!!

Twittando por ai…

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

Musicas – Last.FM

março 2009
S T Q Q S S D
« fev   abr »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

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,192,619 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