1. Você não é o primeiro.

Atualmente, existem muito poucos “primeiros”. Muitos outros já abriram studios, trabalharam como freelancers ou fizeram estágio. São coisas que você pode fazer.

2. Sempre há alguém melhor.

Independentemente do quão bom você é, sempre haverá alguém melhor. É incrivelmente fácil perder tempo se preocupando com isso.

3. Sucesso não é um recurso finito.

A escola promove uma mentalidade de soma-zero: a de que alguém precisa perder para que você possa ganhar. Na verdade, o sucesso do outro não limita o seu.

4. Você não pode marcar um gol se o gol não existir.

Se você não tem um objetivo, como poderá buscá-lo? Ter um objetivo define um ponto de chegada, e subseqüentemente, um ponto de partida.

5. Começar qualquer coisa requer energia.

É preciso muito mais energia para começar algo do que para parar. Essa é uma verdade para a física, para a sua carreira e para aquele projeto no qual você precisa trabalhar.

6. O caminho para o mercado é mais fácil do que você pensa.

Para entrar na indústria você só precisa de três coisas: um ótimo portfolio, energia e uma personalidade bacana. Muitos se esquecem do último atributo.

7. Tenha uma auto-imagem positiva.

Sua auto-percepção é o seu recurso mais importante. Enxergue a si mesmo como a pessoa que você quer ser e os outros também enxergarão.

8. Tenha um website simples e clean.

Um portfolio online é o alpha e o ômega da sua carreira. Com tantas possibilidades de web services existentes, não há desculpa para não ter um website.

9. Seja o curador do seu trabalho.

Nunca pare de editar seu portfolio. Três peças muito boas são melhores do que dez fracas – ninguém procura por quantidade e sim qualidade.

10. Escute seus instintos.

Se o seu trabalho não te excita, então ele não excita mais ninguém. É difícil fingir paixão por um trabalho medíocre: jogue-o no lixo.

E então, gostou? Para ler todas as 50, vá até o post original.

CSS3 Text Gradient

Antes de tudo: por que esta é a melhor forma?
Existem muitas maneiras de se obter o text gradient. Mas eu prefiro esta porque ela não requer nenhuma alteração no codigo HTML. Não é preciso ficar enchendo o código de tags ou propriedades como data-text só para se conseguir um efeito que daqui há 6 meses ou um ano pode não ser mais desejado.

Então tudo o que você precisa para aplicar o efeito em um título <h1> é:

h1 {
background-image: -webkit-gradient(
linear,
left top, left bottom,
from(rgba(0, 0, 0, 1)),
to(rgba(243, 255, 114, 1))
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size:120px;
}

Como você já deve ter percebido, as cores são definidas nas linhas from(rgba(0, 0, 0, 1)) e to(rgba(243, 255, 114, 1)). Basta trocar os valores RGBA (RGB + Alpha) pelos das cores do seu gradiente. E pronto. Lembrando claro que o efeito só será visível em browsers compatíveis com CSS3.

Com certeza esta não é a única forma de conseguir o text gradient e se você souber de alguma outra, por favor, compartilhe conosco. Abraço!

E uma das melhores equipes do mundo quando se fala em infográficos é, sem dúvida nenhuma, a do “NYTimes.com”, versão online do jornal americano “The New York Times”. Vencedora de inúmeros prêmios relacionados a Jornalismo Visual e Infografia, a equipe do jornal cria e produz conteúdos que vão muito além de apenas imagens ou gráficos estáticos, são uma extensão da notícia e auxiliam os seus leitores a entender a notícia ou assunto, complementando o texto da matéria.

Seguem aqui alguns exemplos dos melhores infográficos criados e produzidos por eles:

Terremoto no Japão

Infográfico mostrando vários dados sobre os estragos causados pelo terremoto e tsunami no Japão, com fotos, vídeos, número de desaparecidos, casas e prédios destruídos.

Pedra, papel e tesoura.

Jogo onde você pode enfrentar o computador e entender como a máquina ‘aprende’ como funciona seu pensamento e começa a utilizar seus padrões de jogadas para adivinhar sua próxima escolha.

Como as pessoas gastam seu tempo

Gráfico interativo mostrando como diversos grupos de pessoas gastam seu tempo durante o dia, entre refeições, trabalho, sono e televisão e outras atividades. É possível ter informações divididas por faixa etária, educação, sexo, raça, ocupação e número de filhos.

Cães e raças

Ensaio fotográfico com 102 cães campeões de suas raças. Alguns com o áudio do seu latido.

Homicídios em Nova York

Mais uma vez o jornal lança mão de um mapa interativo para mostrar a incidência de homicídios na cidade de Nova York ano a ano. É possível filtrar cada uma das ocorrências por dia, mês, arma utilizada, idade da vítima, idade do assassino, raça e sexo, entre outros.

Marco Zero

Mostra como está acontecendo a reconstrução do complexo do World Trade Center en NY.

18 dias de Revolução no Egito

Mapa em 3D mostra os principais acontecimentos da revolução que tomou conta das ruas da cidade do Cairo, no Egito.

Restauração do retrato de Philip IV

Infográfico ilustra como ocorreu a restauração da tela de Velázquez.

Prostestos no Egito

Linha do tempo contando, dia a dia, os fatos mais importantes dos Protestos no Egito .

Mapa das medalhas olímpicas

Gráfico e linha do tempo mostrando os países que mais ganharam medalhas olímpicas nas diversas edições dos Jogos.

É melhor comprar ou alugar?

Gráfico interativo que calcula qual a opção mais vantajosa, comprar ou vender seu imóvel, com base no seu preço, aluguel, taxa de juros, tempo de permanência e outras variáveis.

Composição da platéia do State of Union

Mostra a composição da platéria do State of Union, cerimônia onde o Presidente dos Estados Unidos delineia suas prioridades para o País.

Árvore Genealógica das Famílias Americanas

Infográfico mostrando a origem de várias famílias americanas e sua variedade étnica.

A História em "Mad Men"

Linha do tempo relacionando o enredo da série aos acontecimentos históricos americanos.

A técnica de Mariano Rivera

Vídeos, animações, fotos e áudio explicam a técnica do jogador de Baseball.

A casa do futuro

Imagem interativa mostra as características e tecnologias mais avançadas e ecológicas para construção de casas inteligentes.

Desafio contra o Superconputador da I.B.M.

Jogo de perguntas e respostas que ilustra o poder computacional da supermáquina de respostas da I.B.M., a Watson.

"Banhistas na margem de um Rio"

Linha do tempo mostra a criação da famosa tela de Henri Matisse.

Os Teatros da Broadway

Tour interativo pelos diversos teatros da mais famosa rua de shows e musicais dos EUA.

Overview sobre as revistas policiais em Nova York

Dados detalhados de cada uma das revistas realizadas pela polícia de Nova York no ano de 2009, distribuídas em um mapa interativo.

Derramamento de óleo e suas consequências

Informações sobre mancha de óleo na costa americana e seus efeitos na biosfera.

A Guerra entre Microsoft e Apple

Gráfico mostrando a guerra das duas companhias, seu valor de mercado e os principais fatos envolvendo as duas gigantes.

Gripe Suína

Timeline ilustrando como a Gripe Suína alastrou-se pelo mundo.

Orçamento Americano

Puzzle onde você deve escolher os programas e medidas orçamentárias que devem ser tomadas para balancear as contas americanas.

O ano em fotos

Retrospectiva fotográfica do ano.

Green Landscape Beanstalk

Cosmic Love Goddess

Vector Style Woman

Dark Sea Ship

Twister

Terrifying Horror

Dark and Mysterious TV Head

Eerie Looking

Dark and Eerie

Google Map Parody

Surreal 3D Outdoor Room

Dark Melancholic Scene

Vivid Flaming Skull

Surreal Environment

Matte Painting

Breathtaking Underwater Apartment

Fallen Angels Dream Fly

Planet

Funky Perspective

Floating Island on Water

Fairy Tale

Floating Island 2

Flying Hippo

Realistic Space Landscape

The Making of Constant Slip

Walking Bone House

Derene Panorama

Magic Holland

Deathly

Mysterious Night

Surreal Scenary

Fantasy Night Day Composition

Black White Falling Scene

Island

Imaginary

Splash Artwork

Matte Painting Inspired Scene

Moonlight Night

Imaginary Photo Manipulation

Via Naldz Graphics

Como funciona

A mecânica é simples: a função jQuery identifica o elemento onde deve ser aplicado o efeito e insere dentro dela uma tag <span>, que é quem realmente receberá o Fade. Tudo o que você precisa saber e fazer é colocar um pequeno trecho javascript na sua página, ajustar seu CSS e adicionar uma classe ao botão que receberá o efeito.

É exatamente o mesmo efeito que está aplicado aos botões de Download e Demo no início do post. Você também pode acessar a demonstração e baixar os arquivos para visualizar melhor o código.

O Javascript

O primeiro passo é importar o jQuery normalmente. Depois é só inserir a função abaixo. Perceba que logo no início do código, na segunda linha, você deve colocar a classe dos botões que receberão o efeito (nesse caso: efeito_fade). Todos os elementos com essa classe serão animados.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.efeito_fade').append('').each(function () {
        var $span = $('> span.hover', this).css('opacity', 0);
        $(this).hover(function () {
            $span.stop().fadeTo(500, 1);
        }, function () {
            $span.stop().fadeTo(500, 0);
        });
    });
});
</script>

O CSS

No CSS, a primeira coisa a fazer é criar um botão comum, com a técnica clássica de image replacement para diferenciar o estado normal (“apagado”) do estado :hover (“aceso”). Ou seja, criar uma imagem que contenha os dois estados do botão e então estilizá-lo usando a propriedade background-position para fazer a troca de um estado para o outro quando o usuário passa o mouse sobre ele.
A única diferença é que ao invés de estilizar o estado :hover em si, você irá estilizar a tag <span> que será criada dentro do botão como se fosse o :hover, com algumas pequenas mudanças:
A primeira é posicionar o botão relativamente (position:relative), para que o <span> fique corretamente colocado dentro dele. A segunda é posicionar o <span> absolutamente (position:absolute) e repetir as mesmas propriedades do botão, ajustando apenas o background. Eu sei, parece complicado, mas veja como o código não tem nada demais:

/* botao 1 */
#seu_botao {
	clear: both;
	position:relative;
	display:block;
	height: 64px;
	width: 570px;
	background:url(images/botao.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}
#seu_botao span.hover {
	position: absolute;
	display: block;
	height: 64px;
	width: 570px;
	background: url(images/botao.png) no-repeat;
	background-position: bottom;
}

/* botao 2 */
#outro_botao {
	clear: both;
	position:relative;
	display:block;
	height: 64px;
	width: 570px;
	background:url(images/outro.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}
#outro_botao span.hover {
	position: absolute;
	display: block;
	height: 64px;
	width: 570px;
	background: url(images/outro.png) no-repeat;
	background-position: bottom;
}

O HTML

Como eu disse, a única coisa que você precisa fazer no seu HTML é atribuir a classe indicada na função javascript em todos os elementos que receberão o fade. Nesse caso a classe é a “efeito_fade”. Veja o código dos dois botões desse exemplo:

<a href="#" id="seu_botao" class="efeito_fade"></a>
<br />
<a href="#" id="outro_botao" class="efeito_fade"></a>

Veja abaixo como ficam os botões desse exemplo e perceba que, por ter um código HTML extremamente simples e deixar toda a mágica para o javascript e CSS, os botões podem ser facilmente aplicados a qualquer parte do seu site. Uma dica é experimentar usar essa técnica não apenas para botões, mas também para menus, imagens e outros elementos interativos, tomando sempre cuidado para não exagerar na dose.

O arco ligando o A ao Z simboliza que a Amazon vende tudo “que seja banhado pelo sol”.  Dá forma também a um sorriso, para simbolizar que a empresa é amigável e próxima de seus consumidores.

Atlanta Falcons

Esse logo combina um falcão, símbolo da companhia, e um “F”, letra que inicia a palavra Falcons.

Chick-Fil-A

O logo da Chick-Fil-A combina a ilustração de um frango, com o “C” em destaque.

City Direct

Esse é um pouco menos óbvio: perceba que as bordas pretas que envolvem o avião formam também as letras C e D, iniciais de City Direct.

Eighty 20

Aqui sim, um logo com significado bastante oculto e interessante. Os quadrados azuis representam números “1″ e os cinzas representam “0″. Isso cria uma seqüência 1010000 na linha de cima, que representa 80 em binário, e na linha de baixo teremos 0010100, que representa 20 em binário, formando assim o nome da empresa, que em português significa “Oitenta Vinte”.

Families/Marriage

No logo Families, as vogais e a letra “L” têm tamanhos diferentes para representar uma família: o pai, a mãe e um filho.  Já os “R”s no logo Marriage estão espelhados e ligados um ao outro, representando a união do casamento.

Fashion Center

Usando como base um botão, ícone do mundo fashion, foi então adicionado um furo extra para formar a letra “F”, inicial da empresa.

FedEx

De primeira é dificil encontrar o simbolismo nesse logo, mas se olhar bem você vai notar a flecha apontando para a direita entre o ‘E’ e o ‘X’, representando precisão e velocidade, os dois principais valores da FedEx.

Forkwire

O logo dessa empresa de delivery online combina o arroba @ com um garfo, representando ao mesmo tempo o seu produto (comida) e a primeira parte do seu nome, Fork (garfo, em inglês). Reforça ainda utilização da tecnologia na entrega de comida de uma forma bem clara e óbvia para seus clientes.

Formula 1

O espaço negativo no meio cria o numero ‘1′ de “Formula 1″.

Fort Worth Zoo

O ‘FW’ vermelho de Fort Worth cria a ilustração de um elefante.

Goodwill

O logo usa um ‘g’ em caixa baixa não só para representar a primeira letra da empresa, mas também para mostrar um rosto sorridente e transmitir uma sensação positiva.

Gotham Books

Esse é auto-explicativo, as ilustrações de livros empilhados uns sobre os outros simulam um arranha-céu, marca registrada de Gotham City.

Hartford Whalers

Esse combina a cauda de uma baleia e as iniciais de Hartford Whalers ‘H’ e ‘W’.

Mosleep

Assim como o nome sugere, Mosleep é uma organização de médicos que cuidam de pessoas que têm problemas para dormir. Seu logo é a inicial ‘M’ desenhada de maneira a lembrar uma cama.

NBC

O logo da NBC possui um pavão escondido olhando para a direita, que representa o objetivo da empresa de olhar sempre para frente e nunca para trás.

Piano Forest

Esse logo combina elegantemente a silhueta de árvores para formar as teclas de um piano.

Schizophrenic

O logo mostra as emoções ambíguas de um esquizofrênico.

Unilever

Cada ícone no logo representa um aspecto do negócio da Unilever. Por exemplo, a camiseta abaixo do coração simboliza “roupas”  e representa a roupa limpinha recém saida da lavanderia.

Yoga Australia

Se prestar atenção, você vai perceber que a pose da bailarina cria o contorno do continente australiano entre a sua perna e o seu braço.

Via Webdesigner Depot

Apesar de parecer mais óbvio utilizar a própria ferramenta de seleção na hora de selecionar um objeto em uma imagem, prefira sempre a caneta (pen).
Pois com ela, você pode usar o Ctrl+Alt+Z para desfazer qualquer ponto mal colocado ou mesmo acertar os pontos depois de ter “fechado” a seleção. Depois de finalizar a área, basta manter a tecla Ctrl pressionada e clicar sobre a nova layer (camada) que foi criada (Shape) para fazer uma seleção sobre a sua área.

2 – Conheça as opções ocultas dos painéis

Em cada um dospainéis de ferramentas, como o de Layers, Actions e Texto, existe um menu cheio de opções e ferramentas muito interessantes. Para acessá-lo basta clicar na pequena seta que fica à direita, logo após a barra de título do painel.
Pode ter certeza que você vai conhecer muitas maneiras de facilitar e agilizar seu trabalho além de melhorar o seu conhecimento sobre configurações mais avançadas.

3 – Use as Blending Options

Se você clicar com o botão direito sobre uma layer no painel de layers e então clicar em “Blending options”, uma janela cheia de opções, efeitos e configurações que vão deixar suas tarefas muito mais simples. Lá é possível criar e gerenciar sombras, brilho, contornos e preenchimentos muito rapidamente sem a necessidade de criar outras camadas. Use com moderação.

No Photoshop, uma Action nada mais é que uma ou mais ações executadas automaticamente e em sequência, como se fosse um “passo a passo”. Essas ações são gravadas pelo usuário e podem ser executadas depois em qualquer arquivo ou em vários arquivos ao mesmo tempo.

Também é possível exportar um ou mais Actions e utilizá-las em qualquer computador, assim como fazer download de Actions na Web e usá-las no seu computador.

Ações simples

Vamos supor que você tem uma galeria de fotos no seu site e recebeu várias imagens que devem ser redimensionadas para que caibam na largura da sua galeria. Então o que você precisa é basicamente repetir os mesmos passos para todas elas:
1º – redimensionar a imagem.
2º – aplicar um leve filtro de nitidez (Sharpen) para que ela não fique desfocada.
3º – salvar a imagem em um formato compatível (JPG, GIF ou PNG).

Não é nada complicado de se fazer, mas se a sua galeria tiver 20 fotos você levará um tempo considerável para editar todas as imagens. Veja como essa edição pode ser feita com uma action:

1 – Abra uma das imagens no Photoshop;

2 – Clique no menu  Window > Actions para abrir o painel de ações;
Você deve encontrar algumas ações pré-definidas do Photoshop.

3 – Clique no botão  ”New action” ;

4 – No painel que se abre, dê um nome para a ação e escolha uma tecla de atalho (opcional). Clique em  ”Record”;

A partir de agora, todos os comandos estão sendo gravados e pertencerão à nova ação. Perceba inclusive que o botão  ”Record” do painel está iluminado indicando a gravação.

5 – Clique no menu  Image > Image Size e altere a largura da imagem para 500px. Clique em OK.

6 – Clque no menu  Filter > Sharpen > Unsharp Mask e defina os valores conforme o exemplo:

7 – Agora clique em  File > Save for Web… e salve o arquivo como JPG na pasta em que desejar;

8 – Finalize a gravação da ação clicando no botão  ”Stop” no painel Actions;

Pronto, sua ação está salva e pode ser utilizada em outros arquivos, Perceba que no painel Actions, abaixo do nome da nova ação, ficaram gravados todos os comandos utilizados.

Utilizando a Action

Agora que já tem a sua action pronta, basta aplicá-la em todas as imagens para as quais você precisa repetir os mesmos passos.
Para aplicá-la em um arquivo de cada vez, basta abrir a imagem no Photoshop e utilizar a tecla de atalho que você definiu para a Action (no meu caso, Ctrl + F12). Para aplicá-la em todos os arquivos de uma só vez, abra todas as imagens, Siga estes passos:
1 – Vá até o menu File > Automate > Batch…;
2 – Na janela que se abrirá, na caixa de seleção “Action”, escolha ação que acaba de criar (no meu caso “Galeria”);
3 – Para “Source” escolha “Opened Files”;
4 – Em “Destination” selecione “None”.

5 - Clique em OK;
Feito. Todas as imagens foram redimensionadas, receberam o filtro de nitidez e foram salvas na pasta que você havia escolhido.

Perceba que este é apenas um exemplo simples. Você pode gravar muitos outros tipos de comandos e criar actions para as mais variadas tarefas do seu dia a dia. Como disse é uma questão de costume, quando você estiver acostumado a usar actions vai perceber várias oportunidades de usá-las e poupar tempo.

É uma popular comunidade virtual online voltada para arte e design onde artistas de todo o mundo podem conhecer, divulgar e compartilhar seus trabalhos. Lançado em 7 de Agosto de 2000 por Scott Jarkoff e Matthew Stephens, o site conta com mais de sete milhões de usuários e mais de 62 milhões de contribuições, recebendo aproximadamente 80.000 novas contribuições por dia. Navegar pelo DevianART é uma das melhores formas de procurar inspiração, recursos e informação sobre design.

Confira: http://www.deviantart.com/

2 – PatternTap

Criado por dois designers de interface, Matthew Smith e Chris Pollock, o site é uma imensa galeria que reúne soluções e best pratices ligadas a arquitetura da informação e, claro, design de interface. Lá pode-se navegar por centenas de bons exemplos de layout, divididos em coleções sobre navegação, formulários de contato, players de vídeo, rodapés, headers, etc… Sem dúvida, visitá-lo pode ajudar muito na hora de planejar e desenhar um novo projeto.

Confira: http://patterntap.com/

3 – Iconfinder

Ícones, ícones e mais ícones. É isso o que você vai encontrar usando o ótimo mecanismo de buscas do Iconfinder, um dos melhores lugares para encontrar o ícone perfeito, seja para o seu site ou para uma aplicação. Além de ter um biblioteca com milhares de opções (mais de 120.000), o site oferece a possibilidade de filtrar os resultados da busca por tamanho ou licença, observar como o ícone se comporta com backgrounds claros, escuros ou transparentes. E, encontrando o que você procurava, basta um clique para fazer o download em PNG transparente de alta qualidade ou do próprio “.ico”.

Confira: http://www.iconfinder.net/

4 – Dafont

É um imenso arquivo online com milhares de fontes que oferece o download grátis de todas elas. As fontes são categorizadas por tema, mas você também pode buscar pelo nome da fonte. Um recurso bastante útil é a possibilidade de definir uma palavra ou texto e exibí-lo usando todas as fontes encontradas, assim fica mais fácil saber em qual delas o nome da sua empresa ou cliente fica melhor. Encontrada a fonte, basta um clique para fazer o download, não é necessários nenhum tipo de cadastro.

Confira: http://www.dafont.com/

5 – The FWA

Esse é para quem cria usando Flash. The FWA, The Favourite Website Awards, é um site que reúne o que de melhor existe na web em termos de Flash. Lá você vai encontrar trabalhos das melhores agências online criados para clientes que querem presença forte na web e para isso investem em websites extremamente bem produzidos e visualmente impecáveis. É parada obrigatória para saber o que de mais moderno vem sendo feito e se inspirar com obras primas de designers e programadores de todo o mundo.

Confira: http://www.thefwa.com/

Bem, é isso aí. Provavelmente você até já conheça algum ou alguns deles, mas vale a pena salvar todos e sempre dar uma olhada antes de iniciar um novo projeto para se abastecer de preciosas referências.