Making a Page with the TF2 Style

  • If you're asking a question make sure to set the thread type to be a question!

StuartPB

L1: Registered
Nov 20, 2009
21
10
How do the guys who make pages for maps, packs, and contests (such as http://swamp.tf2maps.net/ and http://compctf.tf2maps.net/) do it, eg. what pre-existing resources do they use, what tools do they use with what parameters, and for the HTML sites, what style do they follow?

I'm currently making a page for a weapon proposal, and they way I'm doing it so far (patterned after the Classless and War update pages) is I'm making a background image in Inkscape with the gradients as seen on the main pages and the background shapes, fancy titles, etc. and then I'm basically copying the CSS and tweaking one of the existing pages (like Page 1 of the Classless update) to fit.
 

radon

L1: Registered
Sep 5, 2009
28
8
Actually, that's not really a hard thing to do.
Generic gradients, color palette can be taken from official steam blog or update pages...
A small shade on the content area...
some texture resources as backgrounds...
Similar looking fonts..
If you use Photoshop, that's pretty much all you need to create the whole graphics for such a page.

For the basic tf2 site style, correct usage of gradients, constrast colors and the tf2 font is most important.

If you have problems with something, post your layout and someone could help with that.
 

Passerby

L2: Junior Member
Mar 27, 2010
99
15
ya shouldnt tak to long once you make or find the images and gradients to use it would prolly olny take an hour or 2 of html and css to make.

simple gradients, simple shadows rounded corner on the wrapper and proper use of the colour scheme
 
Last edited:

Freyja

aa
Jul 31, 2009
2,994
5,813
Photoshop can generate html for your background with the slice tool, and then you can just find where to fill in the text.
 

Cameron:D

L6: Sharp Member
Sep 28, 2008
363
145
All you really need is the TF2 colour pallet and a but of HTML/CSS experience and voila. That turned out entirely different to how I originally planned, but was really easy once I got the basic colour pallet sorted
 

radon

L1: Registered
Sep 5, 2009
28
8
There was a template psd file for these fake update sites somewhere on facepunch forums a while ago. Perhaps you might want to look for it. I don't remember what you could edit in this file, but it might help you get the feeling of the tf style.

Photoshop can generate html for your background with the slice tool, and then you can just find where to fill in the text.
As a web dev, this makes me laugh and cry at the same time.
 

Cameron:D

L6: Sharp Member
Sep 28, 2008
363
145
The slice tool works, but it splits it up into a bunch of tables, making it a lot harder to edit later on.

I use notepad for the actual HTML/CSS, and produce the individual images in Photoshop as I need them
 

r3dw3r3w0lf

L1: Registered
Nov 19, 2009
32
1
To make a website like TF2 style, it requires photoshop editing. Just start with a big square, add a shadow to it with a black outline to give it a background then add stuff to it like they do with the sites.