Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

February 2021

S M T W T F S
 123456
78910111213
14151617181920
21222324252627
28      

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

How to make image text headers




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! ♡

Using on DW?

Comments

May. 30th, 2020 08:28 am (UTC)
Shut the front door, this is awesome!!!
Jun. 3rd, 2020 02:22 am (UTC)
Aw, ty!! I was making a quick image header for a bio commission the other week and I was like y'know, actually the process might be super useful info for some people. A friend and I were talking about how we used to do image headers back in the day and her process was EXACTLY what mine was, and it wasn't half as easy or clean looking as what I do now, so I was like ohhh dip. I bet we aren't the only ones, I have to put this up LOL.
Jun. 8th, 2020 10:16 pm (UTC)
Anyway thanks for reminding me of how much I used to love text overlays. Did one up and used the minimal splash, replaced the icon there with the fun text overlay.

For anyone on PS you can also put the image on a layer directly above your text and right click the image layer to create a clipping mask and then free transform the size! Clipping masks are the shit and I will talk for hours about my love of clipping masks lol.
Jun. 11th, 2020 06:14 am (UTC)
Oh that looks GORGEOUS!!

I pretty sure you can do that in GIMP as well, but I've always just defaulted to this method lmao.
Jun. 11th, 2020 08:47 pm (UTC)
Thanks!!!

Probably. They're so close really at the end of the day. If my work wasn't paying for it I would not still be using PS but they are and I hate change.
I used to do custom collages/albums before there were a million and one programs for it so clipping masks have absolutely saved my life more than once lol. It always amuses me how there's at least half a dozen different ways to approach anything in PS and gimp and to see where everyone ends up going.
Jun. 13th, 2020 01:58 am (UTC)
Right? Once upon a time I would have told people if they were interested in heavy graphic design, either as a hobby or for work, that investing in Photoshop would have been the best option; but at this point, I really would say either is perfectly valid, regardless of PS's status as the industry standard. The biggest thing you need in a work setting is to be able to open a .PSD in either program, and GIMP can both open and save as .PSD, which ties that up nicely.