Member Avatar for marjan_m

Hi,

I want to ask that how a web page can be design in photoshop.??

Kinldy reply soon

Thankx

  • 5 Contributors
  • 4 Replies
  • 234 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

A concise, modern primer that updates the 2007 thread: Photoshop can still produce pixel-accurate mockups, but current web work expects responsive layouts, vector assets, and a separate HTML/CSS implementation phase. A practical workflow is to design artboards at common breakpoints, keep text and shapes editable (not rasterized), produce SVGs for icons and logos, and export only the bitmap assets that cannot be reproduced with CSS. See Figma’s discussion of modern design workflows and Photoshop’s export features for current export options. (Figma blog) (). (figma.com)

A compact, repeatable workflow (applies whether using Photoshop or a UI tool that replaced it):

  • Start with low-fi wireframes and a simple grid/gutter spec, then move to high-fi artboards for mobile/tablet/desktop.
  • Use paragraph/character styles and keep type editable so developers can copy font specs.
  • Keep UI pieces as vector shapes or exportable SVG symbols; name layers for asset export (for example icon.svg or logo@2x.png) and export with “Export As” / “Quick Export” rather than slicing everything into images.
  • Reserve bitmap exports for photos, complex textures, or legacy email assets. See Photoshop’s layer/artboard export and the MDN SVG guidance for why SVGs are preferable for UI elements. ()

Practical code example for responsive images (use <picture> / srcset so browsers pick the right file/format):

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w">
  <img src="hero-800.jpg" alt="Headline" sizes="(max-width:800px) 100vw, 1200px">
</picture>

Use srcset/sizes to serve appropriate resolutions and reduce wasted bytes. (developer.mozilla.org)

Notes tied to the thread: ’s point about mockups being visual still stands — mockups are not the running site. ’s slicing idea reflects historic workflows; modern Photoshop/Figma export tools automate asset output but hand-coded HTML/CSS (using Grid/Flexbox) is still required. ’s note on graphics/animations remains relevant—prefer CSS/SVG or lightweight animated WebP over heavy GIFs. ’s warning about full-image sites is still valid: optimize formats and use modern formats and responsive techniques to avoid large load times (see image-performance guidance). (web.dev)

Further reading: Adobe export docs, MDN responsive-image and SVG tutorials, and web.dev image-performance guidance (links above).

Recommended Answers

All 4 Replies

Member Avatar for peter_budo

You can only design interface of web site not fuctionality. This will give you visual idea what your page will look like. It is always good practice to put each element on separate layer.

Member Avatar for Phaelax

You can use ImageReady to slice your design up into separate image files and it will also build the html file which pieces it back together for a webpage. (although some changes usually need to be made to the code afterwards)

Member Avatar for jbennet

And you can use photoshop to make your animated banners, buttons, toolbars and other web graphics too.

Member Avatar for macneato

Yes you can even though i wouldnt suggest it. Load times are increased, backgrounds arent colours but images (even just plain white)... plus, imagine updating it, probably re-upload the entire site

, never used it, but have seen a couple of sites done with it. not half bad

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.