Aug 11
O design segue tendências, e é comum que cores, estilos e efeitos entrem “na moda”. À algum tempo atrás, lembro-me que o efeito “drop shadow” (aquela sombrinha) era o efeito do momento. Atualmente, um dos efeitos mais comuns é o reflexo, e vem sendo por tempos popularizado pela Apple e seguido por diversas pessoas e designers. De fato é um efeito bem bonito, mas o que mais vejo é este reflexo sendo mal aplicado, tornando a arte bem feia. Vamos aprender hoje a criar este efeito de reflexo da forma correta.
Um bom efeito de reflexo deve levar várias coisas em conta:

  • Tamanho do reflexo
  • Nível de transparência
  • Fundo
  • Ângulo de visão inferior
Vamos lá então. Primeiro vamos abrir o Inkscape e criar um novo documento. Neste exemplo, criei uma página A4 e coloquei ela em formato paisagem.
Pegue a ferramenta de texto e escreva o texto que você quer aplicar o efeito. Mude para a fonte de sua preferência, menos Comics Sans, é claro (clique aqui e entenda o porquê)!
Com a ferramenta da Seta Preta, selecione o texto e vamos duplicá-lo indo em EDIT > DUPLICATE (ou pressionando o atalho CTRL + D). Sem apertar nada, automaticamente o Inkscape já deixa selecionado o texto de cima. Você não verá diferença pois um texto está exatamente em cima do outro. Vamos invertê-lo indo agora em OBJECT > FLIP VERTICAL (tecla de atalho “V”). Isso irá inverter nosso texto.
Com a Seta Preta, arraste o texto invertido de forma a colocá-lo logo abaixo do original (dica: segure CTRL enquanto arrasta o texto para que ele fique alinhado). Selecione o texto de baixo (que vai ser nosso reflexo).
Agora pegue a ferramenta de Gradient (Ctrl + F1):
Clique mais ou menos na parte superior do texto de CIMA e arraste até a metade do texto de BAIXO (dica: segure CTRL para que a linha fique na vertical perfeitamente). Veja como deve ficar:
Para entender, na barra superior, você verá o gradiente que aplicou. Clique no botão Edit:  (esta opção só aparece com a ferramenta  selecionada).
Na janela que abrir, vamos entender o que aconteceu. Como você pode ver na imagem abaixo, na parte superior o menu Drop Down mostra 2 paradas do gradiente (no meu exemplo elas se chamam Stop2393 e Stop2395). A primeira parada leva a cor PRETA. A segunda parada também leva a cor PRETA, mas possui ALPHA zero (o alpha é o nível de transparência). Selecione a segunda parada (no meu exemplo a Stop2395). Note como o Alpha (representado pela cor “A”) está em “0″, o que indica transparência total. Abaixo você pode ver a primeira parada com o Alpha 100 ainda.
Usando este conceito podemos transformar qualquer objeto de 1 cor em reflexo facilmente. Para mais cores, o melhor é fazê-los de forma separada (cor por cor), visto que o Inkscape ainda não trabalha muito bem com máscaras (uma pena).
Agora vamos dar uma incrementada na nossa arte. Com a ferramenta de criação de elipses () vamos criar uma elipse simulando uma sombra. Veja abaixo o exemplo:
Selecione a elipse e vamos editar seu preenchimento clicando no botão  com a elipse selecionada.
Na caixa de diálogo que abrir, vá até a aba “Stroke” e clique no “X” para garantir que ela não tenha nenhuma borda:
Agora vamos na aba “Fill” e configurar o preenchimento. Escolha o quarto botão que fará um gradiente radial (vamos usar o mesmo esquema de gradiente que usamos para o reflexo: de preto para preto com alpha zero).
Voltemos para a área de trabalho e vejamos o resultado. Se vc quiser, pege a ferramenta de gradiente novamente () e puxe as duas pontas das linhas até obter um resultado melhor. Depois disso, reorganize a ordem dos elementos de tal forma que o texto de cima fique por CIMA DE TUDO, depois venha a sombra que criamos e por último o texto de baixo em reflexo por BAIXO DE TUDO (isso fará bastante diferença quando você utilizar outras cores que não o preto). Veja abaixo como o meu ficou:
Agora para finalizar, vamos criar um retânculo com a ferramenta  pegando a página inteira e novamente use a ferramenta  para criar um gradiente. Faça de baixo para cima, iniciando na parte inferior da página e parando no meio (mais uma vez use o CTRL pressionado para garantir que a linha fique reta). Clique no botão Edit do gradiente novamente com o retângulo selecionado:
Na janela, vamos configurar as 2 paradas da seguinte forma: A primeira preta com alpha 50. A segunda preta com alpha 0. Isso vai criar um cinzinha para branco. Envie o retângulo para baixo de todas as outras imagens selecionando a ferramenta Seta Preta, clicando 1x no retângulo e clicando no botão .
Reorganize os elementos na posição que desejar e confira o resultado final:
Quando for usar um efeito de reflexo, lembre-se sempre de alguns detalhes para evitar um resultado “franskenstein”:
  • Muitos designers gostam tanto do reflexo que acabam deixando-o muito forte. No exemplo acima, acredite, o reflexo já está BEM FORTE. Eu mesmo costumo utilizar algo mais fraco que isso em meus trabalhos. Domine a técnica e não deixe a técnica te dominar.
  • Observe objetos em cima de mesas de vidro para entender como funciona. Utilizar este efeito em textos é relativamente simples, mas em objetos tridimensionais a história é outra. A arte que vai em baixo como reflexo deve ser a do mesmo objeto visto de baixo e não de cima. Veja o exemplo abaixo, note como a imagem da esquerda está com o efeito aplicado de forma incorreta, e a forma certa na imagem da direita:

  • Quando usar letras de tamanhos diferentes, existem algumas possibilidades. Você pode alinhar o reflexo pela letra maior ou separar as letras e fazer o efeito em uma por uma. Se separá-las, vai dar a impressão que a letra maior está mais na frente que as outras.

  • Cuidado com a inversão. Para criar o efeito reflexo, você deve INVERTER a imagem no eixo horizontal (ou seja… verticalmente). Não cometa um erro muito comum que é rotacionar a imagem 180º, ou o resultado será muito estranho (note como o reflexo das letras de baixo não bate com as letras de cima):

written by LedStyle \\ tags: , , , , , , , , , , , , , , , , , , , , , , , ,

Jan 22
Para quem não tem possibilidades de comprar um Mac ou mesmo um Mac OS que tal deixar seu computador ao menos parecido com este tão aclamado sistema operacional?
No Gnome podemos configurar perfeitamente estes recursos. Segue um pequeno vídeo que gravei de meu próprio Desktop configurado como no Mac. Mais abaixo ensinarei como proceder para deixar o seu igual.
CLIQUE AQUI com o botão direito e selecione “Salvar Destino Como”. (Não use plugins para ver do browser pois o filme deve ser visto em tela cheia apenas e o plugin pode cortar a imagem).

 

 

Primeiramente instale os mesmo temas que eu utilizei abaixo (Sistema > Preferências > Temas):
Sistema Operacional: Ubuntu Linux 5.10 Breezy
Ambiente Gráfico: Gnome 2.12
Tema GTK: Platinum
Tema Metacity: T-ish
Tema Ícones: SnowIsh (Recomendo o PNG que pesa menos. Mas você pode usar o SVG)
Wallpaper: Aquablue
Após configurar tudo isto, devemos configurar o Metacity (borda das janelas) para que os botões fiquem na ordem do Mac OS (na esquerda).
Aplicações > Ferramentas de Sistema > Editor de Configurações
Vá nas chaves: apps > metacity > general e localize a chave button_layoyt. Altere o conteúdo dela para close,minimize,maximize:menu. Isto deve dar conta.

Agora precisamos configurar para que um duplo clique na borda da janela faça com que ela se enrole e não maximize. Para isso vamos em Sistema > Preferências > Janelas. Na opção Ação da barra de título marque a opção Enrolar.

Agora vamos configurar as fontes para um tamanho um pouco menor. Vá em Sistema > Preferências > Fonte. Eu coloquei tudo Verdana tamanho 8 aqui, mas você pode trocar. Recomendo usar tamanho 8, mas a fonte de sua preferência.

Agora só falta aquela barrinha bonitinha e animada abaixo. Trata-se do Gdesklets. Para instalá-lo execute o comando sudo apt-get install gdesklets. Abra o programa no menu Aplicações > Acessórios > Gdesklets e vá em Arquivo > Instalar Pacote. Instale o seguinte pacote que se encontra AQUI. Feito isto o Desklet StarterBar deve aparecer na lista. Dê um duplo clique nele e quando ele aparecer, mova o mouse até o desktop e clique la com o botão esquerdo. Vá arrastando os ícones do menu para dentro da barra e use o botão direito para editar os lançadores. Eu aqui editei todos e troquei por ícones da própria barra do Mac OS X que encontrei pela internet. Tem alguns legais AQUI.

Estamos quase lá! Agora vamos configurar o Gnome para que abra a barrinha do Gdesklets automaticamente no Login. Vá em Sistema > Preferências > Sessões e na aba Programas Iniciais adicione o comando gdesklets na posição 50.

Pronto! Você já tem um sistema igualzinho o Mac OS X na aparência. Se você ainda quiser uma Splash Screen legal para colocar no Gnome, tente ESTA AQUI.

Agradecimentos ao LaSSarD pois me inspirei num Desktop dele pra fazer o meu.

written by LedStyle \\ tags: , , , , , , , , , ,