Images for web
I am trying to make a gallery site for my art work, and I scan my images into Photoshop and save them for web, making thumbs and full sizes, then I load them into Dreamweaver...but when you look at them online, they look like crap. The black and white ones are all spotty in the white areas...and kid of blurry. And the ones that I colored in Photoshop are all pixely...Is there a way to make my gallery images look better? www.fallenstarstudios.com- chech the drawing gallery for some good examples.
Thanks
Thanks
Actually I think the problem may be even simpler than that.
I see what you mean about the black and white ones looking spotty around the edges and I assume this is because they are showing up as only a fraction of the actual size.
I suggest resizing the images to no more than 500 pixels wide and keep the height contraints propertions when resizing and then test them.
Also if your pictures are of type jpeg then you can actually optimise them for web view with this software http://www.xat.com/jpegopt/jpeg_optimizer.shtml
Good luck
pjcrooks2000
I see what you mean about the black and white ones looking spotty around the edges and I assume this is because they are showing up as only a fraction of the actual size.
I suggest resizing the images to no more than 500 pixels wide and keep the height contraints propertions when resizing and then test them.
Also if your pictures are of type jpeg then you can actually optimise them for web view with this software http://www.xat.com/jpegopt/jpeg_optimizer.shtml
Good luck
pjcrooks2000
And still simpler....
For images with regions of solid colors and sharp borders (like drawings), a lossless image format like GIF will give you a nice small file without any of the artifacts that you can get with JPEG. This ought to get rid of the splotchy pixels in the colored images, might help with the B&W ones, but may be worse with on the Cobain and Reznor pics.
For images with regions of solid colors and sharp borders (like drawings), a lossless image format like GIF will give you a nice small file without any of the artifacts that you can get with JPEG. This ought to get rid of the splotchy pixels in the colored images, might help with the B&W ones, but may be worse with on the Cobain and Reznor pics.
ASKER
Ok...this is for Lobo- Can you explain to me how to adjust the white on my curves without losing the thickness of my black line? I tried adjusting the little curve line by dragging it, and it makes the white look great, but it also makes my line work thinner...
Hi Squirtle,
Yes, I see what you mean. Let's open the original image and zoom on it at, say,500% and open the Curves dialog. Now let's set those values to Input:233 Output:255 and Input:35 Output:0 as before. The strokes are still a bit weak, right? That's easy to fix. Still in the Curves box, set the cursor anywhere in the curve and drag it to a point of values Input:190 Output:145. You'll see that when you click on the curve and start dragging a new point is created in the curve and it actually curves smoothly. You'll see now that the black strokes have become stronger by darkening the grey pixels without compromising the white areas. You can add more points to the Curve and move them around as you see fit. Experiment with the results to get a hang of what Curves can do for you.
Good Vibes!
Lobo
Yes, I see what you mean. Let's open the original image and zoom on it at, say,500% and open the Curves dialog. Now let's set those values to Input:233 Output:255 and Input:35 Output:0 as before. The strokes are still a bit weak, right? That's easy to fix. Still in the Curves box, set the cursor anywhere in the curve and drag it to a point of values Input:190 Output:145. You'll see that when you click on the curve and start dragging a new point is created in the curve and it actually curves smoothly. You'll see now that the black strokes have become stronger by darkening the grey pixels without compromising the white areas. You can add more points to the Curve and move them around as you see fit. Experiment with the results to get a hang of what Curves can do for you.
Good Vibes!
Lobo
ASKER
Ok, I am sorry, and I am sure that I doing something totally wrong, but I tried dragging the line up to the numbers you said, and it only went up to like 90...This is under the new adjustment layer and then cuves? I have photoshop 7 if that makes a difference...
I still think you should just resize the images so that they are not truncated when someone views them online. Its the fact that the browser is reducing the size of them that is causing them to look bitty.
pjcrooks2000
pjcrooks2000
ASKER
pjcrooks2000- So for example...the pic is scanned in and its 24 x 25 inches. I resize it to like 8 x 9. You would resize the pixels also? Or instead?
star
star
Just resize the image from the scanned one.
Remember the viewable area of a webpage is probably 850 pixels max at a decent screen resolution. Therefore I would resize the scanned image to around 700 pixels wide by 720 deep or therabouts let PS sort the height for you.
No need to remake all your images, but resize the image from the best one (i.e. the scanned image) that way the quality was stay as it should. Save the picture to your machine then simply open it up with Internet explorer and see how it looks.
You may need to resize a coupleof times as the height may cause the image to truncate too, but I think it will be ok at arounf 700 * 700 pixels :)
Remember the viewable area of a webpage is probably 850 pixels max at a decent screen resolution. Therefore I would resize the scanned image to around 700 pixels wide by 720 deep or therabouts let PS sort the height for you.
No need to remake all your images, but resize the image from the best one (i.e. the scanned image) that way the quality was stay as it should. Save the picture to your machine then simply open it up with Internet explorer and see how it looks.
You may need to resize a coupleof times as the height may cause the image to truncate too, but I think it will be ok at arounf 700 * 700 pixels :)
Whenever you're doing image sizing for the web, you'll be better off working in pixels rather than inches.
Also, the last time I looked at a survey, about a third of the people sampled browsing the internet had screen resolutions of 800x600, a half were at 1024x768, and the rest were split higher and lower. So you should be doing well with a 700 pixel wide image, like pjcrooks2000 said.
Also, the last time I looked at a survey, about a third of the people sampled browsing the internet had screen resolutions of 800x600, a half were at 1024x768, and the rest were split higher and lower. So you should be doing well with a 700 pixel wide image, like pjcrooks2000 said.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
squirtle98,
I too had done a bit of work relating to browser issues and screen sizes as Antonio mentioned, however I am probably more concerned that on first view with your images they may still be trucated even though you resize them. If they do not look right straight away then resize them again to half of that 350 pixels. Then increase in size until they look better or go worse. Problems are when they browsers feel like they should resize an image.
You image that you had created is far too big for web view unless it was to be downloaded and printed professionally. Web viewing a printing are different things. I hope you can get this idea :)
pjcrooks2000
I too had done a bit of work relating to browser issues and screen sizes as Antonio mentioned, however I am probably more concerned that on first view with your images they may still be trucated even though you resize them. If they do not look right straight away then resize them again to half of that 350 pixels. Then increase in size until they look better or go worse. Problems are when they browsers feel like they should resize an image.
You image that you had created is far too big for web view unless it was to be downloaded and printed professionally. Web viewing a printing are different things. I hope you can get this idea :)
pjcrooks2000
Thanks Squirtle!! Glad I could be of help.
Good Vibes!
Lobo
Good Vibes!
Lobo
I think the problem is very easy to solve. First convert the blackand white images to Greyscale mode. This will make the files smaller and faster to load. Before cropping and sizing your images, open your Curves box in Photoshop and adjust the colours there so that the areas that are white show pure white. On the image titled Buffy, for example. Zooming in shows a lot of artifacts in the white aeas. These may have been caused by uneven media (when drawing) or could be artifacts generated when compressing the images to JPG. In that image, simply moving the curve (on the top-right of the Curves box) to the left to make Input:233 Output:255 cleans those artifacts. Now, moving the other end of the curve to Input:35 Output:0 gives the black areas a bit of extra punch. Easy, huh?
The coloured images look good when viewed at 100%. It could be that your browser is reducing their display size to fit the browser window (using Netscape?) On the one titled Marbles, the artifacts are caused by too much compression when saved as JPG. Try not to compress too much. On Anime Girl, zooming at 300% in Photoshop shows clearly those same JPG artifacts. Again, less compression should solve that problem.
And by the way... Great work!
Good Vibes,
Lobo