Treehouse School House > Tutorials

A Simple Flower

(1/2) > >>

Yellowrose:
To easily show from obtaining an image to finished for testing and release. Some screenshots are bigger then what you see just click an image to see the full sized screen.

I found an image of a tulip stem with 2 flowers as I already have this image in 8 colors I have no need to recolor it. Remember my graphics program of choice is Paint Shop Pro. This program is reasonably priced compared to others and can do pretty well everything we need it to do. If interested in getting this program you can check out the Corel website for pricing. The best time of year to grab this program is the month of August as then usually lower the price significantly for back to school special sales. https://www.paintshoppro.com/en/products/paintshop-pro/

You don't have to use PSP for your graphics but with these screenshots and explanations of what is being done hopefully you can locate the tools that do the same job in your graphics software of choice.

To see all the tool icons I have across the top of my workspace as well as the pallets I use on the right side of my workspace follow the following 2 screens.

For all the tool Icons



for the right side pallets



we won't be using all of the pallets we will just be working with the materials pallet and the layers pallet.

My original Image was 302 pixels wide x 494 pixels tall this is obviously way to big to be used in ZT



to obtain the resize window you see to the right of the tulip image in this program you would look in top menu bar for image and click it scroll down to resize and click it and you should get the resize window.



the top section tells you your original image size
next section is where you can change parameters for the size you want. Make sure to use the drop down and select "Pixels"
Next section we don't touch it will auto set using the sizing changes you entered in the section above it.
bottom section sets how your image will be resized. I usually just go with whatever default settings are there but if you want to experiment with the aspect ratio setting remember to make note of the default settings so you can change them back if you don't like the result. The nice thing about PSP is it has an unlimited undo feature so if you don't like the way something turned out for a particular step just click the undo and redo  the step using parameters you're happy with.

I was happy with the defaults so just clicked ok and this is my resize result.



As you can see the image is still way to big to be used in ZT so another feature I love about PSP is the ability to convert your image to what PSP calls a Picture Tube. This is a great feature as it allows you to draw and paint an area with the picture rather then a paint brush of solid color.

to convert my resized image to a picture tube go to the top menu and select file/Export/Picture Tube



this will open a new window with settings that can be adjusted. Seeing as we are working with an imge with only 1 tulip in it, I just used the default settings you see in the screen.



enter a name for your tube and click ok.

Because I have a collection of over 14,000 picture tubes I add the 000 to the beginning of my tube names so it makes the ZT ones easier to find in my tube list as you will see in the next few screens.

Now that you have your image resized and converted to a picture tube it's time to select your picture tube for use to continue your creation.

The picture tube tool can be found down the left side of the PSP workspace



when you select the tools from the left side tools selector you'll notice a change in the top of the workspace. You'll notice the tube name in this screen is different then in an earlier screen, that is because I had already converted the 8 colored tulips to tubes before beginning this tutorial.



this is what all those settings do some as you can see have settings you can adjust but for now we are going to leave them at the default other then to change the scale of the tube for use in ZT.



Use the dropdown arrow to the right of the tube selector image to select your tube from all the tube images you may have installed in PSP as I mentioned I have over 14,000 so only a few are shown in the small selection window with the one you select having a blue frame around it to show it is your active selection.



With your tube selected adjust the scale from 100 to 10 so our tube when we use it on a layer as we move on will be an appropriate size for use in ZT.

Now it's time to get down to the process of putting our final image together for ape and using layers to obtain the finished image.

My base layer is always a copy of the zoo tycoon grid. this image is 1024x768 not sure who made it but I will attach a smaller image that can be sued for most small creations.



I have cropped the grid to 384x288 and will attach it to this tutorial so you can use it.



With the grid image cropped it's time to set up our scaled tulip image.

Add a new raster layer to the grid image



Your layer properties window will open. None of these settings need adjustment so just click ok to add your new layer.



you'll notice in the layer pallet to the right we now have 2 layers for our image the active or working layer is highlighted in blue.



With our active layer selected in the layer pallet to the right it's now time to paint our picture tube image onto the layer so select the picture tube tool from the left menu. Because we went through the selection and scaling of our tube earlier it is all set to use to paint with so add just one instance of the tulip to your new layer. Just click anywhere in the grid to apply the tube to the layer if your flower is not sitting like mine it won't matter becuase we will be removing the grid layer with some more editing needed later.



as you can see with the tulip now layered on the grid you get a better view of the size. to size it any smaller would lose a lot of the detail in the image so we will just use this image for our Simple Flower file.

When we resized the original image and then converted it to a tube and scaled it down to the size we need it created what are called ghost pixels around our image. These ghost pixels may not be that noticeable in our view at the moment but if we just save out layer as a png file and put it in ape the ghost pixels will become a solid white color and take away from our pretty tulip image so before we move on to saving our image for ape we are going to either recolor those ghost pixels or delete them. For this I use a very tedious method because I am what is called a pixel junky. I edit at the pixel level so my images are as clean as possible for a good quality finished file. to do this we are going to make the grid layer invisable by turning it off in the layer pallet to the right.

look at the layer pallet and make sure the pallet is wide enough for you to see all the icons available. You should see an eyeball icon so on the background layer we click the eyeball icon to turn off the visibility of that layer.



to make the grid visible again just click the eyeball again to turn on layer visibility. For now we are going to leave it off and we are going to see if there are any ghost pixels that need adjustment. To do this we are going to zoom in on our image.

Go to the top menu bar and click View/ zoom in by 5. do this twice



After doing it twice we can see there are a few ghost pixels we need to either edit with the clone tool or delete so we have a good clean image for APE.

Yellowrose:
You may decide differently but I decided some of these ghost pixels around the tulip blossoms and a few around the stem need to be deleted so select the eraser tool from the left hand side icon menu. It looks like a pencil with an eraser on the end. Use the drop down to select the eraser rather then the background eraser. the background eraser tool usage will be explained in another tutorial.



with the eraser tool selected we now need to set up our tool options. if you look at the top of the workspace you'll notice the tube tool preset is now replaced with the eraser tool preset so just adjust your settings like mine.



for shape we want square. for size we want 1 pixel for everything else just use the same numbers I have in the screenshot. And we are ready to start deleting some of the ghost pixels.

the ones I am going to delete look somewhat see through rather then the solid color of the rest of the flower and the same with the stem. this is what my image looked like after deleting the pixels I thought should be deleted. I did zoom in a tab closer by selecting view/zoom in by 1 twice.



as you'll notice some pixels still have that see through opacity to them. these pixels will turn white in APE so now we are going to use the clone tool to solidify them a little more so we don't get the white in APE so select the clone tool from the left hand tools menu.



Again our preset changes in our tool options bar at the top of our workspace. The 3 most important settings in this preset are indicated in red. shape size and opacity make sure your settings are the same as mine. Or as close to it with your choice of graphics program.



Once you have your settings set select 1 pixel in your image. My cursor is not showing in these screenshots but as you can see from the circled area on my image the pixel I selected is outlined. With your pixel selected as I have right click that selected pixel a couple of times to be sure it registers as the selected pixel and then left click it without moving your cursor.



 You'll notice immediately the pixel darkens and is is not so see through. repeat with the remaining pixels first selecting the pixel with a right click on the next pixel then left click on the same pixel and repeat until all the see through pixels are a more solid color as in this image. If your pixel that you just cloned is not yet solid enough just repeat your left clicks until they are solid enough to your liking.

Yellowrose:
Our image is now ready for APE so we zoom out. if you have done as I did and zoomed a little closer by zoom by 1 twice follow the same zoom steps but select zoom out by 1 twice then zoom out by 5 twice so we are back to the base size we started with. with the zoom out it may look a little smaller but that's ok we won't be continuing with this anyway just follow the next steps to get your APE ready image.



Now we need to get most of the background deleted so the easiest way is to copy the layer and paste it as a new image. to do this make sure your flower layer is still your highlighted layer in the layer pallet and then in the top menu bar select Edit/copy



Then again in the top menu we select Edit but this time we are going to paste it as a new image so select Edit/Paste as new image.



and we now have our image for APE



Before we move on to APE and our file assembly we need to make a purchase menu icon that will show in the game purchase menu to do this there are a few ways you can make your own as I do or you can use one of the many icon packs available at Zoo Admin's ZT1 downloads site. They can be found in the Resources  section of the forum under Designer Resourses.

I already have a lot of icons I have made available so I'll select the peach folder which has a number of different sized icons for use. but the ideal size for a purchase menu icon is 44x32 pixels.



I usually make mine bigger because APE has a great resizing algorythm built in so I will use the icon I have made sized a little bigger to 110 x 80 and use the tube tool to apply my image to the icon. I have opened my Icon image and as you can see it has a frame and the 4 corners are colored bright pink this pink in APE represents a transparency so the 4 corners will not show in the purchase menu of the game.



I selected the tube tool(indicated in red) and adjusted the size of the tube image in the preset settings at the top of the workspace(indicated in red). My size setting was 25. I then added a new layer to the icon(see adding a new layer in an earlier screen) and used the tube tool to paint my tulip image onto the new layer.



Now I have been working with this program since the late 1990's so I can pretty well get my tube image centered on the icon the first time. If you don't get it centered it's ok. If you look on the left side tool menu near the top you will see an icon that looks like cross hairs(indicated in red) select it and use this tool and left click somewhere in the flower part of the image to move that layer around on the icon so it is placed as close to the center of the icon as possible. now we are ready to complete the ticon. These 2 layers need to be merged together before we can save the icon image. To do this go to the top menu and select Layers/Merge/ merge visible.

Yellowrose:
Now it's time to save our images. Hopefully you have made a project folder for your new creation. This is something I highly recommend as it makes it easy to find everything related to your creation all in one place. So if you haven't done this yet, open windows explorer and navigate to where you want to save your project images and make a new folder and name it. In my case I have a folder for tutorial images and then a sub folder for the red tulip so I will be saving my images to the Red Tulip folder and the sub folder TutorialRedTulip. When I make this folder I make sure there are no spaces in the folder name this will be explained later when we get to saving the file in APE and continuing with out project.

now just make sure your icon image is still the active image open by clicking the image preferably with just a select tool(the top most left side icon that looks like an arrow

in the top menu bar click File/Save As



Your save window will open so continue on by navigating to your projects folder. Make sure you have the proper file type selected with the drop down in the save window and you add in a file name using no spaces or special character with the exception of a hyphen or an underscore so your filename should resemble mine. TutorialRedTulip-Icon.png and click Save



Now that your icon is saved you can close off the icon image by clicking the red X to close it off and you will notice the little APE image we worked on previously is now the active image. Repeat the above process to save your ape image as a png file. I have named my image as TutorialRedTulip.png

With Windows Explorer navigate to your projects folder. You should now have 2 images. Your tulip image for APE and your purchase icon image.



Next begins APE assembly of our Tulip.

Yellowrose:
I am hoping by now you also have downloaded and installed APE 3.2. This is the version of APE I currently use for all of my creations so lets get started and open APE



We want to create a new item from scratch so select the top icon on the right side



Select the new button at the top left



Then click on the scenery folder in the right hand window



We can now see all the items available in the scenery section. Use the scroll bar on the right side and you can scroll through to see everything available as a base for a creation.



Because our tulip has a 1/4 tile(1x1) footprint and we want it to be seen in the foliage purchase menu we look for something in the this scenery menu that has the same footprint and shows in the foliage purchase menu. I have chosen the Globe Willow Tree.



Click the image of the Globe Willow Tree and you'll notice we now have a new button available just below the selection window. "Create". Click this create button.



APE switches the screen to the General characteristics for your creation. There are also other buttons we will be using as we move forward these are located on the left side under the original selection window. We will get to those as we progress but for now we will concentrate on the General character entries.

At the top is cost - adjust the price of your tulip to 75

the next 2 rows width & length deal with your footprint. Because we chose a base file with the same footprint we need there is no need to adjust this it is already set to 1x1.



But to explain how footprints work in ZT here is something to help you understand then a little better.



The bottom section of the General characteristics page deal with the Aesthetic Values which are how much a guest will like the creation when it is placed in a zoo. By default these are all set to 0 so I usually adjust them to the max setting of 20. This can be accomplished in 3 ways. Clicking on the slider bar and moving your mouse until the amount in the right window says 20. clicking in the amount window and entering the number 20 or using the tiny up arrow at the top right beside the number 20. In my image here I have only done the man do this same thing for the 3 remaining guests woman girl and boy so all 4 have a setting of 20.



With our General Characteristics complete it's time to add our images. Look to the left and click on the button "Icons_Images"



We now have a new APE page with 2 rows of images. The top row is for our purchase menu icons and the bottom row for our tulip image.



So beginning with the top row start to replace the Globe Willow images with the Icon images we made for our tulip. Click the folder icon above the first image in the top row.



a browse window will open so navigate to the folder you have your project images saved in. and click on your icon image



Now just click open and the first icon image is replaced



Repeat this process until all 4 icon images are replaced in the top row of images.



Now we just repeat this same process for the project image in the bottom row. Click the folder above the NE image in the bottom row and navigate to your projects folder again this time select your project image



as you can see now our project image has replaced the first image of the Globe Willow in the bottom row



Just repeat for the remaining 3 images



now it's time to move on to the descriptive text page. Click on the Descriptive Text button to the left.



The descriptive Text page opens



Before going any further look this page over.

The first thing we are going to do and "The Most Important" is set the language. As you can see in my screen above this setting defaults to "Brazil". Use the dropdown arrow at the end of this line and select English as the language.



With English set as the language move down and adjust the lines for Name, Phrase, & Tooltip. Leave the large description box empty as when text is added to this section it creates a text file which when we save the final step adds to your ztd file size. Your tooltip should have a bit of a description in it's content as mine does.



Time to save our file as a ZTD. At the top left click on the Manage button.



When the manage button is clicked it takes us back to the very first screen when we first opened APE



Click on the bottom Icon "Save the current project"



A save window will open. At the top you should see the name of your project folder and an empty window at the bottom to enter your filename and below it a window that has Save as type: Zoo Tycoon User-created files (*ZTD) leave this as is. enter your filename in the window just above.



Enter your filename in the appropriate window.



Click Save. And close out APE we are finished with it.

Important Note Ape needs to be closed after each project. This is because every project needs a unique APE ID Number and the only way to obtain a different number for each project is to close out APE and reopen it for the next project. So for the remaining 7 tulip images I have I will have to make 7 Icon images, 7 project images and open APE 7 times to make each of the remaining 7 tulip colors for my complete project.

We are finished you have created your first ZTD file. "BUT" it's not ready to be put in game yet there is some further editing we need to do before we open zoot to fix rotations. Navigate to your projects folder and you will see your newly created ZTD file along with your project image and Icon image.

Navigation

[0] Message Index

[#] Next page