Tutorial: Wie man eine Chat-IPhone UI entwirft
In diesem Tutorial werden wir eine iPhone-Benutzeroberfläche für ein Forum und eine chatbasierte mobile Anwendung entwickeln.
Die App beinhaltet eine Handvoll alltäglicher Touch-Interface-Elemente wie Buttons, Eingabefelder und Touch-Gesten.
Wir werden verschiedene Photoshop-Werkzeuge, Layerstile und natürlich alle Design-Einschränkungen behandeln. Außerdem wird das Design Pixel-perfekt und schön genug, um einen Platz auf einem iPhone-Bildschirm zu verdienen.
Das Design wurde mit Photoshop CS5.5 zusammengestellt, aber alle neueren Versionen von Photoshop werden wunderbar funktionieren.
App-Bildschirmanforderungen
Wir werden in diesem Tutorial nur einen Bildschirm erstellen. Der Bildschirm wird der Hauptbildschirm für eine Chat-basierte Anwendung sein, ähnlich wie ein öffentlicher Chatraum, aber auf Ihrem Telefon. Die Anforderungen dieses Bildschirms sind:
- Eine Kopfzeile - das ist der Chatroom, in dem Sie sich gerade befinden.
- Eine Zurück / Schließen / Themen-Taste - um zum vorherigen Bildschirm zurückzukehren.
- Ein People-Button - zeigt an, wer gerade im Chatroom ist.
- Eine Liste von Nachrichten - Nachrichten müssen Avatar und Zeitstempel haben.
- Eine Möglichkeit, Benutzerprofile anzuzeigen und Nachrichten zu melden.
- Ein Textfeld zum Schreiben Ihrer Nachrichten.
- Eine Schaltfläche zum Senden, um Ihre Nachrichten zu posten.
Planung, Skizzieren und Drahtbild
Wie bei jedem Benutzeroberflächenprojekt ist das Planen, Skizzieren und Drahtframing Ihrer Benutzeroberfläche unerlässlich. Es schließt ziemlich oft irgendwelche albernen Ideen aus (obwohl sie Ihnen vielleicht nicht albern vorkommen!), Bevor Sie digitale Konzepte und Modelle zusammenfügen. Was wie eine brillante Lösung für die Behebung eines Problems in Ihrem Kopf erscheinen könnte, könnte in der Praxis letztlich gar nicht funktionieren. Deshalb ist das Drahtbild vor dem Start eines Projekts ein so wichtiger Schritt.
Greifen Sie einen Stift und Ihr Lieblings-Pad und beginnen Sie zu skizzieren.
Wie Sie aus dem obigen Bild sehen können, habe ich nur ein paar Minuten damit verbracht, drei verschiedene Konzepte zusammenzustellen; Normalerweise dauert dieser Vorgang Tage oder Wochen, aber da wir nur einen Bildschirm entwerfen und der Zweck der App einfach ist, sollte das Skizzieren nicht lange dauern! Sie sind meist sehr ähnlich, aber jeder hat seine einzigartigen Unterschiede, die ich unten zusammenfassen werde.
Skizze A
Inspiriert von der ursprünglichen Twitter-Benutzeroberfläche für das iPhone ermöglicht diese Benutzeroberfläche Benutzern das Wischen über eine Nachricht, um weitere Optionen wie "Profil anzeigen" und "Benutzer melden" anzuzeigen - eine unterhaltsame und platzsparende Möglichkeit, mehr Inhalte auf diesem Bildschirm zuzulassen. Ich spielte mit der Idee, einen Einstellungs-Knopf in der Navigationsleiste in diesem Bildschirm zu haben, entschied mich aber dafür, meiner normalen Regel "Weniger ist mehr" zu folgen - es ist unwahrscheinlich, dass der Benutzer bei jedem Gebrauch der App auf Einstellungen zugreift, so dass er nicht gebraucht wird Hier.
Skizze B
Dieses Konzept ist etwas kompakter, mit den Schaltflächen "Profil anzeigen" und "Benutzer melden" als statische Symbole rechts neben den Nachrichten. Ich spielte mit der Idee, hier keinen "Senden" -Button zu haben, und stattdessen den Sende-Button auf der iOS-Tastatur zu verwenden. Ich habe mich dagegen entschieden, da die meisten Apps (einschließlich iOS-Standard-Apps wie Nachrichten) neben dem Texteingabefeld auch die Taste zum Senden der Tastatur sowie die zusätzliche Senden-Schaltfläche haben. Ich möchte meine Schnittstellen mit anderen im App Store konsistent halten.
Skizze C
Skizze C ist die Skizze, mit der ich mich entschieden habe - statt einer Zurück-Taste haben wir eine Schließen-Taste. Ich denke, dies macht es offensichtlicher, dass Sie, sobald Sie auf "Schließen" klicken, nicht länger Teil dieser Konversation sein werden (im Gegensatz zu Messaging-Apps, bei denen Sie zurückgehen und alle vorherigen Nachrichten weiterhin sehen können). Die People-Schaltfläche zeigt eine Liste der Benutzer an, die sich derzeit im Chatraum befinden, und ich habe die Idee neu aufgenommen, dass die Folie mehr Feature-Elemente anzeigen soll (wie die Twitter-App), damit der Benutzer das Profil des Benutzers sehen oder melden kann.
Nachdem dies erledigt ist, ist es an der Zeit, etwas in Photoshop zusammenzufügen!
Schritt 1: Status und Navigationsleiste
Bevor wir mit diesem Schritt fortfahren, müssen wir unser Dokument erstellen. Die Standardgröße des iPhone-Bildschirms (bei Retina-Auflösung) ist 640 Pixel breit und 960 Pixel hoch, mit einer Auflösung von 326 ppi. Ich fange immer mit einem weißen Hintergrund in meinen Entwürfen an.
Der erste Schritt besteht darin, die Standard-iOS-Statusleiste einzufügen. Die Statusleiste ist die Leiste oben auf Ihrem iPhone, die wichtige Informationen wie Signal, Träger, Uhrzeit und Akkulaufzeit anzeigt. Hier gibt es drei Optionen: einen schwarzen Balken, einen schwarzen Balken mit niedriger Transparenz oder den silbernen Balken.
Wenn Sie Ihr App-Design so aussehen lassen möchten, wie es wirklich ist, können Sie die Statusleiste aus dem Retina iPhone GUI PSD-Kit entnehmen hier gefunden . Laden Sie einfach die PSD herunter und öffnen Sie sie, und ziehen Sie die gewünschte Leiste in Ihr PSD-Dokument. Positioniere es oben auf deiner Leinwand.
Die Navigationsleiste ist die nächste auf unserer To-Do-Liste. Die Standardnavigationsleiste ist 86 Pixel hoch und überspannt die gesamte Breite Ihres iPhone (640 Pixel). Auch hier können Sie dieses Element aus dem oben erwähnten PSD-Kit ziehen, oder Sie können dies manuell erstellen (meine bevorzugte Option, da es keine angehängten Stile gibt). Wählen Sie das Rectangle Shape Tool und platzieren Sie ein 640 x 86px Rechteck auf Ihrer Leinwand.
Schritt 2: Schaltflächen der Navigationsleiste
Zurück zu unseren Wireframes, haben wir zwei Knöpfe auf unserer Navigationsleiste. Wählen Sie das Abgerundete Rechteck-Form-Werkzeug aus (denken Sie daran, Shape-Werkzeuge für Shapes immer im UI-Design zu verwenden, es erleichtert das Skalieren unseres Dokuments für niedrigere Auflösungen!). Ich habe Dimensionen 100 x 50px mit einem Eckenradius von 6px verwendet.
Platzieren Sie diese Form sowohl auf der linken als auch auf der rechten Seite der Navigationsleiste und positionieren Sie sie gut.
Schritt 3: Stilauswahl
Es ist Zeit, unseren Design-Stil zu wählen. Diese App ermöglicht es Menschen zu chatten und neue Leute kennenzulernen und es den Leuten zu ermöglichen, dabei Spaß zu haben. Aus diesem Grund fühle ich ein lustiges, skurriles Farbschema und Typografie hier ist wichtig, um diesen Punkt zu vermitteln.
Wählen Sie das Schriftwerkzeug und wählen Sie eine Schrift, die Ihrem Bild im Kopf entspricht. Ich entschied mich für den Sekt Arial gerundet MT fett . Geben Sie den Namen Ihres Themas ein (ich wählte "UI-Design") und richten Sie ihn zentral auf Ihrer Navigationsleiste aus.
In Fortsetzung des lustigen Themas, das wir für die App ausgewählt haben, ist es an der Zeit, einige Farben auszuwählen. Ich persönlich benutze Farbliebhaber um meine Farbauswahl zu inspirieren, wenn ich entwerfe. In diesem speziellen Fall suchte ich nach "Spaß" und innerhalb von Sekunden wurde ich mit vielen verschiedenen Optionen und inspirierenden Paletten vorgestellt, die ich als Grundlage für mein Design verwenden konnte.
Ich landete einen, der angerufen wurde Spielzimmer . Es ist wichtig, darüber nachzudenken, welche Farben Sie benötigen, wenn Sie eine Palette auswählen. Ich finde etwas Leichtes, etwas dunkles, und etwas Helles ist immer ein guter Ausgangspunkt. Es ist wichtig, einen guten Kontrast in Ihrem Design zu haben.
Schritt 4: Navigationsleistenstyling
Wir werden jetzt in unsere Navigationsleiste zurückkehren und ihr die Farbe geben, die sie verdient. Wählen Sie die Ebene der Navigationsleiste (ich hoffe, Sie haben Ihre Ebenen organisiert!), Klicken Sie mit der rechten Maustaste und wählen Sie Fülloptionen. Dies ist die Heimat der leistungsfähigsten Photoshop-Tools, wenn es darum geht, Pixel-perfekte Interface-Designs zu erstellen. Von hier aus können Sie Schatten, Farbverläufe, Muster und Stokes hinzufügen und diese Stile auf andere Ebenen kopieren und einfügen.
Zuallererst werden wir unserer Leiste einen Farbverlauf hinzufügen, klicken Sie also auf Farbverlaufsüberlagerung. Ich habe die türkise Farbe als diejenige ausgewählt, die ich für meine Navigationsleiste verwenden möchte. Es ist hell und packt kraftvoll und macht unser Design leicht zu merken. Wenden Sie einen 90-Grad-Winkel an, der von hell (oben) bis dunkel (unten) reicht.
Klicken Sie nun auf das Stroke-Panel. Ändern Sie die Größe Ihres Strichs auf 2 statt auf den Standardwert 3. Ein Tipp ist immer, ungerade Zahlen im UI-Design zu vermeiden, insbesondere auf mobilen Geräten. Dies wird nur für mehr Arbeit für den Designer und den Entwickler sorgen, wenn es darum geht, die Arbeit zu skalieren (Sie können nicht die Hälfte 3 Pixel verwenden, da ein halber Pixel nicht existiert!).
Ändern Sie den Fülltyp Ihres Pinselstrichs in einen Farbverlauf und stellen Sie sicher, dass der Pinselstrich außerhalb der Form erscheint. Wählen Sie eine dunkle Türkisfarbe für die Unterseite Ihres Striches und schwarz für die Spitze. Da sich der Strich außerhalb unserer Navigationsleiste befindet, wird der schwarze Teil des Strichs nicht über der Statusleiste angezeigt, sodass der Benutzer den Strich unten sehen kann.
Wählen Sie das Feld "Inneres Schatten" aus und wenden Sie einen 15% igen weißen Deckschatten auf Ihre Leiste an. Dies wird oben in der Leiste angezeigt und verleiht ihm ein schönes Highlight, wodurch es mehr 3D erscheint. Ich habe meinem Schatten einen Abstand von 2px und eine Größe von 3px gegeben.
Jetzt ist es an der Zeit, unsere Navigationsleiste richtig aufzumischen. Durch die Verwendung von Mustern können wir unserem Design viel Tiefe verleihen. Ich verwende ein weißes Gittermuster in meiner Navigationsleiste. Wenn Sie dieses Muster verwenden möchten, können Sie eine Sammlung von ihnen kostenlos herunterladen Premium-Pixel .
Schritt 5: Typografische Abschattung
Um unserer Typografie eine gewisse Tiefe zu verleihen, öffnen Sie das Fenster mit den Fülloptionen und wenden Sie einen Schlagschatten an. Ändere den Winkel auf -90 (stelle sicher, dass "Globalen Stil verwenden" hier nicht aktiviert ist, sonst werden alle Schatten in deinem Design auf -90 geändert) und verwende die gleiche Farbe, die du für den unteren Teil des Navigationsbalkenstrichs benutzt hast. Geben Sie dem Schatten eine Entfernung von 2 Pixeln und die Größe auf 0 Pixel. Dies gibt einen sauberen Schnitt Schlagschatten über Ihrem Text sofort macht es interessanter.
Schritt 6: Stil der Navigationsleistenschaltfläche
Wir werden jetzt einige tolle Stile auf unsere Navigationsleisten-Buttons anwenden. Wir möchten, dass diese Tasten gut mit unserer Navigationsleiste übereinstimmen, aber gleichzeitig müssen sie gut genug hervortreten, damit der Benutzer sofort erkennen kann, dass es sich um Tasten handelt. Um dies zu erreichen, verwenden wir mehr Layer-Stile, um ihnen einen 3D-Effekt zu verleihen.
Öffnen Sie das Blending-Optionen-Panel und klicken Sie auf Gradienten-Overlay. Verleihen Sie Ihrem Button mit den Farben aus Ihrer Navigationsleiste einen leichten (oben) bis dunklen (unteren) Farbverlauf. Die Lichtfarbe wurde aus der Hervorhebung meiner Navigationsleiste ausgewählt, und die dunkle Farbe wurde aus dem unteren Strich meiner Navigationsleiste ausgewählt.
Wählen Sie das Strichfeld und ändern Sie die Größe Ihres Strichs auf 2 px mit einer äußeren Position. Ändern Sie den Fülltyp in den Farbverlauf und den Winkel auf 90 Grad. Ändern Sie die Farbverläufe von hell (oben) zu dunkel (unten), wobei die Farben auf den Farben basieren, die bereits für die Navigationsleiste und Schaltflächen verwendet wurden. Sofort können Sie sehen, dass dieser Strich Ihrem Button ein 3D-Aussehen verleiht, als würde er aus der Navigationsleiste kommen, statt darauf zu sitzen.
Um den Knopf ein wenig mehr zu betonen und ihn noch ansprechender zu machen, fügen wir dem Knopf einen inneren Glanz hinzu. Klicken Sie auf das innere Leuchtfeld und ändern Sie den Mischmodus auf den Bildschirm. Setzen Sie die Deckkraft auf 20% und stellen Sie sicher, dass das Rauschen auf 0% eingestellt ist. Ändern Sie das gelbe Standardglühen in Weiß und stellen Sie sicher, dass die Größe immer noch auf den Standardwert von 5 px eingestellt ist. Dies sollte Ihrem Knopf einen schönen inneren Glanz verleihen, wodurch der Knopf wirklich anfassbar wird!
Wir werden jetzt einen inneren Schatten hinzufügen, um unseren Button etwas realistischer zu machen. Ändere die Deckkraft auf 15% und wähle Schwarz als Farbe. Lassen Sie die Entfernung auf 2 Pixel und die Größe auf 4 Pixel fallen. Ändern Sie nun den Winkel auf -90 Grad (stellen Sie sicher, dass Use Global Light nicht ausgewählt ist). Dies gibt der Unterseite Ihres Knopfes einen leichten Schatten und versteckt etwas von dem unteren inneren Glühen, das wir gerade angewendet haben. Im wirklichen Leben würde dieser Bereich schattiert sein, so dass es wichtig war, den inneren Schein hier zu verbergen.
Zum Abschluss des Stylings unserer Schaltfläche fügen wir einen Schlagschatten hinzu. Wählen Sie das Schlagschatten-Panel und ändern Sie die Farbe in Weiß mit einer Deckkraft von 25%. Dieser Schatten wird als Highlight unter unserem Strich wirken, also ändern Sie den Abstand auf 4px (2px, um den Schlagbereich abzudecken, und 2px, der unterhalb des Schlags zu sehen ist).
Schritt 7: Schaltflächenbeschriftungen
Ein Button ohne Label ist sinnlos, also werden wir jetzt ein bisschen Zeit damit verbringen, unsere Buttons zu beenden. Klicken Sie zunächst mit der rechten Maustaste auf die Schaltfläche "Stil" und wählen Sie die Option "Ebenenstil kopieren". Klicken Sie nun mit der rechten Maustaste auf Ihre nicht formatierte Schaltfläche und wählen Sie die Option "Ebenenstil einfügen".
Wir werden zuerst mit der Arbeit an unserer rechten Taste fortfahren. Diese Schaltfläche wird als "Personen" gekennzeichnet und wir möchten ein Symbol von 2+ Personen verwenden. Für dieses Tutorial benutze ich Icons, die vom Kreativstudio Yummygum erstellt wurden. Sie können das Paket finden, das ich verwendet habe IconSweets.com - Ich werde während des Tutorials Symbole aus diesem Paket verwenden.
Verwenden Sie die gleiche Schriftart, die Sie für den Titel der Navigationsleiste verwendet haben, und geben Sie die Beschriftung Ihrer Schaltflächen ein. Verändern Sie die Größe und positionieren Sie sie auf Ihrer Schaltfläche, und platzieren Sie dann das gewünschte Symbol (oder erstellen Sie es selbst) in Ihr Dokument. Positionieren Sie diese beiden Ebenen gleichmäßig über Ihrer Schaltfläche. Ich habe meine Ebenen voneinander getrennt, so dass es 15px beide Seiten von ihnen und den Knopf und 10px zwischen dem Symbol und dem Text gibt. Fügen Sie den Ebenenstil aus dem Text des Navigationsleisten-Themas in das Symbol und die Schaltflächenbeschriftung ein. Wenn Sie die Größe der Schaltfläche ändern müssen, verwenden Sie das Direktauswahl-Werkzeug, um die 4 Ankerpunkte auf der rechten Seite auszuwählen, und ziehen Sie dann. Sie können die Shift-Taste gedrückt halten, um diese Änderung aufrecht zu erhalten.
Wiederholen Sie diesen Vorgang mit der Schaltfläche auf der linken Seite der Navigationsleiste, diesmal mit einem Kreuz-Symbol und dem Wort "Schließen". Um meinen Buttons ein wenig mehr Styling zu verleihen, habe ich die Deckkraft der beiden Hintergrundformen auf 95% gesenkt, damit ein wenig des darunter liegenden Rastermusters durchscheinen kann.
Schritt 8: Textfeldleiste
Jetzt ist es an der Zeit, dem Rest unseres Bildschirms Aufmerksamkeit zu schenken. Nimm das Rectangle Shape Tool und lege mit den gleichen Abmessungen unserer Navigationsleiste (640 x 86 Pixel) eine Form auf deine Leinwand. Positioniere es am unteren Bildschirmrand.
Schritt 9: Der Hintergrund
Wir werden jetzt auf dem Hintergrund unseres Designs arbeiten. Öffnen Sie das Mischoptionen-Bedienfeld für Ihre Hintergrundebene und wählen Sie ein Muster aus, um es zu füllen. Ich habe ein dunkles Muster mit senkrechten Linien verwendet Subtile Muster - Sie können hier das komplette Muster herunterladen, das ich sehr empfehlen kann.
Wenn Sie dem von Ihnen ausgewählten Muster einige eigene Farben hinzufügen möchten, können Sie dazu den Farbüberlagerungsstil verwenden. Ich habe ein braunes (von meiner Farbpalette, die ich früher gewählt habe) mit 35% aufgetragen. Diese Deckkraft ist so niedrig, dass Ihre Textur / Muster durchscheinen und dennoch hoch genug sind, um die Farbe oder den Hintergrund zu tönen.
Jetzt haben wir einen dunklen Hintergrund, Sie werden sehen, dass der Punkt, wo unsere Navigationsleiste auf unser Hintergrundbild trifft, nicht ganz so gut aussieht. Sie können dies leicht beheben, indem Sie einen Schattenstil auf Ihre Navigationsleiste anwenden, der sie so erscheinen lässt, als ob sie über Ihrem Hintergrund liegt.
Öffnen Sie das Blending-Optionen-Panel für Ihre Navigationsleiste erneut und wählen Sie das Schlagschatten-Panel. Vergewissern Sie sich, dass Schwarz ausgewählt ist, und ändern Sie die Deckkraft auf 25%. Erhöhen Sie den Abstand zu 6px und die Größe zu 10px, und klicken Sie auf OK. Möglicherweise müssen Sie mit diesen Optionen experimentieren, da die Ergebnisse abhängig von der Farbe und dem Typ der Textur / des Musters variieren, die Sie für Ihren Hintergrund ausgewählt haben.
Schritt 10: Nachrichten
Jetzt, wo der Hintergrund und die obere Navigationsleiste vollständig sind, konzentrieren wir uns darauf, den Hauptinhalt der App zu finden. Wählen Sie das Rectangle Shape Tool und platzieren Sie ein Rechteck auf Ihrer Leinwand. Die Breite, die ich verwendete, war 600px, so dass 20px auf jeder Seite der Form angezeigt werden können. Ich habe eine viel leichtere Version der Farbe Gelb / Creme aus der Farbpalette verwendet, die ich zuvor ausgewählt habe.
Wählen Sie das Abgerundete Rechteckformwerkzeug und ändern Sie die Abmessungen auf 80 x 80 Pixel und den Radius auf 6 Pixel. Legen Sie die Form (die als Avatar-Form verwendet werden soll) auf Ihre Leinwand und positionieren Sie sie korrekt. Um mein Design konsistent zu halten, habe ich 20px erlaubt, zwischen den Rändern meiner Nachrichtenhintergrundform und meiner Avatarform zu sitzen.
Schreiben Sie mit dem Textwerkzeug Ihren Namen und eine Nachricht. Ich benutzte Arial Rounded MT Bold für meinen Namen und normales Arial für meine Nachrichtentext formatieren Sie Ihren Text so, dass er gut in Ihre Nachrichtenhintergrundbox passt.
Wir werden nun unserer Botschaft einen Stil hinzufügen, indem wir nur Farbe verwenden; Ich änderte die Farbe meines Namens in ein dunkles Türkis (sehr nah an Schwarz) und ein ausgewaschenes Türkis, das von meiner Navigationsleiste inspiriert wurde.
Ich habe dann ein Bild von mir selbst eingefügt, indem ich zu File> Place gehe. Nach dem Einfügen änderte ich die Größe des Bildes und platzierte es über meiner schwarzen Avatar-Box, die wir zuvor erstellt hatten. Um das Ausschneiden des Bildes zu sparen und Ihnen die Möglichkeit zu geben, Ihren Avatar zu einem späteren Zeitpunkt zu verschieben oder seine Größe zu ändern, klicken Sie mit der rechten Maustaste darauf und wählen Sie die Option "Schnittmaske erstellen". Dadurch wird Ihr Avatar-Bild mit Ihrer Avatar-Blackbox verknüpft und nur angezeigt, was sich über der Blackbox befindet. Mit dem Verschieben-Werkzeug können Sie das Bild verschieben und seine Größe ändern.
Mit einem anderen IconSweets-Symbol habe ich einen netten kleinen Zeitstempel erstellt. Ich musste meine Symbolgröße reduzieren, indem Sie zu Bearbeiten> Transformieren> Freie Transformation gehen und die Abmessungen ändern (entweder nach Pixeln oder Prozent). Ich verwendete 70% sowohl in der Breite als auch in der Höhe, um Proportionen zu behalten. Ich habe etwas Text hinzugefügt, und voila. Achten Sie darauf, eine Farbe auszuwählen, die leicht zu lesen ist, aber nicht nach Aufmerksamkeit ruft.
Schritt 11: Doppelte Nachrichten
Duplizieren Sie Ihre Nachrichtenboxen untereinander und lassen Sie zwischen den einzelnen Hintergrundboxen eine Lücke von 2 px. Sie können dies tun, indem Sie entweder Ihre Ebenen über das Symbol Neue Ebene klicken und ziehen, oder Sie können gleichzeitig Cmd + Umschalt + Pfeil nach unten drücken, um die Ebenen zu duplizieren und zu verschieben.
Ändern Sie den gesamten Inhalt in Ihren Nachrichtenfeldern, als wäre es eine echte Konversation. Wenn Sie die Größe Ihrer Hintergrundrahmen ändern müssen, verwenden Sie das Direktauswahl-Werkzeug und ändern Sie die Größe mithilfe der Ankerpunkte. Dies hält alle Kanten schön und scharf.
Schritt 12: Nachrichtenstyling
Damit können wir uns nun darauf konzentrieren, unsere Message Boxes zum Leben zu erwecken. Öffnen Sie das Mischoptionen-Bedienfeld und wählen Sie das Schlagschatten-Bedienfeld. Ändern Sie den Mischmodus auf Normal und wählen Sie Weiß als Farbe. Erhöhen Sie die Deckkraft auf 80% anstelle der Standard 75% und geben Sie dem Schatten eine Distanz von 2 Pixeln. Dies wird die 2px Lücke, die wir zwischen jedem der Nachrichtenbox-Hintergründe gelassen haben, verbergen.
Kopieren Sie den obigen Ebenenstil und fügen Sie ihn in alle Nachrichtenfeld-Hintergrundebenen ein. Sie sollten mit etwas wie oben enden.
Schritt 13: Hinzufügen von abgerundeten Ecken
Um unser Design interessanter zu gestalten und um mehr Tiefe zu schaffen, fügen wir am Ende unserer Nachrichten abgerundete Ecken hinzu und lassen es so erscheinen, als wäre es Papier auf mehr Papier.
Wählen Sie das Abgerundete Rechteck-Werkzeug und geben Sie ihm einen Radius von 10px. Ändern Sie die Breite auf 600px (oder die Breite, die Sie für Ihre Message-Box-Hintergründe verwendeten) und eine Höhe, die die Höhe Ihres unteren Nachrichtenfeldhintergrunds nicht überschreitet. Ich habe hier eine helle Farbe verwendet, damit sie gut sichtbar ist.
Wählen Sie mit dem Direktauswahl-Werkzeug den Inhalt Ihrer Vektorform-Ebene (die gerundete Box, die wir gerade gezeichnet haben) aus und gehen Sie zu Bearbeiten> Kopieren. Klicken Sie auf die Vektorform-Ebene des unteren Nachrichtenfeldhintergrunds und gehen Sie zu Bearbeiten> Einfügen. Dadurch wird der Inhalt der Formebene auf die andere Formebene eingefügt. Sie können jetzt die Form löschen, die wir im vorherigen Schritt gezeichnet haben. Sie sollten immer noch die Form sichtbar sehen.
Öffnen Sie die Überblendungsoptionen des unteren Nachrichtenfeldhintergrunds und wenden Sie einen Schlagschatten an. Ändern Sie die Farbe in Schwarz, die Deckkraft auf 25%, den Abstand zu 1px und die Größe zu 3px. Dies wird einen schönen, subtilen Schlagschatten erzeugen.
Dupliziere diese Ebene und schiebe sie um 5 Pixel nach unten. Positionieren Sie die Ebene neu, sodass sie unter dem Original liegt. Sie sollten mit etwas ähnlich wie unten enden. Wie Sie sehen können, ist dies eine einfache Möglichkeit, ein überlappendes Papier-Layout zu erstellen.
Wiederholen Sie den Schritt erneut, so dass Sie drei statt nur zwei Papierstücke haben. Vielleicht möchten Sie Ihrem unteren Blatt Papier einen etwas auffälligen Schlagschatten geben.
Schritt 14: Navigationsleiste Schatten
Sie haben wahrscheinlich bemerkt, dass wir beim Entwerfen unserer Nachrichtenboxen den größten Teil des Schlagschattens verdeckt haben, den unsere Navigationsleiste auf unseren Hintergrund geworfen hat. Um dies zu ersetzen, können Sie Ihre Nachrichten entweder unter der Navigationsleiste positionieren (die einfache Option ist aber unrealistisch) oder den folgenden Schritt ausführen.
Wählen Sie das rechteckige Auswahlrechteck aus und zeichnen Sie oben ähnlich wie oben eine dünne Linie. Fülle es mit Schwarz auf einer neuen Ebene.
Gehe zu Filter> Weichzeichnen> Gaußscher Weichzeichner und wende die Weichzeichnung an. Dies wird nun als Schatten wirken - schneiden Sie einfach alle Teile der Unschärfe aus, die die Ränder des Hintergrunds Ihrer Nachrichtenbox überlappen.
Schritt 15: Schaltflächen "Profil" und "Bericht"
In Bezug auf unsere Wireframes hatten wir entschieden, Benutzern zu erlauben, eine Nachricht nach links zu wischen, um weitere Schaltflächen anzuzeigen. In diesem Fall ermöglichen diese Schaltflächen dem Benutzer, das Nachrichten-Poster-Profil anzuzeigen oder das Nachrichten-Poster zu melden.
Wähle die Ebenen aus, aus denen eine deiner Nachrichten besteht (Ich wähle die Homer Simpsons-Nachricht) und schiebe deine Nachricht mit der Umschalttaste und den Pfeiltasten jeweils um 10 Pixel nach links. Schreiben Sie Ihre Beschriftungen mit dem Textwerkzeug und wählen Sie dann einige Symbole aus, die diesen Beschriftungen entsprechen. Ich wählte eine individuelle Person für das Profil und ein Ziel für den Bericht (als ob Sie sie abschießen - ich dachte, das war ziemlich lustig!).
Um diesem Bereich mehr Tiefe zu verleihen, fügte ich sowohl den Symbolen als auch dem Text einen schwarzen Schlagschatten hinzu.
Schritt 16: Textfeldleiste
Die Textfeldleiste ist eines der wichtigsten Elemente auf diesem Bildschirm. Benutzer müssen in der Lage sein, ihre Nachrichten mit Leichtigkeit und ohne Verwirrung einzugeben (deshalb habe ich den versteckten Sende-Button in den ersten skizzierten Konzepten entfernt).
Suchen Sie zunächst nach Ihrer Hintergrundebene und kopieren Sie die Ebenenstile. Fügen Sie diese Ebenenstile in die zuvor erstellte Leiste für die Textfeldleiste ein. Öffnen Sie die Überblendungsoptionen für diese Ebene und wählen Sie die Schlagfläche aus. Wende einen 2px Strich auf die Außenseite deiner Form an, indem du Schwarz als Farbe verwendest. Da der Strich außen ist und die Form drei Kanten Ihrer Leinwand berührt, wird nur der Strich über der Form angezeigt.
Wählen Sie nun den inneren Schatten Tab und ändern Sie den Mischmodus auf normal, die Farbe auf weiß, die Deckkraft auf 10% und den Abstand zu 2px. Stellen Sie sicher, dass der Winkel auf den globalen Lichtstandard (90 Grad) eingestellt ist, und klicken Sie auf OK. Dies gibt uns ein schönes Highlight unter unserem schwarzen Strich. Mit diesen zwei einfachen 2px Linien sieht unsere Textfeldleiste bereits gut vom Rest des Hintergrunds getrennt aus, obwohl sie denselben Hintergrund hat!
Wählen Sie das Abgerundete Rechteck-Werkzeug aus. Gib deinem Werkzeug einen hohen Radius, ich habe 50px benutzt; das wird ihm sehr runde (runde) Enden geben. Legen Sie eine Form auf Ihre Bar, ich habe 460x54px als meine Dimensionen verwendet. Stellen Sie sicher, dass die linke Seite der Textfeldform 20 Pixel von der linken Seite der Zeichenfläche entfernt ist, um den Designabstand konsistent zu halten.
Füllen Sie die Form mit einer dunklen Farbe (ich verwendete ein braunes Bild, das aus einem dunklen Pixel im Hintergrund ausgewählt wurde) und öffnen Sie dann das Ebenenvorlagen-Bedienfeld. Wenden Sie einen 2px weißen Schlagschatten auf Ihr Textfeld mit einer Opazität von 10% an.
Klicken Sie auf das innere Schattenfeld und wenden Sie einen inneren Schatten auf Ihre Textfeldform an. Dies wird viel mehr Tiefe geben und es so aussehen lassen, als wäre es in den Balkenhintergrund geschnitten. Verwenden Sie Schwarz mit einem Mischmodus und einer Opazität von 25%. Ich habe 5px als meine Entfernung und 10px als meine Größe verwendet, obwohl Sie hier vielleicht experimentieren möchten.
Mit dem Textwerkzeug und ausgestattet mit Arial Rounded MT Bold tippen Sie "Schreibe einen Kommentar ..." und positionieren Sie es in Ihrem Textfeld Feld. Öffnen Sie die Fülloptionen für Ihre neue Textebene und wenden Sie einen schwarzen Schlagschatten mit einer Deckkraft von 75%, einer Entfernung von 2 Pixel und einer Größe von 3 Pixel an.
Schritt 17: Textfeld Schaltfläche
Wählen Sie das Werkzeug "Abgerundete Rechteckform" erneut aus, und verwenden Sie die gleichen Radiuseinstellungen und Höhen, die wir zuvor verwendet haben, und platzieren Sie eine Form auf den Hintergrund der Textfeldleiste. Ändern Sie die Länge der Schaltfläche so, dass sie 10 Pixel von Ihrem Textfeld und 20 Pixel vom rechten Rand der Zeichenfläche entfernt liegt.
Klicken Sie mit der rechten Maustaste auf Ihren neuen Button-Shape-Layer und wählen Sie Blending-Optionen. Wählen Sie das Farbverlaufsüberlagerungspanel und wenden Sie einen Farbverlauf von hell (oben) bis dunkel (unten) an. Ich benutzte die prächtige gelbe Farbe, die in der Farbpalette war, die ich zuvor ausgewählt hatte.
Um unser Design konsistent zu halten, werde ich einen Strich auf unseren Button anwenden, der es so aussehen lässt, als käme er aus dem Hintergrund, ähnlich wie wir es mit den Schaltflächen in der Navigationsleiste getan haben. Dieses Mal habe ich statt eines Farbverlaufs ein durchgehendes Schwarz verwendet, da der Hintergrund viel dunkler ist und nicht mit einem Farbverlauf ausgefüllt ist. Ich benutzte einen 2px Strich auf der Innenseite meiner Form mit 100% Opazität.
Wählen Sie das Textwerkzeug und tippen Sie "Senden" auf Ihre Schaltfläche. Öffnen Sie die Fülloptionen für Ihre neue Textebene und wenden Sie einen braunen Schlagschatten auf Ihren Text mit einem Abstand von 1 Pixel und einer Größe von 3 Pixel an.
Und damit sind wir fertig! Wir würden gerne Ihre Ergebnisse sehen, also zögern Sie nicht, sie in den Kommentaren unten zu posten. Wenn Sie das Design in voller Auflösung sehen wollen, können Sie das sehen Hier .