Jump to content

NOTICE: Our Project Reality Demo / Tracker files are not getting uploaded here to the website.  We are working on the issue and expect it to be resolved within a few weeks.  The files are still being recorded, and will be provided to anyone including public players via direct request.  Send a message to (in order of availability) SemlerPDX, STARK, or m823us, with the date/time and map name, and we will provide you with the corresponding file.  Thank you all for your patience!

=VG= SemlerPDX

Image Editing with Transparency - How is this possible?

Recommended Posts

Awhile ago, I made a round website avatar combining part of the VG Globe Wings logo with an Elite Dangerous logo, heavy on transparency.  I'm still learning this stuff, but I never noticed a problem with the final image until I used it as an avatar on some elite dangerous tool website...  Picture is worth a thousand words:

Lo9ARGu.png

^How can this image get transformed into this mess that looks like it's still being worked on in PhotoShop by https://inara.cz/

97819x1714.jpg

...I suppose it means they don't allow transparent images on their website, or I've done something wrong way  back when I made this.  Either way, it's somehow recovered parts of the image I cropped out, that is part of the transparent area around the circle.  Very odd...

If anyone has any insight or ideas, let me know.  This is a head scratcher
New Round Logo2.psd (zipped)

 

  • Like 1
  • Upvote 2

Share this post


Link to post
Share on other sites

Transparency is determined by a greyscale layer (alpha layer) that sets the level of transparency. Color information still exists in fully transparent areas, and if the alpha layer is stripped away then these areas will end up showing.

The reason those parts were recovered is because you hid them using transparency rather than actual erasure.

  • Like 2
  • Upvote 2

Share this post


Link to post
Share on other sites

The difference is you cannot have transparency with jpegs, but .pngs and .gifs do enable you to have transparency which is why the first one looks good.

  • Like 1
  • Upvote 2

Share this post


Link to post
Share on other sites

Thank you Jeffu and Kav!

I had not noticed that they had transformed it into a .jpg!

changedPNGtoJPG.PNG

And I totally get what you are saying about it being covered by a transparency rather than erasure - I'm gonna re-edit the file and see if I can get it properly erased -- and also make it my own "better" .jpg if that is what they will transform it into anyway.  The website says, ".png, .jpg, or .gif is acceptable 300x300 maximum size".

Much appreciated! :hi:

  • Upvote 2

Share this post


Link to post
Share on other sites

Here's a quick tute on how to erase an unwanted background.

This is an easy example because the background contrasts nicely with the bird image but it will get most of if for you on the first pass, zoom in and erase the edges and any other bits that need it, then the trick is to save it correctly.

 

 

  • Like 1
  • Upvote 2

Share this post


Link to post
Share on other sites
3 minutes ago, =VG= SemlerPDX said:

Thank you Jeffu and Kav!

I had not noticed that they had transformed it into a .jpg!

And I totally get what you are saying about it being covered by a transparency rather than erasure - I'm gonna re-edit the file and see if I can get it properly erased -- and also make it my own "better" .jpg if that is what they will transform it into anyway.  The website says, ".png, .jpg, or .gif is acceptable 300x300 maximum size".

Much appreciated! :hi:

Yeah export it from Photoshop as a .gif if the site doesn't allow .png format.

  • Upvote 2

Share this post


Link to post
Share on other sites

Easiest way would be to sample a their background using the eye dropper in photoshop, apply it as a layer and submit it as a JPG.

A pain if they change the colour theme.

  • Like 1
  • Upvote 2

Share this post


Link to post
Share on other sites

Yea, I figured transparency would be best - it's not a forum like this, just an info and profile site that takes your in-game profile and adds to it in a website.  So the personal avatar is displayed on the profile page with a yellowish picture banner behind it, and also takes a spot on the signature image they provide for users that shows up-to-date info from the game.

Examples:
image.png

...and...
97819.png

 

So sampling the background wouldn't exactly work - though I could capture an image of the background, then use that as the background behind my circular avatar - it would look raised but better.  Still have to get it to a round only image first, so that will be a project soon.  Spending more than five minutes on it (like I originally did) will help. ;)

 

  • Like 1

Share this post


Link to post
Share on other sites

 

Get rid of the drop shadow around the outer edge in the original .psd so you have a solid border to separate the artefacts in the background, use the magic wand to select the background, hit delete and save as .gif. Voila!

New-Round-Logo2.gif.e9815ab195568870ad3886c6387919ab.gif

  • Like 1

Share this post


Link to post
Share on other sites

Thank you Kav!  I actually have a bit of things to do, so I've used your helpful example and made up something so I can set it and move on.  Cheers! :hi:



I ended up grabbing a sample of the background at the inara website under the avatar, and used that for the square section around the circle. 

inaraboder.PNG

Looks good now, thanks for the help and suggestions!

Avatar:
New-Round-Logo4.png

 

After Inara put it in their auto-sig image:
finalExample.png

  • Upvote 1

Share this post


Link to post
Share on other sites

Now that it's done ...speaking of fixing pics...  Just opened Steam, and an advert for Battalion 1944 comes up.  They need some Photoshop tips and suggestions, too, I think :tatice_03:

That soldier in the middle has the most copy and pasted looking head I've ever seen! I didn't do that for a joke, that's literally the poster for the game..
headWrongBattalion1944.PNG

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×