SitePoint Sponsor

User Tag List

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

    Question Designed the PSD now what?

    I have recently designed a psd in PS cs4 , I want to turn it into a website and use it for all of the template pages.

    I played around with it and used layer slices, saved it for the web with html. Opened it up in dreamweaver cs4 and tried to delete the image where the content will go and add a div. When I paste text into it it breaks the design.

    So I want learn this the correct way. So I am asking for some step by step help starting with just having the psd.

    I also am not sure if css has to be involved and if so I will need to know how to do this as well.

    If needed I can attach the psd.

    I would greatly appreciate all help.

    Whatever I learn from this I want to make it my routine to build websites with photoshop and dreamweaver. I want to learn the process.

    Thanks

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all you'll have to learn HTML. Properly. You need to understand not only how it works, but also what it is. It's not difficult and you should get it in a couple of days if you find a good book or online tutorial.

    Then you need to learn CSS. That is slightly more complex that HTML, but the major problem is that different browsers implement it differently. Especially Internet Explorer, unfortunately the most used browser in the world, gets a lot of it wrong. Figure a couple of months, at least, to become proficient.

    There are no real shortcuts if you want to do a good job. Letting some software do it for you (by 'slicing' or 'exporting') means throwing your design work into the toilet. Software doesn't understand what's what, and cannot generate semantic markup.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I do see your point, but I am kinda in a bind.

    I promised my Dad that I would do his business website, and he wants me to do this in the next two weeks.He likes the psd that I came up with.

    I had read a couple of post on some other forums, kind of explaining the psd slicing and coding thing. It seemed as though I would beable to figure this out as I went along. Not the case, I'm afraid.

    So I need to get this done, and not let him down. I will have to get over a huge learning curve.

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    I am sorry to say that you promised something that you can't keep up. A site comprises much more than HTML, CSS ... even more than Javascript.

    Post the code so we can have a look at it, and a picture of how you would like it to look. Use the [code ] and [ /code] tags (no white spaces). Still, I can't guarantee that you will have your site in two weeks time.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Portugal and Czech Republic
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wishmaster22,

    When I do what you did, designing a .PSD for a fast and simple website, I do create my slices with dimensions that will keep the design tight after I paste the text. I suppose your text is too long for the space you allocated to it.

    I suppose it's possible for you to create that website in two weeks, assuming it's a pretty simple project. But most probably it will bring you some headaches along the process.

  6. #6
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without looking at an image or anything. I'll start you off.



    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
     
    </style>
    </head>
    <body>
     
    </body>
    </html>

    What they call the above is the HTML structure of a document. What your going to want to do is. Open your .PSD layout in Photoshop or other Graphic editing software. Open Notepad. Put the code I have provided and (save as test.html) Start slicing your images. It saves alot of time if you slice them now. Some developers slice there design's when they need the image to put into their markup or CSS.


    Give your site a Container
    Code HTML4Strict:
    <div id="Container">


    Code CSS:
    *{margin:0;padding:0;}
     
    #Container {
     
       width:100%;
       height:100%
     
    }
    Body    {
     
     
    /*put your styles here */
     
    }
     
    #Header    {
     
    /*put your styles here */
     
     
    }
     
    #Maincontent {
     
    /*put your styles here */
     
    }
     
     
    #Footer        {
     
    /*put your styles here */
     
     
     
    }



    Code CSS:
     
    <div id="Header">
     
     
     
    </div>
    <div id="MainContent">
     
     
     
    </div>
    <div id="Footer"></div>

    Depending on your layout. Give my your .PSD and I can see what I can do.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Blake, please don't 'ruin' a beginner by leading him(?) on the silly pretend-XHTML path.
    Birnam wood is come to Dunsinane


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
  •