SND3

Bom pessoal, muitas pessoas me cobraram esta postagem, portanto estarei tentando corresponder à altura, tentando explicar da melhor maneira possivel o que foi passado em sala.


Então vamos aos links.

2ª Aula – Slice Tool e Layout Web: Mesmo material da aula do Dia 4/6

Styles (Estilos)

Styles (Estilos) são modelos prontos para aplicar diversos efeitos de uma só vez a uma imagem. Não confunda com actions, pois são muito diferente. Ao utilizar uma style, você estará modificando sua imagem e apenas aplicando efeitos, sem poder adicionar ações como salvar, criar novas layers e etc. Com styles é possivel criar objetos com texturas, sombreamento entre outros efeitos de forma definida, ou seja escolhidos previamente.

A janela de estilos pode ser aberta na aba "windows">"styles". Nela você vai encontrar alguns estilos prontos do photoshop, como mostra a imagem.

Bom, vamos testar alguns estilos. Selecine a ferramenta de Texto e escreva algo utilizando uma fonte grande para melhor visualização. Após ter feito isso, selecione a camada referente ao texto escrito. Abra a sua janela de estilos e clique sobre algum estilo para ver o resultado. Irá obter algo como isto:
Agora que você já sabe utilizar os estilos, vamos aprender a criar os seus próprios estilos.
Para fins didáticos, vamos criar uma forma qualquer, por exemplo um retângulo. Com a ferramenta de seleção retangular, crie um retangulo e depois preencha com alguma cor do seu gosto (utilizando a ferramenta Lata de Tinta). Feito isso você deve ter algo parecido com isso:

Agora é a parte mais divertida, onde você deverá utilizar sua criatividade. Abrindo a janela das layers (camadas) — utilize o botão F7 ou vá na aba "window>layers".

Agora você poderá abrir o painel de efeitos do photoshop que pode ser feito de duas formas: clicando no botão "Fx" e em seguida na opção primeira opção (este botão fica no rodapé da janela de layers) ou dando um duplo clique na parte direita da layer selecionada (parte oposta ao local onde está o nome da layer). Abrirá o seguinte painel:
Neste painel existem várias possibilidades de efeitos a serem criados. Infelizmente não vou falar de todos pois demandaria muito tempo e o post ficaria gigantesco, irei apenas citar alguns que serão usados na imagem do exemplo, o que possibilitará dar base teórica para testar os demais efeitos. Para melhores esclarecimentos sugiro que testem os efeitos e deem uma lida na Aula 8 da apostila.
OBS: O efeito será aplicado assim que a caixa ao lado esquerdo do nome do efeito for marcada, no entanto, para modificá-lo é necessário clicar em cima do nome do efeito.

Utilizando o efeito Drop Shadow é possivel criar sombras externas ao objeto. Existem diversos ajustes que podem ser feitos como posicionamento da sombra, espalhamento, tamanho e etc.
Exemplo:

Com o efeito Bevel and Emboss é possivel criar efeitos de texturas e objetos com profundidade, como na imagem a seguir:

Por último usaremos o efeito Gradient Overlay, aproveitando para mostrar como criar seu próprio gradiente (o que serve para criar diversas outras formas para ferramentas, como brush). Este efeito sobrepõe a imagem com cores em gradiente. Utilizando o mesmo modelo que o professor André, e mantendo os efeitos anteriores, obtive a seguinte imagem:

Para criar seu proprio efeito Gradient overlay, na aba onde você escolhe o seu gradiente clique na seta (Figura) que aponta para esquerda e clique na primeira opção "New Gradient".

Feito isso, aparecerá uma copia do ultimo gradiente usado. Selecione o seu gradiente e dê um clique único para abrir a janela para editar o seu gradiente como quiser (Figura).
Agora basta clicar no seu gradiente sempre que quiser usá-lo!

 Após ter feito todas as alterações de efeitos na sua imagem, agora vamos criar o seu estilo.
Na janela estilo, clique no ícone que se encontra no canto superior direito da tela como mostra a imagem:
Selecione a opção "New Style", nomeie seu estilo, e sempre que vc quiser utiliza-lo basta dar um clique  sobre ele.


É possivel "arrastar" todos ou somente um efeito de uma camada, possibilitando mover para outra camada, selecionar os efeitos da camada de origem, segurar alt e "arrastar" para a camada de destino.

Layout Web e Slice Tool

Nesta aula, aprendemos como criar um site simples, apartir de um layout previamente criado no photoshop, utiliando a slice tool para dividir as principais "partes" de um site. Mas o que seriam essas "partes" de um site? Bem, para organizar a estrutura de um site, geralmente tem-se o seguinte formato de divisão:
1º Topo (parte de cima do site, onde geralmente tem o logo e os contatos da empresa/site)
2º Menu (parte superior, abaixo do topo. Local onde ficam os botõs para as páginas do site)
3º Corpo (parte do meio, onde vem o conteúdo)
4º Rodapé (onde se colocam os direitos de criação, e atualmente também pode conter algum tipo de conteudo).
Sabendo disso e tendo nossa imagem que foi criada apartir da aula 04/06. Vamos então a Slice Tool.
Para trabalhar com a slice tool é importante usar as réguas (rules) para dividir as partes do site (que foram supracitadas neste texto).
Primeiro divida o a imagem da sua página contendo as 4 estruturas.



Feito isso, selecione a Slice Tool (fica no mesmo ícone da Crop Tool), e em seguida na aba superior, de opções da ferramenta, clique no botão "Slices From Guides", alguns números surgiram marcando cada parte do site.
Para o menu ficar funcional, com a Slice Move Tool, selecione o quadro do menu  e "puxe-o" para depois do utlimo botão da direita (Figura 13)