LCARS Interface – build your own

LCARS interface – build your own: is an article to bring a science fiction Star Trek’esque interface into real world usage.

As I examined in the article Science Fiction into Science Fact, there are many tools we can use for ourselves these days that were previously only the realm of science fiction.

 

Working with KeyRings from WhereWeLearn, this example provides a step by step guide to building your own working LCARS interface.

The original interface was originally designed by scenic art supervisor and technical consultant Michael Okuda.

You’ll need a few things, all of which are available Free of Charge.

 

The Video Version

There is a video of the process of building and putting live an LCARS Interface here

 

However for easy reference and find-able with a Google search, a step by step instruction reference is here too.

Step 1. Inspiration

Go to Google and search for “LCARS examples”

Click the Images tab and be inspired.

https://www.google.com/search?q=lcars+examples

Step 2. LCARS Interface Fonts

Firstly you’ll need some fonts for you LCARS Interface.  Easily managed thanks to the team in Star Trek Minutiae

http://www.st-minutiae.com/resources/fonts/index.html

Through experimentation I’ve found Nova Light Ultra SSi quite visually appealing for any LCARS Interface.

 

Both Nova Light Ulatr SSI and Context Ultra Condensed are free for personal use.

Copyright c 1992 Southern Software, Inc. All Rights Reserved

You can use any sans serif thin font to match the style.

This LCARS Interface is being used for public benefit and not for commercial gain.

Kudos to Southern Software, Inc. for making this font.

 

Step 3. Colours

Depending on which example you’ve gone for a sample of colours that works for you is in order.

I found this example on Pinterest from Alexander Richardson in 2009.  His email as per the image arpdesign@btinternet.com

The USS Defiant with a few “tweaks” in it from the author makes for an amazing LCARS Interface.

I found a much fuller collection here of these ship diagrams here. 

Consequently I worked through the image and extracted the colour pallet for the buttons.  Also I left the two blue colours in the diagram out of the palette.

Name	Red	Green	Blue	Hex
Grey	132	13.2	132	#848484
Yellow	255	206	99	#ffce63
Pale_Yellow	246	239	149	#f6ef95
Purple	156	99	156	#9c639c
Pink	206	156	206	#ce9cce
Orange	255	156	0	#ff9c00
Red	206	99	99	#ce6363

Step 4. LCARS Interface is just boxes on top of boxes

If there’s anything in this article you’d like to chat to me about or help me with you can contact me here or on social media.

So I built this up with with boxes, one layer on top of the other to create the LCARS Interface.

1. Firstly a black square to cover the background.
2. Secondly the red rounded box next
3. Thirdly the lime green rounded box
4. Next up was to add the two round ended boxes in blue
5. The tall purple box creates a uniform gap
6. Finally then two text boxes using the Yellow font colour

 

Then some very easy recoloring

1. Firstly leave the background alone
2. Secondly set the red box to the grey colour from the palette above.
3. Next up, lime green goes to black
4. Also the two blue ends to the grey
5. Easily swap the tall purple to black
6. And hey presto…

 

Step 5 – Your buttons on the LCARS Interface

I popped another box in the middle with some details and colours on the sides to make it a bit more of a “Star Trek” esque LCARS Interface.

Now when I add in three simple rounded boxes, I align the font right and with the bottom of the button.

The colour palette works together and is complimentary and an easy on the eye LCARS Interface

From that you can add as many buttons as you like, with whatever you want on them

 

Step 6. From Presentation to Image

Quite simple Ctrl and tap the letter A for all.  This will copy your entire LCARS Interface.

Open a drawing program like MsPaint on your computer.  You can see this in the video.

I thoroughly recommend using GIMP (GNU Image Manipulation Program) … it’s awesome and it is free.

In the program, ctrl and V for Paste…. and there’s your new image.

Save it to your machine as a .jpg or as a .png.

 

Step 7. Online hosting

If you have online hosting you’re golden, just put the image online.

If you don’t have hosting, you can use a service like ImgBB

Again there’s a step by step using this approach in the video.

 

You will end up with a URL for your LCARS Interface. Mine ended up being….

https://i.ibb.co/Pm7JvQH/building-a-display-04.png

 

Step 8.  Making your LCARS Interface interactive

For this bit you use the URL you generated in the last step and a great online tool from the team at Image-Map.net

https://www.image-map.net/

This step is far easier explained using a video.  Not only that, how about a quick explanation on how to get it into WhereWeLearn as well.

 

Step 9. WhereWeLearn and sharing your LCARS Interface

Now that you have an Image Map and an Image URL… time to let the WhereWeLearn engine help you.

 

Please let me know about your LCARS interfaces.

If there’s anything in this article you’d like to chat to me about or help me with you can contact me here or on social media.