We help IT Professionals succeed at work.

Pixilated Logo

Hello Experts,

I'm trying to create a Visual Studio 2012 background from an image that I found here http://i.imgur.com/YqTqq.png.

So I created a new document in Photoshop with the following dimensions 1920x1080 300 dpi.

I cropped the logo as I needed and placed it within the document that I created. Everything looks fine in Photoshop but once I saved it as a .png if you look closely on my background you will see that the logo is pixilated around the logo itself but it does not appear that way within Photoshop.

Any ideas how I can fix that? I will supply my .psd file with the background and logo for all to see what I'm referring to.
VisualStudio.psd
Comment
Watch Question

CERTIFIED EXPERT

Commented:
I just opened the file you attached and it looks fine. I even saved it as a PNG file.
VisualStudio-1.png

Author

Commented:
It looks fine within Photoshop but if you save it as a .png and if you then look closely on your screen you will notice around the white part of the logo that it has a blue pixilated look to it. Almost like an emboss around the white part of the logo.
CERTIFIED EXPERT

Commented:
I created a PNG file and attached it to my post.  Do you see that pixelation on my PNG file?

Author

Commented:
I don't see the PNG file that you attached.
CERTIFIED EXPERT

Commented:
I see it attached, let me attach it to this comment as well.
VisualStudio-1.png

Author

Commented:
Hi savone,

Yours is ALOT better than mine. What did you do to make that quality better?
Scott FellDeveloper & EE Moderator
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
I would bet your problem is you are not using the image at 100% size.  As soon as you try and shrink it or especially blow it up, it will pixilate.  Also, unless you need transparency, I would use a jpeg.

Another thing that could be happening in photoshop is you are saving at a low resolution.  Choose Save For Web.  Then look at your presets.  If you must use png, choose png-24.  If you choose png-8 you will need to play with your settings.  

Since this just looks like a background and does not need transparency, I would just choose jpeg as you will get a smaller file size for the same quality.    

Just make sure you save the file size at 100% of the actual size you are going to use it as.

Author

Commented:
@padas,

No I tried different settings and I also used the logo as is without resizing and still get a sloppy result. What ever savone did works VERY well.
CERTIFIED EXPERT

Commented:
I dont have photoshop, I used GIMP.

Make sure the compression level for the PNG is set to the best quality.

There are some known issues working with PNG in photoshop.  Read here:

http://www.mightymeta.co.uk/photoshop-pngs-some-quick-fixes/

and this is also good info:
http://www.splashnology.com/article/how-to-optimize-png-and-jpeg-without-quality-loss-part-1/2071/

The main this that you want to do is make sure the compression level is set low, I used 3 on the image I saved.  Again, that was in GIMP not in photoshop (I use Linux, and you can not easily run Photoshop in Linux).

If you wondering what GIMP is, read here:
http://www.gimp.org/
CERTIFIED EXPERT

Commented:
Another thing you can try...

I have used Photoshop in the past so I am semi familiar with it.  You can try using the export for web settings instead of save as.  This will allow you to tweak the PNG settings and also show you a preview of what the image would look like after you save it.

Author

Commented:
@savone,

There is no export for web settings instead of save as.

Also, what did you do when saving the original file I uploaded to you. What tweaking did you do to the .png file?
CERTIFIED EXPERT

Commented:
What version of Photoshop are you using?  It may be called "Save for Web" not export for web, sorry.

I did not do anything other than open the .psd file and save it as .png with low compression.

Author

Commented:
@savone,

I'm using Photoshop CS5.

I still have no idea because I have tried different formats with different options and I cannot get it as clear as you did.

Is there a certain color profile you are using?
CERTIFIED EXPERT

Commented:
No color profiles have nothing to do with sharpness.  It is your compression level.  Try saving it as a jpeg, and when the save dialog box comes up make sure the compression slider is as high as it can go.

Author

Commented:
Ok, it worked better than before by applying a quality of 100% to the jpeg. But how do I do that in Photoshop using PNG as the file to save as?
CERTIFIED EXPERT
Commented:
You do it by using the save for web setting instead of save as.  When you select save for web a pane should come up that has four windows.  The settings will be on the right (SEE ATTACHED SCREENSHOT).  Select PNG-8.  The more colors you use the better the image will look. You can also play around with the "amount" and "dither" settings to get the look you like.

The four panes can be zoomed so you can see a preview of the image before you save it.
png.png

Commented:
The best way to get rid of the pixels using Photoshop and Not taking a good amount of time to learn how to create Vector images in PS.  Is to  Export the Adobe Illustrator or just use  Adobe Illustrator.  

With Adobe Illustrator you are going to get clear text as it is used for text based media.
Photoshop can do it but it is a process Adobe Illustrator does it easily.

You can create a Vector image with Adobe Illustrator easier and That is what you need
a Vector Image.


Selvol