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.
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
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 email@example.com
The USS Defiant with a few “tweaks” in it from the author makes for an amazing LCARS Interface.
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.
Step 4. LCARS Interface is just boxes on top of boxes
So I built this up with with boxes, one layer on top of the other to create the LCARS Interface.
- Firstly a black square to cover the background.
- Secondly the red rounded box next
- Thirdly the lime green rounded box
- Next up was to add the two round ended boxes in blue
- The tall purple box creates a uniform gap
- Finally then two text boxes using the Yellow font colour
Then some very easy recoloring
- Firstly leave the background alone
- Secondly set the red box to the grey colour from the palette above.
- Next up, lime green goes to black
- Also the two blue ends to the grey
- Easily swap the tall purple to black
- 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….
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
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.