Mundo 3D – Realismo no desenvolvimento de sites
Publicado em 4 de June de 2006 , na categoria Elementos e técnicas, WebdesignTipicamente, quando falamos em 3D a maior parte das pessoas pensa em movimento, em alta tecnologia e impacto, mas o 3D a que me refiro aqui é bem mais simples, se trata do conceito de inserir imagens, fotografias, texturas e gradientes de forma a adicionar um toque de realismo ao projeto. Representa muito melhor a elegância e a delicadeza do que o poder e tecnologia que estamos acostumados a relacionar com o estilo.
Existem, basicamente, duas formas de trabalhar com elementos 3D em web: usando elementos e fotografias ou usando gradiente e texturas.
A seguir uma amostra comentada para cada estilo.
- Utilizando fotografias:
1- A utilização de uma única fotografia fornece tudo o que é necessário para estabelecer profundidade. Embora a foto apareça sobrepondo a área do site, se formos analizar o html, não passa de uma imagem de fundo e é isso que permite que as informações de contato apareçam sobre ela sem nenhum problema. E a imagem foi muito bem escolhida por sinal, as fotos espalhadas e em perspectiva nos faz pensar se realmente o conteúdo e a área do site não estava ali no momento em que a foto foi tirada - Utilizando gradiente e texturas:
-
Nesse exemplo, dois gradientes compõem a imagem de fundo.
A parte superior é formada por três cores.
Observe que o jogo de luz e sombra foi utilizado para causar um efeito de alvorada, deixando as cores claras em baixo.
Esse estilo de degradê está sendo muito utilizado no conceito “web 2.0″.Somando o degradê com a imagem 3d em destaque o efeito de realidade é indiscutível- A segunda parte do fundo é um gradiente de quatro cores. Por usar mais do que duas cores no gradiente, o efeito fica mais realista e a noção de profundidade é bem maior. O ponto onde, virtualmente, fica o horizonte parece está bem distante do restante dos elementos, isso acontece por causa do uso de uma cor mais suave em baixo e mais escura em cima. Assim como são as coisas no mundo real.
- Uma imagem 3D posicionada sobre as demais, é o efeito fundamental para mostrar a profundidade do trabalho.
- Alguns objetos simples como essa Zebra podem ser construídos usando programas como o Illustrator, da adobe. Com ferramentas muito parecidas com softwares que todos estamos acostumados a usar como o Photoshop, isso evita complicações típicas de aprender a trabalhar com softwares específicos a 3d quando esse não é o objetivo de sua profissão.
Sugiro que comece estudando sobre Mapa de Bits. Esse é o segredo para projetar objetos interessantes.
Alguns tutoriais básicos: Veja como criar reflexo em texto com Photoshop Reflexo em texto com Fireworks - Os cantos arredondados no topo da estrutura, contra os cantos afiados na parte de baixo, deixa a impressão que as duas partes não estão ligadas, que não é uma placa inteira que compõe o fundo. Afinal, são os detalhes que agregam valor a esse trabalho.
Exemplos de sites
Links Tutoriais e teoria
Galeria de imagens
- Stock.XCHNG
- - Galeria com imagens gratuitas em alta resolução, o download é liberado depois do cadastro.
- Grupo Keystone
- Este site disponibiliza imagens com royalty free em baixa resolução e protegido em alta, com seção de procura com muitas fotos, também é possível encontrar filmes, música, e o catalogo de produtos da empresa.
- Creative Getty Image
- Com uma galeria de fotos muito grande, neste site temos que pagar pelas fotos utilizadas. Em inglês ou português
- Corbis
- Um site de vendas de fotos, mas com um bom acervo de fotos grátis. Em inglês ou português
Assinar
ACHEI VC LINDINHA E SEU BLOG TB MANEIRO , BEIJOSSS
MENINA ESTAVA AQUI LENDO SOBRE VC , ANTES DE LER VI ESSA PRIMEIRA FOTO AQUI ACHEI QUE VC FOSSE BEM NOVINHA, DIGO PARECE Q VC TEM UNS 11 ANOS DE IDADE LEGAL ,GOSTEI MUITO DO SEU BLOG
What a great site, how do you build such a cool site, its excellent.
Adorei seu site sem falar que tem muitas dicas Web e um ótimo conteudo
Oi Daniele, estava verificando na ferramenta para webmasters do google os links externos que apontam para meu blog e acabei vendo que você tinha me linkado, e foi nesse post.
Parabéns pelo blog, ainda estou vendo seus artigos e depois comento mais.
Como você irá descobrir eu sou programador mais dou meu pitacos em design, afinal de contas tenho que entender pra poder passar a idéia pro méu colega designer aqui na empresa hehehe.
t+
lake atitlan hotels
Sorry
vc poderia me indicar cursos online.. pra quem quer ser um webdesigner
Olá Daniele gostei muito da sua teoria aplicada à web.
Eu também concordo com vc em relação à idéia que se tem do mundo 3D de complicação, mas na verdade é mais simples do que se imagina, é que atualmente temos que nos adaptar as ferramentas 3D que são muito complicadas.
Mas acredito que num futuro próximo elas que se adaptaram as nossas necessidades e serão mais fácil que digitar um texto para manuseá-las.
Montei meu blog recentemente, sou totalmente amador nessa praia, mas quero aprimorá-lo e deixa-lo bem agradável esteticamente conforme eu for evoluindo.
http://azafi.blogspot.com/
Gostei de seu blog…Parabéns.