Documentation for Beginners and Advanced Users

Well documented step-by-step to create your own Facebook Cover Photo Design

Table of Contents

Interface and Functions

With a modern technologies image manipulation tools, Facebook Cover Maker can do almost anything you can imagine when you design your favorite Facebook cover!

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

Let’s get into it!

Facebook Cover Maker Screenshots

interface-and-ianels

 

texture-images-sheet

 

gradient-images-sheet

Launch Facebook Cover Maker

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

1.  CREATE NEW

This is your starting point to activate  Facebook Cover Maker to make a new cover, click Create New, Canvas will show up in the workspace. To start managing and editing your design; click on the red edit circular icon (on the left side of the Top Panel ). 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 Facebook Cover using all available tools.

2. Upload From Computer

If you want to add an image to your design, click on Upload From Computer, your new image will show up in the dialog box. To confirm the image, click OPEN to add your image to canvas.

So Whenever you want to add an image; click the OPEN button (on the right side of the Top Panel) and then click Upload From Computer.

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 and Upload From Computer. For more details, refer to launch Facebook Cover 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.
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 an object to your canvas, a new layer will be added to the 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, the 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).

Crop Photo

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!
Try it Yourself

Rotate Photo

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 to rotate, 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 crosshair-icon, move right or left to rotate the image.
    3. When you are finished, click APPLY button. You’re done!
Try it Yourself

Resize Photo

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 cover 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!
Try it Yourself

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

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 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 specific filter effect with Highlight, for an image, you can change the canvas background color to change the Highlight Color.
Try it Yourself

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

Add A New Photo 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 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 managing and editing 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 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 squares handles toward the middle of the sticker to make it smaller, drag away from the image to make it larger.
Try it Yourself

Add Text To Photo

  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 checkbox to enable background and use the color picker to pick your desired font background color.
    • Outline: Tick checkbox 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 crosshair-cursor-icon, 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 squares 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

Free-Hand Drawing

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 afterward. 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 settings, 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, 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 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 squares 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

Add Shapes To Photo

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 option:
      • 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 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 squares 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 on 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, 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, 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

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

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

The Design Collection

At the top of the Facebook Cover Maker interface, you will find a button Design Collection. This collection contains a will selected and categorized photos and 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 photo category from the menu, browse the photos and 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 photo to canvas. The photo will show up in the dialog box. To confirm, click OPEN. The photo 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 Facebook Cover to your computer. Done!
Try it Yourself

Add Stickers To Photo

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 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 squares handles toward the middle of the sticker to make it smaller, drag away from the sticker to make it larger.
Try it Yourself

Preserve Your Work For Further Editing?

When you finished your Facebook Cover 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 Facebook Cover 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 Facebook Cover Maker, upload JSON file through Upload From Computer in the Create/Upload/URL dialog box, so your JSON file will be uploaded into the Facebook Cover 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 the workspace.
2. To show Setting Panel for a 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, TextBox, Sticker, Shape, … ).