Share
Bei den meisten mobilen Apps fehlt das gewisse Extra an Gestaltungsdetails, durch die sie sich vom App Store abheben könnten. Zwar gibt es keinen Ersatz dafür, dass ein talentierter Designer die Pixel Ihrer App stundenlang poliert, aber der Zweck dieser Serie besteht darin, denjenigen mit eingeschränkter Photoshop-Erfahrung und einem geringen Budget das Erstellen glanzvoller Apps zu vermitteln!
Diese Serie richtet sich an Entwickler, die nicht über ein Budget verfügen, um einen professionellen Designer einzustellen. Es wird Ihnen zeigen, wie Sie mit sehr begrenztem Photoshop-Wissen und Aufwand auffällige Elemente erstellen können.
In diesem Beitrag werden wir uns darauf konzentrieren, vorhandene PSD-Dateien zu ändern, um das Aussehen zu erzielen, das Sie für Ihre App suchen.
Wenn Sie Programmierer sind, haben Sie jemals den Code eines anderen gelesen, um zu erfahren, wie er eine bestimmte Aufgabe erledigt? Fast alle Programmierer tun dies und das Lerndesign unterscheidet sich nicht. Genau wie in der Entwicklungswelt gibt es viele Websites mit PSDs, mit denen Sie experimentieren und von denen Sie lernen können. Bei einigen dieser Websites können Sie sogar die PSDs ändern und für Ihre eigene Arbeit verwenden. Das Schlüsselwort lautet ändern. Während viele der PSDs, auf die ich mich beziehe, tatsächlich ohne Änderung kopiert und kommerziell verwendet werden könnten, würde ich davon abraten. Auf diese Weise lernen Sie nicht, und Sie werden kein Design veröffentlichen, das wirklich einzigartig für Ihre Anwendung ist.
Wie bereits erwähnt, gibt es Hunderte von Websites, die kostenlose PSDs anbieten. Wenn Sie jedoch ein reales Projekt erstellen möchten, besteht der Trick darin, die Websites zu finden, auf denen Sie diese PSDs in Ihrer eigenen Arbeit wiederverwenden können. Wenn ich nicht nur zu Lernzwecken surfe, besuche ich normalerweise nur Websites, die sowohl qualitativ hochwertige Arbeit als auch flexible Nutzungsbedingungen bieten. Im Folgenden sind meine fünf bevorzugten PSD-Websites aufgeführt:
Der Punkt hier ist einfach: Als Entwickler fehlen Ihnen wahrscheinlich die Fähigkeiten, die Sie benötigen, um selbst ausgefeilte Anwendungen zu erstellen. Sie können jedoch schnell die Designs anderer mashupen, um mit wenig Photoshop-Kenntnissen Ihr eigenes, einzigartiges Gefühl zu erzeugen.
Mit der oben diskutierten PSD-Technik "Mashup" entwerfen wir eine benutzerdefinierte UINavigationBar mit einer PSD von www.pixelbeam.net. Wir gehen nach ändern mehrere Elemente in der PSD, um unser eigenes einzigartiges Gefühl zu schaffen.
Laden Sie die PSD hier herunter und öffnen Sie die Datei in Photoshop.
Erstellen Sie ein neues Projekt, das 640 x 88 ist.
Verwenden Sie nun die Schaltfläche Dokumente anordnen, um den Bildschirm auf beide Projekte aufzuteilen.
Stellen Sie für diesen Teil des Vorgangs sicher, dass die Option Layer automatisch auswählen aktiviert ist. Das bedeutet, dass Photoshop automatisch die Ebene des Elements auswählt, auf das Sie gerade geklickt haben. Dies hilft beim Navigieren durch größere PSDs. Sie können es bei Bedarf während dieses Projekts ein- und ausschalten.
Wählen Sie mit dem Verschieben-Werkzeug das oben abgebildete aktive Geschoss aus. Sie werden feststellen, dass Photoshop diese Ebene automatisch ausgewählt hat.
Ziehen Sie die aktive Aufzählungsschicht im Split-Screen-Modus auf den Bildschirm Ihrer UINavigationBar. Sie werden feststellen, dass die Ebenen- und Ebenenstile in Ihr UINavigationBar-Projekt kopiert wurden.
Doppelklicken Sie nun auf die Ebenenminiatur. Dadurch wird der Farbwähler geöffnet. Von hier aus können Sie die Farbe der Kugel ändern.
Kopieren Sie die Aufzählungsfarbe # 567200 und legen Sie sie als Vordergrundfarbe fest.
Verwenden Sie das Paint Bucket Tool, um Ihr Projekt mit der Farbe # 567200 zu füllen.
Klicken Sie mit der rechten Maustaste auf die aktive Aufzählungsschicht. Wählen Sie Ebenenstil kopieren.
Klicken Sie mit der rechten Maustaste auf Ihre UINavigationBar-Ebene und wählen Sie Ebenenstil einfügen.
Wählen Sie den Hintergrund des Folienbereichs. Ähnlich wie in Schritt 6 wählt Photoshop die Ebene automatisch aus (Auto-Select-Ebene muss aktiviert sein). Verschieben Sie nun die Ebene in Ihr UINavigationBar-Projekt.
Bewegen Sie den Mauszeiger über den Ebenenstil "Musterüberlagerung". Klicken Sie darauf und ziehen Sie es in Ihre UINavigationBar-Ebene.
Stellen Sie sicher, dass alle Ebenen außer Ihrer UINavigationBar-Ebene nicht sichtbar sind.
Doppelklicken Sie auf den Ebenenstil "Musterüberlagerung". Das Pattern-Overlay-Ebenenstil-Feld wird angezeigt. Reduziere die Deckkraft auf 8.
Wenn Sie eine benutzerdefinierte UINavigationBar in Ihr Projekt integrieren möchten, können Sie den Beispielcode in diesem Github-Projekt überprüfen.
Nehmen Sie sich etwas Zeit, um die PSD durchzusehen. Sie werden schnell feststellen, dass gutes Design schwierig und zeitaufwändig ist. Gleichzeitig ist es die harte Arbeit für die erreichte Endästhetik wert. Wenn Sie das Budget für einen großartigen Designer haben, empfehle ich dringend, dass Sie einen finden und einstellen. Wenn Sie nicht über das Budget verfügen, Mashup Ihre eigenen Design-Elemente mit verschiedenen PSDs. Ich empfehle außerdem, Designs zu studieren, die auf Websites wie Creattica Mobile, Pattrns und Beautiful Pixels zu finden sind.
Ich hoffe, Sie finden dieses Tutorial hilfreich. Wenn Sie etwas Großartiges schaffen, twittern Sie es mir unter @williamherring.
*Das Vorschaubild für diesen Beitrag wurde durch Ändern des erstellt Leatherly - Eine Seitenvorlage das kann hier gefunden werden. Die UINavigationBar wurde durch Modifizieren der erstellt Einfacher dunkler Slider Thema, das hier zu finden ist.
Accentsconagua