Daniele V Silva - Webdesigner, desenvolvedor front-end, programador de interfaces, Gerente de projetos web, consultora e freelancer

Untitled – Normal

Realismo no desenvolvimento de sites, fotografia e elementos 3D

Publicado em , por , na categoria Elementos e técnicas, Webdesign

Tipicamente, 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:
3D Utilizando imagens e fotos 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:
3D 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

  1. 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.
  2. 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: Reflexo em texto com Fireworks
  3. 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 Uso

11 opiniões sobre “Realismo no desenvolvimento de sites, fotografia e elementos 3D”

  1. Nelio Lemos disse:

    Estou a precisando que alguem faça para mim uma nave em 3d, pago muito bem pelo serviço, se eu gostar do resultado, tenho muito mais pedidos. Se puder me ajudar entre em contato ou recomende alguém.

    Grato.

  2. Lizette Geny MOnti disse:

    Gostaria de saber onde posso encontrar laminas lenticulares para que as fotos possam ter a impressão flip/3D de movimento. estou procurando sem sucesso essas lâminas ou algo similar. desde já agradeço sua atenção

    1. Roberto Cysne disse:

      Escreva, perdemos o contato …

  3. Gostei de seu blog…Parabéns.

  4. Azafi Andrade disse:

    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/

  5. Alessandro disse:

    vc poderia me indicar cursos online.. pra quem quer ser um webdesigner

  6. Rodrigo Maia disse:

    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+

  7. Gustavo Franco disse:

    Adorei seu site sem falar que tem muitas dicas Web e um ótimo conteudo 🙂

  8. What a great site, how do you build such a cool site, its excellent.

  9. CARLA disse:

    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

  10. CARLA disse:

    ACHEI VC LINDINHA E SEU BLOG TB MANEIRO , BEIJOSSS

Deixe uma resposta para CARLA Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *