- Persocon design.
September 07, 2010, 03:44:01 AM *


Welcome, Guest. Please login or register.

Login with username, password and session length
News: agora o forum está tomando forma, os primeiros boards já foram abertos, enjoy Cheesy
 
Pages: [1] 2
 1 
 on: June 23, 2008, 02:48:16 PM 
Started by Pedro Costa Neves - Last post by Pedro Costa Neves
Depois de vaaarios comentarios de decepção, vamos então a UMA DAS
partes que interessa, sim porque não vai ser possivel ver todas as
partes de uma só vez, vendo que a colorização NÃO É UMA COISA SIMPLES
como todos pensão, videie que varios artistas pintam a mão.
Vamos primeiramente aprender sobre a ferramenta de seleção varinha
magica(seleção Contígua), que tem o icone de uma varinha(claro).
agora vamos por partes, repare que no meu está selecionado o suavizar,
e o seleciona área transparente, e que também o modo está como
adicionar à seleção atual, eu marquei esta opção pra facilitar minha
vida, pois nesta arte teremos que selecionar vaaarias partes antes de
pinta-las, repare também que no limite eu marquei como 2 para nao pegar
nenhuma imperfeição da arte, eu quero somente o fundo branco do
desenho, e que marquei a caixa "Selecionar por" como Valor.



Agora vamos a camada clone, que criamos no tutorial anterior.
E clicamos em uma das areas brancas que queremos.
Bom, Vamos começar pela camiseta. Selecione toda parte da camiseta.



proximo passo é fazermos um grow, pra que nao sobre espaços em branco
na onde existem as linhas. Ok? este passo é primordial para uma arte
final de boa qualidade.
Clique em Seleção, no menu superior, na propria imagem
depois vamos em Aumentar(grow)
e Colocamos 2 px.



pronto feito isso, voltamos a camada transparente, onde iremos aplicar
as cores.
Vamos utilizar nesta parte do tutorial a ferramenta de Degradê, para já
fazer um pouco de luz e sombra, lembrando QUE!!! não é a luz nem a
sombra definitiva, é somente uma frescurinha pra deixar mais bonito o
desenho, e com mais volume.
Vamos configurar a nossa ferramenta de misturar(degradê).
Primeiramente para esta arte, eu deixei o degradê como linear, e
escolhi as cores da camiseta e da sombra, neste desenho utilizei o
azul(#2f4ec4) e um azul mais escuro pra sombra simples(#10193b).



Agora, para aplicar o degradê eu fiz da seguinte maneira, tirei o
zoom(13%), e apliquei lá de cima pra beeeem pra baixo do desenho o
degradê, inclinando beem de leve.



o degradê ficou beeeeem fraquinho, oque era a intensão, porque a sombra
real virá depois.
Agora tirando a seleção(ctrl+shift+a) vemos como ficou nossa
colorização da camiseta.



Bom, esta parte da camsieta está concluida, faremos os mesmos passos
para as pernas, braços, cabeça, calça e sapato.
Porem você deve prestar atenção nas luzes e sombras, visto que na
camiseta colocamos um degradê de cima para baixo de claro pra escuro,
devemos acompanhar estas regras para termos um resultado melhor.
e nas partes baixas como pé joelhos e tudo que estiver mais proximo do
chão, a inclinação do degradê tende a ficar cada vez mais proxima do
eixo X, enquanto as partes altas como cabeça ombros braços, tendem a
ficar mais proximas ao eixo Y do desenho, farei uma marcação no Desenho
para que possam entender.



enfim,
seu Robô deve estar +- como o meu agora, claro, nao terminamos ainda
faltam as sombras e as luzes





No proximo episódio, teremos a parte das sombras utilizando as
vaaaarias ferramentas de seleção disponiveis no GIMP e veremos o quão
trabalhoso é esta parte, e Também se sobrar espaço no tutorial veremos
uma arte finalização total do desenho.

 2 
 on: June 20, 2008, 12:24:30 PM 
Started by Pedro Costa Neves - Last post by Pedro Costa Neves
Bom amigos, desculpa a demora para criar este artigo.
Mais vamos lá sem mais delongas

Primeiramente, este artigo destina-se a quem quer aprender sobre colorizar HQ/Comics/Cartoon ou até mesmo mangá, no computador, como é feito nos grandes estudios.
Como eu nunca trabalhei em estudio algúm, e normalmente este processo é feito no photoshop. Eu vou lhes ensinar oque eu sei, e oque aprendi com quem trabalha/trabalhou em estudios e trabalha com isto, adaptando as tecnicas do photoshop para o gimp.

Requisitos:
Mouse ou tablet(eu utilizo tablet para maior precisão e para colorizar utilizando outras tecnicas)
Gimp >=2.4
Um desenho
e Muita mais MUUUITA paciencia.


Vamos lá, primeiramente, adiquirindo o desenho.
Como parte desta aula vou lhes disponibilizar o desenho por onde comecei a colorir.
Segue abaixo o link para baixa-lo
http://persocon.org/tutoriais/caradeferro.png

Enfim, agora vamos preparar nossa imagem para ser colorizada
Infelizmente este tutorial encerrará nesta parte apenas iremos preparar a imagem para o proximo tutorial, onde iremos começar com as cores chapadas e com alguns degradês.

Primeiro passo:
Separando as camadas, após termos aberto nossa imagem, devemos clonar a camada do desenho.
esta camada que foi clonada deve ficar com o MODE dela em Multiply, feito isto.
Devemos criar uma camada abaixo da camada clonada, com a qualidade de transparente, pois será nesta camada que colocaremos as cores e sombras e etc.
Abaixo da camada transparente devemos criar uma camada com a qualidade de fundo branco, esta camada será nosso background provisório.
Seu projeto deve ficar mais ou menos assim:


Pronto, agora que já temos nossas layers, salve seu projeto como XCF que é o formato padrão do GIMP para não perder estas modificações.
Na proxima parte do tutorial vamos começar a colorir este Robô.
Que é o personagem do Fanzine do meu grande amigo Aru Barros, vocês podem acompanhar mais do trabalho dele aqui
http://aru-metalhead.deviantart.com.
O Personagem se chama Cara de Ferro.
Espero que vocês se esforcem, e desculpa qualquer erro da minha parte.

No proximo tutorial disponibilizarei meu projeto final em XCF mais você pode acompanhar o resultado aqui
http://neonyow.deviantart.com/
lá você encontra duas versões do Cara de Ferro que eu fiz no GIMP.

Valew.

 3 
 on: May 12, 2008, 02:19:09 PM 
Started by jeison - Last post by jeison
Olá a todos novamente, dessa vez irei mostrar como vetorizar a partir de uma imagem,
e vamos fazer isso na unha, ou seja, sem a ajuda de nenhum recurso como o trace ou afins.

Primeiro vamos abrir nossa imagem no Inkscape, depois de abrir ela precisamos antes de
mais nada, saber ler a imagem. O que eu quero dizer com isso, é que precisamos imaginar
como a imagem foi criada, por exemplo essa imagem do mario, provavelmente ela possui
7 camadas, ou seja, cada cor é uma camada.
Vocês irão entender melhor ao decorrer do tutorial, portanto não precisam se preocupar
com isso agora.

Então vamos lá. Para fazer o mario irei utilizar apenas a Ferramenta Bezier
(Shit+F6), a Ferramenta de seleção de nós (F2) e o recurso de camadas(Shift+Ctr+L).

Aconselho antes de iniciar esse tutorial ler o tutorial sobre camadas, assim você
terá um entendimento melhor, logo seu rendimento será maior. :]

Primeiro irei construir uma camada para cada cor.


E após fazer isso dou ínicio ao processo com a ferramenta Bezier(Shift+F6) selecionando a camada referente a cor preta.


Após fazer às marcações irei agora ajustar as linhas com a ferramenta de seleção de
nós (F2).


Ao terminar de ajustar a linha, sua imagem deve estar semelhante a imagem acima,
Agora basta repetir o mesmo processo em todas as outras cores.

Lembrando sempre que cada cor deve ser trabalhada na camada correspondente!
Ao final sua imagem estará semelhante a essa:


Agora é só colorir, selecione cada camada e pintar na cor correspondente.
Depois de pintar temos nosso resultado final. Agora podemos redimensionar
nosso Mario para qualquer tamanho que ele não perderá qualidade. :]

Resultado final:


Espero que tenham gostado, e vejam que é simples vetorizar, e essa mesma técnica que
é usada para fazer vetores de pessoas. :]

Abraços.

Imagem do Mario

SVG Download

 4 
 on: May 07, 2008, 07:29:04 AM 
Started by jeison - Last post by jeison
E aê pessoal, tranquilo? :]
Como prometido vim trazer os efeitos de texto usados no tutorial passado.
Vocês verão que é muito simples reproduzir e criar novos efeitos.
Então vamos a obra!


Primeiro abra um documento novo, e com a ferramenta texto digite:

Texto a ser digitado: Inkscape
Fonte: Sans, em negrito
Tamanho:70

Logo em seguida vamos Duplicar nosso texto, com o texto selecionado clique com
o botão direito > dupicar

Agora que temos dois textos, vamos fazer metade do texto de uma cor, e
metade de outra. E para fazer isso vamos usar a ferramenta retângulo (F4)
Notem que o retângulo está vazado, eu particularmente gosto de trabalhar com ele
vazado, porque assim consigo enxergar o que estou trabalhando com mais clareza.

Agora o que vamos fazer é cortar fora o que não queremos. Para isso vamos
usar o recurso aparar, Então com a tecla Shift pressionada selecione o Retângulo e
o Texto que foi duplicado, depois solte a tecla e vá no menu Caminho > Diferença.

Em um primeiro momento o não aconteceu nada certo?
Errado, experimente selecionar um dos textos e clique em uma cor qualquer, por
exemplo o Azul. Viu? Se você conseguiu fazer tudo certo, neste momento seu texto deve
estar azul e preto. É assim que funciona o Efeito aplicado no texto persocon, do tutorial passado sobre camadas.

Agora basta usar a criatividade para bolar outras combinações.
Abaixo do texto vocês podem conferir outros efeitos com base nesse mesmo tutorial.
Ficamos por aqui, e até o proximo tutorial. :]

SVG Download

 5 
 on: May 04, 2008, 07:14:20 PM 
Started by jeison - Last post by jeison
Olá pessoal, tudo certo com vocês? Espero que sim. :]
Hoje venho trazer um tutorial sobre camadas, para ser mais preciso, um tutorial
de como elas podem nos ajudar na prática!



Abra um documento novo e em seguida vá em Camada > Camadas... (Ctrl+Shift+L)
Podemos observar que uma nova janela foi aberta.

Uma explicação rápida sobre a janela de camadas.

Olho: Ao clique do mouse sobre ele é possível Visualizar/Esconder a camada.
Cadeado: Ao clique do mouse é possível ativar o modo de edição da camada, ou
simplismente bloquea-la. Ideal para evitar acidentes quando se está trabalhando
com muitos objetos.
Sinais de + (soma) e - (subtração): Como o nome diz soma ou subtrai uma
camada, ou seja, adiciona (+) e exclui (-) uma camada. :p
Setas: Movimenta as camadas para cima ou para baixo, servindo para reorganizar
conforme a necessidade, e as setas com uma linha, servem para mover uma camada
para o topo (primeira) ou para baixo (última).
Opacidade: Serve para você definir a opacidade da camada, quanto mais você
diminuir, mais transparente ela vai ficar.


Agora que vocês já sabem para que servem cada item da janela, vamos lá!
Primeiro, vamos fazer um cartaz. De todos que eu tentei usar para fazer esse
tutorial, o cartaz foi o que melhor se saiu.

Não se preocupem em tentar reproduzir 100% igual o cartaz, eu recomendaria que
voltassem suas atenções ao comportamento das camadas, reforçando a idéia do tutorial
que é sobre camadas. :]

Primeiro vamos renomear a camada já existente. Para isso selecione a primeira camada
e com o botão direito de um clique e escolha a opção renomear camada.
Nome da camada: Fundo

Nessa camada iremos fazer nosso trabalho de fundo. Então vamos lá, eu irei utilizar
a ferramenta Bezier (Shift+F6), para desenhar o meu fundo.

Após desenhar o fundo, crie uma nova camada e de o nome de mao, e com a ferramenta
Bezier (Shift+F6) junto da ferramenta Alterar nós do caminho (F6), faça uma mão.

Depois que terminou sua imagem deve estar semelhante a nossa. Então agora vamos
criar um texto para o nosso cartaz. Para isso crie uma camada nova com o nome, "Titulo"
e com a ferramenta Texto (F8) crie um titulo para o seu cartaz.

Após criar meu título, eu posicionei ele no lugar que eu achei mais apropriado, e
voltei a camada "Fundo" e criei dois retânlos usando a ferramenta Retângulo (F4),
e os posicionei nas extremidades do título, um atrás da letra 'P' e outro atrás da
letra 'N', as linhas que sublinham o texto foram criadas da mesma maneira com a
ferramenta retângulo. Em seguida eu utilizei alguns recursos que permitem aparar
a imagem para criar aquele efeito onde a letra possui duas cores, mas não estarei
abordando com detalhes como ele é feito, estarei explicando com detalhe em
um tutorial a parte. :]

Podemos agora observar que nosso cartaz já está tomando forma, e também já temos uma
noção de como as camadas podem ser uteis. O que vamos fazer a seguir é preencher o
resto do cartaz com mais efeitos e texto.

Então crie uma nava camada com o nome "texto 2" e insira um texto de acordo com o seu título!

Após criar seu texto crie uma nova camada com o nome "Efeitos" e experimente utilizar
as ferramentas de formas básicas, retangulo, elipse e estrela para colocar algumas formas
no seu cartaz e aproveite para testar os recursos dessas ferramentas e veja o que pode
criar com elas.

Após criar seu texto e dar vida a algumas formas, vamos descobrir como podemos
reposicionar uma camada. A camada "Efeitos" que acabamos de criar não está no
lugar que queremos, ela está no topo em alguns sendo assim está tampamdo certos
conteudos do meu cartaz, para resolver isso o que precisamos fazer é reorganizar
nossa camada para que ela fique abaixo daquilo que queremos que apareça.

Para isso selecione a camada Efeitos, com um clique do mouse e utilize as setas
que estao situada no inferior da janela camada. para reorganizar a camada. Posicione a
camada "Efeitos" acima da camada Fundo.

Se você conseguiu, provavelmente o problema dos efeitos estarem atrapalhando foi resolvido.
Bom pessoal, esse foi o tutorial sobre como trabalhar com camadas e no que elas podem ser
uteis no quesito organização e referencia de objetos.

Espero que tenham gostado, e não se preocupem com efeitos aplicado pois estarei
explicando cada um deles separadamente nos proximos tutoriais.

Até a proxima e abraço a todos.

SVG Download

 6 
 on: April 28, 2008, 09:56:25 AM 
Started by jeison - Last post by jeison
Olá mais uma vez pessoal, essa semana vamos aprender a fazer uma coisa
bem fácil, porém eu acho muito legal o resultado finalque podemos chegar
com esse pequeno efeito de texto.


A primeira coisa que precisamos fazer antes de mais nada é criar uma forma
qualquer. Eu escolhi a estrela, mas sintam-se livre para escolher aquela
que vocês mais gostarem.
Certo, escolhemos nossa forma, agora precisamos desenhar ela, então vamos
lá desenhar nossa estrela.

Selecione a ferramenta estrela (*) e crie uma estrela de 5 pontas como mostra o exemplo.

Agora com a ferramenta Texto (F8) vamos escrever a palavra "estrela".
Até o momento temos na nossa imagem uma forma, a estrela, e um texto.
Precisamos agora fazer com que esse texto tome a forma de uma estrela
certo? E como poderemos fazer isso? Isso é fácil, primeiro precisamos
selecionar o caminho no qual o texto vai seguir, que no caso é a estrela.
Então vamos lá, selecione a estrela e em seguida mantenha pressionada a
tecla "Shift" e selecione o nosso Texto.

Se você tiver feito corretamente você pode notar que temos a Estrela e o Texto
selecionado, mas ainda sim o texto não está como queremos, para isso vamos
usar um recurso muito legal que o Inkscape disponibiliza para nós, o chamado
"Por no caminho".

Para fazer isso basta seguir esses passos,
Com o texto e a imagem selecionada, vá para o menu "Texto -> Por no caminho..."

Pronto, vimos que o texto se uniu com a figura, agora basta selecionar a ferramenta
Texto (F8) e usar o recurso copiar e colar, para copiar o texto e completar o resto
da estrela com o texto que queremos, ou simplismente escrever outro texto.
Sinta-se a vontade para fazer o que achar melhor. :]

Ao final para deixar-mos a Estrela sem a cor de fundo, ou seja, deixa-la vazada, basta
selecionar a estrela e retirar o preenchimento interno dela assim como o contorno.
Ao final experimente criar novas formas e texto para praticar um pouco mais esse
recurso que além de simples é muito útil.

Até a próxima. :]

SVG

 7 
 on: April 23, 2008, 10:33:14 AM 
Started by jeison - Last post by jeison
E aê pessoal. :]
Dessa vez vamos fazer algo rápido e simples. Vamos criar uma esfera em 3D.


Primeiro selecione a ferramenta Elipse (F5) e crie um círculo do tamanho que preferir.
Para criar um círculo perfeito segure Ctrl enquanto você está dimensionando o círculo.

Depois selecione o círculo e duplique ele (Ctrl+D), e em seguida selecione outra cor para ele.
Agora que temos dois círculos, use a ferramenta de seleção (F1) para posicionar o círuculo de cima
ligeiramente para o lado, para que o primeiro círculo assuma o papel de sombra.

Agora com o círculo duplicado selecionado, duplique-o mais uma vez e pinte com a cor branca.
Em seguida clique com o botão direito, e selecione a opção Preenchimento e Traço(Ctrl+Shift+F)
Nessa janela veja se a aba preenchimento está ativa, se estiver clique na opção Gradiente Radial

Depois use a ferramenta de edição de nós e alças de controle (F2)
E posicione o gradiente mais ou menos como mostra a última figura.
Pronto, você acabou de fazer sua esfera. :]
E lembre-se que a idéia desses tutoriais é apenas mostrar como funcionam e como podem ser combinadas
às ferramentas do Inkscape para que você solte sua criatividade. :]

Arquivo svg: Clique aqui.

 8 
 on: April 18, 2008, 01:57:16 PM 
Started by Pedro Costa Neves - Last post by Pedro Costa Neves
O Forum Persocon foi criado com o intuito de fornecer um ambiente público de debate sadio acerca dos vários temas aqui abordados. Para tanto normas de conduta e responsabilidade se fazem necessárias, cabe ao usuário registrado em nosso fórum conhecer estas normas assim como manter-se atualizado em relação a elas.

Alterações e adições recentes estão indicadas em negrito.

1. Sobre a identidade do usuário:

1.1. É de responsabilidade do usuário manter verdadeiras e atuais as informações de seu cadastro, assim como zelar pela sua senha;
1.2. Os administradores do fórum reservam o direito de revelar a identidade dos usuários (ou qualquer outra informação contida neste fórum) no caso de surgir alguma queixa formal ou ação legal, causada pelo mau uso deste fórum por parte do usuário.

2. Sobre o conteúdo das mensagens e tópicos:

Cada mensagem é de única e exclusiva responsabilidade civil e penal do seu autor. São proibidas e passíveis de punição as mensagens cujo conteúdo:

2.1. Seja falso, difamatório, incorreto, abusivo, vulgar, odioso, perseguidor, obsceno, profano, de caráter pornográfico (entendido como a divulgação de imagens que apresentem nudez total ou parcial dentro de um contexto obsceno de cunho sexual), ameaçador, que invada a privacidade de terceiros ou outro que viole, de alguma forma, as leis brasileiras e internacionais;
2.2. Contenha publicidade não autorizada, repetição constante do mesmo texto, sem sentido ou propósito construtivo ao debate e esquemas piramidais;
2.3. Induzam, incitem ou promovam atos ilegais, denegridores, difamatórios, infames, violentos ou, em geral, contrários à lei, à moral e aos bons costumes;
2.4. Divulgue ou faça uso de pirataria, entendida como o ato de copiar, reproduzir, alterar, adulterar e/ou comercializar qualquer material, sem a devida autorização de seu criador, infringindo a Lei de Direitos Autorais brasileira ou internacional.

Fica a critério da moderação e administração do fórum avaliar e decidir sobre a violação por parte do usuário a estas normas, assim como aplicar a penalidade cabível.

Responsabilidades:

A responsabilidade do Forum Persocon se limita a assegurar o cumprimento das regras acima.

3. Sobre Avatares

Um avatar é uma representação gráfica do usuário, seu uso dentro do fórum da Persocon deve seguir as seguintes normas:

3.1. Um avatar deve ter a dimensão exata de 48x48 pixels, nem maior, nem menor;
3.2. O avatar não poderá conter imagens ofensivas, pornográficas, de gosto duvidoso ou de material protegido por direitos autorais;
3.3. A imagem do avatar não poderá conter nenhum tipo de propaganda ou promoção de terceiros;
3.4. A imagem do avatar não poderá conter cenas animadas, apenas imagens estáticas;
3.5. Não é permitido aos usuários a utilização de avatares oficiais da equipe da Persocon;
3.6. Será permitido aos usuários a utilização da logomarca da Persocon em sua forma original ou estilizada desde que esta não seja confundida com os avatares oficiais utilizados apenas por membros da equipe da Persocon.

O avatar deverá ser utilizado pelo usuário como forma de identificação visual em nosso fórum. Eles serão monitorados e avaliados da mesma forma que as mensagens o são. Caberá à moderação decidir sobre o conteúdo dos avatares e aplicar as sanções necessárias àqueles que não respeitarem estas regras.

O usuário é responsável pela manutenção de seu avatar dentro destas normas e é do usuário a total responsabilidade pelo seu conteúdo.

4. Sobre Assinaturas

O conteúdo das assinaturas estará sujeito aos mesmos critérios de avaliação de conteúdo do fórum, o texto não deverá ultrapassar 5 linhas no formato padrão da página.

Afim de que o fórum cumpra sua função é de extrema importância que o usuário conheça e cumpra estas normas. Para denunciar desvios de conduta o usuário poderá usar o botão “Report to moderator” localizado próximo a mensagem.

O Forum Persocon se reserva o direito de alterar as normas acima a seu exclusivo critério e anunciar estas mudanças em seu sistema de anúncios.


O PDF com as Regras pode ser baixado aqui http://persocon.org/forum/RegrasForumPersocon.pdf

 9 
 on: April 16, 2008, 05:05:43 AM 
Started by jeison - Last post by PotHix
Æ!!

Achei!
No Inkscape em português está em:

Efeitos > Gerar do caminho > Extrudir

Há braços

 10 
 on: April 16, 2008, 05:01:00 AM 
Started by jeison - Last post by PotHix
Æ!!

Ainda sou bem leigo em Inkscape e nem conheço o "recurso extrude"...= /
Onde fica?

Há braços

Pages: [1] 2