So schneiden Sie Bilder als PNG für die iOS-App in Photoshop

Ich habe ein fertiges Design für meine iOS-App, aber die Entwickler verwenden kein PS und haben mich gebeten, alle UI-Elemente als PNGs für Retina und Standard bereitzustellen. Der Designer, der das Design ursprünglich in PS erstellt hat, gab an, dass er kein Slicing durchführt.

  1. Gibt es eine Möglichkeit, dies automatisch zu tun? Wenn nicht, was ist die beste Methode, es zu tun?
  2. Ist es nicht üblich, dass der Designer dies auf Anfrage bereitstellt?

Danke im Voraus

Antworten (5)

Es gibt eine halbautomatische Möglichkeit, Bilder zu schneiden, nämlich die Verwendung des Slice-Werkzeugs .

Sie können es verwenden, um Ihre Datei in Blöcke von Symbolen zu unterteilen:

Geschnittene PSD

Wenn Sie Datei → Für Web und Geräte speichern ... verwenden , exportiert Photoshop jedes Segment als separates Bild für Sie:

Geschnittene Bilder

Dies ist eine zerstörungsfreie Methode, sodass Sie bei Bedarf immer noch Änderungen an den Symbolen vornehmen und immer noch dieselben Slices verwenden können. Es gibt mehrere Möglichkeiten, wie Sie die Größe aller Symbole für Retina/Standard ändern können: Ändern Sie entweder die Größe des gesamten Bildes vor dem Speichern oder Sie können die Größe aller Symbole stapelweise ändern, nachdem sie bereits gespeichert wurden.

Ob Ihr Designer Ihre Bilder für Sie zerlegt oder nicht, hängt von der Vereinbarung ab, die Sie mit Ihrem Designer getroffen haben. Wenn es nicht Teil des Vertrages war, sind sie dazu nicht verpflichtet. Ich bin mir sicher, dass sie es gerne gegen eine Gebühr tun werden :)

Danke für deine Antwort. Aber wie kann ich sicherstellen, dass ich es genau markiert/geschnitten habe? Ich meine, zoomen Sie hinein, schließen Sie auch die Schatten ein? Wie kann ich allgemein sicherstellen, dass ich es richtig mache, ohne an Qualität zu verlieren oder es in irgendeiner Weise zu beschädigen? Vielen Dank
Meine Methode für dieses Beispiel bestand darin, jedes Symbol mit Hilfslinien zu umgeben. Also ja, ich habe nahe genug hineingezoomt, um die Pixel zu sehen, und dann die Umschalttaste gedrückt, während ich die Hilfslinien gezogen habe, damit sie zwischen den Pixeln einrasten. Nachdem alle Hilfslinien eingestellt waren, klickte ich in der Symbolleiste „Slice“ auf die Schaltfläche „ Slices From Guides “.
Ich bin mir nicht sicher, was Sie mit "Schließen Sie die Schatten ein?" da ich nicht weiß, wie Ihre Bilder aussehen, aber ja, ich würde annehmen, dass Sie die Schatten einschließen sollten.

Normalerweise stellt der Designer alle Schnittbilder bereit.

Ich bin mir nicht sicher, ob wir das Slicing automatisch machen können.

eine Retina können Sie Bilder gemäß PSD geben.

Nicht-Retina müssen Sie die Hälfte der Netzhautgröße angeben.

beim Speichern von Bildern für Nicht-Retina - Retina-Bilder auf 50 % skalieren und als PNG speichern.

Gibt es eine Möglichkeit, dies automatisch zu tun? Wenn nicht, was ist die beste Methode, es zu tun?

Sie können dies absolut automatisch in Photoshop tun . Sie würden eine Stapelaktion verwenden .

Sie müssen die Aktion einmal ausführen, um aufzuzeichnen, was Sie tun möchten, und dann eine Stapelaktion unter Datei > Automatisieren > Stapel einrichten .

Nur um das zu erweitern, was MK_ gesagt hat, Retina -Display-Bilder werden doppelt so groß angezeigt. Wenn Ihr Bild also 56 x 56 Pixel groß sein soll, dann sollte Ihr Retina-Bild 112 x 112 Pixel groß sein. Sie sollten also zuerst Ihre Retina-Bilder erstellen und dann die oben genannten Batch-Aktionsschritte verwenden, um die Größe zu reduzieren und einen Satz von Bildern für die Standardanzeige zu erstellen.

Wenn Sie Zugriff auf Photoshop CC haben, empfehle ich Ihnen dringend, sich die neue Unterstützung für den Export von Assets anzusehen – sie ist viel schneller und einfacher als Slices und ermöglicht es Ihnen, zurückzugehen und Anpassungen an Ihren Assets vorzunehmen, ohne die Slices erneut bearbeiten zu müssen. Alles, was Sie tun müssen, ist, Ihre Ebenen auf eine bestimmte Weise zu beschriften und den Generator die Arbeit für Sie erledigen zu lassen.

Sie können versuchen, codly.io zu verwenden, um Ihr Photoshop-Design in Sekundenschnelle in nativen Code umzuwandeln, einfach von Photoshop PSD zu Code.

Sie können Ihr PHOTOSHOP-Design automatisch schneiden. und generieren Sie Assets für alle Anwendungsbildschirme. und mehr

Sparen Sie 40 % des gesamten Zeitrahmens für die Anwendungsentwicklung.

So schneiden Sie Bilder als PNG für die iOS-App in Photoshop
AntwortenHierDatenschutz-Bestimmungen1y, 0v