1. Design & Illustration
  2. Web Design

Projetando um Site de Salão de Beleza Minimalista no Adobe Illustrator

by
Read Time:21 minsLanguages:

Portuguese (Português) translation by Wesley Sales (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Você gosta de sites elegantes? Então coloque o cinto, porque neste tutorial você vai descobrir como combinar a simplicidade e a elegância neste site de uma única página no Adobe Illustrator.

Este tutorial irá mostrar a você tudo o que você precisa para fazer um site simples, mas ainda elegante para o seu pequeno negócio no Adobe Illustrator, usando um Salão de Beleza como exemplo. Vamos começar!

Arquivos do Tutorial

Fontes

Este tutorial usa diversas fontes gratuitas e outros arquivos que estão disponíveis para download nos links abaixo:

Então, a família da fonte usada neste tutorial é chamada de Proxima Nova e vem com uma assinatura do Typeset, assim você pode usá-la para o layout do seu projeto e publicar seu site quando tiver terminado:

Imagens

Este tutorial usa diversas imagens que você pode baixar do Photodune. As imagens que eu encontrei se ajustam bem para o propósito deste tutorial, mas você pode usar suas próprias imagens se assim preferir:

1. Configurando o Layout e a Grade

Passo 1

Primeiro, crie um Novo Documento. Defina as dimensões do Artboard para 1500 px por 4500 px. Já que vamos criar gráficos para uso em monitores, certifique-se de definir o Modo de Cor (Color Mode) para RGB e Efeitos de Rasterização (Raster Effects) para 72 ppi.

Passo 2

Vamos criar uma Nova Camada. Nomeie de "Grade" (Grid) a camada de cima e de "Arte" (Artwork) a camada de baixo. É aqui que iremos posicionar a grade para que ela nos ajude a alinha os objetos visualmente na Prancheta (Artboard).

Passo 3

Use a Ferramenta Retângulo (M) para criar uma nova listra. Dê a ela as dimensões de 30 px por 4500 px.

Passo 4

Certifique-se de que a listra está na camada "Grade". Preencha-a com a Cor Vermelha (R 255 G 0 B 0).

Passo 5

Com a listra vermelha selecionada, vá para o Painel Aparência e clique em Efeitos do Illustrator > Distorcer e Transformar > Transformar (Illustrator Effects > Distort & Transform > Transform). 

Passo 6

Mova a listra horizontalmente por 40 px. Adicione 23 cópias. Isto irá criar uma grade vertical multiplicando as listras 23 vezes com 10 px de espaço entre cada listra.

Passo 7

Novamente, com a listra vermelha selecionada vá para Objeto > Expandir Aparência (Object > Expand Appearance). Isto irá quebrar o efeito de multiplicação nas listras separadas.

Passo 8

Selecione as listras agrupadas e Alinhe-as à Prancheta (Artboard) horizontalmente e verticalmente.

Passo 9

Vá para o Painel de Transparência e defina a Opacidade para 10%.

Passo 10

Para garantir que a grade não se mova quando você acidentalmente clicar sobre ela, bloqueie a Camada Grade.

2. Configurando o Plano de Fundo

Passo 1

Neste passo, nós iremos criar um fundo que se repete. Para este propósito, use a imagem PNG "Debut Dark BG". Com a Camada de Trabalho (Artwork Layer) selecionada, vá para Arquivo > Inserir (File > Place). Importe esta imagem.

Passo 2

Agora vamos criar um padrão que pode ser repetido. Selecione a imagem importada e vá até Objeto > Padrão > Criar (Object > Pattern > Make).

Passo 3

Nas Opções de Padrão, você pode brincar com as configurações avançadas. Dê a esse padrão o nome de Estréia Negra (Debut Dark).

Passo 4

No canto superior esquerdo, confirme o novo padrão, clicando em Done (Feito).

Passo 5

Crie um novo Retângulo com as dimensões de 1500 px por 4500 px.

Passo 6

Selecione o novo retângulo e Alinhe-o à Prancheta (Artboard).

Passo 7

Preencha o retângulo com o Padrão Estréia Negra (Debut Dark) do Painel de Amostras (Swatches).

3. Criando o Cabeçalho Superior e o Menu

Passo 1

Vá para Arquivo > Inserir (File > Place) e importe a imagem do cabeçalho. Certifique-se de desmarcar a opção Link. Nós queremos que a imagem seja embutida no documento do Illustrator, e não vinculada.

Passo 2

Selecione a imagem do cabeçalho e Alinhe-a à Prancheta (Artboard). Alinhe-a também verticalmente à Borda Superior (Top Edge).

Passo 3

Crie um novo Retângulo com as dimensões de 1300 px por 55 px. Ele será a base para o menu de navegação.

Passo 4

Preencha o retângulo com a cor Preta (R 0 G 0 B 0). No Painel de Transparência, defina a Opacidade para 60%.

Passo 5

Alinhe o retângulo ao Centro da Prancheta (Artboard). E também alinhe-o a borda inferior da imagem do cabeçalho.

Passo 6

Usando a Ferramento de Texto (T), escreva "Bem-Vindos" (Welcome). Este tutorial usa a fonte Proxima Nova, que vem com uma assinatura do Typekit, mas sinta-se livre para usar a fonte que você quiser.

No Painel de Caractere, defina o Tamanho da Fonte (Font Size) para 16 pt e o Espaçamento entre Letras (Tracking) para 10. Marque a opção Todas Maiúsculas (All Caps). E também preencha o texto com a cor Branca (R 255 G 255 B 255).

Passo 7

Selecione o texto "Bem-Vindo" (Welcome). Segurando Alt-Shift, clique e arraste o texto. Isso irá criar uma nova cópia do texto selecionado. Duplique o texto mais três vezes.

Passo 8

Renomeie cada nova cópia do texto de acordo com a imagem. Já que o botão "Bem-Vindos" está ativo, ele terá a Cor Branca. Os outros botões permanecem inativos. Preencha-os com um Cinza Suave (R 201 G 201 B 201).

Passo 9

Use as Guias Inteligentes (Cmd/Ctrl - U) (Smart Guides) e a grade vertical para alinhar os botões de menu uniformemente pela barra de menu de navegação preta. Certifique-se de que o espaçamento entre os botões é o mesmo.

Passo 10

Crie uma nova Linha ( \ ). Dê a ela o Comprimento (Length) de 410 px. Ajuste o Ângulo para .

Passo 11

Adicione um Comprimento de Traçado (Stroke Weight) de 1 pt. Preencha-a com a Cor Branca (R 255 G 255 B 255).

Passo 12

Novamente, use as Guias Inteligentes (U) para alinhar a linha com a grade vertical. Certifique-se de que ela toque a borda direita da primeira listra vermelha.

Ou, se você fica mais confortável com números exatos, você pode usar o Ponto de Referência de Âncora e ajustar a posição da linha separadamente para os eixos X e Y.

Passo 13

Com a linha branca selecionada, pressione Enter. Uma nova janela será aberta com as opções de transformação. Defina a Posição Horizontal para 477 px. Pressione Copiar (Copy). Este passo irá duplicar a linha e movê-la para o lado direito.

Passo 14

Em seguida, vamos criar uma forma de coração. Usando a Ferramenta Elipse (L), crie um novo círculo com as dimensões de 17 px por 17 px. Preencha-o com a Cor Branca.

Passo 15

Com o círculo branco selecionado, pressione Enter. Uma nova janela irá abrir as propriedades de transformação. Defina a Posição Horizontal para 13 px. Certifique-se de clicar em Copiar. Este passo irá criar dois círculos idênticos que se sobrepõem em 13 px.

Passo 16

Usando a Ferramenta Estrela, crie um triângulo. Enquanto arrasta o cursor na tela para criar a estrela, pressione a Seta para Baixo até que você reduza o número de pontos para criar um triângulo.

Passo 17

Use a Ferramenta de Transformação Livre (E) para rotacionar o triângulo em 180 graus.

Passo 18

Diminua a Escala do triângulo no eixo vertical em 13 px.

Passo 19

Vá para Objeto > Caminho > Adicionar Pontos Âncora (Object > Path > Add Anchor Points). Este passo irá adicionar novos pontos âncoras no triângulo selecionado.

Passo 20

Use a Ferramenta Ponto de Ancoragem (Shift-C) para suavizar os cantos do ponto de ancoragem do meio. Ajuste a curva de Bezier de tal forma que ela crie uma borda curvada no lado direito do coração. Repita o mesmo passo no lado esquerdo do coração. Certifique-se de que ambos os lados estejam suaves e tenham o mesmo tamanho.

Passo 21

Use a Ferramenta de Transformação Livre (E) para posicionar a forma de coração entre as listras brancas.

Passo 22

Siga os Passos 10 - 13 para criar um novo conjunto de listras que será posicionado na parte inferior do cabeçalho. Certifique-se de que a Posição é de 306 px no Eixo-X (X-axis) e 560 px no Eixo-Y (Y-axis). Desta vez, deixe as listras menores no seu interior para que sobre espaço para o texto .

Passo 23

Use a Ferramenta de Texto (T) para adicionar um texto entre as listras inferiores. Novamente, a fonte é Proxima Nova Semibold.

Certifique-se de usar Versalete (Small Caps). Por que usar Versalete e não Todas Maiúsculas (All Caps)? Há uma grande diferença entre as duas na tipografia, dependendo da situação. A principal diferença é que a versalete usa um conjunto diferente de glifos comparada com Todas Maiúsculas. Em Versalete, o tamanho do glifo é ajustado para a altura de x para que o texto realçado pareça natural entre outras letras no parágrafo. Neste caso, o texto em Versalete (Small Caps) é adequado e parece mais atraente.

Perceba a diferença entre as duas.

Passo 24

Novamente, use a Ferramenta Tipo (T), digite o nome do salão - Salone Di Bellezza. Este título usa a fonte Canter Outline, que está disponível para download de graça. O Tamanho da Fonte (Text Size) é 190 pt.

Passo 25

Use a Ferramenta Inclinar para inclinar o texto. Certifique-se de que o Ângulo de Inclinação (Shear Angle) é de 348° e o Eixo (Axis) está definido como Vertical.

Passo 26

Duplique o título principal para criar um subtítulo. O subtítulo usa a fonte Canter Bold. O Tamanho do Texto (Text Size) é de 98 pt. Com a Ferramenta Transformação Livre (E), mova o subtítulo para baixo do título principal.

4. Criando a Seção "O Que Fazemos"

Passo 1

Usando a Ferramenta Retângulo (M) e crie um novo plano de fundo para a seção. Defina o seu Tamanho para 1300 px por 760 px. Preencha o retângulo com a Cor Marrom Pálida (R 216 G 207 B 195).

Passo 2

Coloque o novo fundo abaixo do menu superior. Se ajude com as Guias Inteligentes (U) (Smart Guides).

Passo 3

Com a seção do fundo selecionada, vá até o Painel de Aparência. Crie um novo Preenchimento (Fill) e deixe-o Preto.

Passo 4

Com o Preenchimento Preto selecionado, vá para Efeitos do Illustrator > Textura > Granulado (Illustrator Effects > Texture > Grain)

Passo 5

Na janela de efeitos, ajuste a Intensidade do Granulado (Grain Intensity) para 81. Defina o Contraste para 50. Use (Sprinkles) para o Tipo de Granulado (Grain Type).

Passo 6

'

Agora vá até a Opacidade do Preenchimento (Fill Opacity). Defina o Modo de Mesclagem para Luz Suave (Soft Light). Ajuste a Opacidade para 30%.

Passo 7

Duplique o subtítulo branco como referência de texto para criar um novo título para a seção "O Que Fazemos". O novo título usa uma Cor Escura (R 38 G 38 B 37). O Tamanho do Texto (Text Size) é de 67 px. Além disso, o Espaçamento dos Caracteres (Character Tracking) é ajustado para o valor negativo de -10.

Passo 8

Crie um Novo Parágrafo. Digite um texto fictício. A fonte usada é a Proxima Nova Regular. Defina o Tamanho (Size) para 15,5 pt. Defina as Entrelinhas (Leading) para 23 pt. A cor do texto deve ser a mesma do título.

Passo 9

Selecione o primeiro parágrafo. Clique Alt-Arraste para baixo. Isto irá duplicar o parágrafo criando outro. Certifique-se de ter espaço suficiente entre esses parágrafos para inserirmos os ícones que iremos criar posteriormente.

Passo 10

Vamos criar uma assinatura. Use a Ferramenta Caneta (P) para criar uma linha curvada.

Passo 11

Selecione a Ferramenta Tipo (T) e mova-a sobre a linha curvada. O cursor indicará que você pode digitar sobre a linha.

Passo 12

Digite o nome desejado, por exemplo, "Emilly Douglass." A fonte é a LHF Sofia Script Regular. Defina o Tamanho do Texto (Text Size) para 44 pt.

Passo 13

Com a Ferramenta de Seleção Direta (A), brinque com as alças do texto para mover o texto curvado para o demarcador no lugar certo.

Passo 14

Com a Ferramenta Elipse (L), crie um novo círculo. Defina suas dimensões para 90 x 90 px. Ajuste a Espessura do Traçado (Stroke Weight) para 3 pt. A Cor será um Preto Escuro (R 38 G 38 B 37) - a mesma do texto anterior.

Passo 15

Com a Ferramenta Retângulo (M), crie um novo retângulo. Defina suas dimensões para 14 x 28 px.

Passo 16

Certifique-se de que a opção Alinhar à Grade de Pixels (Align to Pixel Grid) está desmarcada no Painel Transformar. Com a Ferramenta de Seleção Direta (A) aproxime um pouco os pontos de ancoragem superiores.

Passo 17

Em seguida, use a Ferramenta Retângulo Arredondado para criar um retângulo arredondado. Defina suas dimensões para 23 x 29 px. Você pode ajustar o tamanho do raio dos cantos pressionando as Setinhas para Cima e para Baixo enquanto arrasta o retângulo.

Passo 18

Novamente, com a Ferramenta de Seleção Direta (A), aproxime um pouco os dois pontos de ancoragem inferiores.

Passo 19

Crie um novo retângulo com a Ferramenta Retângulo (M). Defina seu tamanho (size) para 11 x 17 px e posicione-o no canto superior esquerdo dentro da forma arredondada.

Passo 20

Pressione P para ativar a Ferramenta Caneta. Mova seu cursor para o canto inferior direito até que ele indique que você pode excluir o ponto de ancoragem. Clique para excluir o ponto de ancoragem.

Passo 21

Em seguida, selecione o canto superior esquerdo com a Ferramenta de Seleção Direta (A) e desloque-o um pouco para a esquerda.

Passo 22

Com o ponto de ancoragem superior esquerdo ainda selecionado, ajuste o raio do canto arrastando o ponto branco que está dentro da forma. Este recurso é chamado de Live Corners (Cantos Ativos) e está disponível no Illustrator CC.

Passo 23

Com a Ferramenta Retângulo (M), crie um novo retângulo com o tamanho (size) de 15 x 31 px.

Passo 24

Novamente, com a Ferramenta de Seleção Direta (A), aproxime cada um dos pontos de ancoragem inferiores para o mais próximo possível um do outro.

Passo 25

Com a Ferramenta Retângulo Arredondado, crie um novo retângulo com o tamanho (size) de 3 x 18 px. Inverta a cor do traçado com a cor de preenchimento na Paleta de Cores (Shift-X).

Passo 26

Com a Ferramenta Estrela, crie um novo triângulo. Lembre-se de pressionar a Seta para Baixo enquanto arrasta a forma para reduzir a quantidade de pontos. Certifique-se de que o triângulo meça 5 x 6,5 px.

Passo 27

Use a Ferramenta de Seleção Direta (A) para ativar a opção Live Corner (Cantos Ativos) e manipule o ponto de ancoragem inferior para criar um canto arredondado.

Passo 28

Adicione um texto com a Ferramenta Texto (T). A fonte que será utilizada é a Proxima Nova Semibold. Defina o Tamanho do Texto (Text Size) para 19 pt. Ajuste as Entrelinhas (Leading) para 22 pt e o Espaçamento entre as Letras (Tracking) para 75.

Passo 29

Vamos criar o ícone do frasco de perfume. Use a Ferramenta Elipse (L) para criar um novo círculo. Defina o seu tamanho (size) para 90 x 90 px.

Passo 30

Crie um novo círculo em seu interior. Defina o seu tamanho (size) para 37 x 37 px. Além disso, certifique-se de que a Espessura do Traçado (Stroke Weight) é de 2 pt. Não se esqueça de desmarcar a opção Alinhar à Grade de Pixels (Align to Pixel Grid).

Passo 31

Crie um novo retângulo com a Ferramenta Retângulo (M). Defina o seu tamanho (size) para 13 x 12 px.

Passo 32

Com a Ferramenta de Seleção Direta (A), selecione os pontos de ancoragem superiores arrastando a alça de círculo branco, manipule os pontos de ancoragem para criar cantos arredondados.

Passo 33

Crie um Novo Retângulo (M). Defina o seu tamanho (size) para 9 x 9 px. Com a Ferramenta Transformação Livre (E), rotacione o retângulo em 90º.

Passo 34

Com o retângulo selecionado, use a Ferramenta de Seleção Direta (A) para ativar a Ferramenta Cantos Ativos (Live Corners Tool) e ajuste levemente a alça branca para criar cantos arredondados.

Passo 35

Crie um novo retângulo. Defina o seu tamanho para 6 x 3 px. Coloque este retângulo sobre o primeiro.

Passo 36

Selecione ambos os retângulos e Mescle-os no Painel Pathfinder.

Passo 37

Usando a Ferramenta Retângulo Arredondado, crie uma nova forma com as dimensões de 18 x 14 px.

Passo 38

Com o círculo selecionado, vá para Objeto > Caminho > Deslocar Caminho (Object > Path > Offset Path)

Passo 39

Defina o Deslocamento (Offset) para -9 px.

Passo 40

Com a Ferramenta de Seleção Direta (A), remova os pontos de ancoragem inferior e direito. Defina a Espessura do Traçado (Stroke Weight) para 10 pt.

Passo 41

Use a Ferramenta Largura (Shift-W) para ajustar as larguras do traçado. Brinque com ela até obter o resultado certo.

Passo 42

Selecione a forma e vá para Objeto > Expandir Aparência.

Passo 43

Use a Ferramenta Conta-Gotas (I) para trocar o preenchimento do traçado da forma selecionada.

Passo 44

Com a Ferramenta Texto (T), adicione um novo texto. Ou, você pode copiar a mesma instância do texto anterior e usá-la como referência.

Passo 45

Crie um novo círculo usando a Ferramenta Elipse (L). Defina seu tamanho (size) para 90 x 90 px.

Passo 46

Ative a Ferramenta Caneta (P). Crie a forma mostrada abaixo. Use sua criatividade e imaginação. Perceba a posição das âncoras - quanto menos pontos de ancoragem você usar, mais suave a forma será.

Passo 47

Use a Ferramenta Elipse (L) para criar uma elipse dentro da alça da tesoura. Com a Ferramenta de Transformação Livre (E), rotacione a elipse alongada levemente para a esquerda.

Passo 48

Clique com o Botão Direito em ambas as formas selecionadas. Vá para Transformar > Refletir.

Passo 49

Reflita a forma no Eixo Vertical. Pressione Copiar.

Passo 50

Use a Ferramenta Transformação Livre (E) para mover a forma para a direita.

Passo 51

Use a Ferramenta Elipse (L) para criar uma nova forma. Defina seu tamanho (size) para 3 x 3 px. Preencha-a com a Cor Preto Escuro (R 38 G 38 B 37).

Passo 52

Use a Ferramenta Linha ( \ ) para criar uma linha vertical no meio da tesoura. Defina a Largura do Traçado (Stroke Weight) para 1 px.

Passo 53

Vamos ampliar. Com a Ferramenta de Seleção Direta (A), selecione os dois pontos de ancoragem superiores. Pressione J para Unir os Pontos de Ancoragem (Join Anchor Points) em uma única forma.

Passo 54

Com a Ferramenta Caneta (P), adicione outro ponto de ancoragem entre os dois pontos de ancoragem que foram unidos. Usando a Ferramenta de Seleção Direta (A), desloque o ponto de ancoragem levemente para cima. No Painel de Traçado (Stroke Panel), troque o Tipo de Canto (Corner Type) de Junção Arredondada (Round Join) para Junção de Mitra (Miter Join).

Passo 55

Use a Ferramenta Estrela para criar um triângulo no meio da tesoura.

Passo 56

Com a Ferramenta Seleção Direta (A), selecione o ponto de ancoragem do meio e pressione Delete.

Passo 57

Ative a Ferramenta Rotação (R). No painel de Rotação, defina o Ângulo para -40º.

Passo 58

Com a Ferramenta Texto (T), digite algum texto.

Passo 59

Use a grade vertical para a posicionar cada ícone uniformemente pelo espaço. Use a Ferramenta Transformação Livre (E) para essa finalidade.

Criando a Seção Antes & Depois

Passo 1

Vá para Arquivo > Inserir (Shift-Cmd/Ctrl-P) (File > Place) e selecione a imagem mostrada abaixo. Coloque-a dentro do documento.

Passo 2

Com a Ferramenta de Transformação Livre (E), mova a imagem para baixo do fundo marrom pálido.

Passo 3

Crie um novo retângulo com a Ferramenta Retângulo (M). Defina o seu tamanho (size) para 1300 x 840 px.

Passo 4

Mova este retângulo para baixo do fundo marrom pálido. Certifique-se de que ele está acima da imagem da mulher.

Passo 5

No Painel de Camadas, selecione a imagem e o retângulo preto. Pressione Cmd/Ctrl-7. Isto criará uma máscara de corte (clipping mask) do demarcador superior (path). A imagem será cortada na forma e tamanho exatas do demarcador.

Passo 6

Novamente vamos criar um novo retângulo. Defina seu tamanho (size) para 1300 x 840 px.

Passo 7

Use a Ferramenta Transformação Livre (E) para colocar este retângulo no mesmo local da imagem. Preencha-o com a Cor Preta (R 0 G 0 B 0). No Painel de Transparência, defina a Opacidade para 65%. Esta será uma sobreposição preta que ficará por cima da imagem para que o texto branco seja legível.

Passo 8

Pressione Alt-clique e arraste o título superior "O Que Fazemos" para movê-lo para baixo. Esta ação irá duplicar o título. Substitua o texto e preencha-o com a Cor Branca (R 255 G 255 B 255).

Passo 9

Repita este simples processo com o próximo bloco de texto. Novamente, preencha-o com a Cor Branca (R 255 G 255 B 255).

Passo 10

Crie um novo círculo com a Ferramenta Elipse (L). Defina seu tamanho (size) para 470 x 470 px. Preencha-o com a Cor Branca (R 255 G 255 B 255). No Painel de Transparência, defina sua Opacidade para 30%.

Passo 11

Com o círculo branco selecionado, pressione Enter. No Painel Mover, defina a Posição Horizontal para 400 px. Pressione Copiar.

Passo 12

Vá para Arquivo > Inserir (Shift-Cmd/Ctrl-P) (File > Place). Selecione a imagem mostrada abaixo e pressione Inserir (Place).

Passo 13

Com a Ferramenta de Transformação Livre (E), posicione a imagem diretamente acima do primeiro círculo.

Passo 14

Selecione o círculo abaixo da imagem e vá para Objeto > Caminho > Deslocar Caminho (Object > Path > Offset Path)

Passo 15

Defina o Deslocamento (Offset) para -22 px. Pressione OK.

Passo 16

No Painel de Camadas, mova o círculo branco sobre a imagem. Selecione a forma de círculo e a imagem. Pressione Cmd/Ctrl-7 para criar uma máscara de corte (clipping mask).

Passo 17

Selecione o círculo da direita. Vá para Objeto > Caminho > Deslocar Caminho (Object > Path > Offset Path).

Passo 18

Novamente, defina o Deslocamento (Offset) para -22 px. Pressione OK.

Passo 19

Preencha o círculo com a Cor Branca (R 255 G 255 B 255). No Painel de Transparência, defina a Opacidade para 100%.

Passo 20

Selecione o círculo branco e vá para Objeto > Caminho > Deslocar Caminho (Object > Path > Offset Path). Defina o Deslocamento (Offset) para -45 px.

Passo 21

No interior do círculo recém-criado, nós vamos digitar um texto. Ative a Ferramenta de texto (T). Mova seu cursor sobre o círculo até que o cursor indique que você pode digitar na forma do círculo.

Passo 22

Vamos digitar um pouco de texto. Defina o tamanho (size) do título para 23 px. Brinque com as opções do texto para ver o que funciona melhor para você. Siga as regras básicas de tipografia para garantir que o resultado final seja esteticamente agradável.

Passo 23

Use a Ferramenta Retângulo (M) para criar um novo retângulo. Defina o seu Tamanho (Size) para 70 x 70 px. Defina a Largura do Traçado (Stroke Weight) para 1 pt. Preencha o traçado com Branco (R 255 G 255 B 255).

Passo 24

Ative a Ferramenta de Transformação Livre (E). Segure Shift e rotacione o retângulo em 45º.

Passo 25

Com a Ferramenta de Seleção Direta (A), selecione o ponto de ancoragem da direita e pressione Delete.

Passo 26

Clique com o Botão Direito na forma e vá para Transformar > Refletir (Transform > Reflect).

Passo 27

No Painel Refletir, defina o Eixo (Axis) para Vertical. Pressione Copiar.

Passo 28

Use a Ferramenta de Transformação Livre (E) para mover a forma para a direita próxima ao círculo.

Criando a Seção A Inspiração

Passo 1

Crie um novo retângulo com a Ferramenta Retângulo (M). Defina seu tamanho (size) para 1300 x 360 px. Preencha-o com a Cor Cinza Pálido (R 218 G 218 B 218). Posicione o retângulo abaixo da seção "Antes & Depois".

Passo 2

No Painel de Aparência, crie um novo Preenchimento (Fill). Preencha-o com a Cor Preta (R 0 G 0 B 0).

Passo 3

Com o novo preenchimento selecionado, vá para Efeitos do Ilustrator > Textura > Granulado (Illustrator Effects > Texture > Grain).

Passo 4

No Painel do Efeito Granulado, defina a Intensidade para 81 e o Contraste para 50. Use o (Sprinkles) como Tipo de Granulado (Grain Type).

Passo 5

No Painel de Aparência, defina o Modo de Mesclagem (Blending Mode) para Luz Suave (Soft Light). Ajuste a Opacidade para 25%.

Passo 6

Pressione Alt-clique e arraste o texto anterior do título para criar um novo texto. Reescreva o texto selecionado.

Passo 7

Preencha o novo texto com a Cor Vermelha (R 186 G 67 B 63).

Passo 8

Repita o mesmo processo de cópia e duplique o coração e as listras da seção do cabeçalho. Use a Ferramenta de Seleção Direta (A) para encurtar as listras e preencha o Traçado (Stroke) com a Cor Vermelha (R 186 G 67 B 63).

Passo 9

Vá para Arquivo > Inserir (Cmd/Ctrl - Shift - P). Selecione a imagem desejada e importe-a no documento.

Passo 10

Com a Ferramenta Transformação Livre (E), alinhe a imagem verticalmente e mova-a diretamente para baixo do retângulo cinza pálido.

Passo 11

Crie um novo retângulo com a Ferramenta Retângulo (M). Defina o tamanho dele para 1300 px por 55 px.

Passo 12

No Painel de Transparência, defina a Opacidade para 60%.

Passo 13

Use a Ferramenta Elipse (L) para criar um novo círculo. Defina o seu tamanho (size) para 11 x 11 px. Preencha-o com a Cor Cinza Pálida (R 221 G 221 B 221).

Passo 14

Com o círculo selecionado, pressione Enter. No Painel Mover, defina a Posição Horizontal para 30 px. Pressione Copiar.

Passo 15

Repita o passo anterior para criar vários círculos do mesmo tamanho. Ou, simplesmente pressione Cmd-D/Ctrl-D várias vezes.

Passo 16

Com a Ferramenta Seleção (V), selecione os quatro círculos anteriores e preencha-os com a Cor Cinza Escuro (R 48 G 48 B 48).

Passo 17

Pressione Ctrl-G para Agrupar os círculos e Alinhe-os Horizontalmente à Prancheta (Artboard).

Passo 18

Selecione as formas de seta anteriores e pressione Alt-Arraste as setas para baixo para a seção "Inspiração".

Criando a Seção Encontre-nos

Passo 1

Com a Ferramenta de Seleção (V), duplique o plano de fundo marrom claro da seção superior.

Passo 2

Selecione o fundo marrom e defina o Ponto de Referência para a Aresta Superior. Defina a altura do retângulo para 404 px.

Passo 3

Duplique as novas seções de texto - repita o mesmo processo que nós utilizamos nas seção anteriores. Preencha o texto com a Cor Preto Escuro (R 38 G 38 B 37).

Passo 4

Em seguida, crie um novo bloco de texto com a Ferramenta Texto (T). Defina o Tamanho da Fonte (Font Size) para 18 pt, as Entrelinhas (Leading) para 22 pt e o Espaçamento (Tracking) para 75.

Passo 5

Crie um novo retângulo com a Ferramenta Retângulo (M), defina o Tamanho (Size) para 1300 px por 500 px

Passo 6

Vá para Arquivo > Inserir (File > Place) (Cmd/Ctrl - Shift - P) e importe a Imagem do Mapa.

Passo 7

No Painel Camadas, mova a imagem do mapa para baixo do retângulo preto. Com ambos os objetos selecionados, pressione Cmd-7 para criar uma máscara de corte.

Passo 8

Com a Ferramenta Texto (T), crie um texto de "Direitos de Cópia" (Copyright) abaixo da seção Encontre-nos. Preencha-o com a Cor Cinza (R 89 G 89 B 89). Defina o Tamanho da Fonte para 11 pt e use Todas Maiúsculas (All Caps). Sinta-se livre para colocar alguma logo vetorizada da sua empresa também.

Passo 9

Crie um novo retângulo com a Ferramenta Retângulo (M). Defina seu tamanho para 1300 px por 4370 px.

Passo 10

Clique com o Botão Direito do Mouse no retângulo e vá para Organizar > Enviar para Trás (Arrange > Send to Back).Este passo irá mover o retângulo para trás de todos os objetos e elementos no documento.

Passo 11

Com o retângulo ainda selecionado, vá para Efeitos do Ilustrator > Estilizar > Sombra (Illustrator Effects > Stylize > Drop Shadow)

Passo 12

No Painel de Sombra Projetada, defina a Opacidade para 75%. Ajuste o Desfoque (Blur) para 6 px.

Conclusão

Parabéns! Neste tutorial nós usamos ferramentas simples, técnicas e efeitos sutis para criar o projeto de um website minimalista. Espero que tenha gostado deste tutorial e tenha aprendido alguma coisa nova e útil.

One subscription.
Unlimited Downloads.
Get unlimited downloads