Markupwand: Photoshop-Dateien in HTML und CSS umwandeln

Das Startup Goyaka Labs hat mit dem Markupwand einen Dienst veröffentlicht, der Photoshop-Dateien im .psd-Format in HTML und CSS umwandelt, ohne dazu absolute Positionierungen zu verwenden.

Artikel veröffentlicht am ,
.psd-Dateien in HTML und CSS umwandeln
.psd-Dateien in HTML und CSS umwandeln (Bild: Markupwand)

Markupwand macht aus einer .psd-Datei HTML und CSS. Die Entwickler Alagu, Raj Natarajan und Suren aus Bangalore versprechen sauberen Code ohne absolute Positionierungen. Damit das Ergebnis sinnvoll weiterverwendet werden kann, setzten sie auf Compass und SASS. Ein Webeditor erlaubt es, die verwendeten Klassen zu benennen.

Stellenmarkt
  1. SAP WM/EWM Berater (m/w/x)
    über duerenhoff GmbH, Frankfurt am Main
  2. SAP Logistik-Berater (m/w/x) mit Fokus auf SD - SAP Logistic
    über duerenhoff GmbH, Darmstadt
Detailsuche

Damit Markupwand ein gutes Ergebnis erzielt, sollte die Photoshop-Vorlage in möglichst viele kleine Teile aufgesplittet werden. Jeder logische Textabschnitt sollte eine eigene Ebene erhalten. Jedes Icon oder Bild sollte ebenfalls auf einer eigenen Ebene angeordnet werden, aber auch nicht mehr. Andernfalls würde es nicht als ein Bild ausgegeben werden. Zudem sollte auf Hacks verzichtet werden.

Wer Elemente mit Formen erzeugt statt mit Bildern, erhält im Ergebnis mit CSS gestaltete Buttons statt fertige Grafiken.

Markupwand kann nach der Anmeldung mit einem Google-Account kostenlos genutzt werden. Noch handelt es sich um einen frühen Prototyp, die drei Entwickler planen diverse Verbesserungen. So soll es künftig nicht mehr notwendig sein, eine Seite in viele Teile zu splitten, und es soll möglich werden, auch Tags zu editieren, um semantisches HTML zu erzeugen. Auch die Zahl der erzeugten CSS-Regeln soll in Zukunft deutlich reduziert werden.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Insomnia88 25. Jul 2012

Erläuter mal, weshalb genau out?

Insomnia88 25. Jul 2012

Also kurz, für die Designer gedacht, die entwerfen aber ned coden können und...

hei_zen 24. Jul 2012

Ich bezweifle dass so ein Tool semantisch sinnvollen Code schreiben kann. Wie sollen z.B...



Aktuell auf der Startseite von Golem.de
Von Cubesats zu Disksats
Satelliten als fliegende Scheiben

Leichte und billige Satelliten, die auch zu Mond und Mars fliegen können: Aerospace Corp hat den neuen Standardformfaktor Disksats entwickelt.
Von Frank Wunderlich-Pfeiffer

Von Cubesats zu Disksats: Satelliten als fliegende Scheiben
Artikel
  1. Full Self Driving: Tesla-Fahrer dürfen Beta nur bei Wohlverhalten nutzen
    Full Self Driving
    Tesla-Fahrer dürfen Beta nur bei Wohlverhalten nutzen

    Die Testversion des Full-Self-Driving-Pakets sollen nur Tesla-Fahrer nutzen dürfen, deren Fahrverhalten einwandfrei ist.

  2. Umweltfreundlicher Sattelschlepper: Iveco und Nikola starten E-Lastwagen-Produktion in Ulm
    Umweltfreundlicher Sattelschlepper
    Iveco und Nikola starten E-Lastwagen-Produktion in Ulm

    Die Nikola-Zugmaschine Tre mit Elektroantrieb soll zunächst für den US-Markt gefertigt werden, später auch für Europa.

  3. Echtzeit-Strategie: Age of Empires 4 braucht nicht die schnellste Hardware
    Echtzeit-Strategie
    Age of Empires 4 braucht nicht die schnellste Hardware

    Die vollständigen Specs für den Technik-Test von Age of Empires 4 liegen vor. Spieler können ab heute Abend in die Historie eintauchen.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • Corsair Vengeance LPX DDR4-3200 16 GB 63,74€ und 32 GB 108,79€ • Alternate (u. a. Creative SB Z SE 71,98€, Kingston KC2500 2 TB 181,89€ und Recaro Exo Platinum 855,99€) • Breaking Deals mit Club-Rabatten • ASUS ROG Crosshair VIII Hero WiFi 269,99€ • iPhone 13 vorbestellbar [Werbung]
    •  /