Transcrições
1. Apresentação: Bem-vindo ao Figma, aprendendo
uma nova sessão para aprender tudo sobre a criação fácil de três sites
animados da Carusal no Figma Esta aula vai dar água
na boca ou pode
deixar você com fome, então vamos usar a pizza como base para
todo o aprendizado aula para aprender diferentes pontos de design e conceitos
ao longo
da aula
e, por fim, você
acabará tendo um site completo de
carusais em três D, criado por você com a ideia de pizza como a
base para
o delicioso projeto. Isso não parece ótimo? Esta aula é perfeita para
você, se você está procurando mais diversão criativa e maneiras de
melhorar o uso do Figma Se você está procurando
algo para aprender conceitos e processos de
design para trabalhar em
um site animado criativo, como esta na
sua tela agora, você quer explorar
e melhorar as habilidades de interface
do usuário e muito mais. Essa aula é para você. Tudo o que você precisa
saber antes disso
é a navegação básica e
as ferramentas para usar no Figma Como nesta aula, trabalharemos juntos em conjuntos de habilidades mais
intermediárias. Mas não se preocupe se você não
tem experiência nisso, esta aula foi projetada
de forma que você possa entender cada conceito
claramente à medida que avançamos. Você também pode mudar para minha outra classe, que
é a base da interface do usuário no figma, onde expliquei
perfeitamente os fundamentos da navegação e das ferramentas do Figma para Assim, você pode marcar a
aula como favorita e acessá-la a qualquer momento.
O que há dentro? Maneira estratégica perfeita de criar um site
causal dinâmico em três D. Você pode incorporar esse conceito de design
criativo para exibir seus produtos
no site ou projetos em seu portfólio ou exibir
um cardápio de restaurante. Há muitas
oportunidades abertas
para você desenvolver suas
habilidades criativas. Vamos começar.
2. Inspire-se: Antes de começarmos a projetar o Figma, você deve ter seus
recursos prontos para serem usados e rápidos para ajudar Aqui estão algumas dicas rápidas
a serem seguidas para economizar muito tempo rolando e pesquisando aqui e ali
sobre seus recursos A primeira é: Seja claro sobre
o que você está procurando. Aqui para este projeto,
quero uma sessão de fotos de
produto atraente, brilhante e bem iluminada Talvez você precise de outras
sessões de fotos. A próxima coisa importante
é a qualidade. Você precisa de
algo de alta qualidade, não apenas uma imagem do Google
ou apenas um tamanho de miniatura Meus sites mais prontos para
encontrar imagens perfeitas para os projetos são
pixels freebik A melhor parte deste site são fotos
de alta qualidade com licença livre de
direitos autorais e
também gratuitas para download. Se você quiser comprar
uma premium, você pode fazer isso e encontrar algumas fotos muito
boas para você. Espero que você tenha baixado todas as
suas imagens que você possa achar interessantes e perfeitas para o seu projeto agora mesmo. Agora, a próxima coisa na fila é prepará-los
para o propósito. Eu acho que você deve
tê-los baixado e, com o plano de fundo, você tem em segundo plano, algo assim ou aquilo. Como se livrar disso? Você pode pensar que
precisa ir ao Photoshop e limpar
todos os detalhes, selecioná-los e
excluí-los Ou faça uma boa edição. Mas e se eu disser que
você pode fazer tudo isso sozinho apenas na figma Sim, por meio de um plugin gratuito. Mas vou informá-lo sobre dois processos que,
pessoalmente, considero amigáveis e fáceis de usar quando se
trata de editar ou remover os planos de fundo uma fotografia para nosso projeto Um, remova o fundo. Este lado é totalmente gratuito para uma experiência fácil
de usar, basta
prepará-lo com um transparente ou nós e dizer sem fundo na imagem ou no produto. Isso levará um momento. Tudo o que você precisa fazer
é arrastar e soltar seu arquivo
na lateral aqui
em qualquer lugar da tela,
como está escrito, e
esperar alguns instantes até
concluir o processo. E quando estiver pronto, você pode simplesmente
baixá-lo para o seu dispositivo. Agora também é hora
do processo. Ou seja, na figma. Para isso, abra seu arquivo Figma, vá até a barra de plug-ins e aqui eu tenho ícones oito removedores de fundo como o plugin que
vamos usar agora Mas antes disso, basta
soltar com o dragão a imagem que você
deseja editar no Figma Em qualquer lugar no espaço de trabalho como este aqui com sua
imagem selecionada, você pode simplesmente ir para Plugin, selecioná-lo ou simplesmente
pesquisar o plug-in se
você não o tiver aqui e selecionar o plug-in
e escolher Executar I Levará alguns minutos para executar o processo de remoção do
fundo e, uma vez feito isso, ver se o que temos é apenas
o produto em foco e está completamente
limpo por todos os lados. Espero que você tenha entendido o
processo e
o use para preparar imagens ou recursos para seu projeto. Agora é hora de começar a
criar a página da web.
3. Projetando a página web a: Agora vamos começar com o
design da página da web, com a moldura da área de trabalho
aberta na área de trabalho Começaremos com o nome e o logotipo do
site. Vou apenas selecionar
um ícone como logotipo. Para isso, usarei rapidamente outro plugue que
é ícone ou biblioteca Procure por ele e ache isso muito bom e
interessante de usar. Basta tocar nele e importar seu ícone no arquivo de design. Agora, vamos arrastá-lo e redimensioná-lo um pouco para corresponder ao tamanho do logotipo que eu
quero colocar
no painel de navegação acima
da página da web Então, isso faz com que os traços
fiquem mais ousados, como você pode ver. Para isso, ajuste os
traços do painel de design. Basta alterar o
peso do traçado para um número menor pode ser dois ou quatro,
o que seria melhor. Agora basta selecionar a ferramenta de texto, arrastar e criar uma caixa de texto para que possamos escrever o nome
da marca aqui como o logotipo. Ele estará
ao lado do nosso logotipo aqui e redimensionará o tamanho da fonte para corresponder ao tamanho
desejado e digite o nome
da sua marca aqui Você também pode explorar a
fonte que
deseja usar e tocar
nas laterais. Certifique-se de que seu logotipo e nome estejam dentro
da moldura extra
e, caso contrário, você pode simplesmente
arrastá-la para dentro da moldura usando o painel de
camadas, como eu estou fazendo. Uma vez feito isso, agora vamos criar o
painel de navegação do site. Agora selecione o texto, mantenha pressionada tecla Alt e arraste-a para
fazer uma cópia duplicada Reajuste a fonte e o tamanho. Renomeie-a como guias secundárias de
navegação, repita o mesmo e crie links
semelhantes no Agora eu gostaria de criar um botão de CTA destacado
no lado direito aqui Para isso, eu apenas uso o atalho da ferramenta
retângulo, criando o retângulo
desse tamanho específico e
recolorindo-o de desse tamanho específico e acordo com a Eu só esqueci de dizer
mais uma reviravolta na nossa turma. Ou seja,
usaremos apenas as duas cores
como a cor da nossa marca neste
projeto e veremos como curiosamente, obtemos
algo criativo usando
apenas as duas cores da marca Agora, basta selecionar a cor
específica da marca que você deseja usar e alterar o
arredondamento para 40 pixels Isso o tornará um botão retangular de
borda redonda. Novamente, no painel de design
aqui nos efeitos, clique no ícone Adicionar. Isso apenas adiciona um
efeito de sombra projetada ao nosso botão. Acho que é perfeito. Não é
necessário editar as configurações. Agora, duplique o texto novamente. Clique com o botão direito do mouse e escolha
trazer para frente e recolora-o para branco para
que fique visível Agora você pode agrupá-los para que
funcionem juntos como um botão. E renomeie-o na camada como estou fazendo aqui
como botão Agora desenhando a imagem do herói. Para isso, usaremos
um retângulo e, novamente,
criaremos um RoundageRCtangle, mas maior desta
vez Esta é a nossa base completa de banners e recolora-a de acordo com
a cor da marca Mas ao lado dela está a ferramenta de círculo ou atalho
O para criar uma forma de círculo, tamanho
bastante grande e ajustar
o posicionamento na tela dessa forma Arraste e coloque sua imagem na moldura e você pode redimensionar ou soltar suas imagens a qualquer momento para torná-las mais
adequadas à página Eu quero sombrear o
efeito da imagem. Para isso, vamos usar
novamente a ferramenta de círculo e, a partir dos efeitos
no painel de design
aqui no efeito, basta adicionar o desfoque da camada a ele Acho que 60% é o suficiente. Você pode ajustá-la do seu jeito e,
apenas a partir do painel de camadas, reajustar os posicionamentos das camadas para que fiquem
abaixo da imagem R Agora, adicione
rapidamente mais texto
como subtítulo do título Duplique e recolora o botão para usá-lo como botão de CTA para o
banner Estamos prontos com o design
básico da nossa página inicial. Agora, na próxima lição, aprenderemos como criar
o menu do site.
4. Projetando os quadros: Quando estivermos prontos com a página inicial
básica do site, agora é hora de
criar mais quadros São mais páginas do
nosso site para acessar. Vou criar um menu com
o propósito de ser uma
seção de menu no site, onde exibiremos
diferentes tipos de pizza. A primeira coisa a fazer
é duplicar
completamente esse quadro inteiro para que
tenhamos tudo pronto e você só
precisará jogar com
a seção de heróis
para modificá-la e criar algo
para exibir os detalhes do menu Agora, a primeira coisa que eu
quero mudar é a imagem. Aqui, eu já uso algumas
imagens prontas para o propósito. Basta fazer uma cópia para mantê-los seguros
para uso também. Como você pode duplicar,
basta segurar e rastrear. Usando os cantos, arrastando-os
e diminuindo-os. Agora, para deixá-lo
na mesma proporção, mantenha
sempre pressionada a tecla shift e tudo junto para arrastá-la e
reduzi-la proporcionalmente Acho isso perfeito para funcionar
como um pequeno botão. Agora, use uma ferramenta de retângulo para criar um retângulo e
destacar a base
da imagem que
estamos destacando naquele quadro específico
ou no painel do herói Agora arrasto e retiro essa
seção gráfica
do quadro e duplo
todas as imagens em todos os
lados com suas sombras Para fazer a mesa redonda, cada arco, com
a pizza sobre ela. Agora, exclua essas imagens e substitua-as
pelas outras novas que temos. Nossa
mesa de pizza bacana agora está pronta. Agora selecione todos os
elementos aqui juntos. Clique com o botão direito do mouse e escolha
o grupo, a seleção ou simplesmente use o atalho Control G ou Command G para
agrupá-los. E arraste e traga-o para dentro da moldura. Você pode renomear o quadro conforme sua escolha para facilitar a localização e
a correção de um Agora, duplique a moldura inteira novamente para destacar a
próxima opção de pizza do menu e agora gire o grupo para a
próxima na linha Você também pode
girar a imagem para dar uma
sensação realista agradável para aprimorar aparência
do site e
apenas arrastar e colocar a barra retangular sob
a opção de imagem correta para
aquela
imagem destacada específica no Eu só uso a
linha do frigobar desse jeito. Agora, na próxima linha, temos apenas o botão CTA e o texto do cabeçalho para
acompanhar cada quadro Você pode dedicar tempo e
aprimorar o design de cada
elemento com facilidade. Y y
5. Projetando o protótipo e palavras finais: Como estamos prontos para ter
as molduras prontas para esse fim, agora podemos começar a trabalhar com um protótipo para criar
o carrossel de três D. Comece com um quadro. Aqui temos essa seleção
específica e destacamos
uma neste quadro. No próximo quadro, temos
o próximo. Como trocar? Precisamos comandar que
o botão específico para se conectar ao
quadro fique relativo, para que ele fique destacado
ao ser clicado Usando o painel de protótipo ao
lado da seção aqui, selecione o segundo botão
na moldura e arraste, você pode ver o
ícone do anúncio a partir dele, arrastá-lo para a próxima vez
e alterná-lo assim No comando,
há uma caixa pop-up aqui. Altere as configurações para a animação inteligente com
facilidade ao entrar e sair do estilo Agora vamos dar uma prévia rápida este pequeno botão de pré-visualização
no lado direito. Assim que eu clico
na imagem, como você pode
ver no botão, você pode ver que a
animação é muito rápida. Precisamos aumentar o
tempo para ajustar um
pouco nosso design nos painéis de camadas para obter um resultado melhor Agora, de volta à
tela no Figma. Agora você pode visualizá-lo novamente e ver que está muito
melhor do que antes. próxima etapa é repetir
o processo e conectar cada elemento do botão
da imagem aos quadros corretos e configurações
do quadro, como
fizemos com o primeiro. I Isso pode ser opressor para você Se você é apenas um iniciante ou pode se confundir
no processo Eu sugeriria não
apenas pular, mas começar com cada quadro, um por um, e completar todos os ajustes
desse quadro em particular, depois passar para o próximo quadro e conectar o botão
da mesma maneira Mas uma coisa que
ainda acho que falta é a navegação inicial e os botões de navegação do
menu. Nós não
lhes demos nenhum comando. Como trabalhar nessa bolsa na tela
do Figma com um painel de
protótipo selecionado, selecionar cada botão de texto da
barra de navegação, um por um, e alterná-lo para o quadro relativo
específico Certifique-se de fazer isso com todos
os quadros, para que eles se
tornem interativos
e se vinculem e revinculem uns aos outros
nos comandos específicos. Aqui está.
Parabéns. Você veio muito bem
comigo e criou um
site completo de três d CarusalPizza sozinho Espero que você tenha
gostado muito do processo e de ter
aprendido uma coisa ou
outra com ele. Sim, estou esperando ansiosamente para ver seus
projetos de aula criativa na época do projeto Você pode simplesmente exportar o arquivo
ou obter uma captura de tela dele e
carregá-lo ou obter uma
gravação de tela se quiser
mostrá-lo de uma forma funcional e enviá-lo para a seção do
projeto Além disso, eu adoraria ouvir sua experiência de classe
na seção de revisão. Se você ainda estiver trabalhando e descobrindo algo
no processo, pode simplesmente entrar em contato
comigo na sessão de discussão Eu adoraria te ajudar. Se você gostou desta aula, sinta-se
à vontade para compartilhá-la com seus amigos, que também podem
achá-la útil Para mais atualizações e aulas
minhas, clique aqui. Nos encontraremos na próxima aula.
Shivangi Dubey, Graphic Designer | Web Designer | Artist
