Andei recebendo alguns emails perguntando como criar aquele efeito 'linen texture' que vemos no iOS em iPads e iPhones. Eu gosto do efeito mas nunca havia parado para pensar se poderia reproduzí-lo no Photoshop, então na semana passada, depois de tantos emails, resolvi tentar.

Neste tutorial vou mostrar a vocês como criar o efeito linen texture no Photoshop e também como criar o efeito metal/glass que vemos no logo da Apple no iOS.

Passo 1

Abra o Photoshop e crie um novo documento. Estou usando 2560x1440 pixels no tamanho. Depois disso preencha a background layer com preto.

Easy iOS Style Wallpaper in Photoshop

Passo 2

Adicione uma nova layer e a preencha com branco usando a Paint Bucket Tool (G). Depois selecione preto e branco para background e foreground e vá até Filter>Noise>Add Noise. Use 100% em Amount, Gaussian em Distribution e selecione Monochromatic. Duplique essa layer.

Easy iOS Style Wallpaper in Photoshop

Passo 3

Selecione uma das layers com o noise filter e vá até Filter>Blur>Motion Blur. Use 90º em Angle e 50 pixels em Distance.

Easy iOS Style Wallpaper in Photoshop

Passo 4

Selecione a outra layer com noise e vá novamente até Filter>Blur>Motion Blur. Use 90º em Angle e 50 pixels em Distance.

Easy iOS Style Wallpaper in Photoshop

Passo 5

Você terá duas layers com o efeito blurry, uma terá textura vertical e a outra textura horizontal. Selecione a que estiver no topo e troque o Blend Mode para Multiply. Agrupe as 2 layers em um folder e troque a opacity para 40%.

Como aplicamos o motion blur, as margens ficam um pouco transparentes, então selecione as duas layers e vá até Edit>Transform>Scale. Aumente um pouco o tamanho das layers para que possa esconder aquelas margens.

Easy iOS Style Wallpaper in Photoshop

Passo 6

Agora importe um símbolo para usar no seu wallpaper. Estou usando o símbolo do Abduzeedo. Posicione o símbolo no meio do documento.

Easy iOS Style Wallpaper in Photoshop

Passo 7

Vá até Layer>Layer Styles>Gradient Overlay. Clique em gradient colors para abrir o Gradient Editor. Use um esquema de cores como o da imagem abaixo.

Easy iOS Style Wallpaper in Photoshop

Passo 8

Agora de volta as opções Gradient Overlay, troque Style para Radial e aumente o tamanho para 150%. Clique então no símbolo e o mova para a gradient position. Use a imagem abaixo como referência.

Easy iOS Style Wallpaper in Photoshop

Passo 9

Selecione Bevel and Emboss. Use Inner Bevel para Style, 150% para Depth, Down para Direction, 1 pixel para Size e 2 pixels para Soften. No Shading use 103º no Angle, 40º em Altitude. No Highlight Mode use Screen com branco em 100% Opacity, e para Shadow Mode use Multiply com preto em 30%.

Easy iOS Style Wallpaper in Photoshop

Passo 10

Selecione Inner Shadow. Use Screen em Blend Mode com a cor branca, -90º de Angle, 5 pixels de Distance, 25% de Choke e 5 pixels de Size.

Easy iOS Style Wallpaper in Photoshop

Passo 11

Agora selecione Drop Shadow. Use Multiply em Blend Mode com a cor preta. Em Angle use 90º 5 pixels de Distance, 0% de Spread e 15 pixels de Size.

Easy iOS Style Wallpaper in Photoshop

Passo 12

Esse é o efeito que você terá depois desses 12 passos.

Easy iOS Style Wallpaper in Photoshop

Passo 13

Adicione uma nova layer acima do símbolo. Selecione a área do símbolo clicando com o botão direito do mouse na thumbnail da layer, selecione então a opção Select Pixels. Depois vá até Layer>Layer Mask>Reveal Selection. Então com a Brush Tool (B) e um 'very soft brush' e a cor branca, pinte no centro do símbolo. Troque também a Opacity para 40%. A ideia nesse passo é criar uma reflexão no efeito metal.

Easy iOS Style Wallpaper in Photoshop

Passo 14

Agora adicione o texto. No meu caso adicionei o logo do Abduzeedo. Depois vá até Layer>Layer Styles. Use cinza na cor com Multiply.

Easy iOS Style Wallpaper in Photoshop

Passo 15

Selecione então Inner Shadow. Use Multiply no Blend Mode com a cor preta. Para Angle use 120º, 2 pixels em Distance, 0% em Choke e 2 pixels em Size.

Easy iOS Style Wallpaper in Photoshop

Ordem das Layers

Easy iOS Style Wallpaper in Photoshop

Conclusão

Aqui está o resultado final do tutorial. A ideia do tutorial era mostrar como criar a line texture mas decidi adicionar um logo com o estilo do efeito do logo da Apple. O processo é bastante simples e se quiser usar cores diferentes para a linen texture basta trocar a cor do background ou a opacity das 2 layers com o noise/motion blur, as que criamos no passo 2.

Easy iOS Style Wallpaper in Photoshop

Versão mais Escura

Easy iOS Style Wallpaper in Photoshop

Download do Arquivo Photoshop

Clique aqui para fazer o download do arquivo Photoshop usado nesse tutorial

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.