|
Tags: Mobile edit Mobile web edit |
| (6 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| {{Lock}} | | {{Lock}} |
| '''Background images''' are those image files which appear literally in the background of this and every page on this wiki. The bulk of these images are seen outside the page margins, but in reality the image extends underneath the entire page. If you look carefully, you can probably see that the image is dimly visible underneath the page. This unusual behaviour means that images proposed for our background must be prepared in a special way. This tutorial will first explain how the background image works, and then provide an explanation of how these images should be prepared by the user. | | '''Background images''' are those image files which appear literally in the background of this and every page on this wiki. Many wikis regularly use -- and change -- such images. However, we abandoned the use of background images at around the time of the broadcast of ''[[A Christmas Carol (TV story)|A Christmas Carol]]''. |
|
| |
|
| == How backgrounds work here ==
| | In most page views, background images are not seen on Tardis. The main reason is because of the rise in tablet and phone usage -- where background images '''never''' show -- as well as page views containing background advertisements. Most people simply never see the background, so we've adopted a cleaner background look. |
| Our wiki uses a special bit of CSS coding to ensure a couple of interesting dynamics.
| |
|
| |
|
| First, as already discussed, there is a distinct difference between the visibility of the image outside the page margin and the way it appears underneath the page. This is achieved by covering the entirety of the page with a translucent white background that sits between the page and the background image. Effectively, we've put a thin "screening layer" in front of the background image. This improves readability of the foreground text, while also allowing the background image to offer subtle texturing.
| | Therefore, it's the general design policy of the wiki '''not''' to have a background. |
| | | |
| Second, the picture remains in the same position, no matter how far down you scroll. If you'd like to see the difference between our page and that of the typical Wikia wiki, go to [[starwars:Yoda]] and scroll down. You'll note that their top-border image of [[starwars:Coruscant|Coruscant]] disappears when you scroll down the page. Our backgrounds, by contrast, stay put.
| | [[Category:Outdated policies|Background images]] |
| | |
| What this means is this eliminates the ''need'' to do tiled backgrounds (they're seen on many other wikis) and instead allows us to create a single, unrepeated background that appears as a strip at the top of the page. It also gives us the flexibility to make something longer, if we choose. In essence, the page fits our design, not the other way around.
| |
| | |
| == Parts of the page ==
| |
| In order to understand how to make a background, we must first examine a page in detail. To aid that understanding a special "test background" was created. '''It should not be taken as an ''artistic'' example''', but rather a design which helps us define the parts of the page more readily.
| |
| [[File:BackgroundExample.jpg|center|675px|thumb|This tutorial shall use the following terms to describe the various areas of the page. The width of the dark grey bit is the '''"page width"'''. The area where you see the lower [[Robot Yeti|Yeti]]'s left hand is the '''"left gutter"'''. The area where you see the upper Yeti's right hand is the '''"right gutter"'''. The blue line between the dark and light grey areas is the '''"margin"''', further defined as "left margin" or "right margin", as appropriate. The dark blue stripe at the top with the wikia logo is the '''"wikia header"'''. The distance from the top of the wikia header to the bottom of the dark grey bit is the '''"background image height"'''. '''"Background image width"''' is the width of the graphic you're placing behind the page.]]
| |
| {|border=1 cellpadding=4
| |
| |style="width:25%"|'''Term'''||style="width:75%"|'''Definition and notes'''
| |
| |-
| |
| |Page width||The page width is 1000px in the Wikia (sometimes called Oasis) skin. Our wiki site is automatically optimised for this skin. We do not, on this wiki, even pretend to support monaco, monobook or anything that came before. If you want to use your own, personal CSS style sheet, feel free. But we support Wikia Central's use of the Wikia skin and will not be developing stylesheets for other skins, unless Wikia moves to a new skin. This means a fixed with of 1000 px.
| |
| |-
| |
| |Background image width||The background image is not just the two [[Robot Yeti|Yeti]]. It's actually the entire browser width. The reason you can't see any difference between the grey towards the bottom of the page and the grey around the Yeti is because the image is 1500px wide, but on a transparent background.
| |
| |-
| |
| |Gutters||The main area of your design will almost certainly be the bit people see in the gutters. There are varying approaches on how you might fill the gutter. We might call the Yeti example above the "peek-a-boo" approach. Here, the aim is to make an image look like it's "peeking out" from behind the page. The '''background image width''' in such a case is quite deceptive. You might think that these two Yeti have been placed individually on the page. In fact, they're on a 1500px X 400px ''transparent'' rectangle.
| |
| [[File:RawYetiBackground.png|thumb|right|This is the raw background used on the "live" screenshot above. Note that it's actually remarkably simple. It's ''just'' the two semi-transparent Yeti on a fully transparent background.]]
| |
| Another approach is to have a continuous strip of background imagery. A good example of this type of background is, as discussed before, at [[starwars:Han Solo|Wookieepedia]].
| |
| | |
| An important thing to remember about gutters is that they completely disappear if the user chooses to zoom his or her browser. Some users therefore never see this element of the design. For this reason, unless your background image is essentially a pattern, you don't want to have an image occupying over 250px of the gutter. In fact, much over 150px is stretching it.
| |
| | |
| Another important thing to remember is that '''text should never be used in the left gutter'''. This is because tags like {{tl|lock}}, {{tl|wikipediainfo}} and {{tl|stub}} all reside in the left gutter. In general, backgrounds should either be a simple accent in the top right corner, a strip of subtle pattern that extends across the entire page, or something which extends the width of the page, but is visually dominant in the right gutter.
| |
| |-
| |
| |Wikia header||Although background images technically start at the very top of the wikia header region, the ''bottom'' of the wiki header should be considered our top margins. Note that the right Yeti's head is below the bottom of the wikia header. To make this happen, give your background images a 50px header of blank, transparent background.
| |
| |-
| |
| |Background image height||The background height can really be anything you want it to be, but 400px is a good number to shoot for. It's not too short or too tall. Page backgrounds generally work better when they're occupying the top third of a page, which 400px would, on most computer browsers. The only real restriction with height is that you don't want it to be ridiculously tall, like 800+ px.
| |
| |}
| |
| | |
| == Technical specifications ==
| |
| === File format ===
| |
| Background images ''must'' be in [[wikipedia:PNG|PNG]] format. It's the only allowed format. Background images ''must'' contain transparent elements, and the PNG format is the only transparency-enabled format which wikia allows for backgrounds. Unfortunately, if you do not have software which allows you to create PNG files, you cannot submit backgrounds to our wiki.
| |
| === File size ===
| |
| Wikia restricts the size of the file to 100kb. Please try to submit files which are less than this. If you find, however, that you just can't make it work, go ahead and submit it, as long as it's in the PNG format. We may be able to compress it or crop it, or put it into a different variety of PNG. '''Still it is preferred that you present us with a file that we can use without alteration.'''
| |
| === Transparency required ===
| |
| Your images ''must'' be on fully transparent backgrounds. Any submissions on a coloured background, even a white one, will be rejected. The background image ''must'' blend into the '''background colour''', and the only way to do this is if your image is on a transparent background. Furthermore, the image ''itself'' must be a minimum of 75% transparent. Note that with the Yeti in the above screenshot, we can actually partially see through them to the background grey underneath.
| |
| | |
| The reason for all this transparency is to make sure that your design does not prevent article text from being read.
| |
| === Tiling discouraged ===
| |
| We want designs which run the width of the page, once. An obvious design would be to make a single TARDIS roundel and then tile it across the background; we're looking for stuff that's a bit more imaginative. Unless the tiling produces something unexpected, please don't submit it.
| |
| === Colour discouraged ===
| |
| This might seem like a weird one, but it's vital. Colour images underneath a page make the text hard to read. Since background images tend to hang out underneath the parts of articles traditionally given over to infoboxes, this can cause a big clash. Colour is therefore discouraged, though it ''might'' be allowed if it's not too busy and it's no less than 50% transparent.
| |
| === Feather the bottom edge ===
| |
| Unless your design is round, chances are you'll end up with a hard edge that we don't want. Note that the Yeti example makes this mistake deliberately for illustrative purposes. Our Yeti therefore look ridiculous, frankly — more like [[W:C:muppet:Cookie Monster|Cookie Monster]] hand puppets than menacing Yeti. What we need is a way to "fudge" the bottom edge so that it doesn't look like we just cut the photo out with a pair of scissors.
| |
| | |
| Hence what's known as "feathering". It's where you blend a top layer into a bottom one, eliminating a hard edge. This can be done a number of ways — some versions of Photoshop make this very easy indeed. Plenty of tutorials on how to do this trick are available at the end of a simple Google search. [http://www.loriswebs.com/tutorials/featherededges.html Here's a simple example of feathering.] Note that this tutorial shows how to feather an image on all sides to a black background. What we want is an image that's only feathered in one direction, down, and to the colour of #B0B0B0. To do this, follow the instructions as given in the linked tutorial, but choose a selection area that concentrates only on the bottom edge of the design.
| |
| == How to make and submit a background ==
| |
| The following instructions assume that you have a working knowledge of photo manipulation software, and shall likely use terminology that's Photoshop-centric. If you're not that familiar with photo-editing, you may require more individual instruction. [[Forum:Panopticon|Click here to ask a question]].
| |
| # Make sure that your preferences are set to measure in terms of pixels and that guide lines and rulers are enabled. (Generally guide lines default enabled. To test put your mouse on one of the two rulers. Click with your left mouse button. Drag away from the ruler. If a line, by default blue, follows you around, your guides are enabled. If not, check your preferences.)
| |
| # Start a new image
| |
| # Make sure the image has a transparent background (usually a check box in the "new image" window)
| |
| # Make the width 1500px
| |
| # Make the height whatever you want it to be, but preferably no less than 200px and no more than, say, 1000px. The Yeti example uses 400px, which keeps the images in the upper third of the page.
| |
| # You then need to set up some guide lines. Pull down a horizontal guide from the top of your image to the 50px mark. This guide stands for the '''wikia header'''. None of your image should be above this top line. Now you need to place vertical guides at 250px and 1250px. This means that the distance between your left and right guides is 1000px, the size of a Wikia page.
| |
| # Create your design, aware of these guides.
| |
| # Make sure that the layers which contain your images are no less than 75% transparent. In Photoshop, this is easily done by selecting the appropriate layer on the layer palette and then just fiddling with the opacity slider.
| |
| # When you're happy with the design, you need to choose to do what Adobe calls "save for web". Other companies might call it "image compression", "web compression" or something of that ilk. It's essentially a compressed way of saving. You'll never make it to the tiny 100kb size limit if you just save the file normally. In Photoshop, at least, there's then an option to choose between a couple of formats of PNG. As you fiddle with it, you'll be able to see in the bottom left-hand corner of the window an indicator of how bit the file is. You just have to keep whittling away at the quality of the file until you get to 100kb. If you play with it for a while and you still can't get it under 100kb, even at the lowest quality, you may have consider cropping your image. If you've got a 400px image, consider going to 300px. If you have an image like this Yeti thing, where you've essentially got transparent space on the extreme left and right, then reducing the width to 1400 isn't going to hurt anything. If you've gone against recommendations and made a colour design, going monochromatic will reduce file size (another reason why colour is discouraged). Hitting that 100mb limit with the PMG format is pretty hard and it may take you a while to figure out how to do it.
| |
| # Upload your finished PNG file to the wiki, and place it at [[Tardis:Background image submissions]] in the appropriate category.
| |
| | |
| == Rules governing submissions ==
| |
| As with everything on the wiki, you agree that your work is governed by [http://creativecommons.org/licenses/by-sa/3.0/ CC-BY-SA]. Once submitted, there is no legal opportunity to withdraw it or protect it to any significant degree. You agree that other users have the right to remix your work.
| |
| | |
| Most importantly, by submitting your design, '''you agree to make available all files you used to create the design to any admin who asks for them'''. This is because only admin have the power to actually put a background design up on the site. And it's extremely unlikely that your design will work "out of the box". Its transparency levels will almost certainly have to be fiddled with, and it's a lot easier to do this with your raw Photoshop files, for instance, than it is to take a finished PNG file, reverse engineer it, break it down into its constituent layers, and try to recreate an editable file.
| |
| | |
| [[Category:The Hub]]
| |
| [[Category:Help]]
| |
