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 Toptal Subtle Patterns. 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.

Sign up for a free trial of the ELB Learning Authoring Suite to check out all our Lectora templates and assets.