How to add text to a banner image in a 'transparent' kind of way

Hi, I want to add some text to a banner image I have for my website. in a 'transparent' sort of way. A perfect example of this is at the site www.stricknet.com. Not so much the 1st rotating image there, but the 2nd and 3rd are good examples of what I'd like. Note how it's a "blackened" sort of text box at the lower left of the image, but yet the image underneath still shows through somewhat.
   I have Paint.net and have just downloaded Gimp... I know a little in Paint.Net, but nothing really yet about Gimp.

Thanks
    Shawn
shawn857Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul SauvéRetiredCommented:
Simply put, you have to replace/modify the existing images in the banner...

can you replace the banner images?
0
shawn857Author Commented:
Thanks Paul.. yes I figured that I'd have to modify my existing image, but what I'd like to know is the technique used in Paint.Net/Gimp to produce the added-on text box as shown on stricknet.com.

Thanks
  Shawn
0
Paul SauvéRetiredCommented:
The site www.stricknet.com is set up to add the text separately from the image... That being said, in order to get a text overlay, you have to use either .png or .gif image format.

Open your image.jpg in GIMP and "Export as" image.gif.

In the Layer menu select Add transparency...

In the Layer menu select New Layer... and select a size that suits for the text you want to add. If you want 2 colors, then create a second new layer and select the colors you want to add to each.

Add the text using the text tool:GIMP textAnimated layers:layers
Here are the steps in GIMP:Steps to add text
0
OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

shawn857Author Commented:
Thanks Paul... my banner is already in PNG format. OK, right off the bat, I don't see the "Add Transparency" selection under the Layers menu. Do you mean just "Transparency"? If so, a sub-item appears, what do I select there? I don't see as per your screenshot "Add Transparency Information to the layer".
    Also your instructions describe how to make an opaque blue text box... I would like to make the text box kind of transparent, as circled in the screenshot attached.

Thanks
    Shawn
sshot2.bmp
0
Kyle SantosQuality AssuranceCommented:
ssGIMP
I think this may help with making that box you want transparent on GIMP.  When you have your layer selected there is an Opacity option you can adjust and watch your layer become transparent.  Click the Up and Down arrow there to set a % of transparency on your text box.

Let us know how that goes!

o/
0
Paul SauvéRetiredCommented:
>>Do you mean just "Transparency"? If so, a sub-item appears, what do I select there?

sorry - my bad " In the Layer menu select Add transparency..."

should read:  Layer menu ―> Transparency ―> Add Alpha Channel...
0
shawn857Author Commented:
"Add Alpha Channel" selection is greyed out  :-(

Shawn
0
Paul SauvéRetiredCommented:
Then it is already active!
0
shawn857Author Commented:
OK, when I create my layer, I cannot drag or move it to where I want to in my image. Also, I don't see that "Opacity" menu anywhere  :-(

I find Gimp really hard to work with - to do the simplest thing is very complicated. Can this be done in Paint.Net? I'm a little more comfortable with that.

Thanks
   Shawn
0
Paul SauvéRetiredCommented:
Shawn - things to remember:
if you make the layer active, you can move it with the Arrow keys. Otherwise, in the case of a layer with a transparent background, you have to be on an object in the layer with your Move tool.Move it
0
Paul SauvéRetiredCommented:
Paint.NET doesn't handle layers very well - I can't seem to move objects once they are inserted.
0
MereteCommented:
Well using Paint net load your first image then go to file new file and make a new image 300 wide by 200 high you can drag this in or out to increase decrease click on this image so it's selected ( dots all round)
Note the two images above.
File Newwhite boxthen using flood fill bucket fill this white with blue or black> select the bucket tool then select the coloured world above so you have the colour widget choose a colour and click inside the rectangle fills that colour,
colour wheel and fill bucketthen select the text tool while your colour wheel is there change the font colour, if you want to change  the font go over to the top left
Fonts and colourclick inside this rectangle and a curser appears type your message using your chosen colour and font type size etc.
Use the magic wand to to deselect the square
text in boxthen go to the top click on your original image so it is front then click on edit paste into layers
Paste into imagedrag it around and resize
adjust position and sizeTo alter the Opacity click on Layers then properties and drag the opacity slide bar to the left
Adjust opacitythen click on magic wand to deselect this new added piece
 then go to file save and it offers to save to and save as then offers to flatten it.
Done
Very easy to do. No need for layers or alphas or a steep learning.
Really it took me only a couple of minutes.
Here's the sample saved as a png
 with blueand another  but now black added opacity with white text and grey text
 Ticker_Blue_Stock3 opace black and white text with grey textThere is tons of choices and you can modify without having to close anything.
Ask if you get stuck
Paint Net also has many many free plugins
Installing Additional Plugins
http://www.getpaint.net/doc/latest/InstallPlugins.html
Select a set from the left
http://paint.net.amihotornot.com.au/download/pluginspack/
From experience if you install too many it takes longer to load, but some are really good and all free.
cheers
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Paul SauvéRetiredCommented:
P.S. - if you want to manage the opacity of only the box, create a third layer for the text the same size as the box. Now to remove the white bkgrd select the white 'Magic Wand' and press Delete.

Now you can add your text (in WHITE) then proceed as Merete explained for the box.

Simply superpose the text layer on the box. When you adjust the opacity of the box layer, the text layer will stay at 100% opacity.

@Merete: I didn't realize that you have to create separate images for each layer and paste them into a single image as layers in order to manipulate the layers correctly. Thanks!
0
Kyle SantosQuality AssuranceCommented:
I find Gimp really hard to work with - to do the simplest thing is very complicated.

I made these for new GIMP users if it helps.

http://www.experts-exchange.com/videos/818/Introduction-to-GIMP.html
http://www.experts-exchange.com/videos/790/Additional-GIMP-Tools.html
http://www.experts-exchange.com/videos/791/GIMP-3D-Effect.html

Note to self!  I should make one based on this discussion, huh? :)
0
MereteCommented:
@Paul Sauvé it does it automatically when a new file is created. This is new feature with those thumbnails, it occurred after the last update, now the preview  thumbnail appears at the top left , I can't say I like the changes. The old way I could drag them around. There is now new widgets as well.
It works well when adding multiple images and working on two or three separate images at the same time.
Happy to share my expertise as I can't stand Gimp either way too clumsy complicated for me when there is this great free tool, it even beats my Coral Paintshop Pro in some things.
cheers
0
shawn857Author Commented:
Thanks Marete, a couple of questions please:

(1) When you say "then go to the top click on your original image so it is front then click on edit paste into layers". I'm assuming I have to do a CTRL-C first on the image I want to paste in? Cause when I opened the "Edit" menu, all those 'Paste' selections were greyed out.

(2) You state "then go to the top click on your original image so it is front then click on edit paste into layers"... but your screenshot shows to click on "paste into new image".

Thanks!
    Shawn
0
MereteCommented:
Hi Shawn check your image is selected, put your curser in the little triangle select tool then put your mouse in the picture you'll see an icon click in the picture the dotted lines are now around it now go to the top  edit>copy< must have a copy first
 then select the original thumbnail then go to edit paste into new layer
selected image puts dotted linesI was going to add the update has made these thumbnails function like windows 7 thumbnails on the taskbar
paint dot net thumbnails like windowsI made a typo error but it wont matter you can test both paste into image or paste into new layer
 a new thumbnail appears if not pasted into the image right which you can just close. My mistake sorry.
0
shawn857Author Commented:
Thanks Marete, but no, still the Edit|Paste options are greyed out. I must be missing a step somewhere. The paste options show up however, when I do a CTRL-C on my selected "new layer", and then go to my original image. But I don't know if that's the correct way to do it. I'm missing something somewhere....

Thanks
    Shawn
0
MereteCommented:
Yes sounds like it.
What have you done Shawn?
You have your original and a new one you made?
What do you see at the top with those thumbnails you should see your original and one other?
Is there text added in the new image that has a selection just click outside the image to remove the text selection
0
shawn857Author Commented:
Yep, I have both my original and my new little text box... there are thumbnails for both images at the upper right of the screen - just like you show in your screenshots. Should I select my little text box, then go to the thumbnail of my original image, and then click and select the original image also? And then click EDIT|paste?
   I kinda don't know what should, or shouldn't be selected. Also should it be "Paste into New Layer", pr "Paste into New Image"?

Thanks
    Shawn
0
MereteCommented:
Should I select my little text box,<< yep
but then go to edit and then copy
and only then  click and select the original image also? And then click EDIT|paste?
>> "Paste into New Layer"
You cant do anything wrong here, if you do paste wrong it just adds a new thumbnail
At the top see the little blue arrow that's an undo
I'll make you short video soon.
0
shawn857Author Commented:
oh ok, so I must have overlooked your instructions to Edit|Copy.... that was my problem, sorry! No need for a video Marete!

Thanks
   Shawn
0
MereteCommented:
lol well I made a quick one for you Shawn
shows how simple to make.
https://youtu.be/qb1n5Qg5gHI
Have fun and take your time with all my steps.
cheers
0
shawn857Author Commented:
Thanks Marete, your solution was best for me... thanks also to Paul and Kyle for their input.

Cheers
   Shawn
0
Kyle SantosQuality AssuranceCommented:
You are very welcome, Shawn!  I am glad the Experts were able to help you out. :)
0
MereteCommented:
Thankyou Shawn always happy to share my expertise
cheers
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Images and Photos

From novice to tech pro — start learning today.