Question about resolution

[designamite]

Hello guys,

I want to design a clean/simple layout for my website. However, lately I've had a few times that my resolution (or quality of the image) is not so high (it's kinda pixelated). How come? I think it has something to do with my settings when starting a new project. Could you guys please give me some advice on using the right settings?

I've designed a logo before, which quality is high (!). And when I want to use this to put on my Website Banner-project, I get the error the current project is lower (see attached image)

As my standard settings when starting a new project it has the following values:
Resolution: 300 pixels/inch

Please help me guys!

Thank you in advance!

 

[MrToM]

As the error says, you are trying to paste or place some image that is of a lower bit depth than the current one.

For web images you need no more than 8bit....most monitors, and now most certainly tablets and mobile devices, will not be any more than 8bit anyway so anything above that is just a waste.

Check your 'New Document' settings and see if the bit depth is 16....or even worse 32bit!
If so, set it to 8bit and you should be fine....no more error.

Oh and as for resolution........forget all about it for web images.....it's used only for re-sampling and printing.

Regards.
MrTom.

 

[ALB68]

Add to add to Mr Toms excellent advice..just remember that your main consideration for web pages should be pixel dimensions. The issue you have boils down to this, you have created a 300 ppi document and your trying to paste something into it that is less, probably off the net and is 72ppi. Set your document up a 72 ppi if you know your going to web. Set it up at 300 ppi if your going to print.

 

[designamite]

As the error says, you are trying to paste or place some image that is of a lower bit depth than the current one.

For web images you need no more than 8bit....most monitors, and now most certainly tablets and mobile devices, will not be any more than 8bit anyway so anything above that is just a waste.

Check your 'New Document' settings and see if the bit depth is 16....or even worse 32bit!
If so, set it to 8bit and you should be fine....no more error.

Oh and as for resolution........forget all about it for web images.....it's used only for re-sampling and printing.

Regards.
MrTom.

Thank you for you advice. I have tried it now with the 8bit but again the image, when saved as .png or .jpeg, turns out a bit pixelated.
These are my settings from the new document. What could be the problem?

 

[designamite]

Add to add to Mr Toms excellent advice..just remember that your main consideration for web pages should be pixel dimensions. The issue you have boils down to this, you have created a 300 ppi document and your trying to paste something into it that is less, probably off the net and is 72ppi. Set your document up a 72 ppi if you know your going to web. Set it up at 300 ppi if your going to print.

Also thank you for your advice. I've tried the same as the previous reply to MrTom, but this time with your 72ppi. But still the image when saved as .jpeg or .png turns out pixelated. I think it has to do with something else... Only I don't know what. Ideas?

 

[MrToM]

The best thing to do is post an example of the problem you are having.

If we could see what you describe as 'pixelated' then it would help enormously.

BTW, I don't see anything wrong with your 'New Document' settings so it must be something during the 'save' process.....but without seeing the results you get it could be anything.

Regards.
MrTom.

 

[designamite]

The best thing to do is post an example of the problem you are having.

If we could see what you describe as 'pixelated' then it would help enormously.

BTW, I don't see anything wrong with your 'New Document' settings so it must be something during the 'save' process.....but without seeing the results you get it could be anything.

Regards.
MrTom.

Okay will do. What I mean with pixelated is that the image quality is lower, and I can see pixels. As you can see below, the "1FMG"-image quality is sharp. At the "wassup"-image you can see more pixels, I don't like that. I hope my problem is clear to you. It's not only with this image, I've had it several times with different images.

 

[MrToM]

Sorry, but I'm still not seeing the problem.

Forgetting that for a moment is this just a problem with text?

I assume you are creating the text in PS so are you using the correct anti-aliasing for it? (If at all).

I'm not sure what the first and last images are for but the first doesn't look 1:1 (unless Mac's really do have dialogs that small or this is a screen shot from a 'retina' display....not much use to those who don't have it.), and the last one is not really any bigger than thumbnail sized.....so not much use to see what's going on.

The middle two look fine to me....both are anti-aliased and I see no difference around the edge.

One thing I will say though is do not use jpg's for web images.
There are a lot of jpeg artefacts on the 'wassup' image which suggests its been saved at less than 100% 'quality' ('Quality' being Adobe's terminology, not mine).
It is probably on the other image too but being black its not as visible.

For web based images ALWAYS save out to PNG.....and use 'Save For Web' when you do....its what its there for.
If you need transparency use PNG-24.
I find that PNG-24 will give the lowest filesize anyway but you may find for some [non-transparent] images that PNG-8 is better.
You'll have to check for each image when you save them.

Other than that I dunno what the problem is.....I certainly cannot see any 'Pixelation'...maybe that's just me though.

Regards.
MrTom.

 

[designamite]

Okay I'm sorry if the explanation of my problem might be unclear. The following image I've also designed but the quality is also not good and I don't know why. Maybe this example is more clear to you.

 

[MrToM]

LOL....I'm sure your explanation is perfectly fine....unfortunately one persons definition of 'Quality' can vary significantly from someone else's.

I'm trying, honestly, but i just don't see it.

Can you be more specific, (using that last image as the example), as to what, in your eyes, is wrong with it?
Use a 'zoomed in' screen grab or arrows or anything to just point out what you see as the problem.

It looks fine to me but then I'm not exactly sure what 'problem' I'm looking for.

Sorry not to understand but without being more specific 'Quality' really could mean anything.

Regards.
MrTom.

 

[dv8_fx]

designamite....

This last image .... assuming this is the final product for web viewing, is this the normal size?

My eyes aren't what it used to be but it looks fine to me at normal view. Only when I start zooming in do I begin to detect the text pixelation. As a rule, never view an image up close because definitely, you will see pixelation. It would be a different matter if you're creating on a vector application.

Like MrT said - "one persons definition of 'Quality' can vary significantly from someone else's".


Have you tried playing with the text antialias methods settings? You might see an improvement that suits your taste .......

 

[MrToM]

...Only when I start zooming in do I begin to detect the text pixelation...

You're kidding me....right?

This is pixelation...



There is none of this in the image posted by the OP.

What exactly are you guys looking at?

Regards.
MrNoUnderstandyTheProblem.

 

[dv8_fx]

LOL.....

when viewed normally in PS , it looks fine to me.... in the same way I see the image in this browser.

But if I zoom in at 150%.....



This is when I see the jaggedness of the text. Unless I'm wrong, this is the "pixelation" that the OP "sees" and is trying to describe..... and which our slightly cross-eyed eyes can't seem to detect.....


I could also say the same thing about his Wassup image .... the image preview in the post looks fine but jagged when you view the full image.


Regards
MrNoTickieNoShirtie

 

[MrToM]

No Tickie No Shirtie !!!

I dunno what that means but it genuinely made me chuckle.

Are you meaning this by any chance...?



Pixels.....?

Those things you get in a PIXEL BASED image?

Is that the problem?

Still not convinced.

Regards.
MrNoShirtieButTickied.

 

[dv8_fx]

In both images, it's the only imperfections I detect....

Which is why I said, PS is pixel based and you WILL see that... different if you created the image in a vector application and at the specific size needed.

Mr100%PerfectVision(50/50=100)

 

[designamite]

LOL....I'm sure your explanation is perfectly fine....unfortunately one persons definition of 'Quality' can vary significantly from someone else's.

I'm trying, honestly, but i just don't see it.

Can you be more specific, (using that last image as the example), as to what, in your eyes, is wrong with it?
Use a 'zoomed in' screen grab or arrows or anything to just point out what you see as the problem.

It looks fine to me but then I'm not exactly sure what 'problem' I'm looking for.

Sorry not to understand but without being more specific 'Quality' really could mean anything.

Regards.
MrTom.

Haha okay, I have to admit; when uploading the files to this forum, the differences aren't that big as when viewing the original files on my PC.

But when looking at my image above, at the left-upper side of the letter T you can see clearly it's a bit pixelated; I don't like that. Other times when I designed a file, the quality was better and I think this has to do something with my basic settings of the new project.. but I don't know what.

For example, here's the cover of Avacii - True. This cover is very good quality on my PC, and not pixelated (just as other files I've made);

 

[designamite]

dv8_fx & MrTom oh wow thanks for you replies haha. Well I see the file doesn't have that 'sharpness' you know, as I know it could have.. so that's what I'm trying to solve, but I don't know where in the settings the problem could be.
dv8_fx: I don't know what "text antialias methods settings" is, but I'll look into it thanks!

 

[dv8_fx]

@dv8_fx: I don't know what "text antialias methods settings" is, but I'll look into it thanks!

With Type Tool selected....



MrIHopeDisWorks

 

[MrToM]

...This cover is very good quality on my PC, and not pixelated (just as other files I've made)...

Its also FOUR TIMES BIGGER!

The images you have posted previously have not been anywhere near these dimensions....1200x1200!....the last one was only 600x600px!

You cannot compare the two......the more pixels you have the more 'defined' the image will be.

If you make the other images the same size (1200x1200px) you'll find this so called 'Quality' improve.

When viewing images in PS ALWAYS view at 100%....but remember a 1200x1200px image at 100% will be 4 times bigger than a 600x600px image.....or in other words for every pixel in the 600x600px image you will have 4 in the 1200x1200px image.....more definition.

As far as I'm concerned there is nothing wrong with any of the images you've posted, the problem is you comparing different sized images with each other....at the same size on your screen.....this you cannot do.

Regards.
MrTom.

 

[dv8_fx]

@designamite....

Its also FOUR TIMES BIGGER!

The images you have posted previously have not been anywhere near these dimensions....1200x1200!....the last one was only 600x600px!

You cannot compare the two......the more pixels you have the more 'defined' the image will be.

If you make the other images the same size (1200x1200px) you'll find this so called 'Quality' improve.

When viewing images in PS ALWAYS view at 100%....but remember a 1200x1200px image at 100% will be 4 times bigger than a 600x600px image.....or in other words for every pixel in the 600x600px image you will have 4 in the 1200x1200px image.....more definition.

As far as I'm concerned there is nothing wrong with any of the images you've posted, the problem is you comparing different sized images with each other....at the same size on your screen.....this you cannot do.

Regards.
MrTom.

My thoughts exactly. Also echoed by ALB68.

Never view a 72ppi up close.....


More so if you're using a laptop. Are you working on a laptop?