otimpyre
Sorceror
Creating new walls tutorial Part 2 By: Otim Pyre 03/09/2011
Begin by choosing you style of wall seen in part 1 of tutorial. I've chosen sandstone the one we have been viewing.
This size wall is the most commonly used in the game and its fairly easy to work with.
The technique I will be using is masking the image with color. The are many ways to do this. My preferred method is using a line tool with color. I begin by paint rows of color with my line tool on the first face of the wall and progressively working my way across the image until I have covered 1 complete face. Then I change colors and begin painting the next face. Finally I change colors and paint the top. Pixel art is best done on a full page and zoomed in so you can see the pixels clearly.
This is what the process looks like.
Painting my rows from top to bottom------->
<----Be mindful of the dark & light sides of wall .
Here I have changed my color and isolated both faces of my wall.
With all my sides now painted and isolated I can create new layers and copy and paste
each section of my wall on a different layer
Pay no mind to my example picture. ^^^ it got distorted moving it in to photoshop to take a screenshot.
Now we need new texture you can find these on the internet, on game development sites, texture galleries, & even from other isometric games. Or you can modify existing walls adding color. combining images, ect.. I am going to be using texture I borrowed from an extinct Isometric game.
As you can see it isn't Isometric yet
I start by increasing my canvas size dramatically Image> Canvas Size> I made it like 500 x 500 then just cropped it a bit.
Then I skew the image. In my program its Image> Deformations> Skew> I set the vertical to 0 and the horizontal to -45
45 is the magic number for Ultimas isometric positioning. If the wall was facing the other way I would just make it 45
horizontal the other way. **tip** you don't want your texture sources to be HUGE they need to be resized down to about the size of you wall or cropped ect.. To much resizing will loose detail so just stay away from High Definition textures.
So now I have my texture skewed to -45 degrees horizontally
(Which for some reason the forums don't like so I can't show you.)
I invert selection on my green wall on my green layer.Fill the area with black. Then I invert selection back and edit>cut my green wall face deleting it. I then go to my texture image edit>copy then go back to my wall image and click my background layer. Beneath my green layer and paste> as new selection moving it around into position.
Now I can use the same skewed texture for the top blue layer repeating this process
For the red layer. there are some steps involving layers that are so difficult to explain. Im sorry if this part is lacking. You can experiment tho anytime something doesn't work you can click edit>undo For the red I need to take my source texture from earlier on and skew it the other way 45 degrees horizontal.
*Tip* You don't have to re skew you can just image> mirror or flip canvas> horizontal. Then I used my eye dropper to choose a dark brown from inside the texture and used that color to highlight my edges with the line tool.
Here is my final project. Its crude, needs more work and in my opinion is a failure. It's merely an example.
This has been the most difficult thing I have ever tried to explain. I worked on this tutorial for hours. Taking screenshots-making this wall & writing this tutorial all at the same time. But, I hope this tutorial has valuable information and at least helps you get the general idea. This method is constructing a wall from scratch mostly. There are tons of custom walls already out there you can use or modify to suit your taste. Links to the material can be found via my sig.
Begin by choosing you style of wall seen in part 1 of tutorial. I've chosen sandstone the one we have been viewing.
This size wall is the most commonly used in the game and its fairly easy to work with.
The technique I will be using is masking the image with color. The are many ways to do this. My preferred method is using a line tool with color. I begin by paint rows of color with my line tool on the first face of the wall and progressively working my way across the image until I have covered 1 complete face. Then I change colors and begin painting the next face. Finally I change colors and paint the top. Pixel art is best done on a full page and zoomed in so you can see the pixels clearly.
This is what the process looks like.
Painting my rows from top to bottom------->
<----Be mindful of the dark & light sides of wall .Here I have changed my color and isolated both faces of my wall.
With all my sides now painted and isolated I can create new layers and copy and paste
each section of my wall on a different layer
Now we need new texture you can find these on the internet, on game development sites, texture galleries, & even from other isometric games. Or you can modify existing walls adding color. combining images, ect.. I am going to be using texture I borrowed from an extinct Isometric game.
As you can see it isn't Isometric yetI start by increasing my canvas size dramatically Image> Canvas Size> I made it like 500 x 500 then just cropped it a bit.
Then I skew the image. In my program its Image> Deformations> Skew> I set the vertical to 0 and the horizontal to -45
45 is the magic number for Ultimas isometric positioning. If the wall was facing the other way I would just make it 45
horizontal the other way. **tip** you don't want your texture sources to be HUGE they need to be resized down to about the size of you wall or cropped ect.. To much resizing will loose detail so just stay away from High Definition textures.
So now I have my texture skewed to -45 degrees horizontally
(Which for some reason the forums don't like so I can't show you.)
I invert selection on my green wall on my green layer.Fill the area with black. Then I invert selection back and edit>cut my green wall face deleting it. I then go to my texture image edit>copy then go back to my wall image and click my background layer. Beneath my green layer and paste> as new selection moving it around into position.
Now I can use the same skewed texture for the top blue layer repeating this process
For the red layer. there are some steps involving layers that are so difficult to explain. Im sorry if this part is lacking. You can experiment tho anytime something doesn't work you can click edit>undo For the red I need to take my source texture from earlier on and skew it the other way 45 degrees horizontal.
*Tip* You don't have to re skew you can just image> mirror or flip canvas> horizontal. Then I used my eye dropper to choose a dark brown from inside the texture and used that color to highlight my edges with the line tool.
Here is my final project. Its crude, needs more work and in my opinion is a failure. It's merely an example.
This has been the most difficult thing I have ever tried to explain. I worked on this tutorial for hours. Taking screenshots-making this wall & writing this tutorial all at the same time. But, I hope this tutorial has valuable information and at least helps you get the general idea. This method is constructing a wall from scratch mostly. There are tons of custom walls already out there you can use or modify to suit your taste. Links to the material can be found via my sig.
!