Making a Page with the TF2 Style

Discussion in 'Mapping Questions & Discussion' started by StuartPB, May 14, 2010.

  1. StuartPB

    StuartPB L1: Registered

    Messages:
    21
    Positive Ratings:
    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.
     
  2. radon

    radon L1: Registered

    Messages:
    28
    Positive Ratings:
    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.
     
  3. Passerby

    Passerby L2: Junior Member

    Messages:
    99
    Positive Ratings:
    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: May 14, 2010
  4. Freyja

    aa Freyja ¯\_(ツ)_/¯

    Messages:
    2,834
    Positive Ratings:
    4,753
    Photoshop can generate html for your background with the slice tool, and then you can just find where to fill in the text.
     
  5. Cameron:D

    Cameron:D L6: Sharp Member

    Messages:
    363
    Positive Ratings:
    146
    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
     
  6. radon

    radon L1: Registered

    Messages:
    28
    Positive Ratings:
    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.

    As a web dev, this makes me laugh and cry at the same time.
     
  7. Cameron:D

    Cameron:D L6: Sharp Member

    Messages:
    363
    Positive Ratings:
    146
    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
     
  8. Minilandstan

    Minilandstan L1: Registered

    Messages:
    26
    Positive Ratings:
    10
    Anyone else get the Falcon Soda joke?
     
  9. r3dw3r3w0lf

    r3dw3r3w0lf L1: Registered

    Messages:
    32
    Positive Ratings:
    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.
     
  10. StuartPB

    StuartPB L1: Registered

    Messages:
    21
    Positive Ratings:
    10
    There are other ways to make images.