Tiny Chat

TinyChat.com

Designeando periodicamente

Ae galera, vou postar aqui algumas revistas de design e seus respectivos links, ou como bibliotecários chamam, periódicos. É sempre bom saber, ter uma fonte a mais, saber das fofocas e tudo mais ^^

Projeto Design
Arc Design
Emigre
Graphis (mto foda essa)
Design
Design Gráfico
Arcos
Web Design
OQ Design
Digital Designer
Dsign

tem mais um monte...mas essas já ajudam ^^

Cores, formas e otimizações de imagens

Bom dia pessoal

Estava aqui estudando o famoso CSS com o livro “250 HTML and Web Design Secrets” e depois de ver muitos conceitos legais de regas de css e HTML (alguns ultrapassados pelo livro ser antigo) encontrei uma área que é de muita ajuda quando se fala em imagens na web e um pouco depois sobre cores e formas... achei muito legal então além de anotar tudo aqui no meu precioso caderninho, eu também resolvi compartilhar isso... porque é de grande utilidade...

Começando com imagens para web

Todos vocês devem estar se perguntando qual raio de extensão é a melhor para salvar arquivos, qual o melhor raio de programa para criar e editar imagens, e (talvez) por que raio tantos...

A muito tempo atrás quando o computador não tinha ainda uma internet, apenas transferência de arquivos por uma rede extremamente lenta de computadores (sem plataforma web) um cidadão Eric Hamilton da empresa C-Cube Microsystems em 1983 criou o formato JPEG para transitação de imagens no computador e por conseqüência do momento, na internet. Logo depois em 1987 uma empresa chamada CompuServe resolveu implementar também sua própria otimização de arquivos de imagens na internet, então ela criou o arquivo .GIF (Graphic Interchange Format).

A diferença dos dois é a seguinte

(de forma bem simples)

O .GIF (Graphics Interchange Format) tem 256 cores em sua paleta (incluindo transparente), tornando seu arquivo dependente dessa gama (não que isso seja pouco) isso já reduzia muito o tamanho do arquivo, mas também tem outro fator... ela mapeava a imagem na hora da otimização, e criava “códigos” para a forma, por exemplo: tenho uma imagem que é um círculo preto num fundo cinza claro, como ela otimizaria isso, criaria um código (como uma função) falando onde são as fronteiras da parte branca, e também da parte preta, fazendo uma função só para o preto e outra para o branco, sem contar com a localização no tamanho da imagem e afins... mas no fim são apenas “funções” definindo de onde até onde vai certa cor.

O .JPEG (Joint Photographic Experts Group) já faz otimização diferente, a sua imagem é transformada numa grande matriz (campo quadriculado) com quadradinhos bem pequenos,(com capacidade em torno de milhões de cores) e dentro desses quadradinhos vem a informação da cor que está nele, e quanto menos quadradinhos, menor a quantidade de informação de cor dentro deles, e menor o tamanho (em Kb) do arquivo (diferente do .gif não exporta quadrados transparentes).

Mas nos dois casos, após a otimização, a imagem é transformada numa grande matriz, no caso do .GIF essa matriz é menos alterada quando redimensionada a imagem, mas o .jpg faz um estrago muito maior (criando mais quadrados, esticando os que existem multiplicando ou duplicando as cores dos quadrados adjacentes).

“Ah mas ainda tem o .PNG que você ainda não falou”

Opa... claro... o famoso...

O grande problema das extensões .jpg e .gif na época era que as empresas que os criaram cobravam para o desenvolvedor de software ou qualquer outra entidade que quisesse usar essa extensão, cobrava direito de exportação. Então surgiu publicamente o .PNG (Portable Network Graphics), que engloba as duas otimizações e ainda mantém o canal alfa (transparência) com definição muito mais aprimorada que o .GIF, fazendo valer a pena o seu uso nos projetos Web ,muito mais agora que os browsers estão se dedicando a compreender essa transparência da extensão, e também por sua alta taxa de otimização e qualidade.

Então aqui vão as dicas:

- Se você estiver com uma foto, uma imagem com troca de cores muito intensa e variada, use .JPG para melhor definição e otimização.

- Se está trabalhando com vetores, imagens com pouca transição de cor e linhas rígidas de objetos, tente o .GIF por sua otimização por funções numéricas para linhas e cores.

- Se você está com um projeto web, e também precisa de uma qualidade boa com transparência, por favor, use o .PNG... ele ainda é pouco utilizado mas parece que depois desse “upgrade” nos browsers ele chegou pra ficar!

Os Programas

"Ei qual a diferença de usar um Photoshop e um Corel Draw (ou Illustrator) "

A diferença é a seguinte, o Photoshop é um programa MATRICIAL que trabalha com a imagem separa por minúculos quadrados (normalmente por pixeis) que contém uma cor específica que em grande escala vira um desenho,e ele atua em cima dessa matriz, podendo ser criada qualquer tipo de imagem e solução visual. Claro que têm seus poréns, por exemplo, sua definição de imagem é totalmente restrita ao tamanho (dimensões) de seu arquivo, se aumentar ele (diminuir nem tanto) ele perde considerávelmente a resolução, e também não é muito aconselhável para impressões e trabalhos minusciosamente precisos, e quando você for exportar sua imagem, otimizá-la, conta muito o tamanho do arquivo, se seu arquivo for muito grande (de dimensões) quer dizer que têm mais quadrados na matriz com definições de cores, então mais informações, logo ele é maior em kbytes.

O Corel ou Illustrator é VETORIAL ou seja ao invés de trabalhar com uma matriz de pixeis, ele cria funções e códigos para as coisas que estão aparecendo na sua frente, por exemplo, se você criar uma linha reta, ele cria um F(x) dentro de sua programação que determina o tamanho de sua linha, a grossura, a cor. Então essa linha é uma linha, se você alterar os lados dessa linha o código vetorial que vai mudar, é um número e não uma informação dentro de vários quadrados. Então se você aumenta essa imagem em dimensões ela não aumenta em peso, pois a única coisa que está fazendo é mudando um valor no número da função desse elemento ( o y para de ser x e começa a ser z), e não importa o Zoom que você dê nesse arquivo ele vai ter linhas totalmente precisas, pois é uma função, e não mais uma matriz. Também tem seus poréns, ele não te dá as mesmas liberdades que o photoshop, ele dá outras possibilidades, mas a parte mais liberta da imagem vai da sua experiência e criatividade com a ferramenta e com seu projeto. Ele é o mais indicado para criações de peças perfeitamente alinhadas e medidas, é o melhor recurso para impressões e afins pela sua perfeição de traço.

UFA!

Agora vêm as cores

No meu livro encontrei algumas tabelas que podem ser úteis na criação de projetos visuais no que diz respeito a cores, suas utilizações, impactos e principalmente "A Psicologia das Cores".

Vermelho	Poder, energia, amor, calor, paixão, perigo, agressão, violência, sangue.
Azul	Confiança, conservadorismo, segurança, tecnologia, limpeza, clareza, calmaria, ordem
Verde	Natureza, terra e Terra, saúde, boa sorte, inveja, renovação, dinheiro
Amarelo	Otimismo, alegria, esperança, Filosofia, desonestidade, covardia, traição
Roxo	Espiritualidade, mistério, poder, mítico, transformação, crueldade, arrogância
Laranja	Energia, calor, destaque
Marrom	terra, confiança, conforto, resistência
Cinza	Inteligente, futurista, elegante, modesto, triste
Branco	Puro, limpo, precisão, inocência, morte
Preto	Poder, sexualidade, sofisticação, mistério, medo, infelicidade, morte

*Interessante:

De 2 a 3% das mulheres do mundotem um sentido para detectar cores muito mais avançadas que o normal do ser humano, elas tem um sentido de "cones" onde veêm mais cores (normalmente em aves raras) e são classificadas tetracromáticas.

Fonte:http://en.wikipedia.org/wiki/Tetrachromat

http://www.4colorvision.com/files/tetrachromat.htm

Dicas de cor

- Antes de tudoconheça seu público alvo, para melhor definir as cores mais adequadas.

- Como o azul é universalmente aceitável, ele vai ser útil em maioria dos casos.

- Lembre-se que ao inserir uma textura á sua imagem a cor de foco muda.

- O texto deve estar adequado com cores e fundo de acordo com o público alvo, mas é também universal ele estar destacado em contraste.

Link de um site bem legal sobre cores: http://www.colormatters.com

The simbolic meaning of Shapes

Retângulo	Autoridade, estabilidade, força, limpo, legível, claro
Triângulo	Ação, movimento, direção, masculino
Círculo	Comunidade, movimento fluído, flexibilidade, feminino

Tomara que tenha sido de grande proveito ^^.
Desculpa as falhas das tabelas, tá dando sozinho e não dá pra arrumar XC

JWT Brasil

É gente... já que estou no emablo falando de grandes agências de Design...
não posso deixar para trás outra muito grande e também muito boa, com trabalhos ótimos...
a JWT Brasil

Eles também fazem trabalhos para grandes nomes!!!
Coca-cola (também muito grande)
Nokia
Bayer
HSBC
Gazeta Mercantil

Bom já deu pra entender né...
muito bom entrar e conferir o trabalho dos caras!!!!

Gringo

Se você é Designer, Web Designer (ou interesse)... e ainda não entrou no site da Gringo...
TENHA VERGONHA
(A não ser q não tenha entrado por raiva dos caras... aí passa XP)



Os caras são fodasss!!! São muito renomados no mundo do Design... todos queremos um lugar ali no minho!!! (principalmente Web Designers)... os caras são muito bons... só dar uma olhada no portfolio meu... foda!
(e o site tem uma proposta bem legal/interessante)
Tem como portfolio as melhores empresas de comunicação visual do MUNDO!
COCA-COLA (portfolio imenso)
Absolut
Motorola
Gatorade
HP

Bom... deu pra entender né... muito bom...
Eu aconsehlo a dar uma navegada SEMPRE nesse site dos caras e dar uma olhada nos portfolios!!!

Ps no chinelo.

Não é porque eu não gosto muito de games, que eu vou deixar de acompanhar acontecimentos relacionados a esta esfera, a qual, inexoravelmente pertenço.
O Wii é um console legal [ponto]. Não posso dizer muito, mesmo porque ele ainda é muito distante das minha possibilidades 'financeira-psíquicas', porém SINTO MUITÍSSIMO sony e derivados: as propagandas da galera da Nintendo a despeito do Wii deixam qualquer um, no chinelo.
Vejam só, três, das mais bacanas propagandas de console que eu já vi EVER!


Pois é!
Gostei.
Beijo.

Google Docs

Oi gente... hoje eu vim postar sobre o famoso Google Docs... pra quem não mexeu ainda nele... venho com o apelo... USE-O... eu usei e me apaixonei cara... caramba ele eh mt bom pra trabalhos em grupo... ou até sozinho... escrever coisas...





É isso ai, imagine seu documento no word... mas ele está ligado (instantâneamente, fiz o teste XP) com todas as pessoas que você desejar... mesmo tendo q ter o email do gmail (q hoje em dia todo mundo tem... por causa do orkut XP)... voce convida a pessoa... e ela pode editar simultaneamente um texto com você...

E meu foi uma mão na roda... pq em trabalhos eu sempre faço com um cara (Jackieee) que trabalha q nem um condenado... e nem sempre tem tempo de sentar pra pensar no trabalho e tal... outro cara (Faba XP) mora la n a pqp heaueaheauheaueahuea... e tbm fica dificil da gente se encontrar... e foi ótimo... pq além de vc editar junto... ele fica lá online... ou seja, eu edito (editei) com Fabão... e escrevemos um texto juntos (juntos MESMO), e depois de um tempo... o Jackie entra no docs dele... e lê... e talvez comenta... pra quando eu entrar denovo estar lá...
Detalhe: Super Rápido... sem frescura... google eh foda mesmo vio...

No começo também fiquei meio em dúvida... " se eu estou editando ao mesmo tempo... quando acabar qual vai ser a principal" (na verdade a mesma coisa que acontece com um doc avulso né)
Mas não... a cada minuto ele salva sua alteração.. e já aparece no documento de quem está vendo com você... é muito rápido... da até pra fazer um chat com o cara que tá com vc... eu fiz... fica fácil.. pra comenta sobre o texto e tal... "ah cara esse parágrafo fico bom... vamo fala sobre tal tal tal"

Caaaara... me apaxonei pelo recurso... e não faz só documento no word... faz planilha... e apresentações... eu só vi o de texto... e eu digo... não deixa a desejar!!!!

Super Propagandas

"Não é o que você diz...mas como diz..." (by Nike)

Altas propagandas geniais!

"Alimente a mente de sua criança"

"Te vejo a mesma hora amanha"
(Propaganda da Kellog's)

"Se você tem que forçar, é estupro"
(People Opposing Women Abuse - Pessoas Contrárias ao Abuso de Mulheres em que duas páginas de uma revista estão coladas)

"Hey, cidade que nunca dorme, acorde" (Em NY)

(Propaganda de uma escola de karatê na Índia)

"Não beba e dirija, chame um táxi"
(Propaganda de uma danceteria na Índia que, além de super consciente, simples e objetiva, aproveita e faz um up no marketing da companhia de táxi local...a idéia tá sendo aderida em várias partes da cidade)

Campanha "A Poluição atmosférica afeta qualquer um" do Cingapura. Amo propagandas conscientes ^^

Passar bem galera ^^

Pictogramas, Ideogramas e Fonogramas.

Os pictogramas são símbolos gráficos que têm por objetivo informar as pessoas que se utilizam do espaço, funcionários ou público externo. Por ser uma comunicação exclusivamente visual, pode ser entendida por qualquer pessoa, mesmo que está não saiba ler ou seja de outro país.
Para se fazer um pictograma, utiliza-se a abstração. São considerados os pontos cruciais para a identificação do ser, objeto ou lugar, e se forma o objeto visual.



Esse video tambem trata de abstração, e também dá uma boa idéia do conceito



Na verdade, os pictogramas basicamente deram origem a escrita.
As primeiras formas de representação do homem foram as pinturas rupestres em cavernas. Com o tempo, fim do nomadismo, o homem precisava de formas de se comunicar, identificar situações, então fazia desenhos bem sintéticos da circunstância. São os pictogramas, representações do conteúdo da língua de um povo.

Para se representar um homem ou uma mulher, era desenhado um homem ou uma mulher.

Pedaço de argila sumeriana com registro das rações diárias em pictogramas

Ai surgem os Ideogramas. São representações de idéias, de conceitos.
Por exemplo, para se explicar um homem jogando bola, a idéia da cena do cara chutando, se fazia uma abstração:


Nesse caso, a imagem não representa o homem ou a bola separadamente, mas o conceito de futebol.
Esse é o formato do alfabeto chinês.

E por fim, sugem os Fonogramas, compostos de símbolos abstratos que representam fonemas, que juntamente formam palavras. São as letras em potencial.

Um dos primeiros alfabetos foi o fenício, que influenciou o grego e que influenciou o latino, o que usamos hoje.

Alfabeto Fenício

Alfabeto Grego

Alfabeto Romano

Bom, essa é uma noção bem sintética da história da escrita.

Comentário pessoal: A idéia de abstração que deu origem à escrita pode ser muito útil, pois é a prova de que uma imagem apenas necessita ser conceitual para ser entendida. É sempre bom lembrar né galera?

Passar Bem ^^

Pixel Show

Super conferência de design, com o combo maximo: DESIGN, ARTE, FOTOGRAFIA, ILUSTRAÇÃO, ARTE DE RUA, MODA, CINEMA. Super evento com enfoque na Criatividade, o Pixel Show é organizado pela editora Zupi, com uma programação que inclui:

• 10 palestrantes no auditório;
• exposilçao skate art;
• feira de revistas, escolas, serviços gráficos, moda e tecnologia
• arte urbana e técnicas de graffiti;
• festival de motion, animação e comerciais;
• música ao vivo;
• prêmios, brindes e mais um monte de coisa.

O tema deste ano é: "Originalidade e tendências nas vertentes do design e da arte"

Quando: 13 e 14 de setembro de 2008
Onde: Fubndação Memorial da América Latina (Auditório Simon Balívar) - Barra Funda SP
(pertinhozinho do metro Palmeiras - Barra Funda)
Hora: 8h - 20h
Quanto: De R$120 a R$280 (salgaaaado)

VAGAS LIMITADAS

Compra de ingressos: www.pixelshow.com.br
info@pixelshow.com.br
(11) 50849040 / 39260174

File 2008

Aê Genteeeeeeeeee...
o Filé!!!!

File 2008

se você é do cara que curte interface... e curte tecnologia... o melhor evento pra vc ir...
DE GRÁTIS
DAHORA
INTERNACIONAL
EM SÃO PAULO

Eu e a galera da minha sala (+ prit por enquanto) vamos ai nessa bagaça... no sabado... vamo tá la acho q das 2 ás 5... vai ser legal pra caramba... o último q eu fui já estava no fim e ainda tinha mt coisa legal!!!!

Aconselho!

Primeira Postagem da Luthi! eee!

Bom, primeiramente, Só vou me apresentar bem rapidinho,
Sou Luciana, mas pode me chamar de Luthi...entrei aqui na equipe do blog
a convite do Tales "Huggy Bear" (acabei de inventar tal alcunha ;P), e faço Design Gráfico - Comunicação Visual no Senac. Eu também sou extrovertida, tenho 1,75, e quero a paz mundial (hehe, besta). Mas ao que interessa.

Bom, minha área é, bem sinteticamente, a influência da imagem. Uma imagem vale mais do que mil palavras? Sim! Qualquer imagem? Não. Uma imagem conceitual, né galera. Bom depende da situação, óbvio. Um monte de gente de branco, com champagne numa praia
passa a imagem de Ano-Novo pelo menos pra 99% das pessoas...mas anyway...não é esse o ponto (vou terminando, senão fica chato).

Bem, toda vez que eu vou fazer um projeto, eu preciso de um conceito, e a imagem tem que passar aquilo que eu quero dizer. Uma imagem conceitual funciona quando não é necessária uma legenda. Agora, imaginem ter que assistir um comercial TURCO!
Isso aí, com certeza o comercial vai convencer? Ele pode muito bem. Um comercial conceitual nao precisa estar na sua lingua, contanto que você saiba de que se trata.
É um comercial de refrigerante, de carro... Por isso, vou postar um video de um comercial de banco da Turquia que eu acho o maximo!

Passar Bem ^^

Del.icio.us

De acordo com o aquecido calor de nossa adorável Prit... vou falar um pouco sobre o Delicious

Delicious (ou del.icio.us 'legal né... tbm achei')
é um simplório site de locação de favoritos... "duhh... mas pra q?" Horas... você tá na sua casa... e acha um site super legal... ai quer mostrar pra todo mundo na facu ne... "uhul galera olha esse site foda q eu achei... ai na hora de achar o site é akele:
www.pao-com-ovo.com.br
www.paocomovo.com
www.paocomovo.org

e nunca acha o bendito site q eh www.paocomovo.blogspot.com (nosso antigo endereço XP)

então aí está a linda ajuda a todos nós webbers e interfaceros...



del.icio.us
E não é só isso!!!
Você separa seus links por tags (como os marcadores do blog q eu adoro lota td)
que ajuda muito na hora de vc achar algo que procura... separa td por tags... e fecho na hora de procurar eh uma belezura...
E ainda MAIS!!!
você pode conpartilhar seus links com sua galera...
vai q vc ta de boa na net e acha um link q a prit ia adora... vc simplesmente colocar for:prit... eh uma maravilha... eu não sei oque dá pra fazer com as inovações né... ams concerteza vou dar uma olhadona
Ah eu adoro... tudo bem q eles agora tão com uma cara nova q eh uma bosta e a usabilidade fico uma merda maior ainda... posto links qse todo dia... sempre no trabalho né..
(por isso não tenho postado mt coisa... tá meio apertado ultimamente... então fico aqui... 00 43 da matina morrendo de inveja dos posts da prit postando algo só pra me sentir útil haeueahuea)

Se você é como eu (delicious.com/Jubicreusa) ou nossa agraciada Prit (delicious.com/lady_croft) por favor se junte nesse mundo maravilhoso de links

Getting inspired!

All~right, Let's Think!

Uhm, se um designer é alguém com uma postura criativa, lhe é preciso inspiração!
Acabei de assistir o filme O Terminal [fabuloso] (The Terminal, 2004), com Tom Hanks, e me inspirei de tal forma a vir comentar sobre o que "absorvi" do filme.
-- everything is knowledge, so join me and let's be some kind of 'apprentice' (always)


A primeira coisa que aparece no filme: A linguagem.

O cara não fala a língua do país em que esta, complicado né? Ninguém consegue fazê-lo entender, ele não entende as coisas ao seu redor... a não ser por imagens. Ai q tá!

Signos, imagens... eis sua importância: são independentes de língua, porém são dependentes de contexto e cultura, claro. E é justamente por essa capacidade de transmitir informações sem "palavras" que aqueles desenhos sem falas me impressionam, eu diria que "SÃO MTO FODA!" (Sorry) Podemos trazer alguns exemplos, como:

Pingu


Tá, mas, esse recurso "mudo" pode ser aproveitado pra algo mais... útil? Claro! Veja a TVO:

uma televisão dentro dos ônibus de SP. Genial, já que, mesmo que não mto respeitado, aparelhos sonos são proibidos dentro do transporte.

O contrário tb é feito, veja esse vídeo "TAKE THE LEAD - Addictive TV Remix", É um vídeo comercial desenvolvido para ser o trailer oficial do filme Take the lead (Vem Dançar):


A manipulação sonora e a repetição visual informam, trazem ao espectador do trailer um gostinho do "ritmo" e doq se trata o filme, sem contar que é MOH DAHR hahaahha

-- Tem mais aqui> http://www.addictive.com/clips.php


Ok, mas, VOLTANDO ao Terminal..
Outra coisa que podemos "pegar" do filme é sobre caráter (uhh, só assistindo mesmo viu..)
Um dos personagens do filme tenta corromper o sr protagonista (Tom Hanks), para que as coisas se resolvam mais facilmente.. Isso lembra uma frase de Gandhi:
"Você deve ser a transformação que deseja no mundo"

Indiferente se todos ao seu redor agem de certa forma, e por mais difícil que seja (e creia, é mto difícil), vc não deve deixar-se levar pela maioria, mesmo que vc seja o único a pensar assim, agir, etc. (É por estas que as vz me sinto um belo de um ET) E olha só como isso também é retratado em outro filme, um dos meus favoritos, V for Vendetta:
"Our integrity sells for so little, but it is all we really have. It's a very last inch of us, but within that inch, we are free. An inch, its small and fragile, and is the only thing in the world worth having. We must never lose it... We must never let them take it from us. - Valerie"


O Sr Navorski faz, no filme, coisas que são difíceis de se ver alguém fazendo, o cara é uma boa inspiração!

Aliás, falando em coisas difíceis de se ver/fazer, sei de duas músicas que estão quase nesse cenário, a primeira eu diria que abre espaço para uma análise sobre a tecnologia e virtualidade das coisas, mesmo que ela não fale explicitamente, podemos (talvez) pegar de exemplo alguns "gestos perdidos" q foram "facilitados" virtualmente, como dar cartões, e etc - não vou ficar pirando mto nas músicas.. - a segunda, eu diria que abre espaço pras coisas que falei no parágrafo acima, sobre agir = a maioria e os gestos..:


>> Virtual Insanity - de Jamiroquai
Leia:
http://vagalume.uol.com.br/jamiroquai/virtual-insanity-traducao.html

Acompanhe:
http://www.lastfm.com.br/music/Jamiroquai/_/Virtual+Insanity

Assista:
http://www.youtube.com/watch?v=gJmX1z1NY2c


>> AntsMarching - de Dave Matthews Band
Leia:
http://vagalume.uol.com.br/dave-matthews-band/ants-marching.html

Acompanhe:
http://www.lastfm.com.br/music/Dave+Matthews+Band/_/Ants+Marching

Assista:
http://www.youtube.com/watch?v=5LY9p8Spe7Y

-- Achei legal inserir músicas neste post, por mais q o foco seja o filme, qria deixar explícito cmo é importante ter um repertório vasto, vc acaba fazendo essas conexões de uma coisa com outra automaticamente XD

Bom, teria outras coisas a dizer sobre o filme, coisas que pensei enquanto assistia e pensava neste post (q parecia mais legal na minha cabeça u_u) mas, pra fechar..

Uma frase ficou e veio junto com o final do filme: Gratidão. (Potz, não posso falar mto se não dá SPOILER! >_<')
Gratidão pelos pais..
Aproveito pra desejar um ótimo dia dos pais pra todos!
=*