Photoshop für Designer: Vektorformen

CSS-Eigenschaften der Liveforms kopieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Weshalb sich die Arbeit mit Liveforms gerade für Webdesigner auszahlt, verrät dieses Beispiel, in dem der Trainer die Eigenschaften der Liveforms als CSS kopiert, bei Bedarf einfach mit dem Texteditor überarbeiten und unmittelbar für seine Webseiten nutzen kann.
04:05

Transkript

Hier in Photoshop werden ja nicht einfach nur Bilder bearbeitet oder irgendwelche Grafiken erstellt, sondern auch Screendesigns für Webseiten. Und da kann man mit Liveformen hervorragend arbeiten. Warum, das zeige ich gleich hier. Ich erstelle mir da einfach wieder ein Rechteck und dieses Rechteck hat ein paar Eigenschaften: Ich habe hier die Breite, die Höhe, die Position, ich kann hier die Farbe einstellen, kann natürlich auch die Ecken abrunden und dann habe ich da jetzt, wenn man so möchte, einen Button. Nennen wir den einfach mal Button, "Button links" zum Beispiel oder "Button senden", machen wir es so, das soll hier ein Senden-Button sein. Zugegebenermaßen ein sehr einfacher Button. Vielleicht kann ich dem Ganzen einen Schlagschatten verpassen. Machen wir das einmal so, genau. Ein wenig Deckkraft, den Abstand vielleicht ein wenig größer. Und dann lass ich das da ein bisschen rübergehen, so zum Beispiel. Und in der Größe kann das vielleicht-- na ja, lassen wir es klein, so ein paar Pixel sein. Zack! Dann hab ich hier jetzt diesen Senden-Button, den lass ich einfach mal so stehen. Da gehört natürlich noch ein Text rein, aber zu dem erst nachher. Und da möchte ich daneben vielleicht ein Abbrechen-Button haben, also kopiere ich mir das da rüber und sage hier: "abbrechen". Und dieser Abbrechen-Button, der soll vielleicht eine andere Farbe haben, und zwar vielleicht einfach eine dunklere Farbe. So, ich zieh das dann nach unten, bestätige das und dann habe ich hier jetzt, vereinfacht gesprochen, zwei Buttons irgendwo herumliegen. Übrigens, wenn ich die genau in der Mitte liegen haben will, ich mache da mal einen Doppelklick auf den Pfad, damit ich mehr Platz habe, kann ich beides nehmen, miteinander kopieren, mittels Cmd+A alles auswählen, auf das Verschieben-Werkzeug wechseln und hier im oberen Bereich kann ich sagen: "Die Gruppe soll an der horizontalen Mittelachse ausgerichtet sein." Jetzt kann ich die Gruppe wieder auflösen. Also ich habe jetzt hier diese zwei Buttons. Was ist jetzt das Spezielle daran? Und zwar kann ich da jetzt hergehen und im Menü "Ebene" den CSS kopieren, Cascading Style Sheets. Ich kopiere das einmal, habe das in der Zwischenablage und jetzt öffne ich mir einen Texteditor und füge das hier ein. Und was sieht man? Ja, da sind jetzt alle Eigenschaften drin. Und zwar habe ich hier jetzt den Radius mit den 8 Pixeln, ich habe hier jetzt die Hintergrundfarbe, also die Farbe meines Senden-Buttons. Übrigens, der Name wird hier übernommen: "Button senden". Dann habe ich sogar den Schatten wie ich ihn eingestellt habe, auch mit der Transparenz. Ich habe die Positionierung - das ist dann quasi nicht so relevant, normalerweise im Webdesign, aber man bekommt eben alles herein, was man so braucht. Schauen wir uns das Ganze einmal für den Abbrechen-Button an. Ich gehe da wieder rein in meine Eigenschaften, indem ich das Eigenschaften- Bedienfeld öffne und nehme hier bespielsweise einmal den Radius ganz groß, nämlich auf 62, ja, vielleicht nicht ganz so groß, machen wir es auf 50, dann haben wir eine gerade Zahl. 50, und die Farbe passt. Und ansonsten bin ich da auch schon zufrieden. Lassen wir es einfach mal so, wie es ist. "Ebene" "CSS kopieren", dann öffne ich meinen Texteditor, füge hier den Code ein, den ich gerade kopiert habe. Da sieht man "Button abbrechen", das ist jetzt mein Abbrechen-Button. Die ganzen Eigenschaften: Radius 50, die Farbe, wiederum den Schatten und alles, was man eben so braucht. Also man sieht, man kann aus Photoshop heraus mit diesen Liveformen wirklich sehr schnell und einfach die Eigenschaften kopieren und diese dann in seinem Web-Editor für das Webdesign entsprechend verwenden.

Photoshop für Designer: Vektorformen

Lernen Sie, was Vektorformen sind, wie Sie sie erstellen und bearbeiten und wie Sie die gelernten Techniken in der Praxis umsetzen.

2 Std. 10 min (21 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:10.11.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!