Learn Designer Tutorials

Logo Design, Watermarks, And Website Graphics Made Easy

By Rach DePaoli | Designer Tutorials What’s New

The beginning of creativity always starts with a blank canvas. This might be up for debate, but one of the best feelings when you’re a creative is starting with a blank sheet of paper and an idea. Whether you are writing a piece, creating an illustration, painting for fun, or sketching a logo for your latest business venture, a blank page holds every opportunity imaginable.

In the digital design world, having a transparent canvas to create on is essential for designing watermarks, logos, and web graphics. The transparent background allows for a super smooth and seamless transition when placing the graphics you create onto business cards, photos, and website backgrounds of all colors. Just look at the difference between these designs created with transparent backgrounds versus a white background. Keeping the background transparent means you’ll be able to place your graphics anywhere without having to worry about matching the canvas to the background.

how to design png graphics in BeFunky

Design templates with transparent backgrounds are usually a feature that is reserved for high-end programs or extensive and complicated work-arounds inside of a platform. Thankfully, with BeFunky, you’ve got the option to turn any design template into a transparent canvas in one click! We’ve had this feature available in our Photo Editor as a photo background eraser, but now that you’ll be able to use it in the Designer, it’s easier than ever to create professional-quality graphics that will make people wonder whether or not you hired someone with a design degree.

When To Use A Transparent Background Canvas

Transparent backgrounds give you the option of creating a graphic that you can place on top of another image or project, without having to keep an opaque background behind your graphic (hello 90’s designers!). In the most simple terms, it allows you to place a file on top of another file, much like a sticker with a clear background. Here’s where transparent backgrounds come in handy when it comes to design:


Think of a logo as the foundation of a brand. You’ll find logos places on websites, business cards, packaging, letterhead, and basically any company-related asset.

how to place logo on business card

With BeFunky, it’s super easy to design logos that look ultra-professional, and with the new transparent canvas feature, your logo design can easily be placed on anything.


Whether you’re a professional photographer, blogger, or business, watermarks are essential for claiming your own imagery and preventing the theft of photos you’ve created. Consider it the equivalent of an artist signing their artwork. A watermark can be anything from a logo to a signature or custom design.

how to watermark photos in BeFunky

Once you’ve created a watermark on a transparent canvas and saved it as a .png, you can use BeFunky’s Photo Editor to add your watermark to photos as a streamlined part of your workflow. It’ll save you loads of time if you’re applying the same watermark to multiple images!

Blog And Website Graphics

For everything from a custom blog header to designing buttons for your website, designing on a transparent background will allow you to upload your graphics to the site seamlessly. The transparent background will blend perfectly with whatever color the website is, and you’ll never have to worry about having a hideously noticeable box around the graphic (like you would if you designed on a solid-colored background, even pure white).  

how to create a blog header logo in BeFunky

Whatever you’re designing on a transparent canvas, once you save your design as a .png file, it’ll be ready to upload as a layer in any of your future projects. And the best part is, once you upload your logo, watermark, or website graphics to BeFunky’s Image Manager, it’ll always be available for using in any project, whether you’re in the Photo Editor, Graphic Designer, or Collage Maker! The universal Image Manager remembers it every time (well, until you delete the design from the Image Manager, in which case you’ll have to re-upload the file). Perfect for simplifying your workflow!

How To Create A Design With A Transparent Background

Once you’ve got your design inspiration in mind, it’s time to head to BeFunky’s Designer to start creating on a transparent design canvas. For the sake of this tutorial, we’ll start by creating a watermark that you can place over anything from photos to business cards. Whether you’re creating a logo or web graphic, the same steps apply.

Step 1: Choose A Perfectly Sized Template

Once you’re in BeFunky’s Designer, click on the Templates tab in the menu on the left and select a template from the Blank Templates category. You’ll find all the blank templates you need in a variety of sizes, so choose the one that will fit your project best.

blank templates in BeFunky Designer

If you’re working with a smaller canvas and need to get a closer look, click the Zoom slider at the bottom of the Designer and adjust it by clicking and dragging. For single digit increments, click on the slider and adjust the size with the left and right arrow keys on your keyboard.

Step 2: Create A Transparent Background For Your Template

Once you select the canvas size you want, select the Customize tab from the menu on the left and then select the first of the colored tiles.

transparent design templates in BeFunky Designer

Once the Color Palette menu appears, select the Transparent option (the white square with the red dash through it) and watch your canvas transform into a grey and white checkerboard. In other words, it’ll be a transparent background.

Step 3: Add Text

For word-driven designs, click on the Text tab in the menu on the left, followed by the Add Text button. You’ll be presented with a textbox that you can click on and start typing. To adjust the font, click on the font name in the Text Properties toolbar that appears whenever you’re working within a textbox and search the vast library of free fonts to use that have been hand-curated by our own Graphic Designers (they know a thing or two about typography!).

If you’ve got fonts that you’ve downloaded to your Computer, you can use as many as you’d like in BeFunky! Use the Font Search bar to type in the full name of the font to find it, or simply drag-and-drop the font file from your Computer into BeFunky’s interface. It’ll automatically upload and remember your font for future projects.

how to create watermark with transparent background in BeFunky

Pro Tip: For smaller designs, be sure to choose a font that isn’t too complicated to read at a smaller size.

To customize the text even further, the Text Properties toolbar presents you with options for changing the color of your text, the color of the textbox, the spacing between letters, blend mode, and more! There are even options for adding typographical emphasis (like making the text bold, italicized, or underlined) so you can really get your point across.

how to design watermark with png background

Pro Tip: Want to easily adjust the size and rotation of your font? Click and drag the blue circles around the textbox to resize, or use the taller blue circle to rotate the entire textbox!

Step 4: Customize With Graphics

If you want to enhance your design project with graphics, select the Design Elements tab from the menu on the left and search hundreds of graphics to use - from shapes and arrows to food icons, social media buttons, and everything in between! Simply click on the graphic you want to add to your project and it’ll appear on your canvas.

Use the Graphic Properties toolbar that appears to easily change the color of the graphic, adjust the blend mode, move it forwards or backwards in reference to other layers in your project, and more! To move it around your canvas, simply click and drag it to reposition. Notice that snap lines appear whenever you’re repositioning the layers on your canvas. These handy lines will help you locate the center of your canvas as well as precisely align each layer - no more guessing when you’re trying to perfectly line things up!

how to create watermarks in BeFunky Designer

Pro Tip: If you want to make a super precise rotation adjustment to your graphic, hold down the SHIFT key while clicking and dragging the taller blue circle around your graphic to rotate it. You will be able to adjust to a 45°, 90° or 180° angle easily and efficiently!

If you’ve customized a graphic and want to duplicate it, simply click on the graphic and press the ‘D’ button on your keyboard to create an exact replica! That way you don’t have to start from scratch every time.

Step 5: Save The File As A .PNG

Once your design is looking perfect and you’re ready to start using it, click the Save button at the top of the Designer. Select the destination on your Computer where you want to store the file, and click the PNG button under Format.

how to create png image files in BeFunky

Saving as a .PNG will keep the background transparent. If you save as a .JPG, the background will remain checkered - not the best look!

Step 6: Start Using Your Design

Once you save your design as a .PNG, you can immediately start using it! For watermarking, open a photo in BeFunky’s Photo Editor and select the Images/Layers tab at the top of the menu on the left. Select the Computer button and upload your saved watermark or icon. It will appear as a thumbnail that you can click and drag to add right onto the image.

add watermarks to photos in BeFunky

From there you can resize it, adjust the opacity, and customize it even further using the Image Properties toolbar!

how to design watermarks in BeFunky

Now you’ll look ultra-professional when it comes to designing logos, watermarks, web graphics, and beyond! Click the link below to get started.

Graphic Design, Simplified.

Photo Editing. Simplified