Photoshop naar HTMLLay-out naar HTML

Je Photoshop-ontwerp gebouwd in HTML en CSS: een pagina uit je geëxporteerde layout, met een mobiele versie

Meestal klaar in 15 minutenRevisies inbegrepenKwaliteitscontrole
BetaalbeschermingDetails
  • Revisies binnen het pakket zijn gratis.
  • Reageer je niet binnen 3 dagen na levering, dan wordt het werk automatisch goedgekeurd.
Bestellen · € 35

Het geld wordt bij betaling gereserveerd en pas vrijgegeven als je het werk goedkeurt.

Je Photoshop-ontwerp gebouwd in HTML en CSS: een pagina uit je geëxporteerde layout, met een mobiele versie

Voorbeeldresultaat

Voorbeeld voor het pakket Standaard

Dental clinic home page built from its design

Before: the design the client sent

The home page design

After: the working page

The page on a computer The page on a phone

Files: a ZIP archive with index.html, the styles and 2 pictures for the page, ready to upload to the client's hosting. The pictures here are screenshots of the page.

Client: Bright Smile Dental. Task: turn the home page design into a working HTML page with the same layout, colours and texts, and booking buttons that call the clinic.

De klant en alle details zijn verzonnen.

Over deze dienst

Veel sites beginnen nog steeds als Photoshop-layout, vaak één hoog artboard met de hele pagina erop. Exporteer het als PNG of JPEG en upload het, en wij bouwen het in HTML en CSS: dezelfde secties, kolommen, kleuren en knoppen, met echte tekst in plaats van tekst in een afbeelding, en een mobiele versie gemaakt van de desktoplayout als er geen mobiele is. Wij kunnen geen PSD-bestanden openen, dus lagen, slimme objecten en verborgen staten worden niet gelezen. Foto's en illustraties worden in dezelfde geest opnieuw getekend, tenzij je ze exporteert en als aparte bestanden uploadt. Geen animaties, back-end, winkel, CMS of hosting.

Wat is inbegrepen

  • Wat je krijgtEen ZIP-archief met de pagina's, stijlen en afbeeldingen, klaar om naar je hosting te uploaden, plus een voorbeeld van elke pagina op de bestelpagina.
  • Dicht bij je layoutSecties, kolommen, kleuren en lettergroottes zoals in de export
  • Mobiele versieGemaakt van het desktopontwerp als je geen mobiel ontwerp hebt
  • Echte tekstKoppen en alinea's als HTML die zoekmachines lezen
  • Je foto's op hun plekGeëxporteerd of als aparte bestanden gestuurd, ze worden overgenomen zoals ze zijn
  • Schone codeGewone HTML en CSS, geen frameworks, niets wordt van andere sites geladen

Hoe het werkt

  1. 1
    ExportJe exporteert de layouts als afbeeldingen en uploadt ze met je notities
  2. 2
    BouwWij bouwen de pagina's en tekenen de afbeeldingen die niet zijn gestuurd
  3. 3
    Voorbeeld en archiefJe vergelijkt de pagina's met je ontwerp op een computer en een telefoon, downloadt het archief en vraagt binnen je pakket om aanpassingen

Wat we van je nodig hebben

Maximaal 5 afbeeldingen als PNG, JPEG of WebP: je layouts geëxporteerd uit Photoshop met Bestand > Exporteren > Exporteren als, één pagina per bestand, en desgewenst foto's of je logo als aparte bestanden om zo te gebruiken. Geef aan welk bestand bij welke pagina hoort, de gebruikte lettertypen, teksten die afwijken van de layout, en waar elke knop naartoe leidt. Geen PSD-bestanden.

We vragen je:

  • Welk bestand hoort bij welke pagina?
  • Lettertypen in de layout
  • Moeten de teksten precies zo zijn als in de layout?
  • Waar leidt elke knop naartoe?
  • Is het ontwerp van jou?

Pakketten vergelijken

Basis1 layout, maximaal 5 secties€ 19Standaard1 layout, maximaal 10 secties€ 35PremiumMaximaal 3 layouts€ 60
Levertijd1 dag2 dagen3 dagen
Revisies123
Pagina's113
Sectiesmaximaal 5maximaal 10maximaal 8 per pagina
Getekende afbeeldingen voor de pagina24—
Mobiele versieJaJaJa
Wat je uploadtJPEG- of PNG-exportJPEG- of PNG-exportJPEG- of PNG-export
Getekende afbeeldingen voor de pagina's——6
BestellenBestellenBestellen

Betaalbescherming

Je betaalt bij het bestellen, maar het geld wordt alleen vrijgegeven voor goedgekeurd werk.

  • Vaste prijsDe prijs van het pakket verandert niet meer nadat je hebt betaald.
  • Het geld wordt gereserveerdBij betaling wordt het bedrag alleen gereserveerd. Het gaat pas naar de dienst als je het werk goedkeurt.
  • Gecontroleerd vóór leveringElk resultaat doorloopt een kwaliteitscontrole voordat het bij jou komt, en je ziet het op de bestelpagina voordat je het goedkeurt.
  • Gratis revisiesVraag wijzigingen binnen je briefing aan, zo vaak als het pakket toestaat.
  • Goedkeuring na 3 dagenKeur je het werk binnen 3 dagen na levering niet goed en vraag je ook geen wijzigingen, dan wordt het automatisch goedgekeurd. Schrijf je na levering in de chat van de bestelling, dan wacht de bestelling; zodra we hebben geantwoord, kunnen we de 3 dagen opnieuw laten ingaan en melden we dat in de chat.
  • Opnieuw doen of volledige terugbetalingPast het resultaat niet bij je briefing en hebben de revisies dat niet opgelost, of duurt het werk meer dan twee keer zo lang als de levertijd, schrijf dan in de chat van de bestelling: we doen het werk opnieuw of betalen het volledige bedrag terug.
Hoe het werkt →

Vragen en antwoorden

Hoe exporteer ik een PSD?

Kies in Photoshop Bestand > Exporteren > Exporteren als, kies PNG of JPEG en exporteer het hele artboard. Om een foto precies zo te gebruiken als hij is, stuur je het originele fotobestand apart mee.

Mijn layout is erg hoog. Is dat een probleem?

Nee, één hoge afbeelding per pagina is prima, zolang de tekst op volledige grootte leesbaar is. Elk bestand mag maximaal 20 MB zijn.

Blijven de foto's uit mijn layout behouden?

Alleen als je ze als aparte bestanden uploadt: uit een platte export kunnen wij ze niet netjes losmaken. Anders worden ze in dezelfde geest opnieuw getekend.

Komt het tot op de pixel overeen met mijn ontwerp?

Het komt dichtbij qua indeling, kleuren, maten en volgorde van secties, maar niet tot op de pixel: lettertypen zijn vergelijkbare systeemlettertypen en foto's worden opnieuw getekend tenzij je je eigen foto's uploadt. Met revisies pas je aan wat voor jou belangrijk is.

Kan ik een gekocht template sturen?

Ja, als de licentie toestaat dat je het voor een website gebruikt. Wij bouwen alleen ontwerpen die van jou zijn of die je mag gebruiken.

Staat je antwoord er niet bij?

Alle diensten in Ontwikkeling & IT

Meer in Ontwikkeling & IT

Bestellen · € 35· ~15 min