Wechseln Sie zu Skizze. Teil 1

  • Tutorial


Ich habe vor einem Jahr von Sketch erfahren. Ich habe die Demo dann in der 2. Version heruntergeladen. Ehrlich gesagt hat sie mich überhaupt nicht beeindruckt. Einige schienen zu einfach. Ich bin an die ausgeklügelten Software-Oberflächen von Adobe gewöhnt und aus irgendeinem Grund mag ich das Layout der Apple iWork-ähnlichen Bedienfelder (Seiten, Zahlen, Keynote) nicht. Außerdem fand ich es angenehmer, mit der dunklen Oberfläche zu arbeiten, die jetzt in Photoshop CC verfügbar ist. Außerdem war Sketch 2 ziemlich schief, enthielt viele nervige Fehler und beeindruckte im Allgemeinen nicht mit der Geschwindigkeit der Arbeit. Im Allgemeinen habe ich mit der Demo rumgespielt und sicher vergessen. Es stellte sich jedoch heraus, dass es vergeblich war ...



Im Laufe der Zeit fing ich an, immer schmeichelhaftere Kritiken über das Programm zu bekommen (zum Beispiel hier und hier)) Besonders viele von ihnen erschienen im Frühjahr 2014, als Bohemian Coding die dritte Version seines Produkts veröffentlichte. Die Entwickler versicherten, dass sie sich als Designer auf die Herstellung des Produkts konzentrierten, das maximal auf die Bedürfnisse der Designer zugeschnitten ist. Zuallererst - Designer von Interfaces und Sites. Das ist so ähnlich wie bei mir.

Ich habe die Demo der neuen Version nochmal runtergeladen, gestochert, gedreht. Mir gefiel etwas, etwas nicht. Und wieder hatte ich nicht den Eindruck, dass dieses Programm zu mir passt. Er kehrte zu seinem üblichen Photoshop zurück.

Und so geschah es, dass ich ein sehr komplexes und äußerst interessantes Projekt durchführen musste, bei dem es notwendig war, Oberflächenelemente für das iPad mit Retina-Auflösung zu zeichnen. Es gab viele Symbolleisten, Bedienfelder und Popups. All dies sollte mit dem Effekt der opaken Transluzenz wie in iOS7 (transparentes Milchglas) geschehen. In Photoshop ist dies nicht einfach, insbesondere wenn Sie dynamische Objekte benötigen, die beim Verschieben die darunter liegenden Ebenen unscharf machen. Ein solches Verfahren steht jedoch zur Verfügung. Es ist jedoch mit einer Reihe von Nachteilen behaftet. Zunächst müssen Sie ständig neue Smart-Objekte erstellen, wenn sich die Hintergrundstruktur ändert. Zweitens müssen Sie in jedem Bereich eine Kopie des Smart-Objekts mit einer Unschärfe auswählen, um die erforderliche Maske zu erstellen. In der Regel war das Layout dadurch sehr schnell angeschwollen.

Als ich herausfand, dass es kaum in den Arbeitsspeicher passt, verlangsamt es alle Prozesse und benötigt ungefähr 700 Megabyte auf der Festplatte! Ich habe versucht, das Layout in logische Komponenten zu unterteilen und es in mehrere kleinere Teile zu zerlegen. Und trotzdem belegt jede PSD mindestens 100-200 Megabyte. Außerdem mussten zeitweise zwei oder drei dieser Layouts gleichzeitig geöffnet werden, um einige Layer von einem zum anderen zu übertragen. Zur gleichen Zeit wurde Photoshop furchtbar langsamer, was unglaublich nervig war, weil ich weit von der schlauesten Mohnblume entfernt bin. Mein alter Mann ist schon fünf Jahre alt, an Bord gibt es nur einen Dual-Core-Core2Duo und eine einfache Grafikkarte mit 256 MB Videospeicher. Zum Zeitpunkt des Kaufs war er mehr oder weniger mit den zugewiesenen Aufgaben fertig, schließlich war Photoshop Version CS5 und nicht so unersättlich wie das aktuelle CC. Ach

Im Allgemeinen Ärger und Kopfschmerzen.

Und dann erinnerte ich mich an Sketch. Ich habe erfahren, dass es eine Background Blur- Eigenschaft für Ebenen gibt , mit der Sie einfach und ohne Tricks den gewünschten Mattglaseffekt auf lichtdurchlässigen Paneelen erzielen können.

Ich habe die aktuelle Version 3.0.3 heruntergeladen (die übrigens nach den Zusicherungen der Entwickler und zahlreichen Nutzerkritiken die meisten Fehler und Missverständnisse endgültig beseitigt hat). Und er fing an zu versuchen. Weil ich mich entschlossen habe, von Photoshop auf etwas passenderes umzusteigen, obwohl ich 15 Jahre lang dem Adobe-Produkt treu geblieben bin.

So sieht meine Bedienfeld-Layout-Option in Photoshop CC aus (anklickbar):

01b-photoshop-thumb.jpg

Und so sieht das Fenster von gestartetem Sketch aus, mit einer kleinen Feinabstimmung der oberen Symbolleiste an meinen Bedürfnissen: Nun ist es Zeit, das Programm in Arbeit zu versuchen. Zunächst habe ich beschlossen, die Basis, die ich im EPS-Format hatte, in das Layout zu implantieren. Dieses ist eine einfache Zeichentrickfilm-Figur-Vektorillustration.

02b-sketch-small.jpg





Mit Photoshop können Sie EPS als intelligentes Objekt öffnen, das nur in Adobe Illustrator bearbeitet werden kann, indem Sie in Photoshop auf den Namen der Ebene doppelklicken. Diese Option war für mich völlig ungeeignet, da in bestimmten Momenten einige Objekte aus der Abbildung ausgeblendet, an eine andere Stelle verschoben, gedreht und durchscheinend gemacht werden mussten. Daher musste ich die erforderlichen Objekte im Illustrator separat auswählen und sie per Kopieren / Einfügen als intelligente Objekte in Photoshop übertragen, bis ich den richtigen Satz von 20 Ebenen der benötigten Komponenten erhielt. Einerseits war es eine sehr mühsame Aufgabe, und andererseits wuchs das Layout von nur einer Basis im PSD-Format auf unanständige 40 Megabyte, obwohl das ursprüngliche EPS nur 7 Megabyte wog. Hier ist so eine "erstaunliche" Reihe von Produkten aus einer Packung - Photoshop und Illustrator. Seltsam

Es kann sich eine vernünftige Frage stellen, warum ich nicht vollständig im Illustrator arbeite. Na ja, irgendwie hat es bei mir nicht geklappt. Etwas, das ich wirklich nicht an ihm mag, kann ich einfach nicht daran gewöhnen. Außerdem ist er ein Monster, das nicht weniger aufgebläht ist als Photoshop und mit seiner Leistung keineswegs zufrieden ist. Außerdem ist es dort völlig unmöglich, den Mattglaseffekt auf einfache Weise zu gestalten. Mit anderen Worten, ich brauche nur Adobe Illustrator als eine Art Zwischenwerkzeug, und ich persönlich bin nicht als Hauptumgebung für das Design geeignet.

Also habe ich Illustrator als Umschlagplatz benutzt. Tatsache ist, dass Sketch das EPS-Format zwar versteht, es jedoch irgendwie schief importiert und dabei häufig Füllungen und Striche falsch interpretiert. Mit dem SVG-Format (Scalable Vector Graphics) ist es jedoch sehr gut befreundet. Daher wurde in Illustrator das vorhandene EPS in SVG überschrieben und in Sketch geöffnet. Ich muss sagen, dass das Laden des Layouts in Sekundenschnelle verlief und alle Objekte ihre Eigenschaften beibehielten. Ich werde noch mehr sagen - alle Gruppierungen von Vektorformen haben sich als wahr herausgestellt. Die Auswahl des richtigen Objekts und das Ausführen von Aktionen erwiesen sich daher als einfacher und einfacher. Eigentlich was du brauchst. Und die Datei im .sketch-Format war am Ende etwas größer als die ursprüngliche EPS-Datei (7,5 MB). Gegen ungerade 40 Megabyte .psd!

Gleichzeitig habe ich mir die Größen angesehen, die beide Programme auf der Festplatte und im Speicher belegen, und mit einer Stoppuhr die Geschwindigkeit beim Starten, Öffnen und Schreiben eines Dokuments sowie beim Beenden von Programmen gemessen.

Hier sind die Ergebnisse:

03-table.jpg

Wie Sie sehen, verliert Photoshop in jeder Hinsicht kläglich. Darüber hinaus können nicht alle aus dem Illustrator gezeichneten Objekte wie in Sketch vollständig bearbeitet werden.

Die meisten Tastaturkürzel erwiesen sich für beide Programme als gleich, einige mussten sich jedoch an Sketch gewöhnen. Das ist im Allgemeinen kein Problem. Und selbst nach einiger Zeit, als ich aus Gewohnheit wieder zu Photoshop zurückkehrte, versuchte ich mehrmals, skizzenhafte Verknüpfungen zu verwenden. Sie werden alle auf dieser Website beschrieben: sketchshortcuts.com

Im Übrigen wird auch beschrieben, wie Sie Ihre eigenen Verknüpfungen hinzufügen. In Sketch gab es zum Beispiel keine Tastenkombination zum Ein- und Ausblenden von Hilfslinien, daher habe ich die übliche Kombination von Cmd- hinzugefügt.

04-sketchkb.png

Ich glaube, dass ich in Zukunft, wenn ich das Programm verwende, einige bequemere Kombinationen hinzufügen werde. Die verfügbaren sind jedoch vorerst ausreichend.

Der nächste Schritt war die Notwendigkeit, dasselbe durchscheinende Fenster mit einem Mattglaseffekt im Stil von iOS7 zu erstellen. Wie ich oben schrieb, musste ich in Photoshop einen Trick mit einer Kopie des intelligenten Objekts anwenden, das einer Gaußschen Unschärfe (Gaußsche Unschärfe von 20 Pixeln) unter Hinzufügung von Rauschen (Rauschen hinzufügen mit einem Wert von 1%) ausgesetzt war.

So sah das Layout in Photoshop aus. Ich habe zum Beispiel ein einfaches Hintergrundfoto aufgenommen und ein weißes, abgerundetes Rechteck hinzugefügt, das ein Popup mit Milchglas simuliert: Die Größe dieser PSD beträgt 5,5 MB . Das Gleiche habe ich in Sketch mit den integrierten Effekten für Hintergrundunschärfe und Rauschen getan. Folgendes ist passiert: Und die Größe dieser .sketch-Datei beträgt 643 KB. Fast zehnmal weniger! In diesem Fall nur drei Ebenen (in der Tat benötigen Sie für die Basis des Popups nur eine Ebene und nicht drei, wie in Photoshop). Es erübrigt sich zu erwähnen, dass die Argumente für Photoshop, mit denen ich seit 15 Jahren seit Version 3.0 gearbeitet habe, einfach nicht gefunden werden.

05-pspanel.png





06-spanel.png





Dann nahm ich ein größeres Bild auf, bereits unter dem iPad Retina, und begann, durchscheinende Fenster zu erstellen, die mit Symbolen und Text gefüllt wurden. Und es stellte sich heraus, dass meine schwache Grafikkarte einer solchen Belastung nicht standhalten konnte, und wenn ich versuche, all dieses Zeug mit einer Fülle von Blüte zu bewegen, beginnen sehr merkliche Bremsen.

Es stellte sich jedoch heraus, dass dies ein leicht zu lösendes Problem ist. Denn in Sketch gibt es so etwas Erstaunliches wie Linkstile.

Es reicht aus, eines der Objekte auszuwählen, bei denen alle erforderlichen Effekte wie Transparenz, Weichzeichnen, Füllen und Rauschen auftreten, und einen Verknüpfungsstil hinzuzufügen:

07-saddlinkedstyle.png

Wenden Sie diesen Stil dann auf alle erforderlichen Objekte an.

Wenn Sie alle diese Objekte auf dem Bildschirm mischen möchten, können Sie die Unschärfe- und Rauscheffekte vorübergehend entfernen, indem Sie auf die entsprechenden Kontrollkästchen klicken. Diese Effekte werden für alle Objekte mit diesem Stil deaktiviert. Dann erfolgt die Bewegung und Transformation aller Ebenen so schnell wie möglich. Nun, bevor Sie das Bild exportieren, müssen Sie die Effekte nur mit ein paar Klicks einschalten:

08-snoblur.png

Als ich 10 solcher Popups in Photoshop erstellte, stieg die Dateigröße auf 19,1 MB, während die ähnliche .sketch-Datei nur auf 672 KB anstieg !!!

In Sketch fehlen alle Schaltflächen zum Ausrichten von Objekten relativ zueinander, obwohl sich solche Elemente im Menü Anordnen (Ausrichten und Verteilen) befinden. Das hat mich zunächst entmutigt, weil ich solche Schaltflächen in der Symbolleiste von Photoshop verwendet habe. Aber wie sich herausstellte, sind sie völlig unnötig. Immerhin implementiert Sketch intelligente Hilfslinien perfekt, und wenn Sie ein Objekt verschieben, können Sie leicht erkennen, ob es an den Rändern eines anderen Objekts haftet oder sich in der Mitte befindet:

09-salign.png

Während der Experimente habe ich eine Reihe interessanter Funktionen von Sketch entdeckt, die den Workflow erheblich verbessern und beschleunigen.

In Photoshop war es beispielsweise immer ärgerlich, den Text zu „springen“, wenn die Art der Linienausrichtung geändert werden musste. Es war notwendig, die linke Ausrichtung auf den zentrierten Textblock anzuwenden, da der gesamte Text nach rechts verschoben wurde. Darin liegt wahrscheinlich eine gewisse Logik, aber Sie müssen zugeben, dass ich jedes Mal ein solches Verhalten vorhersagen und dann die Position der Ebene korrigieren musste:

10-pstext.png

In Sketch treten keine Sprünge auf. Der Textblock bleibt an Ort und Stelle, während sich nur die gegenseitige Ausrichtung der Linien innerhalb dieses Blocks ändert. Eine Kleinigkeit, aber schön:

11-stext.png

Übrigens ein bisschen mehr über den Text. Entwickler von Websites und Benutzeroberflächen werden erfreut sein, dass Sketch System-Anti-Aliasing verwendet. Sie können das Subpixel-Rendering aktivieren oder deaktivieren, um die maximale Übereinstimmung mit den auf der Website oder im Programm angezeigten Elementen zu erzielen. Und was haben wir in Photoshop? In der CC-Version wurden zusätzlich zu den bereits vorhandenen fünf Glättungsarten (None, Sharp, Crisp, Smooth und Strong) zwei weitere hinzugefügt (Mac und Mac LCD). Keiner von ihnen wiederholt jedoch das Antialiasing, das beispielsweise in Browsern verwendet wird. Das macht diese ganze Reihe von Anti-Aliasing-Techniken fast unbrauchbar (obwohl keines in extrem seltenen Fällen nützlich sein kann).

So sehen die Anti-Aliasing-Typen in Photoshop, Sketch und im Safari-Browser aus:

12-alias.png

Wenn Sie in Photoshop nach dem Erstellen eines Textobjekts etwas anderes in der Symbolleiste auswählen müssen, z. B. ein Werkzeug zum Verschieben von Objekten, und um zum Bearbeiten von Text zurückzukehren, wählen Sie ein Textwerkzeug aus. In Sketch ist dann kein Wechsel zwischen Werkzeugen erforderlich. Wählen Sie die erstellte Textebene aus, doppelklicken Sie und bearbeiten Sie sie. Klicken Sie danach einfach auf ein anderes Objekt oder einen leeren Zeichenflächenbereich.

Es ist sehr praktisch, das Objekt mit einem blauen Strich hervorzuheben, wenn Sie mit der Maus darüber fahren. Der Rahmen um den Namen dieses Objekts in der Ebenenpalette wird ebenfalls hervorgehoben:

13-highlight.png

Bei der Arbeit in Photoshop stieß ich oft auf eine seltsame und unvorhersehbare Größenextrapolation. Beispielsweise müssen Sie ein Dutzend Bilder unterschiedlicher Größe in das Layout einfügen, sie in intelligente Objekte umwandeln und die Höhe all dieser Objekte auf einen vorgegebenen Wert einstellen. Nehmen wir an, sie werden proportional auf 100 Pixel Höhe verkleinert.

Und hier begann oft die Qual. Da jedes Objekt manuell reduziert werden musste, wurde die Genauigkeit der Extrapolation ständig überwacht. In diesem Fall mussten Sie zum oberen Bereich gehen, wo die Standardgrößen in Prozent angegeben wurden, und um den genauen Wert in Pixel einzugeben, mussten Sie "px" hinzufügen. Es war manchmal sehr ärgerlich, wenn Sie das Layout nicht rechtzeitig umstellten und "zch" für welches Photoshop eingaben verflucht, weil er solche einheiten nicht versteht. Außerdem ist das Kettensymbol, das für das proportionale Zoomen verantwortlich ist, wie es der Zufall wollte, standardmäßig immer deaktiviert, und ich musste mich jedes Mal daran erinnern, es einzuschalten. Natürlich kann man sich an solche Qualen gewöhnen, aber ist es notwendig?

In den meisten Fällen hat Photoshop die Skalierung korrekt gemeistert, aber manchmal gab es Fälle, in denen die Höhe entweder 99 oder 101 Pixel betrug. In Wirklichkeit war ein kaum wahrnehmbarer durchscheinender Streifen auf einer der Seiten einfach da.

Wenn Sie in Sketch Objekte skalieren (dies ist besonders bei Rasterobjekten wichtig), nehmen diese ausschließlich ganzzahlige Werte an, wie Sie sie im Inspektorfenster angegeben haben. Und keine "flauschigen" Kanten.

Gleichzeitig sind keine zusätzlichen Zeichen wie „px“ erforderlich, da Sketch ursprünglich für die Arbeit mit Pixeln geschärft wurde. Sie können jedoch auch Prozent eingeben, um das Objekt zu erkennen und zu skalieren. Darüber hinaus können Sie arithmetische Operationen wie 300 * 2 oder 256 + 128 verwenden.

Die Variabilität der Tastenkombination Cmd-D hat sich als sehr nützlich erwiesen. Wenn die Ebene beim Kopieren nicht verschoben wurde, dupliziert diese Verknüpfung einfach die Ebene. Wenn die Ebene beim Kopieren verschoben wurde (bei gedrückter Alt-Taste), dupliziert der Cmd-D-Aufruf das Objekt mit dem entsprechenden Versatz relativ zum Original. So können Sie Kopien im gleichen Abstand schnell streuen.

Es gibt eine andere, merkwürdigere Art, Objekte zu verteilen - ein Gitter von Objekten zu erstellen. Zuerst müssen Sie die gewünschten Objekte auswählen:

14a-grid-selected.png

Dann müssen Sie den Menübefehl Anordnen> Raster

14b-grid-nobox.png

erstellen ... auswählen und die Objekte werden mit den angegebenen Einzügen verteilt:

14c-grid-nobox-result.png

Wenn Sie das Kontrollkästchen "Boxed" aktivieren, werden nicht die linearen Größen der Objekte selbst, sondern die Kästchen derselben Größe berücksichtigt, in denen die ausgewählten Objekte platziert sind.

14d-grid-box.png

In diesem Fall berechnet das Programm automatisch die Größe des vorgeschlagenen Kästchens für die größte Größe eines der Objekte und zentriert die Objekte horizontal innerhalb des Kästchens und vertikal. Dies ist sehr praktisch, um ungleiche Objekte zu verteilen:

14e-grid-box-result.png

Es gibt übrigens eine merkwürdige Option für Dreiecke. Wenn Sie ein gezeichnetes Dreieck so bearbeitet haben, dass es unterschiedliche Winkel und Seiten aufweist, können Sie es einfach in ein gleichschenkliges Dreieck umwandeln, indem Sie im Inspektor auf das Kontrollkästchen Gleichseitig klicken:

15-equilateral.png

Natürlich gibt es auch in der neuesten Version kleine nervige Fehler. Zum Beispiel hinterlässt die Bearbeitung von Objekten manchmal Bildschirmartefakte. Die Entwickler arbeiten jedoch aktiv daran, dieses Problem zu beheben. In der Beta-Version 3.0.4 habe ich solche Nuancen nicht mehr beobachtet. Offensichtlich wird das Programm von Version zu Version besser und stabiler. Erfreulich ist auch, dass die Entwickler den Wünschen der Designer nachkommen. Ich bot auch ein paar Ideen an und sie antworteten mir am nächsten Tag, einschließlich meiner Wünsche auf der Wunschliste für zukünftige Versionen.

Das ist alles für jetzt. In den folgenden Abschnitten werde ich über meine weiteren Entdeckungen im wunderbaren Programm Sketch berichten.

Erfolgreiche fotoshopinga sketchinga!






Jetzt auch beliebt: