Add Visual Depth to Your Lectora Courses

Visual Depth

In Lectora, there’s a great way to add visual depth and interest to your graphical user interface (GUI)—just add texture!

Finding The Right Textures

An easy, fun resource available that I personally love to visit is http://subtlepatterns.com/. At this site you’ll find hundreds of beautiful patterns, all available for free, ranging from natural fibers to high tech geometric patterns to popular grunge styles. You can even try out any pattern by hovering over your desired pattern, then clicking the PREVIEW button. This will change the website’s background to match your desired pattern.

For this example, I prefer to try out the patterns at Subtle Patterns. To use a texture in Subtle Patterns, just click the download button. This will download a zip which, when extracted contains two PNG files—one of the pattern at the original size and the second (marked with “@2X” at the end of the title), is the pattern magnified 200%.

PatternScreenShot

Looking for wilder, more vibrant patterns? Go to http://www.patterncooler.com/ has hundreds of seamless patterns. What’s great about this resource is the patterns are highly editable on their website. Find an attractive pattern, and in the upper right, click COLOR VARIATIONS. From there you’ll be able to easily edit the colors, resize, add another texture, even edit the transparency, and then download the PNG file.

PatternCooler

PatternCoolerEditable

 

How to Import Your New Textures into Lectora

Now, let’s try out these new textures in Lectora! In your Lectora title, go to the Design tab, and click the Title Background Image button, then select the PNG of your desired pattern. Lectora will automatically tile it, filling your entire course dimensions with your pattern. In this case, I used the “Subtle Feathers” pattern.

 

ImportPattern

Now, let’s say you want to change the color or contrast of an existing pattern. Good news, you can edit the patterns how ever you like using a design program like Photoshop or GIMP. In this example, I’ll be using Photoshop CS3.

First, I recommend opening the 200% magnified file (remember, it’s the one with “@2x” at the end of the title). After you open the PNG, in order to edit the file fully, you’ll have to go to Image: Mode: and select RGB color mode. After that, go wild! Adjust contrast, invert, use a color map, employ filters, add shapes, change the size, and have fun.

AddingShapeToPattern

In this example, I wanted to add a circle inside the floral pattern, so I added some guidelines so that I could be sure the pattern would remain seamless. Then save your new image and reimport it into Lectora.

NewSwirlBackground

Want more control, or to employ more patterns in one GUI? No problem! Download the textures you’d like to employ, and then open up your favorite design program, like Photoshop or GIMP. Need even more visual depth to your course? Try out our eLearning cutout people images.

2 Comments

  1. Thanks soooo much for introducing http://subtlepatterns.com/. I’ve already forwarded it to a whole bunch of people. Although we don’t use Lectora, we love Photoshop :D

  2. I wanted to create you the bit of observation in order to thank you again on the lovely strategies you have discussed on this page.

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>