User blog:Рanamaniac/Hacks for Making a Perfect Wiki

Have you ever looked at a wiki, and thought to yourself, “woah, that wordmark looks amazing!” or, “That wallpaper is perfect!” Or maybe that favicon just draws your attention.

But then you go to try to make a wallpaper for your own wiki, but then you find out, “shoot, the size of the wallpaper is messed up on larger computers!” or, “my wordmark is all squished!”

The majority of larger wikis use programs such as photoshop to make their fabulous wallpapers and wordmarks, but lots of us don’t have access to programs such as photoshop. This list is the culmination of months of site searching, so I hope this saves many of you the amount of the time I spent. Every one of these sites is entirely free, and requires no downloads what so ever.


 * http://www.online-image-editor.com/ - This site is perfect for making images transparent. If you want to add a character to your wiki’s wallpaper, or logo, or anything else that has a background you’d like to remove, that site is the best for doing it all online. You can also use this for making wordmarks transparent.
 * https://chrome.google.com/webstore/detail/google-drawings/mkaakpdehdafacodkgkpghoibnmamcme?hl=en-US -Google Drawings is the best tool for compiling images for your site’s wallpaper. It may not be photoshop, but it can whip an amazing wallpaper for your wiki. 1700 x 801 is the size to use when you do page setup. But you don’t just have to use it for wallpapers. I’ve used it to make the portals on my http://al-grey.wikia.com/wiki/Al_Grey_Wikia
 * http://www.picresize.com/ - Probally one of the greatest tools ever, this site is what I use to crop and resize images perfectly. Feel free to use this to crop an image for an infobox, userpage, anything you could think of.
 * <p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:Arial;color:#1155cc;font-weight:400;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">http://www4.flamingtext.com/<span style="font-size:14.666666666666666px;font-family:Arial;color:#000000;font-weight:400;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> - This site is perfect for making wordmarks for your wiki. Combined with google drawings to size the wordmark (250 x 65 is the size in case you were wondering) and online-image-editor for transparency, you can use this or
 * <p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:Arial;color:#1155cc;font-weight:400;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">http://cooltext.com/<span style="font-size:14.666666666666666px;font-family:Arial;color:#000000;font-weight:400;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  (same thing pretty much as the above)
 * <p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:Arial;color:#1155cc;font-weight:400;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">http://html-color-codes.info/colors-from-image/-<span style="font-size:14.666666666666666px;font-family:Arial;color:#000000;font-weight:400;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> Need to find the color of an image for coloring something? Use this site to find the css coloring of any image
 * <p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:Arial;color:#1155cc;font-weight:400;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">http://www.w3schools.com/cssref/css_colors.asp<span style="font-size:14.666666666666666px;font-family:Arial;color:#000000;font-weight:400;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> - Great pinwheel for finding the css coloring for coloring things on wikia. Have fun with this one!
 * <p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:Arial;color:#1155cc;font-weight:400;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">https://imgflip.com/gifgenerator<span style="font-size:14.666666666666666px;font-family:Arial;color:#000000;font-weight:400;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> - You can use that to make gifs for anything you’d like. I used that to make gifs for my object infoboxes on my CW’s Flash Wiki ( <span style="font-size:14.666666666666666px;font-family:Arial;color:#1155cc;font-weight:400;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">http://cwsflash.wikia.com/wiki/Cold_Gun<span style="font-size:14.666666666666666px;font-family:Arial;color:#000000;font-weight:400;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">)
 * <p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:Arial;color:#1155cc;font-weight:400;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">http://www125.lunapic.com/editor/<span style="font-size:14.666666666666666px;font-family:Arial;color:#000000;font-weight:400;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> Probally one of the best image editors of them all, you can use this to make images have animation, different filters, and lots of other nifty tools.
 * <p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:Arial;color:#1155cc;font-weight:400;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">https://tinypng.com/<span style="font-size:14.666666666666666px;font-family:Arial;color:#000000;font-weight:400;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> - Oh no! My wallpaper is too big! This site will compress your wallpaper to make it just the right size for your wiki (300kb)! You may have to run the image through the filter a few times to get it just right. You can also use
 * <p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:Arial;color:#1155cc;font-weight:400;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">https://tinyjpg.com/<span style="font-size:14.666666666666666px;font-family:Arial;color:#000000;font-weight:400;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> for jpgs.

<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:Arial;color:#000000;font-weight:400;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Hope that helps some of you with the creation of your wiki. If you have any questions on how to use any of these sites, let me know and I’ll do my best to answer your question!