GDW CAP05 2025 VA02 AMBIENTACAO PROFISSIONAL DE IMAGENS

Você sabe o que é
ambientação do Photoshop?

Bom, ambientação é quando
a gente consegue fazer

com que diversos
elementos e objetos visuais

se conversem dentro
de uma arte.

E a gente vai fazer isso utilizando
técnicas de recorte e de composição.

Vamos para o Photoshop.

Já temos, aqui, o nosso template,
sabemos que temos que usá-lo

de acordo com as especificações
que foram criadas,

mas, agora, eu vou excluir,
não preciso dele agora.

Vou até mudar de cor e jogar
um branquinho novamente

e já vou salvar.

"Capa do site", mantém
PSD para ficar aberto.

E vamos utilizar a ferramenta
de gradiente.

E, aqui onde a gente
cria o solid,

também temos a ferramenta
de gradiente.

Ao clicar aqui, nós
abrimos essa janelinha,

onde, ao acessar essa
setinha para baixo,

temos vários presets prontos.

Vamos utilizar
um preset laranja.

Aqui, temos vários gradientes
que seguem a linha laranja,

Vamos utilizar
esse aqui e dar ok.

Ele não está na estrutura
que a gente quer ainda,

mas se a gente vier
no campo de propriedades,

aqui, ele já abriu
todo esse espaço.

A primeira coisa que a gente
vai fazer é tirar esse vermelho,

porque a gente quer
alaranjar ainda mais.

Ao clicar aqui, abriu essa
barrinha contextual,

eu clico na cor, olha, já
veio um pretinho aqui,

mas eu vou procurar
o laranja que eu quero.

Eu acho que esse está bom.

Achei, clico em "ok" e, agora,
eu vou mudar a forma dele.

Ele está aqui, ele está
apontando para baixo,

então, melhor dizendo,
vou mudar a direção,

eu quero que ele venha na lateral,
aqui, quase que em diagonal.

Já está no estilo linear e o ângulo
eu posso colocar 45 graus,

ou melhor, 50, 55.

Perfeito, já mudou a direção,
está bem diagonal,

só que eu quero que esse
laranja fique para esse lado,

então eu clico em "reverse",
ele automaticamente muda.

Se você achar que está
muito acentuada essa cor,

você pode trabalhar neste
elementozinho bem pequeno,

olha o que ele vai fazendo, ele
vai diminuindo e aumentando

até se tornar mais sólido
para um lado ou para o outro.

Bom, acho que aqui,
mais ou menos, está bom.

Perfeito.

Já temos, então,
o nosso background.

Vou até clicar duas vezes
aqui e renomear como "BG".

Para manter a nossa base organizada,
as nossas layers organizadas,

deixa eu aumentar aqui, eu vou vir
bem nessa partezinha aqui, olha,

que a gente consegue ocultar,
e vou clicar com o botão direito

e vou escolher laranja
para mudar a cor aqui,

e quando eu bater
o olho na minha layer,

eu vou saber que essa camada
laranja é o background.

Essa aqui, a gente
pode até excluir.

Inclusive você pode excluir
selecionando e clicando em delete

ou vem aqui nessa lixeirinha,
clica nela e dá um "yes".

Ok, temos o nosso background
e, agora, vamos trazer, para cá,

a imagem da nossa modelo
que vai compor a nossa capa.

Então, vamos buscar
ela na pasta,

deixa eu ver, aqui, e vamos
trazer essa modelo para cá.

Eu quero abrir ela
bem aqui, em outra aba.

Com ela aberta, nós vamos recortar
esse processo aqui, esse fundo,

nós queremos tirar o fundo.

Eu posso vir aqui e remover
o background, simples.

Pronto.

Só que não ficou legal,
se eu arrastar para cá,

a gente vai ver que tem algumas
contaminações de branco no cabelo.

Então, como o cabelo dela é
mais cacheadinho, mais crespo,

é um tipo de cabelo
mais difícil de recortar,

mas existe uma técnica muito boa
para isso e a gente vai utilizar.

Vamos apagar isso aqui,
que a gente não quer usar,

vamos voltar na nossa
modelo, dar um ctrl+z,

e a gente vai selecionar toda
a modelo, o contorno da modelo.

Cliquei aqui em subject,

deixa eu tirar essa barra contextual
daqui e jogar aqui para baixo.

Se eu clicar aqui nos três botões
e vir aqui em "pin bar position",

ele fixa essa barra
aqui embaixo.

Ok, com a camada selecionada,

eu vou...

Opa, está bloqueado aqui.

Com a camada selecionada...

E, detalhe, eu posso
selecionar ela dessa forma,

deixa eu tirar aqui, eu posso
vir aqui com o meu laço

e vir desenhando em volta,

é uma maneira um pouco
mais, digamos, grosseira,

porque você tem que ser muito,
muito bom para vir contornando.

Você pode usar essa
ferramenta aqui,

que é a ferramenta
"polygonal lasso tool",

só que ela não faz curva,
então não é útil,

mas também é uma ferramenta
de seleção bem bacana.

Tirei a seleção, posso utilizar
a caneta para selecionar.

Está vendo que ele está
criando uma shape layer,

mas, se eu tirar, aqui,
o fio, clicar nele e vir em

"make selection",
ele cria uma seleção.

Só que não vou usar,
também, essa,

eu vou usar

essa ferramenta aqui,

onde, eu clicando, ele já
vai selecionar, está vendo?

É outra ferramenta.

Mas eu também não
vou utilizar essa,

eu vou ser mais esperto e vou
utilizar a nossa barra contextual.

Para eu poder manipular
aqui, eu seguro o alt.

Se eu segurar o alt, eu posso
aumentar e diminuir, fazer um zoom,

se eu segurar o espaço, eu posso
trazer para todos os lados.

Ok, então vamos...

Deixar eu tirar, apagar
arrastando para a lixeira,

este elemento
que ficou aqui.

Vou selecionar toda a ferramenta
e aqui, bem no menu suspenso,

tem escrito "select and mask",

eu vou clicar e, aí,
vai abrir outra janela

e é nessa janela que a gente vai
fazer o refinamento do corte.

O select and mask é
a maneira mais adequada

de você refinar
o recorte de um fundo

preservando o cabelo
da modelo.

Então, vamos fazer
o seguinte:

primeira coisa para a gente
conseguir visualizar o fundo,

aqui em "view", mudar esse modo
de visualização para vermelho.

Perceba que a gente consegue
já enxergar os brancos aqui,

bem de leve, mas
a gente consegue.

E, aqui, a gente consegue
aumentar a opacidade ou diminuir.

E, agora, a gente vai
iniciar o processo

de descontaminação
do cabelo dela,

mas a gente precisa ter
uma boa visualização

e, para isso, a gente vai dar
um zoom no cabelo dela.

Basta clicar na lupinha, vir,
começar por essa parte aqui,

que está bem contaminada,
e essa ferramenta aqui,

chamada "refine edge brush tool",

eu vou utilizar para
pintar essa parte.

Posso até aumentar
um pouquinho aqui,

funciona muito parecido
com o pincel,

e é só, com o mouse clicado,
vir passando no cabelo dela.

Perceba como é muito mais
fácil, o branco está sumindo.

Olha, isso tudo é o fundo
que a gente está tirando.

Continua, com a barra de espaço,
a gente vai posicionando a modelo.

E vamos preenchendo,
tirando todo esse branco

que está sobrando.

E a gente pode fazer
isso aqui também.

Não sei se aqui vai ser
a melhor situação.

Ok, já preenchemos.

Aí, voltamos aqui para o nosso
campo de propriedades,

onde a gente vai definir
algumas coisas.

Primeira coisa: aqui
eu posso atenuar

o preenchimento
da pintura do branco,

mas como está perfeito,
eu não preciso usar.

Aqui você dá o contraste,
aqui você consegue, também,

deixar mais esfumaçado para que
a borda não fique tão grosseira.

Mas o mais importante
nesse espaço é aqui,

porque aqui, quando
a gente habilita,

a gente consegue, de alguma
forma, ainda, melhorar.

O que estava pretinho, a gente
deixa um pouco mais pretinho.

Só que, aqui, a gente
não quer tudo isso,

a gente pode trazer
mais ou menos para

70%,

pode ser 50% também.

Acho que aqui está
bom, perfeito, ok.

Percebe que,
se eu vier aqui

e utilizar o gradiente

e aquela mesma estrutura, só
vou usar aqui para exemplificar.

Percebe que o cabelo
está um pouco melhor já,

mas dá para melhorar
ainda mais.

Vamos aumentar o zoom e vamos
utilizar uma ferramenta bem especial

chamada "burn tool".

Ela vai pegar esse preto
do cabelo da modelo,

eu vou até transformar
em um objeto inteligente,

clicando com o botão direito e vindo
em "convert to smart object".

Perfeito.

Provavelmente a burn tool
vai pedir que o rasterize,

clico em cima, dou ok,

e os fios que ainda estão
um pouquinho branco,

eles vão escurecer.

O objetivo dele é
escurecer elementos.

Então, se eu vier
clicando, vier clicando,

vou passando que nem
eu passei o pincel.

É muito sutil, mas para cabelos
assim é fundamental.

Aqui exclui.

Posso aumentar também,
caso seja necessário.

Olha, não sei se consegue
perceber, bem aqui, escurecendo.

Olha, se der ctrl+z
faz diferença.

Perfeito.

Vamos continuar
com o preenchimento.

Isso é um pouco
de perfeccionismo?

Sim, mas, na arte, a gente
tem que ser assim

para atingir um nível
mais profissional.

Perfeito, eu já tenho a minha
modelo do jeito que eu quero.

Aí, eu vou pegar ela aqui e arrastar
para aba onde tem a minha capa.

Vou segurar o shift e vou pegar
no cantinho e vou diminuir,

clicar e arrastar para ela ficar
do tamanho que eu quero.

E shift, porque, se eu não clicar
em shift, eu estico ela, olha.

Se eu seguro o shift,
ela diminui.

Perfeito.

E já temos a nossa modelo.

E, agora, vamos continuar
com o processo de ambientação,

só que, dessa vez, a gente
vai usar a caneta para criar

uma linha na diagonal.

Essa linha, eu vou
manter só o traçado,

vou abrir aqui, quando eu
abro a janelinha de cor,

automaticamente
habilita o conta gotas,

e eu quero essa
cor aqui, perfeito.

E aí, eu vou aumentar.

Vou aumentar mais ou menos
para esse tamanho aqui.

Cria um shape.

Vou trazer para cá que é
melhor para visualizar.

O shape está aqui, mas eu preciso
arredondar os cantos dele,

como eu faço?

Com a caneta habilitada, eu
venho aqui na opção de traçado

e, aqui em caps, eu
arredondo os cantos.

Arredondou, perfeito.

Eu vou jogar
aqui atrás dela.

Ela está, na hierarquia, em cima,
eu jogo para baixo, fica embaixo.

Segurando o alt, eu clico
e arrasto, eu tenho mais uma.

Segurando o alt, eu clico
e arrasto e tenho mais uma.

Tenho três shapes aqui.

Ok, vou posicionar
melhorzinho aqui, gostei.

Vamos renomear para manter
a organização das nossas camadas.

Vou chamar
de "shape 1", já está,

"shape 2"

e "shape 3".

Não deu espaço aqui.

Opa.

Clica em cima, um espacinho
para ficar igual aos outros.

Clico com o botão
direito em cima

e vamos usar o violeta
para os shapes.

Vou selecionar os três e criar
um grupo dentro de uma pasta,

e eu vou chamar de "shapes".

Perfeito.

Para criar esse grupo, é só,
com as camadas selecionadas,

clicar nessa pastinha.

Perfeito.

Por enquanto não vou
utilizar, vou bloquear

e, aqui, eu vou dar
o nome de "modelo".

Opa!

"Modelo".

Com o botão direito, magenta

e os shapes eram violeta,
continuam sendo violeta.

Perfeito.

Já temos esse primeiro ponto,
agora, vamos fazer o seguinte:

vamos lá na nossa pastinha
e vamos trazer

esta imagem que representa
algumas gotas.

A gente quer dar sensação
de refrescância para esse...

para essa capa.

Queremos vender
o nosso suco de laranja.

Então, vamos trazer para baixo
e, aqui, com ela selecionada...

Opa, sem querer, eu trouxe
para dentro do grupo dos shapes,

vamos tirar e vamos
trazer aqui para baixo.

Oh meu Deus, de novo,
aqui para baixo.

Pronto,

Tira daqui e joga
aqui para cima.

Perfeito, agora está
do lado de fora.

Vamos colocar azul, blue,

para simbolizar essas gotículas,
simbolizar refrescância.

E, aqui, abrir com ela selecionada,
habilitou o modo de mesclagem,

então, se eu for passando por eles,
olha o que vai acontecendo,

vai tendo uma alteração,
uma leve alteração

de como ele se mescla
com o fundo.

E aí, tem vários, vários.

Eu estou em dúvida
se eu utilizo "linear burn"

ou "multiply", "linear burn"
ou "multiply".

Acho que eu vou
usar o "multiply".

Só que percebe que aqui,
olha, não ficou legal,

então o que eu vou fazer?

Eu vou, primeiro, reduzir
um pouco a opacidade

para não ficar muito forte,
assim, essa imagem aqui,

e, aqui, eu vou
pegar a borracha...

Peguei a borracha e vou colocar,
mais ou menos, deixa eu ver.

Como ele está
em objeto inteligente,

precisamos rasterizar
para apagar a borracha.

Aí, pronto, habilitou,
o que eu fiz?

Eu cliquei aqui e, como ele
está em objeto inteligente,

a gente não consegue
editar a camada,

então eu posso vir aqui com o botão
direito e rasterizar a layer.

Aqui em borracha, eu vou
pegar essa mais soft.

A diferença é a seguinte:
se eu clicar aqui,

ele apaga assim,
se eu pegar o soft,

ele apaga de uma maneira
mais sutil, mais soft mesmo.

Então, eu posso, ainda,
reduzir essa suavidade,

baixando, aqui, o flow
cada vez menos,

está vendo, quase
não dá para ver.

Eu vou usar mais ou menos
em 50 e pouco.

E aí, aos pouquinhos, eu vou
dando uma leve apagada assim,

para não ficar muito na cara
assim, é quase uma textura.

Perfeito, eu vou tirar
um pouquinho, ok.

E vou fazer também do outro lado,
aí como eu faço do outro lado?

Alt para duplicar,
arrasto e, aí, viro.

Ok, só que, aqui, a gente vai
precisar pegar a borracha

para continuar melhorando,
olha, pronto, ok.

Já tem uma textura que dá
um pouco de profundidade

para o nosso background.

Ok, fechou aqui, vamos
organizar a nossa camada.

Vou colocar esse índigo aqui.

Perfeito.

Selecionar as duas,

bloquear e colocar
dentro de um grupo,

e vou utilizar como "textura".

E, como eu não
vou usar, bloquear.

Perfeito, agora, a gente precisa
continuar compondo nossa imagem

e, para isso, vamos até a nossa
pasta e vamos trazer essa laranja,

essa aqui não, vamos
trazer essa aqui,

porque aqui, como não tem
muita complexidade nos cantos,

por exemplo, eu posso cortar
da maneira mais prática,

que é, com a barra contextual aqui,
só clicar em remover background,

"remove background".

Já cortou.

E, se eu clicar aqui em cima
dessa borda, com o botão direito,

ele vai abrir esta janelinha

e aí, eu vou mudar o lado
clicando em "flip horizontal".

Vou jogar aqui para o ladinho,
só que para trás da modelo.

Perfeito, pronto, já temos mais
um elemento em nossa página.

Vamos arrastar
o próximo, esse aqui,

vamos fazer a mesma coisa,
habilitar, remover o background

e diminuir um pouco.

E vamos colocar atrás
da nossa modelo.

Perfeito.

E vamos fazer a mesma
coisa com esses aqui.

Só que esses aqui, eu não quero
usar todos ao mesmo tempo,

então vou usar aquela
ferramenta de lasso tool

que apresentei para você e vou
recortar só o que eu quero.

Eu quero essa aqui primeiro,
então dou ctrl+c, ctrl+v,

deixo ela separadinho aqui,
e também quero essa aqui,

que eu vou cortar bem
na bordinha aqui.

Ctrl+c, ctrl+v, vou deixar
ela separadinha aqui.

E acho que eu vou pegar
essa aqui também.

Ctrl+c, ctrl+v.

Aí, isso aqui, eu posso deletar,
não quero, não quero mais.

Essa aqui, eu vou chamar de

"Laranja 1",

jogo para cima,

"Laranja 2",

jogo para cima,

e "Laranja"...

Opa, "Laranja 3".

Perfeito.

Vamos começar
com essa laranja aqui.

Essa laranja está
um pouco flutuante,

parece que ela
está jogada no ar,

então vamos dar
uma sensação de movimento,

como se ela estivesse
orbitando em torno da modelo.

Para isso, eu clico em cima
dela, venho em "filter",

Vamos habilitar
o "convert to smart object"

para deixar
em objeto inteligente,

porque, quando eu uso efeito, se
não estiver em objeto inteligente,

eu não consigo, depois,
editar o efeito.

Então, eu vou deixar ela aqui
em "filter", "blur", "motion blur".

Perceba, aqui,
o ângulo está para cá,

é como se ela estivesse
orbitando para o lado,

mas ela faz esse movimento, tem
um leve movimento em diagonal.

Então, eu faço assim, olha,

e, aqui, eu posso aumentar
para cá, para cá,

e até sumir.

Mas eu vou deixar bem
sutil assim, deixa eu ver.

Que é só um detalhe
na nossa capa.

Perfeito, ok.

Essa aqui, eu vou diminuir,
empurrar mais para o cantinho.

Perfeito.

Nessa aqui, eu vou fazer
a mesma coisa que essa aqui,

mas perceba que a diagonal
dela está para esse lado,

a gente tem que ter essa
noção de movimento

para poder chegar
mais próximo do real,

para ter uma sensação
de movimento mais próxima do real.

Então, eu vou em "filter"
novamente, "blur", "motion blur",

vou mudar a orientação
e vou colocar, aqui, 13,

acho que 13 está
bom, deixa eu ver.

Acho que até menos, 6.

6, bem leve.

São as nossas laranjas
orbitando sobre a nossa capa.

Aqui, a diagonal está dessa
forma, vamos em "filter", "blur",

"motion blur",

e mudar o ângulo, e ok.

Eu posso fazer aqui também,
mas aqui, por exemplo,

eu posso deixar bem de leve,
como ela está no fundo,

e, quando a gente visualiza a imagem
aqui primeiro, o fundo embaça,

eu posso vir em "filter",
"blur" e "gaussian blur".

Ele é quase a mesma coisa,

só que ele não dá
a sensação de movimento,

ele só dá a sensação
de embaçamento.

Então, se eu vier para cá assim,
ele vai alterar, deixa eu ver.

Vou converter para objeto
inteligente e repetir o processo.

"Blur", "gaussian blur".

Bem de leve.

Esse eu vou deixar em 1,1.

Nossa, deu 11.

1,1.

Ok.

O nosso foco principal,
nessa capa, é a modelo,

por isso que a gente
embaça o fundo.

Então, aqui, a gente já
tem uma composição,

mas, para dar profundidade, a gente
precisa jogar algumas sombras.

Antes disso, vamos organizar.

Essa laranja aqui e essa laranja,
eu posso juntar todas as laranjas,

aqui, em um grupo só.

Crio a pasta.

Red, red já foi, green.

Não vamos esquecer,
já habilitou aqui a green.

Não vamos esquecer de mudar
o nome e colocar "Laranjas".

Perfeito.

E, na modelo, vamos clicar duas
vezes aqui e habilitar uma sombra.

Só que eu posso, também, vir
por aqui, "fx", "drop shadow",

ele vai abrir a mesma janela.

Então, aqui, eu posso ter
controle da sombra atrás dela.

Eu vou deixar bem escura,
vou mudar o ângulo

para conseguir...

A distância, para você
conseguir visualizar.

Se eu fizesse para cá,
a distância irá para cá.

Se eu fizer para cima, para baixo,
você consegue alterar tudo isso.

Não preciso dessa
distância toda.

Esse spread para deixar
a camada mais densa,

não quero, porque é
uma sombra.

E, aqui, eu posso
aumentar, esticar ela,

ao ponto de ela começar a se tornar
cada vez mais transparente.

Vou diminuir um pouquinho
e vou diminuir a opacidade,

porque eu não quero
que fique muito intenso,

eu quero apenas uma sensação leve
de que ela está descolada do fundo.

Ok, fiz isso, fiz isso também
nessa laranja, clicando duas vezes,

"drop shadow", posso até
diminuir um pouco mais,

aumentar um pouquinho
a opacidade.

Ok, posso fazer isso
nessa também.

E aí, ir alterando, "size",
"multiply", perfeito.

E posso fazer isso em todas,

"drop shadow",

ok.

Aqui...

"Drop shadow", agora,
eu vou por aqui, dessa vez,

"drop shadow", ok.

Deixa ver se está tudo certo.

Ok, aqui, eu não
tenho sombra,

mas se eu quisesse otimizar
o processo e fazer isso em tudo,

eu posso vir aqui em "copiar
o estilo da layer", vir nessa

e cadê, cadê, cadê, cadê,
cadê, cadê, cadê...

colar o estilo da layer.

Não estou visualizando.

Gente, sumiu para mim.

"Paste layer style",
pronto, achei.

Preciso dar uma aumentadinha
no meu grau, pelo jeito.

Fechou.

Olha como estão bem otimizadas,
bem definidas, as nossas camadas.

Aqui vai vir, provavelmente,
um botão de site.

Botão, aqui.

Aqui, vai vir um texto, que é
a marca, "Orange", "Orang".

E, aqui, eu vou colocar
um outro texto,

que é a especificação
das coisas do site.

Posso colocar, sei lá, já está
aqui o texto, só preciso mudar.

Aqui está muito grande,
então vou mudar para 16.

Opa, tem que selecionar, 16.

Enfim, fazer isso em tudo.

Como eu não quero fazer
em tudo, eu vou diminuir para 16,

não essa, essa aqui, 16.

E, a partir daqui, eu vou
escrever tudo que eu quero,

criar vários parágrafos.

Está ok, vou deixar aqui.

Posso até aumentar.

Por que eu estou fazendo
assim, dessa forma?

Primeiro, porque, aí, já sabemos
como trabalhar com tipografia

e, segundo, porque, essa parte,
a gente vai deixar sem,

porque a gente vai introduzir
os textos e os botões no Figma,

que é onde a gente vai
prototipar a o nosso site.

Então, o nosso site,
praticamente, está pronto.

E se eu quiser continuar
refinando, eu posso.

Eu posso, por exemplo, colocar
um sólido, aqui, de vermelho,

por exemplo, e criar
umas, sei lá, uma...

Uma textura que mude
a tonalidade da cor.

Mas como a gente
já fez tudo bonitinho

em uma unidade visual com a nossa
paleta de cores, ele já está pronto.

Então, agora, é só a gente
salvar no arquivo aberto,

já está aqui, olha.

Então, se já está aqui,
é só o ctrl+s, ok,

e está lá para a gente poder
utilizar no nosso site.

Então, essa foi
uma forma básica

de criar uma ambientação
no Photoshop utilizando recortes,

utilizando o shape layer, gradiente,
ferramentas de seleção, enfim,

aproveitando as ferramentas
que o Photoshop nos proporciona

para criar uma capa profissional
para a nossa interface digital.