8 Möglichkeiten, Websites in Photoshop schneller zu gestalten
Als Webdesigner ist es schwer, organisiert zu bleiben. Sie balancieren nicht nur mehrere Projekte auf einmal, sondern auch enge Termine und schwierige Kunden. Sie können auch von Marke zu Marke springen und ständig neue Markenrichtlinien und -stile lernen.
Glücklicherweise gibt es viele Möglichkeiten, Ihren Workflow effizienter zu gestalten. Um Ihnen zu helfen, habe ich diese acht Tipps zusammengestellt, damit Sie in Ihrer Webdesign-Karriere gesund bleiben
1. Halten Sie Ihre Dateien organisiert
Eine der einfachsten Dinge, die Sie tun können, um Ihre Gesundheit zu bewahren, besteht darin, Ihre Dateien zu organisieren. Durch das Erstellen und Verwalten einer konsistenten Ordnerstruktur können Sie Ihre Dateien problemlos finden. Probleme treten auf, wenn Sie einen Ordner anders als einen anderen strukturieren, wodurch es schwierig wird, die Datei FinalFinal-logo.ai zu finden.
Konsequente Dateinamenskonventionen sind beim Ordnen Ihrer Dateien unerlässlich. Hier kommt die Versionierung ins Spiel. Einige Designer verwenden Datumsangaben, andere verwenden Versionsnummern und einige verwenden Runden. Dies hängt von Ihrer Branche und Ihren persönlichen Vorlieben ab, aber es ist eine gute Vorgehensweise. Dank der Versionierung können Sie leicht verfolgen, welche Datei am aktuellsten ist, besonders wenn Sie alte Versionen als Referenz gespeichert haben.
Im Allgemeinen behalte ich zwei bis drei alte Versionen für den Fall, dass der Kunde zu dieser Heldenstrategie von Runde Eins zurückkehren möchte oder Ihre mobile Behandlung von Runde Zwei bevorzugt. Um die Pack-Rat-Mentalität zu vermeiden, ist es gut, ältere Dateien zu archivieren oder zu löschen, damit Ihre Festplatte nicht stecken bleibt.
Hier ist eine Beispielstruktur, die ich bei Clearlink verwende.
Die Kombination einer konsistenten Ordnerstruktur und Namenskonventionen mit der Versionierung wird auch die Suchfunktion unterstützen. Wenn Sie beispielsweise alle Ihre Dateinamen von einer Marke mit dem Markennamen oder der Abkürzung starten, können Sie die Assets für diese Marke einfacher filtern. Dies wird helfen, "ATT-logo-final.ai" von dem zu unterscheiden, was möglicherweise ein Meer von "logo-final.ai's" sein könnte.
2. Verstehen Sie Ihren Rahmen
Eine Sache, die ich erst nach einigen Jahren in meiner Designkarriere gelernt habe, ist die richtige Nutzung eines bestehenden Rahmens. Die beiden Heavy-Hitlers in der Framework-Welt sind derzeit Bootstrap und Stiftung , aber Google's Materialisieren wird ihnen in naher Zukunft sicherlich ein Rennen um ihr Geld geben. Das Unternehmen, für das ich arbeite, nutzt die Foundation für die Mehrzahl ihrer Marken-Websites.
Die Foundation verfügt über ein integriertes Responsive-Grid, sowie Styling für Buttons, Felder, Typografie, Navigation etc. unter vielen anderen Dingen, die Ihnen das Leben erleichtern. Durch die Verwendung des von Foundation in den PSDs integrierten Grids erleichtern Sie es dem Entwickler, Ihre Designs auf eine pixelgenauere Weise zu implementieren, als wenn Sie Ihr eigenes Ding machen. Photoshop hat dieses raffinierte Layout-Tool, das nicht nur das Erstellen von Rastern vereinfacht, sondern es auch an die Zeichenfläche anfügt, um die Dateistruktur und -bewegung zu vereinfachen.
Screenshot von der Fundament Spickzettel
Frameworks bieten außerdem einen guten Ausgangspunkt für Schaltflächenstyling, Formulare usw. und zeigen Möglichkeiten und Grenzen der zu implementierenden Entwurfsstrategien auf. Dadurch erhalten Sie nicht nur einen hervorragenden Ausgangspunkt für Ihr Design, sondern auch eine freundlichere Zusammenarbeit mit Ihrem Entwickler.
3. Organisieren Sie Ihre Ebenen nach Inhalt
Wenn Sie mit komplexen Webdesign-PSDs mit so vielen Ordnern, Ebenen, intelligenten Objekten usw. zu tun haben, ist es leicht, Dinge unordentlich zu machen. Sobald Schicht 2.455 kommt, beginnen Sie zu erkennen, dass Sie eine Art von Organisation in Ihrer PSD benötigen. Deshalb empfehle ich, Ihre PSD nach Sektionen zu organisieren.
Meins besteht in der Regel aus Ordnern, die Nav, Hero, Intro, Pakete, Vorteile, Fußzeile usw. enthalten. Ich färbe diese Ordner auch in Regenbogen-Mode, damit sie einfach zu navigieren sind. Dies macht die Aktualisierung von Sektionen und die Überarbeitung Ihrer PSD ein Kinderspiel.
Ich organisiere meine Datei in Abschnitte Ordner, die Rainbow-Farbe für einfache Scan-Fähigkeit codiert sind.
Wenn Sie zum Beispiel die Helden-Sektion vergrößern möchten, können Sie einfach alle darunter liegenden Ordner als eine Einheit ziehen (Halte-Befehl) und sie dann ziehen, nachdem die Aktualisierung vorgenommen wurde. Diese Strategie hilft auch Entwicklern und anderen Designern, einfach durch Ihre Datei zu navigieren. Mit verständlichen Namen wie "Hero" und "Nav" kann ein neuer Designer leicht in den Ordner springen und die gewünschten Änderungen vornehmen.
Einige Designer werden sogar einzelne Ebenen benennen, was auch unglaublich nützlich sein kann, aber ein wenig zeitaufwendig sein kann. Da Layer mithilfe des automatischen Auswahlwerkzeugs leicht zu finden sind, wenn sie auf "Layer" eingestellt sind, ist es heutzutage einfach, einzelne Ebenen zu erreichen. Daher liegt es am individuellen Designer, wie er seine Layer organisieren möchte. Der Punkt ist, dass du es geschafft hast.
4. Merken Sie sich alle Tastaturkürzel, die Sie normalerweise verwenden
Dies ist ein großer Vorteil für die Effizienz. Wenn Sie regelmäßig einen bestimmten Tastenbefehl verwenden, merken Sie sich diesen. Sie werden Ihre Effizienz exponentiell erhöhen, wenn Sie alle Tastaturkürzel unten haben.
Einige wichtige sind Speichern, Schriftgröße und -führung, Ebenenreihenfolge, Speichern für das Web und Opazität unter vielen mehr. Photoshop bietet Ihnen außerdem die Möglichkeit, benutzerdefinierte Verknüpfungen zu erstellen. In meinem Buch ist der wichtigste Befehl, den man sich einprägen muss, das Speichern der Datei. Aufgrund von zufälligen Abstürzen von Adobe ist es gut, eher auf der Seite des Speicherns zu liegen, anstatt das Risiko einzugehen, irgendeinen Fortschritt zu verlieren.
Adobe bietet Ihnen die Möglichkeit, Ihre Tastaturkürzel unter Bearbeiten> Tastaturkürzel anzupassen
Shortcuts binden auch an die Organisation Ihrer Ebenen nach Inhaltsbereichsordnern ein (wie oben erwähnt). Es ist einfacher, Ebenen mithilfe von Tastenkombinationen am oberen und unteren Rand eines Ordners zu platzieren, als wenn Sie Ebenen in einer nicht organisierten Datei neu anordnen. Hier kommt es darauf an, Ihre Datei beim Design zu organisieren. Das Einprägen häufig verwendeter Tastaturkürzel und das Organisieren von Layern wird Ihre Effizienz erheblich verbessern und anderen Designern dabei helfen, mit Ihren Dateien zu arbeiten.
5. Verwenden Sie CC-Bibliotheken
Eines der besten Dinge, die Adobe seit der Erstellung von CC hinzugefügt hat, sind Bibliotheken. Wenn Sie noch nichts von ihnen gehört haben, müssen Sie dies überprüfen tolles Tutorial wie man sie benutzt.
Ich denke, jedes Designteam sollte diese erstaunliche Funktion nutzen. Mit Bibliotheken können Sie eine Markenbibliothek erstellen, die Elemente wie Farben, Schriftstile, Fotos, Symbole und Symbole (wie Kopf- und Fußzeilen) enthält. Dank Bibliotheken können Sie problemlos mit Creatives aus mehreren Organisationen zusammenarbeiten, indem Sie eine einzelne Markenbibliothek verwenden.
Bibliotheken machen es einfach, Farben zu ändern und Textstile mit einem Klick zu aktualisieren. Sie helfen auch Markensymbole zu speichern, die einfach an einem Ort mit Updates aktualisiert werden können, die schnell über PSDs reflektiert werden. Dies ist äußerst vorteilhaft für Kopf- und Fußzeilen Ihrer Website, auf der Sie wahrscheinlich während des gesamten Projekts kleine Aktualisierungen vornehmen.
Ich benutze auch CC Libraries für die Schriftgestaltung in meinem Design. Ich richte Stile für Heldenkopien, Überschriften, Untertitel, Textkopien, Disclaimer usw. für Desktop-, Tablet- und mobile Anwendungen ein. Was die Ansicht betrifft, verwende ich das Listenformat mehr als die Kachelansicht, da es einfach zu scannen ist.
Bibliothekselemente werden als ein Mitarbeiter angesehen
Bibliotheken eignen sich auch hervorragend für die Teamzusammenarbeit. Sie können entweder mit anderen Creatives zusammenarbeiten, um sie zu bearbeiten oder zur Bibliothek hinzuzufügen, oder Sie können den Link für die Bibliothek für einen einfachen Zugriff freigeben. Sie haben auch eine Funktion "Neue Bibliothek aus Dokument erstellen", aber ich bevorzuge es, die Bibliothek selbst zu erstellen, damit sie organisiert bleibt und nur die relevantesten Assets enthält.
Leider gibt es einige Nachteile für Bibliotheken, eine davon ist das Fehlen von separaten Zeichen- und Absatzformaten für Text. Ich arbeite daran, indem ich meinen Zeichensatz in einer separaten Box anwende und dann verschiedene Stile in eine Box einfüge, um Textfelder innerhalb der Datei einfacher verwalten zu können. Ein weiterer Nachteil ist, dass Sie derzeit einen Zeichenstil nicht global aktualisieren können. Momentan gibt es in der Bibliothek keine Organisationsfähigkeiten, um Unterordner innerhalb der Kategorien zu erstellen (Farbe, Zeichenstile, etc.), aber hoffentlich arbeitet Adobe auch daran.
Der aktuelle Weg von CC Libraries besteht darin, dass das zuletzt aktualisierte / hinzugefügte Asset oben angezeigt wird. CC Bibliotheksfarben können nicht auf einzelnen Text in Textfeldern angewendet werden und können nur leicht auf Formen und ganze Textfelder angewendet werden. Ich bin mir sicher, dass Adobe hart daran arbeitet, diese Probleme zu lösen, also mache ich mir keine Sorgen, zumal die Profis die Nachteile definitiv überwiegen.
6. Behalten Sie Bilder und Vektoren im Smart-Objekt-Format
Auch wenn es Ihre Datei vergrößern wird, wird es für zukünftige Designer einfacher, Ihre PSDs zu bearbeiten, wenn Sie Ihre Bilder und Vektoren im Smart Object Format behalten. Stellen Sie sich Folgendes vor: Der Client kommt mit Änderungen zurück, die ein neues Heldenfoto enthalten und kleine Änderungen an einem Vektorsymbol vornehmen. Dies ist flüssiger, wenn die PSD das Foto mit voller Auflösung und nicht eine kleinere, gerasterte Version enthält. Vektoren können auch einfach optimiert werden, wenn es sich um intelligente Objekte aus Illustrator und nicht um gerasterte Grafiken handelt.
Ein weiterer Vorteil von Fotos im Smart-Objekt-Format entsteht, wenn Sie sie als PSDs speichern und sie dann als Smart-Objekt in Ihre Datei einfügen. Mit einem platzierten Foto-PSD können Sie Anpassungsebenen und Bearbeitungen in einer separaten, enthaltenen Fotodatei hinzufügen, anstatt die Quelldatei zu überladen. Die Verwendung intelligenter Objekte als Bibliotheksgrafiken bietet Ihnen eine noch bessere Kombination. Sie können die Vektorobjekte nicht nur einfach bearbeiten, sondern die Bibliotheksgrafik wird für alle Anwendungen aktualisiert.
Die Grafik "Hero Illustration" kann in einer separaten PSD bearbeitet werden, um das Durcheinander der Hauptdatei auf ein Minimum zu reduzieren.
7. Erstellen Sie einen Style Guide und bleiben Sie dabei
Viele Marken haben einen allgemeinen Stilführer, den Sie befolgen sollten, wenn es um Schriftarten, Farben, Fotos, Symbole, Illustrationen usw. geht. Dies ist hilfreich als Ressource, wird Sie aber nicht immer auf Ihrem webseitenspezifischen Styling konsistent halten . Ich habe meine Effizienz erheblich verbessert, indem ich Web-Style-Guides für jede spezifische Site, an der ich arbeite, erstellt habe.
Manchmal haben Marken mehrere Websites mit unterschiedlichen Stilen, also stelle ich sicher, dass ich für jede Website einen habe, damit ich beim Design konsistent bleiben kann. Dies schafft auch eine einfache Drag-and-Drop-Ressource, wenn ich Knöpfe, Symbole, Illustrationen, Fotos, etc. brauche. Dies wird nicht nur effizienter als Designer, aber es wird Ihnen helfen, konsistent in Ihrem Styling auf der ganzen Website zu bleiben.
Welchen Abstand verwende ich zwischen den Abschnitten? Schauen Sie sich den Style Guide an! Was war die primäre Knopffarbe und Polsterung wieder? Nimm es aus dem Style Guide! Dies wird auch anderen Designern helfen, leicht und effizient auf die Website-Designs zu springen. Wenn Sie die Verwendung von CC Libraries mit dem Style Guide zusammenführen, sind Sie dem Spiel sogar noch einen Schritt voraus.
Ich erstelle einen PSD-Style-Guide für all die verschiedenen Marken, an denen ich arbeite, so dass ich Elemente wie Buttons und Icons leicht erfassen kann.
Viele Designer sind versucht, jedes Mal, wenn sie ein neues Problem im Design haben, neue Stile hinzuzufügen. Aus Konsistenzgründen sollten Sie dies vermeiden und sich immer an die Standards halten, die Sie in Ihrem Styleguide festgelegt haben. Stellen Sie beim Hinzufügen neuer Layer und Stile sicher, dass sie auf der gesamten Site angewendet werden.
Je mehr neue Stile erstellt werden, desto komplexer werden zukünftige Designs sein und desto schwieriger wird es für neue Designer, auf Projekte zu springen und Designs konsistent zu halten. In vielen Fällen ist Konsistenz wichtiger als ständige Innovation, wenn es um Benutzerfreundlichkeit geht. Auch wenn es zu Beginn eines Projekts mehr Zeit für die Erstellung des Webstyle-Leitfadens kostet, erhöht sich die Effizienz für alle zukünftigen Seiten.
Eine beste Übung, die ich von Brad Frost gelernt habe, ist ein Schnittstelleninventar Entweder während des Designprozesses oder auf einer bestehenden Site, an der Sie arbeiten werden. Ein Interface-Inventar besteht darin, alle verschiedenen Textstile, Schaltflächenstile usw. über Screenshots zu sammeln und sie zu kompilieren, um Inkonsistenzen zu finden. Sie können dann Ihre Ergebnisse dem Kunden präsentieren, um Updates und Verbesserungen vorzuschlagen.
Da Websites mehrere Designer über den Fall ihrer Existenz berühren, kann es in der Konsistenzabteilung ziemlich haarig werden. Sobald Sie einen einheitlichen Designstil für die Elemente auf der Seite gefunden haben, aktualisieren Sie Ihren Style Guide, damit alle auf dem neuesten Stand sind.
Screenshot des Interface-Inventars von http://bradfrost.com/blog/post/interface-inventory/
8. Förderung der Zusammenarbeit zwischen den Abteilungen
Viele Menschen, die eine Karriere in der Marketing-Produktion anstreben (Designer, Entwickler, Texter usw.), neigen dazu, introvertiert zu sein. Daher ist es schwierig, aus der Komfortzone herauszukommen, wenn es um Zusammenarbeit geht. Es ist auch schwierig, Ihre Expertise-Blase zu verlassen, besonders wenn es einfacher ist, sich auf Menschen in Ihrem Bereich zu beziehen. Auch wenn es manchmal unangenehm oder unangenehm sein kann, die Blase zu verlassen und regelmäßig mit Kollegen aus anderen Abteilungen zusammenzuarbeiten, kann die Qualität Ihrer Entwürfe und Ihre Effizienz erheblich verbessern.
Ein gutes Beispiel dafür ist, wenn Designer und Entwickler an einem Redesign mitarbeiten. Sie sollten sich vorher mit dem Entwickler treffen, um herauszufinden, welches Framework er verwendet, sich über das Grid-System informieren und die Möglichkeiten einschätzen. Wenn die Konstruktionsarbeiten abgeschlossen sind, stellen Sie sicher, dass Sie Ihre Photoshop-Bibliothek freigeben, sodass der Entwickler einfachen Zugriff auf die Farbpalette, die Schriftstile usw. hat. Außerdem ist es hilfreich, den Styleguide im Voraus gemeinsam mit den Komponenten zu teilen entworfen, um ihnen einen guten Vorsprung zu geben.
Die Zusammenarbeit mit anderen Designern in Ihrem Team mithilfe von Bibliotheken hilft Ihnen auch dabei, konsistenter zu bleiben und effizienter zu arbeiten. Wenn Sie dem Art Director oder dem Senior Designer die Verantwortung für Aktualisierungen der Library- und Style-Guides übertragen, können Sie Verwirrung vermeiden und das Branding konsistent halten. Stellen Sie sicher, dass es eine Kommunikationslinie gibt, wenn Aktualisierungen vorgenommen werden, sodass sich alle auf derselben Seite befinden.
Bleib gesund
Webdesign kann manchmal überwältigend und herausfordernd sein. Es muss nicht immer so sein. Indem Sie diesen einfachen Tipps zur Photoshop-Effizienz folgen, können Sie einen Großteil Ihres Stresses lindern. Dies verbessert nicht nur Ihr Wohlbefinden, sondern Manager und Direktoren sowohl auf der geschäftlichen als auch auf der kreativen Seite werden Ihre harte Arbeit wirklich zu schätzen wissen und Sie dafür belohnen. Schließlich ist jeder gut mit konsistenteren, effizienteren und schöneren Designs.