Nautech Electronics Circuit Board Illustrations

Illustrated elements for web project

CLIENT: Nautech + Grafix Garage

June 2016

Nautech Electronics design, manufacture and install electrical and electronic equipment into thousands of emergency service vehicles throughout New Zealand and Australia, and supply aviation, marine, military, security and emergency services with products from warning lights and wiring looms, to complex, electronic solutions.

Grafix Garage was tasked with designing and building the web site for the New Zealand parent company, while I provided an animated blow-apart layered illustration of one of their primary circuit boards.

The Nautech design office supplied a 3D interactive PDF file of the board that was created in their Printed Circuit Board CAD software.  This 3D PDF file allows every single component layer to be switched on or off from the hierarchy tree and isolated to show the deep structure of printed circuits, electronic components, and board layout design.  The 3D model can be rotated and zoomed to any view, elements switched off, then screen grab images are saved out for each layer set.  These image saves are then stacked in a Photoshop PSD file, deep etched, then graded with lighting and shade adjustments.  Additional details and missing text labels were added to all the electronic capacitors.

NEL PDF Circuit Board Model Tree Screen

This exploded view shows the various levels of the circuit board components that sandwich on top of each other and compress flat during the animation to form the final board.

NAUTECH NEL Circuit Board ~ Exploded View

Below is the final set of PNG images that are used on the web site to represent the stacking layers of the circuit board.  Some of the printed gold circuit maps and base boards were merged to simplify the animation sequence on the final web site.

Nautech Home Page

Site layout and interface design by Craig Litchfield, site build and coding by Brent Irvine at Grafix Garage.

Related Works