Transcrições
1. Introdução: Se você deseja elevar seus produtos digitais
e
destacá-los nos
mercados on-line
, você está no lugar certo Meu nome é Ken e sou designer gráfico com mais de
nove anos de experiência. E nesta aula, vou te
ensinar como criar maquetes
profissionais de produtos
digitais atraentes usando Adobe
Illustrator Mas você pode estar se perguntando por que marcações. Os mkups
são a primeira coisa que os clientes em
potencial veem ao navegar por
produtos digitais em um site, e um
modelo bem projetado pode fazer a diferença entre uma
venda e uma rolagem Se você está vendendo e-books, software ou modelos de design, apresentar seu produto
de forma realista e
envolvente é fundamental para atenção
e
impulsionar Isso mostra profissionalismo. Nesta aula passo a passo, começaremos criando um modelo base de maquete
no Adobe Illustrator Que, em seguida, traremos para photoshop para
concluir o design E quando terminarmos, você terá aprendido
como criar um modelo básico do zero
no Adobe Illustrator, como importar esse modelo
básico para photoshop e criar uma maquete de produto
realista Mostrarei como
distorcer e encaixar perfeitamente
sua obra de arte
na maquete,
para dar a ela essa perspectiva, aquela perspectiva perfeitamente
sua obra de arte
na maquete,
para dar a ela essa perspectiva,
aquela perspectiva de três D. Mostrarei como vincular arquivos do
Adobe Illustrator ao
photoshop para atualizações em tempo real e Além disso, compartilharei dicas e truques
úteis para tornar seu trabalho fluir
muito mais rápido e sem problemas Agora, essa aula é perfeita
para quem cria ativos digitais para
download e gostaria de vendê-los
ou doá-los. Ao final, você terá uma maquete totalmente editável que
poderá usar para mostrar
seus produtos digitais e ganhará confiança para
realizar outros projetos de maquete
no realizar outros projetos de maquete Você não precisa de nenhuma
experiência anterior em photoshop ou Adobe
Illustrator porque este é um guia passo a
passo
do início Então, se você está pronto para levar suas
apresentações de produtos digitais para o próximo nível, vamos começar E quando começarmos, na próxima lição, vamos dar uma olhada no
projeto que você
construirá ao longo da
aula. Te vejo em breve.
2. Demo do Projeto do curso: Agora, eu sempre adoro
insistir que a melhor maneira de
aprender uma habilidade técnica
é trabalhando em um projeto E é isso que
vamos fazer nesta aula. Quero que aprendamos como
construir isso trabalhando
em um projeto. Então, aqui estamos dentro do photoshop, e eu quero mostrar o que
você vai construir quando
terminarmos a aula Então, aqui está um produto digital, e você o terá
até o final da aula, e também terá
entendido como construí-lo. Agora, digamos que você queira editar isso em um produto
digital diferente. Tudo o que você precisa fazer é
escolher esse rosto e substituí-lo pelo seu rosto com qualquer obra de arte com a qual
deseja substituí-lo Vou clicar duas vezes nesse ícone de objeto
inteligente e agora estamos indo
para o local onde podemos substituir a obra de arte Então, vamos
escolher sua obra de arte. Eu vou dizer colocar link. E agora vou navegar até o local onde
tenho minha obra de arte Você navega até onde
tem sua obra de arte. Então, vou entrar em
elementos em que tenho alguns exemplos de obras de arte E compartilharei todas
essas imagens logo abaixo deste reprodutor de vídeo na guia de
projetos e recursos. Baixe-os se
quiser acompanhar. Então, digamos que eu queira substituir
essa obra de arte por essa. Vou
clicar duas vezes nele e entrar. Eu posso deletar isso agora. Agora ficamos com isso.
Controle S para salvá-lo. Agora, se voltarmos ao
nosso modelo básico, como você pode ver, o produto
mudou de frente. Agora vamos mudar de
lado. Agora era o lado. Vou selecionar esse lado.
Clique duas vezes nele. Agora estamos substituindo o lado. Local do arquivo vinculado. Aqui está um lado. Entrar. Essas são algumas
outras obras de arte paralelas que eu estava experimentando. Guarde isso. E eu vou ver nossa obra de arte e
aí está Temos um produto totalmente novo
usando o modelo básico. Como você pode ver, esta é uma maquete de produto
digital editável altamente reutilizável
que você pode continuar que Então, basicamente, quando
terminarmos a aula, você terá entendido como
criar uma
maquete de produto digital como essa Aqui está um em que é apenas
um produto individual, e esses são três.
Também vou mostrar como
torná-los produtos exclusivos. No momento, temos três produtos
idênticos, mas e se esse produto fosse diferente disso
e desse? Talvez isso fosse verde e fosse um
tipo diferente de produto? Como fazemos isso? Você aprenderá tudo isso
durante a aula. Então, se você se sente
tão animado quanto eu, o que estamos fazendo aqui? Vamos começar
com a Lição 1. Veja em breve.
3. Crie um modelo de base no Illustrator: R, bem-vindo à primeira aula. Agora, como você pode
ver na minha tela, eu já tenho o Adobe
Illustrator e o Photoshop abertos Agora, a primeira fita em que
vamos trabalhar é criar um modelo básico
no Adobe Illustrator Então, deixe-me mudar para o
Adobe Illustrator. Então, pressionarei Control N para criar um novo projeto ou
simplesmente acessar o arquivo novo. Então, abra esse pop-up. Vou para a web e
vou escolher HD. Isso é 1920 por 1080
pixels de dimensão. Então, vou selecionar isso.
E aqui, no modo
de cor, deixe isso como cor
RGB porque você
não está imprimindo Você está preparando sua maquete de
produto digital para compartilhar on-line para que as pessoas vejam
seus produtos em uma tela Portanto, RGB, o mesmo caso
se aplica aos efeitos de repouso. Se você estiver imprimindo,
use 300 PPI ou 150 para telas 72. Mas tudo isso é arte básica
ilustrada. Esta aula não é sobre
ilustrações básicas. Vou seguir em frente e clicar em
Criar, e pronto. Agora, esta é uma página em full HD. E o que eu quero fazer é que existem
maneiras diferentes de criar isso. Podemos seguir em frente e eu vou
escolher a ferramenta retangular. E desenhe um retângulo, talvez até esse ponto Agora, selecionarei
a ferramenta de seleção direta para permitir que eu selecione diferentes cantos
individuais. Vou selecionar esse canto e , em seguida, para evitar o movimento
para a esquerda e para a direita, para restringi-lo para cima e para baixo, pressionarei a tecla Shift e a
arrastarei até talvez esse ponto Vou selecionar
esse outro canto, começar a arrastar para cima
e manter pressionada Talvez até esse ponto. Eu acho que parece bom. Vou selecioná-lo mais uma vez
e, mantendo a tecla pressionada, percebo que o cursor do mouse está se
transformando em um duplo. Isso significa que vamos
duplicar isso. Segurando, vou
arrastar e segurar a tecla Shift. Vou impedir que ele se mova para cima e para baixo. Eu ainda estou aguentando. Agora vou manter pressionada a tecla Shift. Agora é turno e saída. Isso significa que ele se moverá
da esquerda para a direita em linha reta
até talvez esse ponto. Clique com o botão direito do mouse para transformar, reflita
na vertical na vertical. Sim, na vertical. Ok, deixe-me arrastá-lo até esse ponto, porque eu
quero trazê-lo até aqui. Em seguida, selecionarei a ferramenta de seleção
direta. Escolha esses dois e
arraste-os até esse ponto. Como você pode ver, o modelo básico ou o modelo básico
começou a tomar forma. Mas antes de
prosseguirmos, podemos selecionar esse canto. Comece a arrastá-la para baixo e, em
seguida, mantenha pressionada a tecla Shift para evitar que ela
se mova da esquerda para a direita Até esse ponto,
só queremos reduzir
essa inclinação Queremos reduzir essas inclinações. Como você pode ver, agora temos uma malha básica para um produto
digital. Agora, você também pode arrastar esses dois pontos de ancoragem
para que pareçam estreitos Vou selecionar os dois,
Control G, para agrupá-los. Use o centro de
alinhamento horizontal e
alinhe verticalmente ao centro para
alinhá-lo na prancheta Na verdade, deixe-me selecionar a ferramenta de prancheta e reduzir
todo esse espaço em branco Lá vamos nós. Controle Zero, para mostrar toda a prancheta e
colocá-la em foco Em seguida, selecionarei a
arte e agora a
alinharei no centro e a salvarei Então, eu quero guardar isso lá dentro. Vou salvá-lo dentro
dessa pasta chamada assets. E vou incluir
essa pasta de ativos abaixo deste player de vídeo
na guia de projetos e recursos como uma pasta ZIP, e ela conterá
imagens e meus arquivos de projeto, e você poderá dar uma olhada neles. Você também pode usar as imagens que
usei para concluir
seu projeto de classe. Então, vamos entrar nos ativos, e eu quero
chamá-lo de modelo base. Pressione enter para salvar,
digite novamente para salvar. Agora temos o modelo básico. Isso não fará
parte do resultado final, mas nos ajudará a colocar as imagens
da
maneira correta dentro do photoshop, e é isso que
faremos
na próxima lição. Te vejo em breve.
4. Coloque a arte da capa como um JPG: E bem-vindo de volta. Então, agora que criamos
o modelo base, agora
estamos prontos para
usá-lo dentro do photoshop Lembre-se de que mencionei
que isso será apenas um guia. Não fará parte
do resultado final. Tudo bem. Então, vamos minimizar o Illustrator
e abrir o photoshop. E no photoshop, eu vou
dizer “abra”. Acho que está
aqui. Modelo básico. Clique duas vezes nele e
use a configuração padrão, então. Lá vamos nós. E estou aumentando e diminuindo o
zoom mantendo pressionada a tecla Alt e
usando a roda do mouse Isso é útil para quem
é iniciante no photoshop. Agora que temos
o modelo básico, que será nosso guia, é hora de posicionar essas faces e começaremos com esse lado, que é o lado frontal. Então eu vou para o arquivo. Na verdade, deixe-me dizer,
digamos que lugar embutido. Nós os usaremos como exemplo. Vou clicar duas vezes nesta obra de arte e agora ela é importada Posso
clicar nessa marca ou pressionar Enter para colocá-la. Vou simplesmente pegá-lo
e arrastá-lo até
o topo para ter certeza de que está alinhado lá em cima,
depois arrasto esse
canto inferior para
redimensioná-lo depois arrasto esse
canto inferior para
redimensioná-lo Não se preocupe com
a precisão agora. Vamos resolver isso,
entrar para colocá-lo. Agora, com a imagem selecionada, vou para o painel de camadas, botão direito do mouse e
converto em objeto inteligente. Isso é muito importante. Agora que ele foi convertido em
um objeto inteligente, vou manter o
controle pressionado. E selecione. Observe que o cursor do mouse está
mudando no momento em que você se aproxima do canto,
mantendo pressionado o controle. Agora você pode arrastar e colocar
esse canto ali mesmo. Ainda mantendo pressionado o controle, selecione-o e
arraste-o até esse ponto. Ele entra para se comprometer. Agora aí está. Vou
pressionar Control S para salvá-lo. Queremos salvá-lo dentro
dessa pasta de ativos. E desta vez, ainda vamos chamá-lo de modelo básico, mas é um arquivo PSD,
um arquivo photoshop,
exceto E então terminamos
com a frente. Então, vamos em frente
e coloque o lado. Eu vou para o arquivo. Coloque incorporado. Deixe-me voltar para dentro daqui. Clique duas vezes nesse lado. Vou arrastá-lo e
colocá-lo em algum lugar aqui. Deixe-me segurar t e
rolar para aproximá-lo. Na verdade, primeiro de tudo, deixe-me pressionar enter para colocá-lo. Selecione isso. Mantenha pressionado o controle. Selecione-o. Agora arraste esse canto
e posicione-o corretamente. Pressione enter. Vou selecionar
isso, mantenha pressionada a tecla Control. Antes de fazermos isso,
deixe-me apertar o controle zero. Agora que
já a colocamos, quero entrar aqui na camada,
clicar com o botão direito do mouse e
convertê-la em um objeto inteligente. Tudo bem. Agora,
deixe-me chegar mais perto, mantendo pressionada a tecla Alt e rolando
com a roda do mouse Vou carregar isso e
colocá-lo até esse ponto. Como você pode ver, a obra de arte
em si tem uma linha branca, mas isso não é um problema Vou manter pressionado o controle e arrastar esse canto
até esse ponto. Desça com a
roda do mouse para chegar ao fundo. Toque para rolar com
a roda do mouse. Mantenha pressionado o controle para
escolher esse canto. Na verdade,
deixe-me colocá-lo lá. Pressione Enter, selecione isso, mantenha pressionado o controle, selecione isso. Agora, ainda
mantendo pressionado o controle, arraste e posicione-o corretamente. Entre, selecione isso,
selecione este canto. Em seguida, coloque-o ali mesmo, entre. Em e rolando Mantenha o controle.
Mantenha pressionado o controle ,
selecione-o e arraste-o
para aquele canto ali mesmo. Digite, Controle zero, e
agora você tem seu produto, Controle S, para salvá-lo
no modelo base. Agora, se quisermos
substituir o ritmo, tudo o que precisamos fazer é
ir até a camada e observar que aqui temos um pequeno ícone dentro
do ícone da camada. Então, clicar duas vezes nele
abrirá a fase plana
e, se atualizarmos essa fase, ela também será atualizada
no produto digital
no modelo básico. Então eu vou entrar aqui. Coloque incorporado e agora eu posso
selecionar uma obra de arte diferente. Clique duas vezes em Enter. Deixe-me pressionar o controle S para salvá-lo. Agora, voltando aqui, como você pode ver,
substituímos nossa obra de arte Vamos fazer o mesmo pela lateral. Se quisermos substituir o lado, eu virei aqui,
clique duas vezes neste canto. Arquivo, Local incorporado. Clique duas vezes nesse enter. Controle S para salvar
e, agora, voltando aqui, nosso produto está atualizado. Então, lembre-se de
que mencionei que essa camada aqui, o modelo base que criamos
no Adobe Illustrator, não fará parte do modelo do produto
final E isso porque
queríamos
usá-lo apenas como um guia sobre onde
colocar cada canto
da obra de arte Agora que definimos as faces
da maquete do produto digital, não
precisamos disso Então, deixe-me
revelá-los mais uma vez, se escondermos isso, observe que não
há mudança. No momento, como as duas
imagens não estão anexadas, há um C no
espaço entre elas. que precisamos fazer é selecionar
uma das faces e empurrá-la para a direita para que fique em
contato com a outra. Controle zero, pode continuar empurrando-o para a esquerda
ou para a direita até que esteja
bem posicionado Agora, se eu selecionar
o modelo base, nós o importamos e excluímos, Control S. Agora temos uma maquete de produto
digital totalmente editável e reutilizável Então, se você quiser
expandir o espaço aqui, pode
usar a ferramenta de corte para
expandir a prancheta
até talvez esse ponto Esse ponto.
Também estou pressionando e usando a
roda do mouse mais uma vez para diminuir o zoom. U Vamos continuar
criando algum espaço, algum espaço para isso, e agora controlar S. Deixe-me ir
em frente e selecionar isso. Segurando e arrastando. Eu posso duplicar isso. Mantenha pressionada a tecla Alt mais uma vez
e coloque-a ali mesmo. Deixe-me selecionar tudo. Segurando esse
lado. Eu posso redimensioná-lo. Entre e agora temos
três produtos digitais. Eles não estão alinhados corretamente. Vamos alinhá-los.
Sim, até lá. Claro, agora, se você
quiser alterá-los, tudo o que você precisa fazer
é clicar duas vezes em qualquer um dos
objetos inteligentes na esquina. Arquivo, Local incorporado. Clique duas vezes aqui, insira, salve. E agora os lados estão mudados. Vamos também mudar o rosto. Clique duas vezes nessa face. Na verdade, já
temos isso aqui, então vou esconder isso e salvar. Agora, voltando aqui, atualizamos nosso produto. Então, basicamente, é assim que se
cria um produto digital. Agora, na próxima lição, quero mostrar
como
consegui
criar esse tipo de
arte para meus morcegos,
porque você pode estar
se perguntando, Ken, sim, você me mostrou como criar
a marcação,
mas eu gosto da maneira como você
projetou a arte do seu produto digital Como você fez isso? Eu quero te mostrar isso
na próxima lição.
Te vejo em breve.
5. Coloque a arte da capa como um arquivo de IA - parte 1: Então, agora é hora de
aprender a pensar como um designer e criar belas obras de arte para
seu produto digital Por isso, quero
mudar para o Illustrator. Aqui estamos. Deixe-me fechar isso. Não o estamos mais usando, Control N para adicionar novos. Na verdade, vou entrar na web. Deixe-me escolher esse comum. Em seguida, crie, precisamos
mudar a orientação. Então, vou selecionar o Art War
two e mudar para retrato, e as dimensões não
estão corretas. Eu acho que essas são proporções
melhores. Controle zero. Agora, o Controle zero coloca toda a área
de arte em foco. Então, agora, eu quero
mudar para a escolha livre. E é aqui que eu normalmente
procuro modelos
para fazer coisas diferentes enquanto trabalho em
meus projetos de design. Digamos, por exemplo, como você pode ver, neste momento, minha arte aqui
tem alguns mascotes Então eu fui aqui
e disse, mascote. Como você pode ver aqui, temos alguns mascotes legais que você pode usar Vamos baixar esse leão. Vou fazer
o download. Lá temos outra equipe. Também vou procurar um pacote de ícones. Acho que já havia
procurado isso antes. Sim, eu vou com isso. Então isso, e vamos
fazer isso também. Vá em frente e procure o tipo de
produto digital que você deseja vender. Para mim, vou
vender , vou
vender um pacote de ícones. Então, deixe-me ir até
onde ele está localizado. Aqui estamos. Vou apenas extraí-los aqui em pastas
separadas. Abra isso no Illustrator. E isso. Incrível. Parece
que falta uma fonte aqui, mas essa fonte não é problema. Não precisamos dessa fonte. Vou clicar
duas vezes até entrar grupo, porque tudo
o
que precisamos é do leão. Agora, com nosso leão
e o plano de fundo, vou selecioná-lo e
arrastá-lo para o nosso documento, o documentário criado,
e vou colocá-lo
no canto superior esquerdo,
redimensionando o fundo Vou colocar tudo
no meio. Uma linha para embarcar no meio. Deixe-me fazer o leão
um pouco maior. Tudo bem, vou
controlar C para copiar esse leão e controlar Shift
V para colá-lo na frente. Vou aumentar o tamanho
mantendo pressionadas as teclas shift e t para redimensionar a partir do centro e reduzirei a
opacidade para Até algum lugar lá. Quero clicar
aqui para que
não transborde para
fora da prancheta Então, tudo que eu preciso fazer
é selecionar essa cópia. E cole,
deixe-me alinhá-lo ao
centro da prancheta E então, enquanto estiver selecionada,
pressiono a tecla Shift
e seleciono a obra de arte, clico com o botão
direito do mouse nela e
crio o vison recortado Dessa forma, estamos recortando-o no retângulo que
acabamos Lembre-se de que, quando selecionamos isso, estamos selecionando
a máscara de recorte Não estamos selecionando
a obra de arte em si, e é por isso que a
opacidade ainda é 100%. Se clicarmos duas vezes nela
e chegarmos à obra de arte, lembre-se de que a fizemos 10% Vamos fazer com que seja oito 7%. 8%. Clique duas vezes na parte externa. Vou selecionar isso e
alinhá-lo ao centro e ao centro. Controle S para
salvá-lo dentro dos ativos, eu o salvarei como um pacote de ícones do Lion. Tudo bem Quero voltar à escolha livre
muito rapidamente e, aqui, vou digitar a fonte ou tipografia e obteremos uma
boa fonte editável que podemos usar em Vamos ver. Deixe-me
ir com esse suco. Este é apenas um guia simples para ajudar você a saber como fazer isso. Download gratuito. Tudo bem
Vamos procurá-lo. Extrair. Vamos abri-lo. Acho que talvez precisemos
baixar essa fonte. Sim, isso é Spartan MB black. Então, fonte preta MB. Fonte D. Vamos lá, vou
baixar a família inteira. Baixar. Baixar. Vamos extrair isso para o Spartan M B isso para o Spartan M B
e instalar
todas essas fontes Tudo bem Deixe-me
colocá-los aqui. Agora nós os ativamos
com sucesso. Deixe-me fechar isso e ela será alterada para a fonte correta. Quero escolher essa fonte
e arrastá-la aqui. Vou escolher o texto
também e editá-lo para L em provavelmente algo como icon pac. Vamos mudar
isso para maiúsculas Pinte branco, e vamos
reduzir para talvez 500. Vamos mudar a fonte para
Mat Monerat de forma normal. Isso ainda está muito visível. Deixe-me reduzir a máscara de recorte em si até talvez aquele ponto Vou selecionar esses
dois, o plano de fundo e a máscara de recorte e pressionar
Control two para bloqueá-los. Agora eu posso selecioná-los. Vou selecioná-los,
Control G para agrupá-los. Em seguida, alinhe-os no centro. Controle S. Tudo bem. Agora temos o
pacote de ícones do leão e está pronto.
6. Coloque a arte da capa como um arquivo de IA - parte 2: Agora, para usá-lo internamente, na verdade, deixe-me
clicar duas vezes nesse grupo para que
possamos acessar o texto empurrar esse texto
para cima. Controle S. Agora nós o salvamos. Agora, para
usar isso como nossa arte, não
precisamos
exportá-la como JPEG ou imagem Tudo o que precisamos fazer é minimizar
isso, minimizar aquilo. Lembre-se de que o photoshop
é criado pela Adobe. O Illustrator é criado pela Adobe. Esses programas funcionam
juntos sem problemas, para que você possa importar arquivos do
Illustrator Então, vou até a frente aqui e substituí-la por,
digamos, um local vinculado. Agora, vou para ativos,
Lion icon Pack. Lá vamos nós. Atualize isso. Vamos importar a colheita
para a caixa delimitadora. Tudo bem. Deixe-me escolher aquela esquina
e aquela esquina. Entre e vamos salvar isso. Lá vamos nós. Ainda
não foi atualizado. Controle S para salvar e agora está atualizado. Agora, se voltarmos para o
Illustrator e dissermos Control O, queremos criar o lado Vou selecionar o pacote de
ícones do leão e colá-lo. Eu quero duplicá-lo e vou chamar isso de lado
do pacote de ícones Entrar. Esqueci de rotular
isso como frente de iene, mas faremos isso mais tarde No momento, é lateral. E como a altura já
está boa, tudo o que precisamos fazer é selecionar
a ferramenta de prancheta e
reduzir a prancheta a algo razoável
até aquele ponto, talvez Agora vamos
redimensionar isso para algo parecido. Coloque isso lá em cima. Controle fora e segundo,
desbloquearemos as camadas que
bloqueamos com o Controle dois. Vou selecionar o fundo azul e redimensioná-lo até esse ponto Agora temos a máscara de recorte que recorta a obra de arte Vou clicar duas vezes na máscara em si e arrastar até aquele local. Clique do lado de fora. Na verdade, a obra de arte está
muito à esquerda Então, vamos
clicar duas vezes nele e, em seguida, selecioná-lo e colocá-lo
em algum lugar lá. Na verdade, posso digitar
isso talvez como meu nome. Sr. Moneybags. Vou mudar
isso para Montserrat Montserrat. Preto. Vou
mudar para a cor branca. E coloque aí mesmo. Você pode colocar o nome
que quiser aqui ao lado. Tudo depende de você. Agora
, voltando ao photoshop, é
claro, vou clicar
duas vezes aqui Isso já está aberto. Deixe-me colocar Link desta vez. Coloque a caixa delimitadora lateral do Link. Tudo bem. Vou segurar para
redimensionar a partir do centro Entrar. Controle S para salvá-lo. Agora, se eu voltar aqui, nosso produto será
atualizado. Lá vamos nós. Agora, se eu voltar
para o Illustrator, onde está Illustrated, e voltar para casa, vou dizer que pelo Sr. Money bags. Então, vou apenas adicionar bolsas
do Sr. Money. Controle S. Se eu voltar para o photoshop, você notará que ele se
atualizará automaticamente porque se eu pressionar o Controle
S e acessar nossa arte, ela será
automaticamente alterada por Mr. Moneybags É por isso que o colocamos vinculado
porque gostaríamos de
poder atualizar o ritmo, a arte
no Illustrator e ver essas mudanças em tempo
real no photoshop A obra de arte ainda está vinculada
aos dados ilustrados. Agora, você deve estar
se perguntando por que eu não usei esse pacote de ícones. Lembre-se, eu baixei
um pacote de ícones, oh, espere, nós realmente o
abrimos. Esse foi o pacote de ícones
que criamos. Aqui vamos nós. Achei que
talvez pudéssemos usar isso como exemplos de ícones
na arte da capa. Se eu arrastar e colocar isso aqui, e tirar essa obra de arte para baixo, tornar esses ícones muito
maiores, empurre isso para baixo. Quero dizer, é só ser criativo e ver quais
resultados você obterá. Deixe-me salvar isso e ver
quais resultados teremos. Basta clicar aqui. Deixe-me ir para a frente, como você pode ver, está se atualizando. Eu não gosto de quão altos eles são, então deixe-me puxá-los para baixo. Interruptor Control S de volta aqui. Controle S. Aqui. Atualizado automaticamente,
controle S para salvá-lo. E agora, entrando aqui, nosso pacote de ícones do Lion está atualizado. Então, basicamente, é
assim que se cria uma marcação digital de produto Agora você deve estar se perguntando: se eu quiser agrupar
três produtos diferentes Talvez este seja
vermelho, isso seja azul e isso talvez seja verde,
porque agora, no momento, se você perceber que se mudarmos isso,
isso afetará os três produtos. E se quisermos ter
um pacote de produtos exclusivo,
outro pacote de produtos exclusivo
e outro pacote de
produtos exclusivo
7. Vários pacotes: parte 1: Para conseguir isso, você
teria que criar os produtos individualmente e depois
organizá-los dentro do Adobe Illustrator Deixe-me
selecioná-los e excluí-los. Vou pegar a ferramenta de corte
e colocá-la lá. É assim que eu faria. Se há uma
maneira melhor de fazer isso, não
estou ciente
disso no momento. Então, Control S. Lá vamos nós. Então, vou abrir o Ado
Illustrator Control N. Vamos usar
o padrão Ou talvez me deixe ir
para Web, 1920 por 1080. E agora deixe-me
colocar o modelo base. Lá vamos nós. Porque lembre-se esse documento do Photoshop
é chamado de modelo base, então nós o importamos Agora, se o atualizarmos, se eu voltar
aqui e esconder isso mostrar isso e salvá-lo, isso também será atualizado, assim como porque
eles estão vinculados Deixe-me salvar isso, e
agora entrando aqui, ele deve ser atualizado a qualquer momento. Por que ele não está
atualizando o Control S? Sim. Então, alguns arquivos foram
modificados no painel de links. Sim. Agora ele se atualizou sozinho. Agora, se eu quiser adicionar outro
produto aqui, arraste com a tecla Alt, arraste tecla Alt, Control D
para repetir o último
movimento, arraste com a tecla Ton Vou selecionar essa,
a central, ir até o link, revincular, selecionar esta cópia, colar, revincular para aquela. E agora ainda parece o mesmo porque é apenas
uma cópia disso. Mas agora, se fizermos alterações nisso no photoshop,
ele será único Deixe-me mudar para o
photoshop, porque agora essa é sua própria obra de arte
exclusiva Enquanto isso ainda
estiver selecionado, direi que edite no photoshop E se eu clicar duas vezes no rosto e esconder isso e
mostrar aquilo e controlar S. Voltando aqui Agora temos esse rosto. Deixe-me clicar duas vezes
na lateral também. Deixe-me esconder isso e salvar. Acho que precisamos voltar
aqui e controlar S, digamos que o
arquivo principal. Agora, voltando. Agora isso é vermelho. Claro, agora você sabe o que fazer, indo para o terceiro,
vou revinculá-lo E vou selecionar este
modelo de colar, copiar e colar. E agora temos uma terceira cópia. Vou clicar duas vezes nele e agora é uma cópia exclusiva,
editada no photoshop E, claro, agora
você sabe o que fazer. Agora, uma coisa que você
precisa saber é antes começar a editar ou depois fechar isso no
Adobe Illustrator, deixe-me primeiro salvá-lo Deixe-me salvá-lo como uma amostra. Agora, agora está salvo como amostra. Se eu fechá-lo e ir para aquela
pasta. Aqui temos uma amostra. Agora, lembre-se de que não podemos trabalhar com esses
tipos de nomes, então podemos dar a isso um nome
mais apropriado. Talvez esse seja o pacote de armadilhas. Talvez esse seja o pacote de
hip hop. Qualquer um desses pode ser um modelo que sempre podemos reutilizar,
porque tudo o que você precisa
fazer é entrar no photoshop
e mudar os Então, se você quiser reutilizá-lo, qualquer um deles pode ser
seu modelo base Então, podemos renomear isso para o pacote de ícones Lion icon
pack, Lion icon Pack Agora, quando abrirmos a amostra, ele dirá que alguns dos
arquivos que usamos estão ausentes, e é porque ele não
consegue encontrar os arquivos pelo nome pelo qual os importamos. Nós os mudamos. Então substitua. E agora vamos dizer
qual pacote de armadilhas? Vamos também usar um pacote de hip hop. E o último
ícone do Leão. Lá vamos nós. Então, basicamente, é
assim que se cria uma maquete de produto digital E, como você pode ver,
é muito versátil, você pode usar esse
método para criar até mesmo uma pilha de produtos
digitais E antes de você ir, tenho
algumas considerações finais. Próximas etapas e ideias que eu gostaria de compartilhar com você
na próxima lição. Então, eu vou te ver em breve.
8. Vários pacotes: parte 2: Agora, acabei de
passar pelas aulas para ver se perdi alguma coisa e percebi que há duas coisas sobre as quais esqueci de
falar Então, aqui, esse é o
modelo base original em que trabalhamos. Então, se eu simplesmente desfazer, agora temos esses
três produtos Uma coisa que você notará
aqui é que não é fácil dizer que esses
são três produtos porque nenhum deles
está projetando uma sombra. Precisamos adicionar um pouco de
sombra projetada para separar essa parte frontal
dessa e dessa. Então, como você faz isso?
Vou selecionar esse lado. E vou para
efeitos, sombra projetada ou posso simplesmente clicar
duas vezes aqui em qualquer lugar aqui, para exibir
o estilo da camada. Eu vou aqui para soltar a sombra, ativá-la, e
você notará que a sombra
já está aparecendo. Mas se eu clicar nisso, abriremos as opções de
sombra projetada e poderemos
brincar com elas. Por exemplo, a direção, eu quero que
a sombra esteja desse lado. Assim. Esta é a prévia. Talvez eu queira ir até aquele lugar. Estou evitando isso. E quanto a isso? Sim, algo parecido. Também queremos alterar o modo de
mesclagem para alguma multiplicação. Vamos tentar isso. Multiplique, talvez
possamos mudar a cor, torná-la um pouco E eu acho que está tudo bem. Então, clicando lá fora. Vou selecionar isso
e fazer o mesmo. Eu posso simplesmente vir diretamente
aqui e clicar em sombra projetada, e ela aplicará as últimas
configurações que aplicamos. Como você pode ver, se eu clicar em OK, agora é fácil distinguir entre esses três produtos. Controle S. Agora, outra forma de distingui-los é entrar na sua obra de arte
real Vamos entrar aqui. É isso mesmo. Aqui, podemos adicionar
uma textura gradiente. Com esse retângulo,
alinhado no centro. Vou para as configurações de
gradiente, selecione-as para obter um
gradiente Vou reverter isso, puxar isso para aquele lado
e aquele lado. E agora mude o modo de mesclagem. Vamos aqui para a aparência. Não, vamos à transparência. Multiplicação no modo de mesclagem. Agora está muito escuro. Nós
podemos. Podemos fazer isso em 35%. Também podemos
dizer que o Controle S. Se aumentarmos isso, vamos
torná-lo tão escuro quanto isso. Controle S. Agora, vamos
mudar para o photoshop. Clique duas vezes nele. Não.
Onde está a frente? Deixe-me colocar o link. Pacote de ícones do leão. Sim, vamos selecionar um pacote de
ícones do Lon. Redimensione isso Entre para colocar o Controle
S. Lá vamos nós. Agora, voltando aqui, como você pode ver,
temos essa sombra. Agora, mesmo se nos livrarmos
dos efeitos de sombra projetada, lembre-se de que adicionamos esse efeito. Se eu fizer esse efeito, clique
duas vezes nele e remova-o. Nós o removemos, mas você
ainda pode distinguir
entre este produto e este produto porque a luz
vem desse lado, atingindo o lado e causando
uma sombra na frente Vamos em frente e
também vamos dizer que está bem. Agora eu não vou
remover isso. Eu só queria mostrar como
fazer isso,
como fazer com que cada produto
digital individual se destaque.
9. Como organizar seus arquivos: Agora, a próxima coisa sobre a qual
eu queria que
falássemos é sobre organização. Por exemplo, para este pacote de leões, a frente, a lateral e o modelo básico que
você vai usar devem estar em uma pasta. Então eu vou. Deixe-me primeiro fechar isso, fechar
tudo. Aberto. Eu, deixe-me fechar isso. Deixe-me abrir o Illustrator
e fechar tudo. Não salve nenhum desses. Não, não diga. Agora, se eu abrir meu explorador de arquivos, aqui estamos. Aqui está o pacote de leões e aqui está o
modelo básico usado. Devemos criar novos. Pacote de ícones Lon. Pacote de ícones do Lion, então vou carregar a lateral, a arte frontal e
o modelo básico Esses são modelos básicos
para outros projetos. Esses eram exemplos com os quais
estávamos trabalhando. Agora, se eu quiser criar um
novo produto digital, tudo o que preciso fazer é vir aqui, o modelo base,
criar uma nova pasta chamá-la de próximo nome. Pacote de pincéis escovados. Que tipo de nome é esse. Mas vamos supor que eu esteja vendendo pacotes de pincéis de
photoshop. Quero empacotá-los como
um pacote de produtos digitais. Insira, insira, cole isso
em seu modelo base. Agora, nesta pasta, é aqui que vou criar um novo arquivo do Adobe
Illustrator para a frente e para a lateral Em seguida, abrirei
o modelo básico. Photoshop sempre. Tudo bem, esse é o errado
. Nós mudamos isso. Mas espero que você entenda. Você usa o modelo básico. Esse pode ser seu
modelo base de três, ou você pode ter um modelo
básico de apenas dois
modelos básicos de apenas um. O mais importante
é que você saiba como trabalhar com
o próprio Mk up e agora saiba como editá-lo Agora, antes de você ir,
como
mencionei, tenho mais algumas próximas etapas e ideias que gostaria de compartilhar com
você na lição final, então não vá a lugar nenhum.
Te vejo em breve.
10. Próximos passos: Parabéns por
concluir a aula. Até agora, você deve ter uma marcação de produto
digital totalmente editável e reutilizável, juntamente com as habilidades para criar mais criativas dela Agora você pode empacotar e apresentar seus
ativos digitais para download como um profissional É hora de colocar
essas habilidades em prática e começar a ganhar dinheiro online. Mas antes de ir, não se esqueça de enviar
seu projeto de aula. Adoramos ver a criatividade da nossa comunidade compartilhando ideias
e compartilhando feedback. Portanto, faça o upload de uma imagem ou captura de tela da sua
marcação quando terminar Torne-o único, adicione
seu próprio toque e não hesite em procurar
outros exemplos para se inspirar E quando terminar, basta
acessar a
guia de
projetos e recursos abaixo do player de vídeo e seguir as etapas simples
para enviar seu trabalho. Por fim, se você achou
essa aula valiosa, adoraria ouvir seus comentários As avaliações são uma grande parte
da comunidade Skillshare porque ajudam outros alunos a descobrir aulas
incríveis
que deveriam Então, se você tiver um momento, deixe um comentário na guia de avaliações
abaixo deste vídeo. Deixe-me saber se a aula
atendeu às suas expectativas, o que você gostou e quais
coisas legais você aprendeu. Mais uma vez,
quero agradecer
muito por se juntar a
mim nesta aula e espero ver
seu projeto até a próxima vez Seja criativo, continue
incrível.
Paz.
Ken Mbesa, Build Beautiful Websites With Elementor
