Cement Tile Design Tool

Pattern Bar

Help and More

Welcome!

Welcome to our cement tile design tool! This is still a work in progress, so please forgive a few omissions and errors, and let us know if you have any problems.

Click the topics below for more information.

Links:

Villa Lagoon Tile (Home)
In-Stock Cement Tile
Custom Cement Tile
About Cement Tile

©2015-2023 Villa Lagoon Tile.

User Guide

This tool is for designing custom cement tile. You can select from our patterns, fill in your color choices, create a sample layout, and download or print a tear sheet of your choices. I'll point out the basics for now, but there will be a more in-depth walk through in the future.

Step 1: Choose a Pattern.

Click the tab "Pick Patterns" then just click on the pattern of your choice to add to the workspace. Some patterns are usually ordered in groups, and will load together, but don't let that stifle your creativity, if you only want a portion of that group. You can choose several to test out if you like, and you can come back later to add more.

We still don't have all of our patterns in the tool yet, so if the pattern you want is not in the list, call or email and we, and we bump it up next in line!

Step 2: Design Your Tile.

Click the tab "Design Tool" and start playing. You can switch which tile you're designing at any time by clicking the patterns in the workspace (the bar of patterns across the top, or along the side, depending on your screen orientation).

You will have one color from the palette selected, just click a region to fill it with that color, or click among the big group of colors to select a new color to work with.

The colors in use will start to show below the pattern. You can click them for some more options, or even drag one color over another to swap their places!

We try to speed up the process for you by linking regions that are almost always colored alike, but if that is inhibiting your creativity, you can always turn it off from the Design Tool tab's "Design Options" menu.

Step 3: Create a Layout.

This is optional, if you already know what you want, and simply want a tear sheet of the tile. You will begin with the option to add a layout, in one of a few styles. For now, we have a few basic options. "Square, Standard" is your basic grid of squares, "Square, on Point" is the same thing, but shown at a 45 degree angle, and for a few patterns that need it "Square, Vertical Offset" shifts each column by a half-tile.

After you select a layout, you will have several options. What happens when you click a tile in the layout is determined by the row of buttons over the upper-left corner of the layout:

  • Tile: This will place the currently selected tile from the workspace wherever you click.
  • Color: This will place the currently selected color as a single-color tile wherever you click. You can return to the "Design Tool" tab to switch colors.
  • Right, Left, 180°: With these selected, any tile you click will rotate right, left, our up-side-down.
  • Clear: This will remove the tile(s) where you click.

You can also simulate a 3d view with "Floorify", or use the "Layouts" button to add new layouts, switch between them, or delete ones you don't like.

Step 4: Print Your Work.

Have the tile of your dreams all planned out? Click the "Print" button in the upper right corner, and we'll generate a PDF document for you to download or print. The document will include a page for each tile, and a page for each layout. You can delete patterns from the workspace in the Design Tool tab, or delete layouts in the layout tab, if you were working on several alternate options you don't want to save.

Step 5: Email us!

The document that is generated is the perfect start for placing an order or getting a quote. Email it to [email protected] with your contact information, your project's location and schedule, and the quantity needed of each tile, and we can get started with turning your creativity to reality.

Get Help

Please contact our office if you need any assistance, we'd be happy to help! You can talk to our cheerful sales staff about pricing, options, and lead time, or even get help directly from the developer of the tool.

Office Telephone:251-968-3375
Office Hours:9am-5pm, US Central Time, Monday-Friday.
Email:[email protected]
Reporting Issues

It would be a great help if you can report anything that seems like it may be a bug or unexpected behavior. Please let us know what device and browser you are using, so we can do our best to replicate the issue. Unfortunately Internet Explorer is not supported. While most features should work well on the newest versions, if you are using an older version of windows, please consider switching to Chrome or Firefox .

Smartphone Note: Mileage may vary. Currently all features should work on modern versions of iOS and Android, but I still have a lot of work to do, optimizing the interface for smaller screens.

Office Telephone:251-968-3375
Office Hours:9am-5pm, US Central Time, Monday-Friday.
Developer Email:[email protected]
Credits

© 2015-2023 Villa Lagoon Tile, all rights reserved.

Designed and Developed by John M. Adams

All graphic tile elements (including those representing traditional patterns) are original works of Villa Lagoon Tile.

Click below for additional licenses and details of third-party libraries.

Library Licenses

jQuery

Copyright JS Foundation and other contributors, https://js.foundation/

This software consists of voluntary contributions made by many individuals. For exact contribution history, see the revision history available at https://github.com/jquery/jquery

The following license applies to all parts of this software except as documented below:

====

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

====

All files located in the node_modules and external directories are externally maintained libraries used by this software which have their own licenses; we recommend you read them, as their terms may differ from the terms above.

jQuery project home and source code.

jQuery UI

Copyright jQuery Foundation and other contributors, https://jquery.org/

This software consists of voluntary contributions made by many individuals. For exact contribution history, see the revision history available at https://github.com/jquery/jquery-ui

The following license applies to all parts of this software except as documented below:

====

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Copyright and related rights for sample code are waived via CC0. Sample code is defined as all source code contained within the demos directory.

CC0: http://creativecommons.org/publicdomain/zero/1.0/

====

All files located in the node_modules and external directories are externally maintained libraries used by this software which have their own licenses; we recommend you read them, as their terms may differ from the terms above.

jQuery UI project home and source code.

jQuery UI Touch Punch 0.2.3

Copyright 2011–2014, Dave Furfero

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

jQuery UI Touch Punch project home and source code.

jQuery SVG

Copyright 2007 - 2015 Keith Wood

================================

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

jQuery SVG project home and source code.

Mousetrap

Copyright 2016 Craig Campbell

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Mousetrap is a simple keyboard shortcut library for Javascript with no external dependencies

version 1.6.0

craig.is/killing/mice, Mousetrap project home and source code.

CSS Element Queries (with ResizeSensor)

Copyright (c) 2013 Marc J. Schmidt

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

CSS Element Queries project home and source code.

jsPDF

Copyright (c) 2010-2014 James Hall , https://github.com/MrRio/jsPDF
2010 Aaron Spike, https://github.com/acspike
2012 Willow Systems Corporation, willow-systems.com
2012 Pablo Hess, https://github.com/pablohess
2012 Florian Jenett, https://github.com/fjenett
2013 Warren Weckesser, https://github.com/warrenweckesser
2013 Youssef Beddad, https://github.com/lifof
2013 Lee Driscoll, https://github.com/lsdriscoll
2013 Stefan Slonevskiy, https://github.com/stefslon
2013 Jeremy Morel, https://github.com/jmorel
2013 Christoph Hartmann, https://github.com/chris-rock
2014 Juan Pablo Gaviria, https://github.com/juanpgaviria
2014 James Makes, https://github.com/dollaruw
2014 Diego Casorran, https://github.com/diegocr
2014 Steven Spungin, https://github.com/Flamenco
2014 Kenneth Glassey, https://github.com/Gavvers

Licensed under the MIT License

Contributor(s):

siefkenj, ahwolf, rickygu, Midnith, saintclair, eaparango,
kim3er, mfo, alnorth, Flamenco

jsPDF project home and source code.

FontAwesome

Font Awesome by Dave Gandy - http://fontawesome.io

Font Awesome project home and source code.