UVMapping_grid

UV Mapping Texture Grid for beginners

UV Grids for Beginners

 

What’s a UV Mapping Texture  Grid and why would you need one?

When you’re done modeling, you’ll need a good UV texture grid to provide you with the best UV mapping help you can get – the flatter the UV map, the better your texture basis.This goes especially for game-models, as the texture and it’s displace/bump often have to compensate for lack of detailing in the mesh. Most applications ship with a black and white chequered map, which is fine, but a map like that will often give you mediocre results, as no matter how finely you tile it, it won’t pick up a 100% on flipped UVs or other, finer distortions. Use a coloured and patterned UV mapping texture grid instead: Colouring the chequers will help, but not as much as a combination of chequers, colours, numbers and/or lettering. UV space ranges from 0 to 1, so adding numbers and letters will make it easier to navigate to your problem area as well. Personally, I also find it easier to also keep my grid on a hard 1 or 2k in pixels, This way I know that each defined gridline is a 100 pixels in length or height, making troubleshooting easier. You don’t have to follow me on this, you can of course also use the power of two,(2, 4, 8, 16, 32, 64 and so on) but that means you’ll have to pick either 64 or 128 as your base grid dividers in order to keep it proportionate.

* I like to have layers with different patterns, gradients and letters in my main UV-grid file. This way, I can vary my grids and tweak them for a specific task if needed.

* I’ve reduced the size of the illustrating images – Click on them for a larger view

* You can download the full PSD from the Downloads section on top of the page.

Creating the pattern

  • Create two documents in Photoshop: One set to 1000×1000 pixels and one at 200×200 pixels.
  • Switch to the 200×200 document
  • Add two guides on the vertical and horizontal 100 marks.
  • If you’re new to Photoshop, click on the rulers on top and side of the screen and drag – a blue line will appear. Press CTRL + [H] to make them appear and dissapear
  • Create a new layer, and fill it with black
  • Create a new selection in the upper right quadrant, and fill it with white
  • Create Guides on the 150 vertical and 50 horizontal marks
  • With the selection still active, create yet another layer, and fill it with a diamond gradient: Place your cursor where the guides meet, and drag to the upper left corner of the quad. That way, you won’t have to rotate it to generate a square
  • It should look like this:
  • Create a new layer and a new guide on the 50 vertical mark
  • Go to the upper left, black quad.Setting the front colour to white, and ensuring you stay within the guidelines, create a shape. I selected the crosshairs that ship with the Photoshop default. Press CTRL+[T] and stretch and move it until it fills the square from the middle, like this:
  • Create a new group in the layer palette and call it Originals
  • Select all your layers, rightclick and select duplicate layers
  • Click OK, and drag the still selected originals on top of the Originals Group to drop them into it. this way you have a backup and tweakable originals on hand
  • Click the eye next to it to make them invisible
  • Flatten the duplicate layers
  • Select the two upper quads, and duplicate them
  • Click the Move tool in the tools palette, and nudge the duplicated layer down until it aligns with the middle 100 mark guide
  • Go to Edit>Transform>Flip Horizontal
  • Press CTRL + [E] to merge down
  • Press CTRL + [A] to select all
  • Go to Edit > Define Pattern, give it a name, and click OK.
  • Congrats – You now have a starter UV grid-pattern :-)

Defining the grid

We’ll now create the document itself. As I said, a hard 1 or 2k is preferable due to the ease of metrics, but if you want to use 1024 or 2048 pixels instead of 1000 or 2000, the walkthrough works in those formats too.

    • Switch to your 1k document.
    • Create a new layer, call it Grid
    • Go to Edit>Fill, and fill the document with the pattern you just defined – it should look like this:
    • Select the Text icon in the toolbox, and set the text to black, font to Copperplate Gothic at 30 points
    • In the leftmost, top square, put an A on the middle of the crosshairs. (We’ll leave this one unrasterised to have a quickstart if we want to change the font later)
    • Duplicate the layer, rasterise it, and move it to the center of the next crosshair. Use a guide to make them align on the bottom (and a vertical grid at 50, 150, 250, etc if you want to make sure it’s aligned vertically).
    • Duplicate the rasterised layer, and move it to the next crosshair
    • Press [CTRL + E] to flatten it down, and move the A’s to the next crosshairs.
    • Press [CTRL + E] again to flatten.
    • Repeat the steps above until you’ve filled the grid with the letter J.It should look like this:
    • It’s up to you whether you want to flatten the letter layers, I usually do, and name the layer Letters_Fontname

  • Now for the numbers:
  • In the topmost left white square, put a 01 in the right hand corner. The reason for the numbers is not only to complement the letters, they will also, ideally show you the UV coordinates for the texture, as UV space goes from 0 to 1.
  • Follwoing the same process as the lettering, fill the white squares with numbers – odd numbers on the first row, even numbers on the second, odd again on the third, and so on. It should look like this:
  • Create a new layer UNDER your Grid.
  • pick the Gradient tool in the toolbox, and pick a gradient, or create your own.
  • Fill the layer. (If you want the ubiquitous Gnomon shape, go to Filters>Distortion>Twirl and drag the slider to the right.)
  • Select your grid layer, and set it to Screen. Duplicate your layer, and set it to Lighten or Soft Light if you want more definition – remember to play with the opacity slider
  • Add a style to the numbers and letters if you want them to look more defined.
  • I also like to add a two-pixel, grey line on the 500 lines, just for definition
  • Voilá – One UV grid to go :-)

Variations

As I initially stated, I like to have a lot of stuff in one file, so I have everything in one place, and can tweak and save as I see fit. Here are some ways you can vary your UV grid:

  • Invert your grids – that way you have two variants of one grid
  • Invert your letters as well
  • Use a mix of layers and settings to add more variety and depth
  • Use styles to make your letters and numbers stand out
  • Use Adobe’s Kuler to find colourschemes for yout gradients
  • Organise your layers into groups – keeping it tidy.
Downloads

Downloading the PSD means you abide by my terms of use, and they are as follow:

  • You may not resell, or redistribute the file or the tutorial without my explicit permission.
  • You may render out the textures private and commercially
  • Questions go to me
          You can grab the file

here :-)

 

      .

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>