Photoshop (grid the most helpful tool for tile and character creation)

[busbuzz]

This is rather simple but very valuable when it comes to align tilesets or creating them

Once you have your Photoshop window opened with the project you want to edit Press F so you can move the document freely

Why is it so important to use grid with tilesets and autotiles?

Thats easy indeed, when you use grid Photoshop automatically tells you where to stop when cropping and drawing, you can even move a tile and it will be automatically aligned to the gird. thats why its so helpful to use the grid.

Spoiler

http://i63.photobucket.com/albums/h144/busbuzz/Untitled-1.jpg[/IMG]

In this image you can see how easy is to choose and move a tile to the desired space, when selecting u just do it close to the tile limit and photoshop automatically alingns your selection, after that movin is even easier, when moving, the selection is also aligned automatically onto the desired space

How to set a correct Grid

look if the rulers are already out If not press "Control+R" to take ruler out.
Double click the ruler to take Ruler options out.

Spoiler

http://i63.photobucket.com/albums/h144/busbuzz/2.jpg[/IMG]

You will see "Units and rulers" options. Change to "Guides Grid and Slices" options.

Spoiler

http://i63.photobucket.com/albums/h144/busbuzz/3.jpg[/IMG]

Every tile for RMXP has a default 32 x 32 pixel size, so you should change Gridline every: to 32 and Subdivisions to 1.

Spoiler

http://i63.photobucket.com/albums/h144/busbuzz/4.jpg[/IMG]

This is a very simple Advice but sometimes the most simple advice is also the most helpful, i hope you learned something useful :D bb

 

[King Moogle]

Awesome, thanks!

Hopefully this is relevant-- you list the default pixel dimensions for tilesets; do you know what they are for animations? I appreciate it!

 

[busbuzz]

Grid For animations

The animation Size is 192 Pixels so set Gridline every 192 pixels, then youre gonna use Subdivisions on "2" this will add 2 subdivisions every square after that your gonna use Slices! to have the exact half of every square.
This will help you because animations can be hard to handle, some of them have space to every side so if u try to fit it to the grid you will only be able to align it to a side align to the left side of the grid or right or upper part or a corner but.... with the center made with this slices you can make photoshop to autoalign your Animation tile to the center

How to make a slice

In the "guides, grids and slices" preferences you will find an option to color the slices however you want, i like default blue. but u can change it

just click and drag from the ruler and you will add a slice, the 2 subdivisions will help you align the slices to the half of the tile exactly, just move any image of the tile right to the center and it will be aligned. Make sure to align it to both slices, the vertical and horizontal


In this example we can look the slices, the ones in color blue are the slices they cut the tile just to the half both horizontally and vertically

Spoiler

http://i63.photobucket.com/albums/h144/busbuzz/Animations.jpg[/IMG]

 

[Meness]

What is the grid for eight way movement template...?
If you can tell me you will be credited in my game(even if you don't want to be)

 

[King Moogle]

Busbuzz, you officially win "Cool Points". Thank you so much! I've always had difficulty with animations; this will help significantly.

 

[Draken]

Can I have your babies? <3
Tilesets have always been a pain when working on without grids.
This could help with almost any pixel work or photoshop or w/e :D

 

[busbuzz]

Characters sets and 8 direction templates

Ok It took me awhile to find an 8 direction template. its a lil harder for character sets and templates because you must create the grid with slices.
as I already explained how to create slices I wont do it again but ill explain how to put them in the correct order.

Characters and templates does not have a default size, that means that we must find out the size of the tile, and usually theyre not square like thats why we must create grids with slices ourselves.

Look for the image size at Image > Image size

Spoiler

http://i63.photobucket.com/albums/h144/busbuzz/Charactersandtemplates.jpg[/IMG]

Now look for the height and width of the image, in this case we have 128 width 416 height. Now were using a lil maths in here. Since our template is an 8 movement template we have 8 tiles vertically and 4 horizontally. were gonna use theese numbers to divide height and width. since we have four tiles horizontally were gonna divide width "128" by 4 giving us "32", write that number down we'll use it. Then since we have 8 down were gonna divide height 416 by 8 giving us "52" (in case of common Character sets we divide in 4 because we have only 4 tiles vertically)

Spoiler

http://i63.photobucket.com/albums/h144/busbuzz/CHT2.jpg[/IMG]

Now Were gonna open "guides, grid, slices options" ive already explain how to in the first section. and put gridlines every 32 pixels. Then were gonna make slices for every gridline vertically

Spoiler

http://i63.photobucket.com/albums/h144/busbuzz/CHT3.jpg[/IMG]

Then were gonna change grids again. Open "guides, grid, slices options" again and now change the gridline every to 52. Then were gonna make the horizontal slices every gridline.

Spoiler

http://i63.photobucket.com/albums/h144/busbuzz/CHT4.jpg[/IMG]

After that you will have your grid made of slices just in the desired size, the size of the template, you can add 2 subdivisions to the grid to show the half of the tile, to create another slice cutting each tile right in the center, this will help you center the tiles in the correct possition automatically. instead of making slices to cut by 4/8 (4/4 common character set) u will make it to cut by 8/16 (8/8 common character set) giving you the center, to center each tile. Centering tiles can help you to have the correct possitions of each tile so when you walk the character doesnt move incorrectly.

Edit: Dont forget that you can only move slices with the Move tool (V shortcut)

I hope you find this useful.

 

[Kjeldar]

I have a little question... Actually im having a problem with photoshop. I set it like you say at the beginnnig of the tut, but the grid doesn't appear, and the ruler doesn't change at all... anyone has any idea what im doing wrong?

 

[Mac]

Good job on the tutorials but could you please spoiler your images, as they stretch the forum.

Thank You

~Mac

 

[Diegoale2000]

Kjeldar: Have you actually set Photoshop to VIEW the Grids?
if you want to see the grid, you should go to the "VIEW" menu, then go to 'show' and click on "GRID"

That should do it :D

 

[busbuzz]

Ok ill put spoilers... To show Grid and hide grid (Control+') that wont hide the slices, just the grid, to hide grid, rulers and slices Control+H

 

[BlueScope]

I feel like pointing to my Resource Knowledge Database tutorial (link in signature), which holds the aspects of every resource in RMXP. Can be combined with this tuturial for perfect results

@buzz: Good tuturial, should be simple to understand and remember... I'm always surprised by the number of PhotoShop users not knowing about the grid feature, though...

 

[Athena]

Sometimes when I use the grid, Photoshop won't let me draw in the squares immediately next to a gridline or subdivide. Does anyone else have this problem? Is there a way to fix it?

Right now when I zoom in for detail, I often have to turn the grid off, draw a few pixels, turn it back on to check positioning, turn it off again to draw, etc. This is tedious.

 

[Anonymous]

Im sorry ive been missing for a longwhile and well i know its 4 months late but lol if any1 else has this problem just go to View menu and select the option "snap to grid" use it if u want the stuff to automatically adjust and turn it off if u dont want to auto adjust

 

[Reives]

I'd just like to say that this tip completes me.

 

[busbuzz]

Its good to be able to help

 

[The Sea King]

Question: How do the lines appear cause they don't show and I have done everthing in the first post...
P.S.
I am using photoshop 6

 

[busbuzz]

ive never used photoshop 6, try to get CS but in CS u can do it with the menu View and then Show Grids, show rulers, show guides

 

[The Sea King]

Installed the trial version of CS2 and the grids still don't show.

 

[busbuzz]

VIEW menu, Show/ Grid, Slices
VIEW Rulers

if all that is marked everything is gonna show, double click on ruler to get grid options