-
Notifications
You must be signed in to change notification settings - Fork 0
How to Use
Blog Image Generator (BIG) by Keitaro was designed to be very easy to use.
Read along if you'd like to find out more about the existing User Interface controls and all of the available options.
The Blog Image Generator user interface is split between two main sections:
- Sidebar - where the user controls are contained
- Preview - where the user is able to see a live preview of the image that is being prepared.
The Headline section includes controls for the text content, text Size, text Color, Horizontal and Vertical Position.
The headline text can be modified by changing the content of the text input field.
Size, Width, Horizontal Position and Vertical Position controls are represented as range inputs. These can be modified by sliding the range point across the track. Each control is preset to a default value and the value can be changed within a predefined set of values.
The Horizontal Position and Vertical Position controls also have presets for easy one-click alignment of elements within the canvas.
The Color control is provided by the browser color control and may vary depending on the operating system or browser used. The Color control is activated on click.
The Border section allows for setting an otter border to the image. The Border sections includes a control for the Border Width and Color.
The Border Width control is represented as a range input. The value can be changed within a predefined set of values.
The Color control is provided by the browser color control and may vary depending on the operating system or browser used. The Color control is activated on click.
The Background section includes controls for the background color and background image. Once an image is dropped within the placeholder, the background image controls for Horizontal Position, Vertical Position, Scale and Blur are revealed.
The Horizontal Position, Vertical Position, Scale and Blur controls are represented as range inputs. The value can be changed within a predefined set of values.
The Color control is provided by the browser color control and may vary depending on the operating system or browser used. The Color control is activated on click.
Background image by Sean Sinclair
The Gradient section includes controls for creating one or multiple gradients. A gradient is created by clicking on the green plus button.
Each Gradient item includes controls for the gradient colors, Scale, Rotation, Opacity, Gradient Type and Blending Mode.
The Color control is provided by the browser color control and may vary depending on the operating system or browser used. The Color control is activated on click.
The Scale, Rotation and Opacity controls are represented as range inputs. The value can be changed within a predefined set of values.
The Gradient Type and Blending Mode control are represented as select inputs. The value can be changed within a predefined set of values.
The Icon section includes controls for the icon background color and icon image. Once an image is dropped within the placeholder, the icon image controls for Mask, Scale, Border, Border Type, Horizontal Position and Vertical Position are revealed.
The Scale, Border, Horizontal Position and Vertical Position controls are represented as range inputs. The value can be changed within a predefined set of values.
The Horizontal Position and Vertical Position controls also have presets for easy one-click alignment of elements within the canvas.
The Mask and Border Type controls are represented as presets for easy one-click alignment of elements within the canvas.
The Color control is provided by the browser color control and may vary depending on the operating system or browser used. The Color control is activated on click.
The Keitaro Logo section includes controls for the Type, Horizontal and Vertical Position of the Keitaro logo.
There is also a logo title input for adding short messages above the logo, such as: 'CKAN Extension by', 'Powered by', 'Enabled by', 'Supported by' etc. The Logo Title also has a color control.
The Opacity, Horizontal Position and Vertical Position controls are represented as range inputs. The value can be changed within a predefined set of values.
The Horizontal Position and Vertical Position controls also have presets for easy one-click alignment of elements within the canvas.
The Logo Title Color control is provided by the browser color control and may vary depending on the operating system or browser used. The Color control is activated on click.
The Preview Section includes an Image Width control represented as an input control. The value can be changed to any number of pixels. The Image Width value determines the width of the exported image file. The Image Height is calculated automatically, based on the selected Aspect Ratio.
The Preview Section includes an Aspect Ratio control represented as a select control. The value can be changed within a predefined set of values.
The Preview Section includes a Download button, which makes an exact copy of the screen rendering in the form of an image file.
The user is able two select between PNG and JPG value. The default action triggers Download PNG.