Tutorial: Como Criar Um Mockup No Photoshop

Descrição: Neste tutorial veremos como criar um mockup usando o Photoshop, adjustment layers, smart objects e alguns outros recursos do Photoshop.

Para criar um mockup realista o ideal é que você faça um desenho em perspectiva do que deseja ou utilize uma fotografia de um modelo real como base para a criação, no caso deste tutorial será usado um desenho como base para a criação do mockup.

01. Pressione Ctrl+N para criar um novo documento, defina o tamanho de 1000×600 pixels, 72 dpi’s e modo de cor em RGB, pressione Ok, vá em File> Place e adicione a imagem com o desenho do mockup, com a tecla Shift pressionada clique e arraste para redimensionar a imagem como na foto abaixo e pressione Enter para finalizar a transformação.

02. Pressione Ctrl+G três vezes para criar três folders, dê o nome de box1, box2 e box3.

03. Pressione a letra P do teclado para selecionar a Pen Tool, certifique-se de que a opção Shape esteja selecionada na barra de opções da ferramenta, escolha uma cor qualquer, como na foto abaixo.

04. Clique no folder Box 1 e depois clique nas pontas da parte frontal da caixa 1 para criar o primeiro shape da caixa.

05. Escolha uma nova cor, desta vez crie o shape da parte lateral da caixa 1.

06. Clique na layer que contém a parte frontal da caixa 1.

07. Vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo.

08. Clique na layer que contém o shape da lateral da caixa 1, vá em Layer> Layer Style> Gradient Overlay e defina os mesmos valores.

09. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, deixe a layer abaixo da layer com o shape frontal da caixa 1, pressione a letra L do teclado para selecionar a Polygonal Lasso Tool, crie uma seleção como na imagem abaixo, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique na seleção para preencher com preto.

10. Vá em Filter> Blur> Gaussian Blur e defina os valores abaixo.

11. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione a letra L do teclado para selecionar a Polygonal Lasso Tool, crie uma seleção como a da foto abaixo, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique na seleção para preencher com preto.

12. Vá em Filter> Blur> Gaussian Blur e defina os valores abaixo.

13. Pressione a letra E do teclado para selecionar a Eraser Tool, escolha um brush de pontas suaves e tamanho médio, aplique a Eraser Tool para apagar suavemente o efeito.

14. Reduza a opacidade da layer para um valor entre 10% a 15%.

15. Repita o mesmo processo para adicionar uma nova sombra do lado oposto da caixa, como na foto abaixo.

16. Clique no folder box 1 e vá em Layer> Hide Layers para retirar a visibilidade do folder, clique no folder box 2, repita o procedimento que fizemos anteriormente para criar as três faces da segunda caixa, como na foto abaixo.

17. Vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo, repita o procedimento para as 3 layers do folder box 2.

18. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, deixe a layer abaixo das layers com as faces da caixa 2, pressione a letra L do teclado para selecionar a Polygonal Lasso Tool, crie uma seleção como na imagem abaixo, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique na seleção para preencher com preto, vá em Filter> Blur> Gaussian Blur e defina os valores abaixo.

19. Pressione Ctrl+J para duplicar a layer da sombra, vá em Filter> Blur> Gaussian Blur, defina os valores abaixo e pressione Ok.

20. Diminua a opacidade da layer para 35%.

21. Deixe o folder box 2 abaixo do folder box 1.

22. Clique no folder box 2, vá em Layer> Hide Layers para remover a visibilidade do folder, clique no folder box 3 e repita o procedimento para criar as três faces da terceira caixa.

23. Vá em Layer> Layer Style> Gradient Overlay, defina os valores usados anteriormente e clique em Ok, aplique a mesma layer style em todas as layers do box 3.

24. Clique no folder box 2 e vá em Layer> Show Layers para ativar a visibilidade do folder.

25. Clique no box 3, pressione Ctrl+Shift+Alt+N para criar uma nova layer, deixe a layer abaixo das layers com as faces das caixa 3, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra B do teclado para selecionar a Brush Tool, escolha um brush de pontas suaves e tamanho pequeno, aplique o brush para criar uma sombra como na foto abaixo, pressione Ctrl+G para colocar a layer dentro de outro folder, dê o nome de Shadow.

26. Pressione a letra E do teclado para selecionar a Eraser Tool, escolha um brush de pontas suaves e tamanho médio, diminua a opacidade do brush, aplique em algumas partes da sombra para suavizar o resultado final.

27. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione a letra L do teclado para selecionar a Polygonal Lasso Tool, crie uma seleção como a da foto abaixo, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique dentro da seleção para preencher com preto.

28. Vá em Filter> Blur> Gaussian Blur e defina os valores abaixo.

29. Selecione a Blur Tool, aplique a ferramenta nas bordas da sombra para suavizar o efeito, pressione a letra E do teclado para selecionar a Eraser Tool, escolha um brush de tamanho médio e pontas suaves, diminua a opacidade e aplique sobre a sombra, diminua a opacidade da layer levemente.

30. Pressione a letra L do teclado para selecionar a Polygonal Lasso Tool, crie uma seleção na parte inferior da sombra, como na foto abaixo, vá em Select> Modify> Feather e defina os valores abaixo.

31. Vá em Filter> Blur> Gaussian Blur e defina os valores abaixo.

32. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra B do teclado para selecionar a Brush Tool, escolha um brush de pontas suaves e tamanho médio, aplique como na foto abaixo, pressione a letra E do teclado para selecionar a Eraser Tool, escolha um brush de pontas suaves e tamanho médio, aplique o brush como na foto abaixo.

33. Sua imagem deverá ficar como a foto abaixo.

34. Ative a visibilidade de todos os folders com as caixas.

35. Clique no folder box 2, pressione Ctrl+Shift+Alt+N para criar uma nova layer, deixe a layer abaixo de todas as outras, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique no documento para preencher a seleção com preto, vá em Filter> Blur> Gaussian Blur e defina os valores abaixo.

36. Reduza levemente a opacidade da layer.

37. Neste mockup usaremos três artes para a parte frontal, lateral e inferior das caixas.

38. Remova a visibilidade dos três folders, vá em File> Place e importe a arte que irá na parte frontal da caixa, repita o procedimento e importe a arte que irá na lateral e parte inferior da caixa.

39. Dê o nome de front para a layer que contém a arte da parte frontal da caixa, side para a layer para a arte lateral e bottom para a layer que contém a arte para a parte inferior da caixa.

40. Clique sobre a layer bottom e escolha a opção Convert to Smart Object, repita o procedimento nas outras layers de arte para as caixas.

41. Com a tecla Ctrl pressionada clique sobre as três layers que contém arte para as caixas, pressione Ctrl+G para agrupar as layers dentro de um folder, clique na layer front e pressione Ctrl+J para duplicar a layer, repita o procedimento com a layer side, jogue as duas layers dentro do folder box 1, clique no ícone do folder e vá em Layer> Hide Layers para remover a visibilidade das layers dentro do folder.

42. Clique no folder box 1 e vá em Layer> Show Layers para habilitar a visibilidade do folder.

43. Clique na layer com a arte que irá na parte frontal da caixa, diminua a opacidade para 10%, pressione Ctrl+T para abrir a caixa de Free Transform, clique com o botão direito do mouse dentro da caixa de Free Transform e escolha a opção Distort.

42. Ajuste a arte com a parte frontal da caixa, como na foto abaixo.

43. Pressione Enter para finalizar a transformação, vá em Layer> Create Clipping Mask, defina a opacidade da layer em 100%.

44. Repita o mesmo procedimento para a parte lateral da caixa.

45. Verifique se a parte lateral se encaixa com a parte frontal da caixa.

46. Caso tenha que realizar algum ajuste pressione Ctrl+T para abrir a caixa de Free Transform, clique com o botão direito do mouse dentro da caixa de Free Transform e escolha a opção Warp e ajuste como na foto abaixo, pressione Enter para finalizar a transformação.

47. Repita o procedimento para no folder box 2.

48. Repita o procedimento no box 3, sua imagem deverá ficar como a foto abaixo.

49. Seu mockup deverá ficar como a imagem abaixo.

50. Vá em Layer> New Fill Layer> Solid Color, defina os valores abaixo e pressione Ok, deixe a layer abaixo de todos os folders.

51. Vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo.

52. Clique na adjustment layer de Solid Color, vá em Layer> New Adjustment Layer> Hue/Saturation e defina os valores abaixo.

53. Clique duas vezes sobre a layer original com a arte frontal das caixas.

54. Faça qualquer tipo de alteração, no caso deste tutorial a cor do detalhes inferior foi alterada, pressione Ctrl+S para salvar o documento.

55. Ao voltar ao documento principal todas as caixas estarão atualizadas como na foto abaixo.

56. Repita o procedimento alterando outros detalhes.

57. Clique em cada uma das layers indicadas abaixo e pressione Ctrl+J para duplicar a layer.

58. Pressione Ctrl+G para criar um novo grupo, dê o nome de Reflection, pressione Ctrl+G duas vezes para criar dois folders, dê o nome de box 1 e box 2, jogue as cópias das layers dentro destes folders.

59. Clique na layer da arte lateral do box 1, pressione Ctrl+T para abrir a caixa de Free Transform, clique com o botão direito do mouse dentro da caixa de Free Transform e escolha a opção Flip Vertical, arraste a cópia da arte para a posição indicada na foto abaixo e pressione Enter para finalizar a transformação.

60. Repita o mesmo procedimento para a arte frontal da caixa.

61. Agora repita o procedimento na segunda caixa.

62. Verifique se existe alguma distância entre a caixa original e a cópia que aplicamos abaixo, caso exista pressione a letra V do teclado para selecionar a Move Tool, clique na layer da cópia da arte frontal e arraste para cima.

63. Clique no folder box 1, clique no ícone de Add Layer Mask, clique na miniatura da máscara aplicada e pressione Ctrl+I para inverter a cor, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra B do teclado para selecionar a Brush Tool, escolha um brush de pontas suaves e tamanho grande, pressione a letra X do teclado para alternar as cores de Foreground e Background, aplique o brush para que sua imagem fique como a foto abaixo.

64. Repita o procedimento no box 2.

65. Clique no folder Reflection e diminua a opacidade para 30%.

66. Seu painel de layers deverá ficar parecido com o da imagem abaixo.

67. Pressione Ctrl+G para criar um novo folder, dê o nome de Shadow, jogue todas as layers de sombra que criamos lá dentro, pressione Ctrl+E para mesclar todas as layers em uma única layer.