Member Avatar for isosceles_krame

Hello daniweb designers,

I'm a programmer who is working with a mockup for a site I'm building. No, correction, I am a JUNIOR programmer. And I've never worked from a mockup before. I'm doing this particular build on my own for work.

I've been able to get all parts of the file into working web page elements. The problem is that the original canvas size isn't sized for a website (I don't think...) It's 3333px x 2500px. And it doesn't size properly. I've tried changing the sizing in code but it skews the images which is obviously not going to work out.

When I try to change the canvas size, it crops out parts of my document and everything goes wrong.

As you can see, i know so little about photoshop that i don't even really know how to ask this. Basically i need to be able to rezise this file canvas in such a way to keep the image.. integrity but make it more workable for a standard site.

If that makes sense, does anyone know what I can do? Should I send this file back to the designers? Or is there a quick and dirty (idiot programmer, non-designer) way to fix this myself?

Thanks daniweb!

ella

  • 3 Contributors
  • 2 Replies
  • 238 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

A few practical options that bridge the suggestions already made by (file type matters) and (ask the designer for a web-sized version): convert the mockup to web-friendly assets non‑destructively in Photoshop, export the right sizes, and let the browser scale images with CSS so proportions are preserved.

Non‑destructive Photoshop workflow (keeps image integrity):

  1. If the PSD has layers, convert complex groups to Smart Objects (Layer > Smart Objects > Convert to Smart Object) so scaling won’t blur vectors/text.
  2. Use Edit > Free Transform to scale the whole design proportionally, or use Image > Image Size to set the target pixel width for the full layout (leave Resample enabled and choose a reduction method like Bicubic Sharper/Automatic). Avoid Image > Canvas Size for shrinking—Canvas Size crops content.
  3. Export finished graphics with File > Export > Export As (or Save for Web) and produce the pixel widths actually needed by the site (desktop, tablet, mobile; include 2x assets for high‑DPI if needed).

Quick CSS rules to prevent skewing in the browser:

img { max-width: 100%; height: auto; display: block; }

Avoid hardcoding both width and height attributes on images; set one dimension and let the other auto-adjust. For background art, consider background-size: cover or contain depending on intended behavior. For responsive images, use srcset/sizes to serve appropriately sized files.

If designer support is available, request a PSD exported to the target layout width (and sliced assets, font names, and spacing specs). If time is limited, follow the non‑destructive export path above and test the exported assets in the intended page layout to confirm crispness and proportions.

Recommended Answers

All 2 Replies

Member Avatar for Member #120589

Are you looking to resize the image to a realistic size? Is it a photoshop file? What format is it? That'll give you an idea of what you can do with it. jpegs are pigs to resize properly.

Member Avatar for Member #334542

If the photoshop mock up is designed with the 3333px x 2500px then the designer should change the design according to your web dimensions.

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.