png on magic pink

Monday, September 27, 2010 by JuniorCrooks | Discussion: Tutorials

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

 

First Previous Page 1 of 2 Next Last
k10w3
Reply #1 Monday, September 27, 2010 11:08 PM

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.

JuniorCrooks
Reply #2 Monday, September 27, 2010 11:24 PM

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.

Xiandi
Reply #3 Monday, September 27, 2010 11:32 PM

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.

Xiandi
Reply #4 Monday, September 27, 2010 11:41 PM

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.

JuniorCrooks
Reply #5 Tuesday, September 28, 2010 12:13 AM

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. 

JuniorCrooks
Reply #6 Tuesday, September 28, 2010 12:29 AM

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.

Xiandi
Reply #7 Tuesday, September 28, 2010 1:28 AM

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

 

JuniorCrooks
Reply #8 Tuesday, September 28, 2010 1:33 AM

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

Skarny
Reply #9 Monday, October 11, 2010 6:31 PM

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.

JuniorCrooks
Reply #10 Wednesday, October 13, 2010 2:47 AM

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

gmc2
Reply #11 Wednesday, October 13, 2010 7:12 AM

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.

JuniorCrooks
Reply #12 Wednesday, October 13, 2010 7:13 PM

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.

gmc2
Reply #13 Wednesday, October 13, 2010 9:24 PM

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

JuniorCrooks
Reply #14 Wednesday, October 13, 2010 10:20 PM

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.

JuniorCrooks
Reply #15 Wednesday, October 13, 2010 10:28 PM

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.

Uvah
Reply #16 Wednesday, October 13, 2010 10:34 PM

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.

Xiandi
Reply #17 Wednesday, October 13, 2010 10:44 PM

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

JuniorCrooks
Reply #18 Wednesday, October 13, 2010 10:57 PM

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. 

Uvah
Reply #19 Wednesday, October 13, 2010 11:43 PM

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. 

JuniorCrooks
Reply #20 Thursday, October 14, 2010 12:39 AM

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. 

Please login to comment and/or vote for this skin.

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

  • Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
  • Access to a great community, with a massive database of many, many areas of interest.
  • Access to contests & subscription offers like exclusive emails.
  • It's simple, and FREE!



web-wc01