Customize a tile layer

tile_image_layer ProPhoto Tiles are made of multiple layers of customizable text, shapes or images. You can even make a tile do cool things when you hover or tap them in your browser by editing the two states of your tile design – default and hover.

Some options are common between all the layer types, while others are available only for text layers, image layers, or shape layers. For details regarding custom tile hover animation and movement see our Add movement to a tile guide.

The tile editor supports undo (cmd/ctrl + z) and redo (shift + cmd/ctrl + z) to make experimentation easier, so have fun!

Image layer

Each image layer allows you to add one image. If you need multiple images, use multiple image layers in your tile design and arrange them as needed.

When you add an image layer, you’ll see an image upload box. Click and select your image, or drag it onto the upload box. If you are planning for Retina compatibility with your tiles then upload images that are exactly twice as large as what you intend. For example, if you set your tile width and height to 500 x 500 pixels and wanted an image to perfectly cover that with no zooming, then you would upload a 1000 x 1000 pixel image and check the box that says “This is a retina (2x) sized image.” tile_image_upload ProPhoto will automatically load a half-sized image for regular screens, and the full-sized image for high-density displays.

Text layer

Text layer options include a box for entering text, font style selection, and options for how the text area will be sized and aligned. tiles-text-options

Type in any text you’d like to use in the box – you can even press return to create line breaks. Next, choose a font style from the dropdown – each font style is setup in the “ProPhoto > Customizer > Fonts > Font Styles” screen. If you want, you can use the tile designer hover state editor tab to override the font color of the font style. tile_hover_color

Text area sizing and alignment

The automatic text area sizing option will create a text box that is exactly the width needed to display the text. Use this option for almost all scenarios. The custom width sizing option allows you to limit the text box to a specific width. Text will auto-wrap if necessary.

tile-sizing-alignment

Use the text alignment options to left-, center-, or right-align your text within the area. If your text fits within the area on one line, you may not notice any effect from alignment changes.

Shape layer

Shape layers are the swiss army knife of tiles. Overlay shapes with opacity to darken or lighten images so text is easier to see, create unique shapes, and more. Start by selecting a rectangle or ellipse. Set the width and height of the shape, then set rotation, color, and border. Drag the shape around the layout editor to position it, or use the X and Y input boxes.

In the example below there are 5 rectangular layers. 4 are rotated and placed in the corners to create a makeshift diamond. One is used to darken the image so the white text shows better. tile_shape_layer

Changing the settings for shape layer in each state can create some nice movement.

Options shared by all layers and states

Layer management

Much like Photoshop, layers that you create are listed in-order. You can provide your own label for each layer to help you keep track of each. You can drag-and-drop to change the order in which your layers stack up, so if you want text on top of an image, make sure the text layer sits on top of the image layer in the list.

The layer highlighted in blue is the active layer. Click and drag the layer to change its order. Click the eye icon to toggle a layer visibility on/off while you work. (this visibility is only for you while you design, and doesn’t affect how the tile appears on your site)

Positioning

To reposition a layer in the default state or the hover state, select a layer in the list so it is highlighted, and drag-and-drop anywhere in the tile preview. Cmd + z to undo a reposition.

For fine-tuning position, use the X and Y option boxes above the preview to move the default position of the layer. The hover state has it’s own translation input boxes to help you modify where the layer sits when hovered.

Opacity

The opacity slider makes it possible to change how opaque the layer appears in each state. The slider goes from 0-1 with 0 being fully transparent/clear, and 1 being fully opaque.

It’s common to reduce the opacity of an image layer in a tile so that a text layer is easier to see on hover.

For a layer to be invisible in it’s default state and only appear when hovered, the “default” state will get an opacity of 0 and the hover state will get an opacity greater than 0.

Scale

Scale will grow or shrink a layer in a single state. For example, accomplish a subtle zoom effect on your tile image layer when hovered by setting the scale for the hover state to a number above what is set the default state.

Avoid upscaling image layers too much or you will notice that they get blurry. Text and shape layers can handle any scale and look great.

Rotate

The rotation number you enter here represents the degree of clockwise rotation applied to the layer. You can use any negative or positive integer for rotation, so you can type -90 to rotate a layer a quarter turn counterclockwise from normal, or 405 to rotate a layer an eighth turn clockwise from normal. Add another rotate value for the hover state and you can get some cool effects.