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.

Additional Illustrated Elements for Web Site


Different Electronic Circuit Boards that Nautech manufacture are supplied to variant industry applications and technologies.  This composite illustration pie-chart layout represents the diverse industries that Nautech Electronics distribute their chip-sets to, and presents on the web site with interactive information call-out sections.

Nautech Electronics - Market Diversity Pie Chart Layout

Time and budget were pressing, so rather than custom illustrate each complex component, existing supplied sample images were run through a series of filter tests in Photoshop.  These were deep etched, retouched and cleaned up, and several varying filter types were over the base image multiple ways to posterize the base colours and create a black and white line effects.

Engine Image Component Filter Comp Test 1
Car Image Component Filter Comp Test 2

Final components in close-up for the web site

DACAD Skuba Diver Modem Device 

This Illustration of the DACAD Diver Modem Device was created for the NAUTECH Group Site as a link image to the DACAD Home Page.

First developed in 2006, the Diver DACAD System™ is a New Zealand developed diver monitoring and tracking system that monitors various parameters including depth, air, water temperature and range to diver – and it accurately tracks and positions divers within a range of more than 2.0km in ideal conditions.  The Diver DACAD System™ was developed to improve diving safety for use in the Military, First Responder, Construction and Commercial Diving industries.

Nautech Electronics - DACAD Diver Modem Device
Nautech Home Page

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

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

Related Works