blog-tutorial-post-template

Tutorials

Setup & Customization

To get started, add the Enhanced Image stack to the editor and open the settings panel. In the Image Settings section select or drag and drop an image into the image field.

By default, the image will fill the width of its container. Use the Image Size setting to define an optional Max-Width for the image. If the max-width is smaller than the width of the container, the image will align horizontally according to the selected Align option.

Image Crop

You can optionally adjust the Aspect Ratio of the image by selecting from a list of provided options.

The image will crop to fit the selected aspect ratio. Use the Crop Position setting to change what part of the image is visible.

You can optionally change the Shape of the image by selecting from the list of provided options.

Each shape has specific settings for adjusting the Shape Inset. The inset is the distance from the image’s edge to the shape. The image will be cropped as the inset is increased.

Note: Some shapes also include Point Position settings to adjust the appearance of the shape.

The position off the shape over the image can be adjusted using the Shape X & Y Position settings. The image will not move with the shape. Instead, the Image X & Y Position settings can be used to reposition the image inside of the shape.

Use Image Rotate to rotate the image inside off the shape and Image Zoom to scale the image.

Mirror Image buttons are provided to allow you to mirror the image horizontally or vertically.

Frames can be created from a shape by enabling the Outline Shape option. The Outline settings adjust the thickness of the frame and only apply if the Outline Shape option is enabled.

Note: Some shapes instead have an Invert Shape option. This will create a transparent cutout instead of a frame.

Image Adjustments

You can optionally create custom filters for the image by selecting custom Base Colors. The “Black” color setting will apply to darker parts of the image while the “White” color setting applies to the lighter parts of the image. You can invert the dark and light colors by enabling the Invert Colors option.

Slider controls are provided to adjust the Brightness, Contrast, and Saturation of the image. You can also optionally enable the Adjust saturation by color option to saturate by any of the 6 provided colors.

The dark and light parts of the image can be further tuned using the provided Shadows and Highlights sliders.

The Tint slider lets you adjust the warmth, coolness, or color of an image. Change the Tint Color to change the effect of the applied tint.

Note: Red, orange, and yellow colors can be used to “warm” an image, while green, blue, and violet colors can be used to “cool” an image. Brown colors can be used to apply a sepia effect.

A Hide Changes button is provided to show or hide the applied image adjustments. This allows you to quickly compare the appearance of the original image to your changes.

Image Effects

Use the image effect sliders to apply optional effects to and around your image.

Image Extras

The Image URL field can be used to define a “warehoused” image URL.

The alt tag for the image can be defined using the Image Alt field.

Content can be added over the image by clicking the Enable Content option.

You can optionally nest Enhanced Image stacks inside of the content to create unique image layers. There is not a limit to how many layers you can add and each image can be styled separately.

Saving/Downloading Images

Customized designs made with the Enhanced Image stack can be saved/downloaded to your desktop as a single png image while previewing the Stacks page. To download an image, switch the Stacks page to preview mode. Then click on the image and hold the CMD key to reveal the download options. The first button will download the image at the exact displayed resolution. The second “2x” button will download the image at twice that resolution (for high pixel density/retina screens). When the image finishes generating it will display above the Enhanced Image stack. Click and drag the image into a folder or your desktop to save and rename the image.

Alternatively, you can download an image by pressing CMD +”p” keys (while the RapidWeaver app is active). In the browser, hover the image with your mouse and hold the CMD key to reveal the download options. Clicking either option will automatically download the image to your browser downloads location.

Note: Blur, feather, and grain effects are not supported in the downloaded/saved images.

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

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

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

RapidWeaver is a trademark of Realmac Software