quarta-feira, 31 de agosto de 2011

Proposta regulamenta profissão de designer

 Penna
Penna: sem registro profissional, o Poder Público não pode contratar um designer por meio de licitação.
Tramita na Câmara o Projeto de Lei 1391/11, do deputado Penna (PV-SP), que regulariza a profissão de designer. O texto define o designer como o profissional que desempenha atividade especializada na elaboração de projetos de sistemas e/ou produtos e mensagens visuais que podem ser produzidas em série.
De acordo com a proposta, esses profissionais deverão ter graduação em design no Brasil ou no exterior ou em áreas afins como Comunicação Visual, Desenho Industrial, Programação Visual, Projeto de Produto, Design Gráfico, Design Industrial, Design de Moda e Design de Produto. Também poderão se registrados como designers pessoas com mais de cinco anos de profissão.

Atividades

O texto reconhece as seguintes atividades do designer:
- planejamento e projeto de sistemas, produtos ou mensagens visuais ligados aos respectivos processos de produção industrial objetivando assegurar sua funcionalidade ergonômica, sua correta utilização, qualidade técnica e estética, e racionalização estrutural em relação ao processo produtivo;
- projetos, aperfeiçoamento, formulação, reformulação e elaboração de desenhos industriais ou sistemas visuais sob a forma de desenhos, diagramas, memoriais, maquetes, artes finais digitais, protótipos e outras formas de representação bi e tridimensionais;
- estudos, projetos, análises, avaliações, vistorias, perícias, pareceres e divulgação de caráter técnico-científico ou cultural no âmbito de sua formação profissional;
- pesquisas e ensaios, experimentações em seu campo de atividade e em campos correlatos, quando atuar em equipes multidisciplinares;
- desempenho de cargos e funções em entidades públicas e privadas cujas atividades envolvam desenvolvimento e/ou gestão na área de design;
- coordenação, direção, fiscalização, orientação, consultoria, assessoria e execução de serviços ou assuntos de seu campo de atividade;
- exercício do magistério em disciplinas em que o profissional esteja adequadamente habilitado;
- desempenho de cargos, funções e comissões em entidades estatais, paraestatais, autárquicas, de economia mista e de economia privada.

Conselhos

O projeto também prevê a criação de conselhos federal e regionais para registro, controle e fiscalização da categoria. O registro deverá ser emitido seis meses após a norma entrar em vigor.
Segundo o autor, a proposta é uma reivindicação de 30 anos de mais de 60 mil profissionais e 100 mil estudantes em 380 cursos no Brasil. “Sem um registro profissional, o Poder Público não pode contratar um designer, já que a Lei das Licitações (8.666/93) diz que a única maneira de caracterizar uma profissão é pelo seu registro.”
Tramitação
A proposta terá análise conclusiva das comissões de Trabalho, de Administração e Serviço Público; e de Constituição e Justiça e de Cidadania.

Íntegra da proposta:

Reportagem – Tiago Miranda
Edição – Newton Araújo  
'Agência Câmara de Notícias'

terça-feira, 23 de agosto de 2011

PHP

Tutorial PHP para iniciantes

Tutorial para iniciantes



*ótimo tutorial para quem quer aprender PHP, do nosso amigo BALALA do forum webmasters

Introdução
Caso você já tenha tido a oportunidade de ler outro tutorial, provavelmente já viu que PHP é uma linguaguem Server-Side, ou seja, que é executada no, e somente, no servidor. Diferente do Javascript por exemplo que é uma linguaguem Client-Side, executada no cliente (internauta).

Dessa forma, há coisas fora do nosso alcance para realizar no PHP. Como por exemplo, alterar a cor de um botão ao internauta pressionar a letra "b". Isso está sendo executado aonde? No servidor ou no cliente? Já pensando em nosso fórum, faça essa pergunta para você mesmo antes de criar um tópico. Isso é ou não é relacionado à PHP?

Como vamos ver desde ponto em diante, comentários em alguns scripts, vamos ver as possiveis formas de adicionar um comentário no PHP.


<?php// Comentário de 1 linha
# Comentário de 1 linha
/* Comentário em bloco

segue comentado até finalizar o bloco

com */
?>


O que vamos ver nesse tutorial?
Antes de prosseguir, vamos deixar claro que, estou considerando que você já está com um servidor web com o PHP rodando em sua máquina, ou com um servidor online. Configurações padrões do php.ini 4.3.0+ (register_globals = off).

Vou tentar, através desse tutorial, abranguer os primeiros passos dado ao PHP, elevando um pouco a dificuldade em cada passo que damos. Não é minha intenção passa funções relacionadas à banco de dados nesse primeiro tutorial, mas para um segundo, isso seria o foco. Então vamos parando com o lero-lero e começar a ralar ;)

"Adeus Mundo!"
Por que sempre o famoso "Olá Mundo!"? Vamos estar nos escondendo dele ao tentar aprofundar em PHP. Quanto mais você se interessa em aprender, mais festas deixará de participar, menos garotas irá conhecer e mais sóbrio irá ficar (estou em dúvida se isso é um fato bom ou ruim).

- Nossa, mas ele sempre tira tempo para outra piadinha horrível...

Táááááá booooooooom! Todas as páginas, para serem executados os códigos/instruções PHP, precisam ter sua extensão .php (.php3 está ficando para trás). Sabemos qual a extensão das páginas para serem consideradas PHP, e agora, como eu crio um código PHP? Por padrão, um código PHP é iniciado com a tag <?php e encerrado com ?>. Não vamos nos ater à outras tags, mas só para conhecimento existem as opções:

<? ?>
<% %>
<script languague="php"> </script>


Certo, vamos criar nossa página "tut01.php" e "limpe" o código fonte dela, não vamos trabalhar com html ainda, somente com a saída PHP. Vamos iniciar um bloco de código PHP e fazer uma saída para o navegador.

<?php
echo "Adeus Mundo!";
?>


Como diria meu amigo, Jack Estripador, vamos por partes, ou melhor, por linhas.
Linha 01: <?php => Iniciamos o bloco PHP;
Linha 02: echo "Adeus Mundo!"; => echo é uma função do PHP para imprimir uma saída no navegador. Escrevemos a saída entres aspas pois não estamos trabalhando com variáveis ainda. Utilizamos o ";" no final de cada linha de comando, caso contrário um erro é gerado;
Linha 03: ?> => Encerramos o bloco PHP.

Salvamos essa página e publicamos no servidor. A única saída que temos no navegador será "Adeus Mundo!" (sem as aspas). O código fonte também omite qualquer outra saída, sendo assim, o PHP somente apresentará para o usuário o que for mandado apresentar.

- Certo, mas por que o Joãzinho usa o print? Não tem diferença?

Embora muitos digam que não, tem sim. Claro, nada que seja muito utilizado em casos "normais", mas que há uma diferença, há. Tempo de execução, exatamente iguais, sem diferença nisso. Digamos que a única visivel seja, print retorna para uma variável TRUE ou FALSE. (lembrando, essa parte é somente para tirar a dúvida de algumas pessoas em relação a comparação de echo e print, não há necessidade de decorar nada daqui).

<?php
$print = print "Teste";
// A saída será Teste, mas agora apresente a variável

echo $print;
// Saída 1 ou TRUE
?>


Eba! Já sei apresentar um conteúdo no navegador
Agora vamos começar a complicar um pouco mais. Vamos ver como apresentar um mais número de saídas no mesmo bloco, e logo em seguida, começaremos a utilizar algumas variáveis.

<?php
echo "Nome:";
echo "Luciano";
?>


Mas preciso realmente preciso utilizar duas vezes echo?!?! Não é necessário, para isso, nós utilizamos a concatenação "." (em outras linguaguens é mais comum ver o símbolo "+" para concatenação, mas no PHP é o "." mesmo).

<?php
echo "Nome:" . "Luciano";
?>


Você se pergunta, qual a vantagem disso? Poderia colocar os dois textos juntos. Sim, realmente poderia, mas é uma introdução à concatenação. Agora veremos a utilização de variáveis.

O que diabos são variáveis?
São apenas blocos de memória para armazenamento de alguma informação. Texto, números, arquivos, etc... Novamente, diferente de outras linguaguens, no PHP você não é obrigado a definir o tipo de variável que deseja utilizar (int, float, bool, ...). Vamos à alguns exemplos:

<?php
$minha_variavel = "Meu texto";
?>


Vamos seguir o exemplo do nosso amigo Jack Estripador, por partes. Como podem ver, para declarar uma variável iniciamos o texto com o caracter "$", ele é que indica que o texto a seguir será uma variável. Algumas observações quanto à variáveis:

- Você não pode iniciar um nome de variável com números, ex: $1. Mas pode utilizar nas demais partes do nome, ex: $a1;
- O PHP é case-sensitive (há diferenças entre $nome, $Nome e $NOME);
- Utilize sempre variáveis com nomes indicando o seu conteúdo, para simplificar a manutenção de terceiros e até mesmo a sua.

Tenho uma variável, o que faço com ela?
Digamos que a base de todas as linguaguens de programação são variáveis, pois, se não precisa-se de conteúdos variáveis, por que programaria? Simplesmente utilizava HTML.

Vamos à um outro código:

<?php
$nome = "Luciano";
$idade = 19;
?>


Declaramos duas variáveis no exemplo acima, uma chamada $nome, com o valor "Luciano" e outra, chamada $idade, com o valor 19. Por que não foi utilizado aspas para inserir o valor 19? Simples, variáveis do tipo texto (text) precisam ser inseridas entre aspas, já as numerais (int, float, ...) você simplesmente precisa informar o número.

Beleza, agora temos duas variáveis e não fizemos nada com elas...
Calma lá! Vamos juntar tudo que vimos até agora:

<?php
$nome = "Luciano";
$idade = 19;
echo "Olá, meu nome é " . $nome . " e tenho " . $idade . " anos.";
?>


Aqueceu a mente agora? Jack neles:

$nome = "Luciano" => Simplesmente declaramos uma variável, como haviamos feito anteriormente;
$idade = 19 => Mesmo que o anterior, declaração de outra variável;
echo ...... => Complicou? Bom, temos a primeira parte "Olá, meu nome é " que é a apresentação de um texto estático para o navegador, utilizamos o "." para adicionar outro valor à apresentação, $nome aqui apresentamos o valor da variável $nome, veja que não é escrito no navegador a palavra "$nome", mas sim "Luciano", adicionamos outro bloco de texto estático, o valor da variável $idade, e por fim, " anos.".

É isso então? Boa sorte no PHP e comece a trabalhar!


...........
É, infelizmente não é só isso não, temos muuuuuuuuito mais desafios pela frente. Que tal algumas funções básicas que podemos fazer trabalhando com variáveis:

strlen(TEXTO)
<?php
$nome = "Luciano";
echo "Seu nome tem " . strlen($nome) . " letras.";
?>


A funcionalidade da função strlen é de contar o número de caracteres que temos em determinada string (texto). Utilizamos a concatenação em uma função, como podem ver, podemos concatenar textos estáticos, variáveis e funções.

substr(TEXTO, INICIO, [ANDAR])
<?php
$nome = "Luciano";
echo "A primeira letra de seu nome é " . substr($nome, 0, 1);
?>


A função substr tem por objetivo "cortar" parte de um texto para a apresentação. O primeiro parâmetro passamos o texto a ser cortado, por segundo o caracter onde deve ser dado o inicio do corte (lembrando que começa do 0, não do 1), e por final, mas não obrigatório, quantos caracteres devem ser "andados", caso não passe nenhum valor, será até o final do texto.

trim(TEXTO)
<?php
$variavel = "   OI     ";
echo trim($variavel);
?>


trim elimina os espaços em branco do inicio e do final de um texto.

ucfirst(TEXTO)
<?php
$nome = "luciano";
echo ucfirst($nome);
?>


ucfirst capitaliza (existe essa palavra?!) a primeira letra de um texto.

strtoupper(TEXTO)
<?php
$nome = "Luciano";
echo strtoupper($nome);
?>


strtoupper transforma todas as letras de um texto em maiuscula.

strtolower(TEXTO)
<?php
$nome = "Luciano";
echo strtolower($nome);
?>


strtolower é a função inversa de strtoupper. Transforma todos os caracteres em minusculo.

str_replace(PESQUISA, SUBSTITUI, TEXTO)
<?php
$texto = "isso foi xxxxxx mesmo";
echo str_replace("xxxxxx", "****", $texto);
?>


str_replace procura por uma combinação de letras e a substitui em determinado texto. Outras opções nessa função podem ser vistas com a utilização de matrizes.

Captei! Vamos para Matrizes
Digamos que o monstro para muitos programadores iniciantes. Matrizes são grupos de valores em uma única variável. No PHP temos algumas maneiras para iniciar uma matriz:

<?php
$matriz_a = array("João", "Maria");
$matriz_b[] = "João";
$matriz_b[] = "Maria";
?>


Ambas teriam o mesmo conteúdo. Na primeiro forma ($matriz_a) declaramos que a variável é do tipo array (matriz) e em seguida passamos os valores para ela. Já na segunda, colocamos cada valor separamente. Caso não seja definido um índice para a matriz, ela se auto-inicia do 0 e também se incrementa de acordo com a necessidade.

<?php
$matriz = array("Oi", "Tchau");
echo $matriz[0]; // Oi
echo $matriz[1]; // Tchau
?>


Criamos nossa matriz, e em seguida apresentamos os valores dela, como não definimos índice em nenhum dos casos, ela se iniciou no 0 e foi se incrementando.

Mas como definir um índice?
Vamos ver nas duas formas:

<?php
$matriz = array(5 => "João", "indice" => "Maria");
echo $matriz[5]; // João
echo $matriz["indice"]; // Maria
?>


<?php
$matriz[5] = "João";
$matriz["indice"] = "Maria";
echo $matriz[5];
echo $matriz["indice"];
?>


Certo, mas matriz não tem vantagem nenhum em relação às variáveis normais...
10 minutos e você mudará completamente de idéia. Vamos criar uma lista de nomes em uma variável e apresenta-las:

<?php
$nome1 = "Luciano";
$nome2 = "João";
$nome3 = "Maria";

echo $nome1;
echo $nome2;
echo $nome3;
?>


Divertido, não? Imagine fazer dessa forma para 500 nomes? Eu não queria ser programador nesses casos... Agora vejamos com matrizes:

<?php
$nomes = array("Luciano", "João", "Maria");
foreach( $nomes as $nome ) {
  echo $nome;
}
?>


NÃO!!! Não desista agora. Nosso amigo Jack vai explicar melhor tudo isso:

$nome = array(...) => Criamos nosso array, nada de novo
foreach( $nomes as $nome ) { => Opa, algo novo aí. Para quem conhece inglês já deve ter imaginação do que isso faz, foreach (para cada):

para cada( $nomes como $nome )


Ele irá passar por TODOS os valores da matriz e copiar o seu valor para a variável $nome. Interessante não? É como se executá-se-mos o código tantas vezes quanto há valores na matriz.

Utilizamos "{" e "}" para determinar o inicio e fim do nosso comando foreach. Tudo que está entre eles será repetido.

Vamos à outro exemplo com o foreach:

<?php
$nomes = array(5 => "Luciano", 10 => "João", "indice" => "Maria"); // Criamos a matriz definindo seus índices
foreach( $nomes as $indice => $valor ) {
  echo $indice . " = " . $valor;
}
?>


ixi, fedeu? Calma lá, o que temos de novo nessa parte? ( $nome as $indice => $valor ), dessa vez, ao invéz de passar somente o valor de cada índice na matriz, estamos passando o nome do índice. Lembrando, a primeir váriavel receberá o nome do índice e a segunda o seu valor.

Matrizes, basicamente é isso, sua definição e utilização. Vamos passar por algumas funções que envolvem matrizes e dar mais valor à essas pérolas da programação.

Lá vem bomba... Condicional
Qual a vantagem de ter um conteúdo dinâmico em seu site se ele não conseguir decidir qual caminho tomar? Vamos ter uma introdução às condicionais agora if else

<?php
$nome = "Luciano";
if( $nome == "Luciano" ) {
  echo "Você realmente é o Luciano";
}
?>


Como vimos anteriormente, "{" e "}" servem para definir um inicio e um fim a um comando. if estará se perguntando SE o valor da variável $nome for igual à "Luciano". Se sim, o código entre "{" e "}" é executado, caso contrário, nenhuma ação é tomada.

Outro detalhe é, para definir valores à variáveis, utilizamos "=", para comparar valores "==". E uma terceira opção seria "===", que compara também o tipo da variável, além de seu valor (utilizada para diferenciar 0 de FALSE, por exemplo).

Agora veremos para não deixar passar em branco nossa condicional, a utilização do comando else:

<?php
$idade = 19;
if( $idade >= 18 ) {
  echo "Maior de idade";
} else {
  echo "Menor de idade";
}
?>


Nossa comparação dessa vez não consulta por um valor igual, mas sim, ">=" (maior ou igual). Somente aplicada em números. Caso o valor da variável $idade não seja >= à 18, a instrução else é executada.

Com isso já é possivel fazer uma pesquisa em uma matriz, por exemplo:

<?php
$nomes = array("João", "Maria", "Carlos", "Ana", "Paulo", "Bruna");
foreach( $nomes as $nome ) {
  if( $nome == "Ana" ) {
    echo "Ana encontrada";
  }
}
?>


O que temos no script acima? Criamos uma matriz com uma lista de nomes, em seguida, varremos toda a matriz, passando cada valor para a variável $nome. Dentro do loop para cada valor na matriz, verificamos se o valor do $nome é igual à "Ana" se for, apresentamos a mensagem "Ana encontrada".

Alguns erros comuns nesses casos:

<?php
$nomes = array("João", "Maria", "Carlos", "Ana", "Paulo", "Bruna");
foreach( $nomes as $nome ) {
  if( $nome == "Ana" ) {
    echo "Ana encontrada";
  } else {
    echo "Ana não encontrada";
  }
}
?>


Não que esse esteja errado, mas provavelmente não trará a saída desejada, pois, repare bem, em cada loop do comando foreach ele executa a condicional, pegamos o primeiro caso, "João", como "João" é diferente de "Ana", ele executa o comando else, apresentando, dessa forma, várias vezes "Ana não encontrada". Para executar da maneira desejada esse script, precisamos de uma variável conhecida pelo nome de flag.

Pronto, só faltava uma bandeira mesmo no PHP...
Nada disso, flag é o nome dado à uma variável que tem apenas um valor para comparação, na maioria das vezes TRUE ou FALSE (VERDADEIRO ou FALSO). Vejamos como fica nosso exemplo dessa forma:

<?php
$nomes = array("João", "Maria", "Carlos", "Ana", "Paulo", "Bruna");
$flag = false;
foreach( $nomes as $nome ) {
  if( $nome == "Ana" ) {
    $flag = true;
  }
}
if( $flag ) {
  echo "Ana encontrada";
} else {
  echo "Ana não encontrada";
}
?>


Jack?!?!

Criamos a matriz, definimos nossa $flag como false (falso), pois "Ana" não foi encontrada dentro da matriz ainda, varremos a matriz passando o valor para a variável $nome, se $nome for igual a "Ana" alteramos nossa $flag para true (verdadeiro). Terminando completamente o loop, executamos nossa condicional, repare que não temos realmente uma comparação a ser feita, por que isso? pois na verdade toda comparação retorna TRUE ou FALSE, ex: 1 == 2 FALSE, 5 == 5 TRUE, e assim por diante. Como nossa variável já tem um valor boleano (TRUE ou FALSE), ela mesmo se encarregará de retornar a resposta para o comando if. Se $flag contér TRUE apresentamos "Ana encontrada", caso contrário, "Ana não encontrada".

Imagine agora, se estivessemos procurando por "João", era uma repetição sem sentido até o final da matriz, já que "João" é o primeiro nome, mas como consigo parar um loop?

<?php
$nomes = array("João", "Maria", "Carlos", "Ana", "Paulo", "Bruna");
$flag = false;
foreach( $nomes as $nome ) {
  if( $nome == "João" ) {
    $flag = true;
    break;
  }
}
if( $flag ) {
  echo "João encontrado";
} else {
  echo "João não encontrado";
}
?>


Nossa única diferença, o comando break, que simplesmente corta o loop no momento que for encontrado o nome que procuramos.

Outras formas de Loop
Vamos ver algumas outras formas de loop para utilizar não somente em arrays. Vamos para a primeira delas, while:

<?php
$contagem = 1;
while( $contagem <= 10 ) {
  echo $contagem;
  $contagem = $contagem + 1;
}
?>


O comando while (enquanto) executa determinada função enquanto a sua condicional for verdadeira. Jack, venha cá:

while( $contagem <= 10 ) => Enquanto contagem for menor ou igual à 10, apresentamos o valor de $contagem no navegador e alteramos o valor de $contagem para $contagem + 1, ou seja, um a mais que o seu valor anterior.

Sim, muitas vezes vocês vão conseguir fazer os chamados loops infinitos, ou seja, ele vai ficar em execução até estourar o tempo limite do PHP.

Um exemplo de loop infinito (não execute =D):

<?php
$contagem = 1;
while( $contagem <= 10 ) {
  echo $contagem;
}
?>


Veja que fazemos praticamente a mesma ação que a acima, mas esquecemos de aumentar o valor da variável $contagem, ou seja, ela sempre terá seu valor igual à 1, nunca passará de 10.

Outro comando para loop que é disponivel no PHP é o for, que, basicamente, é o mesmo que o while, mas não precisamos controlar nossa contagem, como no exemplo acima.

<?phpfor( $contagem = 1; $contagem <= 10; $contagem++ ) {
  echo $contagem;
}
?>


De certa forma mais simples que o while. Sua sintaxe é a seguinta:

for( INICIALIZACAO; CONDICIONAL; INCREMENTO )

Ou seja, na primeira parte iniciamos a $contagem, depois fazemos nossa condicional verificando se $contagem é <= à 10 e por último, aumentamos o valor da variável $contagem. Repare que dessa vez, utilizamos $contagem++ para aumentar a variável.

<?php
$numero = 5;

$numero++; // $numero é aumentado em 1
$numero--; // $numero é diminuido em 1

$numero += 10; // $numero é aumentado em 10
$numero -= 10; // $numero é diminuido em 10

$numero = 5;
$a = $numero++; // $a recebe $numero (5) e então $numero é aumentado em 1

$numero = 5;
$a = ++$numero; // $numero é aumentado em 1 e então passa o novo valor (6) para $a

$numero = 5;
$a = $numero--; // $a recebe $numero (5) e então $numero é diminuido em 1

$numero = 5;
$a = --$numero; // $numero é diminuido em 1 e então passa o novo valor (4) para $a
?>


Há também outros comandos para loop como do... while / while... do Mas que teria a mesma sintexa do comando while, deixaremos eles de fora por enquanto.

segunda-feira, 22 de agosto de 2011

Photoshop

Links uteis
20 dicas Photoshop para Web Design
Imagem Espelhada

20 Dicas de Photoshop para Web Designers

*artigo retirado do site netmagazine.com

Ser um herói de web design não é apenas usar os efeitos da moda, mas saber usar os fundamentos do design no Photoshop, diz Dan Rose


A frase "Eu gostaria de ser melhor no Photoshop" é proferida por web designers jovens e velhos. No entanto, há algo inerentemente errado com essa afirmação. Isso implica que a nossa competência em um programa de software nos faria designers melhor. A realidade é que apenas saber o básico do Photoshop é suficiente para ser um ótimo web design.Anúncio

1. Primeiro esboço

Ironicamente, o mais essencial no Photoshop nem sequer envolve ligar o computador. Eu posso garantir que você vai gastar menos tempo criando layouts fazendo alguns esboços. Compre um caderno de desenho sólido ou imprima seus próprios modelos ( http://www.raincreativelab.com/paperbrowser/ ) e  va à cidade fazer alguns layouts áspero. Em seguida, traduza os esboços para o Photoshop.


2. Use um sistema de grade

Alinhamento e relação de tamanho são dois atributos que seus projetos devem abordar. Prepare-se com um sistema de grade do get-go. A maioria dos sistemas de grade têm modelos PSD com guias e sarjetas para colunas. Está aqui um grupo: 960px , 978px , 1140px .
O site 978.gs fornece modelos para várias larguras (tela, móveis de pequeno porte, roomy)

3. Use as linhas-guias

Não é nada pior do que estar fora por um pixel. Ative as linhas guias - View> Snap e View> Snap to Guides>. Se você implementou um sistema de grade, o encaixe nas guias é um gênio. Com menos squinting na tela, você não vai precisar aaqueles óculos da moda para designers.

4. Organize o seu PSD

É uma dor nomear suas camadas e colocá-los em pastas? Com certeza. A maioria dos designers defende  a lógica de que você vai gastar mais tempo fazendo isso, mas há razões que mostram que não é verdade. Se você trabalha sozinho, você vai economizar tempo procurando por coisas mais tarde. Se você trabalha com os outros, você estará fazendo um favor para a equipe.
Pode parecer um aborrecimento se você não está acostumado a isso, 
mas nomear camadas e usar pastas é o que todos os miúdos frescos
estão fazendo

5. Atalhos mestre

A chave para o estrelato Photoshop é a eficiência. Não é apenas saber como fazer algo, mas como fazer algo rapidamente para você não usar um tempo valioso para executar uma função. Alguns atalhos específicos para saber? Comece com Save for Web [cmd + opt + shift + S], Tamanho da imagem [Cmd + Opt + I], Canvas Size [cmd + opt + C]. Não se esqueça Níveis [cmd + L] e Hue / Saturation [cmd + U].

* uma pequena contribuição da design Deborah Zandonadi:

As principais Teclas de Atalho do Photoshop


Lista com as principais teclas de atalho das ferramentas do Adobe Photoshop

COMANDOS GERAIS – PALETAS


F1 - Abre o Adobe Help Center (Ajuda Online do Photoshop).
F5 - Mostrar ou esconder a paleta de Predefinições de Pincéis (Brushes).
F6 - Mostrar ou esconder a paleta de Cores, Amostras e Estilos.
F7 - Mostrar ou esconder a paleta de Camadas, Canais e Demarcadores (Layers).
F8 - Mostrar ou esconder a paleta do Navegador, Informações e Histograma (Info).
F9 - Mostrar ou esconder a paleta do Histórico e Ações.
Tab - Mostrar ou esconder todos os componentes da tela.
Shift+Tab - Mostrar ou esconder todos os componentes da tela (com exceção da barra de ferramentas).

ATALHOS PARA BARRA DE FERRAMENTAS

Para alternar entre ferramentas que utilizam a mesma tecla de atalho, utilize Shift. Por ex.: a tecla L seleciona a ferramenta Laço (Lasso), mas se você quiser utilizar a ferramenta Laço Poligonal (Polygonal Lasso), tecle Shift+L.

M - Letreiro Retangular (Rectangular Marquee); Letreiro Elíptico (Elliptical Marquee)
V - Mover (Move)
L - Laço (Lasso); Laço Poligonal (Polygonal Lasso); Laço Magnético (Magnetic Lasso)
W - Varinha Mágica (Magic Wand)
C - Corte Demarcado (Crop)
K - Fatia (Slice); Seleção de Fatia (Slice Select)
J - Pincel Para Recuperação de Manchas (Spot Healing Brush); Pincel de Recuperação (Healing Brush); Correção (Patch); Olhos Vermelhos (Red Eye)
B - Pincel (Brush); Lápis (Pencil); Substituição de Cor (Color Replacement)
S - Carimbo (Clone Stamp); Carimbo de Padrão (Pattern Stamp)
Y - Pincel do Histórico (History Brush); História da Arte (Art History Brush)
E - Borracha (Eraser); Borracha de Plano de Fundo (Background Eraser); Borracha Mágica (Magic Eraser)
G - Degradê (Gradient); Lata de Tinta (Paint Bucket)
R - Desfoque (Blur); Nitidez (Sharpen); Borrar (Smudge)
O - Subexposição (Dodge); Superexposição (Burn); Esponja (Sponge)
A - Seleção de Demarcador (Path Selection); Seleção Direta (Direct Selection)
T - Texto Horizontal (Horizontal Type); Texto Vertical (Vertical Type); Máscara de Texto Horizontal (Horizontal Type Mask); Máscara de Texto Vertical (Vertical Type Mask)
P - Opções da Ferramenta Caneta (Pen); Caneta de Forma Livre (Freeform Pen)
U - Retângulo (Rectangle); Retângulo Arredondado (Rounded Rectangle); Elipse (Ellipse); Polígono (Polygon); Linha (Line); Forma Personalizada (Custom Shape)
N - Observações (Notes); Comentário de Áudio (Audio Annotation)
I - Conta-gotas (Eyedropper); Classificador de Cores (Color Sampler); Medir (Measure)
H - Mão (Hand)
Z - Zoom
D - Cores de Primeiro Plano e Plano de Fundo Padrão (Reset Foreground and Background To Black and White)

Para os seguintes atalhos, não é necessário teclar o Shift para alternar entre as funções, basta pressionar a tecla de atalho novamente

X - Alternar Cores de Primeiro Plano e Plano de Fundo (Change Foregroud to Background)
Q - Alternar entre Editar no Modo Padrão (Pattern Mode); Editar no Modo Máscara Rápida (Quickmode)
F - Alternar para o Modo de Tela Padrão (Pattern Screen); Modo de Tela Cheia com Barra de Menus (Fullscreen w/ Menu Bars); Modo de Tela Cheia (Fullscreen)

Daqui para frente estão os atalhos para comandos do menu, navegação, edição, seleção, texto, camadas, e os mais importantes do Photoshop.

Atalhos para ARQUIVO (File Menu)

Novo… (New) - Ctrl+N
Abrir… (Open) - Ctrl+O
Procurar… (File Browser) - Ctrl+Alt+O
Abrir Como… (Open As) - Ctrl+Alt+Shift+O
Editar no Image Ready (Jump to Image Ready) - Ctrl+Shift+M
Fechar (Close) - Ctrl+W
Fechar Todas (Close All) - Ctrl+Alt+W
Fechar e Ir para o Bridge… (Close and Jump to Bridge) - Ctrl+Shift+W
Salvar (Save) - Ctrl+S
Salvar Como (Save As) - Ctrl+Shift+S
Salvar para Web (Save to Web) - Ctrl+Alt+Shift+S
Reverter (Revert) - F12
Info Sobre Arquivo (File Info) - Ctrl+Alt+Shift+I
Configurar Página (Page Setup) - Ctrl+Shift+P
Imprimir com Visualização (Preview Print) - Ctrl+Alt+P
Imprimir (Print) - Ctrl+P
Imprimir uma Cópia (Print Copy) - Ctrl+Alt+Shift+P
Sair (Exit) - Ctrl+Q

Atalhos para EDITAR (Edit Menu)

Desfazer (Undo) - Ctrl+Z
Avançar uma Etapa (Step Backward) - Ctrl+Shift+Z
Retroceder uma Etapa (Step Forward) - Ctrl+Alt+Z
Atenuar…(Fade) - Ctrl+Shift+F
Recortar (Cut) - Ctrl+X ou F2
Copiar (Copy) - Ctrl+C ou F3
Copiar Mesclado (Copy Merged) - Ctrl+Shift+C
Colar (Paste) - Ctrl+V ou F4
Colar em (Paste Into) - Ctrl+Shift+V
Transformação Livre (Free Transform) - Ctrl+T
Transformar Novamente (Tranform Again) - Ctrl+Shift+T
Configuração de Cores (Color Settings) - Ctrl+Shift+K
Atalhos de Teclado (Keyboard Shortcuts) - Ctrl+Alt+Shift+K
Mudar Preferências (General Preferences) - Ctrl+K
Atalhos para IMAGEM (Image Menu)
Níveis (Levels) - Ctrl+L
Níveis Automáticos (Auto Levels) - Ctrl+Shift+L
Contraste Automático (Auto Contrast) - Ctrl+Alt+Shift+L
Cor Automática (Auto Color) - Ctrl+Shift+B
Curvas… (Curves) - Ctrl+M
Equilíbrio de Cores… (Color Balance) - Ctrl+B
Matiz/Saturação (Hue/Saturation) - Ctrl+U
Remover Saturação (Desaturation) - Ctrl+Shift+U
Inverter (Invert) - Ctrl+I
Tamanho da Imagem (Image Size) - Ctrl+Alt+Y

Atalhos para CAMADAS (Layers Menu)

Nova Camada (New Layer) - Ctrl+Shift+N
Nova Camada por Cópia (Layer via Copy) - Crtl+J
Nova Camada por Corte (Layer via Cut) - Ctrl+Shift+J
Criar/Soltar Máscara de Corte (Create/Release Clipping Mask) - Ctrl+Alt+G
Agrupar Camadas (Group with Previous) - Ctrl+G
Desagrupar Camadas (Ungroup) - Ctrl+Shift+G
Trazer para o Primeiro Plano (Bring to Front) - Ctrl+Shift+]
Trazer para Frente (Bring Forward) - Ctrl+]
Enviar para Trás (Send Backward) - Ctrl+[
Enviar para o Plano de Fundo (Send to Back) - Ctrl+Shift+[
Mesclar Camadas (Merge Down) - Ctrl+E
Mesclar Camadas Visíveis (Merge Visible) - Ctrl+Shift+E

Atalhos para SELECIONAR (Select Menu)

Selecionar Tudo (Select All) - Ctrl+A
Cancelar Seleção (Deselect) - Ctrl+D
Selecionar Novamente (Reselect) - Ctrl+Shift+D
Inverter Seleção (Inverse Selection) - Ctrl+Shift+I ou Shift+F7
Selecionar Todas as Camadas (All Layers) - Ctrl+Alt+A
Difusão… (Feather) - Ctrl+Alt+D ou Shift+F6

6. Ser sutil - tudo com moderação

Como designers, temos a tendência de desacreditar da capacidade do nosso público para perceber o efeito que estamos tentando alcançar. Então nossa resposta é adicionar muito barulho, fazer duros gradientes e uso demasiado de contraste. A combinação perfeita é quando você usa efeitos com alguma graça, e, mais importante, auto-controle.
Adicionar filtros como sombras ruído e soltar com facilidade...

7. Use composições de camada e objetos inteligentes

Infelizmente, o Photoshop não tem um sistema ótimo para composições como navegação estados. No entanto, você pode alavancar Layer Comps [Window> Layer Comps] para fazer versões de layouts muito bem. Smart Objects [Camada> Objetos Inteligentes> Convert to Smart Object] irá compilar vários elementos em um arquivo que pode ser editado fora do seu PSD.

8. Mantenha formas integrantes de objetos vetoriais inteligentes

Não há nada pior do que ter que "fazer o logotipo maior" e perceber que você não pode porque é um gráfico na sua rasterised PSD, ou tentar redimensionar um botão só para descobrir que ele não é mais uma forma. A solução é manter essas formas em formato vetorial. Você pode fazer isso importando-os como vetores ou convertê-los em smart objects (duplo clique na camada, covert to smart object_ antes de rasterise-los.

9. Use máscaras de forma inteligente

Máscaras globalizado faz com que para alguns eficiência Photoshop doce. Por exemplo, se você tiver cinco imagens deslizante em seu projeto, agrupá-los e colocar uma máscara sobre a pasta em vez de cada camada individual. É uma solução muito superior do que peneirar 20 máscaras, sem saber qual deles fazer o quê.

10. Refinar máscaras para cabelos silhouetting fácil

Quem não detesta ter de cabelo silhueta? Aqui está um truque que funciona bem em vários tamanhos de imagens, não importa o quão louco o penteado. Faça uma máscara grosseira da pessoa, então vá em Select> Refine Mask (Refine Edge em versões anteriores para CS5). Brincar com o raio e ver a mágica acontecer.
Cabelos crespos? O medo não existe mais. Use a ferramenta Máscara Refine ao invés de gastar inúmeras horas silhouetting à mão

11. Percebem sombras com precisão

Pegando carona na última ponta, o sinal de um designer amador é quando você vê sombras muito escuras. Ele traduz que o objeto está sob um holofote. Provavelmente não é o caso. Certifique-se de diminuir a opacidade, e melhor ainda, use uma cor que é um tom escuro do fundo atrás, em vez de preto.

12. Ensinar-se a ferramenta caneta

Vale a pena o tempo para ficar bom em usar a ferramenta caneta. É uma daquelas coisas que tendem a evitar, mas se você quiser tirar algumas máscaras crisp ou adicionar ilustração para seus projetos, a caneta é sua arma de escolha. Aperfeiçoar os seus dotes com este tutorial .

PSDTUTS tem um tutorial muito completo sobre como dominar a ferramenta caneta

13. Sharpen fotos usando passa-alto

Pronto para algum Magia Photoshop? Então, você recebeu uma foto de baixa resolução do seu cliente, e é simplesmente muito embaçado de usar. Duplicar a camada, em seguida, vá em Filter> Other> High Pass. Escolha algo baixa (em torno de 2,0) e em seguida, definir Blending Mode dessa camada para Overlay. Se ele é muito nítida, diminuir a opacidade. Os resultados podem variar.
Você pode precisar a massageá-lo, mas High Pass com uma sobreposição pode reviver os bitmaps crummy herdado

14. Ser consistente

Cinco azuis diferentes, e nenhum deles é o único da guia de marca? Se esqueça de verificar as cores sendo usadas, especialmente quando exportar imagens. Outra ferramenta útil para a precisão da cor é 0to255.com , que fornece valores hex que arharmoniously mais claras e escuras de uma determinada cor.

0to255.com é uma ferramenta brilhante por Shaun Chapman. Digite um valor hexadecimal para ver tons mais escuros e mais leve, fácil de copiar todos os

15. Não padrão para as configurações padrão

Uma das coisas mais difíceis de afastar a autonomia Photoshop. Se você está tratando o painel Efeitos como uma lista de estilos desejado, você provavelmente não crafting suas configurações para um estado razoável. As configurações padrão são geralmente duras, a fim de mostrar a sua aparência. Suavizar os valores e mudar os ângulos.
Você saberá quando você vê uma sombra cujas configurações não foram tocados. Trabalhar essas configurações a cada vez

16. É nos detalhes

Parte integrante de aperfeiçoar sua arte no Photoshop é fazer com que seu projeto "pixel perfect". Vá para trás com seu PSD, procurando margens borradas em retângulos arredondados ou pesos linha inconsistente. Vale a pena tomar o tempo no Photoshop aperfeiçoar o seu layout (em vez de HTML / CSS).

17. Reescrever a história

Não é como uma chatice quando você abrir o painel Histórico e você precisa de 21 passos para trás, só para vê-lo pára no últimos 20? Impedir que isso aconteça novamente, indo para Preferências> Desempenho e aumentando o valor para os Estados-História. Você super-heróis de web design não precisa usar o painel Histórico, porém, não é?

18. Personalize o seu espaço de trabalho

Photoshop não é o chefe de você, pixelcrafter. Se você preferir que suas ferramentas na direita e apenas o seu painel Layers aberto, fazê-lo. Você pode até mudar a cor em torno da tela com o botão direito do mouse sobre ele. Guarde o seu espaço de trabalho através do menu no canto superior direito da aplicação.
Você pode salvar seus menus e atalhos de teclado, bem como o layout do painel criando o seu próprio espaço de trabalho

19. Organize seus arquivos

Bem como nomear suas camadas e pastas, nomear seus arquivos de forma adequada evita que muitas contendas. Não é difícil distinguir o que é o PSD "mais recente" quando têm descritores como "NEWEST_round4.psd" ou "FINAL_USE_THIS_ONE.psd"? Manter um PSD e ser feito com ele. Arquivar o resto se você realmente precisa dele.

20. Seja original e tendências luta

A boa notícia é que nós web designers têm usado o Photoshop para criar algumas técnicas bonito. Que também é a má notícia, porque nós estamos propensos a cópia um do outro hotness novo. Photoshop é uma ferramenta maravilhosa, mas use com cuidado. Só porque você pode colocar um gradiente em algo não significa que você deve. Experiência com as configurações e iniciar o seu próprio tendências.

Links uteis - Photoshop

Lista de links uteis para quem curte Photoshop e está sempre buscando aprender mais. Estarei atualizando de acordo com minhas descobertas. Se alguem tiver um link legal, é só postar nos comentários.

*Lista tirada do forum.imasters.

Gerais

http://www.bluevertigo.com.ar/ - Este daqui, é uma lista COMPLETÍSSIMA e atualizada!
http://www.deviantart.com/ - Um dos melhores sites que conheço, na verdade é uma galeria, mas tem TUDO!

Fontes

http://www.myfonts.com/WhatTheFont/ - Sabe aquela fonte que você viu numa imagem ou banner, e não sabe qual é? Ele descobre!
www.dafont.com - Site com diversas fontes.

Tutoriais e Aprendizado

http://www.3dtotal.c...0/pstut100.html - Ótimos tutoriais de manipulações avançadas no Photoshop.
http://www.worth1000.com/tutorials.asp - Outro ótimo site com ótimos tutoriais de manipulação de imagens avançadas.
http://www.good-tutorials.com/ - Mais um site do estilo de tutoriais bem semelhantes ao Worth1000, manipulações avançadas!
http://psdtuts.com/ - Inúmeros tutoriais, de alguns sites aleatórios, todos os tutos dele são ótimos!!!
http://psdlearning.com/ - Site muito bom para o aprendizado do Photoshop!
http://psdfan.com/ - Site de fans de Photoshop, contém ótimos tutoriais também!

Stocks

http://www.sxc.hu/ - Um dos melhores gratuitos.
http://www.cgtextures.com/ - Repleto de texturas de todos os tipos.
http://www.everystockphoto.com/ - Outro stock muito bom, porém é comercial (pago).
http://www.vectorportal.com/ - Stocks de vetores!
http://www.everystockphoto.com/ - Sistema de busca ótimo! Ele busca imagens em vários sites de stocks.

Desafios

www.desafiosphotoshopbrasil.com.br - Coloque em ação tudo o que você aprendeu sobre o photoshop
concursos semanais com ranking, galeria e tudo mais.

http://www.3dtotal.c...0/pstut100.html
http://www.worth1000.com/tutorials.asp
Estes links possuem diversos tutoriais de manipulações avançadas no Photoshop.

Bancos de imagem:

http://www.sxc.hu/
http://www.cgtextures.com/
http://www.everystockphoto.com/
http://www.vectorportal.com/
http://www.everystockphoto.com/

http://www.heroturko.com/

http://psdtuts.com/ - Inúmeros tutoriais, de alguns sites aleatórios, todos os tutos dele são ótimos!!!
http://psdlearning.com/ - Site muito bom para o aprendizado do Photoshop!
http://psdfan.com/ - Site de fans de Photoshop, contém ótimos tutoriais também!
http://www.webdesign.org/, muitos tutos de diversos softs. Ingles mas muito ilustrado.
http://canalphotoshop.info/ Tem muitos tutoriais e dicas. 
 

Imagem Espelhada

Fala Pessoal!

Tava montando um site onde resolvi colocar uma imagem espelhada no logo, pra dar um "tchan". Como sempre vejo muitas pessoas na net perguntando como se faz, resolvi separar algumas maneiras e colocar aqui no blog.

Pra começar, vamos ao básico:

1 - Abra uma imagem qualquer, que você deseja espelhar. No meu caso vou usar esta foto aki:


2 - DÊ um duplo clique na layer para desbloquear. Coloque o nome que quiser e dê enter, ou OK. 

3 - Dê um CTRL J ou clique com o botão direito e vá em Duplicate Layer - Duplicar camada. Você pode ver que a layer foi duplicada, com o nome de layer1. Se quiser renomea-la de um duplo clique sobre o nome e coloque o nome que você quiser.

4 - Para que a imagem duplicada fique em baixo, selecione a layer1 (ou o nome que você deu) com um clique apenas. Vá em Edit - Transform - Flip Vertical. Pronto, sua imagem está duplicada e em baixo da original, mas você só vê a duplicada certo?

5 - Dê CRTL + ALT + C, ou vá em Image - Canvas Size. Em Height (Altura), dobre o valor. Em seguida clique na Layer 0 (ou o nome que vc deu) e posicione na parte de cima do palco. Clique na Layer 1 /(ou nome que vc deu) e posicione na parte de baixo do palco.

Agora sim, vc esta com a imagem duplicada:



Chique, muito chique. Agora, para usar este efeito deixando a imagem duplicada ao lado da original:

Repita os passos 1, 2 e 3.

4 - Para que a imagem duplicada fique lado, selecione a layer1 (ou o nome que você deu) com um clique apenas. Vá em Edit - Transform - Flip Horizontal. Pronto, sua imagem está duplicada e ao lado da original, mas você só vê a duplicada certo?

5 - Dê CRTL + ALT + C, ou vá em Image - Canvas Size. Em Width (Largura), dobre o valor. Em seguida clique na Layer 0 (ou o nome que vc deu) e posicione na parte de esquerda (ou direita, dependendo da sua foto e do efeito que você quer alcançar) do palco. Clique na Layer 1 /(ou nome que vc deu) e posicione na parte direita (ou esquerda, dependendo da sua foto e do efeito que você quer alcançar)do palco.
Agora sim, vc esta com a imagem duplicada:


Certo galera? no próximo post de Photoshop irei aplicar alguns efeitos nas fotos. Valew!!!

segunda-feira, 1 de agosto de 2011

Saudações

Olá a todos os visitantes. O objetivo deste blog é o compartilhamento de informações sobre marketing, publicidade e propaganda, desing gráfico, web desing e outras coisas mais.

A idéia é oferecer tutoriais, arquivos para download, dicas e comentários sobre o universo da criação publicitária, gráfica ou web.

Trarei aqui tambem, criações de vários profissionais,  que servirão de inspiração na hora dos estudos ou do vamo-vê.

Espero que gostem do blog, farei o possivel para atualiza-lo diariamente.

Sigam-me no twitter e no facebook