Member Avatar for agorainfo

Hello My Dear Friend's,
I'm doing a Web Designing Course & I don't know how to make a website in Photoshop. And How to choose width & Height of website page.

  • 4 Contributors
  • 3 Replies
  • 192 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Quick, practical update for and anyone reading this years later: the 2011 workflow shown in the replies (fixed-size PSDs, slicing to produce HTML) reflected the tools and screens of that era, but the web has moved to fluid, device-agnostic layouts. Design mockups are still useful, but treat them as visual specs rather than final code — build layouts that reflow with CSS (media queries, flexible grids) so content works at any width. (developer.mozilla.org)

A recommended, modern workflow you can apply right away:

  • Design multiple artboards (mobile → tablet → desktop) and keep UI elements as vectors/components so they scale and update cleanly.
  • Use a purpose-built UI tool for collaboration and component libraries (Figma or similar) to speed handoff and avoid stitching PSDs manually.
  • In the final build, rely on CSS Grid / Flexbox for structure and export scalable assets (SVG for icons; responsive raster images for photography using srcset/picture).
    Include a minimal starting point in your HTML/CSS:
<!-- put in <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1">

/* layout helpers */
.container { max-width: 1200px; margin:0 auto; padding:0 1rem; box-sizing:border-box; }
img { max-width:100%; height:auto; display:block; }

These tool and layout practices are the current standard and make handoff simpler for developers. (smashingmagazine.com)

Quick checklist / troubleshooting:

  • Use rem (or em carefully) and percentages for spacing and type so the site respects user scaling and accessibility.
  • Test on real devices, use Lighthouse or browser DevTools to catch overflow/horizontal-scroll issues, and prefer semantic HTML over image-only layouts.
    If Photoshop is your only tool, keep artboards and layer organization tidy, export vector icons from Illustrator or as SVG where possible, and move to a UI tool when collaboration is needed. (developer.mozilla.org)

Recommended Answers

All 3 Replies

Member Avatar for godflea

About width and height...
A website is usually built with width of 960px; it is some kind of standart, which fits to all kind of resolutions.
While working on layout in Photoshop I always set the document size to 1350x1200px, it gives me more range to work on, but the CONTENT(grid) is 960px. Never work in 960px in photoshop. Once the document is created and filled with content you can increase the height to add more content.

commented: the 90s are dead, fied sizes are out -3
Member Avatar for brainfo

Design a layout from photoshop. Slice it by slicing tool and while saving press ALT + shit + ctrl + S and choose HTML and images both in option. now you can edit the html page manually to create hyper link.

commented: the 80s are dead, image slicing was stupid even then -3
Member Avatar for almostbob

photoshop, the 80s are long dead, and so should be the ideas from them
pixels, my screen is 2600px wide, and is not large
fied size layouts do not work on anything other than the device used to lay them out, even different browsers at the same resolution render fixed sizes differently

slicing images: is long out of date

current best practice is em and %

the course is far out of date, suggest trying a different course,

Edited by almostbob 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.