Was sind die Best Practices von PSD zu HTML mit HTML5?

Ich bin ziemlich verwirrt mit all den verschiedenen Methoden zum Konvertieren von PSD in HTML 5. Ich versuche, das Konvertieren von PSDs in HTML zu üben, damit ich genug Erfahrung bekomme. Es gibt eine Menge komplizierter mehrschichtiger PSDs mit Tonnen von Gittern und Linealen usw. Ich bin verwirrt vom Arbeitsablauf und brauche einige Schritt-für-Schritt-Anleitungen zum genauen Ablauf. Insbesondere bei aktuellen Standards werden die meisten Texte mit CSS-Webfonts angezeigt.

Was genau wird noch in psd gemacht und warum? Woher wissen wir genau, wo wir das Zeug platzieren sollen?

Antworten (3)

Ich würde nicht weiter versuchen zu lernen, wie man eine PSD für HTML aufteilt. Diese Praxis ist veraltet und Sie werden sich später nur noch verletzen. In Bezug auf "aktuelle Standards" codieren die Leute normalerweise in einer IDE. Eine Sache, die Sie beim Slicing verstehen müssen, ist, dass Sie, wenn Sie eine responsive Website haben, eine Menge Zeit damit verbringen werden, ein Stück zu schneiden, und Ihre Website wird mit all den Bildern langsam sein. Sie sollten ein Bild nur für den beabsichtigten Zweck, ein Bild, verwenden. Mit dem heutigen CSS3, SVG und jQuery sollten Sie in der Lage sein, alles zu codieren, was Sie brauchen, anstatt ein Schnittbild zu verwenden.

Ich bin durch den Arbeitsablauf verwirrt und brauche einige Schritt-für-Schritt-Anleitungen zum genauen Ablauf.

Ich bezweifle, dass Sie hier eine Schritt-für-Schritt-Anleitung erhalten, aber wir haben:

Was genau wird noch in psd gemacht und warum?

Einige verwenden immer noch Photoshop, um ein Mockup der Website zu entwickeln, und wenn Sie Responsiveness betreiben, können Sie basierend auf Ihren gezielten CSS-Breakpoints entwerfen. Ich bevorzuge Illustrator wegen seiner Artboard-Funktion und wenn ich in AI entwickle, kann ich normalerweise einfach als SVG exportieren.

Woher wissen wir genau, wo wir das Zeug platzieren sollen?

Das käme auf das Design an.

Wenn Sie in der Grid-Mentalität feststecken, können Sie jederzeit lernen, wie man Foundation oder Bootstrap verwendet, die für die Verwendung einer gitterartigen Struktur bekannt sind:

Stiftung :

Geben Sie hier die Bildbeschreibung ein

Bootstrap :

Geben Sie hier die Bildbeschreibung ein

Was sind die Best Practices von PSD zu HTML mit HTML5?

Es gibt keinen. Das Entwerfen in Photoshop wird von weiten Teilen der Branche nicht als bewährte Methode angesehen.

Wenn Teams in Photoshop entwerfen, entwerfen sie in der Regel nicht mit HTML – was letztendlich das ist, was in die Website eingebaut werden muss. Daher argumentieren viele (wie auch ich), dass Ihr Design in HTML beginnen sollte. Sie können zwischen HTML und Photoshop hin und her springen, aber versuchen Sie nicht, die gesamte Site/Seite in Photoshop zu entwerfen, bevor Sie überhaupt HTML berührt haben.

Die Umstellung von einem Medium auf das andere führt immer zu Ineffizienzen. Es ist am besten, danach zu streben, in dem Medium zu entwerfen, auf dem das Produkt schließlich geliefert wird.

Ich stimme RayC zu - normalerweise "slice" und "exportiere ich für das Web", verstecke Ebenen und wähle bestimmte Slices nach Bedarf aus. Ich verwende immer CSS für das Hintergrundbild und/oder Tabellenbilder und verlasse mich dann auf HTML für das Wesentliche. Es hört sich so an, als würden die Lineale für den Schneideteil verwendet. Wenn Sie zu Slice > Slice Tool gehen, sehen Sie eine Schaltfläche mit der Aufschrift „Slices from guides“ – dies schneidet Ihr Bild basierend auf Ihren Linealpositionen. PSD ist nur der Designteil; Wenn Sie HTML und Bilder für das Web exportieren, erhalten Sie alles, was Sie für Dreamweaver oder jede andere HTML-Software benötigen.