ELEARNING DEVELOPMENT – CREATING PATTERNS USING ADOBE PHOTOSHOP

As a professional I pride myself on my creativity, and I always try my best to always create visually interesting digital artwork. As a multimedia developer working in the training and eLearning industry this often manifests itself as the creating custom assets, designs and graphic elements that are used in Web Based Training modules.

An extremely, useful (and what I would call underused) feature of Adobe Photoshop is the ability create your own patterns which can be saved, to your own personal library which can be drawn from for later use.

The steps are simple:

1. Create the base image of your pattern.

2. Define as pattern

3. Apply to elements when desired

Now I would like to walk you through these steps. Fortunately, they become less complex as we proceed.

STEP 1 – CREATING YOUR PATTERN

The hardest part. This is the step where you use logic and plan out how you want your pattern to function. You will need to utilize your artistic and creative abilities to create the best result.

However, for the purpose of this demonstration, I will keep things simple. I will use a canvas that is 3×3 pixels.

See my pattern below, I magnified a great deal to make it clearer. You can see 3 white squares. Tiling diagonally down from left-to-right.

STEP 2 – DEFINING THE PATTERN

Starting from the main menu, choose “Edit”, and then from the drop down menu choose “Define Pattern…”

A dialogue box will now open asking you to enter a name for this newly defined pattern. Enter whatever you feel is appropriate and hit okay.

STEP 3 – APPLYING THE PATTERN

The last step is applying the pattern to your desired element. In this example I will apply it to a button I made in a previous article. From the main menu choose “Edit” then from the drop down menu choose “Fill…”