-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat: new blogpost on screenshots and memes (#37)
* init empty blog post * copy in prev draft * new assets folder for blogs * add title * draft post * update rss * update blog posts * revise * update mistaek image
- Loading branch information
1 parent
1ec874c
commit 252401e
Showing
16 changed files
with
426 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,219 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <link rel="shortcut icon" type="image/png" href="../../assets/img/favicon.png" /> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <title>Quick ’n hacky meme making, for fun and no profit</title> | ||
| <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="main-container blog"> | ||
| <nav class="navbar" role="navigation"> | ||
| @hannahilea: | ||
| <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> | | ||
| <a class="nav-link" href="..">blog</a> | ||
| </nav> | ||
| <h1>Quick ’n hacky meme making, for fun and no profit</h1> | ||
| <p> | ||
| <em>Adapted from a non-programming talk given while at the <a href="https://www.recurse.com/">Recurse Center</a>.</em> | ||
| </p> | ||
| <p> | ||
| A brief tutorial on taking and manipulating screenshots, so that you can quickly have fun making motivational quote images, custom Zulip/Slack emojis, templated memes, goofy “photoshop” composites, and whatever else your heart | ||
| desires. | ||
| </p> | ||
| <figure> | ||
| <img src="assets/cat.png" alt="“I should buy a boat” meme of cat with text that reads “I should make a meme”" /> | ||
| </figure> | ||
| <h2 id="how-to-take-screenshots-quickly">How to take screenshots quickly</h2> | ||
| <p>If you remember one thing from this post, let it be that there is a shortcut for copying a selected region on your screen:</p> | ||
| <div class="blog-table"> | ||
| <table> | ||
| <colgroup> | ||
| <col style="width: 33%" /> | ||
| <col style="width: 33%" /> | ||
| <col style="width: 33%" /> | ||
| </colgroup> | ||
| <thead> | ||
| <tr> | ||
| <th> | ||
| OS<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a> | ||
| </th> | ||
| <th>Copy selection to your clipboard</th> | ||
| <th>Save selection to a file</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td><strong>Mac</strong></td> | ||
| <td><code>command + control + shift + 4</code></td> | ||
| <td><code>command + shift + 4</code></td> | ||
| </tr> | ||
| <tr> | ||
| <td><strong>Windows</strong></td> | ||
| <td><code>windows logo + shift + s</code></td> | ||
| <td><code>windows logo + shift + s</code>, then select “save”</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| <p> | ||
| Hit the selected key combination, then draw a box on your screen around whatever you want to be in the screenshot. That’s it! If you used the “save” option, it’ll save to wherever your default save location is (e.g., your desktop or | ||
| documents or downloads folder); if you used the “clipboard” option, it’ll be saved into your clipboard and ready for you to paste somewhere else. | ||
| </p> | ||
| <p>Go ahead and try it right now:</p> | ||
| <ol type="1"> | ||
| <li>Save a screenshot of the above table to a file (now you can reference it later!)</li> | ||
| <li> | ||
| Copy a screenshot of that table to your clipboard, then paste it<a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a> somewhere: into an email, a text message to your landlord, a Slack thread, a Zoom | ||
| chat, wherever! | ||
| </li> | ||
| </ol> | ||
| <h2 id="how-to-edit-screenshots-quickly">How to edit screenshots quickly</h2> | ||
| <p>Get familiar with your default basic image editor. I’m on Mac, so use the Preview application. Alternatively there’s this online <a href="https://jspaint.app/">MS Paint remake</a> that works pretty well.</p> | ||
| <p>The functions you’ll want to get comfortable with are:</p> | ||
| <ul> | ||
| <li>Cropping</li> | ||
| <li>Adding text—and styling that text (resize, color, font if you’re feeling fancy)</li> | ||
| <li>Bonus: selecting and removing background fills.</li> | ||
| </ul> | ||
| <p>The faster you can do those actions without thinking about them, the easier it will be to respond with an image instead of with text. Here’s an example of me doing a quick edit in Preview:</p> | ||
| <figure> | ||
| <img src="assets/edit.gif" alt="Animated gif of editing a bee image to remove background and add text" /> | ||
| </figure> | ||
| <p>with output</p> | ||
| <figure> | ||
| <img src="assets/bee.png" alt="Image of a bee overlaid with text that reads “I’m a bee”" /> | ||
| </figure> | ||
| <p> | ||
| Go ahead and try a basic edit with your program of choice<a href="#fn3" class="footnote-ref" id="fnref3" role="doc-noteref"><sup>3</sup></a | ||
| >: | ||
| </p> | ||
| <ol type="1"> | ||
| <li>Save a screenshot of a portion of your screen</li> | ||
| <li>Open it in your image editor</li> | ||
| <li>Crop it into a thin rectangle</li> | ||
| <li>Add a line of text that says “hello, I did this” and then turn the text purple and make it fill the whole box.</li> | ||
| </ol> | ||
| <h2 id="what-to-make">What to make?</h2> | ||
| <p>Right, those are the basic skills: taking a screenshot, editing the screenshot. What to do with them?</p> | ||
| <h3 id="motivational-quotes">Motivational quotes</h3> | ||
| <p>Start with a pretty landscape; add a text box with your quote of choice.</p> | ||
| <figure> | ||
| <img src="assets/mistaek.png" alt="Photo of sunset over mountains, with quote reading “computer is mistaek” over top" /> | ||
| </figure> | ||
| <p>Especially delightful for workplace commentary.</p> | ||
| <h3 id="traditional-templated-memes">Traditional templated memes</h3> | ||
| <ol type="1"> | ||
| <li>Using an online meme template site (e.g., <a href="https://imgflip.com/memegenerator/X-X-Everywhere">imgflip</a>), add your text to a given template:</li> | ||
| </ol> | ||
| <figure> | ||
| <img src="assets/screenshots-full.png" alt="Screenshot of imgflip meme template, filled in with contents of the following meme" /> | ||
| </figure> | ||
| <ol start="2" type="1"> | ||
| <li><strong>Take a screenshot</strong> of the updated template. Don’t bother with the “generate meme” or “download” buttons! (They’ll try to make you sign up for stuff, and this way is quicker anyway.)</li> | ||
| </ol> | ||
| <figure> | ||
| <img src="assets/screenshots.png" alt="Toy Story meme with text “screenshots/screenshots everywhere”" /> | ||
| </figure> | ||
| <p>This use-case is especially excellent for rapid-response comments in video chats. Did you know you could paste images from your clipboard directly into a Zoom chat? You can!</p> | ||
| <h3 id="emoji-for-slackzulipetc">Emoji for Slack/Zulip/etc</h3> | ||
| <ol type="1"> | ||
| <li>Save a screenshot of the image you want to upload.</li> | ||
| <li>Crop it down into a square</li> | ||
| <li> | ||
| Bonus: use a “remove background” tool to make the background transparent. Think about whether it will show up in both dark and light modes; if not, add your own background to it first. The simpler the image, the better it will | ||
| read from within your message application. | ||
| </li> | ||
| <li>Upload it into your messaging software. E.g., in Slack, within a workspace go to <code>Tools > Customize Workspace > Emoji</code>; in Zulip, do <code>Settings > Organization > Custom emoji</code>.</li> | ||
| </ol> | ||
| <figure> | ||
| <img src="assets/zulip.png" alt="Screenshot of three custom emojis in a Zulip message: woohoo, pickle, mirror" /> | ||
| </figure> | ||
| <h3 id="composite-images">Composite images</h3> | ||
| <p> | ||
| Save screenshots of a couple images. Open one and remove its background, then copy it into the clipboard. Open the second; paste from the clipboard over top, then resize and move the pasted image until it looks good. Note: “good”, | ||
| not “perfect”. The goal is quick-and-good-enough, not “make it look like a professional Photoshopped this.” | ||
| </p> | ||
| <figure> | ||
| <img src="assets/composite.gif" alt="Animated screenshot of combining a Detroit Tigers hat and a surprise pikachu meme" /> | ||
| </figure> | ||
| <p>What should you make? Put a hat on your friend, put a penguin on a rollercoaster, I don’t know! Whatever suits your mood. Why? Because it is funny.</p> | ||
| <h3 id="other-screenshot-uses">Other screenshot uses</h3> | ||
| <p> | ||
| My primary screenshot selection usage is actually more for taking screenshots of things I want to remember from otherwise ephemeral video call chats: charts, citations, quotes. I also keep a folder on my desktop of things that make | ||
| me happy: comments, praise, and general goofiness from otherwise ephemeral chat situations (Zoom/Slack/group texts, etc). | ||
| </p> | ||
| <p> | ||
| I also like it for responding in digital conversations—a picture is worth a thousand words, etc.<a href="#fn4" class="footnote-ref" id="fnref4" role="doc-noteref"><sup>4</sup></a> Other things I have done with these images: frame it | ||
| and gift it. Put it on a puzzle and sent that puzzle to a friend. Print it in triplicate and tape it all over my team’s meeting room. | ||
| </p> | ||
| <h2 id="with-great-power-comes-great-responsibility">With great power comes great responsibility</h2> | ||
| <p>It should go without saying, but it is important, so I’m going to say it anyway:</p> | ||
| <ol type="1"> | ||
| <li> | ||
| <p><strong>Respect assumptions of privacy!</strong> E.g., no sharing Zoom screenshots of people, slides, or the chat without permission.</p> | ||
| </li> | ||
| <li> | ||
| <p> | ||
| <strong>Be respectful in your choice of meme templates, text, and imagery.</strong> Avoid -isms (<a href="https://www.recurse.com/social-rules#no-subtle-isms">subtle</a> or otherwise), inadvertent microaggressions (such as | ||
| <a href="https://www.teenvogue.com/story/digital-blackface-reaction-gifs">digital blackface</a>), and <a href="https://dictionary.cambridge.org/us/dictionary/english/punch-down">punching down</a>. | ||
| </p> | ||
| </li> | ||
| </ol> | ||
| <h2 id="homework">Homework</h2> | ||
| <ul class="task-list"> | ||
| <li> | ||
| <label><input disabled type="checkbox" checked="" />Read this post</label> | ||
| </li> | ||
| <li> | ||
| <label><input disabled type="checkbox" />Make a doofy image with a screenshot</label> | ||
| </li> | ||
| <li> | ||
| <label><input disabled type="checkbox" />Share it with someone (me, if we know each other irl!)</label> | ||
| </li> | ||
| </ul> | ||
| <p> | ||
| Congrats, now you’re an artist! Put your friend’s profile picture into that historic photo (maybe even more than once??), slap a watch on a loon, make it quick and sloppy<a | ||
| href="#fn5" | ||
| class="footnote-ref" | ||
| id="fnref5" | ||
| role="doc-noteref" | ||
| ><sup>5</sup></a | ||
| > | ||
| and share it and move on. | ||
| </p> | ||
| <section id="footnotes" class="footnotes footnotes-end-of-document" role="doc-endnotes"> | ||
| <hr /> | ||
| <h3 id="footnotes-title">Footnotes</h3> | ||
| <ol> | ||
| <li id="fn1"> | ||
| <p>Other OS (phone, etc): Sorry, you’re going to have to look it up yourself. Go ahead and do that now! :)<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p> | ||
| </li> | ||
| <li id="fn2"> | ||
| <p>Like you would normally paste any copied text: <code>cmd+v</code> / <code>ctrl+v</code> / etc.<a href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p> | ||
| </li> | ||
| <li id="fn3"> | ||
| <p> | ||
| I’m not going to write up specific editors; there are almost certainly loads of tutorials for whatever computer/program you have access to, so use that! If you are a Preview user, these tools will all be in | ||
| <code>View > Show Markup Toolbar</code>; the remove background tool is called “Instant Alpha”.<a href="#fnref3" class="footnote-back" role="doc-backlink">↩︎</a> | ||
| </p> | ||
| </li> | ||
| <li id="fn4"> | ||
| <p>Bet you thought you were going to make it through the whole piece without me saying that!!<a href="#fnref4" class="footnote-back" role="doc-backlink">↩︎</a></p> | ||
| </li> | ||
| <li id="fn5"> | ||
| <p>And none of that AI generative image nonsense, please. This is all about using your human creativity!<a href="#fnref5" class="footnote-back" role="doc-backlink">↩︎</a></p> | ||
| </li> | ||
| </ol> | ||
| </section> | ||
| <hr /> | ||
| <ul> | ||
| <li>created: 2024-10-11</li> | ||
| <li>last updated: 2024-10-11</li> | ||
| <li>tags: tutorial, joy</li> | ||
| </ul> | ||
| </div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.