Feed

29 maio 2008

Como enlouquecer um designer

Recebi esse e-mail hoje e achei o máximo!! Ri demais!


Resolvi compartilhá-lo com vocês para que riam junto. Concordo que tudo me irritaria fácil, e antes de chegar no último passo eu teria matado o cliente. ¬¬


Não veio com o autor e estou com preguiça e sem tempo de olhar no Oráculo. Então se alguém souber posta nos coments.


XD


Como enlouquecer um designer


1. Microsoft Office
Quando você tiver que mandar um documento para um designer gráfico, certifique-se que ele foi feito com algum programa do Office. Versão PC se possível. Se você tiver que mandar figuras, você terá mais chances de enlouquecê-lo; ao invés de apenas mandar um jpeg ou um raw de câmera digital, insira as figuras em um arquivo de Office como o Word ou Powerpoint. Não se esqueça de baixar a resolução para menos que 72 dpi, assim eles terão que contatar você novamente para pedir uma versão com a qualidade melhor. Quando você mandar a versão 'melhor', certifique-se que o tamanho seja no mínimo 50% menor. E se você estiver enviando as figuras por e-mail, esqueça de anexá-los de vez em quando.


2. Fontes
Se o designer gráfico escolher Helvetica, peça Arial. Se ele escolher Arial, peça Comic Sans. Se ele escolher Comic Sans, ele já está 50% doido, então seu trabalho está 50% pronto.


3. Quanto mais melhor
Suponhamos que você precise de um designer para um jornal. Designers gráficos vão sempre tentar deixar espaços em branco em qualquer lugar. Margens largas, o alinhamento, o kerning do texto, etc. Eles vão dizer que eles fazem isso para facilitar a leitura e manter um visual limpo e profissional. Mas não acredite destas mentiras. Eles fazem isso para deixar o documento ainda maior, com mais páginas, e isto lhe dará mais prejuízos com a gráfica. Por que eles fazem isso? Porque designers gráficos odeiam você. Eles também comem bebês. Sem cozinhar, carne de bebê crua.

Então certifique-se de lhes pedir para colocar margens menores e um texto muito muito pequeno. Diferentes tipos de fonte também são uma boa pedida (e você ganha bonus se pedir Comic Sans, Arial ou Sand). Peça clipart. Peça muitas figuras (se você não sabe como mandá-las, veja o item 1). Eles vão tentar argumentar e defender as escolhas deles mas não se preocupe, no final, o cliente está sempre certo e eles irão acatar todos os seus pedidos.


4. Logos
Se você tiver que mandar um logo de um projeto particular para um designer gráfico, de um patrocinador ou parceiro por exemplo, certifique-se de que ele seja realmente pequeno e um gif ou jpeg de baixa resolução. Novamente, você ganha pontos se inseri-lo em um documento Word antes de mandá-lo. Agora você deve estar pensando que isto tenha sido suficiente mas se você quiser mesmo abalar a estabilidade mental de um designer gráfico, dê o seu melhor e mande uma versão do logo com um fundo que dificulte o seu recorte. Fundos pretos ou brancos devem ser evitados, já que são facilmente cortados com um layer style mais escuro ou mais claro no photoshop. Uma vez que o designer gráfico estiver trabalhando em um logo bitmap, diga-lhe que você precisa dele maior.

Se você precisa de um logo customizado, faça os seus próprios rascunhos em um guardanapo. Ou melhor ainda, deixe seu filho de 9 anos desenhar isso. Seu rascunho não pode demorar mais que 5 minutos para ficar pronto. Você não quer algo detalhado e fácil de ser entedido, porque quanto menos um designer entender o que você quer, mais mudanças ele terá que fazer no futuro. Nunca aceite o primeiro logo. Nunca aceite o nono, faça-o fazer várias mudanças, cores, fontes e clipart. Peça-lhe para adicionar uma foto no logo. Cantos. Gradientes. Comic Sans. E quando ele estiver em sua décima tentativa, diga-lhe que você gostou mais da segunda. Eu sei, isso é cruel, mas lembre-se: designers gráficos são a causa do câncer de mama entre as mulheres de meia-idade.


5. Escolhendo suas palavras
Quando estiver descrevendo o que você quer para um designer, certifique-se de usar termos que realmente não signifiquem nada. Termos como 'jazz it up a bit'* ou 'poderia tornar isso mais webístico?'. 'Eu gostaria de um design bonito' ou 'Eu prefiro gráficos legais, gráficos que, você sabe, quando você os vê você diz: esses são gráficos legais.' são outras opções.

Não se sinta mal com isso, você fez a coisa certa. De fato, é a sua obrigação porque todos nós sabemos que em noites de lua cheia, os designers gráficos se transformam em lobisomens.


6. Cores
A melhor maneira para escolher as cores (porque você não quer deixar o designer gráfico escolher) é escrevê-las randomicamente em pedaços de papel, colocá-los em um chapéu e sorteá-las. O designer gráfico irá sugerir que você fique com 2 ou 3 cores no máximo, mas não. Escolha quantas cores você quiser e certifique-se de fazer o sorteio no chapéu na frente dele. Enquanto fizer isso, cante uma música bem chata.


7. Prazos
Quando for a sua vez de aprovar o design, relaxe. Não há pressa. Espere dois dias. Mais seis. Conforme o fim do prazo for chegando, contate o designer com mais correções e mudanças que ele tenha tempo para fazer.

Afinal, os designers gráficos são responsáveis pelos ataques do 911* (ou 190 aqui pro Brasil-sil).

EDIT: para não mudar o texto, esse 911 é na verdade sobre o 11 de setembro


8. Acabe com ele
Depois de aplicar todos os itens desta lista em sua vítima, faz parte da natureza humana (embora alguns irão argumentar se eles são humanos ou não) ficar um pouco inseguro. Conforme ele for percebendo que não pode satisfazer suas necessidades, o designer gráfico irá abandonar todas as suas esperanças de vencer uma discussão e irá fazer só o que você disser para ele fazer, sem questionar. Você quer aquilo em roxo? Então é roxo. Seis fontes diferentes? Claro!

Nesta altura dos fatos, você deve estar pensando que venceu, mas não se esqueça do seu objetivo: ele tem que desistir desse negócio. Então esteja pronto para o golpe final: Quando estiver em suas decisões finais sobre cores, formas, fontes, etc, diga-lhe que está desapontado com a falta de iniciativa dele. Diga-lhe que afinal de contas, ele é o designer e que ele deveria ser o cara que coloca sua experiência e seu talento no trabalho, não você. Que você estava esperando mais soluções e avisos sobre o design dele.




ps¹.: Obrigada Zoh pelo e-mail.. ri muito! xD

ps².: Odeio Comics Sans ¬¬



;)

28 maio 2008

Convite para conhecer a W3C Brasil


A W3C, empresa de padronização web, está convidando "todo mundo" para o lançamento do seu escritório no Brasil dia 4 de junho em São Paulo.


Desde novembro do ano passado possuiam o escritório mas só agora vão formalizar.


No site da W3C Brasil pode ser feito o credenciamento e visualizar a agenda com a progamação, além de outros detalhes como endereço, horário etc.


E o melhor: entrada gratuita!



;)

16 maio 2008

The Photoshop Anthology: donwload completo!!


A Sitepoint disponibilizou para download GRATUITO um pdf do livro THE PHOTOSHOP ANTHOLOGY: 101 Web Design Tips, Tricks & Techniques, completo com quase 300 páginas. O arquivo está disponibilizado agora, vai ficar lá por tempo limitado. Então anda logo e baixa um para você, dei uma passada de olho rápido, e o conteúdo é muito bom, tanto para quem está começando quanto para os photoshopers de longa data!


Enjoy!!!!



;)

Meus brushes favoritos no Photoshop

O post de hoje é fora do CSS. Já fiz muito artigo.. he. Vou dar só uma pausa neles.


Esse artigo é uma lista dos meus brushes favoritos. Aqui eu coloquei só trinta e três, mas deve ter pelo menos uns 50. A maioria eu peguei no search do deviantART, e sempre que preciso de mais o primeiro lugar que eu visito é lá.


Se eu baixar novos eu posto aqui para vocês. ;)


Só mais uma coisa, esse artigo eu fiz para uma nova amiga que vive falando que não entende os artigos de CSS, Silvia: olha, tutorial não vai dar não, mas pelo menos uns brushes eu te recomendo!!!! ;)


Visitem a minina no deviantART dela (que tem montagens ótimas) e no seu blog.



                                                                




ps.: A maioria dos brushes são compatíveis só com as versões acima do Photoshop 7.



;)

14 maio 2008

Propriedade de cores: "opacity"

Propriedade de cores: "opacity"

A propriedade de opacidade do CSS3 pode ser usada em cima de imagens ou fundos escuros para que possamos destacar algum outro conteúdo, como textos, formulários ou menus.


Resultado final
exemploOpacity1

Como a maioria das propriedades do CSS3, essa também ainda não funciona nos navegadores mais antigos ou em outros que não seguem o padão W3C, por isso não é muito recomendado em alguns casos. Veja a lista de compatibilidades abaixo:


Funciona:
» Firefox 2 e 3beta4
» Safari 3.0 win e Safari 3.1 win
» Opera 9.5beta

Não funciona:
» IE 5.5, IE 6 e IE 7 (com filtros)
» IE 8beta1
» Konqueror 3.5.7


Essa propriedade pode ser aplicada à todos os elementos da página. Seu valor fica entre 0.0 e 1.0 sendo 0.0 completamente transparente.


Tutorial:

Agora mostrarei um exemplo simples. O arquivo fonte pode ser baixado aqui (arquivo .zip).


Código HTML
<div id="container">

  <div class="opacidade" />

  <div class="txt">
     <h1>Opacidade CSS3</h1>

     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sapien odio, elementum ut, bibendum sed, laoreet vel, tortor. Nulla sed dui et lorem pellentesque varius.</p>
  </div>

</div>

O código HTML deve posuir uma div vazia para o efeito de opacidade e a div do conteúdo ("txt") com o que você quiser dentro. Criei a div "container" para melhor visualização do conteúdo.


O CSS
.opacidade {
background:#FFF;
bottom:10px;
height:118px;
padding:10px;
position:absolute;
right:10px;
width:174px;
}

.opacidade {
opacity:0.7;
filter:alpha(opacity=70);
-moz-opacity: 0.70;
}

.txt {
background:transparent;
padding:10px;
position:absolute;
right:0;
top:0;
}

No CSS, dexei os estilos para o efeito da transparência em um bloco separado apenas para o código ficar mais organizado. Mas isso não é obrigatório. A propriedade "opacity" funciona para os navegadores que seguem os padrões W3C; o filtro criado é para que funcione nos navegadores IE e seu valor varia de 0 à 100; e "-moz-opacity" é para os navegadores Mozilla e seus valores vão de 0.00 à 0.100.


Já não é difícil achar esse efeito nos sites atuais, vi esse efeito mais usado com bibliotecas Ajax em galerias ou alertas.


Aqui detalhei apenas um jeito de se fazer esse efeito. Os outros que eu conheço é usando uma imagem png, ou já fazer a imagem com o quadrado transparente. Nenhuma delas está errada, mas usando imagem png tem que fazer alguns hacks para que funcione em todos os navegadores.


Esse efeito é muito bom para compor o design da página, mas não com um uso exagerado.



;)

Fontes: Tabela de compatibilidades CSS [en] | CSS3 Color Module – W3C [en]

12 maio 2008

Ícones para links

Pegando embalo no artigo Link estilizado para e-mails (mailto), achei um site que disponibiliza ícones para download para diferenciar um link do outro. Achei interessante, que na tabela não mostra apenas o mailto mas outros esquemas de URI (nem sabia que tinham outros e nem que tinham esse nome).


Ele tem ícones para as extensõe também. Vale a pena baixar o pacote que está em .zip.


O endereço do site é: Iconize Textlinks with CSS.


Aproveitem!



Update:

Um presentinho: nesse link tem um tutorial passo-a-passo para usar esses ícones nos links. (Em inglês).



09 maio 2008

Etiquetas para site




Em relação a links, acredito que a melhor maneira de se chamar atenção para ele é com o uso de imagem. Claro que isso não é usual no meio de textos, falo de links de parceiros ou de outros sites como Orkut. Acho melhor o uso de uma imagenzinha, um ícone com texto ou sozinho.


Estou fazendo o possível para a divulgação do meu blog, e lembrei de um site que divulga "Etiquetas" dos sites cadastrados nele. Acho que esse site não é atualizado há tempos, pelo menos tentei mandar várias vezes alguns sites para lá e não tive sucesso, mas pelo menos ele tem uma ferramenta de criação bem legal.


No site tem um "buttonmaker" que faz etiquetas e disponibiliza para download na hora.



Você pode escolher as cores de fundo, borda e fonte. Dividi-lo em duas partes ou deixa-lo inteiro. Tem como escolher também o estilo de fonte, mas isso já é pré-definido no site, as opções que ele tem são boas, dependendo do tamanho do texto.


No topo da ferramenta, ainda tem um link de histórico com as criações recentes, para usar como base.


Então fica a dica para quem não tem o seu ainda.


[]'s! =)



ps.: Obrigada André pelo post no seu blog!! Fiquei muito contente!!! xD

08 maio 2008

Link estilizado para e-mails (mailto)

Meu primeiro artigo foi falando de um assunto relacionado à esse, Link estilizado. Hoje vou mostrar um exemplo para os links de e-mails: <a href="mailto:cleowd[at]gmail[dot]com">. O resultado final será esse: Better Email Links.


Relembrando: "Seletores de Atributos"


O seletor de atributo "é uma declaração em um formato que 'casa' com todos os elementos que sigam aquele formato na árvore do documento." (Maujor). Exemplo:


h1 { color:#C00C00; }

Ou seja, esse estilo será aplicado para todos os headers <h1 />.


Podem ser especificados se tiverem algum tributo:


h1[att] { color:#C00C00; }

Onde att é um atributo qualquer (title, type, align etc). No link acima do Maujor, tem uma tabela bem explicativa. Vale a pena conferir.


O que diferencia os links de e-mail?


Os links de e-mail são diferenciados porque são os únicos que começam com a palavra "mailto:", e é com esse comando que o navegador vai enviar e-mails usando um progama específico do sistema operacional do computador, como o outlook que vem integrado no windows. Podemos então usar esse diferencial para aplicar um estilo específico somente para os links de e-mails:


a[href^="mailto"] { color: #C00C00; }

Complemento


Essa técnica pode ser usada para outras tags e atributos. Isso ajuda muito, pois podemos dar estilos aos elementos sem que precise ficar inventando nomes de classes. Os pseudo-elementos podem ajudar em um efeito ainda melhor:


a[href^="mailto"]:hover:after { content: " > " attr(title); }

O estilo vai aparecer quando o mouse passar por cima do link e adicionar o > depois dele. Junto com o caractere são colocados espaços para que os textos não fiquem colados.


Nada é perfeito


Infelizmente, esse estilo não é aceito por todos os navegadores. É, estou me referindo ao IE mesmo. Inclusive o 7. Não sei quanto ao 8, mas não interfere no estilo do link, só não vai aparecer nada. Existem algumas bibliotecas js que podem ajudar a resolver esse probleminha.



Fonte: CSS-Tricks