SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slicing Your Design - How do YOU do it?

    After just finishing slicing up another one of my photoshop designs, I had noticed that my porting of designs from photoshop to html/css has evolved over the years. This has made me a little curious as to how others go about porting their designs from an image to a fully functional, standards-compliant, html/css web page. Here's what I did for my last slice and dice...

    1) Finalise the design in photoshop.

    2) Layout the base elements of the page using html/css such as the header and footer (without applying any style beyond specifying width and height).

    3) Apply styling to base elements when happy with the html/css and how it performs cross-browser. During this step, I crop and save the required images from my photoshop design, but only where CSS doesn't permit.

    4) Start laying out the block/areas which make up the content (everything between the header and the footer).

    5) Repeat step 3, but on these elements.

    6) Apply aesthetic javascript for things such as rollovers, form highlighting, transition and other effects to ensure what I had on paper, works well in a browser (aesthetically). This javascript is re-written later on if required.

    I find that this method works well for me, for most designs. I use to slice/crop out all the required images from photoshop first, but found that I always had to go back anyway and re-slice various elements that weren't working in some browsers, or where I thought of a better way of coding it using html/css.

    So, how do you normally go about porting your designs from an image or photoshop, to a html/css web page?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Instead of slicing and dicing, you can achieve better results and minimize http requests by using css sprites. There's a good Three State menu demo that shows how it's done. The same technique can and should be used not just for rollovers, but for related graphics such as navigation backgrounds and such like.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, in that case I ask the same question. How do those who use sprites, go from a design in something like photoshop to a fully functional html/css web page.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Normally it's done step by step, piece by piece.

    Perhaps you would enjoy the screencasts of Converting a Photoshop Mockup part 1, part 2 and part 3
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •