[Tutorial] asofterworld/tumblr confessions
I’ve been asked to make a tutorial on how to make tumblr confessions, so might as well kill two birds with one stone and write one up for asofterworld remixes as well :) This is how I make them, so perhaps it might be a little different but hey, it gets the job done so whateva.
I’ve resized most of the photos for this tutorial. you may view it in large size if you need :)
Tumblr-style Confessions
Confessions have become a new "in" on tumblr. This is where users anonymously submit "confessions" about their fandom. The way these confessions are made is similar the ever popular asofterworld remixes. This tutorial shows how I make them.
Part I: the photo
First choose a photo that you would like to use. It can be of any photo of any person, place or thing that you wish to write about. Make sure it's related to the fandom you are writing for, or else this will defeat the purpose of making a confession.
In this tutorial, I'll be making a teen top related "confession" with this photo.
Part II: confessions
Choose your confession. Don't be shy!
Part III: Editing
I am using Photoshop Elements 7.0 for this tutorial as I am most familiar with it. The tools are approximately the same for most editions of Photoshop and CS5. Any questions about working with other graphic editing programs can be left in the comment section.
First open up the photo you wish to use in photoshop. Edit/crop/color/resize the photo as you see fit. Next select the rectangle tool. This tool is typically hidden underneath the line tool. To access it, hover over the line tool, right click and a list of other commands should appear. Select rectangle tool.
The rectangle will be the background for your text. Make sure that your "foreground" color (the top square) is set to white or a whiteish color. When you make the rectangle, make sure your rectangle covers a lot of the eye area. Usually the rectangle is placed above the subject's eyes, like a blindfold.
Type in your text, remember to choose a nice font. A popular font to use are the typewriter fonts. These are free and require installation. Most of the time, the text is in black. Position the text so that it fits nicely with the image. If you can't see the text then usually the text layer is hidden under the rectangle layer. Simply drag the text layer so that it is "above" the rectangle layer. Save.
Congrats you have finished your tumblr style confession!
(this one was made in jest. i actually quite like this guy and i think llamas are adorable)
asofterworld remixes
The idea was originated by asofterworld webcomic created by Emily Horne and Joey Comeau. The topics of these comics are usually dark, humourous and at times philosophical. The comics prove to be an instant hit and eager fans happily made their own softerworld remixes/fanarts for various communities.
Part I: Template
So here is the basic template to make these. The template has the softerworld credit on the bottom left as well as space for the remixer to post their own watermark/signature.
The areas inside the panels are usually transparent (I say usually because sometimes photoshop acts up), so that you can use a graphics program (such as Paint.net and Photoshop) that allows the layering of images. This allows you to place your base images underneath the template and position it as you please. It is usually suggested that you crop your image before you place it on the template.
Part II: Fonts
For the asofterworld comics, Love Letter TW is used as the main font. This is a free font.
However you may use other typewriter fonts as alternatives. Any vintage typewriter font would work splendidly. These alternative fonts may or may not be free.
Part III: Images
Any photo you like, be as they are a) high quality enough and b) appropriate for your remix. You may use more than one image if you wish. But usually most remixes are made with one image.
For this tutorial I will be using this image (I've resized it for this instance):
Part IV: Editing
I am using Photoshop Elements 7.0 for this tutorial as I am most familiar with it. The tools are approximately the same for most editions of Photoshop and CS5. Any questions about working with other graphic editing programs can be left in the comment section.
First open up the photo you wish to use and the template in photoshop. Edit/crop/color/resize the photo as you see fit. Now to move the photo over to the base, look at the upper left hand side of your toolbar. There should be a litle icon called the move tool. I have circled it in red in the screencap. Click on that tool.
Once you have selected the move tool, click on your picture, left click and drag it over to your softerworld template. You know that your photo is being copied over (as a new layer) when the template file has a gray outline. Release, and your photo should appear in the asofterworld template.
As you can see, the photo is completely covering the template. That is because it is the newly added layer and the template is the base layer. To view the layer ordering of this file, select Windows --> Layers. The layer palette will appear usually on the right hand side of your screen.
To rearrange your layers, select your layer. In this instance it is "Layer 1", the layer that has your photo. Simply left click and drag the layer so that it is under "Layer 0", the base layer. Release and the asofterworld base should appear with your photo within the frames. See screencap for details.
Position the photo as you see fit. Ensure that all three frames are filled. Now you are half done.
Part V: Text
If you have not already done so and if you wish, please install the typewriter font mentioned in Step 2. To install fonts, please refer to this link. Make sure the file you wish to install is a TrueType Font File.
The quotes/words on asofterworld remixes are up to you. I am using a quote I found on BrainyQuote. Song lyrics, poetry and your own sayings can work.
Type in your text. Most of the time, the text is in black. Position it so that it fits nicely with the image. In the screencap I posted below, I changed the text to be white so that it is legible. I will change the font back to black later.
Next select the Line Tool. This will be the background for your text. Make sure that your "foreground" color (the top square) is set to white. The line tool is used to add "lines" to a photo. You can set the weight (thickness) of the line to make boxes, rectangles and such. The line should be a few pixels thicker than the size of the text. That way it is wide enough to be the background of the text.
Because the line tool automatically defaults to making a new layer for each line used, you might want to set it to "Add to Selection" instead. This adds the subsequent lines to only one layer. Another tip is to group the sections based on panel. To do this simply select the "Create New Shape Layer" button for the line tool. This is to the left of "Add New Selection". Grouping sections are particularly useful for when you need to reposition text/lines later on.
When you are done adding the lines, it should look like you have whited out the text. Arrange the text and lines. Then, drag the layer(s) with the lines to be under the layers of text. Make sure the text is within the lines and that the lines completely cover the text.
And last but not least, add your signature to the bottom right corner of your remix. Save.
Congrats you have finished your first asofterworld remix :)
Leave comments, questions, and concerns below
I’ve resized most of the photos for this tutorial. you may view it in large size if you need :)
Tumblr-style Confessions
Confessions have become a new "in" on tumblr. This is where users anonymously submit "confessions" about their fandom. The way these confessions are made is similar the ever popular asofterworld remixes. This tutorial shows how I make them.
Part I: the photo
First choose a photo that you would like to use. It can be of any photo of any person, place or thing that you wish to write about. Make sure it's related to the fandom you are writing for, or else this will defeat the purpose of making a confession.
In this tutorial, I'll be making a teen top related "confession" with this photo.
Part II: confessions
Choose your confession. Don't be shy!
Part III: Editing
I am using Photoshop Elements 7.0 for this tutorial as I am most familiar with it. The tools are approximately the same for most editions of Photoshop and CS5. Any questions about working with other graphic editing programs can be left in the comment section.
First open up the photo you wish to use in photoshop. Edit/crop/color/resize the photo as you see fit. Next select the rectangle tool. This tool is typically hidden underneath the line tool. To access it, hover over the line tool, right click and a list of other commands should appear. Select rectangle tool.
The rectangle will be the background for your text. Make sure that your "foreground" color (the top square) is set to white or a whiteish color. When you make the rectangle, make sure your rectangle covers a lot of the eye area. Usually the rectangle is placed above the subject's eyes, like a blindfold.
Type in your text, remember to choose a nice font. A popular font to use are the typewriter fonts. These are free and require installation. Most of the time, the text is in black. Position the text so that it fits nicely with the image. If you can't see the text then usually the text layer is hidden under the rectangle layer. Simply drag the text layer so that it is "above" the rectangle layer. Save.
Congrats you have finished your tumblr style confession!
(this one was made in jest. i actually quite like this guy and i think llamas are adorable)
asofterworld remixes
The idea was originated by asofterworld webcomic created by Emily Horne and Joey Comeau. The topics of these comics are usually dark, humourous and at times philosophical. The comics prove to be an instant hit and eager fans happily made their own softerworld remixes/fanarts for various communities.
Part I: Template
So here is the basic template to make these. The template has the softerworld credit on the bottom left as well as space for the remixer to post their own watermark/signature.
The areas inside the panels are usually transparent (I say usually because sometimes photoshop acts up), so that you can use a graphics program (such as Paint.net and Photoshop) that allows the layering of images. This allows you to place your base images underneath the template and position it as you please. It is usually suggested that you crop your image before you place it on the template.
Part II: Fonts
For the asofterworld comics, Love Letter TW is used as the main font. This is a free font.
However you may use other typewriter fonts as alternatives. Any vintage typewriter font would work splendidly. These alternative fonts may or may not be free.
Part III: Images
Any photo you like, be as they are a) high quality enough and b) appropriate for your remix. You may use more than one image if you wish. But usually most remixes are made with one image.
For this tutorial I will be using this image (I've resized it for this instance):
Part IV: Editing
I am using Photoshop Elements 7.0 for this tutorial as I am most familiar with it. The tools are approximately the same for most editions of Photoshop and CS5. Any questions about working with other graphic editing programs can be left in the comment section.
First open up the photo you wish to use and the template in photoshop. Edit/crop/color/resize the photo as you see fit. Now to move the photo over to the base, look at the upper left hand side of your toolbar. There should be a litle icon called the move tool. I have circled it in red in the screencap. Click on that tool.
Once you have selected the move tool, click on your picture, left click and drag it over to your softerworld template. You know that your photo is being copied over (as a new layer) when the template file has a gray outline. Release, and your photo should appear in the asofterworld template.
As you can see, the photo is completely covering the template. That is because it is the newly added layer and the template is the base layer. To view the layer ordering of this file, select Windows --> Layers. The layer palette will appear usually on the right hand side of your screen.
To rearrange your layers, select your layer. In this instance it is "Layer 1", the layer that has your photo. Simply left click and drag the layer so that it is under "Layer 0", the base layer. Release and the asofterworld base should appear with your photo within the frames. See screencap for details.
Position the photo as you see fit. Ensure that all three frames are filled. Now you are half done.
Part V: Text
If you have not already done so and if you wish, please install the typewriter font mentioned in Step 2. To install fonts, please refer to this link. Make sure the file you wish to install is a TrueType Font File.
The quotes/words on asofterworld remixes are up to you. I am using a quote I found on BrainyQuote. Song lyrics, poetry and your own sayings can work.
Type in your text. Most of the time, the text is in black. Position it so that it fits nicely with the image. In the screencap I posted below, I changed the text to be white so that it is legible. I will change the font back to black later.
Next select the Line Tool. This will be the background for your text. Make sure that your "foreground" color (the top square) is set to white. The line tool is used to add "lines" to a photo. You can set the weight (thickness) of the line to make boxes, rectangles and such. The line should be a few pixels thicker than the size of the text. That way it is wide enough to be the background of the text.
Because the line tool automatically defaults to making a new layer for each line used, you might want to set it to "Add to Selection" instead. This adds the subsequent lines to only one layer. Another tip is to group the sections based on panel. To do this simply select the "Create New Shape Layer" button for the line tool. This is to the left of "Add New Selection". Grouping sections are particularly useful for when you need to reposition text/lines later on.
When you are done adding the lines, it should look like you have whited out the text. Arrange the text and lines. Then, drag the layer(s) with the lines to be under the layers of text. Make sure the text is within the lines and that the lines completely cover the text.
And last but not least, add your signature to the bottom right corner of your remix. Save.
Congrats you have finished your first asofterworld remix :)
Leave comments, questions, and concerns below