WebZap ist ein hervorragendes Photoshop-Plugin, mit dem Designer High-Fidelity-Webdesign-Modelle schneller erstellen können, als Sie jemals für möglich gehalten hätten. Durch die Kombination einfacher Ein-Klick-Aktionen mit robusten Anpassungsoptionen wird der gesamte Layout-Prozess nicht nur schmerzfrei, sondern macht sogar Spaß.
Folgen Sie uns, während wir uns ansehen, was WebZap macht, und prüfen Sie, ob es funktioniert. Ich verspreche, es ist das coolste Photoshop-Plugin, das Sie für Webdesigner seit GuideGuide gesehen haben.
Was ist WebZap?
Wenn Sie WebZap herunterladen, erhalten Sie ein Adobe-Erweiterungspaket, das Sie zur Installation einfach doppelklicken (nur CS5 oder höher). Nachdem Sie den kurzen Installationsvorgang im Adobe Extension Manager durchlaufen haben, sollten Sie Photoshop aufbrechen und mit fortfahren Fenster> Erweiterungen> WebZap.
Daraufhin wird ein neues Photoshop-Bedienfeld angezeigt, das wie folgt aussieht. Dieses freundliche und attraktive Panel enthält alle Funktionen von WebZap.
Hier und hier sieht es einfach aus ist Einfach aus Sicht der Benutzerfreundlichkeit (für fast alles ist nur ein Klick erforderlich), aber es gibt eine Menge verborgener Kraft und Komplexität, die dazu führen, dass die Erweiterung ihren Preis verdient. Sehen wir uns einmal an, wie alles mit einem Beispielworkflow funktioniert.
Layout
Der Kern des WebZap-Panels besteht darin, dass es in vier Hauptregisterkarten unterteilt ist: Layout, Benutzeroberfläche, Stil und Vorschau. Diese werden durch die großen Symbole oben dargestellt.
Wir gehen jeden Schritt schnell durch, um zu sehen, wie sie funktionieren. Beginnen wir mit dem Layout. Als Erstes müssen wir entscheiden, ob unsere Navigation horizontal am oberen Rand der Seite zentriert oder auf der linken Seite der Seite ausgeführt werden soll. Für unser Beispielprojekt wählen wir die zentrierte Option.
Diese Wahl betrifft fast alles danach. Alle Layout-Optionen entsprechen automatisch dem Format, auf das Sie sich verlassen. Ich bin wirklich überrascht, wie vielseitig WebZap ist. Es scheint, dass Sie immer eine Entscheidung treffen, die sich auf andere Optionen auswirkt, und es läuft einfach mit den Schlägen zusammen, ohne dass Sie dabei Abhören oder ungewöhnliche, unerwartete Ergebnisse erzielen.
Navigation
Nachdem wir ein zentriertes Layout ausgewählt haben, gehen wir weiter und wählen aus den vierzehn integrierten Navigationsoptionen aus. Alles was Sie tun müssen, um eins zu bauen, ist ein Klick darauf. So einfach ist das!
Das Klicken auf eine Navigationsoption ist im Wesentlichen wie das Ausführen einer Photoshop-Aktion. Sie lehnen sich zurück und trinken einen Schluck Kaffee, da Photoshop automatisch das vollständige Navigationsmenü aufbaut (dies dauert nur wenige Sekunden). Wenn es fertig ist, sollten Sie so etwas haben:
Beachten Sie, dass dies kein flaches Kunstwerk ist, das WebZap auf Sie wirft. Es baut tatsächlich eine vollständig geschichtete und leicht anpassbare PSD auf.
Interessanterweise? Navigation? ist hier ein bisschen irreführend. Was Sie wirklich bekommen, ist der Grundrahmen für die gesamte Seite. Dies beinhaltet sowohl die Navigation oben als auch eine Fußzeile unten. Soweit ich das beurteilen kann, ist die Fußzeile bei jeder der vierzehn Layoutoptionen identisch.
Wie Sie sehen, habe ich mich für eine nette, minimale Option mit einem Platzhalterlogo, einem Suchfeld und einigen Navigationselementen entschieden. Diese Navigationselemente sind Live-Text und können leicht an Ihre Bedürfnisse angepasst werden.
Main
Nachdem Sie Ihr Navigationslayout ausgewählt haben, können Sie ein "Feature", eine "Falte" oder beides auswählen. Feature ist im Grunde eine Art großer Bildschieber mit einer Anordnung von Text und / oder Miniaturansicht.
Noch einmal, ein Klick später und mein Layout kommt gleich. Denken Sie daran, dass ich bis jetzt wirklich nur drei oder vier Mausklicks ausgeführt habe. Alles andere wurde vollständig automatisiert.
Falten
Von hier aus schäumen, spülen und wiederholen. Der letzte Abschnitt unseres Layouts heißt "Fold". was bedeutet, dass es wahrscheinlich unter der hypothetischen Falte (Bildlaufpunkt) liegt. Hier haben wir zwei verschiedene Registerkarten mit Optionen, von denen eine die gesamte Breite der Seite einnimmt, während die andere die Hälfte der Seite einnimmt.
Bevor Sie es wissen, haben Sie selbst ein ganzes Seitenlayout! Sie hatten viele Mix- und Match-Optionen zur Auswahl, so dass Sie diesen Prozess möglicherweise noch fünfzig Mal verfolgen und jedes Mal einzigartige Ergebnisse erzielen können.
UI
Inzwischen haben Sie die Idee, wie der Arbeitsablauf abläuft. Lassen Sie uns nun einige weitere großartige Funktionen durchgehen. Die nächste große Registerkarte mit Funktionen ist die Registerkarte der Benutzeroberfläche. Hier finden Sie verschiedene Schaltflächen, Formularelemente und Schieberegler.
Eine Sache, die ich hier wirklich mag, ist die Möglichkeit, die Farbe Ihrer Schaltfläche zu wählen, wenn Sie sie erstellen. Dies kann später viel Anpassungszeit sparen.
Stil
Auf der Registerkarte Stil können Sie einige der automatisch für Sie getroffenen Entwurfsentscheidungen anpassen. Es gibt drei Bereiche: Rahmen, Teiler und Text. Jeder wird im Bild unten erklärt.
Folgendes passiert, wenn ich einen Frame auf das Layout, das ich bisher erstellt habe, auswerfen kann. Beachten Sie, dass ich jede gewünschte Farbe auswählen und sogar mit dem kleinen Farbrad auf der rechten Seite mehrmals ändern kann.
Die Textersetzungsoptionen sind wirklich sehr robust. Sie können die Überschriften (h1, h2, h3 usw.), den Absatztext und die Links anpassen. Sie wählen einfach das zu ändernde Element aus, wählen eine Farbe aus und verwenden das Menü zum Ersetzen von Schriftarten.
Vorschau
Der letzte Hauptreiter ist "Vorschau". Dadurch wird Ihre Webseite automatisch in ein schickes Modell umgewandelt, das sich entweder in einem Browserfenster oder auf dem Rahmen eines mobilen Geräts befindet.
Einige davon mögen ein wenig kniffelig wirken, aber sie sind wirklich nett und bieten Ihnen eine großartige Möglichkeit, Ihre Ideen in der letzten Minute ohne Anstrengung zu präsentieren.
Mini-Toolset
Der letzte Teil der Tools, die wir diskutieren werden, ist das "Mini-Toolset". die sich oben rechts im WebZap-Bedienfeld befindet. Es enthält vier Tasten:
Die ersten beiden Tasten hier sind ziemlich selbsterklärend. Beim ersten wird ein neues Dokument erstellt, sodass Sie eine neue Seite erstellen können. Beim zweiten werden Hilfslinien erstellt, die auf dem 960-Rastersystemlayout basieren. Die dritte Taste ist äußerst praktisch. Es erfasst die von Ihnen ausgewählte Ebenengruppe, schneidet sie ab und fügt sie in ein neues Dokument ein. Dadurch können Sie Ihre Bilder ganz einfach aufteilen und speichern. Selbst als eigenständiges Plugin wäre diese Funktion sehr nützlich.
Schließlich erzeugt die vierte Schaltfläche Platzhalterabsätze, die mit Lorem ipsum gefüllt sind. Wie bei anderen Layoutelementen können Sie aus verschiedenen Optionen wählen.
Wie ist das?
Von Web-Apps und Entwicklungs-Frameworks bis hin zu Keynote- und Powerpoint-Vorlagen gibt es eine Vielzahl von Produkten auf dem Markt, die Ihnen dabei helfen, schnell Entwurfsmodelle für Webseiten zu erstellen. WebZap ist der einzige, den ich je benutzt habe, der mich tatsächlich zum Lächeln brachte. Es ist so unglaublich einfach und doch so mächtig, dass Sie nicht umhin können, sich von seinem Potenzial beeindrucken zu lassen. Ich finde es toll, dass ich mit so wenig Aufwand so schöne Modelle bauen kann.
Werden alle meine Websites gleich aussehen?
Auf einen Blick denken Sie vielleicht, dass der Nutzen von WebZap begrenzt ist. Wenn Sie dies bei Ihren nächsten zehn Projekten anwenden würden, würde Ihre Arbeit nicht gleich aussehen?
Auf diesen Protest lautet meine Antwort: "Nur wenn Sie faul sind." Wenn es sich um eine Web-App handelt, sind Sie in der Tat in die von Ihnen bereitgestellten Layouts, Stile usw. eingebunden. Denken Sie jedoch daran, dass dies eine Photoshop Plugin. Das bedeutet, dass Sie mit der von WebZap generierten Ausgabe absolut alles tun können, was Sie möchten.
Stellen Sie sich WebZap als Ausgangspunkt vor, mit dem Sie zunächst einige grobe Layoutideen erstellen und dann eine starke Struktur bereitstellen, die Sie für ein einzigartiges Design hinzufügen und anpassen können.
Auf diese Weise ähnelt es einer Photoshop-Version von Twitter Bootstrap, die täglich von Tausenden von Designern verwendet wird. Mit Bootstrap können Designer mithilfe der Standardstile eine großartig aussehende Website erstellen. Sie können jedoch ohne großen Aufwand die Form verlassen und eigene Designs erstellen, während Sie gleichzeitig das nützliche Toolset nutzen. Die gleiche Logik gilt für WebZap.
Funktionen, die ich gerne sehen würde
Wie Sie sehen, bin ich ziemlich aufgeregt über dieses Tool und glaube wirklich, dass es sich als eines der besten Photoshop-Plugins für Webdesign auszeichnet, das ich je verwendet habe. Wenn Sie es richtig einsetzen, kann es Ihren Workflow erheblich beschleunigen, ohne Sie in ein zu strenges System einzufügen.
Davon abgesehen, gibt es einige Funktionen, die ich in Zukunft gerne hinzufügen würde. Hier sind ein paar aus meinem Kopf.
Fußzeilenlayoutoptionen
Im Moment wird die Fußzeile wirklich nachträglich in die Navigation eingefügt. Es verdient definitiv ein eigenes Modul, mit dem Sie wie bei den anderen Layoutelementen aus verschiedenen Layouts auswählen können.
Tooltips
Wenn Sie die Dokumentation nicht gründlich durchgelesen haben (was großartig ist), können Sie nicht wirklich genau wissen, was eine Schaltfläche bewirkt, wenn Sie sie nicht drücken. Zugegebenermaßen sind Aktionen leicht rückgängig zu machen, aber wenn es möglich ist, wären Tooltips im Hover hilfreich, um zu verstehen, was gerade passiert. Dies wäre besonders hilfreich im Abschnitt Mini-Toolset.
Kundenspezifische Arrangements & Styles
In WebZap sind bereits viele Anpassungsoptionen integriert, aber ich möchte natürlich noch mehr. Je vielseitiger dieses Werkzeug wird (während es an seiner Benutzerfreundlichkeit festgehalten wird), desto mehr werden Designer es verwenden. Ich weiß, es ist ein großer Auftrag, aber ich würde gerne meine eigenen Layouts, Schaltflächenfarben usw. speichern können.
Holen Sie es!
Wenn Sie Ihre Tage damit verbringen, Webdesign-Layouts in Photoshop zu erstellen, müssen Sie dieses Werkzeug unbedingt ausprobieren. Es kombiniert die Benutzerfreundlichkeit, die Sie von Rapidweaver erhalten, und die weitreichenden Möglichkeiten, mit Photoshop zu arbeiten. Hut ab vor Norman Sheeran und UI Parade für die Erstellung solch eines großartigen Tools.
Besuchen Sie die WebZap-Website, um einige Videos der Erweiterung in Aktion zu sehen. Angesichts der Zeit, die es Ihnen erspart, denke ich, dass es die 15 Dollar wert ist.