otimpyre
Sorceror
Combining Images Tutorial By: Otim Pyre 3/08/2011
Difficulty 2
This is a continuation of my beginners tutorial. My tutorials will lead you through the entire process of creating and adding [custom art] expanding on ideas, making improvements, and finally reaching something truly unique so bare with me as we go through all the paces.
In this tutorial I will be combining two existing images from UO to create a totally new image.
The Images I have chosen are 8707 a giant skulland a candle 5168
As these images are right now we won't be able to combine them. The reason being the skull image doesn't have room on top to put our candle. The total area of the image is known as the canvas size.There are several ways to fix this problem. But, I will be teaching a little trick you can use to make new canvas sizes. You see Ultima already has the canvas sizes we need so I am going to bring in a third image for this project. I have chosen the stone chair 4632 for teaching purposes I have colored it hot pink so its easier to see.
Now I have all of these images opened in my art program.
Clicking on an image window at top will set the object as the one you working on. Now, I go to my color palette and choose the color white. Color is very important in making custom Ultima Images. When I say white I mean TRUE WHITE all color pickers in art programs show you a value for the color. It will show you RGB values which is Red 255 Blue 255 and Green 255 and it shows you the HTML Value which is #FFFFFF and they all come with a little rainbow colored hue picker so you can choose colors visually. The reason it has to be TRUE WHITE or TRUE BLACK is Because, in the game these colors register as transparant.
Now, I click the image I want to work on, the chair. Now go to the paintbucket tool and fill the image with TRUE WHITE which in this tutorial will be hot pink. Tools with no bucket its EDIT> FILL>
Now I have a blank canvas to combine my images on.
Now click on the skull edit> copy> its now stored in the clipboard in the computers memory.
Click back on the empty canvas edit> paste
Centering an image takes practice there are tricks to achieve absolute precision which I will teach in my tutorials.
Now I have my skull on my canvas.
Now click on the candle go to your tools and choose the magic wand> you want the tolerance set at 0 this means it on selects 1 color which I want the hot pink only.
Then I go to the select tab and click invert this selects the candle now. Edit copy and then click back on your skull canvas. Edit > paste> I use paste as new selection in photoshop you have to paste and then move the image where you want it afterwards. Then I position the candle on top of the skull where I want it.
Now I have this. I need the space at the bottom of the canvas to make the image appear correctly in game. with out proper spacing images won't look right and they won't line up on tables ect...However I don't need all that empty space at top. I could leave it since its gonna be transparent in the game. But, to trim off the excess I will go to my crop tool and select from the top of my flame to the bottom of my canvas. Then Crop. You the select the background color with magicwand and fill the color with true white or black.
Now I have this cropped
And after I fill the background with color It's complete.
But, the flame on the candle isn't animated Otim that looks stupid. Yes..Yes..Your right I will try teach that in the days to come. That concludes combining images tutorial. Please, view my other tutorials below.
Difficulty 2
This is a continuation of my beginners tutorial. My tutorials will lead you through the entire process of creating and adding [custom art] expanding on ideas, making improvements, and finally reaching something truly unique so bare with me as we go through all the paces.
In this tutorial I will be combining two existing images from UO to create a totally new image.
The Images I have chosen are 8707 a giant skulland a candle 5168
As these images are right now we won't be able to combine them. The reason being the skull image doesn't have room on top to put our candle. The total area of the image is known as the canvas size.There are several ways to fix this problem. But, I will be teaching a little trick you can use to make new canvas sizes. You see Ultima already has the canvas sizes we need so I am going to bring in a third image for this project. I have chosen the stone chair 4632 for teaching purposes I have colored it hot pink so its easier to see.
Now I have all of these images opened in my art program.
Clicking on an image window at top will set the object as the one you working on. Now, I go to my color palette and choose the color white. Color is very important in making custom Ultima Images. When I say white I mean TRUE WHITE all color pickers in art programs show you a value for the color. It will show you RGB values which is Red 255 Blue 255 and Green 255 and it shows you the HTML Value which is #FFFFFF and they all come with a little rainbow colored hue picker so you can choose colors visually. The reason it has to be TRUE WHITE or TRUE BLACK is Because, in the game these colors register as transparant.
Now, I click the image I want to work on, the chair. Now go to the paintbucket tool and fill the image with TRUE WHITE which in this tutorial will be hot pink. Tools with no bucket its EDIT> FILL>
Now I have a blank canvas to combine my images on.Now click on the skull edit> copy> its now stored in the clipboard in the computers memory.
Click back on the empty canvas edit> paste
Centering an image takes practice there are tricks to achieve absolute precision which I will teach in my tutorials.
Now I have my skull on my canvas.Now click on the candle go to your tools and choose the magic wand> you want the tolerance set at 0 this means it on selects 1 color which I want the hot pink only.
Then I go to the select tab and click invert this selects the candle now. Edit copy and then click back on your skull canvas. Edit > paste> I use paste as new selection in photoshop you have to paste and then move the image where you want it afterwards. Then I position the candle on top of the skull where I want it.
Now I have this. I need the space at the bottom of the canvas to make the image appear correctly in game. with out proper spacing images won't look right and they won't line up on tables ect...However I don't need all that empty space at top. I could leave it since its gonna be transparent in the game. But, to trim off the excess I will go to my crop tool and select from the top of my flame to the bottom of my canvas. Then Crop. You the select the background color with magicwand and fill the color with true white or black. Now I have this croppedAnd after I fill the background with color It's complete.But, the flame on the candle isn't animated Otim that looks stupid. Yes..Yes..Your right I will try teach that in the days to come. That concludes combining images tutorial. Please, view my other tutorials below.