Table of Contents



Interface and Functions

With a 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 Screenshot

 


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 to your computer

You can also start by clicking on ‘Upload to your 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 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 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.

What is JSON File?
JSON file is a file that stores simple data structures and objects. It contains data in a standard data interchange format which is lightweight, text-based, and human-readable.


Layers/Objects Management

  • Whenever you add any 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 object.

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

3. Lock Icon: 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, 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.

Hint: To enlarge your screen, you can use your browser keyboard shortcuts Ctrl and + (Windows, Linux, and Chrome OS) and ⌘ and + (Mac).


How To Use The Crop Tool

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 editing panel, set your cropping ‘Width’ and ‘Height’ in pixels.
  3. You can manually adjust 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!

Try it Yourself


How To Use The Rotate Tool

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 rotate, click on Rotate tool in the options panel.
  2. In the editing 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, mouse will change to a crosshair crosshair-icon, move right or left to rotate the image.
    3. When you are finished, click APPLY button. You’re done!

Try it Yourself


How To Use The Resize Tool

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. In case of main image, 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 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 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!

Try it Yourself


How To Use Round Corners Tool

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 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.
NOTE: In different browsers such angles will look different. If you need perfectly round corners, you can use Firefox or IE.

Try it Yourself


How To Use Color Tool

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 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 for using Color Tool:

  1. When your image doesn’t fill the entire canvas, you can fill the background with a selected color.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 colored background, you can use canvas background color, and then you can overly any objects you like for your design.
  3. When using specific filter effect with Highlight, for an image, you can change the canvas background color to change the Highlight Color.

Try it Yourself


How To Use Merge Objects/Layers

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.

Try it Yourself


How To Add A New Image To Your Design

  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 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 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 image; just click and drag the top square handle, mouse cursor will change to a crosshair crosshair-cursor-icon, 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.

Try it Yourself


How To Use Text Tool

  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 in five topics; Serif, Sans Serif, Display, Handwritting 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 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 text box; just click and drag the top square handle, mouse cursor will change to a crosshair crosshair-cursor-icon, move right or left to rotate text box.
  8. Resize: To resize 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.
NOTE: Under text options panel, there is a font family pagination and by default; font align center is active.

Try it Yourself


How To Use Free-Hand Drawing Tool

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 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, 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 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, mouse cursor will change to a crosshair crosshair-cursor-icon, 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.

Try it Yourself


How To Use Shapes Tool

You can use the Shape tool to add basic 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 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 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 case of Circle, there are two options:
      • Opacity and Radius: Set the opacity you like (0.1-1), and enter your desired radius.
    • In case of Ellipse, there are two options:
      • Horizontal Radius and Vertical Radius: enter your desired horizontal and vertical radiuses.
    • In 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, mouse cursor will change to a crosshair crosshair-cursor-icon, 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 Image button, an 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.

      • Gradient: Click on Gradient button, an 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 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, 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 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, 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).

Try it Yourself


How To Draw a Polygon

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.

Try it Yourself


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.
NOTE: Filters can only be applied to images and no other objects. If you want to apply filters to other objects, you must first merge the object with the image, and then apply filters to all merged layers.

Try it Yourself


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, mouse cursor will change to a crosshair crosshair-cursor-icon, 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.

Try it Yourself


How To Preserve Your Work For Further Editing?

When you finished your header design, you may save 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 edit or complete your work; open Header Maker, upload 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
1. During your editing, whenever you want to move Setting Panel; click on it, hold, and then drag it to the desired place on workspace.
2. To show Setting Panel for specific object, click on its layer in the layers panel.
3. To hide Square Handles and Setting Panels; Click anywhere on the workspace .

TIP: You can use your computer arrow keys to move any object (Image, Text Box, Sticker, Shape, … ).


Need Help?
Whenever you need any help; click the HELP button in the Top Panel which contains most common functions buttons in Header Maker.