starred/ScreenToGif

Fork 0

mirror of https://github.com/NickeManarin/ScreenToGif.git synced 2026-04-25 15:15:51 +03:00

[GH-ISSUE #576] Feature Request - Adding Custom Border Image #472

New issue

Closed

opened 2026-02-26 09:31:33 +03:00 by kerem · 5 comments

kerem commented

2026-02-26 09:31:33 +03:00

Owner

Originally created by @SethDocherty on GitHub (Jan 6, 2020).
Original GitHub issue: https://github.com/NickeManarin/ScreenToGif/issues/576

I currently make a bunch of GIFs for our documentation that visualizes workflows and often times I need to add a border, say a phone, tablet, or monitor (something like this). I would essentially like to throw my animated screen capture right into the screen of the image so it looks something like this.

I currently have a clunky work-around where I take my capture -> overlay it into the image -> record the capture again with the new border. It would be nice if I could add a custom image border to my screen capture in the the project editor, through the Border tool under the image tab.

Is this something the is currently possible and I'm not in the right menu?

Originally created by @SethDocherty on GitHub (Jan 6, 2020). Original GitHub issue: https://github.com/NickeManarin/ScreenToGif/issues/576 I currently make a bunch of GIFs for our documentation that visualizes workflows and often times I need to add a border, say a phone, tablet, or monitor (something like [this](https://www.pinclipart.com/picdir/middle/365-3656433_computer-monitor-with-shadow-computer-screen-border-clipart.png)). I would essentially like to throw my animated screen capture right into the screen of the image so it looks something like [this](https://commercialdev.maps.arcgis.com/sharing/rest/content/items/099009e2341240dd95e943e5d690f46d/resources/1568054478649.gif?token=AIe0nI9nFAUibLhT-INk_6amRAORrR8lcqG-DBUWfiEIyJcVqPeUT4uNAN4x6f8DHIiTFkmuPPxIiOigZ8hk3VoKeebKX6KduJmY3YQ6QpN2-kZsEny6CqyhoiZ2GkG1yKgBd3np_n2QSwjQTlx7uxTBpRvIPNSwsFDNRFDp46YuMaozc7HDumL3Vcoo-uvEDhphrVtSegJfXdofXQvhqUgXtYNptHHJdi4eRvVAPto.). I currently have a clunky work-around where I take my capture -> overlay it into the image -> record the capture again with the new border. It would be nice if I could add a custom image border to my screen capture in the the project editor, through the **Border tool** under the image tab. Is this something the is currently possible and I'm not in the right menu?

kerem

2026-02-26 09:31:33 +03:00

closed this issue
added the
🔷Enhancement
label

kerem commented

2026-02-26 09:31:33 +03:00

Author

Owner

@NickeManarin commented on GitHub (Jan 7, 2020):

There's an easier way to accomplish this:

Use the Border feature to expand the canvas (by using a negative value).
Use the Watermark feature to add a PNG image of a complex border, having the middle part transparent. Set the watermark to fill the canvas, as 100% opacity.

(You can use #551, since it allows you to add a smaller value when trying to expand the canvas using the Border feature)

@NickeManarin commented on GitHub (Jan 7, 2020): There's an easier way to accomplish this: 1. Use the Border feature to expand the canvas (by using a negative value). 2. Use the Watermark feature to add a PNG image of a complex border, having the middle part transparent. Set the watermark to fill the canvas, as 100% opacity. (You can use #551, since it allows you to add a smaller value when trying to expand the canvas using the Border feature)

kerem commented

2026-02-26 09:31:33 +03:00

Author

Owner

@SethDocherty commented on GitHub (Jan 7, 2020):

Thanks for the suggestion! I gave it a quick try with an existing GIF using this image but it didn't quite work as expected.

Here are a couple road blocks:

I'm only able to set the border feature value to a maximum of -20.
The width of the watermark feature image I'm using is larger than the border value set. Part of the image is hanging beyond the canvas and is cut off when exporting. Here is a screen capture for reference:

I tried running the preview version per #551 but it kept opening the version that's installed on my machine.

Another approach is to set my capture area beyond the extent of what I'm trying to capture and then add in the image as a watermark feature. This idea only works if what I'm capturing is not full screen.

@SethDocherty commented on GitHub (Jan 7, 2020): Thanks for the suggestion! I gave it a quick try with an existing GIF using this [image](https://www.freeiconspng.com/uploads/pc-computer-screen-png-21.png) but it didn't quite work as expected. Here are a couple road blocks: - I'm only able to set the border feature value to a maximum of -20. - The width of the watermark feature image I'm using is larger than the border value set. Part of the image is hanging beyond the canvas and is cut off when exporting. Here is a screen capture for reference: ![image](https://user-images.githubusercontent.com/18409326/71906650-75a68b80-3138-11ea-95d0-d75f62a5d9b1.png) I tried running the preview version per #551 but it kept opening the version that's installed on my machine. Another approach is to set my capture area beyond the extent of what I'm trying to capture and then add in the image as a watermark feature. This idea only works if what I'm capturing is not full screen.

kerem commented

2026-02-26 09:31:33 +03:00

Author

Owner

@NickeManarin commented on GitHub (Jan 20, 2020):

I'm only able to set the border feature value to a maximum of -20.

That's why I offered you to use the preview version #551, it should run normally (it still says v2.19.3, but it's actually the new version).

But you could also apply the negative border multiple times to get the desired canvas size.

@NickeManarin commented on GitHub (Jan 20, 2020): > I'm only able to set the border feature value to a maximum of -20. That's why I offered you to use the preview version #551, it should run normally (it still says v2.19.3, but it's actually the new version). But you could also apply the negative border multiple times to get the desired canvas size.

kerem commented

2026-02-26 09:31:33 +03:00

Author

Owner

@SethDocherty commented on GitHub (Jan 21, 2020):

@NickeManarin, I was able to finally get the preview version to work and it works exactly as you mentioned. The trick I learned is to overshoot your expected canvas size -> Apply the picture and fit ->Crop out canvas to desired size. Below is the final result

The only minor annoyance is the white line running down the right side. I noticed that was appearing after applying the border. Overall, I'm happy with the results and would consider this closed.

Thanks again for your help.

@SethDocherty commented on GitHub (Jan 21, 2020): @NickeManarin, I was able to finally get the preview version to work and it works exactly as you mentioned. The trick I learned is to overshoot your expected canvas size -> Apply the picture and fit ->Crop out canvas to desired size. Below is the final result ![Gif With Frame2](https://user-images.githubusercontent.com/18409326/72816761-a7d6e380-3c36-11ea-8e5b-bd5a10b6e2c1.gif) The only minor annoyance is the white line running down the right side. I noticed that was appearing after applying the border. Overall, I'm happy with the results and would consider this closed. Thanks again for your help.

kerem commented

2026-02-26 09:31:33 +03:00

Author

Owner

@NickeManarin commented on GitHub (Jan 21, 2020):

Nice! I'll investigate the white line.

@NickeManarin commented on GitHub (Jan 21, 2020): Nice! I'll investigate the white line.

kerem referenced this issue

2026-03-01 18:48:04 +03:00

[GH-ISSUE #472] Program usage examples #1759

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/ScreenToGif#472

No description provided.

Rows
Columns