Arquivo para novembro, 2008

SPLASH!

Posted in computação gráfica, gimp, Gimp Documentação, Gimp tutoriais, gimp tutorial, inkscape, Linux, software livre, Tutoriais, tutorial with tags , , , , , on novembro 9, 2008 by phenonart

Caros,

Não não é nenhum comercial de uma certa pasta de dentes onde se beija na boca debaixo d’água salgada e menos ainda um daqueles comerciais de um certo refrigerante de cor clara que adota conceito semelhante. Hoje analisaremos o processo de criação de uma tela de carregamento para programas e interfaces diversas tendo em vista que a demanda por esse tipo de trabalho se vê cada vez mais presente dentro e fora do software livre.

Como a tarefa de hoje é extremamente conceitual e de certa maneira interpessoal peço que vocês apenas empreguem os procedimentos aqui adquiridos a gosto sem a preocupação métrica de obter um resultado idêntico tanto em forma quanto em conceito do visto neste exemplo. Dito isso, comecemos criando um retângulo negro de cantos arredondados no Inkscape :

splas0

Agora duplique o retângulo criado e preencha-o com alguma cor de seu interesse, faça este escolha com cautela pois esta será a cor base do exemplo a ser gerado. Depois mova um pouco o novo retângulo para baixo fazendo uso da tecla Ctrl para que o alinhamento seja preservado. Caso você deseje manter o novo retângulo na mesma posição, utilize o atalho de redução porporcional “Ctrl + Shift +9” apenas uma vez para que se crie uma certa borda entre os dois objetos.

IPC: Não se esqueca de zerar o preenchimento de traço pois não queremos que o mesmo esteja visível em nossos objetos.

splas1

Feito isso, duplique o novo retângulo e preencha-o de branco depois sobre o mesmo aplique degradê linear, alterando a sua estrutura luminosa de maneira que a mesma fique relativamente próxima ao centro do objeto tendo a outra extremidade da linha atravessando o mesmo de maneira que a distribuição de luz se dê de maneira gradual de baixo para cima ou vice e versa. Depois, duplique este mesmo retângulo até que o padrão de luminosidade o satisfaça:

splas2

Agora selecione o primeiro retângulo criado da seguinte maneira, arraste os demais até que o mesmo se torne visível,em seguida execute o comando desfazer*(Ctrl+Z) para que os demais retornem as suas posições originais. Em seguida desfoque levemente o retângulo selecionado com valoração entre 0,8 e 1,9:

splas3

Após a execução dos procedimentos acima a base do projeto já está completa:

splas4

E outros tipos de base?

Como é do conhecimento de todos o universo se possibilidades depende do discernimento criativo de cada um, então para exercitar este recurso interno vamos analisar o processo de confeccção de outra vertente:

Comecemos com o mesmo retângulo negro:

splas0

Agora duplique-o e preencha o novo retângulo criado de branco:

splashb1

Feito isso,aplique altere a sua estrutura luminosa aplicando degradê linear e movendo a parábola até que a mesma adquira o padrão de distribuição luminosa ascendente ou descendente a seu gosto:

splashb2

Agora vamos ao grande pulo do gato: Aplique leve desfocagem ao objeto no qual estamos trabalhando e veja oque acontece=]:

splashb3

Feito isso, aumente um pouco a parábola luminosa de maneira  que ela contemple com luz uma area maior do objeto ao seu gosto:

splashb4

Opcionalmente podemos ainda duplicar este retângulo quantas vezes desejarmos para que o padrão luminoso se auto enalteça:

splashb6

Agora vejamos o que acontece quando alteramos o padrão de repetição do degradê para Refletido e aproximamos de forma alinhada o centro e o ponto de comprimento da parábola na horizontal:

splashb7

Pois é -=] possibilidades não nos faltam aqui. De posse disto, vamos dar seguimento ao conceito proposto no primeiro exemplo do dia:

Conceito e Execução:

Sempre falo a vocês sobre a importancia de primeiro ter um conceito antes de ao menos pensar em conceber algo e isto não se aplica apenas a peças publicitárias mas sim a TODA E QUALQUER FORMA TRANSMISSORA DE MENSAGEM e uma Splash-Screen é uma das com maior potencial inexplorado.

O conceito que escolhi para esta aqui foi o de modernidade e tecnologia de maneira quase subliminar, para tanto simplicidade e limpeza no layout são duas diretrizes essenciais

splas4

Para começar a trabalhar neste conceito irei utilizar uma tecnica já vista por nós aqui no blog que é a construção de espectros vetoriais leves. Vamos a ela:

Primeiro comece criando uma linha belzier curta adicionando a ela uma curva de maneira opcional:

splas5

Agora duplique o objeto e arraste o novo para baixo mantendo pressionada a tecla “Ctrl” a fim de preservar o alinhamento dos mesmos. Em seguida selecione os dois objetos e aplique união sobre os mesmos:

splas6

Eis o que temos:

splas7

Agora acesso o menu de efeitos sobre caminhos:

splas8

Dentro do mesmo selecione o recurso denominado “Pontilhar Sub-Caminhos”:

Uma vez neste, clique em “Aplicar”. Em seguida vem a grande “mágica”, no primeiro campo substitua o valor cinco por duzentos:

splas9

Veja o que aconteceu, o objeto se tornou um espectro vetorial de traços! Agora utilizando a ferramenta de edição de nós vetoriais podemos esculpi-lo a nosso gosto=]:

splas10

Satisfeito com o resultado redimencionemos o espectro até que ele caiba dentro da nossa base, não se esqueça de que ainda é possivel coloca-lo onde bem entendermos ou ainda molda-lo ao nosso bel prazer:

splas11

Agora duplique o espectro e preencha o novo de branco, feito isso, mova-o um de maneira tênue e gentil para um dos lados ou para baixo a fim de que um leve relevo se forme:

splas12

Para tornar a coisa ainda mais subliminar apague o novo objeto deixando apenas o primeiro espectro, depois pinte-o de branco. Para o caso de a sua base ser mais escura basta reduzir a opacidade do espectro para um nível abaixo dos 30%:

splass

Agora é hora de escrever uma pequena palavra ou texto para identificar o que ela está “carregando”, para tal, digite algo do seu interesse e escolha uma fonte que combine com o conceito idealizado por você:

splas14

Escolhida a fonte, duplique o texto digitado e arraste o novo objeto para baixo, mantendo o alinhamento para com o original:

Depois, desfoque um pouco o texto original e pinte o objeto recém movido para baixo de branco:

splas15

Agora mova-o de volta para sua posição original e veja o que temos=]:

splas16

Muito bem, este é o final do exemplo do dia:

finablow

Eu disse final? Hum….acho que não =], levando o nosso exemplo para o Gimp vejamos oque alguns pincéis e um degradê azul  dentro de uma camada sobre o nosso exemplo sob a chancelaria do efeito de camada denominado “Diferença” nós temos?

finablow2

Pois é , e se eu resolvesse usar o filtro mapeamento alien para alterar a estrutura coloral e luminosa?=]

fin1ablow2

Agora sim =], acredito que os meus queridos alunos entenderão a mensagem.

De posse disto: VEJO VOCÊS NO NOSSO PRÓXIMO ASSUNTO.

Até lá! =]

Anúncios

O conceito de Manobrabilidade e o Gimp.

Posted in computação gráfica, Computação Gráfica Livre, gimp, Gimp Documentação, Gimp tutoriais, gimp tutorial, Linux, software livre, Sotware Livre Rio de Janeiro, Tutoriais, tutorial with tags , , , , , , on novembro 6, 2008 by phenonart

Caros,

com o lançamento do novo Gimp tivemos algumas alterações na interface além da habitual agregação de novos recursos. Não cabe a mim comentar se tais alterações são boas ou ruims no âmbito extra opinião INDIVIDUAL uma vez que não sou desenvolvedor sou publicitário.

Então, dentro deste limite posso dizer que tal mudança não me agradou de todo pois preferia que o menu de ações rápidas continuasse no mesmo lugar que a caixa de ferramentas, mas fora isso não vi problema algum na mudança ocorrida. Dito isso podemos partir para o que realmente interessa que é a explanação sobre manobrabilidade.

Manobrabilidade é o conceito que envolve a organização do espaço de trabalho da ferramenta que está sendo utilizada na execução de uma determinada tarefa, seja ela simples ou altamente complexa e trabalhosa.

A imagem abaixo mostra o Gimp 2.6 em sua forma original quando aberto pela primeira vez:

Uma das principais alterações na estrutura do programa foi o alocamento do menu “Arquivo” e adjacências para a interface de controle da imagem a ser trabalhada sendo que a mesma agora é visível de forma permanente e não apenas quando temos uma imagem em aberto:

fmcinit2

O primeiro passo para modificar a disposição da interface de trabalho do Gimp a nossa maneira é compreender como funciona a mecãnica de adição e exclusão de recursos da interface de de trabalho do mesmo:

Comecemos com o pequeno utilitário de configuração de interfaces, este pequeno recurso está presente na interface denominada “Caixa de Ferramentas”*(antiga Interface principal do Gimp)  e também em todas as janelas pré-existentes e também nas que serão eventualmente criadas por você durante a custmomização do ambiente de trabalho do programa. Clicando sobre este recurso temos acesso a um menu de opções aonde podemos adicionar novas abas a interface na qual desejamos, seja ela fixa como a denominada “Caixa de Ferramentas” ou mesmo descartável como uma nova criada por nós para alocar recursos diversos:

fmcinit3

Para adicionar um novo recurso a interface em forma de aba, basta clicar sobre o mesmo:

fmcinit4

Como transformar uma aba e ou acoplamento em janela?

Este procedimento é muito simples, posicione o cursor do mouse de maneira que o mesmo adquira o formato de um link clicável semelhante ao visto na imagem abaixo:

fmcinit5

Agora clique e arraste a aba para fora da interface na qual ela se encontra:

Note que durante este processo a aba ou acoplamento se torna um retângulo que pode ser colocado em qualquer parte da área de trabalho, inclusive dentro de outra interface de assim você desejar:

fmcinit6

Opcionalmente ainda é possível redimencionar o tamanho de qualquer janela ou interface bastando aproximar o cursor de suas extremidades e arrastando as mesmas até que o tamanho desejado seja configurado:

fmcinit7

E para transformar uma janela em aba ou acoplamento?

Tal procedimento é praticamente o inverso do executado anteriormente, clique sobre a janela a sofrer a alteração da mesma maneira que foi feita com a mesma enquanto aba e arraste-a para a interface desejada até que o hachurado da confirmação do encaixe se torne visível:

fmcinit8

Depois que a area de encaixe estiver visível basta soltar o botão do mouse:

fmcinit9

O Espaço ORGANIZACIONAL:

Agota que já analisamos a mecânica de inclusão e exclusão de recursos da interface de trabalho do Gimp, vamos agora visualizar maneiras de se montar um ambiente prático que fomente o aumento da eficiência do nosso trabalho além de proporcionar prazer e confiança:

O “Willber” presente no canto esquerdo de cada janela não é um enfeite, na verdade ele é um ítem importantíssimo quase sempre ignorado por nós. Clicando sobre ele, temos acesso a um menu onde podemos definir o comportamento da janela dentro do ambiente gráfico que estamos utilizando, veja que se marcarmos a opção “Sempre no topo” a janela que sofreu a intervenção irá ficar visível independente dos programas que sejam utilizados em primeiro plano:

fmcinit15

Veja o que acontece quando diminuímos a largura da interface denominada “Caixa de Ferramentas”, note como as ferramentas primárias formam linhas paralelas facilitando o seu acesso por categorias de cima para baixo:

fmcinit11

Agora veja o que acontece quando maximizamos o tamanho da janela da interface de trabalho da imagem do Gimp, repare como ela engloba todas as demais interfaces pré-existentes de uma vez só, tornando o ambiente totalmente unificado*(tal “unificação” só é possível com o recurso visto acima ativado):

fmcinit12

Ou ainda é possível trabalhar com as já conhecidas janelas flutuantes *(meu modo favorito) bastando para isso apenas alocar os recursos desejados aonde bem entendermos:

fmcinit13

Como a alocação de recursos é algo extremamente pessoal, deixo isso ao seu bel prazer encerrando o assunto de hoje por aqui.

Vejo vocês no nosso próximo assunto!=]

%d blogueiros gostam disto: