Aug 17
Jeff3D, Flash 3d animation, 3d modeling, 3d web design
We here at Reef Light Interactive think that our 3D work is what truly sets us apart from other online agencies. Bringing life and vitality to a website, our 3D modeling allows for our clients selling proposition to jump off the page. With that in mind, we wanted to highlight some of our 3D modeling process.
To start any model, we base it off of client provided photography. Based off of those images, we start rendering the object in our 3D modeling application, first building the wireframes. Once that has captured the real shapes and contours of the image, we then proceed to adding realistic elements in a virtual scene. These elements including lighting effects, textures, viewing angles, shadows, etc. Upon completion, these 3D models can then be used as images for print or the web, can be animated to be used on a website, or as a real-time visualization inside of a computer game.
That’s the quick summary of our 3D modeling, but to have a better understanding of the process we can break it down into these 4 categories:
- Modeling
- Texturing
- Lighting & Rendering
- Animation
Modeling:
Modeling here refers to making a 3D virtual version of an object we see in real life – a virtual geometrical representation of an object. We feel confident that we can model any object, be it a simple sphere all the way to an automobile, buildings and bridges.
Several of our clients to date have been bakeries, so we have been working on modeling food images recently. In the example below we’ll showcase our work modeling cupcakes, an image that lends itself well to 3D modeling as it really appeals to the viewer’s senses (sight – bright colors, taste, etc.).
To start the process, we took some photography of the cupcakes we wanted to model (Figure 1):
Figure1
Based off of those images, we then created the wireframes of these models, seen below (Figure 2):
Figure2
Texturing:
Once we are set with our 3D models, we move on to textures. Textures take images that appear dull and computer generated, and gives them realistic features. Textures control the model’s surface characteristics, which include: Surface color, Transparency, Glossiness, Reflection, Refraction,….etc . Our “texturized” models can be seen below (Figure 3):
Figure3
Lighting & Rendering:
After we have created our 3D models and given them textures, we move on to lighting effects. This is the stage where they no longer appear as if computer generated images, but rather real-world images. To achieve this effect, we layer in familiar lighting sources such as light bulbs, the sun, spotlight, 3 point lighting, etc. – all of which have unique characteristics.
Once we are happy with the models texture and lighting effects, we move on to rendering. This refers to the process where we finalize the images into a two-dimensional, pixel based image, which will then allow us the flexibility to place where we want or to animate. The final, rendered models can be seen below (Figure 4).
Figure4
Animation:
The final stage of our 3D modeling process involves animation – where life is breathed into the images. Animating these models requires a lot of skill and practice, and an animator needs to understand the basics of physical principles in the real world in order to have a convincing result .
Once the object is modeled in 3D, this has allowed for the image to have representations from any angle and/or distance. This is important to note as in 2D animation, each frame would need to be drawn separately to achieve this effect, greatly reducing animation time. That is not to say that 3D animation is a fast process by any means, simply faster than it had once been. We still need to render each frame of the animation (creating two-dimensional pixel based images), and then combine all of those scenes together into a movie, creating the effect of animation. This process can be time consuming, as every rendered frame needs to blend seamlessly together.
To see the final product of this example, take a look at http://bakery.reeflightinteractive.com.
_____________________________________________________________________________________
As you can see, 3D graphics can be a powerful way to showcase your website, highlight a specific product or service, and truly set it apart from the competition.
Aug 04
Jeff3D, Client Spotlight, Flash, SEO, Web Design 3d web design, Reef Light Interactive
Hi all! We’d like to welcome you to our brand new site! We’d also like to welcome you to The Lightbox, our brand new blog. In the coming months we’d like to use this space to talk about design trends and issues, highlight some of our new client work we’re especially proud of, and any other random thoughts that may pop into our collective heads. We’ll try not to talk about ourselves too much, unless it provides some value or insight into the start-up experience, or gives our readers a better sense of us personally or what our company hopes to achieve.
The Re-Branding
There comes a time in every small business where they reach a cross-road. What began as a hobby or passion has really started to take off, and your business vision is starting to materialize. New customers/clients are contacting you every day, and it’s at that point that you need to decide how to take your business to that next level.
It’s with that in my mind that we approached our re-branding. We’ve kept the same name – Reef Light Interactive – but that’s about it. Our color scheme, logo, business cards, letterhead, and most importantly, our website, have all undergone a dramatic change. These elements are all representative of what we now value:
- Exceptionally unique, quality, work
- Complex messages delivered simply
Keep these values in mind as you peruse the new site, or any of our client work. As you’ll see, we took them seriously as we overhauled the site.
The Website Redesign
Imagery — The first thing you probably noticed was the 3D lighthouse. We take pride in our 3D talent – rendering objects as realistically as possible, with articulate detail, and accurate lighting effects, so we wanted this to be front and center. It not only captures a visitor’s attention, but gives a clear indication of what our specialty is.
What’s with the cubes? Well, that’s for you to figure out. In our first draft of the redesign, we included the red and white cubes at the base of the lighthouse, to add a twist to the image. We showed family and friends, and without question the cube designs were polarizing. People thought they were visually interesting, if confusing, vs. outright disliking them. We could have easily removed them from our next iterations, but instead we’ve decided that this is a perfect representation of what we value – something exceptionally unique while visually arresting. They were perfect. Go ahead and explore them a bit more – - you may learn something about “the cubes”.
While we’re on lighthouses, the 2 other images that have been redesigned are our logo, and our watermark. With these images, we wanted to carry through the look and feel of our main lighthouse, but more simply. Be on the lookout for our watermark, which lives in the bottom right hand corner of any website we design!
Color Scheme
It’s been described as Where’s Waldo meets plastic pills…either way you look at it, the red and white jump out! With our new color scheme, we wanted to help our site really jump off the page, while still maintaining a professional look and feel. The combination of the red and white is a perfect metaphor for our values; the red being unique and eye-catching, with the white symbolizing clarity and simplicity of our designs.
Layout
With the imagery and the colors selected for the site, we got down to the business of site architecture. Although we had several pieces of content we wanted to communicate via our site, including our portfolio, about our company, our credentials, etc., we didn’t want to over complicate things.
With that in mind we decided on a simple top level navigation, with clear titles beginning with “Our..”, making it simple to read and understand what each site section contains.
Our sub-pages follow simple, self explanatory layouts. Our Expertise, Story, and Awards page layout relevant information with large visuals and easy to read fonts, and Get in Touch provides an easy to use contact form.
We reserved the footer for information outside the scope of our main site navigation; including business contact information, our newsroom, recent Lightbox blog posts, and our corporate partners.
Finally, the “Our Work” page stands apart from the rest. We encountered a challenge when designing our portfolio, as we wanted to display examples of multiple services without creating a messy user experience. How would we display web design, flash, SEO, 3d, online strategy, print, and logo services on our site – with some clients falling into 2 if not several categories? The solution soon appeared to us – AJAX! Using this technology, we were able to shuffle around thumbnails all on one page, with users able to filter by service to see what we did for which clients. A simple, yet effective technique! Beyond that, we enabled each thumbnail to provide more information upon roll over and click, so we’ve been able to build a robust gallery in a simple to use format.
That’s all folks…
As you can see, we put a lot of thought into this redesign, as we do with all of our work. I’ve always thought that a web design agency’s website is all you need to see to make a judgment of their quality of work. If they don’t take their own work seriously, how can they take a clients work? In this case, it’s okay to judge a book by its cover. We feel confident that our cover in this sense is an accurate representation of what’s inside; an agency dedicated to helping you stand apart online.
Subscribe to our rss