– Restaurant Menus –
How To Build HTML5 Layouts – Using QuickSign Pro
– Click here to view video tutorial or continue below to begin walkthrough tutorial –
Download Source Files – Please download the source files before you begin.
1. Prepare ContentCreate folder on Desktop, or desired location, containing all files (images, videos, music and fonts) needed to build layout.
It is imperative that your image and video sizes are the exact size of your desired zones you will be creating.
2. Import Source FilesOpen QuickSign Pro Designer and import image files through the Image Page and video files through the Video Page.
3. Creating LayoutThrough the Layouts Page, click the “New Layout” button. Designer will automatically set your Layout resolution to 1920×1080.
– Add Image Zone –Zones Menu find the blue Image Zone, dragging and dropping it into the top right of your Layout. Setting resolution size to 640×540.
Designer will display the Zones dimensions in red, around the zone, as you drag. Designer will also display the dimensions in the toolbar, directly above the Layout being created.
Within the folder containing all your source files, drag and drop ‘Image_Zone1.png” into the Image Zone.
4 Image Zones on the left side of your Layout. All 4 Image Zones should be 640×540. Two on top of two.
PRO-TIP: By default, Designer sizes your zones in increments of 10 pixels as you drag. For more control of sizing Zones, click View > Uncheck ‘Snap to grid’.
– Add Large Image Zone –Drag and drop another Image Zone on the right in the Layout, dragging to resolution size 640×1080. Drag and drop the ‘Varieties.png’ into that Image Zone.
– Add Text Zone –Text Zone onto first Image Zone you created. (Top left Image Zone). Double click within the Text Zone to edit text. To change the Font Family, Typeface, Font Size, Font color and alignment: Right-click > Zone Properties.
layer zones on top of each other. In this tutorial, there are two Text Zones on top of each other for the ‘Savor the Season’ title, to create depth and give the effect of a drop shadow.
Repeat the Text Zone step 3 more times for the menu titles. Place each title on the rest of the Image Zones you previously created.
– Add Table Zone –Table Zone onto the pink bar you created, with the use of the Image Zone.
Zone Properties to add/delete however many rows/columns you want in your table. For this table, you will need 3 columns and 1 row.
Background Properties to change the background color, background opacity, background image and background corner radius. In this table, set your background color to transparent.
Table Edit Mode on top left of table.
Text Properties to change the font family, typeface, size, color and alignment of the text. At the top of the Table Text Properties, you can choose from the drop down: All rows and columns, or by individual columns and rows. Here you can assign different text characteristics to individual rows and columns. Or change them as a whole.
Repeat this step 5 more times and place on the green and pink bars in the other 2 Image Zones, editing your prices as you go.
– Add Frame with use of Image Zone –Image Zone on top of entire layout, resolution size 1920×1080, then drag and drop the ‘Frame_Zone_Green.png’ image from source folder into the Image Zone.
– Add Text Ticker Zone –Text Ticker Zone, dragging resolution to 120×120. To add the numbers within the Text Ticker Zone, right click > select Zone Properties. Type 2, in a Text Page box, type 4 in the other Text Page box. Add two extra Text Page boxes for more effect.
Right click within the Text Ticker Zone > select Text Properties for desired font family, size, color, alignment.
You won’t see the Text Ticker animation in the layout template, however, you will see it on your display after deploying your layout.
Order > Send to Back.
You have just completed your Restaurant Menu Layout! Within the Menu, click File > Save.