squished images

Pictures on my Tumblr appear all vertically stretched! What do:

So, you make text posts with embedded images to the body and for some annoying reason the images always appear to look horizontally squished (or vertically stretched if you prefer) to fit the width of your layout! It ruins the looks of your posts as well as the content itself! How do you fix this? Turns out it’s ridiculously simple!

Go to your Tumblr Customize page, (you should see it as a button in the upper-right corner of your blog page itself,) and click the “Edit HTML” button.

Now, you should see a huge mess of code. Don’t worry about all of this too much, we’re going to be dealing with 99.98% none of it.

What we’re going to be doing is either adding or editing one parameter of your theme’s CSS section to tell images to automatically resize their vertical dimension based on the width of their container. Thus, maintaining a constrained aspect ratio.

First thing is first, we need to check whether your layout already has the CSS entry. Within the first ¼ of your theme’s coding, there should be a line that has the tag <style type=“text/css”>. This is the start of your CSS. The CSS ends when you find a line further down that contains </style>. Take a quick look through this section to see whether or not it contains an entry called “img” – if it does it would likely be near the beginning.

If this “img” entry already exists, we’re going to add one simple piece of code to it. Within the { } brackets following “img”, add this code (in bold) just before the closing } backet: height:auto;

If this “img” entry does not exist, we’re going to add it by making a new line between any other two entries in the CSS section. Copy and paste the following code (in bold) into that line: img {height:auto;}

*Note about the following bit: My theme thinks it’s being clever by substituting traditional greater-than / lesser-than symbols used for HTML tags with left and right arrows. Please disregard this and read them as normal greater-than/lesser-than symbols. Copying and pasting the code text will still work fine in your theme.*

If for some reason your theme HTML does NOT contain a <style> CSS section at all, we can simply create one. Search the first 1/3 of your theme’s code for the line with </head> in it. This is the end of your <head> section, and where your CSS parameters should be. So, just above the </head> line, add the following code (in bold):

<style type=“text/css”>
img {height:auto;}
</style>

Hit preview, then save! You’re all set.

So with this simple code fix, your posts can go from looking like this:

to this:

10

Satoshi (overly) interested in N-san /o/

worrying over what N-san could think of him /o/

thinking about N-San when he is not there /o/

protecting N-san /o/

checking N-san’s pretty face /o/

touching N-san’s heart /o/

touching N-san /o/

getting hearbroken by N-san’s departure /o/

not letting go of N-san /o/

following N-san forever /o/

4

Anon this ask made my week! oh my god I live for cute shit and this is so adorable I had to draw something for it. 

I don’t feel like my stereotypical rebel turned out looking very rebel-y but yo! Motorcycles and bed-head hair count right?

anyways as I was drawing this I ended up making bits of backstory bc that’s what I do so like

lets say the rebel boy is the grandson of the lady Gohan works for. He shows up on the farm one day and Gohan just stops and gawks, and prob looks like a fuckin’ weirdo holding a garden scythe like that. 

How to Center Things In Photoshop, you peasants:

  • select all, copy, paste. ( either flatten or merge layers/visible if you did a layer mask and are working with a transparent background )
  • view > rulers, and use snap ( this locks blue guides in the center of the document )
    • you drag this from the rulers onto the document and can move them around, but if they’re near the edge or center, they’ll ‘snap’ in place there
  • if you’re using cc, purple guides will appear if you’re aligning anything ( text, png, whatever ) like so:
  • when creating a text layer, you can drag the ends ( “dancing ants” ) to the edge and they’ll ‘stick’ to the edges. 
  • in the ‘paragraph’ tab, these should be your settings if you’re not trying to do anything special or specific with the alignment. 

While we’re on this, you don’t need to stretch your images or squish them when you want to resize them. Simple going to image > image size ( or canvas for a quick ‘crop’ ) and there ya go, the image is resized without looking distorted. ( Unless you want to purposely distort an image ).

* Smells like Mettaton

I’ve wanted to make a Mettaton charm for a friend for a while now (they loved Mettaton before even encountering him in the game, such is the way of the Mettaton) and finally got around to it.

The only thing is I forgot the shrinky dink pack I have stretches and squishes images and forgot to compensate for it, so now all the charms are a little distorted. As long as you’re not looking at them next to each other, or next to the original, you can’t really notice. (You can totally notice.) I’m still excited to give them to people, though.

Each charm has a different phrase. Gotta catch ‘em all, Met-ta-ton!