Materialdesign / Höhe in Photoshop

Ich bin neu im Materialdesign und möchte ein neues Design in diesem Stil beginnen. Mein Problem ist, dass ich nicht weiß, wie ich die Höhe (z-Achse) reproduzieren soll. Im Bild unten sehe ich 12 Höhenstufen , aber wie erstelle ich diese Stufen in Photoshop ?

Übrigens: Ich weiß, dass ich Drop Shadow in Photoshop verwenden muss , aber welche Werte stelle ich für jede Ebene von Elevation ein .

( Link zur Webseite )Geben Sie hier die Bildbeschreibung ein

Sie haben Recht, dass Sie Schlagschatten verwenden müssen. Bei welchem ​​Teil hast du Probleme? Ich würde das Level scannen und einen Vergleich nebeneinander anstellen und einfach mit den Werten herumspielen. Sie können auch vorgefertigte Schatten im Internet finden, indem Sie in Photoshop nach Erstellen von Materialdesign-Schatten suchen

Antworten (1)

Ich kann jetzt nichts zu Android-Schatten in den Google-Designdokumenten finden, aber es gab anscheinend einmal eine Liste der Werte für Adobe Illustrator, aber sie scheinen sie entfernt zu haben.

Es gibt viele Ressourcen, die 5 verschiedene Schattenstufen auflisten. Die Google Design-Dokumente verlinken auf die Polymer-Dokumente, die sagen:

Hinweis: Die Materialdesignspezifikation beschreibt Z-Höhen als in Display Independent Pixels (DIPs) angegeben. Die aktuelle Implementierung von <paper-shadow>entspricht diesbezüglich nicht der Spezifikation. Die Z-Werte sind willkürliche Werte im Bereich von 0 (keine Höhe) bis 5 (maximale Höhe) und entsprechen keinen DIPs.

Geben Sie hier die Bildbeschreibung ein

Dies gilt jedoch für die Webentwicklung und gilt daher nicht für Android-Apps.

Soweit ich sehen kann, werden die Schatten in Android automatisch aus der Höhe erstellt, die Sie für ein Element festlegen.

Die einzigen Optionen, die mir einfallen, ohne etwas Genaueres zu finden, sind:

  1. Verwenden Sie z-Tiefe 1 und z-Tiefe 5 als Werte für die untere und obere Erhebung und extrapolieren Sie die Werte dazwischen.

  2. Wenn Sie die App entwickeln oder Ihren Entwickler dazu bringen können, dies für Sie zu tun. Erstellen Sie schnell einen Bildschirm in Android mit beliebig vielen Objekten, die auf die verschiedenen Höhen eingestellt sind, machen Sie einen Screenshot und replizieren Sie den Schatten in Photoshop mit Versuch und Irrtum und notieren Sie die Werte für jede Höhe.

Hinweis: Ich bin kein Android-Entwickler und habe bisher noch nie viel über Material Design verwendet oder gelesen. Dies ist genau das, was ich beim Lesen der verschiedenen Dokumente und beim Durchsuchen von Google finden konnte.

Ich bin davon ausgegangen, dass Sie an Android arbeiten, da die Seite, auf die Sie verlinkt sind, über die Höhe in Android spricht. Wenn Sie für das Web arbeiten, verwenden Sie einfach die Werte in dem Bild, das ich gepostet habe.
Ich arbeite für Webdesign. Wo muss ich suchen?
In diesem Fall bringt das Googeln von „Material Design Shadows Photoshop“ viele Lösungen hervor. Das Top-Ergebnis hat sogar eine PSD: blog.omgmog.net/post/…
Materialdesign / Höhe in Photoshop
AntwortenHierDatenschutz-Bestimmungen1y, 0v