Wikia

Community Central

Comments88

Slick Skin and Wordmark Tips

Xean July 28, 2011 User blog:Xean

At Wikia, there are a lot of users who make awesome backgrounds for their wikis. However, not everyone knows how to design and code, so sometimes our Content team will help create skins and wordmarks. We thought it'd be fun to share some of our top tips for creating a unique look on your wiki — that way, you can try playing around with ideas on your own. In the slider, you'll see examples of amazing skins; below, you'll find helpful guidelines:

  • assassinscreed.wikia.com
  • bioshock.wikia.com
  • comic-con.wikia.com
  • dragonage.wikia.com
  • thehungergames.wikia.com
  • pandorahearts.wikia.com
Creating a skin (or background image)

Facts: The width of a wiki's page is 1000 pixels; the file size of the background image must be under 100 KB.

  • Choose one image that can be "split" into two parts, or choose two images — one on each side of the background.
  • The image(s) you use on the background need to be large enough to at least cover most of the vertical space on both sides (when viewing the top of a page).
    • For example, most screen resolutions have a height of 900 pixels (give or take 150), so using a background image that's only 400 pixels tall would leave a lot of empty space.
  • When creating a background image, be sure that the main focus on each side (cast/characters) is close to each side of the page area, so that it will still be (at least partially) visible for people using resolutions with a width of 1280 or 1366 pixels.
  • It's always a good idea to add a smooth color fade on the left, right, and bottom edges of your background (especially if the width of your background image is less than 1920 pixels). This prevents users with high screen resolutions from seeing a hard edge on the sides of your background.
    • To apply this fade using Photoshop or GIMP, set the foreground to the same color you've chosen as the background color on Theme Designer. Then, use the gradient tool set to "foreground to transparent" to apply the fade on the edges.
  • If you're going to use a small background image and choose "tile" on the Theme Designer (repeated vertically and horizontally), it's recommended that you use a "seamless" image. This is an image in which, when placed next to itself, both sides blend perfectly and you can't see any edges. This produces one infinitely large, seamless image from a single small image.
  • Because of the 100 KB limit, it is highly recommended that you use the .jpeg/.jpg file format for your background image. This allows you to preserve good image quality when compressing the image's file size.
Creating a logo (or wordmark)

Facts: The dimensions of the logo/wordmark must be exactly 250x65 and be in .png file format in order to upload it using Theme Designer.

  • If the image you want to use as the logo is larger than 250 pixels wide and/or 65 pixels tall, scale down the image so that both width and height are within those limits. Be sure to keep the image's proportions the same when scaling.
  • After you've scaled down the logo, change either the width and/or the height (if either is less than 250 or 65 pixels, respectively). To do this without losing your image's proportions, edit the canvas size rather than the image size.
  • If your logo includes the official logo of your wiki's topic (video game, TV show, movie, book series, etc.), and you want to use a font that's similar to the official logo, check out the free fonts on dafont.com.
Other tips

Readability is the most important thing to consider when creating a custom skin. Here are some final suggestions:

  • When setting the link color in Theme Designer, be sure that the color you choose allows the linked text to be easily read by visitors.
  • If you plan on using a semi-transparent page, don't use a level of transparency so high that the background showing through the page makes the text hard to read.
Design requests

If you still have questions, or if you're not sure that you want to experiment with the skin or wordmark on your wiki, check out our request page. If you meet the requirements and put in a request, you'll get help from the one and only JoePlay.

Also, we know the examples in the slideshow above are only a small sample of cool wiki skins. If you have a wiki design you'd like to highlight, give it a shout-out in the comments below. Please also share your own tips and tricks with fellow Wikians!

Want to receive updates on the latest Staff blog posts? Then click here to follow this blog.

Around Wikia's network

Random Wiki