Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 4 down vote favorite
1

I am trying to make an arrow that will stand out against any background. I know there are ways to make transparent and semi-transparent images.

I was wondering if there is a way to make a layer that actually inverts the background (something like a mask I think). So when I place the image over some other graphic, the specified portion of the image will have a background that stands out. I am planning to use this arrow on a website.

I am just a beginner, sorry if this is obvious / obviously impossible. Thank you for your time :-)

share|improve this question
What application are you working in? – Philip Regan Feb 8 '11 at 11:13
At the moment I am still researching this (thus, the question). I would be thrilled if this would work in ANY application (although I do prefer freeware applications). – nc3b Feb 8 '11 at 11:18
2  
If your intent is to simply make your arrow stand out, a simpler option might be to use a white arrow with a small black border/stroke around it (or visa versa). This is a trick notably used by OS to help the 'pointer' stand out against any background colour. – Jaips Feb 9 '11 at 12:14
@Jaips Great tip, thank you :) – nc3b Feb 9 '11 at 12:20

3 Answers

up vote 2 down vote accepted

In Photoshop or Paint.NET, you'd draw your arrow layer, and then set that layer's blending mode to Difference - this will invert the underlying pixels.

The effect is controlled by the brightness of pixels in your arrow layer; white will completely invert, black (or transparent) will have no effect; grey or transparent pixels will have a partial effect.

I'm not familiar with GIMP, but I am sure it is much the same.

However, now it's clear you need a dynamic solution - i.e. to take the arrow and place it on a website in such a way that it always inverts the underlying background - this does not solve your problem.

I'd recommend you drop the 'invert background' line of investigation and go with a simpler solution which will still allow the arrow to stand out on any background.

One option would be a coloured arrow with a black border and/or a semi-transparent black drop-shadow. This is the kind of technique used for icons, which need to work on any background.

share|improve this answer
Thank you for your answer. I tried it in Paint.NET and it worked like a charm. Just one thing, is it possible to have the exported image preserve this property ? – nc3b Feb 8 '11 at 15:36
@nc3b, the exported (e.g saved as .png) image would be a straight-up image. and would behave as such, it may be able to have transparency but cannot 'blend' or affect its background once out of the image software. It sounds like you are looking for a coded solution, if so @Jonny's answer may be more helpful – Jaips Feb 9 '11 at 12:10
up vote 3 down vote

It sounds like you want the arrow to invert color over any background that you move over, so the static solutions mentioned here won't work.

You could try breaking the color down into its constituent R,G,B values and then inverting those individually in real time. Kinda like the following:

Select the background color. Break it down into R,G,B values. Subtract each R, G, B from 255. So, your arrow color should be (R,G,B) = 255-R, 255-G,255-B

Could take a bit of coding, depending what language you're using.

Hope this helps.

share|improve this answer
And in that case this question would be more appropriate for stackoverflow SE, and not graphicdesign SE. – Johannes Feb 8 '11 at 20:48
up vote 1 down vote

Below is a screen shot of what e100 mentioned. I used Photoshop CS5.

Now, the only thing is, this arrow will stay the color you save it as. It will NOT invert on your website anymore. To be honest, that probably requires more coding than it does graphic design, and your question would have more success there. (There, being stackoverflow.com)

All the "difference" does is invert the color of the layer by everything below it, as seen below. So, you would need to resave it if you want to change your background.

enter image description here

Hope this helped!

share|improve this answer
Indeed this helped, +1 :) – nc3b Feb 8 '11 at 15:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.