Member Avatar for wastedkill

Hi i recently made a 3 column PSD of the website page i want and this is for all the pages and i have no idea how to make a 3 column PSD into a CSS style sheet as i want to add a lot of PHP code to get a lot of functionality into the website as i have the account system functioning to a extent but i also have a design for that and as im learning PHP and i have searched for 4 days and no answer so any help would be greatly appreciated :)

Edited by wastedkill because: n/a
  • 2 Contributors
  • 3 Replies
  • 100 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

Short, practical route from a 3-column PSD to reusable PHP/CSS pages (building on question and suggestion).

Start by exporting only the assets you need (logo, icons, decorative textures). Avoid slicing the whole page into images. Create semantic HTML so content is separate from presentation: header, nav, main, aside, footer. A simple skeleton:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/site.css">
</head>
<body>
  <header>Logo + nav</header>
  <main class="layout">
    <aside class="col-left">Left</aside>
    <section class="col-main">Main</section>
    <aside class="col-right">Right</aside>
  </main>
  <footer>Footer</footer>
</body>
</html>

For layout use CSS Grid (or Flexbox). Grid makes fixed/elastic column combos simple and is responsive-friendly:

.layout {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 20px;
}
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
}

Integrate with PHP by splitting repeating parts into includes (header.php, footer.php, sidebar.php) and keep one central stylesheet. Example:

<?php include 'header.php'; ?>
<?php include 'sidebar.php'; ?>
<?php include 'footer.php'; ?>

Practical tips: use webfonts or system fonts with fallbacks, SVG for icons, export retina assets at 2x where needed, and run a normalize/reset. Measure typography and spacing in PSD, map px to rem for scalable text. Test breakpoints with browser devtools and keep the layout fluid instead of fixed pixel-only widths. For modern layout references see the MDN guides on CSS Grid and Flexbox (CSS Grid, Flexbox basics).

Recommended Answers

All 3 Replies

Member Avatar for teedoff

wow not one period in that whole post...lol

ummm Why not try to google something like "how to create webpage from photoshop"?? There are tons of tuts out there.

Member Avatar for wastedkill

ye loads of tuts to do image based 2 column webpages lol

EDIT: just so you get the design i have got here is the link to the image http://www.beta.maximumcreation.com/web2.html

Edited by wastedkill because: n/a
Member Avatar for teedoff

Here is a simple . Someone on another forum has this website and has lots of good samples and code to use.

I don't create pages in photoshop and slice them up like what you're trying to do. Study the code on the site I gave you. Its the same principle and can be used to do what you need.

Edited by teedoff because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.