Wie verwende ich die Symbolvorlage für die Sketch iOS-App?

Ich möchte einige externe Grafiken in eine Icon-Vorlage für eine Sketch-iOS-App integrieren, die in Sketch 42 (36781) integriert ist. Ich kann anscheinend keine Informationen zur richtigen Verwendung der Vorlage finden. Ich habe die Videos, Dokumente, YouTube usw. überprüft. Vielen Dank im Voraus für einen Hinweis oder Tipps, wie ich schnell loslegen kann. Ich habe mir sogar das design+code E-Book (smh) gekauft.

Ich habe ähnliche Probleme und versuche herauszufinden, wie ich die Vorlagen effektiv verwenden kann. Eine Sache, die mich wirklich abschreckt, ist, dass in der Vorlage jedes Symbol zwei Ebenen zu haben scheint, die scheinbar redundant sind – vor allem ein Hintergrund mit einer Füllung und die Form selbst mit genau derselben Füllung. Was gibt?

Antworten (1)

Versionsaktualisierungen

Abhängig von der Version von Sketch, die Sie verwenden; Sie sollten sich verschiedene Versionen des Plugins ansehen. Hier ist diese Liste ( https://github.com/tadija/AEIconizer/releases ). Um von einer älteren Version zu aktualisieren, müssen Sie die alte Plugin-Datei von ihrem Standardspeicherort verschieben, die gewünschte Version aus der obigen Liste herunterladen und auf die .plugin-Datei doppelklicken, um die Funktionalität wiederherzustellen.

Alternative Lösung

Ich habe eine Lösung gefunden, die für mich einfacher zu verwenden war als die standardmäßige iOS-App-Vorlage, die in Sketch 42 angeboten wird.

  1. Sie müssen das AEIconizer -Plugin herunterladen und entpacken
  2. Doppelklicken Sie nach dem Entpacken auf die Datei AEIconizer.sketchplugin , um sie in Sketch zu installieren
  3. Geben Sie den Buchstaben 'A' ein, um eine quadratische Zeichenfläche einzufügen (ich habe eine aus der Mac-Vorlage 1024 x 1024 ausgewählt) ~ Sie können auch das Einfügemenü verwenden (wählen Sie Zeichenfläche).
  4. Platzieren Sie Ihre Grafik auf der Zeichenfläche ~ Ich habe meine Grafik geöffnet und einfach auf die leere Zeichenfläche kopiert
  5. Ändern Sie die Größe, Position und Farbe des Bildmaterials
  6. Wählen Sie im Plugin-Menü den AEIconizer ausSpeisekarte
  7. Durch Klicken auf das Plugin werden alle Größen auf verschiedenen Zeichenflächen generiert
  8. Klicken Sie unten rechts unten im Inspektor auf , um die Dateien zu exportieren (es werden alle drei PNG-Größen exportiert).

Vorbehalte

  1. Das 83,5@2x.png-Symbol ist 168 x 168 statt 167 x 167, wenn das aktuelle Plug-in verwendet wird (ich habe meines repariert, indem ich die Größe der Leinwand in Fireworks geändert habe). ~ Unsicher, wie ich es in Sketch beheben soll, da es erst nach dem Export angezeigt wird.

  2. Stellen Sie sicher, dass Sie Ihre Zeichenfläche auswählen, bevor Sie das Plugin ausführen, und geben Sie dem Hintergrund eine Farbe, da er sonst als transparent exportiert wird. Die Option finden Sie im Inspektor, nachdem Sie die Zeichenfläche in quadratischer Größe ausgewählt haben:

    Hintergrund

  3. Wenn Sie den obigen Schritt verpasst haben, speichern Sie einfach Ihre Arbeit, löschen Sie die doppelten Zeichenflächen (nicht das Original) und reparieren Sie den Hintergrund ~ andernfalls wird der Symbolhintergrund beim Importieren in Xcode schwarz.

  4. Erstellen Sie einen Ordner für die Dateien, öffnen Sie Xcode und ziehen Sie ihn entsprechend der Größe der Dateinamen auf die AppIcon-Assets.

| ( Referenz, Artikel auf designmodo.com ) |

Verwendung des Aeiconizer-Plugins

Jetzt, da die einzige Zeichenfläche in unserer Leinwand unser fertiges App-Icon-Design enthält, können wir diese Zeichenfläche in einer Vielzahl von iOS-kompatiblen Größen replizieren.

Tatsache: Die ursprüngliche Zeichenfläche hat die richtige Größe für das Apple Touch-Symbol.

Wählen Sie die Zeichenfläche in der Ebenen-Seitenleiste aus und navigieren Sie zu Plugins → Aeiconizer. Sie werden sofort feststellen, dass unser Symbol tatsächlich mehrfach dupliziert wurde – dieser Arbeitsablauf ist viel effizienter, weil:

Wir mussten keine Symbole einrichten Wir haben mit einer einzelnen Zeichenfläche gearbeitet Wir können unser ursprüngliches Design ändern und Aeiconizer erneut ausführen

| AEIconizer ( github ) | Weitere Plugins finden Sie auf der Website |