Photoshop advice required

[wolph42]

I'm currently making one huge sheet with all possible tile mutations for the dungeon builder 2. The advantage is that it allows you to easily swap textures and create new tile sets.
I'm stuck however. I've created (the) 51 different tiles, but when I apply drop shadow and bevel to give it some depth, the shadow bleeds over to the next tile and the bevel also happens to parts that connect.
I've fixed the dropshadow issue by adding gutters between the tiles so the shadow bleeds into the gutter instead of the next slide
for the bevel however, I had the idea to enlarge the textured part of the tile with 10px outside the tile slice (so the bevel at the edges is cut off as it should) which basically works BUT for the tiles to work you need to use a seamless texture... and if you cut of 10px of each tile texture, they're not seemless anymore... sigh...
Hence, does anyone have any suggestions on how to fix this.

If you interested in the PS file, here it is: https://www.dropbox.com/s/pksqp3u5f5f5t ... e.psd?dl=0 (note that it is 1.5 GB !!).

[Full Bleed]

Ok, I think I know what you want to do...

Try this:

1) Duplicate the Tiles OC layer (i.e. Tiles OC Copy).
2) Ctrl-Left Click on the Tiles OC Copy to select all of the tiles.
3) Select White. Make a large 2000px brush. Paint in all of the tiles on the Tile OC Copy. (You now have white tiles with the shadows and bevel effects you want.)
4) Create a Layer underneath Tiles OC Copy.
5) Select the Tile OC Copy and Merge down to the new layer (flattens out the effects into the layer). Rename layer to Tiles OC Effects.
6) On Tiles OC Effects select Color Range>Fuzziness 200>Select a White area. Cut. (You now only have the bevel and shadow effects).
7) On Tiles Oc Effects change Layer Type to Multiply.
8) Turn Off (or delete) the Effects on the original Tiles OC layer. (The multiply bevel and shadow layer you created should be sitting over top the Tiles OC layer).
9) Then, cut the shadows and beveled portions out of the Tile OC Effects layer so that the tiles will connect to each other properly without the bevel effect and shadow effects over lapping or drawing in transition space.
10) Once you are done, you can merge the Tiles OC Effects layer to the Tiles OC layer.

PS: Do this right and you can get rid of those gutters you added, too.

[wolph42]

thnx.

I guess I just should go ahead and try to see what you mean. Fortunately I also have a gutterless version. I've added the gutter just recently to deal with the drop shadow.
Here's the gutterless version in case you interested: https://www.dropbox.com/s/2ratj7hzlyurh9c/Grid.psd?dl=0 (1.2 GB)

Once this is done I can create a full tutorial from creating your own tiles for DBII to rendering the dungeon.

[Full Bleed]

thnx.

I guess I just should go ahead and try to see what you mean. Fortunately I also have a gutterless version. I've added the gutter just recently to deal with the drop shadow.
Here's the gutterless version in case you interested: https://www.dropbox.com/s/2ratj7hzlyurh9c/Grid.psd?dl=0 (1.2 GB)

Ok, a couple issues here to get clarification...

1) Your gutters version is messing up the seams of the micro tiles. The gutterless version shows floor tiles that will connect to each other... the gutters version has partial tiles on some edges. That is confusing with regard to which sides of the tiles are supposed to be able to connect to other tiles. The process I described above will work to fix the bevel/shadows... but I don't think the tiles are going to connect like you want them to.

2) But the problem with the gutterless version is that it's hard to tell exactly where the connective edges of each macro tile is. Those edges, I presume, are the edges where you don't want to have a bevel effect or an overlapping shadow effect. Are all the micro floor tiles that touch the edge of a macro tile presumed to be potential edges?

I'd need a gutterless version with delineated edges for the macro tiles to come up with a process to add the effects you want. For example, in the bottom right hand corner there appear to be 5 tiles that are wall to wall micro tiles... I'm guessing that there is supposed to be some variations there with regard to the edges of the tiles where you'd see the interior bevel (corners, U-shape, tile with no exterior wall effect, etc.) But it's hard to tell.

[wolph42]

thank you for the elaborate explanation. Let me explain the intention of the tiles. first here's the end result with the bevels gone wrong. This is what I want to fix:

dungeon builder bevel gone wrong

Screenshot 2015-12-01 22.06.08.png (835.57 KiB) Viewed 1344 times

I've selected one tile so you can see the outline of one tile and where its edges are.

HOW they work: each (macro) tile consists out 9 area E, NE, N, NW, W, SW, S, SE and Centre (I guess you call these the 'micro tiles'). The builder 'knows' which parts of a tile are 'closed' (=wall) and which are 'empty' (=open space). The centre is ambiguous (that is the builder does not care), hence I have two sets of tiles: OC (open centre) and CC (closed centre). In total there are 51 tiles required to make a full set (=every possible permutation), the sheet however has space for 56 tiles, hence the 5 similar tiles at the end (they're waste).

This mean that as you assumed correctly (i think) open areas ALWAYS connect to an open area and closed area ALWAYS connect to closed area. (as you can also see in the picture). Due to the bevel however closed areas that connect show the bevel. This is what I want to fix.

You might also notice the drop shadow (not being an issue) I got that with the gutter.

how I use the PS file: The two most important layers are 'Tile Sheet OC' and 'Tile Sheet CC' (the green tiles).
What I do is: (gutterless version)
1. simply pull two seamless textures (in this case Asphalt (background and open space) and Concrete (foreground and closed space).
2. (for the OC tiles) select pixels of 'Tile sheet OC' (The green squares!!)
3. select Concrete layer (foreground)
4. cut.
(the end result are 'Tile Sheet OC '(concrete tiles).
Next you already have the 56 slices so 'save for web' and voila you have 51 (+5 waste) tiles ready for use.

It might be a bit confusing as all the other (result) layers are also there. Basically everything can be thrown away except for those two green layers (CO en CC).

With the 'gutter' version its basically the same, but with more waste.

Both version 'work'. The gutterless version has no layer style effect, so they connect seamlessly, but are less nice. The gutter version HAS style effect, but as you can see in the pic, its ugly.

So yes you are correct: NO dropshadow and bevel on the edges of the tiles.

edit: here's the link to the work version of the DB: https://www.dropbox.com/s/e5zra25ukn8at ... cmpgn?dl=0
the screenshot if of map: Example Roads, the tiles can be found on map: Dungeon Tiles (way to the right)

edit2: and just to be sure

this is what the gutterless version looks like on my end of the globe

Screenshot 2015-12-01 22.31.01.png (509.95 KiB) Viewed 1342 times

[wolph42]

I'm guessing that I need to make all other layers unvisible before I start with this?

1) Duplicate the Tiles OC layer (i.e. Tiles OC Copy).
2) Ctrl-Left Click on the Tiles OC Copy to select all of the tiles.
3) Select White. Make a large 2000px brush. Paint in all of the tiles on the Tile OC Copy. (You now have white tiles with the shadows and bevel effects you want.)
4) Create a Layer underneath Tiles OC Copy.
5) Select the Tile OC Copy and Merge down to the new layer (flattens out the effects into the layer). Rename layer to Tiles OC Effects.

so you mean 'rasterize layer style' (right mouse click on layer)?

6) On Tiles OC Effects select Color Range>Fuzziness 200>Select a White area. Cut. (You now only have the bevel and shadow effects).
7) On Tiles Oc Effects change Layer Type to Multiply.

you mean 'blend mode' ?

Turn Off (or delete) the Effects on the original Tiles OC layer. (The multiply bevel and shadow layer you created should be sitting over top the Tiles OC layer).
9) Then, cut the shadows and beveled portions out of the Tile OC Effects layer so that the tiles will connect to each other properly without the bevel effect and shadow effects over lapping or drawing in transition space.

how?
It's so far so good, I've tried this on the guttered version and this is

the result upto and including step 8:

Schermafdruk 2015-12-03 10.14.41.png (693.29 KiB) Viewed 1328 times

step 9 however would mean that I manually start selecting all the bevels on the edges (blue guide lines) and cut these out (or use an eraser or something) WITHOUT touching the shadows?? That sounds like A LOT of work and error prone. Can that be simplified somehow?
Especially given the fact that I need to 'rinse and repeat' this for the CC layer as well...

10) Once you are done, you can merge the Tiles OC Effects layer to the Tiles OC layer.

I think that once thats done that 'effect layer' can be used for other sets as well, so it would be better not to merge these.

PS file with the effect layers: https://www.dropbox.com/s/pksqp3u5f5f5t ... e.psd?dl=0

edit: there's another issue: the corners. If I cut out the bevel at the edge

like done here

Schermafdruk 2015-12-03 10.52.50.png (186.57 KiB) Viewed 1326 times

This is the OC effect layer on top of a white layer left of the blue guide line is the tile with cut bevel, right is the drop shadow that bleeds into the gutter.
As you can see at the corner the bevel is thicker due to the overlap with the horizontal bevel (that I cut away).

Here a zoomed out version with the layers active so you can see the result

Schermafdruk 2015-12-03 11.01.49.png (301.87 KiB) Viewed 1326 times

it might not be that bad, alas this comes clear when put to use and thats after I've manually cut out 51 bevels...

[Full Bleed]

I'm guessing that I need to make all other layers unvisible before I start with this?

I was just using the copy you put up on your dropbox... in it the other layer were not visible.

5) Select the Tile OC Copy and Merge down to the new layer (flattens out the effects into the layer). Rename layer to Tiles OC Effects.

so you mean 'rasterize layer style' (right mouse click on layer)?

I was referring to Layer>Merge Down. Or you could have selected the Layer and hit Ctrl-E.

7) On Tiles Oc Effects change Layer Type to Multiply.

you mean 'blend mode' ?

See where it says "Normal"? You can select the layer Type there. Change it to Multiply.

9) Then, cut the shadows and beveled portions out of the Tile OC Effects layer so that the tiles will connect to each other properly without the bevel effect and shadow effects over lapping or drawing in transition space.

how?

Probably through the selection tool or (even better since it would be reuseable) you could build a "cut mask" on a new layer by creating solid boxes where you want to cut... then select the "cut layer", switch to the OC Effects Layer, and "Cut". You could probably size a couple "cut boxs" properly then keep reusing them (copy>paste and rotating it on additional tiles). Personally, I'd create a cut mask at around step 3 and save myself the trouble (I'll detail that below).

WITHOUT touching the shadows??

Why would you care if you cut the external shadows in the area there the tiles connect? They're only there because you have gutters that aren't going to be used. Correct?

That sounds like A LOT of work and error prone. Can that be simplified somehow?

Creating the "cut mask" I mentioned above will make it easier. But, keep in mind that I was just providing a method given the layer structure and assets I saw in the file you had there to give you a basic concept.

10) Once you are done, you can merge the Tiles OC Effects layer to the Tiles OC layer.
I think that once thats done that 'effect layer' can be used for other sets as well, so it would be better not to merge these.

Sure, make a copy and reuse it if you can. Any layer that takes some work to construct should be kept. I was just indicating how you get the final "flattened" look.

edit: there's another issue: the corners. it might not be that bad, alas this comes clear when put to use and thats after I've manually cut out 51 bevels...

That's where it might get a little finicky. At that resolution I didn't expect a few missing/faded pixels in the transition corners to be missed...

But, if you want it to be more perfect there are methods that can be used... but it can get complicated and it's hard to tell if they would solve every issue because when I look at the tiles I just don't understand where all the transitions to other tiles are.

For example, in the X tile, what does the center square connect to? Should it have the inner bevel all the way around it making it a closed room with no way in our out?

Or, are tile transitions to other tiles *only* in the areas that they touch the gutters? If so, this actually makes the job *much* easier (just did the whole thing in about 5 minutes).

[wolph42]

thanks for the elaborate explanations. I get most of it, some remainders:

For example, in the X tile, what does the center square connect to? Should it have the inner bevel all the way around it making it a closed room with no way in our out?

I guess you mean tile 31 (you can check with the PS screenshot I made few posts back) number of the slice.

The centre micro tile is surrounded by the outer tiles, so it will ALWAYS connect to those. Only the edges of the macro tiles connect to other macro tiles and:
asphalt ALWAYS connects to asphalt
concrete ALWAYS connects to concrete

So bevel at the edges of the macro tile are an issue, bevel at the edges of a micro tile (not at the edge) is not a problem.

Or, are tile transitions to other tiles *only* in the areas that they touch the gutters?

yes!

If so, this actually makes the job *much* easier (just did the whole thing in about 5 minutes).

ok you made me curious!

[wolph42]

Or, are tile transitions to other tiles *only* in the areas that they touch the gutters?

yes!

If so, this actually makes the job *much* easier (just did the whole thing in about 5 minutes).

ok you made me curious!

still curious...

[Full Bleed]

still curious... :mrgreen:

Heh, takes me a lot longer to write it up than do it. I do it all very fast and don't do things like name the layers or pay attention to what keys I'm pressing when doing selections, etc. ;)

Make a Gutter Mask.

1) Since you have all of those guides in, you can use the selection tool to select all of the gutters (Shift>Left Click to add to a selection).
2) Once you've done that, make a new layer above the Tiles OC Layer and fill the gutter selection with 25% gray. Rename it to "Gutter Mask".
3) You can hide this layer.

Make a Tile Layer with the interior Bevel Effect

1) Selection Tool>Ctrl-Left-Click on the Tiles OC layer.
2) Selection Tool>Shift-Ctrl-Left Click on the Gutter Mask layer. You now have a selection of both the gutters and the Tile OC layer.
3) Create a New layer above Tiles OC layer. Name it Tiles OC Expansion.
4) Select Tiles OC Expansion Mask layer and Fill with White.
5) Right-Click Tiles OC>Copy Layer Style.
6) Right-Click Tiles OC Expansion Mask >Past Layer Style.
7) Delete Outer-glow effect from Tiles OC Expansion Mask.
8) Delete Bevel and Emboss effect from Tiles OC layer.
9) Create new layer between the Tiles OC Expansion layer and Tiles OC layer. Name it Flat Tiles OC Layer.
10) Select Tile OC Expansion Layer and Layer>Merge Down (Ctrl-E) into the Flat Tiles OC Layer.
11) Ctrl-Left Click the Gutter Mask layer.
12) Select the Flat Tiles OC Layer and CUT out the gutter mask selection.
13) Select the Flat OC Tiles Expansion layer and change the Layer Style to Multiply.

You now only have the bevel effect on the inside of the tiles and anywhere it touches the gutter has no bevel effect.

[wolph42]

Brilliant!

now for the final question, is it possible to export the "macro tile slices" only? And thus not the "gutter slices"? with web save?
edit: nvm: http://feedback.photoshop.com/photoshop ... s_pictures
numbering still gets FU due to the 'gutter slices' but thats scriptably fixed in MT.

edit: discovered a small flaw: the bevel effect is still active on the edges of the image due to the fact that there is no gutter. This is easily fixed by expanding the canvas (and making it part of the gutter mask)
I've also noticed that its not required to flatten the 'effect layer' (which you called expansion). You simply leave it and turn multiply on. This way you can change the bevel later on if need be.

[Full Bleed]

now for the final question, is it possible to export the "macro tile slices" only? And thus not the "gutter slices"? with web save?
edit: nvm: http://feedback.photoshop.com/photoshop ... s_pictures
numbering still gets FU due to the 'gutter slices' but thats scriptably fixed in MT.

Glad you found your answer on that... I wouldn't have been able to answer that question... I don't use that functionality.

edit: discovered a small flaw: the bevel effect is still active on the edges of the image due to the fact that there is no gutter. This is easily fixed by expanding the canvas (and making it part of the gutter mask)

Yeah... if the outer edge isn't supposed to be a tile edge you've got to give it gutters.

I've also noticed that its not required to flatten the 'effect layer' (which you called expansion). You simply leave it and turn multiply on. This way you can change the bevel later on if need be.

True. It looks like if you're auto-magically exporting slices instead of cutting them yourself that would be the best way to go.

[wolph42]

here's a result (zoom)

Screenshot 2015-12-07 22.58.25.png (2.92 MiB) Viewed 1261 times

full view

Screenshot 2015-12-07 23.03.25.png (1.13 MiB) Viewed 1260 times

this example makes little 'use' sense, its pure a test and it works!!
Thank you VERY much for the help!! I now need to log this and turn it into a manual.

btw I noticed that the 'seemless' texture is not so seemless as its prone to rotation etc. I guess its best to use a texture that aligns with the grid, but thats nitpicking.

[Full Bleed]

btw I noticed that the 'seemless' texture is not so seemless as its prone to rotation etc. I guess its best to use a texture that aligns with the grid, but thats nitpicking.

Something happened to your tiles when you added the gutters. In the gutterless version, all of the tiles would connect to each other seamlessly. Maybe you can change how you added your gutter space (i.e. make the gutter space as large as a base seamless tile).

[wolph42]

btw I noticed that the 'seemless' texture is not so seemless as its prone to rotation etc. I guess its best to use a texture that aligns with the grid, but thats nitpicking.

Something happened to your tiles when you added the gutters. In the gutterless version, all of the tiles would connect to each other seamlessly. Maybe you can change how you added your gutter space (i.e. make the gutter space as large as a base seamless tile).

Hmm, good point. Need tot hink about that, its already a huge image