Create an engraved line effect in The Gimp
May 30, 2008
In this tutorial I will show you very quickly how to produce an engraved line like this:
![]()
It has many uses, personally I use it in a lot of my websites as you can see from the header of Help Developer.
- Firstly, create a new canvas and fill it with a darkish colour and create a new transparent layer on top, select this new layer.
- Now grab the select tool (Ctrl and R) and select a region x pixels width and 1 pixel high and fill it with black.
- Do the same exactly one pixel under the line you just created however, this time use white to fill it, which will produce this effect:

- No change the layer opacity to 10.0 on the Layers window, which will produce this:

- That is the main effect, we will now go on to create the merging in with the colour like in the Help Developer header, but for most things this is as far as you need to go.
- Go to the Layers window and select the bottom layer and use the colour picker (shortcut: O) to set the foreground colour the same as the colour on the canvas.
- Now select the Gradient tool (shortcut: L) and go to the Gradient options, change the gradient option to FG to Transparent
- Go to the top layer (the one with the 2 lines) and go to the Layers menu and select Autocrop Layer.
- Now with the gradient tool click and drag from the left of the line to just over half way making sure that the line you produce with the tool is straight. The outcome should look something like this:

- Thats it, you now have a great looking engraved effect. You can download the .xcf file here





dj
August 1st, 2008 at 1:03 am
I downed the XCF to view the results. When I look at your XCF file, the layer titled background, which contains the engraved marked, is outlined with a yellow and black dashed line. I like that. It makes it easier to see, but mine isn’t outlined. I searched the doc and the GIMP options. How can I get the black and yellow outline around a selection? When working with 1 pixel widths, do you enlarge the picture. Steps 2 and 3 were hard without doing that. GIMP 2.4.6.
lexor (lolzlolz)
September 19th, 2008 at 9:22 pm
zoom into 800% its on the bottom of the gimp image window
Terry
December 14th, 2008 at 11:48 pm
Simon,
I’ve tried to follow your directions a few times now and have no problem until I’ve created the line with the white fill below the line with the black fill. I cannot seem to figure out how to change the opacity. I’m using GIMP 2.6.
Terry
Simon North
December 15th, 2008 at 5:19 pm
Hey Terry, the opacity can be found on the Layers window towards to the top right
Terry
December 16th, 2008 at 2:25 am
Simon,
Awesome! That was it…I was actually following your tutorial for designing a web site and coding it with CCS/Gimp when I ran across this page because I was having difficulty with the above.
So far it has been very easy to follow…
Thank you very much for the help.
Terry
Terry
December 16th, 2008 at 3:10 am
Thanks again for the assist. I’m really on a dabbler when it comes to GIMP so I need all the help I can get. I’m trying to build a CSS/W3C compliant DotNetNuke skin…so I’m going through the process of learning it one step at a time.
Terry