Member Avatar for azapovjednik

Hello,

can anyone explain to me this 960 grid psd file?
I open it and see a web page picture and many grids and many layers... is it s functional website or those are just images?? please help me to understand this task...

thank you

  • 2 Contributors
  • 2 Replies
  • 120 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by azapovjednik

Dani AI

Generated

For — that PSD is a static Photoshop mockup laid out on the 960px grid. It is not a working site; the many layers and the visible grid are there to show alignment and to make asset extraction easier. As indicated, the visual guides map to columns you will recreate in HTML/CSS.

What to look for inside the file: a layer group called “grid”, “columns” or “guides”; folders for header, nav, content, sidebar and footer; image placeholders or rasterized text; and sometimes prepared slices. Toggle the grid/guides layer off to see the clean design. If text is rasterized you will need to retype it; vector shapes or smart objects can usually be exported cleanly.

A simple PSD-to-HTML workflow:

  1. Identify and hide guide layers, note column counts (12/16/24).
  2. Export icons and images (SVG for vectors, PNG/JPEG for raster). Photopea can open PSDs if Photoshop is not available.
  3. Build semantic HTML and map blocks to grid columns (e.g., sidebar vs main content).
  4. Apply a 960 container or a modern layout (Flexbox/CSS Grid) and test in browsers.
  5. Consider converting fixed widths to percentages for responsiveness.

Example structure you might use:

<div class="container_12">
  <div class="grid_4">Sidebar</div>
  <div class="grid_8">Main content</div>
</div>

Quick resources: the official 960 Grid System (960 Grid System), open/edit PSDs online at Photopea, and modern layout guidance at MDN Learn CSS layout. Note: 960 is a fixed-width approach — for new projects prefer responsive methods (Flexbox/CSS Grid or a framework like Bootstrap).

Recommended Answers

All 2 Replies

Member Avatar for Member #46692

It's so you can design your website within the 960 grid system.

Typically, so your images fit the default 960 .css

Member Avatar for azapovjednik

thanks, I need to find some online tutorials for beginners.

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.