Design do site da Sagres Chocolate e o foco no processo

A Cervejaria portuguesa Sagres lançou o hotsite da sua nova cerveja preta com toque de chocolate, que correu toda a internet pelo visual lindíssimo e pela inovação da ideia. A novidade é que além de ser um site muito bonito, ele foi inteiramente construído de verdade e fotografado, veja você mesmo o resultado.

O site é todo composto de partes feitas em chocolate, fotografadas e animadas em stop-motion. Apesar de demorar um pouco pra carregar, vale a pena.

O toque de inovação que tem nesse site, é além do resultado primoroso, o enfoque no processo de criação e na integração do físico com a internet, que dá um toque muito especial e aumenta o valor do produto-final, veja o “baking of” da sagres:

 
Making Of da Sagres Preta Chocolate

Ultimamente, tem surgido mais projetos em que o processo e mostrar como as coisas foram feitas, sobretudo se tiver uma parte construída fisicamente,ficam em foco. Ou ninguém lembra daquele material impresso feito sem nenhum tipo de edição de imagem das havaianas?

Havaianas Verão: Making Of

Nesses dois casos, o da Sagres chocolate e da Havaianas, o processo, o Making of foi largamente publicado, tanto quanto o produto final, pra de alguma maneira agregar algum valor e destacar o trabalho.
Ultimamente esse tipo de publicidade tem funcionado bem, e parece que mais projetos desse tipo vão aparecer, pra nossa alegria, já que são muito interessantes.

Posted in Artigo, Criação, design, web | Leave a comment

500px, comunidade de compartilhamento de imagens

500pxAssim como o Flickr, que permite o upload e compartilhamento de suas imagens( fotos ou ilustrações, o que seja) surgiu também o 500 px, que chama logo a atenção de pelo design bem simples, e que deixa as imagens em destaque.

- 500px.com

Tanto para Fotógrafos, quanto Designers e Ilustradores, é um ótimo lugar pra compartilhar e socializar suas imagens, além de servir como portfólio.

Untitled-3

Contando com uma página de perfil bem objetiva e interessante, e uma página de imagem onde tem botões de redes sociais e um “like/dislike” bem intuitivos.

Resumindo, é um site promissor, que pode substituir sites já estabelecidos como o flickr, acompanhemos.

Posted in Acessorios, imagem, Pixels, portifólio, web | Leave a comment

Novo recurso de busca a partir de imagens do Google

Sabe aquela foto que você não sabe de onde é? ou aquele símbolo que você acha interessante mas não conhece origem/significado? ou até mesmo aquela marca que você precisa pesquisar? O Google inovou mais uma vez e lançou o serviço de busca a partir de imagens da Web ou do seu computador. O serviço pode localizar lugares, pessoas, símbolos.

Basta arrastar uma imagem, fazer um upload, ou copiar e colar a URL da imagem, na página de busca de imagens do Google vejam mais no vídeo abaixo

Busca do Google a partir de imagens
Posted in Cloud Computing, Dica, imagem, web | Leave a comment

ALTERAÇÃO – A AGÊNCIA MAIS BONITA DA CIDADE

Homenagem do blog Passion for Ideas, ao meme mais recente da internet, a música Oração, da Banda mais bonita da cidade, parodia bem engraçada, valhe a pena, confiram.

Posted in Vídeo, web | Leave a comment

Megafônicas 2011

megafonicas2011E aí galera, de leve na neve? Hoje eu estou aqui só para falar pra vocês sobre um evento sobre design muito bom que vai rolar em Salvador nesse sábado (28 de maio): O Megafônicas. A galera da Universidade do Estado da Bahia (grupo intitulado como “Os novos 100 de Salvador”) resolveu organizar esse evento – que já rola há algum tempo e já rodou o Brasil – na própria universidade esse ano.

Argumentando sobre a falta de interação entre os cursos de design na Bahia e com os temas “Aqui se faz”, “Aqui se paga” e “Aqui se pensa”, a galerinha da UNEB montou um evento que preza o crescimento através das diferentes visões apresentadas nos debates, o envolvimento, e principalmente, a união.

Pra quem não sabe, o Megafônicas consiste em um sistema de mesas redondas com debates ocorrendo de forma simultânea. Decorrido um tempo previamente decidido, as pessoas trocam de mesa seguindo uma ordem descrita em seus crachás, e assim tem a oportunidade de visitar as diversas mesas e discutir sobre todos os temas.

As inscrições online para esse sábado estão encerradas, mas não entre em pânico, ainda haverá inscrições presenciais. Como as vagas para inscrição presencial são POUCAS, se você quer ir para o Megafônicas e não se inscreveu, chegue cedo, essa é a dica.

No Tumblr do mgf2011 podem ser encontrados materiais muito interessantes sobre os temas abordados nas mesas, além de orientações sobre como chegar ao local, o horário, instruções gerais entre outros. Além disso, a hashtag #megafonicas2011 está bombando no twitter. Quer saber mais sobre o evento?  www.mgf2011.tumblr.com

Texto por: Mariana Barros (@wtfmaribe)

Posted in Criação, design, Evento, Megafônicas2011 | Leave a comment

Terça dos Curtas #7 Simples de Fazer

Alô meu Brasil!
Pra início de conversa, devo desculpas a meu pai e minha mãe, que são únicos que lêem o TC, por não ter postado semana passada. Aconteceram umas coisas e não tive tempo suficiente para criar o post (sabem como é, né? Deixo pra fazer tudo em cima da hora). Então para não fazer um Terça dos Curtas em plena Quarta-feira, preferi deixar para a próxima semana. Pronto, agora vamos dar início ao TC! A única parte mais ou menos do seu dia.
Curta da Semana

O curta de hoje é muito emocionante, e fico sem palavras para descreve-lo. Vejam:
Lindo, não é? Te faz refletir por bem umas horas.
O vídeo segue uma linha bem dramática, com cores em sépia, uma trilha sonora bem suave e bastante slow motiom. Até quando eles colocam as frases no vídeo, aplicam um efeito meio esfumaçado que vai surgindo aos pouquinho, pra manter a essência do vídeo. Quando você começa a assistir, já imagina o que te espera.
E esse foi o TC de hoje, meu galera!
Aqui Daniel Bastos e que Deus abençoe. :)
Posted in Vídeo | Leave a comment

Métodos de vetorização

vetorizaçãopVocê sabe o que é bacanal vetorização? Pois é meus queridos, hoje vou ensinar a vocês 2 modos diferentes de transformar uma imagem bitmap em vetor, rapidinho e bonitinho, vamos nessa?

Primeiro, vocês tem que ter em mente que não adianta fazer uma vetorização no Photoshop, para depois rasterizar tudo, perde todo o sentido.

- Vetor? quequeisso?
- Se ainda assim, preferir o PS, go to vexel

Automatize

No Illustrator, assim como no Corel tem power ou Corel trace, existe uma ferramenta de vetorização automática chamada Live Trace que se ajustada corretamente, pode te retornar um trabalho limpo e rápido.

Existe ainda o Potrace, que é um motor de vetorização com licença aberta, que é usado pelo Inkscape.

Mas calma ae, nem tudo pode ser resolvido desse modo, o Live trace é muito útil, è melhor que sejam imagens monocromáticas ou line arts, pra ter um resultado agradável.

vetorização

Pen Tool

Quando a imagem é mais complexa, e tem mais cores, mantenha a calma e use a pen tool para traçar todo o objeto.

O método é simples, é só traçar calmamente o contorno dos objetos, separando pelas cores e pronto, você tem um vetor. Claro que para imagens mais complexas, você vai ter que usar uma malha e gradientes, pra definir profundidade e coisas do tipo. É um processo demorado, mas não difícil, a chave é ter paciência.

Mais para imagens um pouco mais complexas, não há dificuldades.

Posted in Edição, Guia, Illustrator, Vetores, Vetorizações | Leave a comment

Como evitar o bloqueio criativo

bloqueiocriativoDepois de ter ensinado a vocês duas técnicas pra fugir do vazio criativo, hoje vou ensinar alguns modos de evitar esse bloqueio, com alguns hábitos que podem melhorar o fluxo de ideias e a criatividade.

 

Leia Muito

Leitura exercita a criatividade e a imaginação, e te leva pra um outro universo, fora dos problemas e dificuldades da vida cotidiana

Cuida da sua saúde, durma e se alimente bem

Com um corpo saudável, a alma e a mente esbanjam saúde também. Cuidar dos hábitos e horários de sono e alimentação aumentam a capacidade cognitiva, a concentração e o raciocínio.

Saia da caixa

Desligue o Computador, ouça uma boa música, busque outro tipo de referencias, fora do contexto inicial. Se desligar um pouco de certo processo ajuda a esfriar a mente e repensar as coisa de um outro ponto de vista.

Utilize Brainstorm e o Mapa de Ideias

Não esquecer de usar desses dois recursos para organizar a mente e gerar novas ideias, a fim de aumentar o fluxo de ideias e a capacidade mental.

- Brainstorming e Mapas mentais

Converse muito

Conversar, sobretudo se for pessoalmente, te força a raciocinar, criar argumentos instantaneamente, discutir seus pensamentos e ter um outro ponto de vista, ouvindo os argumentos e ideias alheias.

o importante é se cuidar, e mudar de contexto de tempos em tempos, para não estagnar o próprio pensamento.

Posted in Criação, Criatividade, Guia, Inspiração | Leave a comment

Arte final, afinal

artefinalExistem coisas que por mais que no conceito funcionem muito bem, e muito facilmente, na prática não funciona bem assim, uma delas é o Arte-Finalista, aquela pessoa que teoricamente faz a pós-produção de um trabalho mas que na prática é aquele carinha da gráfica que ajeita a página no Corel.

 

Arte final, o que é isso?

É a parte final do trabalho, que visa corrigir imperfeições e definir as ultimas especificações num projeto. Na área serigráfica, for uma peça de vestuário, tem que saber qual o tipo de tecido e quantas cores vão ser aplicadas na arte que será utilizado para a melhor definição da arte no tecido.Em história em quadrinhos e ilustrações editoriais, consiste em dar acabamento no desenho a lápis para que possa ser reproduzido e publicado. Através de diversas técnicas e estilos, é possível conseguir inúmeros resultados no estudo de preto e branco com a utilização do nanquim.

Artes finalistas na área gráfica

Em trabalhos gráfico, é quem acerta margens, pontos de corte, sangrias, cores e prepara a pré-impressão. É quem corrige imperfeições no trabalho dos outros e aperfeiçoa o resultado final.

O arte finalista ideal entende de diagramação, pós-produção, editoração, tipografia, impressão, cores, legibilidade, leiturabilidade e materiais. O problema é que grande parte da galera que diz fazer arte-final, trabalha em gráfica utilizando Corel Draw fazendo um trabalho parco (não nego que é suficiente pra gráficas pequenas, mas não pra algumas gráficas que mantem projetos maiores).

Resumindo, Arte final é um trabalho necessário, e muito, e que como todos os outros, deve ser executado com maestria.

Posted in Artigo, Corel Draw, Design Gráfico, finalização | Leave a comment

Tabela de cores Web Safe

tabela de coresOlá, meus queridos, imaginem-se desenvolvendo algo pra Web, ou criando alguma imagem que precise de cores que não se modifiquem quando forem pro meio online, agora imaginem lindas tabelas com todas essas cores catalogadas e numeradas pra vocês, imaginaram?

As cores em HTML e CSS, ou são representadas pelo nome ou por uma sequencia de seis caracteres (entre 0 – 9 e A – F) chamado de representação Hexadecimal. Nos editores da Adobe, as cores Web safe podem ser selecionadas marcando a caixa “only Web colors”.

WEB safe

Seguinte, a manha com Cores Web-Safe, que não se modificam nem em monitores de 256 cores, é utilizar sequências de números em pares, no código hexadecimal, como mostrado na tabela de cores abaixo:

#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

Ta vendo essas cores daí? podem usar pra Web sem medo de serem felizes, até porque, nada como a segurança de cores que não se modificam em monitor nenhum, sobretudo nessa época pré HTML5 e CSS3, que a imagem vai se tornando cada vez menos usual em sites, portanto, sempre ande com sua linda tabela de cores a mão.

Posted in cores, Edição, finalização, tabela de cor, web | Leave a comment