PSD to Website
A fixed-width Photoshop file, rebuilt as something that works on a phone.
A PSD is onescreen, atone size.
No hover states, no narrow width, no idea what happens when a heading runs to three lines instead of two. Every one of those is a decision somebody has to make.
Part translation, part design
We take the layout, the type and the spacing from the file, work out the grid it was drawn on, and extend that to the widths it never had.
Narrow first, then widen
No narrow width
Fixed-width by definition, and most of your visitors are not.
No hover, no error
States a flat file has no way of showing, and a real page cannot do without.
A heading that wraps
Three lines where the file drew two, and nothing planned for it.
Not a pictureof the PSD.
Four stages, and what comes out is real markup rather than a sliced image — which is also most of what makes it findable.
Find the grid
The one the file was drawn on, underneath the layout, so the extension is not guesswork.
Step 01Extend to narrow widths
The ones the PSD never had, designed rather than squeezed.
Step 02Design the missing states
Hover, focus, empty and error, built where the flat file had none.
Step 03Build it as markup
Headings in order, buttons that behave like buttons, images that do not shove the layout as they load.
Step 04
A list of everydecision.
And what we chose
The PSD left questions open; the build had to answer them. You get the answers written down rather than discovered later.
The file
The build
Type scale
16 / 20 / 28 / 44
Matches
Spacing
4 · 8 · 16 · 32
Matches
Brand colour
#0F62FE
Matches
Hover state
drawn
Matches
Responsive, not sliced
Real markup at every width, not a picture cut into pieces.
A grid and type scale
Derived from the file and extended, so the site holds together at sizes it never saw.
Our fivequality promises.
Five things the studio commits to on every project, each already written somewhere else on this site.
- A fixed price before we startYou get the price in writing once we understand the project, and it does not move during the build. No hourly surprises on the invoice.
- A reply within one business dayEvery enquiry is read by the people who would do the work, and answered within one business day. Mon-Sat, 10am - 7pm PKT.
- Checked on real phonesEvery build is tested on actual devices, because a browser window dragged narrow does not behave the way a phone does.
- Built to be foundReal heading levels, metadata, structured data and a sitemap ship with the site — not as an add-on once traffic fails to arrive.
- Yours to edit afterwardsPages made of blocks your team can move, and a walkthrough at handover, so the first change you make does not need us.
What youactually get.
Four things in every PSD conversion, however old the file is.
- The design rebuilt as responsive markup, not sliced into images
- A grid and type scale derived from the file, extended to narrow widths
- Interactive states designed and built where the flat file had none
- A list of the decisions the PSD left open, and what we chose
Best for
- Designs that predate responsive and still need to go live
- Agencies holding Photoshop files with no front-end capacity
- Anyone sitting on a design they paid for and never built
We reply within one business day
Need PSD to Website?
Tell us what you are building and what it needs to do. We come back with a clear plan, a timeline and a fixed price.