How to make an animated GIF
Here is the quick way I do GIFs. Note that I'm using Photoshop CS5, but you can do pretty much the same thing in any Photoshop program.
- Open Photoshop. File → Scripts → Load Files into Stack. Select all the images you wish to put in your GIF and hit the okay button. The images should start flashing like mad, but let Photoshop finish the process before you continue.
- Go to the menu → Window → Animation. The animation palette should open at the bottom of your workspace. Make sure the palette title is
Animation (Frames) and not Animation (Timeline). If you need to change it, click on the icon in the bottom right corner of the palette.
- Beneath the thumbnail of your top image in the animation palette should be two editable options.
Time Frame Delay should be 0 sec. and Looping Options should be set to Forever.
- Click on the little arrow with lines icon in the top right corner of the animation palette. Select
Make Frames from Layers.
- While pressing
Shift, click on the last slide that should now have shown up on your animation palette. This should select all of your slides. click the top right corner icon again and select Reverse Frames.
- Play through your animation using the controls on the animation palette and perfect your slides. You can add editing to the layers now if you like.
- Once you're satisfied, press
⌘+Shift+Alt+S -or- Ctrl+Shift+Alt+S. You can use these options for saving or tweak your own. GIFs must be 500px wide or smaller and under 500k to upload properly on Tumblr. Reduce the amount of colors to shrink file size.
back to top
How to add text above your ask box
Note that you will have to edit your theme's HTML and this will require some basic knowledge of HTML/CSS/Javascript.
-
Dashboard → Customize → Theme. Switch to Custom HTML if you're not already using it.
-
Scroll down to the very bottom of your theme, and right before </body>, paste this:
<div id="ask_hide">
<div id="ask">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus auctor odio a venenatis. Ut at nibh quis augue rhoncus condimentum. Duis ut urna nec orci egestas mollis.
</div>
</div>
Replace the filler text with whatever you wish to put there. If you would like a list of items:
<div id="ask_hide">
<div id="ask">
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
If you would like a numbered list:
<div id="ask_hide">
<div id="ask">
<ol>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
</div>
-
Right below that, paste this code:
<script type="text/javascript">$('#ask_form').before($('#ask'));</script>
-
Now scroll back up and look for </style>. Paste this right above it:
#ask_hide #ask { display: none; }
-
Click the Theme tab closed, wait for the page to completely reload, then press save. Whabam. It should work.
back to top
How to add an additional background
This tutorial should show you how to add a background in addition to the background you already have on your tumblr! I'll be using Photoshop CS4, so you'll need to adjust settings accordingly. I will not be able to offer any additional help on this topic, so please read the tutorial carefully.
-
Find an image that you'd like to use as your background, preferably with a white background. Save and open that image in Photoshop.
-
Next, edit the image as you wish. I added two screen layers, one for blue highlights (#007FFF) and one for yellow highlights (#FFFF00). I used a soft round brush at 0% hardness and 300px diameter.
-
Now you'll want to create a Stamp Visible layer. Press Command+Alt+Shift+E, or Ctrl+Option+Shift+E. This will create a new layer that is a composite of the the previous layers. Convert this to a smart object by going to Menu → Filter → Convert for Smart Filters. Then sharpen the overall image: Menu → Filter → Sharpen → Smart Sharpen. Adjust settings accordingly.
-
Next, you'll want to get rid of that white background so it doesn't show up on your theme and create an awkward boxy effect. Using the wand tool, select the entire white area. I prefer to use the Quick Selection tool (it's one of the options under the wand tool).
-
Now if your image is like mine, there will be some parts of the figure that are selected with the rest of the white background. See how the logo for ITALIA is partially selected on the arm of the left figure?
Use the lasso subtract tool to get get rid of that selection. It doesn't have to be perfect, but it should roughly match the flow of the figure (in this case, his sleeve).
-
Invert the selection by pressing Command+Shift+I/Ctrl+Shift+I, then feather the selection by pressing Shift+F6, and adjusting according to your image. This is to get rid of minor imperfections in the selection, so choose a low number! 1px is ideal.
-
Copy the selection: Command+C/Ctrl+C. Create a new image by pressing Command+N/Ctrl+N.
-
Paste the image by pressing Command+V/Ctrl+V. You should end up with your image, minus the background.
-
Save for Web and Devices (either from the File menu or by pressing Command+Shift+Alt+S/Ctrl+Shift+Option+S). I prefer to save as a .PNG file to preserve quality, but feel free to save as a .GIF. Just don't save as a .JPG file because .JPG files can't be transparent.
-
Now go to http://www.tumblr.com/themes/upload_static_file and upload your image there. Please note that this is only for theme resources. DO NOT UPLOAD ANY FILES OTHER THAN FOR YOUR THEME, OR TUMBLR MAY SUSPEND YOUR ACCOUNT.
-
Copy the link (Command+C/Ctrl+C) at the bottom of the page, and open it in a new tab. The title of the page should tell you the width and the height of the image. This is important to know!
-
Now, open a new tab and go to your Customize page. Click on the Theme tab. If you're not already using Custom HTML, click on the "Use Custom HTML" link.
Find </style> in the HTML. If you have trouble finding it, use your browser's search tool and search for </style>. Find it? You'll need to put a code right before </style>. I usually put it right before the {CustomCSS}. This is what you'll need to put in there:
#name {
position: fixed;
bottom: 0;
right: 0;
width: ###px;
height: ###px;
background: url('IMAGE URL');
}
Replace name with whatever you want to name your div, ### with the width and height of your image (see step 11), and IMAGE URL with the url of your image (see step 10).
-
Now, just as you found </style>, find </body>. You'll need to put one more code in.
Right before the </body> tag, put this in:
<div id="name"></div>
Replace name with the name you specified in the previous step.
-
Click "Update Preview" and your background should work!
-
Remember to save your changes!
back to top
