transfering a .JPG .PSD page layout into an html page.

Hello,

I have a .JPG picture Design for a website.  How I will be able to transfer this into an html template?
LVL 4
koilaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That depends on your jpg.  If everything is touching and you need all the images, it could be tough.  However, most sites today don't need all the slicing and dicing of the past decade.  Instead, your jpg is a guide.    If you can post your image, we can give you more details.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David BruggeCommented:
Although Photoshop advertises its ability to turn your art into a web page, its abilities are very limited and poorly executed. The approach that they take is what web designers would consider a clumsy hack.

Basicly, it directs you to cut your image up into slices, then it builds a table to put each of these slices into. The trouble is you gain nothing for your effort. In fact, studies have shown that your large, original image will actually load faster and take up much less space than the same image cut up and loaded into a table. [You can click on the CSS option and it actually makes things worse]

The only advantage of doing things this way is that you can take a slice from the table and turn it into a roll-over or a button.

The basics of CSS are really and truly very easy to learn. There are some advanced techniques that get a little tricky, but the same can be said of Photoshop.

What most web designers do is mock up a website using Photoshop, then load that image onto a blank web page and start writing code to duplicate it on top of the image, using the image as a spacing guide.

Or, they make mock up a website, slice it up, then throw away the generated code and the useless slices and make use of the key slice images on a new site with their own code.

Like padas says, give us a look at your image and we can set you in the right direction.
0
koilaAuthor Commented:
Here is the JPG Image. How I will be able to create this in HTML.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

koilaAuthor Commented:
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
very basic and quick http://jsbin.com/aCeJitO/1/
I didn't take time to get the exact color but you can use https://kuler.adobe.com/create/color-wheel/ and you will just need to cut out the top logo area and that is it.  (make sure the header background matches).   You could make the oval in css as well.  http://css-tricks.com/examples/ShapesOfCSS/

html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <div id="container">
    <div id="header">
     header
    </div>
    <div id="body">
      <div class="leftcol">left</div>
      <div class="main">Main
        <h2>I am a header</h2>
        <div>I am content</div>
      </div>
      
    </div>
    
    
  </div>
</body>
</html>

Open in new window

css
#container{width:800px;}
#header{padding-top:20px;padding-bottom:20px;background-color:#33CCCC;text-align:center;}
.leftcol{float:left;width:200px;background-color:#99FFFF;padding-left:5px;padding-right:5px;height:500px;}
.main{padding-top:20px;padding-left:10px;float:left;}
h2{background-color:#99FFFF;width:500px;padding:5px;}

Open in new window


If you want to get more complex, this can put into a responsive grid like bootstrap as well in order to account for multiple screen widths.  http://getbootstrap.com/
0
EirmanChief Operations ManagerCommented:
To save yourself having to retype all the text, send a scanned image of the text region(s) to a free online OCR service such as http://www.onlineocr.net/
0
koilaAuthor Commented:
I will test it. thanks.
0
koilaAuthor Commented:
still working on this issue.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Creative Suite CS

From novice to tech pro — start learning today.