Tostitos comercial – web

Apreciem este vídeo. Um vídeo aparentemente comum, porém ao se desenrolar vemos que ele transcende a área determinada para o vídeo. A bailarina percorre por toda tela cortando tomates, cebolas e outros ingredientes apenas com sua saia afiada. Com um magnetismo originado da capacidade de explorar os recursos da web, o material encanta. E não procure no Youtube não. A versão lá é limitada ao espaço do vídeo. Nesta versão flagrada no vimeo, ela corta até o nome do site no topo da tela (olhe a 3a. imagem abaixo a saia saindo da área do vídeo). Vale o clique. [+info]

Fonte (by vectortuts no twitter) [+info]

Espero que gostem.

Abraços.

LPM/designer

Coleção Wrangler Blue Bell

Isso que chamo de perfeita adaptação de mídias alternativas. A Wrangler conseguiu explorar o potencial da ferramenta que até hoje é uma das mais importantes na web: o flash.

Nesse site a Wrangler faz com que o modelo da foto vire um boneco “solto” esperando para que você pegue-o e jogue para um lado ou para outro, esperando que você arranque a roupa igualzinho como as meninas faziam na infância.

Visite o site e brinque com as animações. Usufrua  do potencial que a internet proporciona e que a Wrangler conseguiu explorar com muito sucesso.

Espero que gostem

Visite e interaja AGORA, muito bom: [+info]

LPM/designer

Campanha CLARO ESCOLHA: Plágio ou inspiração? VOTE!

Assista e vote!

Anterior << Clipe SOUR (Hibi no neiro)

.

Posterior >> Campanha da Claro “Escolha”

Mais sobre este clipe: +info

para Designers – Ferramentas Poderosas

Aqui vão dicas quentes para os designers e para os pretendings….. Neste post vou dar ferramentas poderosas para criação de material gráfico, criação para web ou o que for. Links que vão potencializar suas habilidades.

Todo designer precisa de imagens bacanas, fontes diferentes, desenhos vetoriais ou até sites de inspiração. Relutei muito em colocar no ar esse post, todavia não imagino que o dom que Deus me deu é para me esconder atrás de ferramentas que estão disponíveis para todos. Jack Welch mudou muitos paradigmas parecidos como este na GE, e em sua gestão o valor de mercado da companhia pulou de 14 biljhões para 410 bilhões de dólares. Nem por isso ele ficou quieto. Mesmo aposentado e decidido a não escrever mais sobre o assunto, ele publicou mais 2 livros que foram igualmente um estrondo de vendas.

Portanto percebo que o sucesso está no que temos de melhor, e não nas descobertas que temos fora de nossa essência.

Ok, depois desse blá-blá-blá inevitável, seguem os links:

1. Imagens FREE – sxc.hu :

Esse site foi um dos precursores de banco de imagens gratuitas, imagens baratas ou nem tanto. Basta cadastrar-se e se deliciar com a variedade, qualidade e dinamismo do site. Cresceu tanto que em poucas semanas atrás foi comprado por um grande banco de imagens pagas do ramo. A maior concorrente que não conseguia abafar o crescimento deles: a iStockphoto. ATENÇÃO: sempre cuide com os direitos das fotos. Por estarem disponíveis não significa que estão isentas de direitos autorais. Algumas estão, mas não todas. Pesquise também texturas ou desenhos. Similares: Morguefile, Dreamstime.

2. Fontes Free- tipos de letra gratuitos: Dafont:

Aqui temos o meu preferido. O site é simples, dinâmico. Os grupos de fonte estão divididos por fantasiosas, letras estrangeiras, escritas a mão, techno, básica e dentro de cada um ainda temos subdivisões. Podes procurar por nome de fonte, por ordem alfabética e é muito clara a interface. Em um ou outro clique tens a fonte no teu desktop. Aqui temos diversas fontes inclusive que se aproximam de fontes caras e famosas. Não que seja para substituí-las pelas clássicas compradas, mas pode salvar muito incêndio no caso de precisares de uma letra, uma palavra, que não justifique a compra do alfabeto inteiro ou de uma familia de fonte. Vale muito o clique. Similares: Fontspace, 1001fonts, Fontsquirrel.

3. Descobre fonte – mecanismo e site de compra de fontes ou fontes gratuitas. MyFont:

No MyFonts temos fontes gratuitas, fontes pagas num acervo muito bem selecionado. Mas o passe de mágica está no item “What the font” que descobre que fonte que é através de uma imagem. Se tiveres uma foto de uma palavra qualquer, basta carregar lá, confirmar as letras que o site vai te sugerir e uma lista provável vai aparecer ao lado de sua imagem. É algo mágico. Claro que a imagem deve estar bem definida, mas já me salvou diversas vezes de enrascadas. Hoje parece que sou expert no assunto, sei de todas fontes existentes, hehe. Similares: Nenhum.

4. Logos – Marcas famosas (ou nem tanto). Brands of the World:

Quando precisares de uma marca famosa em vetor, em desenho pra aplicar num material, mas o fornecedor mandou um formato que não abre, ou pra qualquer outro motivo: visite, procure e baixe. Caso queira disponibilizar um logo pra fornecedores hoje ou a qualquer tempo ou lugar: faça o upload de sua marca para o site. Se por ventura tenhas despendido horas desenhando uma marca conhecida e queres contribuir para que outras pessoas tenham acesso a este trabalho: faça o upload. Isso ocorreu com o brasão da bandeira do RS. Eu precisei arrumar (foi uma trabalheira) e depois joguei lá no site. Agora está a disposição. Similares: GMK Free Logos.

5. Gerador de texto genérico. Lipsum:

Quando criamos layouts e peças – sejam gráficas ou na web – invariávelmente necessitamos inserir um texto de marcação. Pra não ficar aquela coisa ridícula de “Nononon nonono” existem sites que fornecem textos em latim. Esses textos modelos são tão velhos quanto nosso País (Brasil). Neste site além de um pouco da história deste texto em latim padrão, ele tem a ferramenta geradora. Logo abaixo do histórico tens um campo numérico (que já vem com o número 5) que deves inserir o número desejado de parágrafos, letras (no caso de uma palavra), bytes ou listas.

Depois basta selecionar, copiar e colar no ser trabalho. Similares: lorem-ipsum, blind text generator.

.

Bem, espero que seja muito proveitoso, no que precisar de dicas, entre em contato.

LPM/designer

Como criar um email marketing

Aqui vou mostrar passo a passo como montar um email marketing. Neste caso eu utilizei um arquivo que já havia feito, imagino que isso não vá atrapalhar. Cada movimento é exemplificado com screenshots e highlights nas palhetas e opções de configuração de cada imagem, layer (camada) ou ferramenta.

1. Desenhe no Illustrator a parte vetorial, a parte de desenho pois temos maior mobilidade, maior precisão e agilidade para trabalhar com desenhos e ilustrações.

2. Faça os boxes e alinhe tudo.

3. No quadro bem de fora, na moldura exterior, selecione e aplique o efeito Effect>Stylise>Round Corners para que fique com os cantos arredondados.

4. Coloque um valor (não esqueça de ligar o Preview) e OK.

* Para editar o efeito tem que  abrir a palheta Appearence e clicar duas vezes no fx (Efect) no canto direito.

5. Agora com tudo pronto selecione tudo e copie (famoso Ctrl+c no PC e Cmd+c no Mac).

6. Abra um arquivo novo no Photoshop. Ele deve vir com as medidas da imagem copiada (na memória do computador) lá do Illustrator. Só verifique as dimensões e a resolução. Lembro que para internet, acima de 80 dpi (DPI=Dots Per Inch – Pontos por Polegada) já é desnecessário. Eu coloco um pouco mais (120 dpi) mas não é preciso mesmo. Quanto maior a imagem, mais pesado vai ficar de construir sua arte. Lembre também das dimensões das diferentes telas de computador. Guie-se sempre pela menor utilizada no mercado.

7. Procure uma imagem na internet de papel velho. Abra no Photoshop e com a seta (ponteiro) arraste pra cima de sua arte.

8. Use o Transform (Ctrl+T no PC e Cmd+T no Mac) e sempre apertando a tecla Shift, rotacione, amplie e posicione de modo a preencher a tela.

9. Utilize o zoom de 100% para teres uma noção real do que vai ser visto (tamanho de fonte, tamanho dos desenhos e imagens).

10. Cole (Ctrl+V para PC ou Cmd+V Mac). Escolha a opção Pixels e OK.

11. Posicione a imagem e pressione Enter para colar a imagem.

12. Perceba que na direita temos as camadas (chamadas de layers – em inglês). Claro que por se tratar de um arquivo que eu já havia montado, perceberás a existência de outros layers. Desconsidere, observe apenas as ações que estão sendo executadas. Neste caso, troque a visualização deste layer em questão pra Multiply para que as cores se misturem (e o branco desapareça) e dê um ar mais realista, como se estivesse impresso no papel seus desenhos do Illustrator.

13. Insira todo o texto, título e tudo. Nas caixas de texto deixo uma dica: comece sempre pelo texto maior pra que faça um padrão e não precise ficar arrumando tudo. É mais fácil colocar menos texto e sobrar espaço do que ter que ficar diminuindo tudo ao perceber que um deles não entrou no espaço delimitado.

Título…caixas de texto separadas.

Letra “A”

14. Pressionando o Ctrl no PC ou o Cmd no Mac, clique no quadradinho “T” da palheta de layers indicado na direita. Isto vai criar uma área de seleção ao redor do texto, neste caso a letra “A”.

15. Pode desligar a visualização do layer clicando no “olho” como na indicação maior abaixo. Depois crie um layer clicando no ícone da folha virando bem abaixo da palheta de layers.

16. Escolha a ferramenta Pincel (Brush Tool – ou pressione “B” no teclado). Agora vamos selecionar um picel bacana. Clique no topo onde aparece um estilo de pincel e um numero. Vai abrir uma caixa com diversos tipos diferentes e inusitados de pincéis. Depois de escolher o tipo, escolha o tamanho dele (marcado em pixels – px) – dê uma passeada SEM CLICAR por cima da sua arte. Desta forma poderás perceber o tamanho que seu pincel está.

17. Ao lado de suas cores na palheta de ferramentas (esquerda) tem um ícone pequeno que resetará suas cores para preto do Photoshop e branco. Clique e comece a pintar com suaves cliques. Por estar a área selecionada, somente dentro da seleção “A” que aparecerão suas pinceladas.

18. Depois de pintado clique bem abaixo na palheta dos layers na Quick Mask (máscara rápida)

19. Perceba que uma máscara preta vasada aparecerá na lateral direita. Sua seleção vai desaparecer. Neste momento temos um bom truque. Tudo que for pintado de preto vai sumir e o que for pintado de branco vai aparecer. Isto serve para arrumar com o mesmo brush sem deletar nada. Caso algo saia errado, basta arrastar a máscara para o lixo, descartá-la e repetir a operação.

Pronto! é assim que deve aparecer sua arte no final.

LPM/designer

Site de Casamento

O site do casamento é algo que sempre fica por último. Como a verba sempre é menor que o orçamento desejado, o site acaba sendo deixado de lado ou feito em sites gratuitos.

Não que tenha qualquer problema com isso, tem gente que não dá bola pra essas coisas. Mas eu gosto de escolher bem, e junto com minha (então) noiva, buscamos um padrão visual que tudo combinava. As flores tinha as cores do material gráfico que combinavam com o site. As fotos do telão passavam imagens do Chá-Bar (despedida do casal). Tudo tinha harmonia. Mas isso é assunto de um antigo post (+info)

.

Clipe – SOUR (Hibi no neiro)

Olha essa dica de clipe do site Tom Procê. Achei o sensacional.

É clipe filmado com fãs do mundo inteiro pela webcam. Gostei da dica pessoal.

Abraço.