Member Avatar for Latrell_vie

Hi folks ! Since last year i started building website. Up til now i always used html css and javascript/jquery. Now i want to get into adobe photoshop. My question : Can i upload my existing html file into adobe photoshop for editing or is there any other way to edit my html file per adobe photoshop ? Andy how if its possible ? Thx for answers

  • 4 Contributors
  • 4 Replies
  • 439 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short answer: Photoshop is a design tool, not an HTML editor — it creates visuals and assets you then use in code. As and pointed out, treat Photoshop as the place to design comps and export graphics; the actual HTML/CSS should be written and edited in a code editor or IDE.

Practical, repeatable workflow:

  • Design at a base width and keep separate layer comps for breakpoints so you have desktop/tablet/mobile references.
  • Keep text layers editable and use vector shapes for icons; export icons as SVG where possible so they stay crisp and small.
  • Name layers you plan to export (eg. logo.png, icon-search@2x.png) and use Photoshop's Export/Generate features to produce assets. Export raster images at appropriate quality and produce 2x versions for high-DPI screens.
  • Avoid slicing entire layouts into images. Use CSS (backgrounds, gradients, flexbox/grid) for layout and only export what must be a bitmap (photos, complex textures).

Developer integration and practical tips:

  • Recreate the layout in semantic HTML and CSS rather than relying on exported HTML from Photoshop (that output is usually bloated and hard to maintain).
  • Use a modern code editor (with live reload or a simple local server) and Chrome/Firefox devtools to iterate quickly — test the exported assets in the browser and adjust CSS instead of re-exporting images for every minor tweak.
  • Keep assets organized in an "img" or "assets" folder, optimize them (lossy for photos, lossless for logos/icons), and use a naming convention that makes it obvious which files are retina-ready.

Small practical example for responsive images:

<img src="hero.jpg" srcset="hero@2x.jpg 2x, hero.jpg 1x" alt="Hero">

Cautions: do not rasterize body text unless necessary; prefer web fonts or system fallbacks; and treat the Photoshop file as a living spec (include measurements, font sizes, and spacing) so development matches the visual intent.

Recommended Answers

All 4 Replies

Member Avatar for gentlemedia

Why would you want to edit your HTML in a photo editor? It's not possible by the way, but how did you edit your HTML before then? Web designers do design website comps/mock-ups or assets in Photoshop and you could in the old days export your design to (bloated) HTML with it, but what you want is not done before :)

Or do you mean with 'editing' the content (text, images, etc.) of that HTML file?

Edited by gentlemedia
Member Avatar for EvolutionFallen

Are you sure you mean Photoshop and not Dreamweaver? You can't edit a website in Photoshop, it's an image editor. Dreamweaver is a web development editor: you can open your site resources in it, view them in design view if desired, and edit them there. Though honestly, I find it less professional to use DW.

Photoshop should be used for designing your site, such as layout and graphics. But it's not a replacement for HTML & CSS. It's a way to visualize what you're going to code in HTML & CSS, and extract the graphics you're going to use.

Edited by EvolutionFallen
Member Avatar for Latrell_vie

After spending sometime with photoshop i see i was wrong , you were right its only for designs which i can include into my website

Member Avatar for almostbob

For development purposes, an IDE can give simplified coding, enabling you to see the immediate effects of code changes, many of them do produce tight code
Don't try a wysiwyg editor, output is ridiculous
Look at CoffeeCup Free html editor as a starting point, it speaks jquery
graduate from there to a simple notepad replacement, once you have a good grasp of the concepts and effects of the code, you can produce very good code, rapidly
Always keep everything that works:
most code, is another coding job re-used, over and over again

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.