PSD to HTML (how to make a sliced file)

Discussion in 'Design and Graphics' started by rigelisonfire, Oct 14, 2009.

  1. rigelisonfire macrumors newbie

    rigelisonfire

    Joined:
    Jan 17, 2009
    Location:
    Canada
    #1
    I am trying to make a website like this one http://www.fakedpotatoes.com/ using a sliced photoshop file. Does anyone know how to do this or where I can have it done? ie website or software?
     
  2. sigmadog macrumors 6502a

    sigmadog

    Joined:
    Feb 11, 2009
    Location:
    near Spokane, WA
    #2
    It's been a while since I did this in Photoshop (I mostly use Fireworks for slices these days), so I might not have this precisely right:

    In Photoshop CS4, the slice tool shares a space on the toolbar with the crop tool.

    Using the Slice Tool, you can create a slice and give it a name. I usually set guides first, then make sure Snap to Guides is checked (in the View menu) so that when I use the slice tool, the slice will snap to the guides.

    Duplicate the layer to change the colors.

    You can then select the slice (using the slice selector tool) and output first one layer in color, then the other layer in an alternate color.

    Again, it's been so long since I've used Photoshop for this that I may have explained it wrong, so forgive me if that is the case. However, this should at least get you started on the right path.
     
  3. rigelisonfire thread starter macrumors newbie

    rigelisonfire

    Joined:
    Jan 17, 2009
    Location:
    Canada
    #3
    Wht I'm confused on is how do I then convert that to an html file so that I can I can put them on to my server and and people can view them.
     
  4. Infinitygraphix macrumors member

    Joined:
    Apr 14, 2008
    #4
    Once ou made your image and slice it in Photoshop, you can then Save for web, where you can save optimize for web version of you images along with the HTML code for the page.

    Than you need to edit the file in a HTML editor like Dreaweaver...
     
  5. heehee macrumors 68020

    heehee

    Joined:
    Jul 31, 2006
    Location:
    Same country as Santa Claus
    #5
    There is no convert to html button if that's what you are looking for. You have to code it. If you have iweb, it'll be easier.
     
  6. fxstb2002 macrumors member

    Joined:
    Apr 22, 2008
    #6
  7. Leon575 macrumors member

    Leon575

    Joined:
    Jul 12, 2009
    #7
    You should learn HTML and CSS if you want to make a website.
     
  8. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #8
    Agreed, simple thing in css (a:hover) I think, I've probably put it wrong and embarassed myself :p.
     
  9. McShizzel macrumors regular

    Joined:
    Oct 29, 2008
    Location:
    Canada
    #9
    For sure HTML and CSS is the way to go when it to comes to building a website although you can do it in Flash (I hate Flash but that's my opinion).

    You could also try using RAGE MapDesign I've played around with the software but never thoroughly tested it and I don't know if it accepts PSD but it's worth a try.
     
  10. tejas macrumors newbie

    Joined:
    Oct 29, 2009
    #10
    Let me know if you need any help and I will do if for you for free :)
     
  11. studio¹³¹ macrumors 6502

    studio¹³¹

    Joined:
    Jul 31, 2009
    #11
    i highly recommend you not developing a site like this. if you have photoshop cs2 on hand. plop youre layout into photoshop, save, then open in image ready. slice it up, assign links, create animations, etc and then file> save optimized as -- it will place an html file + images folder where ever you specify. you may need to tinker w/ the code a bit to recognize the location of the images folder...
     
  12. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #12
    That is a very old fashioned/ poor way of building a site. The proper way is to hand-code thus maximizing browser support in xhtml strict.
    If you build your site via photoshop and very little code you will have poor/ non-existent Search Engine Optimization (Google).:)
     
  13. studio¹³¹ macrumors 6502

    studio¹³¹

    Joined:
    Jul 31, 2009
    #13
    no kidding.

     

Share This Page