3D CAD Smack! Graphic Design for Print and Web Using SolidWorks

by Josh on June 25, 2009 · Comments

We’re reaching deep in our pool of unusual uses for 3D CAD today and pulling out something extra shiny for ya. If you’re into graphic design or making pretty 3D icons and graphics for your website, you’ll want to adjust your seat.

You never would have thought it, but SolidWorks is extremely useful for creating 3-dimensional graphics for web and print design. Frank Parenteau has been doing it for years and SolidWorks is right there on the shelf to Photoshop. There’s even a trick you can use to get pixel perfect sizes in SolidWorks. Here’s how Frank makes it happen.

The process
Frank starts out with concept sketches to get the basic layout of the logo, site or whatever he is creating. From there, he scans the images and proceeds to model it using SolidWorks. Depending on what kind of look he’s trying to get, he’ll take it into PhotoWorks for some quick rendering and works with the camera angle/perspective to get an angle. This is particularly useful for logos and icons.

After he gets the 3D effect he likes, he saves out a .PSD file from SolidWorks and opens it with Photoshop. He’ll make image adjustments and add filters to the graphic, test out text and layout for the image. If it’s an entire site layout, he’ll add slices which allows him to crop the views and have them line up correctly online. Finally, he saves it out each graphic for use on the web. Here’s the steps.

  1. When starting any kind of design work, i aways start with sketches. First by drawing pretty much anything that comes to mind, then focusing on the ideas i like and refining them.
  2. For a website, i usually start out with a blank Photoshop file, and just position the basic elements, width, header height, content area dimensions, where the logo will be, etc.
  3. I will then import that image in a Solidworks sketch, and basically draw the elements i want, exactly where they would be, as i would in Illustrator for exemple.
  4. Then comes the rendering part, it’s really a case by case scenario, but it always involves trial and error, finding the right texture file, the perfect lighting, and making sure it doesn’t look “3D”.
  5. I render to file at a much higher resolution, then scale it back in my initial Photoshop layout.
  6. Lather, rince and repeat for any other element.

Why did Frank choose SolidWorks?

I am a big Solidworks user and believer, and i always try to push the limits of the software, especially the rendering engine. I quickly found out it was way much easier for me to draw shapes and layouts using the Solidworks sketch features, than it would of taken me to figure it out in Illustrator. Add the fact that you have an exact pixel to mm ratio, and you have the perfect tool for a graphic artist.

The SolidWorks Graphic Design pixel trick

The pixel to mm ratio is really helpful, as i can start a layout in Photoshop, get my overall dimensioning (in px), and when i do my stuff in SolidWorks, i know that after I re-scale my render, it will fit exactly where I wanted. A 10mm radius will equal a 10px corner.

Graphic Design Examples

The Fallen

Jazz Media

Nymoda
Here’s another example from a new site he is working on http://www.nymoda.ca/. The embossed white circle is actually a photoworks render.

Nymoda site graphic. Created using SolidWorks
Nymoda site graphic. Created using SolidWorks

The SolidSmack logo just so happens to be created using SolidWorks. Have you ever used SolidWorks or 3D CAD to produce 3D graphics for web or print?

(No Ratings Yet)
Loading ... Loading ...
Comments
  • Digital_Proto
    Thought you'd just like to see my site, all the graphics are rendered in solidworks. It makes it quite easy to change or add something and then just rerender. As an engineer I appreciate when things like shadows and highlights are uniform across the site. Graphic designers are happy to fake it as long as it looks nice, but it's just not the same having 3D geometry. Hope you enjoy it. www.digitalproto.com
  • Dman
    I have been working on this for about a year on and off but I haven't published the site yet. I was considering mentioning to solidworks that they should develop so tools for rendering and exporting more effectively. My method has been creating the whole site and creating the slices in fireworks. Give it a try.
  • Interesting technique, but it looks like a best practices nightmare (SEO, XHTML compliance, load time, 508, etc). I would like to see this design methodology to completion. Fun stuff.

    I guess you could take the image and start slicing in PS or Fireworks (pick your poison).
  • FrankParenteau
    I wouldn't call this method a best practice nightmare, as it's basically just the "design" aspect of the work. It then all goes into Photoshop, where i do the slicing and optimising of the files, and then in Dreamweaver where i code everything. I use Solidworks because it is easy for me to get the shapes or the textures i want for whatever part of the project i am working on. It's one of many tools available to get the job done, i just happen to be quicker with this one ;)
    And I am a xhtml / css purist so no worries there.
  • The more I think about it, the more fun this sounds. I am going to try as an experiment.
  • Let us see the results when you're done! but only if it's cool lookin! ;) just kidding, I want to see what you come up with.
  • This is really cool.... Would have never thought to use SolidWorks for Graphic Design. Thanks for the inspiration.

    Cheers,

    Anna
  • Fascinating.
  • bigmikeo
    I've rendered all our current products for the sales/marketing folks. They wanted photo's and paid good money for crappy pics. Then they asked me to give it a shot and people felt they are pretty decent. I mean if you get in on it you can tell it's not the real thing but it's good enough.
  • I love hearing that. I really push engineers/designers, if they have the interest in this stuff, to go ahead and do it for the company to show what can be done. It shows some initiative and helps learn some rendering stuff, and it doesn't take that much and could save the company a lot of money!
  • FrankParenteau
    I am basically the render guy at the office, and photoworks can be really powerful if set up right. For exemple if you check most of Mega Bloks packaging, and instructions booklets, those are all Photoworks renders. You just have to know how to tweak it and emulate a studio environment the right way. I love seeing what others can do with it, some great exemples can be found here : http://rendercontest.com/ , where the Rob Rodriguez contest now lives on :)
blog comments powered by Disqus