PDA

View Full Version : TUTORIAL: Creating high-quality thumbnails for your TGP or G


Dynamix
05-08-2005, 05:22 PM
http://www.dynamixxx.com/thumbs.gif

STEP 1 Select an image from the gallery to use for your thumbnailPick 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>Blur>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.


Hope this helps a few of you :)
This should help to provide better quality thumbnails for your TGP and hopefully increase productivity :) After using hand-made thumbs in my TGP's and galleries instead of just what Comus crops for me, I've seen more clicks and better productivity.

I'll be posting this and other tutorials at my design site - www.dynamixxx.com - in the near future. Feel free to contact me via AIM/ICQ (see sig) if you have questions.

Yahook
05-08-2005, 05:25 PM
Very good tutorial Dynamix, thanks :cool:

grafik
05-08-2005, 07:40 PM
rather well

xariton
05-10-2005, 12:56 PM
http://xariktraffic.com/example/th1.jpgbefore
http://xariktraffic.com/example/th2.jpgafter
When I make thums in photoshop I:
1. Select area with Marquee Tool (Fixed Aspect Ratio)
2. Crop
3. ImageSize (select size you need)
4. Image - Adjustments - Brightness/Contrast. Set Brightness to 7-15
5. Filter - Sharpen - UnsharpMask. Set 30%, 0.7, 0
6. File - Save as for web. Set jpeg, quality 55%, blur 0
That's all.

Yahook
05-10-2005, 12:58 PM
xariton, your thumb also looks good :cool:

xariton
05-21-2005, 11:05 AM
The best way to create thumbs by PHP
function thumb($size,$from,$to)
{
system("/usr/local/bin/convert -filter Blackman -thumbnail '$size>' -unsharp 1x2+1+.10 -antialias -interlace Line +comment +profile '*' -quality 90 '$from' '$to'");
}

Only check path to imagemagic

Yahook
05-21-2005, 11:34 AM
1. Select area with Marquee Tool (Fixed Aspect Ratio)
2. Crop
3. ImageSize (select size you need)

I think it will be better to change steps positions

1. ImageSize (select size you need)
2. Select area with Marquee Tool (Fixed Aspect Ratio)
3. Crop

:-?

xariton
05-21-2005, 03:33 PM
No :)
It's right to make:
1. Select area with Marquee Tool (Fixed Aspect Ratio)
To set width/height proportion
2. Crop
Other words now you have picture e.g. 120x160 * 20 i.e. image with proportion 120x160 but bigger size then you need
3. ImageSize (select size you need)
And now you resize this image to 120x160 keeping proportion.
Just try for yourself and you'll see :)