Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

3 Dimensional Chat / How to make a seamless texture from a photo in Photoshop

Author
Message
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:19 Edited at: 22nd Oct 2006 00:57
Link
Wasn’t quite sure whether to post this in 2d or 3d. In the end I decided although it’s about textures, it’s about seamless textures – and they are used more often in conjunction with 3d – so it’s here in 3d chat.

Secondly, this can’t be used for every texture (brick photos require far more manipulation) and it is slower than using a “make textures seamless” program. But there is really only one way to get decent textures – doing them by hand.

Before we start: if you can afford a graphics tablet with pen and mouse, get one, as it makes texture work so much easier and accurate. And the mouse neither needs a cable or a laser or ball to read it’s movements – so it never needs cleaning. If my tablet broke today – I’d buy a new one tomorrow.

Ok, now to the tutorial:

(people are welcome to post equivalent tools for Gimp and paintshop for the offset filter, gradient fills, and clone tool.)

Lastly, this tutorial is for people who don't know how to make a seamless texture and would like some advice! Hope this does help.

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:19 Edited at: 22nd Oct 2006 00:32
Link
1.Open your source photograph. (start.jpg)

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:19
Link
2. Zoom in to check whether it is a crisp photo close up or too blurred to be usable.

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:19 Edited at: 22nd Oct 2006 00:34
Link
3. If ok, but slightly blurred, sharpen (which I did on this one) otherwise go straight to 4.

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:19 Edited at: 22nd Oct 2006 00:34
Link
4. Select a square area where the overall tone seems flat - as the light in photos can subtly change across them. This isn’t too noticeable until the next stage. (crop.jpg)

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:19 Edited at: 22nd Oct 2006 00:25
Link
5. Once cropped, resize to a standard texture size say 1024 x 1024 or 512 x 512 (256 x 256 is okay but will be very blurred close up.) (cropped.jpg)

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:20 Edited at: 22nd Oct 2006 00:40
Link
6. To begin to make a seamless texture in photoshop, the command you need to use is:-

Top menu > Filter > Other > Offset

Make sure the settings are:

Horizontal – half the pixel width of the image - so if its 1024 offset 512
Vertical – half the pixel width of the image - so if its 1024 offset 512
In the Undefined Areas – select wrap around.

Now you can see the subtle tonal change I mentioned earlier - it isn’t so subtle now (offset.jpg)

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:20 Edited at: 22nd Oct 2006 00:43
Link
7. Undo the Offset because we need to correct the subtle indifference in tone. (OPACITY.jpg)
- make 2 layers
- use a white gradient fill – in photoshop it’s called foreground to transparent
- set the foreground colour to white
- do one gradient fill from the bottom to the top
- do one gradient fill from the left to the right
- change the layer setting to overlay (where it says normal on the layer window) for both layers and reduce the opacity to between 10-20%

These fills will need to be different for every image you edit and learning how to correct it really comes from trial and error (as with everything else in computing )

The attached image shows the layer setup, the original file plus to the two overlaid gradient fills. These just reduce that blueness that you saw in the previous image.

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:20 Edited at: 22nd Oct 2006 00:45
Link
8. Flatten the image and redo the offset. (offset2.jpg) Still not perfect but much closer.

(we flatten the image here because the offset filter only works on the layer you have selected - in CS2 you can select multiple layera but I only have PS6 so i have to flatten them.)

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:20 Edited at: 22nd Oct 2006 00:50
Link
9. Make a new layer (this is for the clone stamp).

10. Select the clone stamp tool. Turn on “use all layers”. Change to a brush with soft edges. (brushsoft.jpg)

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:20 Edited at: 22nd Oct 2006 00:51
Link
Now hold left-ALT to pick an area to clone from.

Keep selecting random areas and transferring blobs of it to hide the seams. Change the brush size to something smaller.

Don’t be afraid to press undo – or go up the history to the start and try again. Just keep working until you are happy. (That’s an “artistically happy” not a “thank god that’s over” happy.) J

I’ve cloned over areas that will visually repeat when the texture is in game, these are:
1. The seams
2. The more densely clustered pebbles in the cement.
(clonedover.jpg)

I've indicated the areas I used the clone brush over in red.

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:21 Edited at: 22nd Oct 2006 00:52
Link
11. The trick is to literally remove the more interesting areas. So it’s even across it’s entirety. To be crude about it – make it more boring. Visual repeat is far worse than an even, more boring texture. (finito1.jpg)

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:21
Link
12. The next thing is to save a PSD file. PSD files retain layers. Then save another file in the format you wish to use for your game. You need to view the texture now in engine to spot any problems. If it repeats, you’ll need to go back into photoshop and clone out the offending areas. Then check it again. You’ll basically have to do this until it’s right. Sometimes it’ll be first time, other times you’ll do this 4-5 times. The important thing is to get it perfect.

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:21 Edited at: 22nd Oct 2006 00:29
Link
BONUS TUTORIAL:

13. Normal maps

Normal maps are the best way to make bump mapping in DBPro (and it looks especially good when used with a bump-map fx shader.)

14. Quickest way to make a normal map is to use the nvidia normal map photoshop plug-in which can be downloaded from the nvidia website:

http://developer.nvidia.com/object/photoshop_dds_plugins.html

It’s also good for doing dds textures which, I think, allow the graphics card to use 4 version so of the same texture depending on the distance to the object. Not sure how DBPro handles this though.

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:21 Edited at: 22nd Oct 2006 00:27
Link
15. Take a flattened version of your texture and do:-

Top menu > Image > Adjust > Desaturate

(desaturate.jpg)

Now depending on which elements you wish to have brought forward (which are the areas in white – you may need to invert the image. I did for this texture as the embedded pebbles need to be raised. They show up dark and they need to be lighter.

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:22 Edited at: 22nd Oct 2006 00:28
Link
16. Open the normal map tool under:-

Top menu > Filters > nvidia tools > normal map

Now play with with the settings that I have ringed in red. If it looks wrong (too contrasting) undo and try different settings.

(finito normal.jpg)

For this normal map I used: –
- filter type 3x3
- Min Z = 0 Scale = 20 (These two settings control the strength on the normal map.)

If the normal map causes the raised areas to appear indented then you need to invert the image after it has been desaturated.

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 00:22 Edited at: 22nd Oct 2006 00:56
Link
17. Here is the resulting normal map and texture in Evolved normal map shader demo.
I just replaced the lines that load the wood texture with ones that loaded my new texture.



Looks pretty tasty, if I say so myself.

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist

Attachments

Login to view attachments
Back to top
Profile PM
Robin
21
Years of Service
User Offline
Joined: 22nd Feb 2003
Location: United Kingdom
Posted: 22nd Oct 2006 01:56
Link
Very nice - Thanks for putting this up here

[center]
Dell XPS M1210 12.1" | 2Ghz Duo Core | 2GB DDR2 Ram | 100GB HD | 256MB Geforce Go 7400
Back to top
Profile PM Email Website
indi
22
Years of Service
User Offline
Joined: 26th Aug 2002
Location: Earth, Brisbane, Australia
Posted: 22nd Oct 2006 02:44
Link
you should add the DDS nvidia tool to this tutorial as well.

Back to top
Profile PM Email
Tinkergirl
21
Years of Service
User Offline
Joined: 1st Jul 2003
Location: United Kingdom
Posted: 22nd Oct 2006 12:01
Link
Very nice, I'm sure the bonus about normal maps would be quite popular with the NVidia competition crew right now

Back to top
Profile PM
Crazy Ninja
19
Years of Service
User Offline
Joined: 27th Aug 2005
Location: Awesometon
Posted: 22nd Oct 2006 14:41
Link
Thanks Red Motion! I've got an older version of photoshop but i was still able to complete the seamless part of your tutorial. Now to see if it works in my game.

____ ____ ____ ___ _ _ __ _ _ __ _ _ ____
|___ |--< |--| /__ Y | \| | | \| ___| |--|
Back to top
Profile PM
Redmotion
21
Years of Service
User Offline
Joined: 16th Jan 2003
Location: Mmm mmm.. Marmite
Posted: 22nd Oct 2006 19:25
Link
No problem!

@indi - I'll have a look at doing a DDS tutorial regarding alpha channels so people can get nice transparency. It's a great format for that - the transparenct is REALLY crisp - and mipmapping.

BLACKMESA:SOURCE - mod for HL2 - Texture Artist
BIRTHSTAR:FRONTLINE - Texture & Environment Artist
Back to top
Profile PM
indi
22
Years of Service
User Offline
Joined: 26th Aug 2002
Location: Earth, Brisbane, Australia
Posted: 23rd Oct 2006 04:12
Link
good work mate, thats a great inroad for texture creation.

Back to top
Profile PM Email
Back to top

Login to post a reply

Server time is: 2024-11-26 20:13:13
Your offset time is: 2024-11-26 20:13:13