Transcrições
1. Apresentação: Quer saber como criei esta página da web com animação
flutuante suave. Fique comigo
aqui nesta aula, pois ela
revelará todos os segredos para
usar gradientes e melhorar seu jogo
de demissão seu jogo
de demissão Olá, sou ShivaGiGraphics e artista de
web design que trabalha com
diferentes projetos, seja
trabalho de cliente, site personalizado,
modelos ou pacotes gráficos
, modelos ou pacotes gráficos Então, com minha experiência nos últimos sete anos
no setor, eu só quero somar
esses ajustes e detalhes com você para tornar sua
jornada de design muito melhor e divertida Se você é web designer, designer gráfico, trabalha para uma empresa ou cria algo
para sua própria marca, ou diz que é apenas um simples estudante de
design aprendendo e aprimorando suas
habilidades para algo novo, então este curso é para você Essa classe é totalmente
fácil de usar. Portanto, se você está apenas começando, ou mesmo se é a
primeira vez que abre o FiGMA, você pode facilmente me
acompanhar e passo a passo para atingir
esse nível de design profissional Esta aula é
dividida em diferentes segmentos, cada um com seu miniprojeto
para praticar suas habilidades
e, finalmente, vocês criarão juntos
nosso projeto de classe. Isso é criar um fundo de
gradiente animado suave e
flutuante que você pode adicionar a qualquer um dos seus
projetos e apimentar seu Então, vamos dar uma olhada
rápida que está dentro dessa aula, começando com o
básico do Figma, as regras, os painéis, tudo E então vamos
criar uma bola
de três D sozinha, apenas no
Figma, sem plug-ins E então nos divertiremos
com a diversão de
fazer uma malha radiante Além disso, você aprenderá uma maneira preguiçosa criar uma
malha radiante como bônus E então, nosso último
dia está prestes a deixar
a malha flutuante animada
radiante, de forma muito perfeita. Parece divertido. Então, o
que você está esperando? Vamos passar para a próxima
lição e começar.
2. Práticas básicas no Figma: Ou começamos usando
gradientes e outras ferramentas,
dividindo nossos designs e dividindo nossos designs e mergulhando profundamente na construção de
nosso projeto de classe, vamos dar uma olhada rápida em
quais são os fundamentos do Figma Então, como estou na
tela agora, estou abrindo esse
novo documento. Você pode simplesmente renomeá-lo de acordo com sua escolha e,
como estou dizendo, gradientes, você pode
nomeá-lo da mesma maneira Então, agora aqui está esse espaço em
branco à nossa frente. Esse é o nosso espaço de trabalho. Tudo o que
criaremos estará aqui
para facilitar o acesso. No lado direito, temos nosso painel de design e painel de
protótipos Então, onde podemos simplesmente criar qualquer design
que
criamos, podemos simplesmente aprimorar suas propriedades de design, como ajustar a cor,
adicionar efeitos, redimensioná-lo e assim por diante,
usando o painel de design e torná-lo interativo
usando o painel de protótipos Muitos iniciantes ou iniciantes
se sentem confusos nessa etapa. Ou seja, se você é o único ou está começando ou visitando o trabalho de campo
pela primeira vez, é como fazer com que essa borda
branca básica funcione, por
exemplo, como definir as dimensões
corretas Aqui na
parte inferior, você pode ver, há uma barra de ferramentas e a primeira é a ferramenta de
seleção, curta, mas nós Como o nome sugere, é para a seleção. Próximo a ele está o quadro dois, atalho F. Então você pode
simplesmente dizer que é quadro, é prancheta, é uma página Então essa é a página que
você estava procurando. Na linguagem de design,
em relação ao FEGMA, dizemos quadro ou seleção de quadros Então, ao clicar com o botão
esquerdo e ver
no painel de design à direita, aqui estão mais algumas opções
daqui para frente. Esses são os designs predefinidos
que você pode
escolher rapidamente e
começar com o projeto Além disso, você pode simplesmente clicar em segurar e arrastar em
qualquer lugar da tela, e isso criará
seu espaço de trabalho, seu quadro aleatório para começar Mas, por enquanto, eu recomendo que
você comece com qualquer uma
das predefinições para que
primeiro ela economize seu tempo, e ela também foi projetada livremente para que você
não precise calcular as dimensões exatas
aqui para você Então, agora vamos passar para a próxima. Lição. Começamos nosso exercício de
aquecimento, que nos ajudará a aprender física
radiante de uma maneira melhor
3. Miniprojeto 1: bola de cinza em degradê 3D: Eu já
escolhi a mesa de moldura para trabalhar
em nosso projeto. Então, agora vamos começar nossa
primeira forma básica, círculo. Então, em seguida, selecione esse
Ellipso no atalho O
e, em seguida, clique na tela Segure a tecla Shift e arraste para
que isso faça um círculo. Agora, gostaria de adicionar um
plano de fundo à nossa arte. Então, para isso, vamos adicionar um
retângulo ao nosso quadro. Certifique-se de que seja grande
o suficiente para cobrir toda a moldura e,
a partir do painel de camadas, veja, ambas não estão em uma moldura. Vamos juntá-los para que
funcionem de uma maneira melhor. Caso contrário, você
receberá apenas uma tela branca ao visualizar
o quadro. Você pode recolorir os dois. Mas, para este exercício de aquecimento,
vou usar a escala de cinza. Portanto, defina seu
plano de fundo para o fundo do Sigma que você está
tendo e tem um fundo escuro, ou você pode escolher qualquer cor escura e o objeto ficará pouco claro Então, agora, selecionando nossa parede. Vamos começar a construí-lo
no estilo TD. Como? Selecione-o e, em seguida, no painel de
design do filme, vamos clicar no
ícone ad plus. E então isso abre
uma caixa de diálogo, escolha o
preenchimento de gradiente na parte superior e defina-o como radiante Agora vamos tornar esse gradiente
denso com variação de cores ou posso dizer tons de
cinza dentro dele Usando muitos tons de cinza para
enriquecer o gradiente. Agora vamos segurar esse ponto
central e arrastá-lo para algum lugar na parte superior e o outro
na parte inferior aqui. Você pode simplesmente continuar adicionando mais e mais tons de sua escolha até
se sentir satisfeito. Você pode perguntar que eu não consigo
ver ninguém feliz aqui e
com tantas cores escuras, mas não aparecer. Qual é o motivo? Então, talvez por engano, por padrão, esse
erro ocorra em seu sistema e também
em seu programa. Então, se for apenas
do painel de design
dessa seção de preenchimento, há algum outro preenchimento
nesse objeto também? Veja, aqui está. Então, se estiver lá, basta
excluir essa cor e pronto. Veja como todas as
suas tonalidades
entraram em ação lindamente e
exiba uma bela esfera de
três D criada
por você em apenas um minuto Você pode perguntar por que estávamos
adicionando tantos tons? Então, como você pode ver, anteriormente, era um círculo plano, e cada vez mais
adicionamos as sombras e agora parece completamente
diferente como uma esfera de três D. Isso não é divertido? Agora vamos continuar a
torná-lo mais realista. Como, adicionando sombra a ele. Para isso, basta adicionar uma nova elipse e colocá-la
na parte inferior da esfera, recolorindo-a para preto e entrando em efeito na seção do painel de design e apenas adicionar
um efeito de desfoque de camada a ela,
defina-a como uniforme e você terá
uma intensidade de acordo com você uma intensidade Aqui terminamos nossa
primeira minitarefa de aquecimento de criar três esferas
D no Figma Espero que esta lição tenha ajudado você a
entender a
figma de uma maneira melhor E você
praticou bem todas as ferramentas
essenciais, painéis e configurações de design que também
usaremos
nas próximas etapas. Então, vamos
para a próxima lição. Trata-se de criar uma malha de
gradiente ou o gradiente de malha
na Figma
4. Como criar malha de gradiente passo a passo: Novamente, estou de volta com uma nova
moldura nas mesmas dimensões, do tamanho do texto fora da tela. Então, agora, para criar o gradiente de malha
neste primeiro método, vou usar o Tento
para criar formas aleatórias
dentro desse quadro Se você tem alguma
experiência em usar ferramentas de PDF anteriormente em
qualquer design ou aqui, seja Photoshop,
Illustrator ou qualquer outra coisa, boa o suficiente ou então, como dica, acrescentarei que basta clicar em
qualquer lugar da tela para
começar a construir sua forma
e, se quiser
criar uma curva ou então, como dica, gostaria de acrescentar, clique em qualquer lugar da Para começar a construir sua forma. E então, se você quiser
criar uma curva, clique e segure sua
caneta nesse ponto
e, em seguida, basta arrastá-la. Isso fará uma curva do ângulo
desejado, do comprimento
desejado. Então, para fechar essa forma, basta clicar no ponto
inicial novamente e isso fechará a forma. Eu tenho uma forma totalmente fechada na
qual podemos preencher com cores. Então, na pilha de design, exclua o traçado e adicione
as cores a essa forma Estou adicionando um dos tons de
cinza e agora
continuo adicionando mais, como formas
abstratas
em qualquer lugar da moldura, de qualquer tamanho. Lembre-se de que, depois
de terminar de usar uma forma, selecione qualquer outra camada ou
em algum lugar fora da moldura. Basta trocar sua
ferramenta Caneta para a ferramenta de seleção. Por que estamos fazendo
isso porque isso está criando uma quebra
no sistema, e a próxima forma
que você criará será novamente como uma nova camada
independente. Ou então, se você começar a criar formas
diferentes
depois de escolher a ferramenta Caneta, tudo isso estará em uma única camada,
o que eu não quero. Espero que você tenha se
livrado desse ponto. E agora você pode desenhar qualquer
tipo de forma que quiser. Qualquer resumo funcionará. Certifique-se de desenhar pelo
menos duas formas
na tela ou mais, então é melhor
porque mais formas,
mais variações de cores para explorar e desenhar
qualquer forma abstrata Depois de terminar, vamos dar o próximo passo antes de
adicionar cores à nossa forma. Aqui eu já preparei essa
paleta de cores para você usar Você pode obtê-lo em um painel de
projetos e recursos, ou pode simplesmente adicionar
essas cores aleatoriamente a qualquer forma ou qualquer coisa, qualquer cor de sua escolha Além disso, tenho uma folha de dicas de gradiente de malha pronta para você
na guia de recursos, que você possa usá-la para
que você possa usá-la sempre que quiser
criar esses
gradientes Agora é a hora do jogo. Selecione rapidamente toda
a camada de forma
do painel, como eu faço,
mantendo pressionada a tecla Shift e tocando
na primeira e na
última , ou arraste-a e
selecione-a na área de trabalho Lembre-se de que não
selecione a moldura em si, caso contrário poderá acontecer algum
erro Então, basta selecionar a camada de
forma em conjunto, não a moldura e,
no painel de design, ir para a seção de seleção de efeitos
e adicionar o efeito de
desfoque de camada a ela Para mim. 202 50 parece
ser bom o suficiente. Você pode escolher a intensidade de sua escolha, aqui está
o que você criou. Você mescla um gradiente. Não é legal? Mas aqui está a aflição. Se você quiser ver de perto
esse gradiente de malha, pode dizer que ele está perdendo
um pouco do brilho,
alguns dos destaques, como o gradiente Po que
eu vejo em outro site ou em algum lugar.
Então, como adicioná-los? Basta dar o próximo
passo à frente e criar um círculo quadrado ou um pequeno círculo, pequeno escudo na tela e adicionar um efeito de
desfoque de camada a ele. Estou usando um escudeiro e
adicionando o desfoque de
100% de intensidade e
mudo sua cor para algum lugar aqui da
tela, apenas escurecendo e alterando sua cor
em algum lugar da E apenas deixe tudo escuro
enquanto eu estou fazendo isso. Agora, defina a mistura de camadas desse quadrado específico para
a esquiva de cores e
veja a diferença Como obtivemos o
ponto brilhante do nosso gradiente. Você pode jogar arrastar, arrastar inteiro e arrastar, opção
inteira e arrastar
para os usuários de Mac, e isso apenas adicionará
vários pontos brilhantes. Você pode redimensioná-lo e mudar
o local e contornar o problema, brincar com ele e ver como
você criou um gradiente
muito melhor de forma diferente gradiente
muito melhor Você também pode alterar a cor
da luz fina da
mesma forma que fizemos
pela primeira vez e depois tornar a cor um pouco
mais escura dessa tonalidade Veja como
coisas bonitas surgem. Agora, outra coisa é o
brilho dos sites. Então, para selecionar todos
os elementos dessa moldura,
até mesmo a barra, vá
para o painel de design e seguida, basta adicionar um novo efeito
que é a sombra interna Ajuste a cor para branco e brinque com as configurações de desfoque vermelho, veja como as coisas estão acontecendo Para mim, o
desfoque de intensidade de 100 é bom o suficiente, e você também pode escolher
as posições X e Y, os valores, ver como as coisas
estão mudando na tela E agora estamos prontos com
nosso papel de parede de malha gradiente, que pode ser usado como plano de
fundo para qualquer projeto Pode-se ver o
método preguiçoso de fazer
essa malha de gradiente
passar para a próxima lição
5. Degradê de malha: método preguiçoso: Olá, agora com a nova moldura, vamos adicionar formas diferentes
da ferramenta de formas. Você pode usar retângulo, círculo,
polígono, estrela, qualquer coisa, supe Adicione quantas
formas quiser. Pode ser de qualquer tamanho. Uma ordem aleatória, pequena,
grande, é atraente. Depois de adicionar formas, vamos adicionar cores à
nossa composição. Você pode escolher qualquer
cor aleatória que quiser. Agora selecione todas as formas
e efeitos de camada para elas. Estou tendo a
intensidade de, digamos, 200. Sim, acabamos de obter o mesmo efeito
de malha na tela atual em
apenas algumas etapas. Essa não foi fácil? Então, vamos dar um
passo à frente e começar nossa construção por último, exceto um dos belos
projetos de classe que é o gradiente para o
gradiente flutuante na próxima lição
6. Considerações finais: Espero que você tenha esse
gradiente pronto na tela
e, a essa altura, já
tenha praticado bem o uso do
Figma de uma forma amigável Então, agora vamos mudar, atualizar esse gradiente para uma peça interativa de gradiente de
malha flutuante Então, para isso, primeiro, arraste e copie o quadro
inteiro aqui. Segurando o
nome do quadro, segurando tudo no teclado e arrastando-o Isso faz uma cópia dele. Então, neste quadro, basta girar o grupo de gradientes
para 90 trilhos Novamente, duplique a moldura se como a segunda para a terceira
e, em seguida, gire novamente a
malha até 90 graus Da mesma forma, mais uma duplicata
e gire-a mais uma vez. Portanto, temos quatro pranchetas
diferentes, quatro molduras diferentes com o gradiente de malha girado
e Como se estivesse flutuando de forma independente
na página ou na placa. Agora, selecione todos os quadros, esses quatro quadros, não
o elemento interno. Basta usar a moldura nove ou usar a partir do painel de design, como
painel de camadas, selecionar a partir da moldura nin Remova a cor de preenchimento desta
forma excluída. Portanto, agora todos os quadros têm fundos
transparentes
ou nenhum plano de fundo Agora, leia e selecione toda
a arte de quatro quadros no painel
de design Você pode ver esse ícone de diamante Há uma pequena seta nela
e toque nessa seta. Aqui, no menu suspenso, selecione Criar conjunto de componentes. Agora mude para o painel de protótipos e vamos começar a adicionar o
protótipo para cada Então, basta selecionar o primeiro, clicar neste ícone de adição aqui e conectar-se
ao segundo quadro, definir as configurações para um
clique na tela Depois.
Aqui deve ser após o atraso de, digamos, o tempo de atraso de
um minissegundo, porque
não queremos muito atraso ou interrupção nessa transição
suave Defina a animação como inteligente. Defina a animação
para animação inteligente, curva para linear e duração de dois, 1.200
minissegundos . Isso
será bom o suficiente. Da mesma forma, adicione a mesma configuração de
interação, a
mesma animação aos
próximos outros quadros do terceiro ao quarto, da mesma forma. E agora coloque o ícone
de mais no quarto e
volte para o primeiro quadro. Para que isso crie um efeito flutuante de loop
contínuo. Sem interrupção,
sem pausa, as configurações serão as mesmas
para todos os quadros Então, agora estou tendo uma página da web selecionada de meus outros projetos E agora vou adicionar esse
ingrediente flutuante porque é um componente, quero arte Você pode simplesmente usar
uma página da web em
branco, uma moldura de tela em branco para
exibi-la, ou você pode simplesmente usar
qualquer um dos seus projetos se tiver uma
postagem na página da web ou qualquer coisa, e simplesmente usá-la. E definiremos
esse componente como componente de gradiente, gradiente
de malha como
plano de fundo Então, basta copiar Command C, Control C desse
quadro aqui e,
no gradiente da malha,
selecionar o quadro, selecionar seu quadro dextro
e o nome superior Em seguida, clique em
Controle ou Comando V. Então, ele é colado
aqui na página inicial Agora, clique com o botão direito do mouse e
envie você de volta
para aparecer no plano
de fundo de nossa página da web. Você também pode reduzir
a opacidade
do gradiente em 50 ou 60% E agora vamos pré-visualizá-lo. Veja como criamos um gradiente de malha animado suave e
flutuante, gradiente de malha animado suave e
flutuante, que você pode simplesmente usar
em qualquer projeto, qualquer página da web e até mesmo colorir a qualquer momento, e tudo estará
pronto para Então, para adicionar diversão
ao seu projeto. Espero que você também tenha
criado sua página da web ou parede de
fundo com uma
animação flutuante suave da malha. Eu adoraria ver
sua criatividade, seu projeto na hora do
projeto, se houver, confuso ou dúvida ou
alguma etapa, não poderia simplesmente
me acompanhar na guia de discussão, ou você pode simplesmente enviar
seu trabalho, trabalho em andamento, fazer uma
captura de tela, enviá-la
e perguntar sobre quais problemas você
está enfrentando Vou investigar isso e
ajudaremos você. Além disso, se você criou
algo a partir disso o
último é carregado da guia Projeto, e ficarei mais do que feliz em visualizá-lo e
analisá-lo para você. E também se você gostou dessa aula, achou útil, encontrou
algo, aprenda com isso. Então, por favor, me avise
por meio de seus comentários. E se você quiser aulas
ou projetos de classe
mais criativos para
aprimorar seus conjuntos de habilidades, siga-me aqui para
ver
mais aulas desse tipo.
Shivangi Dubey, Graphic Designer | Web Designer | Artist
