Skip to content

How to Use

Goce Mitevski edited this page Feb 27, 2024 · 17 revisions

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.

image

General Information

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.

Headline

The Headline section includes controls for the text content, text Size, text Color, Horizontal and Vertical Position.

Screenshot 2023-12-04 at 14-12-05 Blog Image Generator by Keitaro

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.

Border

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.

keitaroinc github io_blog-image-generator_border

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

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.

keitaroinc github io_blog-image-generator_background

Background image by Sean Sinclair

Gradient

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.

keitaroinc github io_blog-image-generator_gradient

Icon

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.

Screenshot 2023-12-04 at 14-01-52 Blog Image Generator by Keitaro

Keitaro Logo

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.

Screenshot 2023-10-16 at 11-15-27 Blog Image Generator by Keitaro

Image Width

image

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.

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.

Screenshot from 2023-06-07 09-35-18

Download

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.

Screenshot from 2023-06-07 09-35-27

Clone this wiki locally