Header Maker Help

Well documented step-by-step to create your own Header Design

Table of Contents

• Interface and Functions
• Screenshots
• Launch “Header Maker”
• Common Functions
• Layers/Objects Management
• History Management
• Zoom Controller
• Crop Tool – How To Use
• Rotate Tool – How To Use
• Resize Tool – How To Use
• Round Corners Tool – How To Use
• Color Tool – How To Use Color Tool
• Merge Objects/Layers – How To Use
• Add A New Image To Your Design – How To Use
• Text Tool – How To Use
• Free-Hand Drawing Tool – How To Use
• Shapes Tool – How To Use
• Draw a Polygon – How To Use
• Apply Effects – How To Use Filters To Apply Effects
• Design Collection – How To Use
• Stickers Tool – How To Add Stickers To Spice Up Your Header Design
• How To Preserve Your Work For Further Editing?
• General Notes

Interface and Functions

With modern technologies image manipulation tools, Header Maker can do almost anything you can imagine when you design your favorite header!

Header Maker provides an intuitive click tabs interface that allows you to create any header design, using many straightforward, powerful and unique design tools and editing tools.

Let’s get into it!
 

Header Maker Screenshots

Launch Header Maker

When you open Header Maker, a create/upload dialog box will appear in the middle of the workspace. You have two choices:

1.  Create New Header

Click ‘Create New Header‘ to make a new header, and set your new header size (width and height in pixels) and click CREATE. Canvas will show up on the workspace with your desired size.

To start managing and editing header, click on the red edit circular icon (on the top left side). This toggle icon can show/hide the left sidebar which includes all the design and editing tools. Now you can start to create your new header using all available tools.

2. Upload From Computer

You can also start by clicking on Upload From Computer, and upload a new image to canvas. Your new image will show up in the dialog box. To confirm the image, click OPEN to add your image to canvas.

Common Functions

The Top Panel is located at the top of the workspace. It contains most common function buttons:

• OPEN: When you click OPEN button, a create/upload dialog box will appear in the middle of the workspace, with two choices: Create a New Header and Upload to your computer. For more details, refer to Launch Header Maker.
• HISTORY: By default, History button is inactive in the top panel. Click it to show/hide History panel in the workspace.
• LAYERS: To show/hide Layers panel, click on Layers button in the top panel.
• SAVE: When you finish creating and editing your design, click the SAVE button on the top panel. A save/download dialog box will show up, enter the file name, select the format; jpg, png or JSON (JavaScript Object Notation File), then assign the quality (1-10) and download file to your computer.

Layers/Objects Management

• Whenever you add an object to your canvas, a new layer will be added to Layers panel on the right side. This means that you can manage all the objects in your design from the Layers Panel.
• If you click on any layer, it will select its object in the canvas. Each layer has function icons to manage its object in the canvas:

1. Eye Icon: This is the first icon, click on it to toggle layer visibility, i.e. show/hide the object.

2. Trash Icon: the Second icon, click on the trash icon to delete the object.

3. Lock Icon: the Third icon, click to lock object in its place in the canvas, preventing its movement via drag and drop.

4. Layer Item: This is the object type.

• You can also control objects z-index by changing their order in the layers panel. Just click and hold, move the layer up or down to rearrange your layer’s order.
• To show/hide Layers Panel, click on LAYERS button in the Top Panel.
• To expand and collapse the Layers panel, click on the panel’s title (Layers).

History Management

Almost all of your actions will create a new item in the history panel, so you can easily jump around to various action points in time by clicking on a specific item.

• To show/hide History Panel, click on HISTORY button in the Top Panel.
• To expand and collapse the History Panel, click on the panel’s title (History).

Zoom Controller

The Zoom Controller is an important tool for easier browsing, it helps you fit your image to your workplace, helps you see the original size of your image and enlarge the image to perfectly see the details of your design. Moreover, when you upload a new small image, an extra zoom will be automatically applied.

The zoom controller has three important functions:

• Fit to Screen: Click this button to automatically zoom in or zoom out to fit your image in the workspace.
• Original Size: Click this button to get the original size of your image.
• Long Zooming Slider: Use the slider to control the zoom factor percentage.

Crop Tool – How To Use

To be able to use any tool, be sure that you have uploaded an image to the canvas. If not, click the OPEN button to add an image or photo.

1. Select the image, click on Crop tool in the left sidebar, a region from your image will be highlighted and got a bound box with cropping square handles.
2. In the Setting Panel, set your cropping ‘Width’ and ‘Height’ in pixels.
3. You can manually adjust the crop region with your mouse by using the square handles; just click and drag the square handles to reach the cropping size you want. If you want to keep the image proportionate (Keep aspect ratio), hold down the Shift key, click and drag the square handles that appear in the corners.
4. Hit Crop, this will cut out everything not in the highlighted region. Done!

Rotate Tool – How To Use

To be able to use any tool, be sure that you have uploaded an image to the canvas. If not, click the OPEN button to add an image or photo.

1. Select the image you want rotates, click on Rotate tool in the Options Panel.
2. In the Setting Panel:
   1. Use the clockwise and anticlockwise buttons to rotate the image to left or to right.
   2. Use the slider to adjust the rotating angle. You can rotate image manually, just click and drag the top square handle, the mouse will change to a crosshair , move right or left to rotate the image.
   3. When you are finished, click APPLY button. You’re done!

Resize Tool – How To Use

To be able to use any tool, be sure that you have uploaded an image to the canvas. If not, click the OPEN button to add an image or photo.

1. Click on Resize tool in the left sidebar. In the Setting Panel, set your new resizing options:
   • Width: enter only your desired width in pixels. Height will be automatically changed to keep aspect ratio.
   • Maintain Aspect Ratio: By default, ‘Maintain Aspect Ratio’ is already active to keep the header or the image proportionate.
   • Use Percentages: To resize the image by a certain percentage while keeping the aspect ratio, tick Use Percentages and enter your desired percentage in width (without %); height will be automatically changed to keep the same percentage.
2. If your image is not the first main image, you can use manual resizing by using the square handles; select the image, you got a bound box with resizing square handles. Click and drag the square handles to reach the size you want. If you want to keep the image proportionate (maintain aspect ratio), hold down the Shift key, click and drag the square handles that appear in the corners.
3. Hit Resize, so you got the size you want. Done!

Round Corners Tool – How To Use

To be able to use any tool, be sure that you have uploaded an image to the canvas. If not, click the OPEN button to add an image or photo.

1. To round image corners, click on Round tool in the left sidebar. In the setting panel, use the Radius slider option to select the radius you want.
2. Before you click APPLY, be sure that you have finished your design since clicking APPLY will also merge all objects/layers in one merged layer.

Color Tool – How To Use

To be able to use any tool, be sure that you have uploaded an image to the canvas. If not, click the OPEN button to add an image or photo.

To add canvas background color, click on the COLOR tool in the left sidebar. In the editing panel, use the custom color palette to select your desired color, or enter the color number directly under the palette. Click APPLY … Done!

Examples of Using Color Tool:

1. When your image doesn’t fill the entire canvas, you can fill the background with a selected color.
2. When you need to create a design with a colored background, you can use canvas background color, and then you can overly any objects you like for your design.
3. When using a specific filter effect with Highlight, for an image, you can change the canvas background color to change the Highlight Color.

Merge Objects/Layers – How To Use

To be able to use any tool, be sure that you have uploaded an image to the canvas. If not, click the OPEN button to add an image or photo

By default, Merge button is inactive as long you have just one object/layer in the canvas. It will revert to active when you have more than one object/layer in the canvas.

To merge all your objects/layers, click on Merge tool in the left sidebar … Done!!

After merging:

• Your design will be one merged layer, this layer will be neither movable nor modifiable, but you will be able to apply filters to.
• You will be still able to add any new object/layer to the canvas.

Add A New Image To Your Design – How To Use

1. Click OPEN button on the top panel, a create/upload dialog box will show up in the middle of the workspace.
2. Click ‘Upload to your computer’, and start uploading your image to canvas. Your new image will show up in the dialog box. To confirm, click OPEN. The image will be added in the middle of the canvas and a new layer will be added to the Layers panel. You can hide/show, delete and lock that layer directly from the Layers Panel. To know how to use and manage layers, refer to Layers Management.
3. To start to manage and edit the image, click on the circular red edit icon (on the top left side). This toggle icon can show/hide the left sidebar which includes all the editing tools.
4. Select the image; a setting panel will show up with setting options:
   • Opacity: use the slider to set it up (min=0 max=1).
   • Color: If the color option exists, use the color picker to pick your desired sticker color.
5. Move: To move image; click on it, the cursor will change to four arrows cursor  , hold, and then drag it to the desired location.
6. Rotate: To rotate the image; just click and drag the top square handle, the mouse cursor will change to a crosshair , move right or left to rotate the image.
7. Resize: To resize image keeping aspect ratio; hold down the Shift key, click and drag the square handles that appear in the corners. To reform image box without keeping aspect ratio; click and drag one of the square handles toward the middle of the sticker to make it smaller, drag away from the image to make it larger.

Text Tool – How To Use

1. Click the TEXT tab in the left sidebar (2nd option tab), a list of font families will appear in the options panel. The fonts are categorized into five topics; Serif, Sans Serif, Display, Handwriting and Monospace. Scroll in the font family preview list, you will find 600+ Google fonts available. You can also use Search to help narrow down the hunt.
2. Pick your desired font from font lists in the options panel.
3. A text box with your selected font will appear in the middle of the canvas (with square handles) and a new layer will be added to Layers panel. You can hide/show, delete and lock that layer directly from the Layers Panel. To know how to use and manage layers, refer to Layers Management.
4. Add Text: Double-Click the text box to edit contents and add your own text.
5. In text setting panel, there are many other options:
   • Opacity: Use the slider to set it up (min=0 max=1).
   • Font Size: Use the slider to set it up (min=1 max=100).
   • Text Format: Click to align;  center / right / left.
   • Text Decoration: Click to style; underline / line through / over line / italic.
   • Color: Use the color picker to pick your desired font color.
   • Background: Tick check box to enable background and use the color picker to pick your desired font background color.
   • Outline: Tick check box to enable font outline and use the color picker to pick your desired font outline color.
   • Line Height: Enter your desired line height.
   • Outline Width: Enter your desired outline width.
6. Move: To move the text box, click on it, the cursor will change to four arrows cursor , click on it, hold, and then drag it to the desired location.
7. Rotate: To rotate the text box; just click and drag the top square handle, the mouse cursor will change to a crosshair , move right or left to rotate the text box.
8. Resize: To resize the text box keeping aspect ratio; hold down the Shift key, click and drag the square handles that appear in the corners. To reform text box without keeping aspect ratio; click and drag one of the blue square handles toward the middle of the text box to make it smaller, drag away from the text box to make it larger.
9. Click SAVE editing to save all the above settings.

Free-Hand Drawing Tool – How To Use

What is freehand drawing?

A free-hand drawing is a style of drawing made without the use of guiding or measuring instruments, such as a ruler or engineering drawing tools.

To start hand drawing; select your desired brush from the options panel, then simply click anywhere on the image and drag the mouse without releasing the mouse button.

Before you start drawing, you must set up the brushes setting you want. Those settings will not be changeable afterwards. Don’t forget to save your file after you are done, otherwise, the drawing will not be preserved.

Setting Up Your Brushes

Important Note: The following settings apply to all brushes, so if you want to use other new setting, edit your setting and save it.

1. Click the Drawing tab in the left sidebar (3rd option tab). A list of drawing brushes will be displayed in the options panel.
2. Select your desired brush, a brush setting panel will pop up with three options:
   • Brush Thickness: Use the slider to set up brush width (min=1 max=100).
   • Color: Use the color picker to pick your desired brush color.
   • Shadow: By default, the shadow is disabled, use the shadow property toggle switch to enable and disable shadow.
   • Click on the switch to enable shadow and it’s four options:
     • Blur:  Use the slider to set up shadow blur (min=1 max=100).
     • Offset X: Use the slider to set up shadow offset X (min=1 max=100).
     • Offset Y: Use the slider to set up shadow offset Y (min=1 max=100).
     • Color: use the color picker to pick your desired shadow color.
   • Click SAVE editing to save all the above settings.
3. To start hand drawing; select your desired brush from the options panel, then simply click anywhere on the image and drag the mouse without releasing the mouse button.
4. The drawing will be added to the canvas and a new layer will be added to the Layers panel. You can hide/show, delete and lock that layer directly from the Layers Panel. To know how to use and manage layers, refer to Layers Management.
5. Move: To move your drawing work; click on it, the cursor will change to four arrows cursor , hold, and then drag it to the desired location.
6. Rotate: To rotate your drawing work; just click and drag the top square handle, the mouse cursor will change to a crosshair , move right or left to rotate your drawing.
7. Resize: To resize your drawing work, keeping aspect ratio; hold down the Shift key, click and drag the square handles that appear in the corners. To reform drawing box without keeping aspect ratio; click and drag one of the square handles toward the middle of the drawing work to make it smaller, drag away from the drawing work to make it larger.

Shapes Tool – How To Use

You can use the Shape tool to add shapes like; Circle, Rectangle, Triangle, Ellipse, and Polygon. Moreover, you can add multiple shapes to your image to create a variety of geometric shapes using combinations from the existing shapes.

How to Add Shapes

1. Click the SHAPES tab in the left sidebar, (5th item tab). All shapes are listed in the Options Panel.
2. Click on the shape you want to add, a black background shape will be added in the middle of the canvas, and a new layer will be added to the Layers panel. You can hide/show, delete and lock that layer directly from the Layers Panel. To know how to use and manage layers, refer to Layers Management.
3. The setting panel will show up with the following options:
   • In the Editing Panel, at the first row, will find three buttons; Image, Gradient and Color, these buttons are used to add a background image or a background color to the selected shape. Best practice is leaving these three buttons now, and go down to the next options.
   • In the case of Rectangle and Triangle, there are three options:
     • Height, Opacity and Width: Now enter your desired width and height in pixels, and set the opacity you like (0.1-1).
   • In the case of Circle, there are two options:
     • Opacity and Radius: Set the opacity you like (0.1-1), and enter your desired radius.
   • In the case of Ellipse, there are two options:
     • Horizontal Radius and Vertical Radius: enter your desired horizontal and vertical radiuses.
   • In the case of Polygon, there is one options:
     • Opacity: Set the opacity you like (0.1-1)
   • Now: you have created your shape with your desired settings.
   • Move: To move the shape; click on it, the cursor will change to four arrows cursor  , hold, and then drag it to the desired location.
   • Rotate: To rotate the shape; just click and drag the top square handle, the mouse cursor will change to a crosshair , move right or left to rotate the shape.
   • Resize: To resize the shape keeping aspect ratio; hold down the Shift key, click and drag the square handles that appear in the corners. To reform the shape box without keeping aspect ratio; click and drag one of the square handles toward the middle of the image to make it smaller, drag away from the shape to make it larger.
   • Now: It’s the right time to use these three options which we left before (Image, Gradient and Color):
     • Image: Click on the Image button, a Texture Images Sheet will slide up at the bottom of the workspace, contains a collection of background texture images. Use the slider to walk through and click the background texture you like to add to your selected shape.

Note that there is an Upload button at the left side of the Images Sheet; you can use it to upload your own photo, image, textures or any graphic design.

1. • • Gradient: Click on Gradient button, a Gradient Images Sheet will slide up at the bottom of the workspace, contains a collection of gradient background images. Use the slider to walk through and click the gradient background you like to add to your selected shape.
     • Color: Color button can be used to add a color to your selected shape background; click on the color palette to select your desired color, or enter the color number directly under the palette, now your selected shape will have your desired color.
   • Border: By default, the border is disabled, use the border property toggle switch to enable and disable border.
   • Click on the switch to enable border and it’s two options:
     • Color: To color your border; click on the color palette to select your desired color, or enter the color number directly under the palette.
     • Width: Enter your desired border width in pixels.
   • Shadow: By default, the shadow is disabled, use the shadow property toggle switch to enable and disable shadow.
   • Click on the switch to enable shadow and it’s four options:
     • Blur:  Use the slider to set up shadow blur (min=1 max=80).
     • Color: Use the color picker to pick your desired shadow color.
     • Offset X: Use the slider to set up shadow offset X (min=1 max=100).
     • Offset Y: Use the slider to set up shadow offset Y (min=1 max=100).

Draw Polygon – How To Use

Polygon Instructions

1. Click on the canvas where you want to start the polygon edge.
2. Drag your mouse.
3. Click again where you want to end the edge.
4. Repeat to add more edges.
5. Hit escape from your keyboard to finish.

Apply Effects – How To Use Filters To Apply Effects

Applying amazing filters has never been so simple; just one click. Many beautiful and expressive filters are available to apply to your images such as; Grayscale, Invert, Sepia, Remove White, Brightness, Noise, Gradient, Pixelate, Sharpen, Blur, Emboss, Tint, Multiply and Blend.

1. Click the FILTERS tab in the left sidebar, (4th item tab). All the filters are sorted in the Options panel on the left side. Use the scrollbar to reach all filters. Some filters have specific setting options for best control.
2. Click on the filter you want to apply, the effect will be applied instantly. You can apply more than one filter.
3. Click on the X icon to remove the filter. Click on the Gear icon to change filter setting options.
   Using multi-filters can offer a huge number of possibilities for the perfect image creation.

Design Collection – How To Use

At the top of the Header Maker interface, you will find a button Design Collection. This collection contains a will selected and categorized header images to help you make your job easy when you start to create your own Facebook Cover, so it’s better than to start from scratch.

1. Select your new header image category from the menu, select your desired one, right click and save to your computer.
2. Click OPEN button on the top panel, a create/upload dialog box will show up in the middle of the workspace.
3. Click “Upload From Computer”, and start uploading your saved header image to the canvas, it will show up in the dialog box. To confirm, click OPEN. The header image will be added in the middle of the canvas and a new layer will be added to the Layers panel.
4. Make your desired change and editing, when finished, download your new Header to your computer. Done!

Stickers Tool – How To Add Stickers To Spice Up Your Header Design

Unique collection of SVG Vector Stickers and PNG Stickers, which is beautiful and useful for a large variety of designs.

1. Click the STICKERS tab in the left sidebar, (6th item tab). All the stickers are sorted into many folders in the Options panel on the left side. Each folder has a specific category for easier browsing.
2. Click on the sticker you want to add, the sticker will be added in the middle of the canvas and a new layer will be added to Layers panel. You can hide/show, delete and lock that layer directly from the Layers Panel. To know how to use and manage layers, refer to Layers Management.
3. The setting panel will show up with other options:
   • Opacity: use the slider to set it up (min=0 max=1).
   • Color: If the color option exists, use the color picker to pick your desired sticker color.
4. Move: To move a sticker; click on it, the cursor will change to four arrows cursor , hold, and then drag it to the desired location.
5. Rotate: To rotate a sticker; just click and drag the top square handle, the mouse cursor will change to a crosshair , move right or left to rotate the sticker.
6. Resize: To resize a sticker keeping aspect ratio; hold down the Shift key, click and drag the square handles that appear in the corners. To reform a sticker box without keeping aspect ratio; click and drag one of the square handles toward the middle of the sticker to make it smaller, drag away from the sticker to make it larger.

How To Preserve Your Work For Further Editing?

When you finished your header design, you may save the file in jpg, png or JSON format, but if you have not finished your work yet and would like to complete later, or you want to preserve the Header Maker status to be able to modify your design in the future, follow the next steps:

1. Save your design in json format in your computer, so all your data structures and objects/layers will be stored in that file for further editing.
2. Later on, when you want to edit or complete your work; open Header Maker, upload the JSON file through ‘Upload from computer’ in the Create/Upload/URL dialog box, so your json file will be uploaded into the Header Maker.

You will find your work preserved as it was when you save it to json format. It’s exactly as saving PSD file in Photoshop … Great!
 

GENERAL NOTES