falcon4:textures:tilable_tile_tutorial
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |||
|
falcon4:textures:tilable_tile_tutorial [2016-11-11 04:43] snakeman switched tactical.nekromantix.com to www.pmctactical.org domain. |
falcon4:textures:tilable_tile_tutorial [2017-10-07 00:57] (current) snakeman http to https switch. |
||
|---|---|---|---|
| Line 7: | Line 7: | ||
| Then we add some noise layers to make our basic color more terrain like. Create a new Brightness/contrast adjustmentlayer and set the Brightness value to something about -100 to see its effect more clearly. Select the layermask and choose "Image->Select->Invert" from the main menu to change the color of the layermask to black. Then apply the noise filter (Filter->Noise->Add Noise...) with an amount of 55%, uniform distribution and monochromatic set. The noise will add some white spots to the black layermask and therefor the brightness will only affect those and not the whole image. That's why we inverted the layermask. | Then we add some noise layers to make our basic color more terrain like. Create a new Brightness/contrast adjustmentlayer and set the Brightness value to something about -100 to see its effect more clearly. Select the layermask and choose "Image->Select->Invert" from the main menu to change the color of the layermask to black. Then apply the noise filter (Filter->Noise->Add Noise...) with an amount of 55%, uniform distribution and monochromatic set. The noise will add some white spots to the black layermask and therefor the brightness will only affect those and not the whole image. That's why we inverted the layermask. | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T1.jpg }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T1.jpg }} |
| Then we apply some Gaussian Blur with a radius of 1,0. | Then we apply some Gaussian Blur with a radius of 1,0. | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T2.jpg }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T2.jpg }} |
| We create another Brightness/Ccontrast adjustment layer, set the brightness to +100 and also invert the layermask. Then apply the noise filter with an amount of 40%, uniform distribution and monochromatic set. Now you should get something similar to this: | We create another Brightness/Ccontrast adjustment layer, set the brightness to +100 and also invert the layermask. Then apply the noise filter with an amount of 40%, uniform distribution and monochromatic set. Now you should get something similar to this: | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T3.jpg }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T3.jpg }} |
| On top of the two noise layers we create another Brightness/Contrast adjustment layer and set a Contrast value of 50 to enhance the colors. | On top of the two noise layers we create another Brightness/Contrast adjustment layer and set a Contrast value of 50 to enhance the colors. | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T4.jpg }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T4.jpg }} |
| Since we just set the brightness of our two noise adjustment layers to -and +100 we fine tune them now until we are satisfied. I chose Brightness -28 for the first (the one we set to -100) and for the second (the one with +100) a Brightness of 10 and a Contrast of 55 so it looks like this: | Since we just set the brightness of our two noise adjustment layers to -and +100 we fine tune them now until we are satisfied. I chose Brightness -28 for the first (the one we set to -100) and for the second (the one with +100) a Brightness of 10 and a Contrast of 55 so it looks like this: | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T5.gif }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T5.gif }} |
| A green texture with soft dark spots and lighter sprinkles. When you are not satisfied with the color of your basic layer then don't try to find the right one to fill it instead of this simply apply a Hue/Saturation adjustment layer right between your color layer and the noise layers and you can tweak the color very easy to the one you like. | A green texture with soft dark spots and lighter sprinkles. When you are not satisfied with the color of your basic layer then don't try to find the right one to fill it instead of this simply apply a Hue/Saturation adjustment layer right between your color layer and the noise layers and you can tweak the color very easy to the one you like. | ||
| Line 31: | Line 31: | ||
| A note about filters: Filters are resolution depending! So when you apply a noise or clouds filter to a 512 image you get different results than when you apply it to a 1024 image and size it down to 512. Especially the clouds filter is critical. Sometimes you have to apply the filter at a resolution that is 8 times higher than your original texture to get the right effect. So when the clouds you get from simply applying the filter are too big and you wanted smaller ones then create another image (greyscale if you only want to apply it to a layermask/channel, RGB when you need the colors) with the same size of the original image, resize this new image by 2 or 4 and apply the filter. Then resize the new filtered image back to the original size. Perhaps you have to choose another resize option than "Bilinear" in the dialog to get better results when your image looks a bit blurry after resizing or apply an additional sharpen filter. When you are satisfied with the look of the filter then copy-paste it into the layer or layermask/channel you wanted in your original image: | A note about filters: Filters are resolution depending! So when you apply a noise or clouds filter to a 512 image you get different results than when you apply it to a 1024 image and size it down to 512. Especially the clouds filter is critical. Sometimes you have to apply the filter at a resolution that is 8 times higher than your original texture to get the right effect. So when the clouds you get from simply applying the filter are too big and you wanted smaller ones then create another image (greyscale if you only want to apply it to a layermask/channel, RGB when you need the colors) with the same size of the original image, resize this new image by 2 or 4 and apply the filter. Then resize the new filtered image back to the original size. Perhaps you have to choose another resize option than "Bilinear" in the dialog to get better results when your image looks a bit blurry after resizing or apply an additional sharpen filter. When you are satisfied with the look of the filter then copy-paste it into the layer or layermask/channel you wanted in your original image: | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T6.jpg }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T6.jpg }} |
| Now that we have some cloudy layermasks we can tweak the settings of the Hue/Saturation adjustment layers. Try to set the Hue of one layer to the left and the other to the right so you get 2 additional colored patches in your texture. I chose Hue: -38, Saturation:0, Lightness: -10 for the lower layer and Hue: +27, Saturation:-18, Lightness: -12 for the upper one. I also set the Opacity of the upper layer to 72% and the Contrast value of the upper most Brightness/Contrast layer from 50 back to 40, because I thought it was getting a bit too dark otherwise. | Now that we have some cloudy layermasks we can tweak the settings of the Hue/Saturation adjustment layers. Try to set the Hue of one layer to the left and the other to the right so you get 2 additional colored patches in your texture. I chose Hue: -38, Saturation:0, Lightness: -10 for the lower layer and Hue: +27, Saturation:-18, Lightness: -12 for the upper one. I also set the Opacity of the upper layer to 72% and the Contrast value of the upper most Brightness/Contrast layer from 50 back to 40, because I thought it was getting a bit too dark otherwise. | ||
| Line 37: | Line 37: | ||
| The basic texture is ready now and should look like this one: | The basic texture is ready now and should look like this one: | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T7.jpg }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T7.jpg }} |
| Now that we have the texture for our 9 tiles we have to make them tilable, but first we have to save our layers so that we can always edit them when we come back to this file and make another different texture. So we create a folder (set) in the layer toolbox by clicking the folder icon at the bottom, call it "Save Texture" and put all your existing layers in this Set. You may have difficulties when you want to drag the "Background" layer into the set because it's locked. Then simply double-click the layer and hit OK to make it a normal layer. Now you can also drag it into the set. Now save the file under "Basic Texture Set" or something as PSD to backup the original texture with all its layers. Then save it again under a different name: "Texture Set Tiles" e.g.. This is the file we will work on. | Now that we have the texture for our 9 tiles we have to make them tilable, but first we have to save our layers so that we can always edit them when we come back to this file and make another different texture. So we create a folder (set) in the layer toolbox by clicking the folder icon at the bottom, call it "Save Texture" and put all your existing layers in this Set. You may have difficulties when you want to drag the "Background" layer into the set because it's locked. Then simply double-click the layer and hit OK to make it a normal layer. Now you can also drag it into the set. Now save the file under "Basic Texture Set" or something as PSD to backup the original texture with all its layers. Then save it again under a different name: "Texture Set Tiles" e.g.. This is the file we will work on. | ||
| Line 43: | Line 43: | ||
| Now we need to merge our terrain into one single layer to edit it further. But before we do that we first separate the noise layers because this small details will get lost in the editing process otherwise. Therefor drag the two cloudy adjustment layers and the basic color layer outside the "Save Texture" set (when you added a Hue/Saturation adjustment layer to adjust your basic color then let this be visible, too) and then hide the set with its layers so that only the layers you dragged out are still visible. Then click on the small arrow at the top right of the layer toolbox and choose "Merge visible" to put these layers into one single layer. When all went fine your layer toolbox should look like this: | Now we need to merge our terrain into one single layer to edit it further. But before we do that we first separate the noise layers because this small details will get lost in the editing process otherwise. Therefor drag the two cloudy adjustment layers and the basic color layer outside the "Save Texture" set (when you added a Hue/Saturation adjustment layer to adjust your basic color then let this be visible, too) and then hide the set with its layers so that only the layers you dragged out are still visible. Then click on the small arrow at the top right of the layer toolbox and choose "Merge visible" to put these layers into one single layer. When all went fine your layer toolbox should look like this: | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T8.gif }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T8.gif }} |
| After this choose "Edit->Preferences->Guides & Grid" at the main menu and set a gridline at every 512 pixels with 1 subdivision. This will show you a grid of your tiles, if now you might have to set the grid visible in "View->Show->Grid" at the main menu. | After this choose "Edit->Preferences->Guides & Grid" at the main menu and set a gridline at every 512 pixels with 1 subdivision. This will show you a grid of your tiles, if now you might have to set the grid visible in "View->Show->Grid" at the main menu. | ||
| Line 55: | Line 55: | ||
| Now that we have our "Border" tile we need to apply it to all other tiles so that they will have the same border for tiling but still look different inside this border. For easier editing we create a new set for every tile layer and drag the according layer into the set. Add a layermask to the "Border" tile, fill it with black and copy it nine times. Then place each copy into one of the tile layer sets so that your layer toolbox looks something like this: | Now that we have our "Border" tile we need to apply it to all other tiles so that they will have the same border for tiling but still look different inside this border. For easier editing we create a new set for every tile layer and drag the according layer into the set. Add a layermask to the "Border" tile, fill it with black and copy it nine times. Then place each copy into one of the tile layer sets so that your layer toolbox looks something like this: | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T9.gif }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T9.gif }} |
| To make the border blend with the tile below you have to edit the layermask of each "Border" copy. You best take a soft paintbrush with about 37 pixels width and paint the outer region of the layermask pure white so that it will be shown at 100% there. Then try to make a smooth transition from the outer region to the rest of the tile without deleting too much details of the original tile. Finally check with the Offset filter if the tile still has seamless borders. | To make the border blend with the tile below you have to edit the layermask of each "Border" copy. You best take a soft paintbrush with about 37 pixels width and paint the outer region of the layermask pure white so that it will be shown at 100% there. Then try to make a smooth transition from the outer region to the rest of the tile without deleting too much details of the original tile. Finally check with the Offset filter if the tile still has seamless borders. | ||
| Line 61: | Line 61: | ||
| After this procedure the layermask should look similar to this one: | After this procedure the layermask should look similar to this one: | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T10.jpg }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T10.jpg }} |
| To make the whole 9 tiles blend seamlessly you have to do this with all other 8 tiles. When you're done, copy all the sets with the tiles into your 1536x1536 "Texture Set Tiles" image by right clicking the set, choose "Duplicate Layer Set" and select your "Texture Set Tiles" image for the destination. Drag all the tile sets below the "Save Texture" set so that the noise and the color are also applied to them and they look right again. | To make the whole 9 tiles blend seamlessly you have to do this with all other 8 tiles. When you're done, copy all the sets with the tiles into your 1536x1536 "Texture Set Tiles" image by right clicking the set, choose "Duplicate Layer Set" and select your "Texture Set Tiles" image for the destination. Drag all the tile sets below the "Save Texture" set so that the noise and the color are also applied to them and they look right again. | ||
| Line 67: | Line 67: | ||
| The layer toolbox of the 1536x1536 "Texture Set Tiles" image should look like this after wards: | The layer toolbox of the 1536x1536 "Texture Set Tiles" image should look like this after wards: | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T11.gif }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T11.gif }} |
| When you make the lowest texture layer invisible you can see that all the tiles were placed at the upper left corner. To move them into their proper position we first have to chain the "Frame" and the tile layer of each set together by clicking on the box beside the eye icon of each layer. Then select the tile layer and drag both (the tile and the according "Border" layer) into it's place. Because the tile layer is exactly 512x512 pixels it should snap nicely to the grid. If not make sure you selected it before dragging. And make also sure that the according "Border" layer is also dragged and not only the tile layer. | When you make the lowest texture layer invisible you can see that all the tiles were placed at the upper left corner. To move them into their proper position we first have to chain the "Frame" and the tile layer of each set together by clicking on the box beside the eye icon of each layer. Then select the tile layer and drag both (the tile and the according "Border" layer) into it's place. Because the tile layer is exactly 512x512 pixels it should snap nicely to the grid. If not make sure you selected it before dragging. And make also sure that the according "Border" layer is also dragged and not only the tile layer. | ||
| Line 75: | Line 75: | ||
| Your final image should look something like this one then: | Your final image should look something like this one then: | ||
| - | {{ http://www.pmctactical.org/f4/zaggy_tile_tut/T12.jpg }} | + | {{ https://www.pmctactical.org/f4/zaggy_tile_tut/T12.jpg }} |
| (The dark green lines are just the grid lines to show the different tiles) | (The dark green lines are just the grid lines to show the different tiles) | ||
falcon4/textures/tilable_tile_tutorial.1478839401.txt.gz ยท Last modified: 2016-11-11 04:43 by snakeman
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
