Introduction and Pre-requisites
This page serves as a simple guide to help you create your own riddle images! In this example, I'll show you six images of the step-by-step process of how to make a level image.
Pre-requisites:
- an image editor (paint.NET, Adobe PS, GIMP, etc.)
- a base image you would like to use (Google Images works fine, make sure your images are royalty-free/public domain)
- basic image editing skills (again, this will depend based on what you use)
- plugins, if applicable, to help modify images
- a good web host that supports applications and usage of these images
- if you do not want to deal with username/password combinations or PHP, then static-side is fine (look to hosts like github)
- typically, password functionality and PHP scripting are only supported on web hosts that utilize dynamic pages
Process
For this example, I'll be using paint.net and I'll be creating a "level one" image in the style of notpron.
If you are wanting to emulate notpron's style, you will need to use Arial for all numbers/letters and Galilee (which can be downloaded here) for all Greek characters.
Of course, you're free to use whatever fonts and techniques you like! The only limit is what you can do with your software. Obviously, don't go overboard; sensory overload is very distracting when solving an online riddle.
We'll use a generic image of a sunflower, cropped to 640x480:
The first thing you'll want to do is to split your image into multiple layers. Each layer will contain certain parts of the image that will contribute to the final design.
In paint.NET, create one layer for the image itself, another for the back glow (if desired), a third for the black background, and a fourth for the text:
Before any actual editing is done, fill the BLACK layer with a solid color, which will typically be the color of the website's background as defined in the style.css file; in this case, pure black or RGB(0, 0, 0).
If you are wanting to give your image a border (as most notpron image have borders), there is a simple technique (this is for paint.NET specifically; again, this will change based on your program of choice):
- Go to an empty layer (we can use the TEXT layer for this)
- Select the Shapes tool > Rounded rectangle > Draw shape outline. Select a brush width of 2, corner size of 5 (tweak to your liking)
- On the empty TEXT layer, draw the shape above the image to where it cuts off the corners of the image, leaving the image rounded
- Select the Magic Wand tool > Click the exterior of the shape > Go to the IMAGE layer > CTRL + X to cut the corners off of the image
- Delete the shape you drew on the TEXT image
If this was done properly, your image should look like this:
Once that is done, add a background glow if desired by doing the following:
- Fill the GLOW layer with the glow color of your choice (I use RGB(189, 190, 148), which is similar to the color of the glow on most notpron images)
- Go to the IMAGE layer
- Select the Magic Wand tool > Click the exterior of the image
- With the area of the image selected, go to the GLOW layer and CTRL + X to cut out the exposed GLOW layer
- On the GLOW layer, go to Effects > Blurs > Gaussian Blur and apply the Gaussian Blur radius 7
- Duplicate the GLOW layer by clicking the Duplicate Layer button 3-4 times to strengthen the glow. Merge the layers together using the Merge Layers button until you are satisfied with the strength of the glow
If this was done properly, your image should look like this:
Finally, you can add text to your image; most likely, this will be the level number and any hidden text you may want to hide within the level.
If you are wanting to hide text, create a new layer and place the hidden text there; this way, you can adjust the entire layer to hide the text instead of having to highlight the text itself.
I hightlight and outline my text using pyrochild's Outline Object plugin, which you can download here.
Adding text:
- Go to the TEXT layer
- Select your font, font size, color, etc. and place the text on the image. For most notpron images, it is Arial (Galilee for Greek) size 22-26 (it varies) using the Sharp (Classic) display setting. Again, this is your choice, so experiment
- Once the text is placed, highlight the text using the Rectangle Select tool (leave room for the glow) and open the Outline Object plugin in Effects > Object > Outline Object
- For the outline, use width 2 softness 240 with the desired outline color (typically black). For the glow, use width 8-10 softness 255 (experiment with these values) with the desired glow color (typically the same as the color of the glow on the image).
If this was done properly, your image should look like this:
And done! If all went well, your image should have came out to your satisfaction. Again, be sure to experiment with fonts/colors/styles, etc.
It's your riddle, so experiment to your desire. For example, you could change the color of the glow or make the image a .gif, .psd or even something like .xml if you want!
You could even add a username or a password. Make sure your web host supports dynamic pages, however; this usually isn't possible on static-only web hosting like github!
Extras
If desired, you can add more effects to your images, edit their metadata/EXIF data, apply steganography, etc. Some of these processes are more advanced, but Google has plenty of tutorials.
Remember, photos aren't the only places you can hide information/solutions in.
Alternative method using Photoshop
Photoshop is what David used. Simply cut the corners of an image using the lasso tool, use Arial 30 Crisp for level number (Galilee 36 Smooth for Greek), add a outline glow to the image, stroke and outline glow on the text. The color will be automatically given to you as a default.