Keep in mind that I am NO professional and I mostly piece together just what I already know and snippets from articles I read and apply it to my blog. I tried making a "Blogger resources" post a while ago and have learned so much since then. I really need to update you!
So this post is all about what I do personally to make my blog look pretty. If you're curious, read on and ask any questions in the comments!
Here's how this post will be organized:
1. Planning & Inspiration
2. Getting graphics and fonts
3. Making/editing graphics
What you need:
1. Perseverance
2. Computer time
3. Google or any other reliable search engine
4. An image editor (I use Photoshop for this, but many free ones are online and can be just as helpful)
5. (OPTIONAL) Someone's help
Section 1: Planning
This will also make everything a whole lot easier. What do you want your blog to look like? Draw it out!
TIP: If you have no idea what you want your blog to look like, then look around the internet if you can for inspiration. Or maybe just Google image search "cool blog layout" or something.
Now, once you're sure you have a good idea of what you want everything to look like, get a little more detailed. Draw and/or label specific elements of your blog and how you want them to look– again, don't get too detailed with the actual drawing if you don't want to! All you need is an idea of what you want.
For example, here's what I wanted my banner to look like:
It's hard to draw with a mouse, so I just labelled. Remember, it's ok to change what you want along the way! This isn't a plan for you to stick to, this is just to give you some direction.
Here are a few questions to get you started:
How do you want your posts to look like, round-edged or sharp-edged? Color?
How do you want your pictures to look like, border or no border?
Do you want your header to be massive, tiny, or medium?
What gadgets/widgets would you want to add to your blog?
Do you want your pages listed on a bar, or one at a time separate from each other?
Again, if you're unsure at any time, explore the internet for inspiration! You could look at other Animal Jam blogs, or Animal Jam itself for layout ideas.
Section 2: Finding Graphics & Fonts
Finding graphics (images) and fonts to use for your blog can be a big pain if you don't know where to find them. Luckily, there are many easy ways to get them!
Have you noticed that Animal Jam is just... beautiful? It's one of the most visually pleasing kids games on the planet. That's why I and many other AJ bloggers use only graphics from Animal Jam!
Graphics are best when they're transparent, which means that the image in question that you want on your blog doesn't have its own background. For example, this:
I downloaded it from the top left corner of a Daily Explorer post, another excellent source for AJ graphics. Drag it across the screen with your mouse and see that it doesn't have its own background behind it– just a ladybug, no white or yellow or any color background! That's what I mean when I say transparent.
TIP: If you don't know how to download images, ask a parent for help or follow what I do. To download images, I first try to drag an image to see if I CAN download it. AJ's website and the Daily Explorer have a lot of images that you can't directly download. If it does drag, then you can download it! To download images, I click them with the right button on my mouse and a menu comes up. I look for the option "Save image to downloads" and click it. Your image is now downloaded!
You can't directly download a lot of AJ graphics from the website, but some people (and you, but we'll get to that later) make it so you can from their own site!
"Making" AJ graphics isn't really drawing them from scratch. To simplify what will be explained later, you screenshot it, erase the background, and post it. It's pretty easy and fun and I do it all the time!
☆ A FANTASTIC source for user-made Animal Jam graphics is a specific blog called Animal Jam Graphic Central. They have big sections of graphics for anything you could ever need for your blog! And no, I'm not associated with this blog and wanted an opportunity to advertise it. It's genuinely a great site, no lie! Check it out in the link above. ☆
TIP: Graphics can be used as icons or images for pages, sidebars, or extras to add onto banners. If you'd like to, you could also learn how to add graphics as icons to each of your posts. How? Google it. Search up "[BLOGGING PLATFORM NAME HERE] icons post" or something general like that. A hundred helpful articles will pop up and you can browse through all of them to see what you can do to add icons to each of your posts. Keep in mind the date the articles were published because older methods won't always work!
☆ For finding fonts you could use Google to look up what you're interested, but here are some links to download fonts that Animal Jam itself uses!:
If you don't feel like downloading fonts and just want quick header text, fontmeme.com is the best site EVER. It's perfect for beginners!
To learn how to download and use fonts, click here to go to my older Blogger resources post. It could also help you with other technical stuff, too.
Section 3: Making Your Own Graphics
This part is surprisingly easy! As I kind of outlined before, here are the steps to making your own graphics:
1. Screenshot something in Jamaa that you want to turn into a graphic. I suggest things that are easy to distinguish from their background, like this:
This is the small house den. What I want is a picture of the small house, and what I want to erase is the light green background. Luckily, the house is woody, dark, and close together while the background is a semi-solid color. Easily distinguishable from the background!
TIP: Good things to make into graphics are bigger things like this rather than teeny tiny things, because when you magnify teeny tiny things they look all pixel-y.
2. Open up any image editor that lets you erase backgrounds/make things transparent. I use photoshop, but some good free web-based image editors are LunaPic and Online Image Editor. Look around for buttons that have names with "transparent" or "erase background"!
Here's what I do in photoshop:
I open up my screenshot.
I right click the regular eraser button on the left side and click "Magic Eraser"
Then, I start "magic erasing" the parts I don't want. It can be messy and difficult depending on the image– if you think there will be tiny pockets within what you want that you need to erase, you'll need to be more precise and use a bit of the regular eraser (at a small size) to carefully remove what you don't want. I hope that made sense.
Thats the process up there. It may not all go away at once, just keep erasing.
When I'm satisfied enough with the product, I save for web and devices.
And here is my finished example:
Pretty easy, right? You could use a combination of AJ graphics made by someone else (credit them!) and graphics you made yourself. That's what I do!
Another thing I do is edit stuff. For example, the background for my pages bar was originally a stubby small plank I made transparent and using photoshop, I stretched it!
If you're curious about anything you can do in photoshop or any blogging platform, Google is your best friend. Google's my best friend and it taught me all the stuff I needed to know about blog layouts! Remember to specify your blogging platform, but describe simply what you want to do to get maximum relevant results.
Example: You wanna know how to stretch images in Photoshop? Search up "photoshop stretch image" and click some articles. You wanna know how to put images on top of each other in Online Image Editor? Search up "online image editor overlay image" and click some articles.
Simplifying search queries was actually something I struggled with at first, so while simple it's very helpful to know.
I was planning on talking about what I do in Photoshop to overlay images and stuff, but because I think the majority of you won't be able to buy Photoshop here's how you can figure that stuff out fast: Google.
I'm not trying to be lazy, I'm just being realistic because Google is literally the almighty oracle for making a blog pretty whether you use Blogger or Wordpress or anything else. Googling every single problem or question I ever had about my layout has made me struggle less and learn more about Blogging!
When you want to put everything together, Google is a great place to look for any special CSS or HTML code you need. (Don't know what CSS or HTML is? Google it.)
• • • •
Okay, making this post late at night was a big mistake. XD
I'm sorry if I sound weird or didn't make sense at any point– please comment any question you have and I WILL answer it ASAP!
So the main points I really want you to take away from this are...
1. Stay organized, go one step at a time.
2. Think about or write down a list of everything you don't know, and Google it. If you wrote a list, write the solution next to each question once you learn it.
Aside from the links to graphics and fonts in this post, that's literally all I do to make my blog pretty. I used a billion websites to do stuff like put multiple links in an image, format my background... But I couldn't possibly list them all, I have no definite record of them. Instead, Google whatever questions or problems come your way. There's always an instant answer if you use the right query. Sounds lazy, but it's EXACTLY what I do and this is all about how I myself make my blog pretty, so yeah.
I'm going to bed now before this post becomes the longest piece of literature in human history– which by the way, is actually a Super Smash Bros Fanfiction. Don't believe me? Google it. IT'S TRUE.
Goodnight, and see you in Jamaa!
– DoomyPanda
Those are quite helpful tips
ReplyDelete