Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Images for web

Posted on 2004-10-30
13
Medium Priority
?
172 Views
Last Modified: 2010-04-03
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
0
Comment
Question by:squirtle98
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
  • +1
13 Comments
 
LVL 17

Expert Comment

by:Lobo042399
ID: 12454087
Hi Squirtle,

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
0
 
LVL 8

Expert Comment

by:pjcrooks2000
ID: 12454892
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
0
 
LVL 5

Expert Comment

by:AntonioP
ID: 12455785
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.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:squirtle98
ID: 12457462
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...
0
 
LVL 17

Expert Comment

by:Lobo042399
ID: 12458910
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
0
 

Author Comment

by:squirtle98
ID: 12472378
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...
0
 
LVL 8

Expert Comment

by:pjcrooks2000
ID: 12472484
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
0
 

Author Comment

by:squirtle98
ID: 12472616
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
0
 
LVL 8

Expert Comment

by:pjcrooks2000
ID: 12472841
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 :)
0
 
LVL 5

Expert Comment

by:AntonioP
ID: 12478401
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.
0
 
LVL 17

Accepted Solution

by:
Lobo042399 earned 500 total points
ID: 12478887
Hi Squirt,

No, not in a Adjustment Layer....  in your main Layer, just hit Ctrl-M to open the Curves box.

Good Vibes!

Lobo
0
 
LVL 8

Expert Comment

by:pjcrooks2000
ID: 12479010
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
0
 
LVL 17

Expert Comment

by:Lobo042399
ID: 12510157
Thanks Squirtle!! Glad I could be of help.

Good Vibes!

Lobo
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
I designed this idea while studying technology in the classroom.  This is a semester long project.  Students are asked to take photographs on a specific topic which they find meaningful, it can be a place or situation such as travel or homelessness.…
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question