SPLASH!

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á! =]

5 Respostas to “SPLASH!”

  1. […] por Guilherme Razgriz (hellcomdevΘgmail·com) – referência […]

  2. Uau! Que lindo!
    Parabéns pelo post e pelo belíssimo splash.
    Sempre tive curiosidade em saber como era o trabalho de criação dessas “perfumarias” de desktop; muita vontade de aprender e nenhum talento para criar. rsrsrs
    Acredito que posso iniciar algumas aventuras a partir do seu post.
    Mais uma vez, parabéns!
    Grande abraço.

  3. Se quero aprender a usar o InDesign (imagino que vc conheça), é bom começar estudando tipografia e design gráfico, e não o próprio InDesign.

    Se quero aprender a programar, é bom começar por uma introdução (genérica) à programação, e não ficar brincando de Java ou C ou python.

    Se quero aprender a usar o Inkscape, por onde começo?

    Não necessariamente o que digo acima é a inteira verdade, mas ilustra minha idéia: aprender a ferramenta NÃO é aprender a fazer o que ela se propõe. É como afirmar que, p’ra aprender a escrever, basta aprender a usar o Word (blerg!) ou o OpenOffice (êba!).

    Daí, te pergunto novamente: se quero aprender a usar o Inkscape, por onde começo?

    P’ra não deixar de fazer a diplomacia: seus artigos são muito bacanas. Você merece um osso!😀 Continue assim,

  4. Olá Daniel,

    Não apenas concordo com o seu modo de pensar mas digo também que esta é uma das minhas diretrizes primárias.

    A resposta sua pergunta segundo o meu ponto de vista é:

    Antes de pensar em colocar esforços em qualquer vertente da computação gráfica seja ela proprietária ou livre deve-se primeiro estudar comunicação e imagem*(vide o mito da caverna) e depois estudar teoria da comunicação, para emfim ver direção do olhar para finalmente pensar em começar a criar. A boa noticia é que eu penso assim e outras pessoas não. Isto porque certas coisas nascem do sentimento como a própria arte que é algo totalmente diferente da direção de arte. Não fazemos para agradar a nós mesmos e menos ainda aos nossos clientes mas sim para que os computadores façam arte e para que nós façamos dinheiro e sobrevivamos.

    forte abraço

    Razgriz.

  5. […] SPLASH! Caros, Não não é nenhum comercial de uma certa pasta de dentes onde se beija na boca debaixo d’água salgada e […] […]

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: