akraticm asked:
Can you say a little about what tools and techniques you use to make caps? I’m an amateur cap-maker myself, but mine never seem to look as good as yours, especially the fonts and overlays. Thanks.
Alright, this is version 2.0 of the How To Caption Like Bi-Caps series. Things have changed a bunch and I figured it was time to update the page with my current (as of 2016) workflow. The previous version was from Nov 3rd, 2013
I used to use a script to “capize” my pictures, but now I use my webtool instead. The reason I switched is that the webtool offers a bit more flexibility, and I can prep images right before I use them instead of prepping a hundred at a time, only to realize that it made an image too dark to use or I want to switch sides on where the bi-caps logo shows up. The webtool adjusts the exposure of the photos to make them slightly darker, adds the bi-caps logo and resizes them to under 900 pixels on the longest side. It also has some limited filter options that I’ve been meaning to expand somewhat.
The exposure adjustment is to allow the white font to not be overpowered by the background of the image, it also gives them the “bi-caps” look. I sometimes have to adjust the images to make them slightly brighter if they were already dark to begin with, or add filter to style the photo a little differently. There used to be a whole section on why you want to adjust the exposure, so that if you’re using white colored text the background white doesn’t overpower the text and make it unreadable. Since I use a text outline now, this isn’t as important anymore.
Original photo above before styling:
After styling:
I still add the font with Pixelmator on Mac, that hasn’t changed. It still handles text FAR better than Photoshop, at least in my opinion. You could also use GIMP, since it’s free and available on Windows, Mac and Linux. If you don’t have access to a decent graphics editor you could do worse than use an online meme maker like roflbot for putting the text on pictures:
I use the font Avenir Next, typically on Heavy weight with a two or three pixel black center outline. The font fill is the color that I usually change, usually using white with 70-80% opacity. I use the opacity to let a little bit of the background image come through the words, I think it adds a bit more depth to the caption:
Font weight can make a difference:
Once I’m done with the text, I export the photo and upload it to Tumblr. When I export the photo, I usually try to go for about 90% quality JPEG so that the font doesn’t get too many artifacts from the compression. That usually gives me a file about 100k to 200k on average.
Please don’t save it at 0% quality on the JPEG slider:
That’s the workflow, as it is now. If you have any other questions on it, feel free to let me know. Most of my styling is really just trial and error, seeing what worked and what didn’t. If you look at some of my old stuff, you’ll see that the style has changed as I’ve been doing caps. I’m a programmer, not really a graphic designer, so whenever possible, I try to script the mundane aspects of the process.
My GIF workflow isn’t as evolved yet, I’m still playing around to get it to work right. I use the following web tools to make things easier to manage:
The bulk of my captions are created by a custom tool that is pretty involved. Basically I open an existing GIF in Pixelmator and overlay text onto it. Then I delete the background and save it as a transparent PNG file. My tool takes that PNG file and overlays it over the GIF, creating a new GIF file with the text on it, then it compresses it and uploads it to Tumblr.
I’ve been playing around to make a nice easy webtool way of doing it, but I’ve not come up with anything yet. Right now the script isn’t really ready for public use, as it requires imagemagick and a variant version of gifsicle with lossy compression enabled. I think installing these are technically possible in Windows, but it’s WAY easier to do it on Mac/Linux.
I know some people will argue with me on this, but I think that shorter captions are better than longer captions. Shorter captions allow the text to be read easier, even through a thumbnail preview and give a more open-ended interpretation. Generally if I can’t fit the text onto the image I’ll reword it into something simpler. If you need to add extra space on the picture to fit your caption I think that’s a sign that it’s too complicated.
Take for example, this:
Versus this:
The larger font and smaller amount of text can be read immediately, whereas you need to focus on reading the smaller and longer text.
I’ll add more to this document as I think of what to add, keep an eye out and if you have some questions, feel free to drop me a line on Tumblr.