Wednesday, August 30, 2017

AJ Blogger Resources + Tutorials

Hey Jammers! You might not be able to tell from my current layout, but I know quite a lot about blog design. *cue laugh track*

Alright, I'm not saying I'm an expert, but having worked on this blog for 5 years I've picked up some tips and resources that will definitely be helpful for new AJ bloggers, or anyone who wants to put together some pretty AJ graphics. 

These resources and tips will focus on design. Thankfully, Animal Jam has a lot of pretty art and icons that can be used as buttons and sidebars for your AJ blog or graphics, so we're already one step ahead! :)


Part 1: Planning




Before you change your blog layout, it might be a good idea to draw what you want it to look like. It doesn't have to be complicated, all you need are the basics. 

Do you want your banner to have a big leaf behind it? Do you want your page tabs to be centered? Do you want one sidebar, two, or none? Do you want a little "About Me" box... or do you want it to be an "About Me" circle? Anything you want, you can probably do it.

If you'd like, you can also make a list. It might look like this:


Header
- Centered
- Big leaf behind text
- Some kinda AJ font

Page Tabs
- Centered
- 5 tabs
- Nature-y background behind each tab

Posts

- Aligned to the left
- Centered post titles
- Pink background

Sidebars

- 1 sidebar to the right
- Square "About Me"
- Popular posts widget

...Or, if you're not picky about the layout, you can just wing it and see how it goes. :)

Part 2: Graphics, Backgrounds, and Fonts

If you haven't noticed already, Animal Jam uses some nice graphics. Sign-board buttons, icons, items... you can easily cut them out and use them on your blog like a collage!


Sometimes making these images transparent can be a pain, especially if you don't have Photoshop or any other software, but that's alright! Other Jammers with access to those programs have posted hundreds of these useful images to the internet for you!

RESOURCE LINK: My personal favorite place to get pre-made graphics is the blog Animal Jam Graphic Central. Ran by awesomepanda868, the blog is currently inactive, but it's a treasure trove of well-organized AJ icons and backgrounds you can use. Just remember to credit the creators. ;)

You can also find backgrounds, albeit of a more limited selection, on the official Animal Jam wallpaper page.



Fonts are a bit of a different story. Above are the two main fonts used on AJ, DigitalDelivery and TikiIsland. On AJ, DigitalDelivery is used in content text, like in chat bubbles or in Jamaa Journal articles, whereas TikiIsland is often used in titles and announcements.

I know downloading these fonts will allow you to use them in Photoshop or other image editing software when putting together your graphics, but you might not be able to use them in most free web-based image editors. Actually, it depends on what editor you use. I'll talk about that later.

RESOURCE LINK: Downloading these fonts is simple, but different for each one. I've only downloaded TikiIsland because (I think) it was easier to download and the last time I checked, DigitalDelivery cost $100, but Animal Jam Archives provides you with free download links to both. I'd trust this site because it's run by snowyclaw, a Jammer who now works for AJHQ.

There are different ways to install these fonts depending on your computer, so I suggest you look up an article specific to your system on how to download fonts.

And remember, you don't need these fonts to have a cool-looking AJ blog. They're just an added extra! :)

Part 3: Get your Graphics Together! (Without Photoshop)

Okay, so you got your transparent blank board, courtesy of AJ Graphic Central...


You got the coolest screenshot possible of your best animal, too...


And you've also downloaded the font TikiIsland.

You want to make a little "About Me" picture to put at the side of your AJ blog. How do you do that, if you don't have Photoshop?

RESOURCE LINK: In short, you find a good free online image editor. For this tutorial, I'll use PicMonkey. I don't personally use it, but I think it's a good free replacement for Photoshop.

Before you start, make sure you crop your screenshot if you want the crocodile to be in focus.

So on the home page, click "Edit an image" and when it takes you to the editor, upload the image that will be behind everything. In this case, the black sign:



Now click the "Overlay" icon and upload your screenshot.



Great! Now about that font...


Click the "Text" button and click "Yours". Then, search up your chosen font and select it to use it!



Make it a little bigger...


Add another text box below, and you're good! If you think you're done, that is. These are just the basics. If you decide to use PicMonkey to put together AJ graphics, you'll inevitably figure out how to do more.

Part 4: Coding, but Easier – Page Tab Tutorial

A few days ago, Violet AJ asked me about how I replaced my page tabs with images. It took me a while to figure that out when I started this blog, so I thought I'd tell you all how I do it.

The secret is... it's all one image!


I made this graphic in Photoshop from a mix of icons, boards, little string things,  the TikiIsland font, and a stick.

If you're wondering why it's tightly cropped except for a blank space to the left, it was to push it into being centered beneath the header. Use transparent space to your advantage!

In Blogger, there is a "Pages" gadget in the layout design area that you probably use:


Well, I don't use that gadget. Instead, delete that gadget and replace it with an HTML gadget:


But what do we put in that "content" box?

The HTML to an image map, of course.

RESOURCE LINK: Image-maps.com allows you to put multiple links into one image. Link to each of your pages within one image! This allows you to have more control over the design.

To make an image map, go to that website and upload your image.



Because each of the areas I want to add a link to are rectangular, I'd click "Create Rect". In the same way, if you want to add multiple circular links to an image you'd click "Create Circle".

 When people click the board that says "Home", it will take them to whatever link you write under "Map URL". In this case, it will take them to AJ Stream's home page.


Same thing with my codes page.


When you've fully linked the image, click "Get Code" to copy and paste the HTML code into your Blogger HTML widget. It'll look something like this:


And once you save your widget, you'll have a really cool looking page tab!

If you don't use Blogger like I do and use WordPress or something like that, you can still make an image map and get the code. You'll probably have another way of uploading it to your blog, though.

Final Tip

If you want to do something with your blog, Blogger, WordPress, or otherwise, look it up. There will most definitely be a tutorial for that somewhere, and if there isn't, you can easily find enough information to do it yourself.

It all depends on what you search. I'd suggest keeping it as generic and simple as possible. Instead of "how can I put backgrounds behind widgets in blogger?" search "blogger widget background" to find more resources.

Also, I may not be an expert, but ask me anything if you're having trouble with your blog's template. I think I can answer a lot of your questions.

That's all for now, Jammers– I'll see you in Jamaa! :D

9 comments:

  1. Thanks! That page thing really helps me out!!

    ReplyDelete
  2. Hello,
    In this post or a different one it says how you made your page thing, I did that, but how do I centre it??

    ReplyDelete
    Replies
    1. Hey!!! I just found your blog on Google. What exactly did you do to make your page thing? There are different ways to center it depending on what you did.

      Delete
  3. I was experimenting with the image maps, and it wouldn't let me save an image map OR get a code even though I'm logged in. Any help is appreciated!!

    Wildflower75

    ReplyDelete
    Replies
    1. Hey Wildflower! That's really odd. You don't have to be logged in– you just have to remember to replace the temporary image URL in the code with an image URL that won't expire (upload your image to Imgur or someplace similar to get a non-expiring URL)

      Though I haven't used that image map website in a while, and I have had a couple unrelated problems with it in the past, so it may just be glitching. To be safe, maybe try using the image map site with different browsers in case that's the issue, and if all else fails, you can try to see if there's a better image map site to use.
      Sorry I couldn't be more of help, but I hope your problems get better! ^^;

      P.s. I noticed you managed to get your comment profile image working! Awesome seal :D

      Delete
  4. But how do I check out my pages?! LOL

    ReplyDelete

Heyyo! I love it when you guys comment. I'm always checking for more, so even if you comment on an older post I'll definitely see it and try to respond. :)

Before you comment, of course, here are some basic things to remember:

-Don't be mean on purpose.
-Keep the comments appropriate for all ages. This is an Animal Jam blog.
-No spam, please! That means no comments just saying "buddy me im animaljam123" or "hi", just add a little more than that.
-Rants/long comments totally encouraged! You don't have to apologize for a long comment, I love reading them xD

-*NEW!* Please be safe about the personal information you share here, and on the internet in general. Just like AJ's in-game safety guidelines, don't share your real name, photos of yourself, phone number, address, email, or age. Always turn to a trusted adult if you're unsure about something.

Pretty easy rules. Nothing to stress about. As long as you follow them, you can say whatever you want!

Thanks for reading! C(o.o)D

P.S. That's a bear emoticon up there. ^