#I only have this like 500px version of this now

[deoidesign]

important distinction.

Testing a few different things with this one

[rachaelthemes]

Ocular — Version 3

Preview // User Guide // More Info & Install

your favorite sidebar theme just got an upgrade, babeyyy

I went to update Ocular to make it NPF post-compliant and then my hand slipped and I redesigned the whole thing lmao. here's a brief update about Ocular 3; if you're looking for a full list of changes between versions 2 and 3, click the "Read More" below)

Ocular comes with the following features:

Colors: easily change the color scheme of your sidebar and posts using any colors you want

Post sizes: 400px, 500px, 540px, 600px, 700px

Sidebar: can be on the left, right, or above the posts. pick from a list of sidebar sizes, header image heights, and avatar shapes

Fonts: 20 different fonts, sizes 13px to 18px

Background: solid, gradient, full-size image or repeating image

Links: choose either regular navigation or drop-down navigation. unlimited custom links (visit the help desk FAQ for a tutorial) and ability to rename home, ask, submit, and archive links

Endless scroll, custom ask box text, Tumblr's full-width controls and search bar, optional header, avatar, and favicon images

if you already have Ocular installed, version 3 should be coming at you as soon as the update passes the theme garden. if you installed this theme with GitHub, you'll have to re-install manually.

now let's get to the fun stuff. what's new in version 3?

wow, do I have some updates for you!

1. goodbye color schemes, hello post background and text colors

you can now directly control the color of the posts rather than relying on color schemes to do it. want your posts to be a very specific shade of navy? all yours, buddy. go wild (make sure it's readable tho)

2. hello, color schemes! wait I thought we got rid of that guy

a lot of the color schemes I made became redundant now that the new post background/text color options exist. if you were married to the old color schemes, all of them can be recreated using those options. so the new color scheme options are as follows:

"My colors" — uses the colors you picked for post background/text

"Light preset" and "dark preset" — sets the posts to white with black text, or off-black with white text

"Translucent" — uses the colors you choose for post background/text, but makes the post backgrounds semi-transparent. there are NINE different translucent color schemes, ranging from 90% (only slightly see-through) to 10% (VERY see through)

3. navigation dropdown option

you can either use the sidebar links like they were before, or you can turn them into a cute little dropdown (helpful if you have lots of links or links with long titles!) you can enable this using the "use dropdown navigation" setting. you can also customize the label for the dropdown using the "dropdown menu label" setting. for instance, the dropdown on my blog currently says "oooh you wanna click me"

4. RIP google fonts I always hated your load times

decided to stop using Google Fonts and instead I'm providing the font files directly in the code. this will help speed up load times drastically when using custom fonts, plus I don't have to use Google. win-win! there's quite a bit of coverage overlap with the old fonts, but some of them that were too similar to each other got the ax. I also added all of the system fonts as options (hit classics like Arial, Georgia, and Comic Sans MS are now available TO YOU!)

5. more layout, sizing, and spacing options

the sidebar used to be either on the center-left, center-right, or above the posts; now it can go in the top-left or top-right! you can now control the border radius on the posts and sidebar. the header height, sidebar width, and post spacing all have additional options.

6. some options have been renamed for additional clarity

"background color 1" -> "background color"

"background color 2" -> "gradient background color"

"background" -> "background style"

"font override" -> "use body font everywhere"

"title" -> "sidebar title"

"description" -> "sidebar description"

"ask box text" -> "custom HTML above ask box"

7. removed some options

you win some, you lose some. I removed the uppercase sidebar links, theme credit, and inline media spacing options, mostly for redundancy reasons or because they produced unclear results.

8. as previously stated, now NPF-compliant

Ocular was ALMOST compliant with Tumblr's new post format, but had a few tweaks that needed to be ironed out. they're now ironed.

9: now user-friendly right out of the box

I updated the default color and content options, so new users installing this theme will have a much easier time using and customizing it immediately. no more ugly ass green background!

10. and finally, new JS

I had to rewrite some of the javascript for this theme, which turned into me rewriting ALL of the javascript. doing so meant that I could eliminate dependencies on third-party JS libraries and run the whole thing on plain JS. that should improve load times!!

bonus: custom CSS can do some nifty stuff now

want to change the size of your avatar? you can do that now! just do this to your Advanced > Add custom CSS section

super helpful if you're using the Avatar shape: Uncropped setting and you need your image to be a specific size (like a pixelated GIF)

for more info, check out the Ocular user guide. thanks for reading my updates!! hope you all have a fantastic start to your 2024 ❤️

[imagesbyele]

I am back after a week! What do I have? A knife!* new theme, with a free and a "premium" version! Forgive the gifs quality, recording the screen was too much for my laptop!

#theme 02 Emma - light and dark

preview (free version) - preview (premium) - code of the free version (from the outside they look the same except for the updates menu and glows around things)

link to post with the remastered version: more fixes to tumblr bugs, nested captions and more. The premium is automatically remastered, there is no original version like for the free one. 

It was originally meant to be ONLY premium, but then I felt bad making people pay for it, which is a great attitude from someone who is opening for commissions, so I decided to make two, both having light and dark mode obviously, and the extras are for people who donate. I also decided to keep the theme in my main rp blogs because I was that happy with it, which encouraged me to share with people. Some day soon when I’ll do commission-themes I’ll present more models.

*misquoting an old meme up there

So what do you get with the free version?  - Feb 15th: added a script that automatically resizes videos, styled audio-posts and submissions and made a more colorful chat, see credits page to know more. Also tumblr controls are now scaled down and only grow on hover (and have inverted colors) so even if someone looks at your blog from mobile without being logged in, they’ll see everything (before today the searchbar hid things). Feb 25th: glenthemes’ npf photosets fix.    -a theme with a dark mode that involves a nearly full change of theme aesthetic, because: you may want to give your readers the option, and/or because, like me, you can never settle on one background because your muse either has two (or more) contrasting main verses you want to display or too many contrasting qualities (see my own blog, with a princess Emma and a dark Emma), or because you have multiple muses and you want to display them in separated backgrounds, or you are a fan-blog that ships a couple and wants to be Dramatic about it (can you imagine, younger and happy in daylight, older and broken in dark mode?), or you are simply that extra in general. Also like me. 

example of how to make people mad - not real but if you know any coding go for it:

-the option to switch off/remove the tiny image on top of each post, in my sample a swan, and ability to customize nearly every color and image in your blog in both modes without having to touch the html (dark mode things all start with 'darkm' like darkmbackground)

-instructions in the html if you want to venture there and change things yourself, though you should already know a bit of the bases to do that -posts that are either 400px, 450px or 500px, and the links, sidebar and optional portrait image will move automatically. Rounded borders, container with gradients or an image of your choice, pinned post label that matches permalinks, usual askbox fix that won’t let it shrink -the optional portrait image which you can easily switch off (it's not inside your sidebar but will move as needed), and you can add a sidebar image behind it instead, the background is now transparent. The portrait image will be contained within 176x240px.  

whether you donate or not, request the premium or not, I’m here if there is ANY issue. Please like or reblog if you take (or just if you like) and don’t claim as yours/don’t remove the credit, but modify as you please.

the premium version and credits under read more or this post will never end. Note that the features added to the non-premium remastered version will be present in the premium one as well. The link is under the one with the pastebin if you want to know what those features are.

added features for "premium" which is a gift if you buy me a coffee (just send me a message with your url/email for the link), and you can see in the preview:

-ability to add a message on top of your regular askbox, where people are redirected when they send you asks from the dash -your usual dropdown box, what I call 'updates tab' in the sidebar (you can add more if you go in the html and simply copy-paste what's in the body section as needed) -popup links for you to customize in the html, and, to give you what I call a "template" so you know where to start, I made it so that in one link (or box2) you will already find tabs, divided in rules, bio, verses and navi. In the bio tab you also will find slide-down boxes again, adjusted to fit there. In the navi tab you'll get navi buttons, and in the verses tag a potential template of image-name of the verse with link to it-description. Then a separated popup with an askbox and a submission box, both with a frame with gradients like the container. You can take the html and move things around, remove or add more as you please. -optional glow around your container, description and updates tab you can switch on and off. -your popups are styled so that you can remove the background color of the popup_block and add an image (on the corner/make a frame) with transparent background (500x640px right now), the content of the popup will have its own background behind, of a color you'll pick, of 460x520px. But you can obviously modify sizes as you please   -optional ‘not allowing people to right click on your blog’ which if you don’t want is very easy to delete (just go in the editor and delete the script, the label is on top) 

as always thank you to @octomoosey because without those tutorials I would have never tried coding, and for general popup information. Also the sample container and permalinks backgrounds are from their stock gif-packs.

-as always also thank you to @agirlingrey for the tutorials that managed first to make me understand how to do the slide down/dropdown boxes, and how to do tabs - @eggdesign 's tutorials managed to make me understand how dark mode works and I'll never thank them enough for it, also for the askbox colors - @whateverhtml for tumblr askbox height fix - @magnusthemes for the askbox message

-as always @evansyhelp for putting so many resources together which helped so much 

-font-awesome and linear-icons for icons, pixabay for the sword and frame. Background and gifs are mine.

[asleepinawell]

frozen gifs on your blog? read on.

i seem to have fixed the issue with larger gifs sometimes not displaying correctly on the desktop browser version of my blog page (not dash, my actual blog page). 

when tumblr first bumped the gif size limit up there were all sorts of issues with random larger gifs (5mb and up) freezing even when other gifs of the same size or larger were not. and sometimes they froze only on web and sometimes only on mobile. it was a nightmare. it’s mostly been fixed I think, BUT, it looks like whatever tumblr did to fix the image processing they didn’t fix for the 500px version of gifs. 

tumblr dash uses the 540px version so it’s fine. tumblr mobile app is also fine. the place you see the problem is on some people’s themes on desktop (some of the standard free themes and some custom ones). 

why? a lot of themes seem to use the variable  {Photoset-500} for photosets which will force display the 500px version of the image. as far as i can tell this is the only place that size image is used*. this can easily be fixed by editing your blog html and replacing {Photoset-500} with {Photoset}. There is no {Photoset-540} variable for whatever reason.

The {Photoset} variable will shrink the image to fit the container it’s placed in. you might need to mess around with the container size (and you can expand it to fit a 540 image if you want) but that should make it load the larger gif image.

*the other place I’ve sometimes noticed this is in the preview when you hit reblog on a post on desktop browser. I think it might be loading the 500px gifs for that. idk why. it's pretty unimportant though.

just to show what i’m talking about:

a 500px gif from my blog that is frozen

a 540px gif from my blog that is not frozen

(also, in case anyone doesn’t know this, tumblr displays gifv images now, but you can get to the original gif by deleting the final v from the url. useful for saving gifs to your computer or linking them in a program where you want them to embed and animate properly (like discord). thanks, tumblr)

[margaretroses]

Gif Tutorial

I was recently asked for some tips for making gifs, so I thought I’d make a tutorial show how I make mine. I’m using Photoshop CC 2017 for this, but I think the steps should work for most versions of Photoshop. I previously used CS6 Extended but this version has disappeared from my laptop and left me with basic CS6 which I wasn’t able to gif with.

I download my video clips from Youtube or screen record from documentaries/other sources online.

1. First open your Photoshop program and go to File > Open and open the video clip that you have saved.

2. Once you’ve opened your video, you need to make sure the timeline window is open, to do this go to Window > Timeline. If you want to use the clip you’re using to make a single gif, rather than taking clips from a full video, then skip to step 5.

3. To save separate clips from a long video you need to adjust the dials below the time markers. To avoid having a gif that’s too large to upload to tumblr and also too long, I suggest keeping your clips to no more than 6 seconds (this may depend on your clip). You can zoom in closer to the time markers to see a more accurate time including seconds by using the slider tool at the bottom of the timeline window. Sliding towards the smaller mountain zooms out (showing the full clip length as in the screenshot), the bigger mountain zoom in, allowing you to see the seconds and create a more accurate clipping. Use the play button to the left of the window to play through your clip and adjust the dials as you wish.

4. Once you’ve selected the clip you want to use, it’s time to save them. Go to File > Export > Render Video. A new window will open, where you can rename the clip and select a folder to save them to. You can ignore the other options.

You can go back and repeat step 3 and 4 as many times as you like to save the clips you want to gif. Tumblr has a limit of 10 images/gifs per post, but some tutorial and resource pages will show you how to put two gifs on to one canvas so you can upload more than 10 at a time.

5. To start giffing, you need to import those clips you just saved. File > Import > Video Frames to Layers. As mentioned in step 2, if your video clip is short already then you don’t need to go through steps 3-4. Once the next window opens, you need to make sure that ‘Limit to Every 2 frames’ is ticked.

6. When I created my clip using step 3, there were some frames left over from the previous shot which I don’t want in my gif. To get rid of these, just select the frames you don’t want and you can either press the delete/backspace button on your keyboard, or click on the little bin icon. Now that you’ve deleted these frames from the timeline, you need to do the same in the layers window. Be sure not to delete the frame with the eye icon as this is now the first frame of your gif. You may need to have a scroll to the last frames in your clip, to check there aren’t any other excess frames you don’t want. If so, just follow these same steps.

7. Next up we’re going to set the time delay between frames. This will determine how fast or slow your finished gif loops. To do this, you need to select all of the frames on your timeline, and click on the arrow next to the number shown (typically defaults at 0.04). The seconds shown in the list will make your gif run super slow - this is the delay between each frame, so if you select 5.0 there will be a five second delay between one frame and another. So, to choose your own time, select ‘Other’. For me, unless my chosen clip is super short where I might want it to loop a lot more slowly, I try to have my gifs play in as close to ‘real time’ as I can. I set my delay at 0.06 seconds and adjust it later on if needed. You can always press the play button and see how your gif runs, but this isn’t usually an accurate playback speed.

8. Once you’ve done this, you need to highlight all of the frames in the timeline window and all of the layers in the layer window. Next, click on the button that looks like three lines, on the right side of the timeline window and select ‘Convert to Video Timeline’. Then, in the layers window, right click one of the layers and select ‘Convert to Smart Object’. This will compress all of the layers into one, but will still be playable.

9. Now we’re going to crop your gif. First, you might want an idea of how what kind of layout you want for your gifs - this will depend on how many gifs per set you want. If you’re just making one gif, then set your crop with to 500px and your height to whatever works best (250, 300, 500 etc). Two gifs per set (if you want them side by side) need a width of 245px, three gifs side by side need a width of 160px. Before you crop, you should make sure that on the top bar ‘Delete Cropped Pixels’ is unticked. This will allow you to move your frame and re-crop the area.

10. Once you’re happy with your cropped area, it’s time to make some adjustments. For my gif, I want it to have a width of 245px and a height of 300px. To change the size of your image you need to go to the top menu bar and select Image > Image Size. Make sure the measurements are set to pixels. Next we need to sharpen the image, so we go to Filter > Sharpen > Smart Sharpen. I always have mine set to 500% for the Amount, 0.3px for the Radius. In CS6, Smart Sharpen didn’t have an option to reduce noise, so I just set this to 100% as this seemed to work best for the quality. It helps if you have Preview ticked, so you can see how the adjustments affect your image.

11. Now it’s time to start applying filters! To keep everything together in one place, you’ll want to create a new group so click on the little folder icon at the bottom of the layers window. Then click on the round icon to the left of it - here are your adjustment options. Have a play around with these and see which ones work best for you. Click on the eye symbol next to the adjustment layer will turn the layer visibility off, so you can see the effect it has on your image and see if you need to make any changes.

I tend to edit all of my gifs in the same style, the only difference being the options I use for black and white gifs, and those for colour. My basic go-to adjustments are Brightness/Contrast, Levels, Selective Colour (W/N/B for B&W, all colours for coloured gifs). To create a level tone for my B&W gifs, I apply a Gradient Map, fading from black into a very light grey. Colour gifs - I play around with Vibrance, Hue/Saturation and Colour Balance. It doesn’t hurt to play through your gif while you’re editing, to see if the settings your using work for all frames and not just the cover.

12. Once you’re happy with your gif, we need to save that masterpiece. Go to File > Export > Save for Web (Legacy). Some version of PS might just say ‘Save for Web’. In the next window, the only thing you need to do is select ‘Forever’ in the Looping Options drop down menu. Here, you can also check the size of your gif and make sure it’s below the 3MB limit. If it’s over, then you may need to go back and cut the length of your clip a little by adjusting the sliders in the same way as in step 3. If it’s a tiny bit over the limit, shaving a second or two off of your clip should be enough. If it’s over by a lot then you may need to split your gif into two. Again, following step 3, you can simply adjust the sliders to split the timeline into two sections. Once you’ve done this try saving again and check the size. When you’re happy, all you need to do is click Save and you’re done! You’ll need to do this for every clip you want to gif. The more you gif, the easier it’ll become and you’ll find your own rhythm where it may take only a few minutes to make one gif.

As mentioned earlier, if your final gif playback is too fast/slow all you need to do is drag and drop the finished gif back into PS and adjust the time delay as per step 7. You can change this and save it again as many times as you like until it’s right for you. 

** TIP ** Never close your tab window until you’re 100% happy with your gif, to the point that you’ve uploaded it. If you’ve noticed a mistake or a problem with your gif this allows you to go back and edit it without having to start over again. Also you can save your work in progress as a PDF at anytime. Trust me, there’s been many a time where I’ve closed my window and had to start again if there’s been a mistake.

[miloloveswrestling]

How to gif ~

(a very partial tutorial)

Hey everyone, I’m Milo, fandom contributor since 1887. It had been brought to my attention that some of you might want to learn how to do gifs so I’m here to share the knowledge. Of course it’s only how I do gifs, and it’s not the only way, probably not the simplest way but heh, it’s mine.

First of all: you need to choose the couple of seconds you want as a gif. Seriously, it’s half the work. Think about how your gif will loop, what the first image (and thumbnail) will be and most importantly: work with your platform of choice’s limitations. 1 gif at a time on twitter, 440×220 min, 10 gifs on tumblr, 500px wide, 5Mo, etc.

Material:

Giffing Tool: a powerful tool, free of use but if you have a couple bucks to spare, it’s Pay What You Want.  

Photoshop: The portable CS4 version by Majax31 exists. It’s old but it  does a tremendous job, also, it’s light, ready to use and easy to find.  It’s still not legal though. I happen to use Photoshop CS4.  

Let’s say you want to gif a close-up of some Pro Wrestling Noah boys like any other sane person. Well, excellent choice!

Pause your vid a couple of seconds before the right moment, open Giffing Tool. GT works as a way to record your screen.

New > Hold your click to select the zone

Play your vid, don’t move anything. It looks like nothing is happening but GT is recording. When the scene you want is finished, tap esc and GT will compile your gif, give it a bit of time. The closer you are from the actual size you want, the less time it will take.

In GT’s window, you select the length of your gif a bit better (1), click the size to avoid losing quality in an unwanted resize (2) and save it with the appropriate icon (3, shortcut is S). Step 2 is super important, you need the actual size to be the same as the size your gif will get out. If GT change the size, you will lose quality.

Saving with GT takes time, you can continue to use your computer normally while it does, be patient.

If you bought the full version of Giffing Tool, you can decide to resize your gif here and be done with it! But if you didn’t GT will add a banner you might want to cut with Photoshop or of course you might want to play with colors, size and decide on all the frames you want or don’t want, to the next level with you!

So yeah, now’s the time to edit your gif in photoshop! Hooray! After a lot of trials and error, I found some secrets to make this work. First open Photoshop then it goes like this:

File > Importation (down there) > Video frames to layers

I don’t know about the newer versions of Photoshop but you’ll need to write the name of your gif (with the extension) in the File Name to find it, it will not appear otherwise. Write it when you’re already in the right folder. By the way I remember now that you need Quicktime for this to work but it’s a pretty basic log so I guess this shouldn’t be a problem. Anyway, import it even if it does not appear (as long as you have the name of the file right, it will work): [Mark frame animation] must be checked in the next window and we’re good!

Now comes some work with Photoshop. Before you get started, you’ll need to get the animation window (Window > Animation). You only have to get it once, it stays in your setup for later uses. In that window you can check your gif frame by frame, delete duplicates (fair warning though, deleting too many duplicates will make your gif lighter but also will alter its rhythm, again, trials and errors, test everything!), decide on how fast you want your gif,

Another warning: what you change on the first image of your gif will apply to all the frames. If you wants to change only one, select the one and the layer associated with it. If you wanna change only the first, duplicate it (first icon in 2).

1/ You must use that tool to select the part of the image you’ll need. If you didn’t pay for Giffing Tool, you can use that tool to cut the banner they add. Once your image is selected, use Crop (here Recadrer). With Image Size (here Taille de l’image) you can resize your image depending of your platform’s limitations (on tumblr 500px wide).

2/ The animation window as I already said is super useful, you can delete, duplicate, move around frames.

3/ Don’t get there too fast but this is where you can edit colors and light. Experimentation is key here. Only one thing I can add: remember to select the first frame in the animation window if you want your edit on all frames. BUT put your edit on an empty layer on top of all the other layers in the layer window. If you know nothing about photoshop, a word on layers: here Layer/Calque 1 is hidden, you can make it visible by clicking the empty square next to the preview. If you do that then do the same on Layer 2, layer 2 will hide layer 1. The layer on top is always the one showing first. You can also erase some parts of a layer to show the one under it. Everything is possible in photoshop! Add a frame on the first layer so it shows on all the other layers! Add stickers! Most importantly: try things! fail! learn from it and do it again! If you have questions, I’ll answer them as best I can.

Last thing I’ll add is how to save your gif. You need to use Save for Web... in the file menu. You’ll get a preview, on the upper right corner, change the second setting as GIF.

1/ Check the format

2/ This is where you can check the size of your gif, super important depending on where you want to publish it.

3/ Save... You did it!!!!

It might sound complicated but it really isn’t that much, all the work you’ll do the first time will be useful forever, you’re learning a new skill but thankfully that skill is super easy to remember. And allows all sorts of awesome things! A whole new horizon is opening!

@kazuchikaokada​ 😌 i’m not sure you’re gonna learn much with all that ‘cause your gifs are already so nice?! it depends a lot on vid quality I guess but really you’re probably already doing all that? Maybe if you don’t use photoshop yet it could give you a whole new set of possibilities?! Anyway, sorry if this didn’t help, I hope it’s still useful for someone out there anyway!

[completeresources]

COMPLETERESOURCES — Batch Icons

I’m using CS6 extended, but any version will work

You’ll need basic knowledge of Photoshop

Also basic knowledge of the Frame Animation Tool

Please Like / Reblog if you find this useful.

This tutorial will help you make a lot of icons without having to do a lot of work. This will work for any show, person, color palette, icon style. This also helps a lot when making icons for multiple characters for the same icon set.

If you're like me and end up having 30+ icons open, and having to edit, color, sharpen, etc on each one, this will really help you get them done in half the time.

*This tutorial is image heavy

The first thing you'll want to do is choose and cut out your images. I use a drawing tablet to do this, but you can use whatever method you want. The only info I'll add is to apply the "cut out" on a group with the image inside, rather than directly on the image. Like this:

That will make it so much easier to edit the image / add blush, makeup, etc later, especially when using this method.

So, here are my images cut out. I always crop and resize my images so they're 500px high, but for tutorial sake, they're all 150px high:

Once you have all your images cut, I highly, highly, recommend that you save the .png files so you always have them cut for future icons. Okay, next is to set up your "base" icon. I'm going to work on just one image for now, but I'll catch up the rest later.

So, make a new canvas in your icon size. I always use 100X100, but I've seen 150X150 and 200X200, so whatever you want. Then add a base color. I have a set of color schemes I use for icons (ie pastel, dark, aesthetic, etc). Add whatever color you'd like from your desired palette.

Now resize your png 100px bigger than you need. So if you're making 100X100 icons, resize to 200X200. This gives you some wiggle room when resizing to your perfect size. Then drag your png folder on to your new canvas.

Here's mine:

And after I resize the icon to my liking using the transform tool by going to Edit > Free Transform and while holding down "shift" drag the corners in to make the png smaller:

Next is to edit the the icon design. My default is to add a gradient fill in black and in white by going to Layer > Fill > Gradient and with these settings:

Then I change those both to "Softlight" and change the opacity to some where between 10-60%. Here's my icon now:

And my layers:

Now to edit your image. Since everything is in a masked group, you can edit, color, etc and only edit the image. You can also color on blush, makeup, etc and being able to color "over the lines".

You can add a psd, or edit your icons individually. I'm just brightening and balancing the colors. Here's my icon now:

I'm also adding some color over the image, here's what I've painted:

And then set those to color and lowered opacity:

Now you can add your finishing layer edits over the top of everything. Here's my final layers:

You'll notice I have the base color and the color on his jacket labeled as "Color - " this is because these are all the layers I need to change the color of for each color icon I'm using later.

The very top layer is always the overall color I want the icon to have. I usually just use the eyedropper tool and select a color inbetween the light and dark of the background:

Then I set that to "Softlight" and lower the opacity so my icon can better match the background color:

Okay so now the "Batch" part. For each layer you have to color, duplicate it for each color you need. So to make it easier, name each set the same number, so for my base purple, everything is named "1", for the blue it's "2", red "3", so on and so on. I'm going to group my character, and the character related color, in this case the jacket color together and name my group after my character. Here's my layers:

Make sure none of the colored layers are visible except "1".

Now, one by one, drag your other characters on to the canvas. Follow the early steps to resize, edit, and color each of these and hide them except your first one, same as the colors.

Here's my layers now, this is a small image, but you can see I just added the other characters on top and hid all the layers except the first character and purple bases. I also made a note of which groups have additional color layers (like the jacket for Five and the dress for Ludovica):

Now you might want to save your icon as a .psd and then re-save it as a psd with a different name so you have your base and now a new on for these next steps.

Now, go to Window > Timeline. This may be different depending on which version of PS you have, but we're using the "Frame Animation". Here’s what you should start with: 

Now click on the “New Frame” icon to add a new frame:

Then one by one, un-hide the next group of colors, so hide all the “1″ layers and un-hide all the “2″ layers. Here’s my next icon: 

Now go through each layer and character by adding a new frame, hiding the current color, and un-hiding the next color. Do this until all your icons are shown on the timeline like this (edited to fit):

I also made a more aesthetic set too, super quick because if you duplicate this entire base, and change all the colors- in my case 5 to a new color scheme, all my frames will change since I’m changing the actual colors. So just click on the first “1″ frame and change the color of all the “1″ layers, then click on the first “2″ frame, change the colors, etc, etc until you get to the last color. You will see as you change the color of the layer, all the frames will automatically change. Here’s my other set: 

Now to sharpen. Group all your layers so you just have one group with all your layers (including all the colors, characters, etc). Now I’ll be using the timeline, but if you don’t have CS6, just merge all your frames into layers:

Then either sharpen all your layers on by one, or run an action if you have it. 

For me, I’ll convert the “Frame Animation” into a “Video Timeline”:

Then I’ll convert my group into a smart layer by going to Filter > Convert For Smart Filter. Then you can sharpen all your frames at once.

Once you’re done, click on the timeline settings, then go to Convert Frames > Flatten Frames into Clips. Once that's done, regroup all your layers and click the timeline settings and then click Convert Frames > Convert to Frame Animation

Then you’re back with all your frames. Click on the timeline tool again, and click on “Make Frames From Layers” to make all your frames show up. 

So on to saving. You’ll want to first save your base, then go to File > Export > Render Video. Here are the settings you need to use: 

Name: This is where you name your icons

Select Folder: Save location

Type: Make sure to choose “PS Image Sequence” so it saves every frame

Format: File format, I always use PNG

Once it’s done, all your icons will be saved in the folder you chose. Here’s a peak at all mine:

Since I already know how to use this method, I made 50 icons in about 10 minutes, and that includes cutting out all the images! It’s also super easy to set up your base (with your frames added) and duplicate the entire image a few times to make multiple color schemes at once. I made over 150 icons in vibrant, aesthetic and dark colors in a matter of minutes. 

I hope this tutorial helps and good luck on your icon making!

[klausesdiego]

BASIC COMPREHENSIVE GIF TUTORIAL

This is my first full fledged tutorial so please let me know if anything is unclear or if you have any questions.

REQUIREMENTS (or at least what I use to make gifs):

VLC Media Player

Photoshop CC 2018

CAPPING

So in order to create a gif you need a screencap of every frame within a sequence to make said gif, kind of given. In VLC it’s a complicated process in which you need to press a button to screencap the current frame, press another button to move to the next frame, and then continue the process until you have enough frames for the gif.

Press CTRL + P to access the VLC menu and you should see something like this.

You then want to click on VIDEO on the top and navigate to the BROWSE button as seen below.

How VLC works is that every screencap that you take automatically goes into your pictures folder on your desktop. By clicking browse you can create the destination where you want the screencaps to go. I usually make a folder for each gifset and then a folder for each individual gif, mostly ‘cause I’m particular about that kind of thing. Here is what my folders look like.

Once you have all the screencaps you need or desire then comes the fun part! Gif-ing!

GIF-ING

The first thing you want to do is open up whatever version of Photoshop you have. I use Photoshop CC 2018; yes, you have to pay for it, but I think it’s worth it since I can afford it (only $9 a month) and I use it so frequently I need a reliable version. I’m sure there are cracked versions out there but please do not ask me to look for them for you, you can do some googling to find them.

The most important thing is that the TIMELINE is on your set-up. I couldn’t find a way to cap it but if you go to the top underneath WINDOW, it will be near the bottom labeled TIMELINE.

Now you need all your screencaps, right? Going under FILE (on the same line as WINDOW), there should be an option called SCRIPTS toward the bottom. Hover over that and then select LOAD FILES INTO STACK.... I have this put as a shortcut, and I would highly recommend making a shortcut for it as you will be using it very frequently! 

This is what you should see at this point.

Click on the BROWSE button and it will open up your file folders. Navigate to where you put all your screencaps for one specific gif, you can only make one at a time, and select them all using SHIFT + CLICK. With all the screencaps loaded it will look like this.

And then you can select OK. You will have to wait a while for all the caps to load, on older computers or computers with less ram it takes a much longer time, but be patient. This is what it should look like now.

Click on the button at the bottom of the screen labeled CREATE VIDEO TIMELINE. And then you will click on the three little squares button in the bottom left hand corner.

Then you will click on the button of the three lines (a lot of button clicking at this point), and click on the option MAKE FRAMES FROM LAYERS.

I can’t get it to screencap, but after you make the frames from layers all your frames are going to be backwards so you need to click on the same button again and click on REVERSE FRAMES. Once all the frames are in the correct order, select all of them using SHIFT + CLICK and click on the upside down arrow on any of the frames.

This is where you can set your delay: basically how fast or slow you want your gif to be. I always set my delay to .05 seconds. As a rule of thumb, you never want a gif faster than .03 seconds, or slower than 1 second. After that you can close up the timeline by click the three squares again in the left hand corner and now your gif looks like this.

You can press the PLAY button at this point to see your gif move and see if you messed up at any point and need to go back and delete frames or change the speed. But other than that, you know have a perfectly done gif!

SIZING

Tumblr’s dimensions are weird, they used to be 500px across for a single image but now they’ve decreased the gutter and single images across are 540px. Don’t worry if this doesn’t make much sense. A good guide is this, 

Basically what this means if that you want a gifset with a single gif across the whole post, make the canvas size 540px. If you want the gifset to have two gifs across the whole post make each gif 268px, and so on and so forth. Tumblr does not allow more than three gifs to be put in a single row, and no more than 10 gifs in a single post.

You can change the gif size by pressing a keyboard shortcut CTRL + ALT + I. Then change it to whatever you want it to be. For this tutorial, I will change it to 540px. 

After that your gif is ready to be seen by Tumblr! Or is it? Most gif-makers create PSDs for their gifs, settings for coloring and lighting that can make a gif look prettier. You can find lots of PSDs online by searching google or tumblr and there are many different types. After this tutorial, I will be making a coloring and sharpening tutorial as well so keep an eye out for that!

SAVING

To save your gif you want to press the keyboard shortcut CTRL + SHIFT + ALT + S. 

At this final stage you want to make sure that the number that is circle is LESS than 3.00M. Tumblr does not accept gifs larger than 3 megabytes and the gif will upload fine but it will not play. And that’s how you make a gif!

I hope this helps people understand gif making better and please, if you have questions my ask box is always open!

[todorokiscute]

How to make responsive themes

A very basic tutorial

This tutorial was requested by an anonymous person. I hope I got to explain well!

difficulty: ★ ★ ★ ★ ☆ You really need to know your way with html and css, plus, you’ll have to style all the other stuff (text decorations, links, dates, audio, asks..) on your own.

I’ll explain only how to wrap correctly the tumblr’s blocks and the very basic structure of a responsive theme. I’ll not explain how to, for example, how to put dates, captions, tags, pagination, and other custom stuff, okay :)

✩⁺˚ Basic Base Code ✩⁺˚

I did a base code so I make this tutorial following the code, to avoid issues. First thing is to understand what we have in the code. We have our blocks and variables and I wrapped the inner content of the {block:Posts} with a .post{ } div. To make a sucessful responsive layout, you must work with CONTAINERS. That’s why I wrapped the outer content together with the block:posts with a .posts{ } div.

I did the same thing with the sidebar. I have boxes with my content with a .box{ } div. And an outer div wrapper with a .sidebar{ } div. Wrapping everything, both sidebar and posts wrapper (with all the sub wrappers inside), I used .content { } because we need a container for the whole page. That’s the basic to make a responsive layout.

Important: So if you don’t want to use this base, and want only to integrate the wrapper divs on your codes instead. Just look for {block:posts} {/block:posts} and wrap everything inside with a div (mine is .post). Then wrap the outside (including the block:posts) with another div (mine is .posts).

This an example of a simple markup with wrappers:

<div class="posts"><!-- the outer wrapper --> {block:Posts} <div class="post"><!-- the inner/content wrapper--> Posts content, blocks and variables goes here! </div><!-- wrapper content end --> {/block:Posts} </div><!-- wrapper end -->

Now, it’s the CSS part (<style></style>).

In the base code there is already a {CustomCSS} line with a comment. That’s the variable for us to be able to make the customizations in the advanced options section. I like to use this instead of copying the source code and using other editor. This way, you can apply the css and see the changes live. We also have a universal selector with a box-sizing border-box, a nice trick that make our paddings look nice and not shit.

First thing you need to do is apply a flexible css to the content. That’s basically the most important action to make while creating a responsive layout. In the Add Custom CSS section, paste the following code:

.content{   width:80%;   margin:1em auto;   max-width:800px; }

What we did? width:80% is to make sure our content will always have a width of 80% no matter what screen size your blog is being viewed. use the chrome inspector tool (ctrl+shift+i) to resize the screen and see that the content will never touch the window sides and it will always be centered.There are things like images and pre codes overwriting the window, but that’s other css styles you’ll need to search to fix.

The text itself is already responsive! We also used margin auto to center the content. And the 1em value is relative to the top and bottom, giving the content some air to breathe. We also give a max-width of 800px for the content to look nice in desktop version. Without shrink everything and look more solid on computer’s screen.

Moving on.. now is the part to pay a lot of attention: The posts and sidebar. First thing, add these lines to the css part:

.posts{   width:70%; float:right; } .post{   background:#f5f5f5;   padding:1em;   max-width:500px;   margin-bottom:5em; }

Like I said before, we need containers to make a responsive layout. .posts { } is our posts container and .post { } is our post-box div. Since .posts is a child of .content{ } if you give it a width of 70%, it will be relative to the parent (content) and not the window. This is good to make all the posts floating to one side. That’s why we apply the float here, instead of the post boxes itself, to avoid a mess in the code.

In the .post{ } section, is where you’ll apply some css to your posts. Using max-width will make it more solid on desktop, same as the content, and margin-bottom is to make the posts boxes have a space between them.

Now it’s the sidebar’s time. Add this:

.sidebar{   position:fixed;   width:20%;   top:50%;   transform:translateY(-50%); } .box{   background:#f1f2;   padding:1em;   margin-bottom:3em;  max-width:200px;   }

It’s the same method as the .posts and .post. .sidebar is the wrapper and .box is the sidebar box. The only change I made is that I gave the sidebar wrapper a fixed position and used a little trick to center it. Like the post box, I added a max-width to make it solid. This is the responsive layout so far:

Noticed that we didn’t added any complicated css stuff until now, we’re only working with percentages and max-widths. that’s the most basic rule I’ve learned when started to try responsive layout.

The only step we need to finish this basic responsive layout, is  to apply css to certain screen sizes. Because we don’t want the content all smushed in a mobile device. We want our content displayed as blocks one on top of each other. For that, we’ll use @media queries.

We need a breakpoint to literally break our theme when the device’s screen size changes. For this simple layout we’ll use a breakpoint of 670px. If you want to make sure how to find this value, save your theme until now, go to the blog, inspect it with chrome and use the responsive tool to resize the screen and see where the content is start to look funny.

Then, we’ll use this code:

/* responsive */ @media(max-width:670px){

}

This means: when the device of the person who is viewing your theme, is 670px wide or less, a certain bit of css will change the content’s appearance. Every code should be inside the media query’s brackets!

To make our current layout responsive for mobile, all we need to do is unset some things and apply width of 100%. Let’s start with our sidebar, since our content does not need edition, unless you want it bigger on mobile, then you must add a new .content{ } inside the @media query and added a width of 90%, for example.

Now, to edit the sidebar on mobile, inside the @media query, add:

.sidebar{    position:static;    width:100%;    transform: none;    margin:3em auto;

} .box{    max-width:none;    width:100%; }

what we’ve changed? Since our sidebar was fixed positioned, we unset that using position:static, the default position of everything html. Instead of a width of 20% we now use 100% to make sure the sidebar will fill all the content, its parent. We also, unset the transform css we used to center the sidebar, and added a margin top and bottom of 3em to have some room between the top of the window and posts.

Since we don’t need the solid layout anymore, we unset the max-width of the box and added a 100% width just for consistence purpose.

The best way to see what you’ll need to unset when breaking your theme into a mobile version, is just to look what codes you used on the desktop ver and try to change on mobile. widths, positions, etc.

Now, it’s the posts time. We also have a max-width, a float and a width applied on our desktop version. All we need to do is unset that:

.posts{    float:none;    width:100%;

} .post{    max-width:none;    width:100%; }

We made sure our post wrapper are not floating to the left anymore and unset the max-width of our post boxes. We’ve also added a 100% width to both wrapper and box div.

Now our theme is fully responsive!!!!!!!!!!! The only thing I need to talk about is:

apply font-size of 1em and a line-height o f 1.8  to the body so the font will be nice in every screen size. If you think that the font is too big for desktop, you can apply the font to .8em, for example, and 1em in the media query.

body{ font-size: 1em; line-height: 1.8; }

apply a max and width of 100% to images and players:

.post img{   max-width:100%;   height:auto;   display:block; } .tmblr-full {   margin:0;   max-width:100%; } .tumblr_audio_player{  width:100%; }

To avoid the pre code (if you have on your posts) to overwrite the post box, use this css:

pre{   white-space:pre-line; }

As a good person I am :^) , I’m going to drop the code for the captions here:

/* captions by todorokiscute, please don’t repost. */ .reblog-info, .answerer{   display:flex;   align-items:center;   margin: .4em 0; } .reblog-info img, .answerer img{   width:30px;   margin-right:.5em; }

Let me know if there are others tutorials you want me to write. I hope I was clear in this explaination and that you have picked the responsive idea. have fun with responsive layout, it’s addictive.

Some tutorials on how to style the tumblr’s blocks posts I already have:

tumblr responsive videos

asks/answers posts like chat bubbles

sticky sidebar on scroll and responsive

make photosets and photos looking like tumblr’s in the dashboard

npf posts simple fix

Style Horizontal Line

Post Link’s style like Tumblr’s dashboard

How to make a fixed contained theme  responsive

Make the ‘p’ (paragraphs) look nice

Style ‘keep reading’ link

I made a second (very simple though) tutorial on how to make a responsive theme using display grid. Check it out.

[thatscarletflycatcher]

How I make gifs (an easy way to make pretty decent ones with freeware in a reasonable amount of time).

UPDATED ON NOVEMBER 3RD 2019.

I will try to explain in this post how I make them and the things I’ve learned so far. I’m open to contributions. 

This is one of several ways in which you can make gifs; the one I find the easier and most intuitive. The secret is to find the one that suits you best. 

Making a gif consists essentially of three basic steps:

Getting the clip you want to make a gif out of.

Making the actual gif.

Editing the frames (modifying color and speed, adding text or watermarks, sizing it down the Tumblr limit, and so on.)

1) Getting the clips:

The two most usual ways to do this is by downloading a clip from YouTube or by trimming the scene we want to gif from a larger file we have saved to our hard drive.

Downloading/trimming videos with VLC Player: VLC Player is an application that, even if not fancy, is an easy and useful tool to take snapshots, trim clips and even download videos. You can download the application for free from the official website here.

Downloading/trimming videos with Real Player/Real Trimmer: You can download this program for free from the official website here. This program has an option to add a Chrome extension to Google Chrome that allows you to download clips from Youtube with one clic as explained here. The files will be saved to the Video folder of your pc, on a sub folder called Real Player Downloads. An explanation about how to trim videos with Real Trimmer (you can install it as you install Real Player) can be found here.

2) Making the gif:

For this step I work with a life saving website called ezgif.com

Now that you have downloaded/trimmed your clip (note: for ez to be able to process your video, it must be 100mB or smaller in size) I recommend you to create a folder for your gif/gifset. It will be useful later. I personally have a “My gifsets” folder and then sub folders on it: ones to save the finished gifsets (”MCU”, “Austenland”, “Stephine”) and another called “To process” (We’ll get back to this one later).

Upon accesing ez, the website will show you this:

(It may take a little while to upload. Be patient.)

(Don’t worry if some unwanted frames make the cut: we’ll dispose them later.)

You’ll probably have now the draft of a pretty (and pretty heavy) gif. The first goal is to reduce the file size of the gif as much as we can. Keep in mind that Tumblr’s maximum size for a gif is 8Mb, and the width of the dash is of 500px. Below your new gif, you are going to find the following buttons:

crop: this part is pretty simple and intuitive. You can choose between several preset size ratios or create your own. The important thing to keep in mind here is that if you are going to make a gifset, all your gifs must have the same height and width. I recommend you to write down the final width and height of your gif (It appears on the first box below the gif, after “left” and “top”). Clic on “crop image” and the cropped version will appear. On the box below this latter, clic on “resize”.

Resize: I personally like large gifs, though, for a two column gifset you won’t need gifs wider than 250pp. I think, for that kind of gifset, 400pp is a good width to reduce size and at the same time allow people to enlarge the images. For a post-wide gif, 500pp is the ideal size, though 450-475pp can still work somewhat ok. Of course, you can try a wider size first and then make it smaller later if you find you need to. Width and height aren’t the only factors that affect gif size: the number of colors and frames are very important too.

Once this step is completed, we move on to frames. This is where we get rid of those unwanted frames we spoke of before. Generally speaking, a Tumblr gif of a decent quality made this way will have between 50 and 66 frames (again, a smaller gif with few colors on it will allow far more frames than a wide, color-varied one.) If our gif is still too large (Over 10Mb) we will have to remove more frames. You must take care of removing a frame every a constant number of frames (every 5th frame, every 8th frame) or otherwise the gif will move unevenly. You can check how lighter your gif is getting by clicking on “Make a gif” and checking the size below the image.

Speed: usually we want to emphasize what happened in the scene and to that purpose we need to slow it down a bit, between a 90% and 95% of the normal speed. If you have removed frames in the middle, you’ll have to slow the gif down to the 80-60% of its speed at this stage.

Once we have done this (it doesn’t matter if our gif is still over 3Mb. It is enough if we have downsized it to somewhere in between 9.5Mb and 12Mb), we’ll click on “split” and then, on the next page, on “split to frames”. Then we’ll scroll down to the bottom and click on “download frames as zip”. Once the file is downloaded, we are ready for step 3.

3) Editing the frames:

For this step you are going to need FastStone Image Viewer, an image editor you can download for free from the official website here. This program, which is similar to what Picasa used to be, has the main advantage of allowing you to process images in bulk.

One of the main drawbacks of using ez is that it dulls the brightness and contrast of the original video. Faststone allows us to correct that, and also to do things like adding text without making the gif that much heavier, adding a watermark, and so on.

Editing contrast, brightness, etc: Once we have installed Faststone, we’ll unzip the images into the folder we have made for this purpose (the “to process” folder I mentioned above) and open it from the Faststone navigator (It works almost exactly like the windows folder explorer, so there won’t be any surprises here). 

On the menu bar, go to “Tools” and then “Open batch convert/rename dialog”. This will open a new window. Click on “add all” and then on “advanced options”. It will show yet another window. Go to the adjustments tab and clic on “design and preview”. Once there you’ll be able to manipulate the different aspects of the image to make it brighter, lighter, etc. Once you are done with this, clic on “close”, then proceed (or not) with the other tabs (text, watermark, etc) and then  clic “ok” on the next window and “convert” on the last one.

Once our images are nicely edited, we’ll go back to ez, and instead of clicking on “video to gif” we’ll click on “gif maker”. We’ll upload the edited images and click on “upload and make a gif”.

Usually after the editing, the new gif is a bit lighter than the one we downloaded first. In any case, if it is still over 8Mb, we are going to need to optimize it. Clic on “optimize” and try different degrees of size reduction up until 20 (I think any compression harder than this makes the gif too grainy). If it is still too heavy, I recommend you to go back and try to crop/resize/remove frames again. Once you achieved the coveted under 8Mb file size, your gif is ready!

Before editing:

After editing:

I hope anyone that wants to make their own gifs find this helpful. Feedback is most welcome.

[zevzevarainai]

same anon from before,, ;u; how did you like,,, give them filters?? they're very pretty, not to mention my gifs are always over the limit for some reason, even when they're extremely small

i’m flattered that you have chosen to come to me!! under the cut i will be covering the most basic of basics in my gif making processes. i use photoshop CS5 but these are likely transferable to other versions of photoshop dont take my word on it ok buckle up kids

Sizing

To get started you obviously want to find what you want to gif. Generally, I’ve found that the less realistic the footage is, the easier it will be to make it a small file. For example, making an adventure time gif will be much easier to get under tumblr’s limit than a live action movie or show. Remember that tumblr’s gif size limit is 3MB. There’s many factors you can control to get the picture size down, but the main two are the amount of frames in a gif and the pixel size of the image. 

I try to keep my frames between 80 and about 130. The fewer frames will help decrease file size, but you have to watch the animation for sometimes too few frames can make the gif hard on the eyes or tacky (for lack of a better word).

For image size, I first crop the image to the part I want to gif and then reduce it to a width of around 500px. This is for the standard 2x4 post I usually do (example). It might look small in photoshop, but remember tumblr shrinks it to fit in the post. 

Coloring

The best way to color gifs (or add filters) is to experiment. There’s really no correct way. I’ll show you where you can find the tools to start experimenting.

First, I like to put all my layers into a group folder. Then, you’ll want to click on this black and white circle which will open a drop-down menu. It’s fun to mess around with all of them, but I’ll talk about the ones I use the most: Brightness/Contrast, Levels, Vibrance, Hue/Saturation, Color Balance, and Selective Color.

Brightness/ContrastThis one is pretty self-explanatory. This feature makes your picture lighter or darker and can add more contrast between the colors in the image.

Let’s start with the base image. I’ve taken a random clip of pearl and agate for the purpose of this tutorial. This is what it looks like in its unaltered form. The brightness and contrast window is right next to it.

Unaltered, the image is already very bright by itself. You’d play with this setting if you wanted to make a darker gif with that scene or maybe bring out the colors with less contrast. It might help with a pastel gifset, which I will talk about in Levels.

LevelsI’ll be honest, I didn’t know what this meant until I wanted to try pastel sets and searched for tutorials. 

Levels is going to give you a weird ass lookin’ graph like this. It will vary depending on the original image, so don’t panic if it looks different than my example. Bringing the middle arrow to the right of the scale makes the image darker and more vibrant, like so:

On the opposite end, bringing the arrow to the left will give a more pastel effect.

It’s best to just play around with this one; results really depend on the original image. You might want to go only a little to the left, or much higher -- you’ve got to use your eye and what you think looks best. 

ViberanceViberance is a good choice for when I want to bring out the colors of my gifs or even tone them down.

If you look back earlier at the original image, this picture altered with the viberance adjustment has a bit more color. It’s more... vibrant. Saturation is used to make the colors pop (going right) or make the colors more dull (going left). I upped the saturation in the image above; let’s see what happens when you go down:

It takes out the color, but not so much so that it is made black and white.

Hue/SaturationThis setting is similar to the saturation in viberance, but you can get more detailed in this one. Let’s say I want to tone down agate and bring the focus on pearl. We’re gonna go back to the unaltered clip. In the window, there’s a drop-down with different colors. These are the main color categories photoshop works with, so to speak.

Let’s go to blue, as that is agate’s main color. Our options to mess around with are the hue, saturation, and lightness. I’m going to take down (move the arrow to the left) agate’s saturation and lightness. 

Now she’s practically black and white while pearl, who doesn’t have any blue on her (it’s cyan), stays the same.

Wondering what the top bar is for? You can use that to change the color. Let’s say for some reason, I wanted to make this blue agate one of pink diamond’s agates instead.

Move that bar around +90, you’ve got a pink agate. It was a little grainy, so I messed with the lightness too. You can experiment with all kinds of colors!

Color BalanceI rely on this one a lot. Here we are with the unaltered image again. In this window, you can see three tones -- shadows, midtones, and highlights -- as well as three color bars. The highlight setting colors the pictures highlights, the shadows color the shadows, and the same for midtones. This is a good setting for a “filters.”

I would be lying if I didn’t say my main strategy here is to just mess around with it until I get something that looks decent. I’m going to give this a pink/magenta-y color balance setting as 1) I like it on Pearl and 2) I just like it in general. This image is a bit over-exaggerated for the sake of a tutorial.

As you can see, moving the arrows toward magenta and blue have given it a pink “filter.” It is up to your best judgement to decide how far those arrows go down the bar, and don’t be afraid to combine changes in the other tones, too!

Selective ColorThe main reason I use this adjustment is to avoid whitewashing. It’s easy to do it by mistake when making pastel gifs. Let’s take Marina from Splatoon 2 and say I want to make a pastel splatoon set. Here’s the original image. I already used Color Balance to get the color I want.

Now I’m gonna add the pastel with Levels -- AHH! What happened to her skin?? NO THANK YOU. BAD. 

Let’s fix that immediately. Here comes Selective Color! It will give you the option of colors to alter. We want to choose Red, as where that’s where most of the brown comes from. She also had a bit of yellow in her face, so I altered that too. Go to the bar labelled ‘black’ and push it to the right.

Better! She keeps her dark skin while still keeping the pastel feel. 

What a cutie!!

You can use this adjustment setting when you don’t want a certain color to be as altered as the others.

Saving SettingsSaving your gif is probably the most frustrating part of the entire process. I sit waiting for it to load, asking it to please be under 3.0 MB. If you don’t already know, File>Save for Web & Devices will look like this.

Sometimes, Photoshop will make your gifs look like garbage. This is frustrating. To work around it, you are welcome to copy my settings. Be sure to change the colors to 256 for the best quality. 

Luckily, my gif came out to below 3.0MB. If yours doesn’t, don’t panic. Make the image smaller or take out some frames.

Hope this helped! Happy giffing!!

[00250]

gif tutorial

hello all!! ive been meaning to do an updated gif tutorial for a while now since i’ve changed the way i make gifs since my last tutorial so here we go! today we are gonna learn how to make a simple gif like this beautiful lady right here:

you will need:

photoshop (i use CC 2017 but other versions will work fine)

VLC media player (free download here)

a video that has the scenes you want to gif

a basic understanding of how to use photoshop

there’s a lot of text in this which may look daunting, but i promise it’s a simple process. i just wanted to be as in-depth as possible for those who may just be starting out in their gif-making journey!

this is a full tutorial for making the gif above, including colouring.

step one: get your video clip

okay! to start off, you’re gonna wanna get a short clip of the exact scene you want to gif. this step isn’t always necessary, especially if your video file is like 10 seconds long, but i’m usually giffing from the tmr movies so i like to trim that to just a short 5 second clip of whatever i wanna gif first!

you’re gonna wanna open up VLC media player and open your video file using CTRL + O. i’m gonna use the tdc movie! find your scene and figure out what part you want to gif - then, pause the file a couple of seconds before that and hit the little record button on the toolbar, circled in red below. then hit play, and stop the recording by hitting the circled button once more whenever you’ve gotten the frames you want.

note: if this isn’t visible for you, go up to the top and hit View>Advanced Toolbar. i’m not sure if this is already done for you when VLC is first installed cause its been a Long time for me 

after this, what you’re going to be left with is a short video file that just has the frames you want for your gif! this is a lot easier for photoshop to work with and generally helps the program run a bit faster, too. the clip should automatically be saved into your computer’s videos folder.

step two: turn video clip into frames

now that we have our clip taken care of, we want to turn that into frames! i know a lot of people use photoshop’s video timeline thing to make gifs, but i’ve never done it that way and don’t know how to so we’re gonna work with frames.

open up photoshop, and go to File>Import>Video frames to layers... and select your video. this little window will pop up:

you can either import the entire clip to frames, or you can use the little arrows (circled in red) to trim it even more. usually i do this just so i’m not making photoshop create frames i’m not going to use. the more frames you have, the longer it will take!

then hit OK, and photoshop will make a new file for you with all your frames, and layers corresponding to each frame. right now your workspace should look something like this:

step three: resizing 

from here, we’re going to take all our frames and copy them into a new file with the correct size for tumblr. it’s important to copy them into a brand new file, because resizing the one photoshop made for us (in the dimensions of the original video file) will just make the frames gross and blurry. 

to do that, just go to File>New or hit CTRL + N. This’ll open up a big menu with a bunch of different crap happening but this part is what really matters to us:

this may look different depending on what version of photoshop you have, but what’s important to us is the width, height, resolution, and colour mode.

width and height: i know tumblr changed their dimensions like two years ago but i immediately downloaded an extension to show everything in the old dimensions cause i like them better, so that’s what i use (500px width). so if i’m doing a wide gifset, i usually do 500px width and 225px height, but it’s completely up to you. just remember that the more pixels you have, the larger the file size will be!

resolution: for web use, 72 px/inch is perfect. the only time you really need to change it is if you’re printing something, then you’d want 300px/inch. but that doesn’t concern us, so we’ll move on.

colour mode: this one is important! most of the time, RGB colour/8bit will be the default setting, but i always like to check to make sure because sometimes it’ll go screwy and end up in grayscale, and then you lose your colours and it’s really annoying. if you ever have to change this midway through a gif, you can go to Image>Mode to change it back.

okay, so once that’s all done, click OK and you’ll have your new file! now, we have to copy the frames over.

so, we’re gonna go back to our file with the frames and click the little icon with three horizontal lines that’s right above your frames on the right side, circled in red. this’ll open up a little menu, where you’re gonna hit Select all frames and then Copy frames.

after that’s done, you’re gonna want to go to your new file you just created (with the tumblr dimensions) and hit Create frame animation down in your timeline. If you can’t see the timeline, go up to the top right corner and make sure you’re in the Motion setting for workspace.

once your timeline looks like this, you’re set to go:

now you’re gonna click that same three horizontal lines icon, and select Paste frames. you’ll get a popup that looks like this, and you’re gonna select Paste over selection.

and now your frames (and the corresponding layers) are copied into your new file!! very exciting!! but we have to resize them. so, you’re gonna go into your layers panel and select all of them (you can do this by clicking the bottom one, scrolling up to the top and clicking the top one while holding the SHIFT key). since you just pasted them, all of your frames in the timeline should be selected so we don’t have to worry about that.

with everything selected, you’re gonna hit CTRL + T and then drag the corner of the frame while holding the SHIFT key (to keep ratios in tact), until your frames are the right size. at this point you’re also gonna wanna maneuver them around so they’re actually in the frame of your file. it may be helpful at this point to zoom out (using CTRL + -) so you can see everything that’s going on on your canvas.

note that in both of these screenshots, ALL my frames and ALL my layers are still selected. this ensures that every single frame will be resized and moved at the same time, so everything is consistent.

hit the little checkmark up in the toolbar or the ENTER key, and you’re set!!

also, just a tip from personal experience - don’t resize your frames so small that the edge of the shot is right on the edge of the file, cause once you sharpen, you’ll get an annoying white line. 

step four: looping, frame delay, and sharpening

you’re almost there! the hard part is over. you’re doing great, my friend.

so in order to make your gif loop over and over again like you’d expect a gif to, you have to set the looping to Forever. this can be found in the bottom left of your timeline, circled in red.

if you ever post a gif on tumblr and it goes once and then freezes, the first thing to check in photoshop is if you’ve missed this step or not!! often times, this is your fix.

next, we’re gonna set the frame delay. this determines how fast or slow the gif runs. for me, one of the biggest markers of gifmakers not knowing what they’re doing is when their gif runs so fast it hurts your eyes. everyone has their own preference for frame delay (and it often depends on your souce video, too) but i generally like to stick between 0.08 seconds and 0.13 seconds. 

to change your frame delay, select all your frames and then click on the little arrow beside the 0.04. this’ll bring up a menu of options - hit other, and you can enter your own value here. 

i picked 0.09 seconds. now, our gif is ready to be sharpened!

this part is a little bit tricky and can be REALLY time consuming (especially if you have a lot of frames), but with some practice, it can be really easy.

when you’re working with frames in photoshop, you have to sharpen every frame individually. once i played with the sharpening settings enough, i figured out a general setting that i liked to apply to all my gifs, and then i made an action. actions in photoshops are basically just folders containing a sequence of steps, and you can use actions to have those steps automated. when it comes to sharpening, it turns a ten minute job into a 30-second job.

this is what my action looks like:

first, it takes all my frames and turns them into layers named “Frame 1″, “Frame 2″, and so on... then, it selects the first layer, and then selects the first frame, and sharpens that layer for that frame. then it does this again, and again, and again, until it’s out of frames. 

my favourite ps blog, @yeahps, has a lot of actions here, but i encourage you to try and figure out your own! you can play around with the Filter>Sharpen>Smart sharpen settings on a single frame until you like the results, and then apply that one to all your frames! just make sure that when you’re sharpening a frame, you select both the frame and the corresponding layer or else it won’t work. 

here’s what my gif looks like without and with sharpening:

so you can see it does make a big difference! once we’re done with that, it’s time to colour our gif!

step five: colouring

colouring is my favourite part of gif-making because you really can do whatever the hell you want here. photoshop has a lot of really cool adjustment layers, and you should play around with them all to see which ones you like best!! my favourite ones are circled here:

from L to R top to bottom, they are: levels, curves, vibrance, and selective colour. selective colour is my all-time fav cause it’s really good for changing the colours in a scene - like when the glade grass is too yellow and not enough green, or when the gladers faces are too orange at the bonfire. 

if i’m not doing anything too extravagant, i have a basic process i use for colouring my gifs that i’’ll show you guys now.

first, i always do curves. you can use curves in a couple different ways, but i usually stick with the RGB setting. i always do my first curves layer like this, to bring up the brightness of the whole gif:

and that gives me this:

next, i go for levels. this i use to make the gif even brighter, but also to darken the shadows. usually my settings will look something like this:

which makes our gif look like this!

then, i do selective colour. i like this one because you can change the settings for every individual colour in your gif, which can give some pretty cool results. usually i make the blacks blacker, and the skin a little less red/yellow if the lighting is weird. i really suggest playing around with this one as much as you can!! with some selective colour adjustments, this is what our gif looks like now:

i really like green so i decided to make the gif have more green undertones! i also made the blacks more black, so the dark parts are a little more bold.

as a final kind of thing, i’ll add a vibrance/saturation layer if i want the gif to be more colourful - but be careful with this one, cause it can really raise the file size of the gif. right now, tumblr’s file size limit is 3MB. for 500px gifs, i can usually get away with about 35 frames before it gets too big.

i also like to add another curves/levels layer, cause i find that tumblr makes your gifs a bit dimmer than they are in photoshop. with that, this is what my final gif looks like:

woohoo! and it’s only 1.669MB, well under tumblr’s limit. now, the last thing we have to do is SAVE it!

step six: saving

to save your gif, hit CTRL + ALT + SHIFT + S. i know, it’s a lot. your fingers get used to it. that’ll bring up a window that looks like this, with a whole bunch of crap you can adjust:

these are all my settings that i normally use. i’m sure there’s someone out there that has an optimized version of it, but this has always worked for me! the main things you’re gonna wanna doublecheck are what i’ve circled in red: bottom left corner tells you the file size (which needs to be under 3MB - if you need to cut this down, i’d shave your width/height or delete some frames), the number of colours at top right (should be 256, but you can put less if you want a smaller file), image size (aka width and height), and looping options, which should be set to forever!

once that’s all squared away, you’re gonna hit save and name your file however you like. then, you’re done!!! you did i!!!!

some extras

before i finish this very long tutorial, there are a couple other resources/things i want to share re: gifmaking.

@yeahps is my all time FAV ps blog, i learned so much about photoshop just by doing their tutorials. they also have a lot of really good resources! definitely check them out if you want to learn more about ps.

i also have some more ps related tutorials, which are here. in particular i want to mention the one i have on colouring darker scenes, because i know that tmr has a lot of REALLY shittily lit/coloured scenes.

while we’re talking about colouring, make sure you are aware of whitewashing! everyone has their own style of colouring and most of the time it’s 100% not intentional, but it can be really easy to accidentally whitewash poc when you’re making bright gifs. this is not cool, and you should always try your best to be aware of how you’re colouring! there are lots of tutorials out there on how to specifically avoid this

keep in mind that this is just one way to make gifs! pretty much all of my gif-making friends do it differently than me, and that’s super cool! if this tutorial doesn’t quite work for you, there’s definitely one that will.

as you can probably tell from this tutorial, MAKING GIFS TAKES A LOT OF WORK!! and that’s just One Gif. we didn’t even talk about transitions, text, au gifsets, or like, Multiple Gifs. us gifmakers take a lot of time to put some pretty damn cool content out there, and it feels REALLY shitty when people take those and repost them as their own. so, dont repost gifs. if you like someone’s work, reblog it. you know those posts with big compilations of gifs? yeah, that’s stealing. so is taking someone’s gifs for your imagine posts. if you want to use someone’s gif, ask them! and if you see a gifset you think is stolen, speak up!

on a more happy note: feel free to tag me in your gifs when you post them! i love to see everything this lovely fandom creates :’)

if anyone has ANY questions regarding anything discussed in this tutorial or want to see more ps stuff from me, please feel free to ask!! i love doing this kind of stuff for you guys, and i love seeing more people learn how fun photoshop can be!!!

[zombiemaids]

gif making tutorial for newbies

so for a while i’ve toyed with the idea of making a gif tutorial, and here it is! i first made one of these back in 2014, and i’ve came a looooong way since then in my photoshop skills. so this is the (super duper long) updated version.

in this tutorial you will learn how to: cap frames in kmplayer, load the frames into photoshop using load multiple dicom files, resize and sharpen your frames with an action, colour them, and save them as a gif.

bonus round: putting text on a gif

you will need: photoshop, kmplayer, something to take frames from, patience.

STEP 1: before anything else, make a new folder in your files titled something like ‘screencaps.’ open kmplayer before opening whatever you’re going to cap from. skip to a little before the part you need and press ctrl+g. this box will pop up:

make sure your dialog box looks exactly like this! if not you’ll be tearing your hair out. i personally use bitmap because the files are much bigger in dimension compared to .png files. make sure you extract those frames to the separate folder we made earlier. to cap - hit play, then ctrl+g again and press start. press stop when you’ve finished capping, and don’t rely on the dialogue to tell you that - wait until all the frames you need have played.

STEP 2: go into your screencaps folder and delete any unneeded screencaps. you can always trim them down more in photoshop, but use this time to delete any ones you really don’t need.

STEP 3: open photoshop. depending on if you’ve giffed before, you might have the timeline bar open. if not - window > timeline. then, go to file > scripts > load multiple dicom files. this dialog box will pop up:

search until you find your folder, then select it and click OK. your screencaps will then load into that photoshop window. go to the little arrow in the centre of the timeline, and click on it. a box will pop up with two options - select create frame animation, and then click the button next to the arrow that says just that. don’t freak out at only one frame appearing...

this will give you this...

yay!

STEP 4: select all your frames. you can do this by pressing the little button at the top right of the timeline from earlier and clicking select all frames. then, click the little arrow with 0 sec next to it underneath any frame, then click other in the box that appears. gif time is a hot debate, but i like to set mine at 0.07 regardless of the frame rate. type that in and click okay. your frames now have a running time! then, click this little button here:

this will send your frames into timeline mode. go to your layers panel and select all your layers. right-click them and select convert to smart object.

STEP 5: resizing time! grabbing my megaphone for a sec - !!! ALWAYS ALWAYS ALWAYS RESIZE YOUR IMAGE TWO PIXELS LARGER !!! this is because you can have weird transparent borders when you resize it and they count for 2 pixels. make sure you have constrain proportions checked and then enter a width 2 pixels larger than the original tumblr width (eg, 245px becomes 247px, 500px becomes 502px) for your width. click OK. zoom in to 600% on your gif and scroll down until you spot the borders - they’re a little lighter than your image and right at the edges of the image. select round then with the elliptical marquee tool like so:

then go to image > crop and zoom back out to 100%. voila! you’re nearly there <3

STEP 6: i use this sharpen action (the timeline one) to sharpen my gifs. to use an action, go to window > actions, and then click the little button (downwards arrow, 3 bars) in the top right of the panel. click load action, and add whatever action you need to your panel. open the little action folder in the panel, and click whatever comes out underneath it (mine goes gif action by morgrana > gif action, and i’d click the latter, for example.) click back to your layers panel. your gif is now sharpened, and you can start to colour!

STEP 7: colouring. however you colour your gifs comes down to personal preference, but the layer order matters. my personal order is:

you can order them however you want, but it’s best to brighten everything before colouring and then putting whatever else on the top if it’s a normal gif. this also doubles as that light psd tutorial i was talking about, since the scene is so bright. it’s gonna be picture heavy here!

brightness/contrast: brightness: 71 contrast: 22

curves: whatever you’d like - i personally try to make mine look a little pastel-ish. use this to brighten considerably - don’t go really overboard or your gifs will look deep-fried.

levels: black: 17 grey: 0.90 white: 227

vibrance: vibrance: +40 saturation: 0

color balance: midtones: -21, -12, +8 shadows: +12, +10, -4 highlights: -6, -7, +2

gradient map: a soft gradient that goes from white to peach to cream is usually your best bet for light scenes. set it to 30-40% opacity and the blending mode to soft light.

STEP 8: time to save your gif! go to file > save for web. check that the file size (bottom right) is under 3MB. set the looping option (bottom left) to forever. here are my save settings:

hit save, choose a file name, and voila! that’s how you make a gif! use this power wisely.

PUTTING TEXT (SUBTITLES) ON A GIF

this is easy as pie. make sure your gif is opened/coloured and then go to the text tool in the sidebar. type whatever you need. my font settings are as follows:

make sure it’s not wedged against the sides of the gif if it’s a long subtitle. then, go to the selection tool up at the top of your sidebar and hit ctrl+a. you’ll see these icons up top:

click the 3rd one, then the 5th one. this centres your text and brings it to the bottom. zoom in to about 500% and then click on your text, dragging it up until the arrow with the line above the head is marked at 0.14. right click your text, click blending options, go to stroke, and make sure the size of your stroke is set at 1px in #000000. you now have a gif with a subtitle.

if you have any questions about this, feel free to ask me :)

[retronator]

It annoys me how tumblr's app doesn't display your art in the crisp, HQ beauty that it is. We should all complain about it. I love your work.

Oh boy, this is a topic dear to my heart. I hope you won’t regret hitting my nerve, because this issue and I, we’ve got some history, so buckle up because it’ll be a long, nerdy ride.

Before retina displays came along, if everything else in your OS was set correct, and you would display an image at 100%, then one pixel in your image would map onto one pixel of your (LCD) monitor. There’s only one way to do this, so if the source image was sharp (as it is in pixel art, including manually scaled pixel art) the displayed image was sharp. I’m saying manually scaled, because from a 100×100px pixel art image, you can make a 500×500px image by enlarging it 5x with nearest-neighbor interpolation in your drawing software, which creates a big, but still sharp version of your pixel art. If on the other hand you let the browser do automatic scaling (you give it 100×100px image and instruct it to display it at 500px width), browsers by default use higher order interpolation (bilinear, bicubic etc). This smooths out the edges, which is great for photos, but not so great for pixel art. The result is a blurry image.

So if you enlarged the image manually for Tumblr’s 500px wide dashboard (today it’s 540px), Tumblr didn’t have to change the image’s size, so it left it as it was, keeping pixels sharp. Everyone is happy. Back in those days I spent a lot of time and effort cropping images to 500/540px so that on the dashboard they would appear crisp as fuck.

Enter retina displays. Now each pixel in the OS was displayed by 4 pixels of the LCD display (2×2). Great for vector things, such as text. Great for photos, where you see 4x more details at the same physical display size. Bad for pixel art, because a 540px image uses 1080 retina pixels per row, interpolation needs to get turned on, and its the blurry, bilinear kind. 

“OK, Retro,” you say, “then we will upload a 1080px image, and interpolation won’t happen.” Nice idea, but what Tumblr does is, it takes the image you uploaded, saves the HD version (which can be up to 1280px wide), but also makes a number of variants for sizes at 540px, 500px, 400px, 250px … And yes, it does this downsampling by using interpolation = blurry pixel art. The way Tumblr displays images on the dashboard, they show the 540px image, even if you’re on retina and you could technically see up to 1080px of information. It saves on bandwidth, but also renders the 1080px upload idea impossible.

Now this is all desktop, computer version, in your browser. What they do in apps is harder to tell, because there are many more screen sizes they have to worry about and I’m guessing things vary between apps. What I can say is that on my iPhone 5s, it’s just as bad as on the website. The 540px native image that Tumblr didn’t scale gets fucked up due to app/iOS scaling, and the 1080px image gets scaled by Tumblr first to 540px (and then again up by the OS scaling) so it’s all the same crap.

Could Tumblr do any better? Yes, but it would require a convention. Because higher-order image interpolation produces better quality in general, it makes sense for it to be turned on by default. They would have to agree on a tag, for example “pixel art” or “crisp-edges”/“pixelated” (if they wanted to mimic the CSS image-rendering directive), that would trigger rendering using nearest neighbor interpolation. As of now, I don’t know any general website that does this. Even DeviantArt, where you semantically choose your image to be pixel art, they don’t use this information to change the way they render the image.

What can you do yourself? You can force your browser to use nearest neighbor interpolation. I made an extension for Safari that does this (called Pixelize), and I think there should be others for other browsers. Obviously I don’t want it turned on all the time, so it’s a button in your toolbar that you can hit when you need it.

For your mobile app, you don’t have any such power. The best I can say is to upload images as big as possible and let the browsers just do the downsizing. This doesn’t apply to tumblr, because it manually creates the shitty 540px version that it then displays enlarged, but for any other network, if they actually display the high-res original (or at least x2 the OS pixels, as it should be on retina displays), you’ll get decent enough quality. 

Quick note for Twitter: inserting at least a pixel of (semi) transparency forces it to save the image as png, which uses lossless compression. If there is no transparency, they will default to saving it as jpg, which creates blurriness/noise due to lossy compression, which is another topic altogether. Don’t even get me started on the idiotic decision to convert GIFs to videos. I’m glad I was able to convince Medium to change back (yes, you can thank me for that, because I am passionate about this).

One final thing needs to be said, of which I was reminded by Cyangmou. Pixel art, or better said old game graphics, were never sharp to begin with. They were displayed on blurry CRTs where pixels bled into each other. Dithering, for example, worked extra well due to this. So when I see ZX Spectrum art today, I’m not even mad if I see it with bilinear image interpolation. It’s actually closer to the original than sharp pixels. Sharp, big pixels are a unique idea to pixel art as an art style and it’s just that, an art style. We love it because of its own inherent interesting look, but it’s not actually something we’d have a nostalgic attachment to, because things never looked like this back then. We do have a nostalgic connection with the characters, the sprites, but their modern pixel art rendering is a new construct. That doesn’t mean it’s not good to display old sprites sharp (as you can see I spend much effort to do so), it’s just an interesting thing to keep in mind.

Bottom line: Don’t worry about it. Looking at art on Tumblr, Twitter, Facebook, etc. is like looking at Mona Lisa in Walmart. Besides, you might care, but 99% of people, including your fans, don’t. In 5 seconds they’ll be 3 screens away from your image already. The way we consume art on the Internet today is (especially on social media): we see an image, we acknowledge it, “Oh, that’s nice,” we double tap for a like, and we move on. Less than 3 seconds. I might sound bitter, but I’m not. I do this too. But I also want places dedicated to looking at art, just like I go to an art gallery once in a while. It’s why you can see images in my new blog design without any distractions (click on them). It’s why you can do the same in my Pixel Dailies archive. It’s why Pixel Art Academy will take this even further. I care. Just not on social media. Long are the days when I spent 1h cropping images so they’d appear sharp on the Tumblr dashboard.

[anissagraces]

Big ass gif tutorial

It’s been a while since I made a coloring tutorial, and I thought it would be useful if I made a full tutorial on how I make my gifs. I will go over: 

how to screencap

making your gif in ps

sharpening

coloring that gif

putting subtitles on a gif

saving that gif

you will need

a hd copy of the episode/movie you want to gif 

potplayer (or kmplayer)

a version of photoshop (I use CC)

a sharpening action 

A psd or patience to color your own gif

end result:

Everything will be under the cut. Warning: this will be picture heavy and text heavy. English is my third language so there will probably be some mistakes in here.

If this is the first time using photoshop, your startpage will look pretty blank. I’ll show you what you need to make visible to gif. 

Click on “window”. The screencap I made of the settings is pretty big so click here if you need to see it.

Not seen in the picture but useful: actions, properties, character, paragraph

STEP 1: THE FILE

Okay first of all, you’ll need your file. I recommend downloading µtorrent, then going to a torrent site (like rarbg.to) and searching for your episode or movie. ALWAYS choose 1080p and web dl if possible (web dl means logoless) Example: wynonna earp s01e01, then in your search results, look for one that has both 1080p and web dl in the title. 720p is also good. 

You can also find twitters that post logoless episodes and movies, this is better if you don’t like using torrents or if you live in a country that gives you fines for torrenting (I’m lucky, Belgium doesn’t care). If you want a list of a bunch of twitters that share logoless episodes and movies, message me off anon so I can link you privately. 

STEP 2: CAPPING

When you have your file, download potplayer (or kmplayer). Open the program and open the file you want to cap. 

Search for the moment you want to gif. Tip: hover over the playline thing to see what scene is at what time. Normally it looks somthing like this: 

  Press ctrl + g when you have the moment you want  This window opens:

Change your settings to mine ^^. I made a new folder in my Pictures folder where all my caps go bc it’s easier to go to. It’s up to you where you save all of them, but I suggest you pick one you can easily access. Click start.

Click escape and start your video. Pause again when you have what you wanted (this can be a whole scene or a moment, depends on what kind of gifset your making). Press ctrl+g again and click “stop”, then close. 

Now go to the folder where you saved your caps. I always make another new folder inside that one, put all the captures in there (unless I’m doing a scene, then I’ll make 6-8 new folders and distribute all the captures in those folders. Note that with the 3mb limit you’ll be able to use about 60-120 captures per gif, sometimes more. You can always delete layers of your gif in case it goes over 3mb)

Tip: make all your screencaps before opening photoshop. If you’re making a general character/ship gifset, that can take a while, but it’ll save you time if you seperate the two actions. 

After you have taken all your caps, open photoshop. You can download it on any photoshop tumblr like yeahps or itsphotoshop. I cannot give you the link to mine because it doesn’t exist anymore, but I got it from kickass (rip).

STEP 3: OPENING AND MAKING THE GIF IN PS

We have our caps and our ps open, but now we have to open those captures in photoshop. Do not use ‘open’, but Files > Scripts > Load multiple DICOM files

I know a lot of people choose ‘Load Files into Stack’ but Load Multiple DICOM files is SO much faster. 

This window will open

Now you go to the folder where you saved all your caps, choose the file with the screencaps for 1 gif and open it. 

It might take a little bit for everything to load, especially if there’s a lot of screencaps, so just wait. 

When you have everything, click on “Create video timeline”. It might be called something different if you have another version of PS, but whatever it says here:

(I know I know, I make pretty arrows lmao)

Then click those 3 boxes on the left side

Next step is ‘make frames from layers’, after that click “flatten frames into layers”

STEP 4: CROPPING

Obviously our gif doesn’t have to be as big as it is in ps right now, so we’ll crop to make it smaller. For this, you need to know the dimensions Tumblr uses: 

540px for 1 gif in a row 

268px for 2 gifs next to each other

177px - 178px - 177px for 3 gifs in a row (this is something annoying à la tumblr, and because it’s hard to predict which gifs you’ll put in the middle when cropping, I make them all 178px in width and then crop the ones I won’t use in the middle to be 177px after)

You can choose to use the old dimensions which are 500px, 245px and 160px.

These are the widths, you can choose the heights yourself. For this gif I’ll be cropping 268 x 150

This is the cropping tool

click it and you’ll see this on the topbar of your screen. Type in your dimensions

Then crop as you wish. This is my result. 

STEP 5: CHANGING YOUR IMAGE SIZE + SHARPENING

The gif is way too big at this moment, so go to image > image size, this window opens:

Click “okay” and your gif will be a lot smaller. Use ctrl + “+” to make it bigger 

This is what our photoshop looks like right now

These steps look like A LOT of work but as soon as you’re used to the steps, it’ll take you about a minute to do all of this. 

Next is sharpening. I use a sharpening action made by ilanawexler but it’s pretty complicated, so I do not recommend it if you’re a beginner. I will however explain it fully here. Note: I had to do something different than the directions the blogger gave, so what I get might not work for others and you might have a different outcome

Select all your frames (from 1 -)

then click “convert to videotimeline” (it’s possible it’s called differently in your ps)

when you did that, add two layers on top of your other layers

Select all your frames (frame 1 to layer 2), right click and click “convert to smart object”

Then, go to your actions. If you just downloaded your action, you have to add it. 

When that’s done, open the bobbiesdraper sharpen and click “action 2″. Thn click the play icon

It’ll a LOT of stuff, but just let it be. 

Warning: if you changed anything to the frames in the timeline section, this won’t work. I noticed that if I delete frames or change the delay, ... before sharpening, it won’t work. 

If it worked, you now have this

I’m not sure if it’s normal, but I now have twice the frames I had before, but only the SECOND amount is sharpened. So I delete frame 1-35 now in the timeline section. 

This is my gif after sharpening (you can use this to practice coloring or to follow along with my coloring tutorial below)

this psd automatically sets the delay for your gif to 0,05, I always change it to 0,06 (sometimes 0,07). Just select all your frames, then click on the 0,05, ‘other’ and choose whatever you like. The max I would go is 0,08 (0,07-0,08 is the speed the episodes go btw when you watch them)

STEP 6: COLORING

Now the fun part!! You can either choose to use a psd (here are my psds) or you can color it yourself. 

For this tutorial, I’ll be doing a basic coloring. (that means: steps I always use to start my colorings).

We start with curves. For this gif, these are the settings: (this is a pretty bright gif so for darker scenes you’ll have to use more, but don’t start with too much, build it up)

then some levels to give the gif more depth

I usually enter 10 for the black (unless it’s a very dark gif) and I’ll move the arrow of the white to where the little line starts. 

Some brightness

Some black selective color (I always enter 10, unless it’s a dark gif)

Color balance (also usually start with this, unless it’s a blue gif, then I’ll move the arrows to red, magenta and yellow). If the gif is VERY yellow, I’ll add more in cyan and blue.

Then I’ll add a vibrance layer, +100 vibrance. 

This is what I have now (with a pretty watermark). These are the layers I will always start with. 

You can stop here, but I like to add some more to my gif so I’m continueing

I like adding more blues so I’ll add a selective color layer: (you can also decrease magentas is the “blue” ones to make the blues more cyan)

For blondes, I like making their hair stand out more so I’ll add a selective color layer for the yellows:

Of course, there’s a lot of yellow in the skintone so chances are the skin will look very yellow now, I add a color balance layer and change the highlights. (In darker gifs you might need to change the midtones instead)

Some magentas to make the lips stand out

and some contrast

That’s all for coloring. This is what my gif looks like right now:

STEP 7: SUBTITLES

If you want to add text, click this icon

these are the settings for my text

Then we’ll add some other adjustments to make the text more visible:

click on the fx icon

then click ‘stroke’

click okay, and click on the FX icon again, then click “drop shadow”

when you added all your adjustments, duplicate the textlayer and delete the first one (if not, your adjustments will only show on 1 layer instead of the whole gif)

If your text isn’t in the middle of your gif. Click your text layer, then click this icon

then in your topbar, adjust with these tools

this is what the text looks like now:

here is the psd for the text

STEP 8: SAVING

Of course, you have to save your gifs. Go to File > Save for web and this window will open

Make sure your settings look like these:

Make sure this number isn’t above 3 mb

That’s all!!! If you have any questions, you can always come ask me. I’m sorry if this wasn’t clear, but I hope it made atleast a bit sense.

[emmajustin20]

The Top 10 Photo Storage and Sharing Sites

Are you here in search of the best photo storage and sharing sites? You are in the right place. This article will be a complete guide for you for the best photo storage sites.  

Digital photo-sharing sites are great if you want to keep your photos in your pocket. No doubt, physical storage drives or SD cards are also excellent to store images but remember that your photos are at risk with these physical drives. You may lose your memory in the form of pictures if they are damaged or lost.

For this good reason, digitally storing photos is both a safe and reliable place. The online images sharing sites provide a wide range of facilities in addition to an online backup. They allow you to do many more things with your photos, such as organizing, editing, and sharing them with friends and family. Some of these services are free, and many are used by professionals to generate revenue by selling their photos.

Moreover, having an online storage site is always advantageous in this digital age where everyone wants to capture their moments and make them last longer. We have included the ten best photo storage and sharing sites to digitize your memories. Let’s see a brief description of all of them.  

Flickr

We have included Flickr at the top of our list because of some unique advantages. It offers vast storage space, and the interface is simple to use. A power shooter can also consider this service. This service has many useful tools and features that allow you to download or view an image with your desired resolution. Flickr also represents stats about the viewers of your images. You can use drag and drop tools to organize your photo album. With a free account, you can store up to 1000 photos. The premium account costs a subscription price of $60 annually.

500px

It has been mainly developed for power photographers. 500px prepares a photo from the front and center with an attractive look. It allows you to combine your photos using a specific theme called Sets and Stories that represent your photos in a striking manner. The free version allows you to store up to 2000 images, but you can upload only seven pictures in a week. The company doesn’t provide printing facilities for photos. 500px offers two types of affordable premium subscriptions: $4.99 monthly and Pro $9.99 monthly. There are no restrictions on uploads with both plans.  

Google Photos  

Google Photos is an ideal option if you are looking for ways to back up your smartphone’s photos. Google developed this app to digitize smartphone videos and pictures, but now it is used as a popular image editing and storage service. You can edit the photos stored on Google Photos and make several changes like cropping, enhancing colors, and more. After completing the editing process, the app allows you to combine your artwork into an album and also lets you share with any Google users or other people. On a free account, you can share photos up to 16 megapixels and videos up to 1080p. The subscription price starts at $2 for 100MB monthly.      

Amazon Prime Photos

If you have an Amazon Prime subscription, you don’t need to look for another photo storage service. Because Amazon provides its own photo-sharing service called Amazon Prime Photos for Prime members. This Amazon photo storage service allows you to store unlimited photos through your computer, smartphone, and tablet. The uploaded photos and videos are automatically tagged according to the type and location. Unlike 500px, Amazon Prime Photos lets you print your images, cards, calendar, and more. There isn’t any free subscription for this service. The premium subscription price starts at $120 annually for unlimited uploads.  

Apple iCloud

Apple has specially developed this service for Apple device users. iCloud requires integration with Apple Photos to run on iOS and Mac devices. Many basic features can also be used on Windows PC. Under a free subscription, you get 5GB of free storage space to upload photos. You can tag images based on names and locations. You can also add pictures from other iCloud users, which is a great feature to get images from more than one photographer. If you have uploaded photos with the same face, the service automatically groups those images for a better user experience. If your free subscription gets exhausted, you can go for premium plans. The premium plans include 50 GB for 99 cents monthly, 200GB for $2.99 monthly, and 2TB for $9.99 monthly.

Adobe Portfolio

Adobe introduces an excellent photo-sharing service and Portfolio creator for its Creative Cloud subscription users. There is no free subscription to this service. The premium plan starts at $9.99 monthly with 20 GB of storage space, including services like Adobe Fonts, Photoshop, and Lightroom. If we talk about the top-tier plan, it is $52.99 monthly for storage of 100 GB, including other benefits like InDesign, Photoshop, Premiere Pro, Illustrator, and more.

ImageShack

If you want an affordable but unlimited photo storage service, ImageShack is one of the best alternatives. It has no free subscription. The paid subscription starts at $3.99 monthly and $37.99 annually for unlimited uploads. The service also allows us to do many more things, such as watermarking photos, embedding photos, and sharing them. If we talk about the Pro and Premium subscription, they cost $29.99 monthly and $99.99 monthly, respectively. These plans provide extra bandwidth for downloading and viewing photos. ImageShack is available for all Android, Windows, iOS, and MacOS.  

Photobucket

Photobucket comes with many editing and eCommerce tools for professional users. You get limited uploads of up to 250 photos on the free subscription. The free version also shows unwanted ads. The paid version comes with three types of facilities, including ad-free, Intermediate, and Expert. All these plans have different pricing methods. Using the paid pans, you can also access your images from a third-party site.

SmugMug

It is also one of the best design-oriented image-sharing sites for professionals. SmugMug provides a beautiful home to show photos, including a custom homepage and many premade templates. You won’t get a free subscription to this service, but a 14-day free trial is available. The affordable plan is $8 monthly and $55 annually. The Pro plan costs $432 yearly for advanced features like eCommerce tools. No matter which plans you have, you get the ability to unlimited uploads. You also get some editing tools to make some changes to the photos.

Dropbox

Finally, we have come to the last photo-sharing sites. Dropbox allows you to store photos through its iOS and Android apps. The service also lets you store pictures available on your computer. With cloud photos, creating slideshows becomes easier, and anyone can use the same. Dropbox doesn’t have features of tagging, printing, and photo editing. However, you get a free collaborative editing tool which is known as Dropbox Paper. You can’t do photo editing with this tool. The free plan offers 2GB of free storage. The Pro subscription costs $16.58 monthly for 3TB of space.

Hello, K.blair, and I’m from Ontario. I completed Social Media Marketing course, and I am currently assisting my clients regarding how to use social media to expand their businesses online. and how to build own website on the word press platform here is the my blog On the following links, I’ve shared some of my work:

alexa.amazon.com | alexa.amazon.signin.com

Source: Top 10 Photo Storage and Sharing Sites