{"id":28198,"date":"2023-04-26T16:22:51","date_gmt":"2023-04-26T23:22:51","guid":{"rendered":"https:\/\/www.podfeet.com\/blog\/?p=28198"},"modified":"2023-04-26T16:22:51","modified_gmt":"2023-04-26T23:22:51","slug":"popframe","status":"publish","type":"post","link":"https:\/\/www.podfeet.com\/blog\/2023\/04\/popframe\/","title":{"rendered":"Make Your iPhone Screenshots Stand Out with PopFrame"},"content":{"rendered":"

The Problem to be Solved<\/h3>\n

You may have noticed that I take a lot of screenshots. I use them in my blog posts, I send them to my friends and family in messaging apps to teach them how to do things, I post them to services like Mastodon and Slack, and I send screenshots to developers when I need to ask a question. I create screen recordings too from the iPhone for all of the same reasons.<\/p>\n

Frankly, though, Screenshots on iPhone look silly. Now that the phones are tall and skinny, screenshots look out of proportion and like they\u2019re missing something. The one thing that can make them look better is to put a bezel frame around them that mimics the physical frame of an iPhone.<\/p>\n

I\u2019ve experimented with so many different methods to do this and they all had their drawbacks. I\u2019ve tried Shortcuts made by people who are very good at it, but they always go stale when a new version of iPhone comes out.<\/p>\n

My beloved Affinity Photo comes with templates for iPhone (and other device) frames, but It\u2019s really stale – the latest it has is the iPhone XS! Apple lets you download their official bezels<\/a>, and I\u2019ve dropped them into Affinity Photo and then tried to resize my screenshots on a layer under the bezel frame. At best it\u2019s tedious, time-consuming, and error-prone. At worst, I can never quite get them aligned properly.<\/p>\n

For ScreenCastsOnline work, we do use the official bezel frames and align them under the video in ScreenFlow, but the more recent ones don\u2019t work properly. If the video and frame are aligned and sized correctly, there are wee tiny corners of the video sticking out from under the frame. We have to do some real shenanigans to fix it every single time.<\/p>\n

\"Tiny
Tiny Corner Artifact in ScreenFlow<\/figcaption><\/figure>\n

PopFrame<\/h3>\n

Every year or so I hunt for a new solution to this annoying problem, and this time my hunt was rewarded by a fantastic tool called PopFrame for iPhone in the App Store<\/a>. In literally seconds<\/em> I can add a frame to a screenshot of my iPhone.<\/p>\n

<\/p>\n

\"PopFrame
PopFrame in the App Store<\/figcaption><\/figure>\n

<\/a><\/p>\n

The process to put a frame on a screenshot with PopFrame could not possibly be easier. Take a screenshot by holding down the volume up and side buttons, and save it to your Photos Library. Launch PopFrame and tap the big plus button on the screen.<\/p>\n

After giving PopFrame access to your Photos Library, select your screenshot. Almost immediately you\u2019ll see your screenshot with a perfect iPhone frame around the image. It will be beautifully displayed on a lovely blurred background created from the screenshot.<\/p>\n

That\u2019s it. That\u2019s all you have to do. PopFrame doesn\u2019t even ask you which iPhone you used for the screenshot \u2026 it just works.<\/p>\n

\"PopFrame
PopFrame Main Window Captured in PopFrame<\/figcaption><\/figure>\n

If you\u2019re happy with the effect, tap the share icon and go on your merry way. But PopFrame has a lot more options to tailor the image to be even more interesting.<\/p>\n

Backgrounds<\/h3>\n

After PopFrame adds the frame and background to your image, you\u2019ll see four buttons right below it.<\/p>\n

\"PopFrame
PopFrame Showing 4 Buttons to Modify Image jpeg<\/figcaption><\/figure>\n

The first button allows control of the background. I mentioned that by default, the background is a blurry version of the screenshot itself. You can also choose from a bunch of different gradient backgrounds that look very Apple-y. If you have no joy in your life, you can choose a dark grey, black, or white background. You can also choose to have a transparent background if you need to drop the image onto an existing background.<\/p>\n

If you want to get back to the blurry image background, look for an icon representing an image – the classic mountains with the sun. Most screenshots I take are of app interfaces, and the blurry image background isn\u2019t very interesting, but I tried it with a screenshot of a photo in my Photos Library of some purple and orange flowers with green leaves. The background became a soft blur of purple, orange, and green hues. It\u2019s quite a lovely effect.<\/p>\n

\"Popframe
Blurry Background (kind of a meta screenshot)<\/figcaption><\/figure>\n

Size<\/h3>\n

You can control the size and shape of your image using the button that has double arrows going outwards.<\/p>\n

By default, PopFrame creates a square image that\u2019s 3000 x 3000 pixels. Within the double arrow control, you can choose a tall portrait orientation version that\u2019s 1620 x 2880, or a nice wide image at 4320 x 2430. That\u2019s perfect for a slide deck because it\u2019s a 16:9 aspect ratio.<\/p>\n

There\u2019s also an option to show a square closeup of the screenshot in its frame – like say just the top of the phone. If you choose this option, you can slide the image up and down until you\u2019re showing just the part of the screen you desire. As you slide the image, you\u2019ll get some haptic feedback as it jumps between the 5 different crops you can choose from. My explanation sounds clumsy but it\u2019s really slick.<\/p>\n

\"PopFrame
PopFrame Showing Just Part of the iPhone Screen<\/figcaption><\/figure>\n

If you take a screenshot with your iPhone in landscape mode, PopFrame adapts beautifully by offering you a square or landscape version of your screenshot with a background.<\/p>\n

Drop Shadow<\/h3>\n

If you choose one of the beautiful gradient options or one of the joyless solid-color backgrounds, you can add a drop shadow to the iPhone. The third button has a circle cut in half with a shadow, and it invokes a little slider. As you drag the slider to the right or left, it moves the shadow to that side. The first detent in the slider is a nice soft shadow, while the end detents are a crisp shadow. If you have no joy in your life, put the slider in the middle to remove the shadow entirely.<\/p>\n

Frame Color<\/h3>\n

The final button under the image shows a little phone frame. This button allows you to change the color of the iPhone frame itself to match your actual iPhone or the iPhone you wish you had. If you do have joy in your life and just got that brand-new yellow iPhone, you can have the frame on your screenshot match your favorite color.<\/p>\n

Pricing<\/h3>\n

Now I\u2019m going to tell you the crazy part. Everything I\u2019ve described for screenshots is completely free with PopFrame. I would definitely have paid $5 for this app. Ramik Sadana, the developer of PopFrame, does have one way to make money and it\u2019s by charging a tiny amount to add frames to screen recordings.<\/p>\n

\"PopFrame
PopFrame Pricing<\/figcaption><\/figure>\n

If you want to add all this frame beauty to your screen recordings on your iPhone, it will cost you 3 credits for each video. Ramik gives you 10 credits for free just so you can try it out. If you need more credits, you can buy 15 for a dollar, 30 for two bucks, or 45 for three bucks. I\u2019m not 100% sure I\u2019ll need to make 15 videos, but I wanted to pay Ramik so I bought the fancy 45 credit option for $3.<\/p>\n

Video<\/h3>\n

But the story gets even better. Let\u2019s say you can\u2019t afford to pay even this small sum for your screen recordings to look snazzy. Ramik has an option he calls, \u201cPromote the app\u201d, which watermarks your video with a little tag on the side of the iPhone that says \u201cPopFrame App\u201d. I thought that was really cool.<\/p>\n

In addition to the options I described for making your screenshots look impressive, when you import a video to PopFrame you also get the option to add touch points to the screen in the video. This is one of the most annoying things about screencasting for iOS – showing people exactly what you tapped on within a video.<\/p>\n

With PopFrame you get a little slider to scroll through the video, and then you can tap in different spots to show where you tapped. If you didn\u2019t tap quite right, there\u2019s a little trash can to delete the touch point. Couldn\u2019t be easier.<\/p>\n

Bottom Line<\/h3>\n

Expect to see iPhone screenshots looking a lot prettier than they ever did before, thanks to PopFrame. Check it out in the App Store for the grand price of zero<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

The Problem to be Solved You may have noticed that I take a lot of screenshots. I use them in my blog posts, I send them to my friends and family in messaging apps to teach them how to do things, I post them to services like Mastodon and Slack, and I send screenshots to […]<\/p>\n","protected":false},"author":1,"featured_media":28209,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[147],"tags":[665,5841,70,2320,2286],"class_list":["post-28198","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-posts","tag-backgrounds","tag-gradient","tag-iphone","tag-screen-recording","tag-screenshot"],"jetpack_featured_media_url":"https:\/\/www.podfeet.com\/blog\/wp-content\/uploads\/2023\/04\/PopFrame-Showing-Just-Part-of-the-iPhone-Screen-1040x520-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts\/28198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/comments?post=28198"}],"version-history":[{"count":3,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts\/28198\/revisions"}],"predecessor-version":[{"id":28210,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts\/28198\/revisions\/28210"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/media\/28209"}],"wp:attachment":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/media?parent=28198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/categories?post=28198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/tags?post=28198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}