How to create a Faux Column image in photoshop or similar software

Discussion in 'CSS' started by pipes, May 15, 2008.

  1. #1
    Hello, firstly i would put this in the Graphics & Multimedia section but they might wonder what im on about with the mention of Faux Column.

    Anyway, after you finish laughing at my noobness :) could you explain to me how i create an image that is used regarding Faux Column, i already use one but it was put together for me, i had white and 2 other colors for a wordpress theme that i put together.

    I know you make the height 1px and the width what ever width you need, but i dont know how you put the color into it and seperate each section of the image.
     
    pipes, May 15, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Take a look at my faux column demo. Notice the sample image. I simply opened a new image in the GIMP, and used the fill tool to apply the color. Don't try to make the image too small. A 10px height gives you something to work with without being a large file-size.

    cheers,

    gary
     
    kk5st, May 16, 2008 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    If you are doing more than one column inside a fixed width layout, a trick I use is to just the first 'left' column, and do a floodfill as Gary said... Then set your background color to the color of the next column, then 'resize the canvas' (image > canvas size in paint shop pro - I forget what it is called in Photoshop) increasing the width by the next column. The new area will automatically be your selected background color. Lather, rinse, repeat for however many columns you have.

    For a fluid layout though, faux columns is more difficult to do in the coding since you end up needing two wrappers, but is easier to do in your paint program. A trick I use is to put both column backgrounds side-by-side REVERSED from how they will appear on the page. You set the outer one to overflow:hidden and 100% available width, with the background set to positon:-leftcolumnwidth 0; - you then set the inner div to width:100%; padding-left:rightcolumnwidth; with the same background set to position: top right; The outer div will 'chop off' the excess width hiding the left half of the background.

    Also as Gary said if you make it 10px (I prefer 16px myself) high it makes it easier to work with - though I usually crop the canvas to 1px tall before saving.

    ... and remember, if it's less than 16 colors, .gif will most always give you the smallest file size.
     
    deathshadow, May 16, 2008 IP
  4. pipes

    pipes Prominent Member

    Messages:
    12,766
    Likes Received:
    958
    Best Answers:
    0
    Trophy Points:
    360
    #4
    Thanks very much kk5st and deathshadow.
     
    pipes, May 17, 2008 IP