Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Banned
    Join Date
    May 2009
    Posts
    1
    Member #
    19026
    I was wondering if there are anyone nice enough to walk me through a few examples how to take a PSD, slice it up, and code it for HTML and CSS (tableless design) .
    If you do not have the time for it I understand, but it would be so kind and useful!

    Thanks in advance
    Daniel

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Crop out the parts and place them as background images in divs. Other than that, I don't think you can have PS do it automatically. There are services out there that will do it though. It's hard to tell you what to do without seeing the image.

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    I'll start with the first part and allow someone to take it from there. You design an HTML / CSS layout very much like you design a PSD - in layers.

    You should start by deciding which parts of your PSD will go into which layers of your website. You can then group the necessary Photoshop Layers together and turn them on or off to create your exported images.

    What I like to do is create a new file from each of the layer groups and slice / export from there. That way, I know I'm preserving the integrity of my original PSD file and won't lose anything.

    So I usually start from the background texture / gradient / image / whatever. I'll determine if there's a repeatable pattern in it (e.g. a vertical gradient) and make a gif from that, as small as possible (e.g. 1px wide x however many pixels tall for a vertical gradient). If necessary, I'll make additional images for other layered effects on top of that gradient. Solid continuous colors behind your BG images can be specified by color code in your CSS, so you don't need images for those.

    Someone take it from there!

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    By the way, Daniel, before I ban you, please explain this, from your Home Page link in your profile?


  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Wow, I'd like to know too.

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Didn't answer quicly enough... banned.

  8. #7
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    Quote Originally Posted by smoseley
    Didn't answer quicly enough... banned.
    :bandit:
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  9. #8
    Senior Member kevind_2007's Avatar
    Join Date
    Sep 2003
    Location
    South Carolina
    Posts
    586
    Member #
    3059
    What was his home page link?
    --Kevin
    15" MacBook Pro With: Mac OSX 10.4.11(Tiger) 1440x900 Windows XP SP2 3GB RAM 1TB HDD
    kevind_2007--"Never let the fear of striking out get in your way."--Babe Ruth

    Links:Firefox Download||Google|| HTML Help||DHTML|| Web Design Terminology||Good-Tutorials

  10. #9
    Member
    Join Date
    Feb 2009
    Posts
    38
    Member #
    18364
    Well do you have any previous experience with html/css and photoshop? There is an option in photoshop that allows you to cut the image up if you just press K it will automatically show up. I have a blog so I'll do an entire demonstration on how to do it for my next blog. It's blackrhinosolutions.com/blog

  11. #10
    Junior Member
    Join Date
    May 2009
    Posts
    1
    Member #
    19060
    How to convert PSD to Html+Css... step by step
    1. Install plugin for Photoshop. DIVine or something like Sitegrinder 2 (Free version DIVine much better then free version of Sitegrinder )
    2. Modify document's layers. (In case with DIVine you can modify later)
    3. Launch plugin.
    4. Get your Html page.
    5. Publish on server (In case with DIVine you can publish your site at wordpress or blogger directly from plugin)

    Hope it was usefull information for you


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:28 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com