PDA

View Full Version : How to Add Shadows and Highlights


Faylen
18th Mar 2006, 12:21 PM
This tutorial uses Photoshop

If you dont have Photoshop, there is also a tutorial using GIMP HERE (http://www.modthesims.info/showthread.php?t=517272)

In this mini-tutorial, Iíll show you a useful shading technique thatís different from what I used in the Adding Textures tutorial. Live and learn! This is useful for Maxis items that have a print that you donít want on the new outfit, or for shading a texture that has too many different color values to look right with dodge and burn. Letís start with these pajamas.

http://thumbs2.modthesims2.com/img/2/8/9/2/7/MTS2_Faylen_257505_page-01.jpg


First, we open up the texture file and desaturate it. Next, we go to the Layers menu and make a new, blank layer.

http://thumbs2.modthesims2.com/img/2/8/9/2/7/MTS2_Faylen_257506_page-02.jpg

You can color in the shadows and highlights with black and white, shades of gray, however sharp you want the contrast to start out. Since this is a layer all by itself, itís very easy to go back and forth and change it if it doesnít look right.

All the lines you see have been painted on the new layer, and whatever else we do, weíre keeping this layer on top.

http://thumbs2.modthesims2.com/img/2/8/9/2/7/MTS2_Faylen_257507_page-03.jpg

Iíve filled the background with pink so you can see whatís happening here. Now that we have our lines, weíre going to the Filter menu, selecting Blur>Gaussian Blur.

http://thumbs2.modthesims2.com/img/2/8/9/2/7/MTS2_Faylen_257508_page-04.jpg

A nice little box pops up, and the slider will allow you to choose how many pixels out you want the blur to spread. Whatís nice is that you will see the change as you slide, so you can decide right there what looks nice to you. And once you hit OK, you can still go back and change it if you like.

http://thumbs2.modthesims2.com/img/2/8/9/2/7/MTS2_Faylen_257509_page-05.jpg

Hereís one of those textures I was talking about. If you try to use dodge and burn on this one, it most certainly doesnít look like highlights and shadows. And hereís the other nice thing about this shading method - I selected Image>Adjustments>Hue/Saturation>Colorize and changed the color of the shadows to match the background color of my texture. Then more tweaking - Image>Adjustments>Brightness/Contrast, and an opacity change on Layer 1. What you have to do will depend on the texture you select and how it looks in body shop.

http://thumbs2.modthesims2.com/img/2/8/9/2/7/MTS2_Faylen_257510_page-06.jpg

So you see here some subtle shadows and highlights, and the color of the texture hasnít had to be changed at all, and you donít even need to be a figure drawing expert to do it!

http://thumbs2.modthesims2.com/img/2/8/9/2/7/MTS2_Faylen_257513_page-07.jpg

windgirl
20th Mar 2006, 4:17 AM
Wicked. Extremely helpful. Thanks again.

rence
20th Mar 2006, 5:21 AM
Wow! didn't know it could be that simple! thanks

the_book_of_shadows
29th Mar 2006, 9:39 PM
where do you get your fabrics?

_hp_fan_
31st Mar 2006, 10:16 AM
thanx thats awsome! i have been trying to work out how to add shading to my work to make it look more realistic!

Faylen
31st Mar 2006, 2:57 PM
where do you get your fabrics?

I google. I pick a fabric type I'm interested in, say, "paisley" or "rib knit jersey" and do an image search. If I find a site that has a lot of lovely images I can use, I take screenshots of all the ones I like. Another good source is the back pages and ads in sewing magazines and home decorating magazines. They almost always include their websites. Once you have your images, check my tutorial on making textures from images.

EternalMoonPower
1st Apr 2006, 7:40 PM
I don't get the part where you add the background....How do you add the background? I'm confused....

Faylen
2nd Apr 2006, 6:01 PM
It's a new layer. Simply by copying the texture image and pasting it into your project's texture file, you create a new layer. It's something PhotoShop does automatically.

EternalMoonPower
2nd Apr 2006, 11:40 PM
OK...but...so you paste it in the what file??? (sorry I'm new to BodyShop kinda........ :sadpanda: ) Well, what I mean is do you have to color the background PINK??? Then do you have to paste in a background thingy magiger??? B-b-but when I tried to paste in a background it covered the shadow lines and stuff!!!!!! :madashel: AAAAAAAAHHHH!!!!!!!!!!! I'M SO CONFUSED!!!!!!!!!!!!!!!! * falls on the floor dead *

Faylen
3rd Apr 2006, 1:37 AM
Then you need to go back and read the basic recoloring tutorials at the top of this forum.

vimto666
3rd Apr 2006, 5:32 PM
can this ne done with the GIMP? if so, how??

EternalMoonPower
4th Apr 2006, 11:40 PM
Then you need to go back and read the basic recoloring tutorials at the top of this forum.

:nod:ok... :nod:

simmic
8th Apr 2006, 2:50 PM
thanks for the great tutorial!

Vaalyah
11th Apr 2006, 9:03 AM
I'ts very interesting and most of all, you have explain everything with great clarity, thank you! ;)

selena_1977
30th May 2006, 1:34 AM
is this how you get the nice metallic look clothing? or do you achieve that with a different method? can someone point me in the right direction?...i've been looking on how to do this all day and I can't find anything. I would like to create very shiney clothes like how satin or metallicized fabrics are. thanx.

HystericalParoxysm
30th May 2006, 1:47 AM
This method should be able to be modified to create shiny-looking textures - you'd use thinner lines and blur less. Usually "shiny" texturing is done high-contrast, with a small, stark area of highlighting against a darker background. Also take a look at actual pictures of the fabrics you're trying to create, to get an idea of how the light plays across the surface, and existing shiny clothing recolours, to see how the texturing is done there.

You may also want to read this Elfwood article on making things shiny. It's relating to metal and from a drawing standpoint, but the concepts of "shine" and how to get a realistic effect still apply. It may be helpful in getting you thinking about shininess the right way. :)

selena_1977
30th May 2006, 4:46 AM
Thank you so much HystericalParoxysm! that is a great article. I only hope I can create textures worthy of posting with this info.

Nita-Chan
1st Jun 2006, 11:59 PM
Woot, awesome tutorial! I'll be making recolors more often now. Thanks!

missroxyta
8th Jun 2006, 6:30 AM
There's another nice and easy way of shading. I'm not sure how it works for photoshop though. This is for Macromedia Fireworks MX. But if you know how photoshop works, you should get the main idea.

1. Choose the porygon lasso tool. And instead of leaving the edge hard, select the feather mode, change the number in the right from 10 (default) to 30 or above. This will create a more faded selection.

2. Just select the areas you want to highlight and copy them into a new layer. (It would be a nice idea that you keep the pattern/background layer in a 30% or something of transparency, so you can see where the original shadows go)
Repeat the same for the shadows.

3. Now, select the highlights layer, go to add effects. Select Color Adjustments > Curves.
If you move the curve up- left you'll get a lighter version of the background, and if you move it down- right, you'll get a darker version.

4. Just change the colors for each layer. It gets a nice fade ^^

It works for any bitmap, so it's useful for patterns and one color backgrounds.

*** I was a bit lazy with the shading, but if you're more careful on the selections, you'll get a nice result.

*** Look at the pics!!! I liked the result, it looks like a shiny golden top... maybe it needs more contrast, but it looks cool ^^.

MusicSimsFreak
11th Jun 2006, 5:05 PM
Very helpful!!! Now my clothes can look a little realer! I'm posting this in my favorites :)

windrose
10th Jul 2006, 12:55 AM
I'm just a wee novice when it comes to doing recolors and such in photoshop, and trying to figure out all the tools and tricks can be very daunting. This is the most simple and direct tutorial I've seen, and very useful. Thank you.

hopawaay109
19th Jul 2006, 3:31 PM
OH MAN THANK YOU!!!!! BRILLIANT this will help tons!!!!

HEHAWboo
9th Oct 2006, 6:57 AM
oh wow! thanks, it's amazing how much that simple of a thing can do to change how good your outfit looks!

abidazz8
23rd Dec 2006, 9:22 PM
I've been trying to do this for years, and every tutorial I've seen just seems impossible but you make it look so easy! Thanks again I love your tutorials!!
I'm glad you use photoshop too hee hee!!

Lillz.
1st Apr 2007, 3:28 PM
Thanks! This is very helpful! :]

tish85
13th Apr 2007, 9:52 AM
Thanx A Lot!i'll Need It!

iskandars
19th Apr 2007, 4:29 PM
thanks... ireally wanna try it..

HCAC
27th Apr 2007, 9:40 PM
Yes, if I can figure it out in PaintShop Pro I will try it, too! Amazing. I kept wondering how to make my clothes less flat..but I am not a whiz with Paint Shop (self taught).

Thank you, I love to learn new things all the time! :)

Kirple
15th May 2007, 10:43 PM
I've read all of your tutorials and they've really helped I have a couple of sim outfits that I'm really happy with but I don't get this whole highlights/shadows thing. I mean, I get the idea and I understand how to do them but how do you keep your original colors and textures and add shadows and highlights to them. This tutorial only explains how to make highlights and shadows with a new color/texture. How do I keep the one I've already made?

$RaMRoM$
18th May 2007, 10:55 AM
Thanks Faylen!

Hakkerh
29th May 2007, 7:06 PM
Sorry, but.... I making clothes and this i GIMP 2 so... I dont understand that tutorial... Can someone tell me how to make this in GIMP?

Evil'sQueen
29th May 2007, 10:36 PM
Holy crap! Thank you so much!

HelloWorld!
3rd Jun 2007, 6:47 PM
do you have to have photo shop??????

tiggerypum
3rd Jun 2007, 8:46 PM
HelloWorld - you have to have an image editor that supports layers (obviously) and know how to use it. Read faqs and more tutorials.

susim
3rd Jun 2007, 11:40 PM
Thank you SO MUCH Faylen!!!!
My headache from pounding my head against the wall in frustration is already receding.
You are an angel!!! :gjob:

Thank you for caring and sharing!

tigerkit23
11th Jun 2007, 10:38 AM
thanx so much this has helped me a lot

menotyoux2
2nd Jul 2007, 11:47 PM
Thank you! I've been looking for a good shading tutorial

a87370ylgrc
6th Jul 2007, 5:33 PM
Is there a way to do this with normal paintshop?

hannaYEAH
24th Jul 2007, 11:07 PM
is there any way to do this on windows paint?

Symbelina
26th Jul 2007, 1:17 PM
Next, we go to the Layers menu and make a new, blank layer.

How do you make a new layer? And how do you know which layer you are working on? How do you put them together at the end?

I'm not sure I understand how to make the shading the same color as the fabric, either.

Thanks for the great tutes, I just get confused unless it is ALL spelled out.

littleflowersim
8th Aug 2007, 10:01 AM
Hellol! Thanks for this turorial, it helped! BUT, I have GIMP 2 and cant figure out how to do this there, Can somebody help me?

EmoRocker
15th Aug 2007, 9:55 PM
I'm trying to add shadows to only one little section on clothing but how do I do that without getting the whole backround?

Nukapei
21st Aug 2007, 3:42 AM
Thanks so much, Faylen! I use glaussian blur all the time with my art, never thought to use it for TS2. It's one of my favorite tools, though. Very powerful, and very awesome.

For those of you asking about the GIMP ... same concept applies, just things are in different places. I've included a diagram of where the layer controls are, as well as the glaussian blur. When she directs you to go somewhere in Photoshop, just do the same thing, but in the corresponding place in the GIMP.

CheruB
10th Nov 2007, 4:41 PM
very helpful! thank u!

EmoRocker
14th Nov 2007, 4:47 AM
Can you use GIMP?

tiggerypum
14th Nov 2007, 7:35 AM
EmoRocker - you can use similar techniques using gimp, of course. You need to know how to use gimp

wolfgal
16th Nov 2007, 2:39 AM
Its so cute but it won't work for my GIMP. I do have Photoshop but it only 40 days expire. So I will have to wait until xmas coming to get one from my mom. I hope so. I will keep it in my bookmark. I am trying to understand.. but how did you change from regular color into grey image??

tiggerypum
16th Nov 2007, 7:05 AM
uhm, 'desaturate' is the name of the command. I assume actually it would be similar in gimp. Go look at the gimp tips thread (stickied top of the main bodyshop forum). There's links to various tutorials that might help you learn how to use gimp (even if not working on sims)

gazdadude
2nd Dec 2007, 6:54 PM
if its a texture template would it be the same pricables as i'm have troubles with this

QTValeria
17th Mar 2008, 11:01 AM
This is a great tutorial, but is there anyway of doing that in paint?

sga_girl
2nd Apr 2008, 7:28 PM
Great tutorial Faylen. I have a question though. How would one go about making highlights and shadows on a bright color shirt with thin horizontal stripes? I have found it hard to do so.

Liviaa
17th Apr 2008, 2:10 PM
i love you. in other words, thanks :)

Peekabo
26th May 2008, 7:20 PM
I dont have photoshop, but I have photoimpression and paint:P How do you make shadows and stuff then??

liila11
29th Jun 2008, 9:23 PM
Thank you Faylen, again. :)

Soundwave1984
19th Jul 2008, 3:32 AM
where do you get your fabrics?

You can get some from here http://cgtextures.com/ :anime:

melojelo
16th Aug 2008, 2:29 AM
can you help me i have done exactly what you've done in this example, except i changed the fabric but i've done all that you've said but the shadows didn't appear when i had it in body shop. Any ideas what probably went wrong?

Little Uchiha
27th Aug 2008, 8:49 AM
How simple some things can be! Thank you very much ;)

dani5273
17th Sep 2008, 3:31 PM
Faylen, I have to thank you so very much for your excellent tutorials, I have gone thru each one of them word for word and have finally been able to create items for my Sim's. I used the shadow and highlite's tutorial to add a texture to the double wide curtains! Thank you so much for taking the time to show people how to create. My creations are far from good enough to post here but because of your tutorials, I feel in time they will be. Thanks again! :P

daphnegirl123
8th Oct 2008, 5:58 AM
Thanks so much!

I tried it in Paint.net....I must've done something wrong, cause when i refreshed, the whole clothing was missing! I don't know. :-/ I need to read more lol.

cryptographic
7th Mar 2009, 11:01 AM
Thanks Faylen!
Your entire tutorial series was great, hopefully now my clothes will look a tonne more realistic
:)

pmsusie
4th May 2009, 5:21 PM
Thank you Faylen! I have learned so much from your tutorials, especially how to use the Photoshop Elements that I won in a scrapbooking contest! I read them all, several times and yesterday I made the first item that I can truthfully say I am proud to have made. I went online, found a skirt I liked, got the texture, skewed it a bit, and used it to recolor a drab looking maxis into a fabulous new dress. Thanks so much!

Untitled_tina
19th Aug 2009, 3:45 PM
omg! that look easy :D
thank u very mux :D :D :D

nandypanda
22nd Nov 2009, 9:15 PM
I don't get it. I have paint.NET and I am just blustered.

403880
2nd Dec 2009, 11:36 PM
Can you do that without photoshop

Amtram
3rd Dec 2009, 1:50 AM
As I've played with this, I've found that it sometimes helps to make several different layers for this - thick shadows, thin shadows, thick and thin highlights, and to colorize them using hue/saturation for certain textures. That way you can be a little more accurate with the opacity of each shadow and highlight, and take out individual spots you don't like without scrapping the whole thing.

Unless you're really artistic, use lots and lots of layers to compensate for not knowing for sure whether your brushstrokes are going onto the right places!

Topvideo
31st Dec 2009, 2:01 AM
how do u dd a new blank layer again?

Amtram
1st Jan 2010, 6:30 PM
Easiest way is to go to the layers menu at the top menu bar and select New>Layer from the drop down menu.

STICKYJELLY&GUMMYLOVER
12th May 2010, 7:50 PM
can you do this with "PAINT" ?

AnnitaSims
25th Jun 2010, 5:21 PM
Thank you!!!

Amtram
25th Jun 2010, 8:01 PM
No idea if you can do it with Paint. Never tried it.

What I've been doing with Photoshop has been making a copy layer of the original texture, moving it up to the top, and creating a new layer that I paint on. One color gets picked up for shadows, and there may be a second or third layer if the outfit has different colors in different sections. Using a faded edge brush, anywhere from 9-24 pixels, I'll make lines or dots where the shadows are on the original texture (pay attention to which layer is highlighted before you start, or you'll be painting on the background copy layer instead of the shadow layer!) Using the smudge tool, I smudge the lines and dots until they match the original as closely as possible.

Then click on the background copy layer in your layers palette and slide the opacity to zero so you can see how the shadows look on your texture. If the color isn't right, select Image>Adjustments>Curves. Even if you don't know how to "properly" use this tool, you can play around with it and see what looks right. It's a lot less guesswork than trying to fool around with Hue/Saturation.

When the color looks right, then go to your layers palette and play with the Fill and Opacity. Fill basically changes the size of your shadows. The lower the fill, the more your shadows will retreat from their edges. Opacity changes how much of your texture will show through the shadows.

If you get an opacity that you like, but the color of the shadow doesn't work anymore, try going to Image>Adjustments>Hue/Saturation and changing the saturation of the shadows. If you got the color right the first time, this will do the trick. If not, then go back to Curves, but only as a last resort. Once you change the curves, you'll get a COMPLETELY different result when you adjust the opacity of your layer. If your version of PS has Vibrance, that might work, too. It depends on the colors and pattern of your texture.

Keep checking your results in Body Shop. Hit F9 if you want to get rid of the tool tips box on the right and get a better full view. (F9 again brings the tool tips back.)

Once you've got that, do the exact same thing with a new layer for highlights. You may like the look of the highlights layer on top, or you might prefer the shadow layer on top instead.

The nice thing about this is that you can make a mistake and not have to trash your whole project. My artist daughter scoffs at me because using the smudge tool is typical of amateurs, but I'm an amateur, and she's shown no inclination to teach me a better way. So there.

lientebollemeis
9th Sep 2010, 8:48 AM
So if I understand this correctly it are the lines that add the shadow? Does it matter where you add those stripes in the pic? I want to add some shadow to a necklace.

Amtram
9th Sep 2010, 5:39 PM
If the necklace is "painted on", then there are a couple of easier ways to do it. If all you're trying to do is make it "pop out" a little bit more from the sim's neck, you select the necklace only. To protect the rest of your texture, copy and paste it to make a standalone necklace layer. Go to the layers menu, select layer style, then drop shadow. A box will pop out that will allow you to adjust how deep the shadow looks, how many pixels it spreads out, the direction of the light source, and such. Play around with it, "Save As" the texture bmp and preview it in Body Shop, but don't flatten your layers until it looks right on the mannequin.

If the original outfit comes with a bump map, you can increase the lightness of the necklace part of it and/or increase the darkness of the shadows, but again, make a duplicate layer so that if you mess up, you can go back to the original.

mikorox
19th Sep 2010, 3:52 PM
yay! thanks so much, this is extremely helpful!

NeonSim
18th Feb 2011, 3:10 AM
omg thanks a MILLION for this! its just what i needed to know~

AbyssBatty
16th Apr 2011, 10:19 AM
hopefully this tutorial helps with a dress i want to upload soon!

AbyssBatty
16th Apr 2011, 10:31 AM
Thanks so much!

I tried it in Paint.net....I must've done something wrong, cause when i refreshed, the whole clothing was missing! I don't know. :-/ I need to read more lol.

Well...i use Paint.NET...did you edit the Alpha file with Paint.NET? There's a glitch with it meaning you must use normal Paint to edit these without problems.

Katee.
15th Aug 2011, 9:47 AM
Just needs a tutorial for paint now :(... On Windows 7 paint. :l

Katee.
17th Aug 2011, 10:21 AM
Creates clothing that might be qualifed now I can put some shading in ;)

AMZA13XD
18th Sep 2011, 10:18 PM
:help: does anyone know how to make skinny jeans or shorter dresses :help:

fakepeeps7
19th Sep 2011, 8:46 PM
:help: does anyone know how to make skinny jeans or shorter dresses :help:

Check out the tutorials in the Meshing section.

Nikki17
27th Sep 2011, 1:28 PM
Can i use gimp too? :blink:

tara902
28th Sep 2011, 12:50 AM
:beer: Can i use gimp too? :blink:

:here: i don't think you can its worth a try tho :gjob:

fakepeeps7
28th Sep 2011, 6:21 PM
Can i use gimp too? :blink:

Of course! GIMP is very much like Photoshop, so there's no reason why it wouldn't work. (That said, you should be familiar with GIMP and its tools before you try using a Photoshop tutorial. The skills should be transferable... but not all the tools are in the same place or called the same thing.)

TotallySimsCrazy
4th Apr 2012, 1:32 PM
Thanks Really Helpful! Now i can improve my dress

QuackClaire
13th Apr 2012, 2:46 PM
where do you get your fabrics?

go to google images and search patterns. MASSIVE results

foreverdeen
10th Mar 2013, 3:20 PM
Anyone knows how to do this on Gimp? i tryed doing the steps on Gimp but theyre completly different! :help:

kaythegreaser
7th Jul 2015, 7:54 AM
Thanks, but what about if you're using Windows paint?

fakepeeps7
7th Jul 2015, 6:21 PM
Thanks, but what about if you're using Windows paint?

Simple answer? Don't use Windows Paint. You can't do much with it at all. Try one of the free programs out there (like The GIMP).