SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2002
    Location
    Scotland, UK
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sliced image to CSS, whats the best way

    Hi folks,

    I've been dabling in web dev for about 8 years now but over the last few Ive not really had time and when I came back to it before Xmas everything was minimalist and CSS.

    The way I generally make sites is to create something in Photoshop, then slice it up in FireWorks and go from there. How easy will it be to take that sliced image and create the same site using CSS instead of tables?

    I had a quick look in the FAQ and didnt find much on this particular thing.

    Here are some samples of sites I've created over the last coupel of months using the tried and tested Photoshop>Sliced>Tables approach:

    www.fastpixphotography.com
    www.meercat-exhausts.com
    www.krtuning.co.uk
    www.keithcowie.com (not complete yet)

    Many thanks for any ideas and help.

    R.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    You can definitely start a web design from a design created in photoshop but your images will need a bit of re-working.
    Any images that aren't 'feature pictures' or logos should be removed from the markup itself and presented as background-images on the different elements making your markup much cleaner / smaller / easy to maintain..

    Basically you'll need to make the images larger than you really need and allow more or less of the images to be displayed as the content is reduced or expanded.

    Here's an example that might give you some ideas on using image slices
    http://www.yellowshoe.com.au/tips/ro...sign-elements/

    There's a lot to it - and you might find that some designs are easier to create using CSS so you will learn to make things box-model friendly, like anything - practice makes perfect.

    Edit: Also you need to learn to give up total pixel precision display of your design, make things flexible with font-sizes and different user preferences - it should still be easily viewed with CSS and or Images disabled.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    z
    Last edited by Decoy1; Mar 3, 2007 at 02:30.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •