Jump to content

Photo

Graphic Artistry: Lesson #3

- - - - -

  • Please log in to reply
37 replies to this topic

#1
InsanitySorrow

InsanitySorrow

    Global Moderator Captain

  • TESA Team II
  • 7,599 posts


Users Awards

Posted Image


Welcome Back, Student!



Class Resources: Download, Alternate Link

Part One: What are we going to do?

We are going to do something like this:

Posted Image

What I've done is modeled a simple toy building block, the model has a simple UV map (We'll cover it next). What we're going to do next is ... you guessed it ... texture it.
I can see the scared look on your face, but don't worry, we'll go step by step all the way through.

The difference between what we're going to do here and what we did in the last class is that in previous classes we edited vanilla textures, but this time we're starting from a blank canvas and will be building up our own texture.

Let's get started then :dance:

Part Two: UV Maps

I'm sure you've seen UV (UVW) maps mentioned before, either by other modder's or in tutorials. You're probably wondering what they are and what it has to do with us, well we're going to be using them, but first I'll explain what they are.

A UV map tells the model where and how our texture will be displayed, so for example say we had a nice sword model, the model UV map has two sections, one for the grip and the other for the blade, we paint one section brown and the other grey and when we view our nice sword in Nifskope it'll have a brown grip and a grey blade.

We don't have to worry about creating UV maps, though we may need to tweak them at times (That'll be covered in a workshop), we'll be sticking to just using them as templates for our textures so we know where to place everything.

Before we get to texturing our buildy block we'll be needing the UV map, but we don't have one, hmmmmm :idea:, let's get one.

Start up Nifskope and open our BuildyBlock.NIF, make sure you have the Block List pane showing (F2). If you look at the bottom of the list you'll see a node labeled DweLexiconCubeBlank01:0, this is our block

Posted Image

Now Right-Click this node and you'll get a nice menu, select Texture then Export Template.

Posted Image

You'll see a small window open up, this is where we tell Nifskope to place our template, what to name it and what size we want it.

Click the size drop down box and select 512, this will give us a UV template with the dimensions 512x512, this should be big enough for our block texture. Next click the File button, navigate to Textures\Clutter\GraphicArtistry (Create the folders if you don't have them), name it BuildyUV.tga and click save.

Posted Image

If you look in your texture folder you should now see a new file called BuildyUV.tga, now if you open it up in your 2D application of choice you'll notice it's a white image with some black lines on it, this is our UV map.

Posted Image

Now the boring part is out of the way, let's get to texturing :dance:

Part Three: Performing our Magic

We now have our UV map and it's open in our 2D magic machine, but what are we going to do?, well that's simple, we're going to create a wooden block with a piece of paper stuck to the front.
There are many different ways to create a texture, you could hand paint one, use brushes, high resolution images, baked from a 3D application ... list goes on. We're going to create one the easiest way which is to use images for our textures.

So for this we'll need two different base colours and two different images, in the resource file you downloaded you'll find the images we'll be using during this class.

Before we do that we need to make a block out layer, what this does is allows us to separate the UV map into sections we can work with a lot easier. So take your wand tool and select the empty space on the background layer, this should select everything except our UV, so now invert the selection so we just have our UV areas selected.

:smarty: Smarty Says: For Photoshop users it's CTRL+SHIFT+I and for GIMP users it's CTRL+I.

Posted Image

Click Select>Modify>Expand, set it to 5 and click ok, this will expand our selection outwards by 5 pixels so we have a little space between the UV edge and the edge of what will be our texture.

:smarty: Smarty Says: GIMP Users it's Select>Shrink> then a value of 5.

Next create a new layer, name it blockout, take your fill tool and fill the layer with any colour, for this step I used black.

Posted Image

Now we have a black layer, but I'm sure you're wondering which section is for which part of the model, so let's find out. Create a new layer, call it UVTest, now re-select the background layer, take your wand tool and select the part on the left hand side, select the UVTest layer and fill it with a red colour, repeat for the other part but colour it blue.

Now save it as DDS texture, call it UVTest, open Nifskope and apply your texture, you should now see something like this:

Posted Image

The block (our wooden part) has been painted a nice red colour and our paper part is now a nice shade of blue. This is a great and easy way of finding out which part of the UV map links up with which part of the model. The colours you choose aren't important, but to make things easier make sure they're different.

Finished playing with that?, good let's continue.

The first part we're going to make is the wooden part, to do this what we'll do is make a new layer, call it WoodColour, then select our background layer like we did before, take out wand tool, select the area to the left and fill in the colour on our WoodColour layer.

We'll want to use a brown colour for this, the one I used is #b99865, a nice light brown.

Posted Image

Open up the WoodBase image from the resource, copy it and paste it onto our Buildy block. Now rotate the texture 90 degrees so the wood grain is running downwards, desaturate the image and scale it so it better fits over the brown section we created, label it WoodBase01.

Now the fun bit, set the Blending mode of the layer to Overlay, you should see it turn a nice brown since it's sitting over the top of our colour layer, now duplicate the WoodBase01 layer, name it WoodBase02. Open up your Brightness/Contrast tool and set the brightness of this layer to -40, change the opacity of the WoodBase02 layer to 40%

We now have this:

Posted Image

Now that looks good as is, but I think it looks a little to smooth and clean for Skyrim, so we'll add a little roughness to the wood. Open up the WoodOverlay texture, copy and paste it onto our Block and name it WoodRough01. Next desaturate it and set the Blending mode to Overlay and drop the opacity down to about 70%. Now

We have something like this:

Posted Image

Now that's looking better, still not dirty though, hmmmm :idea:, I know I know, we'll use some brushes. Think of Photoshop/GIMP brushes as paint brushes, they allow us to paint our textures. This makes adding additional details a lot easier, it's also more fun.

Download and install these Dirt Brushes - http://www.obsidiand...op-gimp-brushes

:smarty: Smarty Says: If you are unsure how to install them, you'll find instructions on the website.

Create a new layer and call it WoodDirt, set your colour to black and pick a dirt brush, doesn't matter which one, you can play with them to see which you like best. Once you've painted on some dirt drop the opacity of the layer down to about 70% and set the blending mode to Soft Light.

Posted Image

Last thing for us to do is make the edges a little light so they look a little worn, to do this we will need to know which parts of the UV to paint. So duplicate the background layer, name it UVMap and place it at the very top of the layer list, set it to Multiply.

Posted Image

Set your colour to white, pick a small round plain brush and make a new layer above the UVMap layer, call it WoodEdge. Now using your brush paint over the straight lines like so:

Posted Image

Use the Guassian blur filter and blur the layer with a radius of 2, set the layer to Overlay and drop the opacity down to 30%, we now have highlighted edges.

Posted Image

And that's it, our wooden part is done, looks nice :dance:

Next we'll be making the paper part, we'll do this the same way as the wood, so we'll start out with a PaperColour layer. Repeat the steps we did about, but colour the layer #c79f5a.

Next step is to open our PaperBase image, copy and paste it over our paper layer, desaturate it and set it to overlay, name it PaperBase01. Duplicate the PaperBase01 layer, name it PaperBase02, drop the opacity down to 40% and use the Brightness tool to darken it by 30%.

After that is done, open the PaperOverlay image, copy and paste that onto Mr Buildy Block and position it . Now desaturate it and drop the opacity down to 70%.

Posted Image

Last step is to make it look a little dirtier, so we'll re-use the brushes from earlier and setup our layer the same way. Make a new layer and call it PaperDirt, set your colour to Black and pick a nice brush. Finally set the layer to Soft Light, leave the opacity as is.

Posted Image

Save the texture into your Textures/Clutter/GraphicArtistry, name it BuildyBlock and use the DXT1 compression setting.

That's our texture done, there is one last thing I will mention. If/when you find your layers are overlapping and making things a mess, use your Wand tool and select the base layer under the layer causing the trouble. This will select everything around it, with that selected click the troublesome layer and hit the delete key, this will remove everything outside of the base layers shape. This will allow you to keep things where you want them and not overlapping causing other areas to look wrong.

Part Four: Making it Normal_n

We're going to make it Normal_n :dizzy:, no wait, we're going to make a normal map XD

Lesson #2 already covers making normal maps, but what we need for the Buildy Block differs slightly. We don't need an Environment map and we don't need a Specular map (The alpha channel). The buildy block is going to have a rough look, so we don't want it to shine at all, that includes the paper since I'm pretty sure they didn't make paper that way in Skyrim.

Anyway what we need to do is open our texture, or if you still have it open in Photoshop or GIMP, flatten the image so there is only a single layer. Then run your Normal Map filter, set the Filter Type to 3x3, give it a Scale of 2 and be sure Max RGB is selected. This can be saved as BuildyBlock_n with the DXT1 compression setting.

Onto the next part.

Part Five: Prepping the NIF

Last part before we get it into the Creation Kit :dance:, This again was covered in Lesson #2 but we'll have a little refresher here so we can make sure it sticks. Move the NIF and Textures into your Skyrim Data folder, and open up the magical tool called Nifskope.

Open up the Block Details pane (F3), now in the Block List you'll want to click the little plus sign next to the DweLexiconCubeBlank01:0 node, keep expanding until you see the BSShaderTextureSet node.

Select the BSShaderTextureSet node and in the Block Details pane, click the little arrow in the top left corner to show the textures. Change the texture paths so the point to the ones we've just made.

:smarty: Smarty Says: Make sure that the texture paths start with Textures, this will make sure the paths are not hardcoded and will avoid issues when people use them with copies of Skyrim that are not tied to the same directory you have yours installed in.

Posted Image

We're nearly done :dizzy:

Part Six: We just did that!?

Yes we did, it's fine you can take a break, I know I need to :faint:. Final thing for us to do now is to get the Buildy Block into the Creation Kit so we can see it in-game.

What we want to do is create a clutter item, something that can be picked up, moved and placed in the inventory. The NIF is ready for that so it's just CK work to do. In the Object Window expand the tree until you MiscItem under the Item tree, click on it.

Posted Image

In the list on the right, Right Click and select new. This will bring up a new window where we can add our blocks details.

ID: aaGABuildyBlock01
Name: Buildy Block
Weight: 1.000
Value: 2
Model: Click the button and navigate to the Graphic Artistry folder and select the Buildy Block NIF.

Posted Image

Click ok, open up a cell in the Render Window, drag the block into it and get it placed in its new home.

Posted Image

Posting Screenshots:

  • Exported UV Map
  • Blockout
  • Colour testing
  • Screenshot showing all the layers
  • Normal Map settings
  • Finished Normal Map
  • Finished Texture
  • In-Game screenshot

  • 0

#2
InsanitySorrow

InsanitySorrow

    Global Moderator Captain

  • TESA Team II
  • 7,599 posts


Users Awards

Posted Image


The key to improving your skills is repetition. This assignment is worth 5pts and the extra credit is worth 5pts. You need 100pts to earn a medal for the Graphics Artistry Class. So do your assignment and post a screenshot here when you are done! :smarty:

Assignment:

  • Create a version with numbers on the paper, save numbers one to five and save them as separate textures.
Extra Credit:
  • Create a darker wood texture
  • Make a version with a little shine

Post screenshots of each in your 2D Application of choice and the final result in-game.


  • 0

#3
Arion

Arion

    Senior Member

  • Senior Allies
  • 1,459 posts


Users Awards
Class homework that was posted here has been moved and combined with the assignment and extra credit posted below

Edited by Arion, 31 May 2012 - 08:46 PM.

  • 0

#4
Arion

Arion

    Senior Member

  • Senior Allies
  • 1,459 posts


Users Awards

Assignment:
•Create a version with numbers on the paper, save numbers one to five and save them as separate textures.
Extra Credit:
•Create a darker wood texture
•Make a version with a little shine
Post screenshots of each in your 2D Application of choice and the final result in-game.


How many version are we supposed to do here? Is it one version of 5 blocks with all the elements in it or is this 3 different versions?
  • 0

#5
InsanitySorrow

InsanitySorrow

    Global Moderator Captain

  • TESA Team II
  • 7,599 posts


Users Awards
It's three different versions, one with the numbers, one with darker wood and another with a shine to it.
  • 0

#6
Arion

Arion

    Senior Member

  • Senior Allies
  • 1,459 posts


Users Awards
I just realized that in my normal settings that its at the default of 5.. Actually It was at 2 when I did the map, but after seeing the list for posting screenies I went back in and didn't realized the default was showing.

PS... I don't think I'm going to be able to get the assignment and extra credit done until after we get back from vacation next week. Leaving in the morning and back on Wednesday.

Edited by Arion, 17 May 2012 - 01:12 PM.

  • 0

#7
Arion

Arion

    Senior Member

  • Senior Allies
  • 1,459 posts


Users Awards
One last thing..... On the assignment and extra credit did you need screenshots for each of the following for every set? Just wanting to know if you're looking for 120 screenshots or not .... 8 screenshots x 5 blocks x 3 sets

•Exported UV Map
•Blockout
•Colour testing
•Screenshot showing all the layers
•Normal Map settings
•Finished Normal Map
•Finished Texture
•In-Game screenshot

Oh and can we also make other numbers as well for the others so we can have a set :D

Edited by Arion, 17 May 2012 - 03:44 PM.

  • 0

#8
InsanitySorrow

InsanitySorrow

    Global Moderator Captain

  • TESA Team II
  • 7,599 posts


Users Awards
One lot for the main class, one lot for the numbers and then just a single screenshot each of the darker wood and the one with the shine.

You can make as many more as you like.
  • 0

#9
Tamira

Tamira

    Senior Member

  • Senior Allies
  • 598 posts


Users Awards
Here is my homework for the main class (klick on the thumbnails to show the full screenshots)

Spoiler

  • 0

#10
Arion

Arion

    Senior Member

  • Senior Allies
  • 1,459 posts


Users Awards
Here is my Lesson 3 Assignment. I'll do the extra credit when I get back next week. I'll need the refresher by having to do this all over again then.

Major screw up here and I'll need to redo the entire lesson. Will start over next week when I get back.

Edited by Arion, 18 May 2012 - 01:46 AM.

  • 0

#11
InsanitySorrow

InsanitySorrow

    Global Moderator Captain

  • TESA Team II
  • 7,599 posts


Users Awards
Your classwork looks good Tamira :clap:, Are you going to do the Homework and Extra Credit?, details for those are found in the second post.

So it should be „GIMP Users it's Select> Grow “ ;)


If you follow the Lesson and do it exactly how I did it then Shrink is the tool needed, if you have just the block selected with the wand then Grow works there instead. I tested both while writing the Lesson so it would be correct.
  • 0

#12
Tamira

Tamira

    Senior Member

  • Senior Allies
  • 598 posts


Users Awards
Thanks. I needed confirmation first before I go on with the assignment and extra credit. I will do them as soon as possible and then I'll have a closer look at the shrink/grow command in gimp. :D
  • 0

#13
Tamira

Tamira

    Senior Member

  • Senior Allies
  • 598 posts


Users Awards
This is my homework for assignment and extra credit - at least I tried ...

Spoiler

Edited by Tamira, 23 May 2012 - 12:52 PM.

  • 0

#14
InsanitySorrow

InsanitySorrow

    Global Moderator Captain

  • TESA Team II
  • 7,599 posts


Users Awards
You work looks very nice Tamira, really like the hand drawn look of the numbers :good:, Your classwork and homework is good so full marks for those, you can move onto the Final Exam when you feel ready :)

It seems there are a few people having problems with Alpha channels in GIMP, I'll have to see about making a separate workshop for those later on.
  • 0

#15
Tamira

Tamira

    Senior Member

  • Senior Allies
  • 598 posts


Users Awards
Thank you IS ! :dance: Does that mean, I have full marks even for the last part? It would be great if you made a special tutorial on those alphas for Gimp users.

Final exam: I must admit that I have no real clue how to start this. Maybe someone can send me a PM of the armor dds whith pointers which parts of it are "padding", "leather" and the "large metal plating". I am really confused by the many different parts (and the dark texture) :shrug:
  • 0

#16
Arion

Arion

    Senior Member

  • Senior Allies
  • 1,459 posts


Users Awards
Submitting Homework, Assignment and Extra Credit


Here's my Lesson 3 Classwork.





Exported UVMap
Posted Image

Blockout
Posted Image

Color Testing
Posted Image

UV Test
Posted Image

All Layers
Posted Image

Normal Map Settings (Scale was set at 2, sample at 3x3) screenie after the fact
Posted Image

Finished Normal Map
Posted Image

Finished Texture
Posted Image

In Game Screen
Posted Image




Assignment Blocks numbered 1 through 5

Posted Image


Extra Credit - Darker as well as Shiney Block

Darker Colored wooden block see above screenie Block #6

Shiney Block #7

Posted Image

Texture construction

Posted Image

Normal Map

Posted Image

If you need any more screns let me know. I tried to get them in the best light

Edited by Arion, 31 May 2012 - 08:44 PM.

  • 0

#17
camaro_69_327

camaro_69_327

    Initiate

  • Allies
  • 46 posts


Users Awards

Snip...
If you follow the Lesson and do it exactly how I did it then Shrink is the tool needed, if you have just the block selected with the wand then Grow works there instead. I tested both while writing the Lesson so it would be correct.

Also having a problem with this part. seems wrong when i follow the class exactly...instructions say...

Before we do that we need to make a block out layer, what this does is allows us to separate the UV map into sections we can work with a lot easier. So take your wand tool and select the empty space on the background layer, this should select everything except our UV, so now invert the selection so we just have our UV areas selected.

I have done it many ways and took screens for you to look at. the one that looks like yours is the Select, invert, Grow. This is using GIMP 2.8 (newest version).

Select, invert, Shrink
Spoiler


Select, Invert, Grow
Spoiler


Select, Shrink, Invert (used flood fill to show problem)
Spoiler


Select, invert, Grow (with flood fill for comparison) (this looks like what you have)
Spoiler


Thanks for your time teach!
  • 1

#18
camaro_69_327

camaro_69_327

    Initiate

  • Allies
  • 46 posts


Users Awards
Classwork GA Class 3

Exported UV Map
Spoiler

Blockout Layer
Spoiler

Color Testing
Spoiler

Screen of all Layers
Spoiler

Normal Map Settings w/ finished Normal
Spoiler

Finished Texture
Spoiler

In-Game Screenshot
Spoiler

Assignment
Spoiler

Extra Credit
Spoiler

Really enjoyed this ..thanks Teach!!
Posted Image
  • 0

#19
lilith

lilith

    Captain

  • TESA Team II
  • 1,179 posts


Users Awards
Lesson #3 - Wow, okay. Here we go... I think I remembered to get all the screenies required. If not please :poke: me. Thank you!

Lesson Work
Spoiler


Homework and Extra Credit
Spoiler

  • 0

#20
InsanitySorrow

InsanitySorrow

    Global Moderator Captain

  • TESA Team II
  • 7,599 posts


Users Awards

Thank you IS ! :dance: Does that mean, I have full marks even for the last part? It would be great if you made a special tutorial on those alphas for Gimp users.


Yep you can have full marks for the last part too :)

Submitting Homework, Assignment and Extra Credit


Full marks, you can move on to the final exam :thumbup:

Classwork GA Class 3


Full marks, you can move on to the final exam :thumbup:
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users