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.

Se você trabalha em um lugar onde freqüentemente precisa editar código escrito por outras pessoas sabe como é ruim e contra-produtivo pegar um HTML, CSS ou PHP mal organizado, sem indentação e nenhum comentário. Isso pode trazer muitas dores de cabeça e fazer uma simples alteração virar um inferno.

Saiba que o Dreamweaver tem um comando muito interessante para resolver esse problema: Commands > Apply Source Formatting. Por mais bagunçado que esteja o código, basta um clique neste comando e o Dreamweaver vai deixá-lo perfeitamente estruturado, indentado e muito mais fácil de ler e entender. Vale a pena até adotar como padrão para a sua empresa, já que não dá trabalho nenhum e permite que todo mundo entregue código com a mesma formatação. Funciona com códigos HTML, CSS, PHP, JavaScript e muitos outros.

Criação de aplicativos AIR

Você já deve saber do incrível potencial que a plataforma AIR da Adobe representa para desenvolvedores e provavelmente já deve até usar algum aplicativo desenvolvido com ela, como por exemplo TweetDeck, Grooveshark e NYTimes Reader só para citar alguns. Se ainda não sabe, sugiro que vá pesquisar agora mesmo. Principalmente porque em breve boa parte dos celulares Android serão compatíveis com aplicativos AIR.

Pois bem, ao contrário do que muitos pensam, aplicativos AIR não precisam ser necessariamente desenvolvidos com Flash ou Flex: você também pode usar HTML, CSS e imagens para criar um App e fazer a comunicação com banco de dados via AJAX. Acredite, é extremamente fácil. Tudo o que você precisa fazer é baixar a extensão AIR para o seu Dreamweaver (fornecida gratuitamente pela Adobe). Com ela você vai poder empacotar todos os arquivos usados no seu app (HTML, imagens, CSS, JS) num único instalador AIR e distribuir para download. Eu já testei e é algo sensacional, recomendo este pequeno tutorial (em inglês): Create your first HTML-based AIR application with Dreamweaver.

Para finalizar: Ctrl+D

E como última dica separei um atalho que facilita muito a vida de quem usa o Dreamweaver para gerenciar um projeto com múltiplos arquivos linkados entre si, sejam várias páginas HTML ou arquivos relacionados (JS, CSS). Quando se tem um projeto assim é comum a necessidade de ir de um arquivo para outro, e ter que ficar navegando pela pasta para encontrar aquele arquivo para onde aponta o link é bem chato, ou mesmo ter que ficar copiando o nome, abrir arquivo, colar o nome, etc.., etc…

Então aqui vai um ótimo atalho: Ctrl+D. Toda vez que você estiver editando o código com o cursor de texto piscando sobre um link para um arquivo externo, basta pressionar as teclas Ctrl+D que o Dreamweaver abrirá automaticamente aquele arquivo, seja ele um HTML, PHP, JS ou CSS.

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

A solução

Para desenvolver esse micro sistema de galeria de fotos vou usar uma função PHP muito útil, a Glob(). Essa função nos permite ter acesso às pastas do servidor e retornar listas de arquivos de acordo com o seu nome ou extensão. Então é isso que faremos, vamos exibir todas as imagens de uma pasta usando PHP. Salvaremos duas versões de cada foto, uma miniatura (thumbnail) e uma imagem maior, e usaremos a função Glob() para exibí-las corretamente. Ao final teremos uma galeria igual a essa:

Preparando as imagens

A primeira coisa a fazer é preparar e cortar as imagens nos formatos corretos. A galeria funcionará mesmo que cada imagem tenha um tamanho diferente, mas ficaria com aspecto horrível. Então o ideal é cortar todas no mesmo formato. Para esse exemplo cortei as thumbs em quadrados de 100px x 100px e as imagens maiores em 500px x 500px.

Crie uma pasta com nome “fotos_galeria” (ou outro nome que preferir) e salve todas as imagens dentro dela, nomeando as thumbs com um “_p” no final do nome do arquivo, exemplo: foto1_p.jpg; e as imagens maiores com um “_g” no final, exemplo: foto1_g.jpg.

Agora faça o upload da pasta para o seu servidor PHP. Sua URL vai ficar algo parecido com:
http://www.seudominio.com.br/fotos_galeria

Preparando o arquivo PHP

O arquvo PHP responsável pela criação da galeria é extremamente simples e está dividido em duas partes. A primeira parte é o o bloco de estilos CSS da página e o segundo o bloco da função PHP responsável pela lógica da galeria.

O trecho CSS
O CSS não precisa de nenhuma alteração a não ser claro que você queira alterar o visual da galeria. Veja abaixo:

<style>
body {
     text-align:center;
     margin:0;
     padding:0;
}
div {
     padding:13px;
     display:block;
     border:1px solid #ddd;
     background:#eee;
     font-size:10px;
     font-family:Arial, Helvetica, sans-serif;
     color:#999;
     margin:0 auto;
}
div.thumb {
     float:left;
     margin:0 14px 14px 0;
     padding:0;
}
div.thumb a {
     float:left;
     padding:13px;
}
div.thumb a:hover {
     background:#b70000;
}
div.thumb img {
     width:100px;
     height:100px;
}
div p {
     padding:8px 0 0px;
     margin:0;
}
div a {
     color:#666;
     text-transform:uppercase;
     text-decoration:none;
     font-weight:bold;
}
div a:hover {
     color:#b70000;
     text-decoration:underline
}
</style>

O trecho PHP
O trecho que contém o código PHP responsável pela montagem da galeria também não é complicado e precisa apenas de 2 pequenas modificações para que funcione corretamente no seu servidor. No início do bloco você deverá:
- Informar a URL onde o arquivo PHP estará publicado. No meu caso: http://www.toprated.com.br/galeria.php;
- Informar o nome da pasta onde estarão as imagens. No meu caso: fotos_galeria;
Confira o trecho completo já comentado e explicado linha a linha:

<?php

  //URL onde o arquivo PHP vai ficar
  $url_galeria = "http://www.toprated.com.br/galeria.php";

 //URL onde o arquivo PHP vai ficar
  $pasta_fotos = "fotos_galeria";

  //Início da função

  $fotos = array();

  //Loop que percorre a pasta das imagens e armazena o nome de todos os arquivos
  foreach(glob($pasta_fotos . '/{*_p.jpg,*_p.gif}', GLOB_BRACE) as $image) { 

  $fotos[] = $image;

  }

  //Verifica se deve exibir a lista ou uma foto
  if ($_GET["image"] == "") {

  //Faz o loop pelo folder de imagens
  for($i=0; $i < count($fotos); $i++) { 

  //Cria cada uma das thumbs dentro de uma <div> com link para a imagem grande
  echo "<div class='thumb'>";
  echo "<a href='" . $url_galeria . "?image=" . $i . "'>";
  echo "<img src='" . $fotos[$i] . "'>";
  echo "</a>";
  echo "</div>";

  }

 } else {

  //Guarda o nome da imagem para montar o link da imagem grande
  $foto_g = explode("_p", $fotos[$_GET["image"]]);

  //Configura os links de próxima e anterior
  if ( $_GET["image"] == 0 ) { $anterior = ""; } else { $anterior = $_GET["image"] - 1; }
  if ( $_GET["image"] == count($fotos)-1 ) { $proxima = ""; } else { $proxima = $_GET["image"] + 1; }

  //Quando solicitada uma imagem em particular, monta a <div> e insere a imagem grande de acordo com o link
  echo "<div>";
  echo "<a href='" . $url_galeria . "?image=" . $proxima . "'>";
  echo "<img src='" . $foto_g[0] . "_g" . $foto_g[1] . "'>";
  echo "</a>";
  echo "<p><a href='" . $url_galeria . "?image=" . $anterior . "'>Foto anterior</a> | <a href='" . $url_galeria . "'>Voltar para a galeria</a> | <a href='" . $url_galeria . "?image=" . $proxima . "'>Próxima foto</a></p>";
  echo "</div>";

  }

?>

Publique

Pronto, basta publicar seu arquivo e testar online. O resultado final deve ficar como este: http://www.toprated.com.br/galeria.php.
Se quiser inserir a galeria no meio de outra página como fiz acima, basta usar um iframe simples linkando para o seu arquivo, dessa forma:

<iframe frameborder="0" allowtransparency="yes" scrolling="no" src="http://www.toprated.com.br/galeria.php" width="710" height="570"></iframe>

Para facilitar a vida dos mais preguiçosos segue link para o pacote com os arquivos usados nesse exemplo, incluindo o arquivo PHP e as imagens. Aliás, todas as fotos são do site SHC.ru, um ótimo lugar para procurar imagens Royalty Free.

Como eu disse, o intuito dessa micro galeria de fotos é ser o mais simples possível, portanto é óbvio que ela pode ser melhorada, e muito. Você pode adicionar ícones à navegação de próxima e anterior, por exemplo. Mas acredito que é uma boa opção para quem está procurando uma solução rápida e fácil para a partir dela criar a sua própria galeria de fotos. Espero que ajude.
Uma última dica: Se pretende usar esse arquivo em várias galerias diferentes dentro do seu site, é extremamente recomendável que você separe o CSS, crie uma folha de estilos individual e a use como um link na página para que suas alterações reflitam em todas as galerias simultanemante.

O que é o botão “Curtir”?

O botão “Curtir” (“Like” na versão em inglês) é esse com o sinal de positivo, que substituiu o antigo botão “Tornar-se fã” (“Become a fan”), muito usado dentro do Facebook e que há algum tempo pode também ser usado dentro de outros sites e páginas.
Sites reconhecidos como modelos de boa utilização de Social Media como ferramenta de relacionamento com seus leitores fazem uso dessa ferramenta. Um bom exemplo é o Mashable.

Qual a vantagem em usá-lo?

Quando o usuário “curte” a sua página clicando sobre o botão é como se ele “dissesse” que acha aquele conteúdo interessante o bastante para indicá-lo à outras pessoas. Assim, sua página pode aparecer como sugestão para os amigos desse usuário, dentro do Facebook.
Além da questão prática, de trazer novos visitantes, adicionar possibilidades de interação estimula o relacionamento dos usuários com o seu site.

Como usar

Existem várias formas de inserir o botão na sua página. A mais simples delas, que tem o menor potencial de causar lentidão no carregamento da página ou conflito com outros scripts, é através de um pequeno iframe. Basta incluir o seguinte código no seu html:

<iframe src="http://www.facebook.com/plugins/like.php?href=suaurl&layout=standard&
show_faces=false&width=380&action=like&colorscheme=light&height=25&locale=pt_BR" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:25px;" allowTransparency="true"></iframe>

As duas principais alterações que você precisa fazer são: colocar a URL da sua página logo após a variável “href” (substituindo o “sua url”) e ajustar a largura do iframe para que ele se encaixe no seu layout, alterando a propriedade “width”. Pronto, basta incluir este trecho de código à sua página e você terá um resultado semelhante ao que aparece abaixo:

Botão Recomendar

Em algumas páginas, ao invés do botão “Curtir” encontramos o botão “Recomendar”. Na verdade é exatamente o mesmo botão, com as mesmas funcionalidades, configurações e comportamento. A única diferença é o verbo: recomendar. Então você pode usar o mesmo código do botão curtir trocando apenas um parâmetro: action=recommend:

<iframe src="http://www.facebook.com/plugins/like.php?href=suaurl&layout=standard&
show_faces=false&width=380&action=recommend&colorscheme=light&height=25&locale=pt_BR" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:25px;" allowTransparency="true"></iframe>

Adicionando a um blog WordPress

Para aqueles que utilizam WordPress como ferramenta de publicação e gostariam de adicionar o botão Curtir ao seus posts a mecânica é praticamente a mesma. A única diferença é que você precisará editar o arquivo “single.php” do seu tema para incluir o código do iframe.

Como fazer isso:
1 - Acesse o painel de controle do seu blog WordPress;
2 – No menu vertical esquerdo, clique no link do Editor dentro do box Aparência (Appearance);
3 – Na tela do editor, procure pelo arquivo single.php (Post único) na lista de arquivos que fica à direita da tela. Clique para editá-lo.
4 – Um bom local para colocar o botão é logo abaixo do título do post. Então procure pelo trecho de código php the_title(); e insira o código do botão logo após a sua tag.
5 – No lugar da URL (suaurl) use o código <?php the_permalink() ?> que o WordPress substituíra pelo link de cada post.
6 – Salve o arquivo e teste um dos seus posts.

Pronto, agora é uma questão de acertar o posicionamento do botão usando CSS até ficar como você deseja.

Adicionando a um blog do Blogger

Para quem usa o Blogger para hospedar e publicar seu blog o código é um pouco diferente. Para adicionar o botão ao seus posts siga os seguintes passos:
1 - Acesse o painel de controle do seu blog no Blogger;
2 – No menu superior clique na aba Design
3 – Depois clique no link Editar HTML (Edit HTML) no sub menu;
4 – Nesta página, logo acima da caixa de texto, marque a opção Expandir modelos de widgets (Expand Widget Templates);
5 – Procure pelo seguinte trecho de código <data:post.body/>;
6 – Imediatamente depois, inclua este código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>  <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;
action=like&amp;font=arial&amp;locale=pt_BR&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>  </b:if>

7 – Salve o modelo e você deverá ver o botão abaixo do texto de cada um dos posts (na página do post);

Assim como no caso do WordPress, talvez seja necessário fazer algumas alterações no CSS ou HTML apenas para acertar a sua exibição de acordo com o seu layout.

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.