Tessisamess

Let's make an image text header!

The font selection for in-entry codes is very limited, and sometimes you just want something with a little extra punch. Sanity makes using heading tags a lot cuter, but that's still just one font and it's not always what you want. And when it's not right, it's not right.

You can also use this tutorial for flat color image headers. Just skip step 4 and use any text color you like!

This tutorial is super quick and easy, perfect for people who don't want to sink a lot of time into custom flair but want a unique design element in their entry codes.

It's also going to be useful for beginners who might be feeling daunted by diving into graphics and want somewhere straightforward to start. The individual steps of this tutorial are great tools on their own for other types of projects too, so they'll be useful to learn in this smaller dose to utilize in your graphic design journey into larger projects. Have fun!

The Process

Preface: This tutorial is for GIMP, a free alternative to Photoshop, but if you have PS you'll be able to do the same thing there, the tools just may be in different areas or called different things.

Step 1. Create a new file; the dimensions don't matter as long as it's a decently large working area for the size you want your text to be.

Step 2. Clear the background fill by going to Layer > Transparency > Add Alpha Channel, then select all (CTRL+A for PC or Command+A for Mac) and delete using the DELETE key.

Step 3. Bring up your text tool and choose a font and size you like, then type your text header. Again, don't worry about positioning or filling your entire canvas; just make sure the 100% zoom size of the text itself is a size you like. Thicker fonts work best for this! Make sure your text color is set to black (#000000) as this will be necessary for the image fill to work correctly.


Step 4. Drop your chosen image into the program to create a new layer. Set this layer to Screen. Now the only parts of the image you can see are the ones that lay over top of your text! Resize and/or drag the image to get the desired portion of it over your text if needed.




Step 5. Optional! To add a shadow:

• Duplicate your text layer. Merge your image to the top text layer by right clicking the image layer and selecting Merge down.
• On the leftover text layer use Layer > Layer to image size.
• Use Filters > Blur > Gaussian Blur to blur this layer.
• Lower the opacity to your liking and offset the layer by dragging it a small amount if desired.

Step 6. Crop! This doesn't need to be a tedious process; if you didn't know about this feature, hopefully this helps you out in the future! Go to Image > Crop to Content. That's it; you're done! Go to File > Export and export as a .png file.


Note #1: If you're doing multiple headers with the same size and background you don't need to make new files every time. Hit undo to reverse your crop, rewrite your text, crop again and export as a new .png file. Repeat for each header to breeze through custom headers for entry codes!

Note #2: Is the overlay looking like the colors are wrong? Set the text layer color to white (#FFFFFF) instead and use Multiply instead of Screen.

Wildcard!

Let's use a gradient instead of an image.

Step 1. After Step 3 make a new top layer and set it to Screen.

Step 2. Choose your two gradient colors in the color picker.


Step 3. Use the Gradient tool (you can click on the gradient icon that shows your chosen colors to choose between various gradient styles) to create your gradient. Drag the two anchor points around until you like the color transition. You can also edit the colors mid-gradient process if they aren't working out the way you want them to. When you're happy with it, hit ENTER or RETURN.




Step 4. Follow the rest of the image tutorial to crop, add a drop shadow if desired, and save.

♡ You're Done! ♡