Felipe Fernandes

Olá, pessoal!

Há alguns anos eu tenho dado aula de Web Design e para ajudar meus alunos a estudarem por conta própria eu montei esse material, que além dos meus alunos também podem ajudar outras pessoas a também iniciarem os estudos no Photoshop. São 6 tópicos que estão na ordem do meu programa de aulas, juntamente com alguns exercícios para você treinar e dar os primeiros passos como Web Designer. ;)

Bom, mas chega de papo e vamos ao o que interessa!

1. Visão geral da Ferramenta

Nesse link fala sobre a interface da ferramenta, como ela está organizada. http://www.cafecomphotoshop.com.br/photoshop-para-iniciantes-conhecendo-o-basico/

2. Funcionamento das camadas

Compreenção sobre camadas é basicamente o conceito central para trabalhar com o Photoshop. https://www.youtube.com/watch?v=RzBpLM6rppg

3. Ferramentas de Seleção e Recorte (básico)

Para você começar a fazer suas montagens, colagens, além de muitas outras operações conhecer os recursos de seleção e recorte são uma mão na roda. https://www.youtube.com/watch?v=6xpOsHR9uzI

Exercicio #1
Crie um personagem utilizando os arquivos disponíveis nos links http://bit.ly/1kg4Wiw e https://goo.gl/dMbOn9

4. Máscaras

https://www.youtube.com/watch?v=qyVMFeY–1I https://www.youtube.com/watch?v=wrrGs4_4y8o https://www.youtube.com/watch?v=lmsQCb_whGw (recortes profissionais, canais)

5. Correção de cores

http://www.cafecomphotoshop.com.br/retoque-correcao-de-cores-em-tres-passos/ extra: http://www.cafecomphotoshop.com.br/como-mudar-a-cor-dos-olhos/

Exercicio #2: ##### Banner Agência de Turismo Objetivo: Fazer banner para agencia de viagens Eye Travel - Usar o formato (tamanho 336x280) correto - Escolher um destino (livre) - Usar a imagem da moça (OBRIGATÓRIO!) - Redigir uma chamada promocional (livre)

Recursos: Baixar o arquivo zip e extraí-lo! http://migre.me/s5fNP

Exercicio #3 ##### Banner Show Objetivo: Fazer banner promocional para o show de um ARTISTA (livre escolha) que acontecerá no dia 31/novembro/2015 às 22h, no LOCAL (livre escolha). - Livre escolher o artista (livre) - Livre redação do texto promocional (livre) - Destacar: Local, Dia e Hora do evento. - Formato do banners: 300x600 e 970x90

6. Grids

Instalando plugin de grids no photoshop, e utilização de grids http://tableless.com.br/usando-o-plugin-960gs-e-o-photoshop/

Guia sobre grids e layouts adaptados para diversos dispositivos http://arquiteturadeinformacao.com/design-de-interacao/guia-completo-sobre-grids-para-design-responsivo/

Outra abordagem sobre GRIDS e Código http://loopinfinito.com.br/2013/10/08/css-grid-isso-muda-tudo-de-novo/

Exercicio #4
Existem muitas instituições que existem para colaborar com a sociedade em diversos níveis - As ONGs (organização não governamental). Pense em uma causa que você se importe, pesquise no Google e desenvolva um layout (ou re-layout) para uma ONG.

PASSO A PASSO DO SUCESSO: 1. Pesquise no Pinterest, Behance e outros referências de sites com esse tema para se inspirar; 2. Defina um Wireframe 3. Rascunhe no papel a idéia 4. Passe para o Photoshop o rascunho utilizando um grid 5. Hora de pintar o layout! Coloque imagens, fontes, cores…

Recursos para download

960.gs [http://www.960.gs]
Bootstrap [http://getbootstrap.com/]

Bonus track: Tutoriais

Inserindo OBJETOs em uma Foto https://elelart.wordpress.com/2015/03/19/inserindo-animaisobjetos-em-uma-foto-iniciantes/

E aí curtiu? Deixa teu comentário, ou dúvida, ou se falei alguma besteira. ;)

Um efeitozinho bacana que volta e meia aparece nos layouts dos designers com quem trabalho é esse efeito de marcatexto, e é bem útil em alguns casos. E para quem tá querendo saber como faz, eu achei um método bem simples usando o HTML e CSS 3, se liga só:

No HTML vai ficar assim…

<p class="marcatexto">
	<span>Lorem ipsum dolor sit<br>amet omtip gullan</span>
<p>

E o CSS, assim…

.marcatexto {
	box-shadow: 15px 0 0 0 #000, -5px 0 0 0 #000;
	background: #000;
	display: inline;
	padding: 3px 0 !important;
	position: relative;
}

E aqui você pode ver funcionando.

Bom, se você quiser trocar a cor do seu marcatexto é só mudar o #000 pelo código Hexadecimal da cor de sua preferência.

Molezinha, né? E aí curtiu?