1LD Tutorials & Blogs

Tutorials

Pattern Maker Canvas Breakdown

After adding the Pattern Maker stack to the editor you will see a Canvas above a “Drop stacks here” section. This canvas is where you are able to design a new pattern. The canvas is surrounded by a Preview Area that allows you to see the pattern duplicated in every direction.

Initially, a single circle shape is added to the Canvas in the center. When you select a shape by clicking on it, a number representing its Index out of the Total number of Shapes will show in the top right. More shapes can be added by clicking the Add New Shape Button or by copying and pasting (Cmd+c Cmd+v) a shape that is already in the canvas.

Adding Content

The Pattern Maker stack is for creating background patterns and requires content to where the pattern will be applied. And any stacks content to the “Drop stacks here” section and the pattern will be used as the background for that content.

You may also instead download the created pattern as an image that you can use anywhere images are accepted, most notably in any other stack that allows you to add background images. Learn more about how to download a pattern you have created in the “Downloading a Pattern Image” tutorial below.

Selecting and editing a shape

You can select a shape simply by clicking on it. If a shape is overlapped by another and you are unable to select it, you can use the arrow keys to navigate through the shapes by index number.

Open the Inspector to see the shapes settings panel.

Shape Settings Panel Breakdown

Category
Select from 3 different shape categories. There is also an option to use an image instead of one provided shapes.

Shape #
Each shape categories has 24 different shapes to choose from. Use this slider to select a shape.

Stroke
Increase the stroke of a shape to switch between solid and outlined shapes. Every value over 0 defines the width of the stroke.

Size
Adjusts the overall size or scale of the shape in pixels.

Color
Select from 3 different color categories. The Major, Minor, and Accent categories are defined in the Pattern Maker stack settings panel. You may also optionally define a custom color for the selected shape.

Shadow Color & Spread
If the shadow spread value is greater than 0 a shadow will display around the edges of the shape spread out by the defined pixel amount. Use the shadow color option to change the intensity and color of the shadow.

Blur
If the blur value is greater than 0 the entire shape will blur by the defined pixel amount.

Left/Right & Top/Bottom
Adjust the position of the shape in the canvas. Shapes are positioned by a pixel value based on an origin at the center of shape. The canvas is 200×200 pixels in size, though the size it displays at when published and in preview is defined in the Pattern Maker stack settings panel.

Rotate
Adjust the rotation of the shape in degrees.

Z-index
Adjust the stacking order of the shapes relative to one another. Higher z-index values will display on top of lower z-index values.

Pattern Maker Settings

Select the Pattern Maker stack and open the Page Inspector – settings panel.

Pattern Size
Adjust the overall scale and size of the created pattern. The pattern size can only be viewed when published or by switching to preview mode.

Shape Colors
The Major, Minor, and Accent color categories can be defined here. These colors can be applied to individual shapes by selecting a shape and clicking on a color category in the settings panel.

Use Image
Enable this option to use a pattern image instead of the pattern currently in the canvas.

Downloading a Pattern Image

By default, every pattern you design with the Pattern Maker stack will automatically be converted to a temporary image that will be used as the background for the stack. This temporary image is generated every time the page is loaded. This will not put a significant load our your website but the pattern may take a noticeable amount of time to load if you have multiple patterns throughout the stacks page.

It is recommended that you download the generated pattern image and use it as a background instead. To download a pattern image you will just need to preview the Stacks page by pressing Cmd+p (while the RapidWeaver app is active). Click on the “Download Pattern” button to download the image. If you are using the RapidWeaver preview mode you will need to drag and drop the image into a folder or the desktop.

After downloading the image, switch back to edit mode and select the Pattern Maker stack. In the settings panel enable the “Use Image” setting. Drag and drop the pattern image to apply the pattern. The download pattern button is only visible in preview mode and will not be present on a published website.

Once this is done, the pattern will no longer need to be generated. The downloaded pattern image can also be used anywhere images are accepted.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Scroll Shift Stack

Scroll Shift Screenshot

Scroll Shift is the ultimate tool for adding seamless scroll-based animations to your web design projects. Create captivating and engaging websites by effortlessly animating elements as the user scrolls through the page. This tool can bring your designs to life with smooth transitions, eye-catching movements, and precise timing.

Create captivating visuals by linking multiple elements together to form a stacked layer effect. These elements can separate and come together to form a unified element, adding depth and dimension to your designs. The possibilities are endless as you craft intricate animations that leave a lasting impression.

Drive attention to essential content by implementing animations that trigger only when the user scrolls past a specific section. By strategically timing the animations, you can ensure that users take notice of crucial information and engage with your content effectively.

Check it out!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software