Sparen Sie Zeit und Geld, indem Sie Ihren Photoshop-Workflow systematisieren

Sich wiederholende Aufgaben können schnell langweilig werden. Als Designer entwerfen Sie wahrscheinlich oft dieselben Elemente immer wieder von Grund auf. HALT!

Zeitverschwendung ist so altmodisch. Es bedeutet auch, dass Sie Geld verschwenden! Sehen wir uns also einige Möglichkeiten an, wie Sie Ihren Photoshop-Workflow automatisieren und systematisieren können. Laden Sie die Projektbasis für alle Ihre neuen Designs herunter!

Dateibaum & wiederverwendbare Projektbasis

Der erste Schritt bei der Systematisierung Ihres Workflows ist das Organisieren Ihrer Dateien. Identifizieren Sie alle gemeinsamen Elemente, die Sie in Ihren Entwürfen verwenden.

Sie können zu einer Liste wie der folgenden kommen:

  • Homepagevorlage
  • Über Seite
  • Kontaktseite
  • Services Seite
  • Schriftarten
  • Vermögenswerte

Die Projektbasis

Überlegen Sie, wie Ihre endgültigen Ergebnisse verwendet werden. Wenn sie an ein Kodierungsunternehmen geliefert werden, sollten Sie so organisiert und gründlich wie möglich sein, einschließlich Notizen und ggf. Schriftarten.

Sie können sicherstellen, dass Sie Themen perfekt organisiert haben, indem Sie ein Paket erstellen, mit dem Sie sozusagen "die Lücken füllen" können. Kopieren Sie einfach diesen Ordner, ordnen Sie ihn dem Projekt zu, indem Sie ihn in das Projekt umbenennen und loslegen. Dies ist eine sehr einfache und effiziente Arbeitsweise und bedeutet, dass Websites, die Sie vor vier Jahren erstellt haben, problemlos bearbeitet werden können, da sich alles an einem ganz eigenen Ort befindet.

Laden Sie die Projektbasis herunter

In der ZIP-Datei finden Sie einen einfachen, wiederverwendbaren Vorlagenstartpunkt. Diese Datei enthält Elemente wie Trennlinien, Schaltflächen und eine Vorlage mit Vorraster, um Ihren Design-Workflow zu beschleunigen.

Sehen Sie, wie einfach es jetzt ist, ein neues Projekt zu beginnen? Das Einrichten kann einige Minuten dauern, aber die Zeitersparnis später ist mehr Zeit für das, was Sie am besten können - das Entwerfen!

Nun, da wir eine solide Basis haben, auf der wir aufbauen können, können wir unseren 'Boiler-Plater' mit spezifischen Dateien und Konzepten füllen.

Web Template

Mit der Beispielvorlage können Sie eine Seite mit den am häufigsten verwendeten Elementen erstellen, um sie schnell in Ihr aktuelles Projekt aufzunehmen.

Wenn Sie insbesondere Webdesigner sind, werden Sie feststellen, dass viele Ihrer Projekte, auch die, die sich in jeder Hinsicht unterscheiden, gemeinsame Elemente verwenden und erneut verwenden.

Beginnen Sie mit dem Erstellen einiger wiederverwendbarer Vorlagen. Machen Sie sich keine Gedanken darüber, welche Elemente Sie gerade hinzufügen möchten, da Sie jederzeit Ihre vorherigen Projekte ansehen und beliebte Funktionen analysieren können - dann erstellen Sie sie hier neu.

Persönlich verwende ich nur eine Vorlage. Ich habe eine Homepage (diese enthält Elemente wie Nachrichtenbulletins, Stylings von Blogbeiträgen, Menüs, Logos und Aufruf zu Aktionen). Ich kann diese Vorlage an Blogseiten anpassen, jetzt Formulare kaufen und mehr.

Die Seite hat auch eine vorab angewendete 960.gs. Diese wurde am Ende des Artikels in der Vorlage Boilerplate zum Download bereitgestellt.

Sobald Sie dieses Konzept eingerichtet haben, können Sie sehr schnell Designs erstellen. Sie sollten jedoch auf jeden Fall in Betracht ziehen, Ihre eigene zu entwickeln, und sie an Ihre Kunden und Ihr Team anpassen. Sie können weitere Schritte unternehmen, indem Sie Symbole, Suchelemente und Online-Shop-Elemente hinzufügen - alles, was zu Ihrem Kundenstamm passt.

Gruppieren & Organisieren

Das obige Bild zeigt den spürbaren Unterschied zwischen einer organisierten Ebenenpalette und einer unordentlichen!

Wenn Sie sich in einem echten kreativen Fluss befinden, kann es schwierig sein, Ebenen zu benennen und zu gruppieren. Photoshop hilft in diesem Bereich auch nicht wirklich!

Nehmen Sie sich also die Zeit, um Ebenen zu benennen und zu gruppieren. Dies hilft Ihnen später, wenn Sie das Design codieren oder wenn Sie die Codierung an anderer Stelle ausführen.

Benennen Sie jede Ebene, und versuchen Sie, ein beschreibendes und kurzes Wort zu verwenden, z. B. "Menü" für die Navigation. Gruppieren Sie bestimmte Bereiche, z. B. die Kopfzeile oder ein Kontaktformular.

Dies hat einen zweifachen Nutzen.

  1. Sie können ganze Bereiche (oder das gesamte Design) ein- oder ausschalten, um den Hintergrund oder andere Elemente zu bearbeiten.
  2. Sie können Abschnitte eines Designs verschieben, ohne dass Sie jedes Element verschieben müssen. Dadurch können Stunden pro Projekt eingespart werden!

Nehmen Sie sich also die Zeit, alle fünf Minuten anzuhalten, und benennen und gruppieren Sie jedes Element. Du wirst es nicht bereuen!

Nutzen Sie das Auswahlwerkzeug gut! Sie können den Auswahlmodus zwischen Ebenen und Gruppen umschalten. Dies erleichtert die Massenaktualisierung und das Neuausrichten von Designs. Vergessen Sie es also nicht!

Aktionen

Wenn Sie in Ihrem Arbeitsablauf keine Aktionen verwenden, sollten Sie diese sofort verwenden.

Photoshop-Aktionen sind vollständig konfigurierbare Aktionslisten, die Photoshop automatisch ausführen soll. Sie können Ihre eigenen erstellen oder aus der online verfügbaren Kopfgeld auswählen. Wenn Sie beispielsweise mit Fotos arbeiten und 400 Bilder zum Bearbeiten und Ändern der Größe haben, dauert dies sehr lange. Stattdessen können Sie eine Aktion erstellen, die den Kontrast anpasst, die Größe ändert und dann die Datei im JPG-Format speichert. Dabei werden 400 Dateien in Sekundenschnelle angezeigt. Sie müssen Aktionen verwenden!

Wenn Sie nicht über das Wissen oder die Erfahrung verfügen, um Ihre eigenen Aktionen zu erstellen, GraphicRiver bietet eine große Auswahl an Aktionen zum Kauf ab 1 US-Dollar an!

Die angebotenen Aktionen reichen von einfachen Fotoeffekten bis hin zu dieser Aktion, mit der verschiedene vorformatierte Textabschnitte wie Kontaktdetails oder Blogbeiträge in Sekunden hinzugefügt werden können.

Beginnen Sie mit der Verwendung von Aktionen. Sie werden eine deutliche Steigerung Ihrer Produktivität feststellen und die Anzahl der Wiederholungen monotoner Aufgaben reduzieren.

Eine Aktion erstellen und verwenden

Eigene Aktionen machen ist einfach. Als Beispiel erstellen wir eine einfache Aktion, um mehrere Bilder auf einmal zu verkleinern und sie dann zu speichern.

Zunächst müssen Sie auf der Aktionspalette auf die neue Aktionsschaltfläche klicken.

Sie sollten keine Einstellungen als Standard ändern müssen, um den Namen für eine bessere Organisation zu ändern. Photoshop zeichnet jetzt Ihre Aktionen auf. Sie müssen also nur das Bild neu skalieren. Gehen Sie zur Bildgröße und ändern Sie die Abmessungen. Die Aktion ändert jedes Bild in diese Abmessungen. Dann klicken Sie auf Speichern.

Drücken Sie zum Schluss Stopp auf der Aktionspalette.

Wenn Sie jetzt auf die von Ihnen erstellte Aktion auf play drücken, folgt Photoshop der Liste der definierten Aktionen für Ihr Bild. Obwohl diese Aktion sehr einfach ist, können Sie Stunden und Stunden der monotonen Größenänderung von Fotos und Bildern sparen. Dies ist nur ein sehr einfacher Blick auf Aktionen. Sie können so viel mehr, also nehmen Sie sich Zeit, um sie kennenzulernen und wirklich zu gebrauchen. Das Schöne daran ist, wie Sie praktisch jede Aktion in Photoshop aufzeichnen können - Auswählen, Ändern von Stilen, Ändern, Ändern der Größe und Speichern.

iPhone & UI Design

Arbeiten Sie mit Benutzeroberflächen? In diesem Fall müssen Sie wirklich ein GUI-Element-Pack für Photoshop herunterladen.

Für die meisten gängigen Betriebssysteme und mobilen Plattformen stehen viele zur Verfügung.

Wenn Sie beispielsweise mit dem iPhone arbeiten, können Sie das iPhone GUI-Paket herunterladen, das alle in der iPhone-Schnittstellenbibliothek verfügbaren Elemente enthält, und dann einfach mit dem Entwerfen Ihrer App beginnen. Einfach, schnell und viel einfacher, als diese komplett neu zu erstellen.

Android GUI Kit

http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/

Teehan Lax Kits

Die Agentur Teehan Lax verfügt über mehrere hochwertige, lebensechte UI-Kits. Diese eignen sich hervorragend zum Erstellen einer iPhone-App-Vertriebs-Site oder zum Entwerfen der tatsächlichen Benutzeroberfläche einer App. Kits sind für iPhone, Palm Pre und Browser erhältlich.

Palm Pre

http://www.teehanlax.com/blog/2009/07/08/palm-pre-gui-psd/

iPhone

http://www.teehanlax.com/blog/2008/11/06/iphone-gui-psd-update-13/

Browserelemente

http://www.teehanlax.com/blog/2008/12/16/browser-form-elements-psd/

Fazit

Ich hoffe, wir haben Ihnen einige Tipps gegeben, mit denen Sie Ihre Produktivität und Effizienz steigern können. Photoshop ist ein wunderbares Werkzeug, aber wenn wir nicht vorsichtig sind, können wir die gleichen Aufgaben immer wieder wiederholen. Stellen Sie daher sicher, dass Sie die oben genannten Tipps umsetzen und Zeit, Geld und Ihren Verstand sparen!

Laden Sie die Projektbasis herunter

Haben Sie zeitsparende Tipps für Photoshop? Haben Sie Ideen für andere Aufgaben, die automatisiert werden könnten, um Zeit und Wiederholungen zu sparen? Fühlen Sie sich frei, sie über die Kommentare mit der Community zu teilen.