Tutorial de Textura: Fibra de Carbono
Como já reparou no layout da Webgrafismo, temos tendência para utilizar patterns desenhados no Adobe Photoshop para decorar o fundo. Este procedimento é uma das opções disponíveis para tornar a abertura do site ligeiramente mais rápido. Com os padrões você apenas precisa de uma pequena porção de pixeis para dar uma total aparência ao background do site. E é por isto que hoje vou ensinar-lhe a criar as suas texturas no Photoshop, particularmente a Fibra de Carbono.
Esta é sem dúvida uma das minhas texturas preferidas, tanto pelos resultados que se obtêm, como pela rapidez da sua execução. Por isso se não sabe como criar os seus próprios Patterns no Photoshop, sugiro que comece agora! Siga os passos veja no final um dos resultados possíveis.
Passo 1: Crie um novo Documento
Abra o Photoshop, em qualquer das versões CS, CS2, CS3 ou CS4. Comece por criar um novo documento com dimensões 4×4 pixeis.
Passo 2: Divida os Pixeis em Rectângulos
Em primeiro lugar, você deve fazer o nível de Zoom máximo permitido para poder trabalhar. Ligue o Snap recorrendo a: View » Snap. Ligue o Rulers em: View » Rulers. Com isto pode traçar linhas de força para seleccionar as porções de pixeis que compõe o nosso projecto. Mais especificamente, 4px de largura e 4px de altura.
Seguidamente crie 8 layers, onde cada corresponde ao Rectângulo de Cor Hexadecimal distinta. Vá ao painel Layers, em New Layer. Depois seleccione o rectângulo que deseja preencher com cor sólida, e prima Edit » Fill » Color. Insira o número hexadecimal que surge na nossa primeira layer #232222. E continue a criar as restantes baseando-se no mesmo procedimento.
No final, o resultado será este que surge em baixo na imagem. Grave a imagem em “.GIF” ou “.JPG” e o projecto “.PSD”.
Neste exemplo, obteve-se 95 bytes para “.GIF” e 11Kb em “.JPG”. Muito leve n é? Experimente coloca-la no seu ambiente de trabalho (caso esteja impaciente) para a ver em acção. E confirme é claro, se o padrão ficou correcto!
Passo 3: Criar um Padrão ou Pattern
Agora precisa de fundir todas as layers. Por isso seleccione-as e prima com o botão direito do rato: “Merge All Layers”. Finalmente, utilize a ferramenta de selecção e o pattern: Edit » Define Pattern. Dê o nome final e faça OK.
Parabéns! A partir de agora já sabes criar patterns e grava-los no Photoshop (e disco rígido).
Agora é muito fácil criar uma textura. Simplesmente abra num novo documento, por exemplo com dimensões 1280×1000 px e aplique o seu Pattern. Verá que este foi automaticamente inserido como fundo do seu projecto, e na perfeição.
Resultado Final:
Observação: Agora pode brincar um pouco com a iluminação e obtem facilmente resultados bem profissionais.
Espero que tenha gostado deste primeiro tutorial em Photoshop na Webgrafismo. Qualquer dúvida ou sugestão sobre esta publicação, não hesite em perguntar-me! Bons trabalhos!
Após desenhar o layout do seu website em Photoshop, a fase seguinte consiste em converter o design em XHTML. Estes 3 vídeos tutoriais vão ensinar-lhe como pode fazer essa conversão. A primeira parte consiste em fazer o “slice” do ficheiro “.psd”, depois criar o XHTML e CSS. A terceira parte ainda lhe mostra como implementar [...]
A vantagem destes Templates em Photoshop, é que são desenhados por Designers Gráficos talentosos, e você pode examinar com atenção as técnicas e os métodos utilizados. Muitos deles são autênticas obras de arte e estão disponíveis gratuitamente. Hoje reunimos uma colecção em Photoshop fantástica de alta qualidade, que reúne templates de: iPod, iPhone, Autocolantes, Etiquetas, [...]
Pattern Tap é o novo website que pretende satisfazer e encoragar os designers e developers que procuram inspiração para os seus designs de interfaces. A equipa pretendeu ciar aquele site onde nos inspiramos para resolvermos certos problemas decorrentes do desenho de novas aplicações. No website vai poder encontrar inspiração para: Artigos, Leitores de Áudio, Imagens [...]
Como web designers, por vezes precisamos de templates como estes. No momento em que vamos apresentar o nosso trabalho aos clientes, ou quando trabalhamos em monitores de alta resolução. Os modelos de browsers em Photoshop do Firefox (Mac & PC) & IE vão ajudar-lhe (e aos outros) a obter uma ideia fresca de como irá [...]
Muito bom. ando interessado em explorar o photoshop acho que posso começar por aqui :D
Concerteza!
E se tiver alguma sugestão para um novo tutorial, sinta-se à vontade de a expor aqui.
Boa tarde. Tenho um blog sobre Photoshop e por coincidência, iniciei um tutorial parecido com o seu. Gostaria de saber se ao invés de terminar o meu tutorial, eu posso publicar o seu em meu blog e claro direcionar os créditos à você.
Aguardo o retorno.
abraços
Olá Jean, podes claro desde que menciones o link para este artigo. Abraço
Obrigado pedro. Já publiquei no blog.
http://canalphotoshop.info/2009/09/como-criar-textura-de-fibra-de-carbono.html
abraços
Ps: Caso queira publicar algum tutorial sobre Photoshop no meu blog, é só entrar em contato.
Muito bom esse Tutorial, Parabéns pelo site.
Pedro, boa tarde !
Primeiramente gostaria de parabenizá-lo pelo site ! pois gostei muito.
Estava tentando criar uma imagem com fundo de Fibra de Carbono com tamanho de 1280 x 1024. Mas não estou conseguindo concluir o tutorial. Gostaria muito de uma ajuda tua.
Por isso gostaria de saber se seraia possível me encaminhar uma imagem com fundo de fibra de carbono nessa medida que estou precisando. Claro se não for encomodo algum.
É que estou precisando muito mesmo ! se for possível mandar no mesmo email conforme foi colocado no registro para fazer este comentário ! Se conseguir me ajudar, ficarei muito grato.
Desde já agradeço pela atenção.
Rafael Ribeiro
Olá Rafael, no final de concluir o tutorial ficas com um pattern no photoshop.
Por isso, só tens depois de criar um novo documento, 1280×1024 e aplicar um preenchimento. Não de preto ou branco, mas sim do pattern que acabaste de criar.
O pattern irá preencher todo o documento. Experimenta. É mt simples. Abraço