What's new
By:
Filters
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

How do you create website thumbnails in Photoshop?


R

Rhino1616

Member
Messages
23
Likes
0
Good day,

Im creating my very first CD portfolio and I would like to display my website on it. I like the effect I saw on: http://www.mr-phil.com/portfolio.htm. I like how you see thumbnails of the website he's designed with a little excerpt about each site (I personally dont like the corner clips). Im assuming these thumbnails are done in Photoshop, colud someone explain how to achieve this effect.

Thanks for the help,

Newbie :)
 
I prefer to make them one by one as I always say that if you don't *take* the time to do something, you'll never have the time for it.

This said, I first look for a good size, like the link you showed. There I rightclick on a thumbnail and look at properties. This gives me the size of the thumb.

If I have my images ready, I then open them one by one in PS and go to Image>Image size. I tell Photoshop to resample bicubic (set by default) and then I go from the big image in a few steps to the size of the thumbnail. The reason for doing it in steps is that the quality is better. Then I save for web as jpg or gif and try to get the size of the file quite low(under 15K) because every byte has to be loaded, and there are still lots of people with slower connections.

Should you want to make a series of webdesign splash pages, you will have to open them first one by one in your favourite browser and then press the PrtSc button (right of F12). Then open a new doc in Photoshop -it'll be set default at the size of your monitor's resolution- and then paste (Ctrl+V) the countenance of the clipboard into PS. This file should immediately be saved as a tiff or a .psd file. Not a jpg because that format is lossy and would start showing artifacts and bad quality if I had to rework it later.

There are quicker ways, yes, but none gives you the same contact with your work or the same level of tweaking options.
Then do the above.
 
I prefer Erik's method, but if you want to automate the process, then you might want to go here:

File/Automate/Web Photo Gallery...

or write your own actions.
 
Mark posted a Photoshop action for making thumbnails a while back - perhaps some one has a copy [confused]
 
Welcome Rhino1616! :)

Yes, I like Erik's method as well! ;) Another consideration is, if you're "sizing down" from a really large image to a much smaller one, you might want to "eyeball it" and sharpen it up a bit with the "unsharp mask". Clarity and crispness is always lost when shoving (for example) ten pixels into the space of one! :\
 
cjogo, you have some beautiful photography on your website. :perfect: Thanks for sharing with us!

Yes, you would be wise to use "thumbnails" of the pictures within your galleries. The pages, for someone like me (on a 56k dial-up connection) take "forever" to load and I would suspect that most visitors (like me) would lose patience waiting for the complete gallery to load. Thumbnails would make your gallery pages load quickly and enable the viewer to pick and choose which photographs they would like to see larger versions of! ;)

Again, beautiful photography... and when I have "much more time" I will go through it more extensively. :perfect:
 
wendy ...... thanks for the info....glad you liked the photos....I will find a manual/article on how to create thumbnails somewhere...hopefully cannot be that difficult :{ this forum is a godsend,,,,,,,,,what would take me 30 days of trial & error ---
can take under 3 days from the confident replies, we receive at the FORUM<<<<<<<



cjogo
 
How do you open the website in Photoshop?

Hi guys, thanks for the info. Unforteately when you say: "First open your image", I dont know how to open a website in Photoshop..(YUP I'm a rookie). I go "open as", and navagate to the folder where my website is located and when I try to open the index page, Photoshop 5 responds its not a valid PSD file. I think Im probably opening it wrong. Could someone please clarify, Thanks

R
 
Rhino1616 "open image" refers to your "original photograph"... not your website! ;) What you want to do is make a "thumbnail" image of the photographs posted on your website. :)
 
Thank you

Thanks Eric, and gang!!! I got it to work. It came out not to bad, does anyone have any further suggestions on sharpening it up a little. Thanks again Eric.

Rhino1616
 
It's good to remember that jpg is lossy. This means that it says to itself: "Ahh, those pixels are nearly the same. I'll just remember one value for all, and that will have to do. No one will notice."
This is handy, and even necessary because otherwise the filesize would be too big for the Internet.
jpg is great with photographs of skies etc, but the more changing colours it encounters, the less it can compress. The same goes for sharpening. The final work can indeed be sharpened, but personally, I wouldn't sharpen a thumbnail too much as it does increase the filesize.

Just try this out, and exaggerate: open a very coloured photograph with some rather shart edged objects and save it AS A COPY (can be set in the opening dialog box. this means that the original is kept open. If you don't do this, it will be the jpg you will have open) as a jpg (save for web). Write down the filesize at a certain quality setting of the slider. Now go to Filter menu, open Sharpen, Unsharp mask and set the top slider so that the image becomes very blurry. You may really exaggerate. Save again as a copy with the same quality setting. Now compare the file sizes.
 
Good point Erik, and one to be respected! ;) The key is to not to sharpen too much!
 
You must log in or register to reply here.

Back
Top