png on magic pink

I am hoping to get some help with this. I have done a little skinning but I will be the first to admit graphics are my weak point. I am sure what would take someone to produce in short order takes me 3 times as long. I have Photoshop but unfortunately I have not been able to learn it well and utilize its full potential. Up until this point I am basically using it for editing photos. A rather expensive photo editor I must say.

One of the things I like to do is make sysmetrix skins. I enjoy it because I find the program very easy to work with. My problem is I suck big time at producing the graphics for the skins. 

One of the problems I am facing is producing a png file on top of a magic pink background. Try not to laugh to hard but my method of choice has been to take the png file and paste it on top of the magic pink background using Microsoft digital image suite. It is fast and easy but produces crappy results for me. When I use it as a background in sysmetrix the background is invisible but there is always a magic pink border around the image. Because of this I can't simply use one file as my background image. I need to use the png file as a graphic over top of the bmp background. If that pink border was invisible like the rest of the magic pink background I could simply use the bmp image without the extra graphic png on top of the bmp. 

So I am asking the experts how is the best way to add a Magic Pink background or place an image on a magic pink background? Is there an easy way that I just have not learnt or will I have to ask or even pay someone to do it for me ?, lol.

Thank you everyone

 

22,750 views 31 replies
Reply #1 Top

I think the pink border you're seeing may not be actual magic pink, because color shadows from the png are mixing with magic pink background making them not a true magic pink. 


What I usually do is flatten the image in Photoshop, and then use a square brush and color over all the pixels I want invisible with magic pink (255-0-255). 

Maybe somebody else has a better way of doing it, but that's how it's been working for me.

Reply #2 Top

That is interesting K10. I actually thought of the shadow interfering but it seems to be the case even if I use the eraser tool and remove everything close to the border. In other words even with the shadow gone I still get a small MP border. I have not tried your method per say so maybe I will give it a go. If it works for you then it should work for me also. 

I really appreciate your comment.

+1 Loading…
Reply #3 Top

Here is a trick you can use to make your background for sysmetrix with a .png. I hope I describe it well enough....

You need 2 images, one a plain solid color (any color will do). This you save as a .bmp. the second image is what will show as your background. Make this one anything you like, and save it as .png with all of it's transparency and shadowing.

The .bmp is technically your background but you will not be able to see it when done. Create your sysmetrix file the standard way, using the .bmp as your background image. Once your theme is created, you can see the plain .bmp on your desktop, leave that as is for now.

Now load in your .png image as a GRAPHIC, and set it to be on bottom of everything else. That way, everything you add will be above it.

Heres the best part...

Check that box and the plain background will dissappear, leaving only the graphic image showing. You now have your .png image as your background. Note: do not check this box until you have your graphic .png loaded in! If you do, you will have a transparent SMX and wont be able to find it on your desktop!

Let me know if this is not clear enough and I will try to be more detailed.

Reply #4 Top

Oh, and Karen is right, every pixel that is magic pink has to ba 255, 0, 255. It cannot vary AT ALL from that or it will show, so if you use magic pink, you cannot have any shadows or semi transparent pixels anywhere on the image.

Using a standard/round eraser on the edges will leave you with more semi transparent edges. When in doubt, zoom the image as far as it will go and look at the individual pixels.

Reply #5 Top

Thanks Xiandi. I actually knew of the method you wrote about but here is my problem with it. When I use this method I find on certain desktop backgrounds the transparency of the bmp is not 100% transparent. So yes you see the png image fine but always has a faint transparent background especially on multi colored wallpapers. That is why I found the magic pink to be a better solution. When it is used the background is always 100% transparent. It would not be a problem if the image was rectangle or square because you can crop right to the image edge thus eliminating the background. Hope you understand my thinking. 

Reply #6 Top

Here is what I am talking about. I made this smx months ago. Notice the top right corner looks fine on this wallpaper but the bottom right corner is not completely transparent when on top of another color, in this case xion.

Reply #7 Top

Yep, I've seen that. When that happens I just move the SMX or whatever is under it ;) .

Your way works too, it's just harder because of the pink and the choppy rounded corners.

xiandi really, really hates magic pink

 

Reply #8 Top

Move it? why didn't I think of that?  :D

Reply #9 Top

When you paste a PNG with alpha transparency components over the pink background, the transparency of the png allows the pink to 'show through'. But it becomes changed from 'magic pink' to some other shade of pink. So using that final image in a program which uses 'magic pink' as a transparency colour will not hide the mottled pink colour that now shows through the image.

The 'trick' I guess is to realise that the alpha transparency is going to have to show some kind of colour through.

1. Try pasting the png as a layer over some other colour that suits the image better than pink.

2. Merge the layers so that the png and the other colour become one.

3. Now use a 'magic select' tool (usually looks like a wand in image editing programs) and select the background colour.

4. Fill the selected area with magic pink.

This will now leave you with an image that has magic pink around it (which will show up transparent) and the image will have your chose colour 'showing through' instead of ugly pink.

Here's a series of images to illustrate:

1. The png with alpha transparency


2. Pasted on a solid blue backgrouns


3. Blue 'magic selected' and replaced with magic pink (see the left over blue around the outside?)


4. How it would look if I put it straight on magic pink like you and then displayed in a program which uses pure magic pink as a 'transparency'


5. How it looks it in a program which uses magic pink as a transparency doing it 'my' way.

+1 Loading…
Reply #10 Top

Hey Skarnivorous this is excellent. I will have to do some experimenting now to see if i can accomplish this with my limited skills. I guess its trial and error until I get it right. This has helped me a lot. Now maybe I can make some decent skins, at least that is my hope. Thank you

Reply #11 Top

curious question here.

is there some restriction to only use bmps for this program? not only is there more flexibility using the pngs but the file size is about 60% smaller than a bmp.

Reply #12 Top

gmc the program only allows you to use bmp as the background image. You can use png for extra graphics but not for the main background image. I really wish pngs could be used. It would make skinning it a lot easier.

Reply #13 Top

so, the background image is the size of the gadget/widget and you superimpose the pngs onto that bmp?

Reply #14 Top

Yes whatever size the background is will be the size of the smx skin. I have only added the png on top up until now because I have not been able to produce a good bmp image with magic pink background. The reason why is I was going about it wrong. I was placing a png image directly on a solid magic pink bmp background (250,0,250 0r ff00ff) not realizing the png transparent background was blending with the magic pink causing me all kinds of bad results. I think I know how to do it now. I just need to try on the weekend when I have more time.

Reply #15 Top

I should also say that the background image (bmp can be the actual image) and then you just add the extras ie.clock hands or any thing you want within the software itself. There are options when creating the skin for graphics, guages, multistate images and so on. You simply put the images in the skin folder and and add them with the options given within the program. It really is quite simple. Even I can do it. For me its just a matter of getting the graphics right.  I have made a few now that I got lucky on.

Reply #16 Top

Here is a way I found that is much easier. I used to do it in paint.net but it will work in photoshop too. The background image has a lock on it. Double click on it and the background will change to a 'layer zero'. You can erase the magic pink which really isn't necessary and flatten the image. This way your .png retains all transparency. I use this method when I make the images for my rainies. I don't use magic pink at all. Since XP and up they all have native transparency and will support the transparency. Try it. It's just a matter of using a transparent background. Here's another tip. If you need a solid color background to make your image stand out use the method I described by double clicking the lock on the background layer. When you're done just delete that layer and presto...all done. hope this helps.

Reply #17 Top

This way your .png retains all transparency
 For Sysmetrix, he HAS to use a .bmp for the background which cannot have transparency.

Reply #18 Top

Yes that is correct. Can't use png images for the background thus why the need for magic pink or doing the way Xiandi explained above. Both methods work. I want to master the magic pink technique because in my oppinion if done correctly will give a better result. I have used many sysmetrix skins that where ever I moved them on my desktop you can see a semi transparent background. It has to do with what your using for a wallpaper. 

Reply #19 Top

I'm gonna have to dig into the smx again. I remember awhile back experimenting with smx skins. I don't remember all of it but I do know that in some programs magic pink isn't necessary. If I'm wrong then so be it. It was worth a shot though. 

Reply #20 Top

Uvah magic pink is not necessary if you create the background image the way Xiandi explained. I am not saying it is necessary. I am only saying that it is the method I prefer to use because you have to use a bmp image for the background and the only way to make a bmp image with a 100% transparent background is to use magic pink. If there is another way I would like to know how. With the skins I made i used a solid bmp image as the background and added the same image in png format with a transparent background on top of the bmp. You then check the box copy desktop background for pseudo transparency which makes the bmp transparent so all you see is the png file that is added as a graphic within the program. This is the result when doing it without the magic pink. No matter where I place the smx skin it produces this result. 

Again that is what is required with sysmetrix. There are lots of programs like rainlendar that you can use a png image. 

Reply #21 Top

Nice blind and cursor you got there JC. ;)

Reply #22 Top

Yeah I thought you would like that Xiandi. Actually this is one blind I never get tired of. I think it is great and it customizes nicely too. One of my all time favorites for sure.

Reply #23 Top

Then I stand corrected. Like I said, it's been awhile since I delved into it. Time to brush up on a few things. Thanks Xiandi for putting mine brain back on straight. Lol.

Reply #24 Top

I forgot to mention this and I wonder if anyone can explain it to me. If I use the above screenshots as my background instead of the actual wallpaper the the distorted effect is not visable. It makes no sense to me. Both the wallpaper and screenshot are jpg format. I discovered this by accident because I took the first shot and set it as my wallpaper so I could take the second shot and submit only one image instead of 2 sepparate images. Why the smx used on the screenshot as my background is ok but on the wallpaper it is bad is a mystery to me.

Reply #25 Top

Could be its blended in with  the screenshot. Merged like it would be when you merge the layers. On the wall its sitting on top not blended or merged.