Carcassonne Board Game

How to use overlays to create/make your own personal tiles

I personally use the Firefox web browser to create my own personal Carcassonne tiles. All of the other web browsers only allow you to take a Full-Page Screenshot of the tile image that you create, then you will have to use some form of image editing software to trim your personal tile from that FullPage image.

With Firefox, you can create your base tile image as large as you want, then, overlay as many transparent background images that you want onto the base tile where each overlay can be independently zoomed and rotated. When you are satisfied with the final tile image, right click on an empty space on your page and select "Take Screenshot" from the pop up window. Then, merely move your mouse over a non-overlaid portion of your final image and click your mouse again.

Once you are satisfied that you have selected your desired tile, select either download to create a .png file in your download directory, or select copy so you can paste the tile into your image editing software. An extremely important feature of the Firefox Screenshot software is that the entire image does not have to be visible on your computer screen to take the screenshot of that image, so you can make your final image as large as you want, even if it does not fit on your computer screen!

Remember, the most important factor to consider when making your own tiles is to start with the highest image resolution as possible. A pixel is a single dot on your computer screen and there are 96 pixels per inch, 170.323 dots per tile at a screen resolution of 100%. Most of today's printers are 600 dots per inch, 1,064 dots per tile!

One of the best features for using an HTML file to create your personal tiles is that each element that you are placing on your tile does not have to be the same resolutions.

Lets start this creating a personal tile process with the HTML head / style section that we need:

We need to redefine the styles so that the standard table and data commands will not have any extra spacing, and we also want to create an overlay area within the table. But we do not need to create the class names for double printing the final tile.

What if you want to use this Overlay coding to create your own personal Family Feud tile with a Monastery? These are the images that you might have to work with, but they seem to be all different "dots per inch" sizes.

260 x 260

54 x 62

123 x 135

120 x 100

All of the images that you use to create your personal tile should be as large and detailed as possible, so it is very likely that each image will not have the same “dots per inch” ratio. For that reason, you might have to adjust the width and/or height of each overlaid image to match the DPI of your basic tile, then use the top/left style coding to overlay your image where you want on the base tile. Using the following HTML code:

Note: The first <td class=overlay><img that you display will be the full size of your final tile image with all of the overlaid image on top of it.

After all three of the overlaid images have been resized and properly positioned on top of the base tile image, this is the final image that is created.

Google Chrome and Microsoft Edge do not include the ability to take a “Screenshot” of an image which has been overlaid with other images. SO, Using the Firefox Browser, you can right click a blank area on the page to get the following pop up display:

Then click "Take Screenshot" to see the following:

As you move you mouse over the image (and overlaid images) you will see:

When your mouse is hovering over the background image with the other three overlaid images displayed on top of it, click your mouse and the screen will change to:

You can now click Copy and paste the result into your digital editing software. Also note that you are getting the screen image, not just the raw background images. If, in Firefox, you change the zoom of your display with a series of Cntrl+ clicks, you will get a higher resolution for your final image.

Note: the Firefox screenshot will include every displayable pixel that you see on the screen, even if the displayed image is so large that the entire image does not display on your browser's screen.

FFFC.jpg width=325

Now, let's look at how the 123 x 135 pixel Monastery can be resized on the final tile image. If you only resize the width or height of the image, the web browser will automatically resize the other dimension the same ratio. But you can resize both dimensions by different ratios which will then alter the overall image. There are also a large variety of other variations that can be performed with other HTML style features.

Full Size		About 75%		Height 75% Full Width		Full Size Rotated 30°
src=Monastery.gif		src=Monastery.gif width=92		src=Monastery.gif width=123 height=101		src=Monastery.gif style="transform: rotate(30deg);"

The Monastery at the top of the tile has been resized to 75% of it's original size, 92 pixels wide and 101 pixels high. The Monastery at the bottom of the tile remains 123 pixels wide, only it's height has been reduced to 75%, 101 pixels high!

Insert Content Here