TUTORIAL: Creating high-quality thumbnails for your TGP or Gallery in Photoshop
 

STEP 1 Select an image from the gallery to use for your thumbnail
Pick an image that will be suggestive, you want to entice your viewers. Grab a sexy smile, or something that portrays what the viewer will get from the gallery. Either Copy&Paste this image into Photoshop, or save it to your hard drive and open it in Photoshop.

I used this image: http://www.cherrygals.com/babestv/11/ (second on top row).


STEP 2 Crop the image into a thumbnail
Using the Rectangular Marquee Tool ("M" on your keyboard or the top-left tool icon) set the Style to Fixed Aspect Ratio. On the top toolbar just below the menu you'll see "Style: [Normal]" - change "Normal" to "Fixed Aspect Ratio" and for Width and Height input the size of your thumbnail. For this tutorial I'll be using 90x120.

Make your selection, and crop it (Menu: Image>Crop).


STEP 3 Flatten the image
If you opened the image from your hard drive you can skip this step.

From the Layer menu you'll need to Flatten the Image (Menu: Layer>Flatten Image).


STEP 4 Adjusting the color using Levels
This technique takes a bit of practice to get down correctly, so don't be discouraged at first.

Open the Levels window (Menu: Image>Adjustments>Levels, or CTRL-"L" on your keybooard).
On the Input Levels diagram drag the black arrow inwards a bit until you achieve the desired effect. You'll notice the left Input Levels box increasing, mine was set at 65. Click OK.


STEP 5 Adjusting the color using Color Balance
This technique, too, will take practice.

Open the Color Balance window (Menu: Image>Adjustments>Color Balance, or CTRL-"B" on your keyboard).
The first step, by default, is the Midtones. I enhanced the tan a bit by dragging the Cyan marker towards Red (+11), Magenta marker towards Green (+10), and the Yellow marker towards Yellow (-11).
Next is Shadows. Click Shadows under Tone Balance. I set Cyan to +19, Magenta to -9, and Yellow to -14.
Highlights I left at 0,0,0.


STEP 6 Adjusting the color using Brightness/Contrast
Again, this technique will take practice.

Open the Brightness/Contrast window (Menu: Image>Adjustments>Brightness/Contrast).
Play with the Brightness and Contrast sliders until you achieve your desired effect. I slid the Brightness marker to +10, Contrast to -8.


STEP 7 Softening the features
For this technique you will need to duplicate the Background layer.

If the Layers pallete is not already visible, open it (Menu: Window>Layers, or "F7" on your keyboard).
On the Layers pallete right-click your Background layer and select "Duplicate Layer.." From the new window type an appropriate Layer Name (replace "Background copy" with "Softening") and click OK.

Select your new layer so it is active and add a Gaussian Blur (Menu: Filter>Blue>Gaussian Blur...) with a Radius of about 1.5px. Click OK.
On the Layers pallete again, change the Blending Mode (it will be defaulted as Normal) to Soft Light. Adjust the Opacity as you see fit (I chose 50%).


STEP 8 Flatten the image
When you're finished with your thumbnail, once again flatten the image.

From the Layer menu you'll need to Flatten the Image (Menu: Layer>Flatten Image).


STEP 9 Resizing your thumbnail
The final step is to size your thumbnail. Bring up the Image Size window (Menu: Image>Image Size). Make sure the "Constrain Proportions" option is checked, and enter your thumbnail size we selected at the beginning (mine was 90px wide, 120px high).

Now view your thumbnail at its final size (Menu: View>Actual Pixels, or ALT+CTRL+"0" on your keyboard).


STEP 10 Save your thumbnail.
Finally you'll need to save your thumbnail. Bring up the Save For Web window (Menu: File>Save For Web). Change the image mode to "GIF", Colors to "256", "Selective" pallete, and "No Dither". Click Save.

You forgot the most important step, unsharp mask :)

Yea I thought about getting into Sharpening Edges and Unsharp Mask but didn't want to drag it on any longer than it already was. When I post on my website I'll be sure to include that :)

easier way is to get Alienskin Image Doctor :) Adjust some brightness/constrast and use image doctor and bam! :D

neither the before or after looks all that high quality

that's exactlt my thoughts :( anyway, thanx for sharing, I think it's very cool of you to try to help, same with that little proggy you made a few days ago :thumbsup

phuck photoshop... ez gallery builder represent :)

Thanks for sharing.

I have been looking for a way to make \ touch up thumbs. :thumbsup

okay, let me re-phrase: higher quality :)

Bump. This is the kind of shit this board needs, not what kind of haircare products bdjadjf uses on his pubic hair.

LOL so that's what that was about. I was afraid to click on it :)

Isn't there an easier way, you would have to do this to hundreds of thumbs..?

I believe you can save that as a "preset" or "action" in Photoshop to make life easier.

some good tips here :thumbsup

Good job, keep them coming :)

Good article, thanks ;)

For aspect ratio, divide 120 into 90 or 90 into 120 then use the ratio.. I don't think you had it that way in your tutorial but I am fucking dead tired. I think you said 90 and 120 in the box... or some shit... good night.

thank you
 

Dynamix thanks for the good tips along with everyone elses input!!
:thumbsup

I look forward to more of these threads along with the domain related threads by Dombuyer!

Thanks guys :winkwink:

omg please :stop

That's certainly a way to do it, hadn't thought of that myself, plus I'm no good with math so I wouldn't trust it ;)

And yes, rez, once you have your cropped selection (after Step 2) you could Record and Save the remaining steps as an Action and re-play on each new cropped selection, OR on an entire folder of saved selections, the only problem is that each image would need to be color balanced individually, or should be at least.

More tips in the future, hopefully this helped some of the newer webmasters :)

Great read man!!

Thanks for the tutorial :)

kick ass article man HUGEASS bump to you

We use anothers technics, but nice tips too :)
Here my work:

http://www.wannawank.com/trip/kate.jpg
http://www.wannawank.com/trip/gfy2.jpg

TGP OWNERS:

If you run a big tgp (more than 60k) and do you need my galleries + this kind of thumbs i can sed you 5 a day (teen - amateur - softcore).
I will appreciate some partners accounts...

icq: 221-550-099
moonboy (at) speedy.com.ar

thank you !
Porko

Damn, there're some VERY nice tips here. I've added this thread to my bookmarks.

very nice!

Bimbo those thumbs are killer.

why not share your techniques as well :winkwink:

Nicely done :) A similar technique to what you do is much easier than what I listed.

Step 1 - Load thumb and crop
(see above)

Step 2 - Sharpen image
Bring up the Unsharp mask options window (Menu: Filter>Sharpen>Unsharp Mask..).
These values can be modified to your liking, but something similar to: Amount 83%, Radius 18px, Threshold 0 levels

Step 3 - Adjust brightness/contrast
(see above) - I used the following values: Brightness +24, Contrast -10. Again, adjust as you see fit.

Step 4 - Glow effect
Duplicate the original thumb layer (see above), Add a Gaussian Blur (see above) - I used 1.3px. Adjust the layer mode to Screen, Overlay, or Soft Light depending on what looks best, then reduce the opacity somewhere between 50-80%

http://www.dynamixxx.com/thumb2a.jpg
http://www.dynamixxx.com/thumb2b.jpg

Patrick

great tips here, thanks for the read...

http://www.dynamixxx.com/thumb2b.jpg

Not the greatest....

Thanks buddy !

quality information there guys - cheers

Yes you can. But with different quality for sure..

I would have done something like this :winkwink:
http://www.perfekt.tk/optimisedthumb.jpg

hey not bad !!

damn, the thumbs in here are amazing. check out mine.
http://thegalleryguy.com/images/thum...mplethumbs.jpg

Can anyone give some tips on optimizing thumbs? I'm having trouble getting good looking thumbs down to a reasonable size. I've been using Imageready. Is Photoshop any better for this?

Thanks.

Smart Blur.

This thread is great, some great thumbs in here too.