Grafikdesign für das Web ist seit Jahren ein beliebter Trend. Mit der Erfindung des Apple iPhone im Jahr 2007 ist der App Store enorm gewachsen. Jetzt kommen iOS App-Designer und Entwickler zusammen, um wirklich fantastische Konzepte in die Realität umzusetzen.
Wenn Sie nicht gern Xcode lernen und Objective-C programmieren, kann Photoshop mehr Interesse wecken. Im Folgenden werde ich einige der Tipps geben, die ich für das Design von Killer-iOS-App-Modellen erhalten habe. Und da immer neue Trends auftauchen, definiert die Design-Community immer wieder neu, wie Apps erstellt werden. Betrachten Sie dies als eher einen Einsteiger-Leitfaden für das Design von Apple-Geräten.
Richtige Dokumenteinstellungen
Bevor Sie die Elemente auf der Seite in Betracht ziehen, sollten Sie wissen, wie die iPhone-Grafiken erstellt werden. In den neueren Retina-Displays der iPhone 4 / 4S-Modelle wird der Bildschirm immer noch in derselben Größe gemessen. Die Anzeige in Pixeln ist jedoch vom Original tatsächlich verdoppelt - das heißt, wir verwenden 640 bis 960 mit einer Auflösung von 326 ppi.
Zusätzlich waren die iPhone 3 / 3GS-Icons in der Regel 57 bis 57 Pixel groß. Die Bildschirme des iPhone 4 und 4S verwenden standardmäßig 114 - 114 (werden jedoch für ältere Auflösungen vergrößert). Glücklicherweise ist der Icon-Design-Prozess ziemlich weit entfernt von der Erstellung eines UI-Layouts. Aber als Designer schadet es nie, beide Fähigkeiten aufzubauen.
Wenn Sie diese Einstellungen häufig verwenden, empfiehlt es sich, sie als voreingestellte Dokumentgröße zu speichern. Im neuen Dokumentfenster für Photoshop sehen Sie eine Schaltfläche mit der Bezeichnung "Save Preset". . Vergeben Sie einfach einen Namen und Sie können diesen bei jedem Erstellen eines neuen Dokuments aus der Dropdown-Liste auswählen.
Anstatt die iPhone-Benutzeroberflächenelemente manuell zu erstellen, bietet Teehan + Lax einen kostenlosen UI-Kit-Download speziell für Photoshop an. Dazu gehören ein iPhone 4-Render, obere Leisten, Schaltflächen, Tastaturen und viele andere nützliche Dinge. Entscheiden Sie sich unbedingt zuerst und speichern Sie es in einem lokalen Verzeichnis, in dem Sie einfachen Zugriff auf diese Elemente haben.
Passen Sie die Bars & Buttons an
Sowohl der obere als auch der untere Bereich Ihrer App enthält wahrscheinlich Menüleisten. Die Oberseite wird zum Beschriften der aktuellen Ansicht zusammen mit den Schaltflächen Zurück und Bearbeiten verwendet. Die Unterseite ist in der Regel die Navigation und verwendet meist Registerkarten, um dies zu erreichen.
Teehan + Lax verwendet dafür einige wirklich allgemeine Beispiele. Sie lassen sich jedoch viel einfacher mit Ihren eigenen Farben, Texturen und anderen Augenwünschen anpassen. Nehmen wir als Beispiel die Gruppenebene Bar (Grau-Blau) und ziehen Sie es in ein neues Dokumentfenster in iPhone-Größe. Klicken Sie dann auf das kleine Dreieck links und öffnen Sie eine weitere Untergruppe mit der Bezeichnung Bar Top. Ganz unten befindet sich eine Hintergrundebene mit einem Überlagerungseffekt für den Verlauf.
Öffnen Sie FX in dieser Hintergrundebene und doppelklicken Sie auf die Verlaufsüberlagerung. Ich habe die Standardfarben von Apple entfernt und (von links nach rechts) # 3478a7 auf # 5eb0e7 gesetzt. Auch die beiden Tasten müssen ihre Farbverläufe verlieren - für diese verwendete ich die Werte # 052b50 bis # 044a8e für einen intensiven dunklen Effekt.
Spaß mit Texturen
An diesen kleinen Farbverlaufsänderungen können Sie erkennen, dass das Anpassen Ihrer App eine relativ einfache Aufgabe ist. Für ein bisschen Detail können wir eine Textur oder ein Muster über den Farbverlauf des Balkens hinzufügen. Wir werden für dieses Demo-Beispiel einige schräge Streifen verwenden.
Erstellen Sie zunächst ein neues Dokument mit 7? 7 Pixeln mit transparentem Hintergrund. Stellen Sie dann Ihr Stiftwerkzeug auf die kleinste Skala (1 x 1 x 1) und verbinden Sie es von der oberen rechten Ecke in die linke untere Ecke. Ich habe schwarzes HEX # 000000 verwendet, aber es sollte keine Rolle spielen, da Sie die Farbe später jederzeit ändern können. Schauen Sie sich den Screenshot unten an, wenn Sie nicht folgen:
Jetzt schlagen Bearbeiten -> Muster definieren? und geben Sie einen Namen, dann klicken Sie auf Speichern. Fühlen Sie sich frei, das Fenster jetzt zu schließen (ohne zu speichern), da wir nur das Muster benötigen. Nun zurück in die Bar oben Gruppe erstellen Sie eine neue Ebene über dem Hintergrund. Klicken Sie mit der CMD-Taste oder der STRG-Taste auf die Vektormaske, die den gesamten Hintergrundfarbverlauf anzeigt.
Achten Sie jedoch darauf, dass Sie wieder auf die gerade erstellte neue Ebene klicken, damit sie blau hervorgehoben wird. Wir werden es mit diesem neuen Muster füllen, aber wir möchten nur Streifen über dem Verlauf der oberen Leiste (und unter den Schaltflächen) sehen. Im oberen Menü gehen Sie zu Bearbeiten -> Füllen und wählen Sie? Muster? aus dem Dropdown-Menü. In dem Feld unten sollten Sie das letzte Punktmuster auswählen und auf OK klicken.
Die Linien wirken auf den ersten Blick ziemlich starr. In der Lagenpalette sinkt die Füllung auf ca. 20%. Wir können auch den Mischmodus auf Überlagern ändern, damit die Balken mit den Farbverläufen fließen. Zoomen Sie wieder auf 100% und sehen Sie sich den fantastischen Effekt an!
Sie können eine weitere süße Textur erstellen, indem Sie ein 3px by 3px-Dokument einrichten und ein Pluszeichen eingeben. Ich habe oben ein Beispiel hinzugefügt, wie dies das Aussehen unseres Topbar-Verlaufs so dramatisch verändert. Sie können auch versuchen, die Farbe von reinem Schwarz in reinweißes #FFFFFF zu ändern.
Tab-Leiste-Symbole
Die Navigationsschaltflächen am unteren Rand Ihrer App sind entscheidend für die allgemeine Benutzererfahrung. Benutzer müssen herausfinden, wo sie Einstellungen bearbeiten, wie sie Aufgaben ausführen und was in Ihrer App schnell erledigt werden muss. Ansonsten werden sie oft frustriert oder gelangweilt und geben den Versuch auf. Lassen Sie uns als einen weiteren Tipp den Navigationsbereich in der unteren Leiste verfeinern.
Verwenden Sie dieselbe iPhone 4 GUI-PSD-Datei, um die Tab-Leiste zu finden. Gruppe. Denken Sie daran, dass Sie dies durch CMD / STRG + Klicken auf den Block in Photoshop tun können. Ähnlich wie in der oberen Leiste können wir den Hintergrund-FX-Verlauf für einige übereinstimmende Stile bearbeiten. Der schwarze Standardverlauf passt jedoch zu den meisten Farbschemata.
Für einige Symbole empfehle ich die Netzgruppe der Arbeitsgruppe, die in 24px, 48px und 64px erhältlich ist. Auf jedes der Icons der GUI-PSD werden FX-Layer-Stile angewendet - im Wesentlichen ein leichter Schatten und ein Overlay-Verlauf.Diese kleinen Details ergeben wirklich ein tolles Design. Achten Sie daher besonders auf Ihre Pixel. Verwenden Sie diesen Farbschema-Designer, wenn Sie Probleme haben.
Sie sollten darüber nachdenken, wie sich Textbeschriftungen auf die Benutzererfahrung auswirken. Wenn Sie der Meinung sind, dass die Registerkartensymbole für sich alleine ausreichen, kann der Beschriftungstext nur im Weg stehen. Es ist jedoch wichtig, Ihre Optionen offen zu halten und mit ein paar verschiedenen Ideen zu spielen. Versuchen Sie, die Meinungen von Freunden und Kollegen einzuholen, um herauszufinden, welche Methode für Ihre App am besten geeignet ist.
Eine andere ziemlich beliebte Technik ist für App-Designer, eine mittlere Schaltfläche zu erstellen, die die Registerkartenleiste in 5 Slots aufteilt. Ich habe viele wirklich kreative Anwendungen gesehen, die dieses Design verwenden, um Platz zu sparen und der Navigation Eleganz zu verleihen. Formspring ist ein Beispiel, ich habe den Bildschirm unten hinzugefügt.
Nützliche Links
- Glyphish Icon Set
- Entwerfen einer iPhone-Bank-App in Photoshop [Tutorial]
- Entwerfen von iPhone-Anwendungen in Photoshop [PDF]
- Nützliche Sammlung von Tools und Ressourcen für iPhone / iPad App-Entwickler
- Tipps und Ressourcen zur iOS-Benutzerfreundlichkeit für iPhone- und iPad-Apps
- So erstellen Sie Ihre erste iPhone-Anwendung
Fazit
Diese Strategien für die Arbeit mit iOS-Apps und Adobe Photoshop werden sich als nützlich erweisen, wenn Sie Ihre Design-Sinne weiterentwickeln. Mobile Anwendungen sind ein ganz anderes Spiel als Websites und Logos. Denken Sie während des gesamten Prozesses daran, da Sie ständig neue Techniken erlernen.
Zusammen mit den oben hinzugefügten Links sollten Sie sich beim App-Interface-Design viel wohler fühlen. Layoutmodelle sind immer schwierig und erfordern Zeit zum Erstellen und Studieren. Wenn Sie jedoch ausreichend engagiert sind, ist der Mobilfunkmarkt möglicherweise der wohlhabendste Bereich. Wenn Sie weitere Fragen oder Anmerkungen haben, teilen Sie uns dies bitte im unten stehenden Diskussionsbereich mit.