Warum sollten Sie von Photoshop zu Sketch wechseln?
In den letzten ein oder zwei Jahren hat die Sketch-App von Bohemian Coding im Internet als „bessere“ Alternative zu Photoshop an Dynamik gewonnen. Das meiste dieses großen Lobes kam von der Web- und Interface-Design-Community. Wenn Sie so etwas wie ich sind, sind Sie immer auf der Suche nach neuen Tools und besseren Alternativen zu einem vorhandenen Workflow. Zunächst war ich jedoch vorsichtig, meinen 20-jährigen Photoshop-Stab zu übergeben.
Zum größten Teil macht Photoshop den Trick und macht es gut genug. 'Warum wechseln?' Ich dachte. Photoshop-Verknüpfungen sind meine zweite Sprache. Das Ausführen eines bestimmten Effekts oder einer bestimmten Aufgabe erforderte nicht mehr viel Gehirnleistung, da ich wahrscheinlich schon mehrmals etwas Ähnliches getan hatte. Dieser alte Hund dachte, dass Sketch für die coolen Kinder der neuen Schule war.
Als das Geschwätz um Sketch zunahm, bekam meine Neugier endlich das Beste von mir. Ich musste selbst sehen, warum Sketch unter meinen Kollegen Feuer gefangen hatte. Als ich ein neues Projekt beginnen wollte, entschied ich, dass der Moment richtig war. Wenn ich es tun wollte, wollte ich eine Woche lang alles geben.
Ich schloss Photoshop, lud eine 30-Tage-Testversion von Sketch herunter und tauchte ohne Schwimmhilfe in die Tiefe ein, in der Hoffnung, meinen Kopf lange genug über Wasser zu halten, um herauszufinden, worum es bei dem Hype ging. Wenn Sie Sketch erkunden möchten, würde ich diesen Ansatz empfehlen.
Innerhalb von zwei bis drei Tagen war ich überzeugt. Ich war wieder einmal begeistert davon, eine Software zu öffnen, und profitierte sofort von den Vorteilen. Ich fühlte mich schnell wohl beim Erlernen der neuen Benutzeroberfläche. Die Überlappung mit Photoshop war gerade genug. Ich war verliebt. 'Ja!' Ich dachte.
In diesem Artikel werde ich einige der Hauptfunktionen von Sketch behandeln und sie mit ihrem Photoshop-Äquivalent vergleichen. Wenn Sie auf dem Zaun sind, nach einer besseren (und viel billigeren) Alternative zu Photoshop suchen oder neugierig auf die zunehmende Beliebtheit von Photoshop sind, lesen Sie weiter.
Hallo Freund
Sketch ist exklusiv für Mac OS X und sieht im FAQ-Bereich von Bohemian Coding nicht einmal in Betracht, Windows und Linux zu unterstützen. Dies ist gut für uns langjährige Mac-Benutzer. Wenn Sie mit den Produktivitäts-Apps von OS X (Pages, Keynote, Numbers) überhaupt vertraut sind oder ältere, nicht mehr verfügbare Software von Apple verwendet haben (ich sehe Sie iWeb), werden Sie sofort das Gefühl haben, darauf gestoßen zu sein Ein alter Freund, der einen reiferen Bart hat.
Ähnlich wie in Keynote, als ich damit anfing, war das erste, was ich in Sketch tat, das Anpassen der oberen Symbolleiste. Sie tun dies, indem Sie einfach mit der rechten Maustaste darauf klicken und so viele Gegenstände wie möglich darauf werfen.
Tastatürkürzel
Der Rat, den ich von zahlreichen Freunden und Twitter-Leuten erhielt, war, die Verknüpfungen so schnell wie möglich zu lernen. Die visuelle Anleitung der Tools entlang der Symbolleiste hat mir jedoch geholfen, die Funktionen von Sketch und die Handhabung verschiedener Aufgaben besser zu verstehen. Viele der Werkzeuge sind aus Photoshop nur halb vertraut, befinden sich jedoch jetzt an verschiedenen Stellen. In Sketch's Fall ein einheitlicherer Bereich.
Um meinen Übergang von Photoshop zu erleichtern, habe ich einige häufig verwendete Tastaturkürzel hinzugefügt, indem ich in OS X benutzerdefinierte Tastaturkürzel erstellt habe. Wenn Sie mit diesem Prozess nicht vertraut sind, machen Sie sich bereit, sich zu verlieben. Es ist ganz einfach, dies direkt in den Systemeinstellungen Ihres Mac zu tun. Außerdem finden Sie hier eine praktische Liste von Skizzenverknüpfungen, mit denen Sie sich vertraut machen können: scaleshortcuts.com .
Ein Fokus auf Fokus
Versteh mich nicht falsch: Photoshop erledigt die Website und das UI-Modell und macht es gut. Es macht auch eine Menge anderer Sachen gut. Es soll das Werkzeug für alle sein. Und weisst du was? Das ist ok. Ein Problem ist jedoch, dass es als App für das Web- und Benutzeroberflächendesign keinen Fokus gibt.
Der Fokus von Sketch liegt speziell auf dem Design von Websites, Schnittstellen und Symbolen. Im Vergleich zu Photoshop sind die Menüs von Sketch reduziert. Ein schöner Hauch frischer Luft. Kein Kämpfen mehr durch die Unordnung, die nicht unbedingt ins Web übersetzt werden muss. Die Werkzeuge und Werte von Sketch liegen in dem, was sich leicht in CSS und Browser im Allgemeinen übersetzen lässt.
Zum Beispiel: Erstellen und Anpassen der Layouteinstellungen (d. H. Erstellen eines Rasters). In Sketch können Sie mit vordefinierten Feldern die Gesamtbreite, Rinnen, Spalten und Zeilen Ihres Rasters anpassen. Als jemand, der immer mit reaktionsschnellen Gittern arbeitet, bin ich ständig in diesen Einstellungen, bevor ich ein neues Projekt starte.
Zeichenflächenvoreinstellungen
Eine weitere Funktion, die Sketch den Schwerpunkt auf das Web und die Benutzeroberfläche legt, sind die voreingestellten Vorlagen und Zeichenflächenvoreinstellungen. Und dafür bin ich dankbar.
Angenommen, Sie starten ein neues iOS-App-Projekt. Sie können entweder ein neues Projekt erstellen, wie Sie es in Photoshop gewohnt sind, oder die Vorlage 'iOS UI Design' auswählen, die Sketch unter 'Datei'> 'Neu aus Vorlage' bereitstellt. Der Vorteil hierbei ist, dass Sketch Ihnen zunächst ein iOS-UI-Kit zur Verfügung stellt, mit dem Sie iPhone-Apps schnell nachahmen und beispielsweise die native iOS-Tastatur in Ihr Modell ziehen können.
Kürzlich habe ich eine Kartenansicht für eine Buchungs-App verspottet, an der ich gearbeitet habe. Ich musste keine separate Datei öffnen oder nach einem iOS-Kartenmodell suchen. Einfach auf meine Elements-Seite umgeschaltet und kopiert und eingefügt.
Perfekt dimensioniert
Genau wie in Photoshop können Sie mit Sketch's Inspector genaue Größen und Positionen auf einer Zeichenfläche definieren. Sketch hat jedoch ein kleines Geheimnis für seinen Größen- und Positionsinspektor. Es versteht Mathe! Nicht nur Addition, Subtraktion, Multiplikation und Division, sondern auch Prozentsätze.
Möchten Sie eine Schaltfläche um 20 Pixel nach links verschieben? Fügen Sie einfach '-20' zum Feld hinzu. Möchten Sie, dass ein Bild die Hälfte der gesamten Zeichenfläche ausfüllt? Geben Sie einfach '50% 'in das Breitenfeld ein. Brillant!
Ein Projekt, eine Datei
Mit Photoshop sah meine Projekt- und Dateistruktur ungefähr so aus:
BigTimeClient-Ordner
- BigTimeClient_landing-page.psd
- BigTimeClient_about-page.psd
- BigTimeClient_contact-page.psd
Sketch geht etwas anders vor. Eine einzelne Skizzendatei enthält alle Seiten und Zeichenflächen in einem Dokument. Zuerst befürchtete ich, dass dies die Leistung meines Mac beeinträchtigen würde. Seitdem habe ich iOS-Apps mit ungefähr 30 Bildschirmen entwickelt und keine wesentlichen Leistungsprobleme festgestellt.
Der Hauptvorteil dieses Ansatzes besteht darin, dass Sie nebeneinander auf alle Ihre Bildschirme zugreifen und diese anzeigen können, sodass es viel einfacher ist, Änderungen vorzunehmen und Dinge zu vergleichen. Wenn Sie verschiedene reaktionsschnelle Haltepunkte verspotten, werden Sie es lieben.
Vor kurzem hat Photoshop seine Version mehrerer Zeichenflächen eingeführt. In Sketch ist es jedoch möglich, alle Zeichenflächen in Seiten innerhalb eines Dokuments zu organisieren, wodurch diese Funktion wesentlich leistungsfähiger wird. Ansonsten funktionieren die mehreren Zeichenflächen in beiden Anwendungen sehr ähnlich.
Die Ebenenpalette in Sketch bot beim ersten Öffnen der App ein gewisses Maß an Komfort, da sie Photoshop auf verschiedene Weise nachahmt. Ähnlich wie in Photoshop können Sie hier in Ihrem Projekt Gruppen (Ordner) und Elemente anzeigen, umbenennen und suchen.
Eine Datei passt für alle
In Photoshop würde ich normalerweise drei (oder mehr) Datei-Assets erstellen. Eine für @ 1x und eine für @ 2x und eine für @ 3x. Das separate Speichern war mühsam. Wenn Sie nicht zu 100 Prozent mit Vektorobjekten und -elementen gearbeitet haben, wurde dies schmerzhaft. Sketch hat nicht einmal ein gerastertes Werkzeug oder Element in seiner App. Nun, es sei denn, Sie ziehen einen hinein.
Beim Erstellen eines iOS-App-Designprojekts in Photoshop habe ich auf meinem Bildschirm eine viel größere Größe entworfen und über eine Spiegelungs-App, Skala Preview, auf meinem iPhone getestet.
Mit Sketch hat sich mein Workflow bei der Arbeit mit Retina-Geräten und Assets dramatisch geändert und verbessert. Ich entwerfe jetzt mit der Standardgerätegröße. Da in Sketch standardmäßig alles ein Vektor ist, muss ich mir keine Sorgen machen, dass meine Zeichenfläche auf meinem Desktop ungewöhnlich groß wird, damit ich eine Vorschau der Arbeit über das Spiegeln anzeigen kann (jetzt über Sketch Mirror). Das Arbeiten vom Desktop zum Handy fühlt sich jetzt natürlicher an.
Darüber hinaus ist das Speichern verschiedener Größen von Elementen so einfach wie das Klicken auf eine Exportschaltfläche, das Hinzufügen von so vielen Größen und Dateiformaten, wie Sie möchten, und ... nun, das war's. Sie können sogar Ebenen und Gruppen per Drag & Drop auf Ihren Desktop ziehen, um sie zu speichern - obwohl Sie mit der Schaltfläche Exportieren mehr Kontrolle haben. Dies ist bei weitem eine meiner Lieblingsfunktionen von Sketch und eine der größten Zeitersparnisse.
Von klug zu symbolisch
Die Smart Objects und Linked Smart Objects von Photoshop sind äußerst praktisch und leistungsstark. Ich habe sie oft verwendet, insbesondere beim Entwerfen von Apps und Schnittstellen, bei denen viele sich wiederholende Elemente verwendet wurden.
Wenn Sie nicht vertraut sind, finden Sie hier einen kurzen Anwendungsfall. Sie entwerfen eine mobile Haltepunktnavigation und befinden sich bereits 15 Bildschirme tief im Workflow, wenn Sie feststellen, dass sich etwas ändern muss. Wenn Sie nicht mit verknüpften intelligenten Objekten arbeiten würden, müssten Sie jede Datei manuell öffnen und Ihre Änderungen an jeder vornehmen. Mit verknüpften intelligenten Objekten können Sie ein Element ändern, und alle seine Gegenstücke ändern sich automatisch. Riesige Zeitersparnis!
Kreative Cloud-Bibliotheken
Eine weitere meiner Lieblingsfunktionen in Photoshop, die ebenfalls relativ neu im Programm ist, sind Creative Cloud Libraries. Ziehen Sie häufig verwendete Assets einfach in das eigene Bibliotheksfenster, um einen einfachen Zugriff zu erhalten, wenn Sie sie per Drag & Drop auf andere Bereiche des Projekts ziehen möchten. Wenn Sie mehr über CC-Bibliotheken erfahren möchten, gehen Sie zu Hier .
Symbole
Was haben verknüpfte intelligente Objekte und Bibliotheken in Photoshop mit Sketch zu tun? Nun, Sketch hat dieses kleine, große Ding namens Symbole. Ich betrachte es als das Liebeskind von Linked Smart Objects and Libraries, mit einem Schuss scharfer Sauce für einen zusätzlichen Kick.
Mit Symbolen können Sie Elemente oder Gruppen über Seiten und Zeichenflächen hinweg wiederverwenden. Nehmen Sie eine Änderung am Symbol vor und es ändert sich überall, heißer Diggity-Hund! Es werden sogar räumliche Ausrichtungen gespeichert, wenn Sie beispielsweise Assets und / oder Text in einer Liste anpassen. Sogar die Wörter des Textes ändern sich.
Und hier ist der zusätzliche Schuss scharfer Soße, von dem ich gesprochen habe: 'Textwert vom Symbol ausschließen'. Nehmen Sie zum Beispiel einen Schaltflächenstil, der sich wiederholt, aber einen anderen Text enthält. Möchten Sie den Schaltflächenstil auf der ganzen Linie ändern, aber den Text beibehalten? Kein Problem. Keine zusätzliche Option 'Alle Instanzen ändern'. Magie!
Neben einer Gruppe von Elementen, die automatisch aktualisiert werden, können Sie auch Stile für Ebenen und Text definieren. Definieren Sie beispielsweise H1-Tags in GT Walsheim - Größe 48 und mit einem Schatten, und alle Instanzen werden auf der ganzen Linie aktualisiert. Wieder wie Magie!
Dinge gestalten
Beim Entwerfen von Benutzeroberflächen, Apps und Websites in Photoshop habe ich normalerweise Formen verwendet, um eine Vielzahl von Elementen zu erstellen. Ähnliches gilt für Sketch. In Shapes verbringe ich die meiste Zeit damit, Schaltflächen aus Rechtecken zu erstellen, große Rechtecke mit Bildfüllungen zu füllen oder zu maskieren, Trennlinien zu zeichnen usw.
Photoshop bietet Ihnen verschiedene Möglichkeiten, um Vektor- und Nichtvektorformen und -pfade zu erstellen. Sketch basiert jedoch auf Skalierbarkeit. Alles ist vektorbasiert und Formen können einfach im laufenden Betrieb angepasst werden.
Sie können beispielsweise zurückgehen und einer rechteckigen Schaltfläche einen Eckradius hinzufügen, indem Sie einfach die Option 'Radius' auswählen. Sie können auch jede Form mit einem Foto füllen und die Größe einer Form zerstörungsfrei ändern. Dies ist ideal, wenn Sie testen möchten, wie reaktionsschnelle Bilder skaliert und in der Größe geändert werden.
Wenn Sie ein Bild innerhalb einer Form maskieren, sollten Sie die Option 'Als Maske verwenden' nicht verwenden. Stattdessen bietet 'Mit Bild füllen' die meiste Zeit viel mehr Flexibilität.
Es gibt auch Gemeinsamkeiten zwischen Formkombinationen in Photoshop und Sketch. Obwohl ich in Sketch (oder einer anderen Software) keine benutzerdefinierten Symbole persönlich erstelle, benötige ich hier und da einzigartige Formen. Ich kann mir jedoch vorstellen, dass Icon-Designer diese Funktion häufig verwenden.
Jenseits der Skizze
Hier habe ich gerade einige der Funktionen, Unterschiede und Vertrautheiten beim Übergang von Photoshop angesprochen. Sketch ist ein großer Sprung in Richtung eines besseren und genaueren Workflows für das Entwerfen von Benutzeroberflächen und Websites. Dadurch ist jedoch keine 'Photo Shop' -Anwendung wie Photoshop oder Affinity Designer erforderlich. Die Stärke von Sketch liegt in seinem Fokus als App für das Web- und Benutzeroberflächendesign. Nicht mehr und nicht weniger.
Die Lernkurve von Photoshop zu Sketch war schnell genug. Ich brauchte dreieinhalb Tage, um mich zu 90 Prozent mit der App vertraut zu machen, und es dauerte drei Wochen, bis ich das Gefühl hatte, die Dinge zu 99 Prozent zu verstehen. Sie können mehr über meine Erfahrungen auf meiner Website lesen, wo ich meine Reise live gebloggt habe .
Die Benutzerbasis von Sketch wächst schnell. Die Community der Plugins ist beeindruckend und erweitert effektiv die Fähigkeiten von Sketch. Wenn Sie nach einem neuen Tool suchen und dies zu einem äußerst günstigen Preis, ist Sketch eine großartige Option. Meiner Meinung nach ist es im Moment die beste Wahl für die UI-Arbeit. Ich bin gespannt auf die Zukunft.
Wörter :: Brian Hoff
Brian Hoff ist der Gründer und Creative Director von Brian Hoff Design, einer in Philadelphia ansässigen digitalen Boutique-Agentur mit Schwerpunkt auf Web- und mobilen Plattformen und Produkten. Dieser Artikel wurde ursprünglich in Ausgabe 273 von veröffentlicht Netzmagazin .
Mochte dies? Lese das!
- So starten Sie ein Blog
- 15 Top Sketch Plugins
- Frei Photoshop-Pinsel Jeder Kreative muss haben
