Solved

Images for web

Posted on 2004-10-30
169 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
Question by:squirtle98
    13 Comments
     
    LVL 17

    Expert Comment

    by:Lobo042399
    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
    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
    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
     

    Author Comment

    by:squirtle98
    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
    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
    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
    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
    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
    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
    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:
    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
    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
    Thanks Squirtle!! Glad I could be of help.

    Good Vibes!

    Lobo
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
    Read about why website design really matters in today's demanding market.
    In this tutorial viewers will learn how to correct colors in Photoshop using the Hue and Saturation adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Hue and Saturat…
    In this tutorial viewers will learn how to create a Photoshop action to apply adjustments and effects to multiple images. Open a photo for editing in Photoshop: Open the Actions window by going to Window > Actions: Start a new action by selecting th…

    884 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

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now