SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help needed - web design approach and tools

    I've been learning web design on my own for some time using online resources. Now I could manage to do coding in HTML, CSS, Javascript and design using PS, GIMP, etc. But when it comes to the whole process of web design, I'm a bit confused.... I learned that web designer usually turns the wireframe into a PS design which in turn is transformed into HTML and CSS.

    But how do u usually do that transformation part?

    and is there any other better approach in web design to turn a wireframe into a fully functional website? Thanks a lot in advance.....

  2. #2
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's called "slicing", and it just involves taking the PSD file (or whatever) and cutting it down into smaller individual images that can be used in HTML/CSS files. For example, saving a sample of the page background (if it's not just a solid color), saving it as background.jpg, and using it in your CSS file to specify body's background-image.

    That's pretty much it. I take the select tool, select what I want, copy-paste it into a new screen, save it, and then upload it to my web directory.
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  3. #3
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I should also add that when you slice up the images, you should write the HTML/CSS by hand (or using your favorite editor), never export the website design from photoshop otherwise you will end up with a very bloated (hidiously so) lump of code.

  4. #4
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Plus, you don't learn as much using an editor like that
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches


Tags for this Thread

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
  •