Share
Dies ist der zweite Teil einer zweiteiligen Tutorialserie zum Wiederverketten einer iPhone-Anwendung mit Photoshop. Müssen Sie aufholen? Lesen Sie den ersten Teil von PSDTuts +! In diesem Lernprogramm werden wir den Rest des UI-Designs der Anwendung behandeln. Dabei werden die kleinen und heiklen Details wie Typografie, Schaltflächendesign und Texteingabefelder, die das gesamte Design zum Platzen bringen, genau betrachtet.
Das vorherige Tutorial wurde mit der Fertigstellung unserer Anwendungs-Startseite sowie dem Haupthintergrund für unsere Bildschirme und der Kopf- / Navigationsleiste für jeden Bildschirm abgeschlossen.
Nachdem Sie Ihr Dokument in Photoshop geöffnet haben, können Sie direkt an den Symbolen arbeiten. In dem vorherigen Tutorial haben wir bereits den Hintergrund, den Symbolleistenbereich und den Texthintergrund (wo wir Text, Schaltflächen und alles andere platzieren werden) eingerichtet. Wir möchten vier verschiedene Icons, die alle in der Originalanwendung dasselbe darstellen. Die vier Symbole sind:
Um unsere Symbole zu erstellen, verwenden wir einige Linealhilfslinien, um sicherzustellen, dass sie alle die gleiche Größe haben. Gehe zu Ansicht> Lineale wenn sie noch nicht auf Ihrem Bildschirm sind. Ziehen Sie ein paar Hilfslinien aus den Linealen heraus und legen Sie sie neben unseren weißen Hintergrund.
Wähle aus Rechteckiges Laufschriftwerkzeug und erstellen Sie eine feste Größenauswahl von 100x75px. Klicken Sie irgendwo auf Ihre Leinwand und platzieren Sie die Auswahl neben Ihrer linken Hilfslinie in der Symbolleiste.
Ziehen Sie eine weitere Hilfslinie aus dem Lineal heraus und lassen Sie sie direkt am Ende Ihrer Auswahl enden (sie sollte automatisch einrasten)..
Wiederholen Sie den Schritt, indem Sie eine Hilfslinie an den oberen und unteren Rand der Auswahl ziehen.
Wiederholen Sie diesen Schritt, bis vier verschiedene Rechtecke aus Führungen bestehen.
Diese Formen werden zum Platzieren unserer Symbole verwendet. Der Grund, warum sie breiter als groß sind, besteht darin, dass wir auch den Titel der Symbole darunter platzieren. Wir werden jedes einzelne Symbol und Textelement in unserem Raster zentrieren.
Fügen Sie mithilfe der gleichen Technik, die wir gerade verwendet haben, weitere Anleitungen hinzu, damit wir wissen, wo wir unsere Symbole und Texte platzieren sollen (siehe unten):
Obwohl es verwirrend aussieht, werden die Dinge viel einfacher aussehen, sobald wir mit dem Entwurf von Symbolen und dem Einfügen unseres Textes beginnen.
Jetzt haben wir unsere Guides erstellt, und wir können mit dem Design unserer Icons und Texte beginnen. Ich fange mit dem Text an. Packe die Textwerkzeug und wählen Sie eine saubere, leicht lesbare Schrift. Der Text wird sehr klein sein und muss daher sauber sein! Ich werde Helvetica für meine gesamte Schriftart verwenden. Füllen Sie die Lücken aus, die Sie für Ihren Text erstellt haben, und stellen Sie sicher, dass Sie die Textfelder in Ihrem Symbolleistenordner ablegen.
Ich empfehle Ihnen, den Text manuell mit den Cursortasten auszurichten, da die eingebauten (Text-) Ausrichtungsoptionen von Photoshops manchmal etwas deaktiviert sind und es wichtig ist, dass diese kurzen Titel gut zentriert sind. Nachdem Sie Ihren Text eingefügt haben, müssen wir einige Stile hinzufügen. Öffnen Sie das Fenster Ebenenstile (Fülloptionen) und vergewissern Sie sich, dass das Vorschau-Symbol aktiviert ist.
Der erste Stil, den wir anwenden werden, ist eine einfache Farbüberlagerung. Ich verwende die Farbe # 955425, eine mittlere braune Nuance, die ich aus dem Headertitel der Anwendung entnommen habe.
Der nächste hinzuzufügende Stil ist ein einfacher 1-Pixel-Strich mit der Farbe # E5C39B. Stellen Sie sicher, dass der Strich auf die Außenseite Ihres Textes und nicht auf die Innenseite angewendet wird.
Um den Text besser lesbar zu machen und in unseren Holzstil zu integrieren, verwenden wir einen inneren Schattenstil. Stellen Sie die Deckkraft Ihres Stils auf 65% und Ihre Entfernung und Größe auf 2px ein. Ich habe meinen inneren Schatten um 45 Grad geneigt.
Nachdem Sie die Stile angewendet, aber auf die Schaltfläche OK geklickt haben, müssen wir dieselben Stile auf unsere anderen Symboltitel anwenden. Wählen Sie dazu Ihre Textebene "Going Out" aus und gehen Sie zu Rechtsklick> Ebenenstil kopieren. Wählen Sie alle anderen Textebenen gleichzeitig aus, indem Sie die Umschalttaste gedrückt halten, und wechseln Sie dann zu Rechtsklick> Ebenenstil einfügen um den gleichen Stil auf Ihre anderen Titel anzuwenden.
Nachdem die Symboltitel nun alle fertig sind, müssen einige einfache Symbole erstellt werden. Um unsere Icons zu erstellen, verwenden wir die verschiedenen Laufschrift Werkzeuge. Das erste Symbol, das wir erstellen werden, ist das Symbol für Berichte, da dies das einfachste ist! Erstellen Sie eine neue Ebene und nennen Sie sie "Berichtssymbol".
Wir möchten, dass das Symbol gut in unserem quadratischen Leitfaden sitzt, den wir dafür erstellt haben. Wähle aus Rechteckiges Laufschriftwerkzeug und treffen Sie eine kleine Auswahl in Ihrem Feld, wie unten gezeigt:
Füllen Sie die Auswahl mit Schwarz, verschieben Sie die Auswahl dann um einige Pixel und wiederholen Sie den Vorgang. Machen Sie so weiter, bis Sie eine schöne Reihe schwarzer Formen haben.
Nehmen Sie eine neue Auswahl vor, diesmal horizontal statt vertikal.
Drücken Sie die Löschtaste, um die nicht benötigten Bereiche der gerade erstellten Zeilen zu entfernen. Dadurch wird ein Symbol erstellt, das leicht ein Listen- oder Berichtstypdokument darstellt. Fügen Sie den eben erstellten Ebenenstil in das Symbol ein.
Bevor Sie zu einem anderen Symbol wechseln, ziehen Sie eine neue Hilfslinie aus dem Lineal heraus und platzieren Sie sie direkt unter unserem neuen Symbol (siehe unten):
Für unser Einstellungssymbol erstellen wir ein einfaches Schlüsselsymbol. Erstellen Sie eine neue Ebene und nennen Sie sie "Einstellungssymbol". Wähle aus Polygonales Lasso-Werkzeug und halten Sie die Umschalttaste gedrückt, und erstellen Sie eine halbe Schlüsselform (siehe unten):
Füllen Sie die Form mit Schwarz und duplizieren Sie die Ebene.
Gehe zu Bearbeiten> Transformieren> Vertikal spiegeln um die duplizierte Schlüsselform umzudrehen. Gehe zu Bearbeiten> Free Transform Drehen Sie den zweiten Schlüssel halb, während Sie die Umschalttaste gedrückt halten.
Verwenden Sie die Cursortasten, um die Form des Schraubenschlüssels zusammenzudrücken und die beiden Ebenen des Schlüssels zusammenzuführen.
Bewegen, drehen und skalieren Sie den Schraubenschlüssel, bis er gut aussieht, und wenden Sie dann die kopierten Ebenenstile darauf an.
Erstellen Sie mit ähnlichen Techniken Ihre eigenen Symbole "Ausgaben" und "Ausgehen". Sie können Ihre Führer danach entfernen, indem Sie zu gehen Ansicht> Führungen löschen.
Wählen Sie jedes Ihrer vier Symbole einzeln aus und verringern Sie die Deckkraft auf etwa 80%. Dadurch kann ein Teil der Holzmaserung durchscheint und die Navigationsleiste insgesamt etwas mehr Tiefe erhalten.
Wählen Sie jedes Ihrer Symbole und Symboltitel aus und duplizieren Sie sie. Füge sie alle zusammen, indem du zu gehst Ebene> Nach unten zusammenführen. Öffnen Sie die Ebenenstiloptionen (Mischoptionen) für Ihre neue zusammengeführte Ebene, und entfernen Sie alle außer der Farbüberlagerung. Ändern Sie die Farbe der Überlagerung in Weiß und klicken Sie auf OK.
Platzieren Sie die neue weiße Ebenenebene unter allen anderen Symbol- und Symboltitelebenen, und verschieben Sie sie mit den Cursortasten um ein Pixel nach unten. Verringern Sie die Deckkraft der Ebene auf etwa 20%. Dies ist eine sehr subtile Änderung, die jedoch alle zur Qualität der Apps beiträgt.
Nachdem die Navigationssymbole fertiggestellt wurden, wird es Zeit, zum Hauptinhaltsbereich zu wechseln. Wie bereits im ersten Teil des Tutorials erwähnt, sind viele Bildschirme ziemlich ähnlich (nur verschiedene Titel). Daher konzentrieren wir uns nur auf einige Bildschirme:
Wir beginnen mit dem Spendometer-Bildschirm. Wähle Deine Textwerkzeug und verwenden Sie die gleiche Schriftart, die Sie für Ihre Ikonentitel verwendet haben, und geben Sie "Nochmal Geld ausgeben? Wie viel dieses Mal?" am oberen Rand Ihrer weißen Box. Meine Schriftgröße wurde auf 4pt eingestellt. Stellen Sie sicher, dass Sie dieses neue Textfeld in Ihrem Ebenenordner für Ausgaben ausgeben.
Öffnen Sie das Ebenenstil-Fenster (Blending Options-Fenster) für Ihre nächste Textebene. Wenden Sie einen Farbüberlagerungsstil mit der Farbe # 613111 (dunkelbraun) an. Fügen Sie mit den Standardeinstellungen auch einen Schlagschatten mit einer Deckkraft von 15% hinzu.
Als nächstes erstellen Sie unser Texteingabefeld und unseren Button. Wähle aus Rechteckiges Laufschriftwerkzeug und erstellen Sie eine feste Größe von 550x100 Pixeln. Klicken Sie auf die Leinwand und zentrieren Sie Ihre Auswahl. Erstellen Sie eine neue Ebene, und nennen Sie sie "Money Entry". Gehe zu Wählen Sie> Ändern> Glätten und geben Sie einen Radius von 5 Pixeln ein und klicken Sie auf OK.
Füllen Sie Ihre Auswahl mit Schwarz. Bevor Sie Ihre Form abwählen, gehen Sie zu Wählen Sie> Ändern> Vertrag und verkleinern Sie Ihre Form um 10 Pixel. Erstellen Sie eine neue Ebene und nennen Sie sie "Geldeintragsfeld". Füllen Sie die neue Auswahl mit Schwarz.
Wählen Sie Ihren Layer "Money Entry" aus und öffnen Sie das Fenster "Blending Options". Wenden Sie eine Farbüberlagerung mit der Farbe # E4DCD5 an. Wir werden auch einen sehr subtilen inneren Schatten hinzufügen, indem Sie die folgenden Optionen verwenden:
Verringern Sie die Deckkraft der gerade bearbeiteten Ebene auf etwa 50%. Öffnen Sie das Blending Options-Fenster für Ihre Ebene mit dem Namen "Money Entry Field". Wenden Sie eine reine weiße Farbüberlagerung auf das Textfeld und einen 1px-Strich mit der Farbe # C0B8B0 an.
Duplizieren Sie die beiden Formen, die wir gerade gemacht haben, und drücken Sie sie nach unten. Benennen Sie sie in "Verbrauchte Hintergrund" und "Verbrauchte Schaltfläche" um. Öffnen Sie das Blending Options-Fenster für Ihre Ebene mit dem Namen "Spent Button". Entfernen Sie alle aktuellen Optionen und wenden Sie eine Verlaufsüberlagerung an. Ich werde grüne Farben verwenden, die von # 50911B bis # A0D327 gehen. Wenn Sie mit der Verlaufsüberlagerung zufrieden sind, klicken Sie auf die Schaltfläche OK.
Wir werden unserem Button noch ein paar Berührungen hinzufügen, aber da wir mit ihnen sehr präzise sein werden und auf alle kleinen Details achten, machen wir dies manuell. Wählen Sie den Inhalt Ihrer Schaltflächenebene aus.
Erstellen Sie eine neue Ebene über Ihrer Schaltfläche und nennen Sie sie "Button Outer Stroke". Gehe zu Bearbeiten> Kontur und wenden Sie einen 1px-Strich mit einer beliebigen Farbe außerhalb der Auswahl an.
Öffnen Sie das Blending Options-Fenster der Strich-Layer und wenden Sie einen Standardverlauf mit Farben an, die von # 30580F bis # 86BD23 gehen.
Wiederholen Sie die letzten Schritte erneut, diesmal jedoch mit einem 1px-Strich im Innern Ihrer Auswahl und mit einem Verlauf zwischen # 53941B und # E2E8D4.
Wähle aus Textwerkzeug und ziehen Sie ein Textfeld über Ihre Schaltfläche. Geben Sie "SPEND IT" in Ihr Textfeld ein. Ich habe Helvetica Bold auf 8 Punkte (Größe) gesetzt. Richten Sie Ihren Text in der Mitte der Schaltfläche aus.
Wenden Sie eine Farbverlaufsüberlagerung auf Ihren Text an. Gehen Sie von einem sehr hellen Grau (ich habe #EBEBEB verwendet) zu Weiß (#FFFFFF). Wir möchten auch einen inneren Schatten mit den folgenden Einstellungen anwenden:
Wählen Sie Ihre ursprüngliche Schaltflächenform aus und erstellen Sie eine neue Ebene über allen anderen Schaltflächenebenen. Nennen Sie es "Button Noise". Füllen Sie Ihre Auswahl mit Weiß und gehen Sie dann zu Filter> Noise> Add Noise. Fügen Sie ungefähr 25% Rauschen hinzu und klicken Sie dann auf OK.
Ändern Sie den Mischmodus der Ebenen in weiches Licht und verringern Sie die Deckkraft der Ebene auf etwa 50%. Dies verleiht unserem Button eine schöne subtile Textur. Jetzt haben wir das getan, wir haben alles mit unserem Knopfdesign fertig! Eine schnelle, einfache und effektive Möglichkeit, den Button so aussehen zu lassen, als wäre er gedrückt, ist das einfache Umdrehen des Buttons um 180 Grad, sodass das dunklere Grün oben und nicht unten angezeigt wird.
Im ursprünglichen Anwendungsdesign gab es separate Bildschirme für die Statistiken des Spendens (die Seite, die anzeigt, wie viel Sie ausgegeben haben und wie viel Sie noch übrig haben) und die gerade erstellte Seite. Ich halte es jedoch für unnötig, zwei Bildschirme zu haben. Ich werde es also auf das eine reduzieren und alle anderen Informationen auf dem gleichen Bildschirm wie das, das wir gerade entworfen haben.
Die Informationen, die wir unterhalb unseres Buttons anzeigen müssen, lauten wie folgt:
Nachdem ich mein "Geld wieder ausgeben? Wie viel dieses Mal?" Text, ich gehe weiter zu den "Stats" unter dem Button. Ziehen Sie wie unten gezeigt einige Hilfslinien auf Ihre Leinwand:
Packe die Textwerkzeug Ziehen Sie ein Textfeld aus Ihrem verbleibenden Platz auf Ihrem Bildschirm heraus. Geben Sie Ihren ersten Titel ("Current Spend Rate") ein und wenden Sie dann denselben Stil an, den wir für "Bargeld ausgeben" verwendet haben. Text zu Ihrem neuen Typ.
Wiederholen Sie den Schritt noch einmal mit den anderen Stat-Titeln.
Verringern Sie die Deckkraft der drei Textebenen auf etwa 90%, um sie etwas leichter als unser anderer Text zu machen. Das macht keinen großen Unterschied, unterscheidet sie aber leicht. Duplizieren Sie die Ebene "Aktuelle Ausgaberate" und verschieben Sie sie in die rechte Spalte. Ändern Sie den Text in "$ XX.XX pro Tag". Erhöhen Sie die Schriftgröße etwas und richten Sie sie mit den Cursortasten an der Mitte der Spalte aus.
Wiederholen Sie den Schritt noch einmal, um am Ende etwas Ähnliches wie in der Abbildung unten zu sehen:
Um diese Werte zu beenden, fügen wir einen schönen und subtilen 2px-Rahmen hinzu. Erstellen Sie eine neue Ebene und nennen Sie sie "Stroked Border White". Wähle Deine Einreihiges Laufschrift-Werkzeug und treffen Sie eine Auswahl zwischen Ihrem "Ausgaben" -Button und dem "Aktuelle Ausgabenrate". Füllen Sie die Auswahl mit einer Farbe, die etwas dunkler ist als der Hintergrund. Ich verwende # E1D9D3.
Duplizieren Sie die Ebene und benennen Sie sie in "Stroked Border Black" um, und verschieben Sie sie um ein Pixel nach unten, sodass die neue Linie direkt unter Ihrer alten liegt. Wählen Sie den Ebeneninhalt aus und füllen Sie ihn mit einer Farbe, die etwas dunkler ist als die, die wir gerade verwendet haben - ich habe # A59C93 verwendet.
Wie Sie in der Abbildung oben sehen können, überlappen unsere Begrenzungen / Trennzeichen Bereiche, die wir nicht möchten. Wählen Sie die Ebene "Stroked Border Black" und klicken Sie auf die Schaltfläche Cmd + E Kombination, um sie bis auf die weiße Strichebene zu verschmelzen. Benennen Sie die Ebene in "Trennzeichen" um. Wähle aus Rechteckiges Laufschriftwerkzeug und treffen Sie eine Auswahl auf der linken Seite Ihres Bildschirms.
Schlagen Sie die Löschschlüssel um den nicht benötigten Separator zu entfernen. Bewegen Sie Ihre Auswahl auf die rechte Seite und wiederholen Sie den Vorgang.
Bewegen Sie Ihr Trennzeichen mit den Cursortasten nach oben / unten, um sicherzustellen, dass es zwischen dem unteren Rand des Buttons und dem oberen Rand Ihres Textes zentriert ist. Verringern Sie die Deckkraft Ihrer Trennebene auf etwa 50%. Ich entschied mich dann, es umzudrehen, so dass die hellere Farbe auf der Unterseite, als ich fühlte, dass dies besser aussah.
Wiederholen Sie den Vorgang mehrmals, bis sich unter jeder Textzeile ein Trennzeichen befindet. Sie können dies schnell tun, indem Sie einfach jede vorherige Ebene duplizieren und dann die richtige Menge nach unten verschieben. Ich habe auch den gesamten Statistikordner nach unten verschoben, so dass er in der Mitte zwischen dem Button und dem unteren Teil unseres weißen Hintergrundbereichs steht.
Fügen Sie noch einige letzte Details hinzu, wie zum Beispiel das Ändern der Farben unserer Figuren, die noch ausgegeben werden. Ich habe auch meine Figuren nach rechts ausgerichtet.
Nachdem wir unserem Geld-Textfeld einen Dummy-Text hinzugefügt haben, haben wir unser erstes Screendesign fertiggestellt! Der Knopf hier ist eindeutig der Hingucker, mit seinem kräftigen grünen Farbverlauf und der Aufmerksamkeit für kleine Details wie die weißen und schwarzen Striche.
Der Rest unserer Seiten (wie oben aufgeführt) verwendet eine Kombination der Techniken, die wir bereits in den vorherigen Schritten dieses Tutorials und in Teil 1 verwendet haben. Setzen Sie die Techniken ein, die Sie gelernt haben, um den Rest des Anwendungsdesigns selbst zu erstellen.
Unten sind die Screenshots des ursprünglichen Designs neben meiner neu gestalteten Anwendungsbenutzeroberfläche, die Sie gelernt haben, sich selbst zu erstellen.
Also, da haben wir es, unser Endergebnis dieses einigermaßen langen zweiteiligen Tutorials hat sich ziemlich gut gedreht! Veröffentlichen Sie Links zu Ihrem Ergebnis in den Kommentaren unten - wir würden uns freuen, sie zu sehen!
Wir suchen aktiv nach Designern, die ihre mobilen Designfähigkeiten in unsere Community einbringen können. Kontaktieren Sie uns noch heute, wenn Sie daran interessiert sind, kostenpflichtige Inhalte zu verfassen!
Accentsconagua