NEU: TIPPS & TRICKS -HIER!

Psd2Xcode - Schritt für Schritt Tutorial

Wir erstellen Xcode Storyboard, LaunchImage, Image Assets und App-Icons direkt aus einer einzigen Photoshop PSD Datei. Für Fragen und Vorschläge zu Psd2Xcode bitten wir um eine E-Mail an: support@psd2xcode.de

Bitte beachten: Psd2Xcode ist nur mit Adobe Photoshop® kompatibel. PSD-Dateien, die mit anderer Software abgespeichert wurden, funktionieren leider nicht.

 

Schritt 1 - Das Xcode Projekt

Als erstes erstellen wirn wir ein neues Xcode Projekt. Wir wählen Single View Application, benennen das Projekt example und speichern das Projekt. Xcode erstellt automatisch einen neuen Projekt-Ordner mit dem Namen des Projekts. (Den Speicherpfad merken!)

psd2xcode screenshot

Wir erhalten einen leeren LaunchScreen und Storyboard:

psd2xcode screenshot psd2xcode screenshot

 

Schritt 2 - Die Photoshop-Datei

Wir erstellen wirn eine PSD-Datei, Größe: 1242 x 2208 px, Auflösung: 401 ppi, Hintergrund: transparent. Wir speichern sie im eben erstellten Projekt-Ordner.

psd2xcode screenshot

psd2xcode screenshot psd2xcode screenshot

Schritt 2 - Das App Icon

Wir erstellen eine neue Gruppe indem wir auf das Gruppen-Symbol unten im Ebenen-Fenster klicken und nennen es "ic-BeliebigerName“. *Für „BeliebigerName" kann alles außer Sonderzeichen verwendet werden. Leerstellen empfehlen wir mit dem Unterstrich ( _ ) zu füllen.
psd2xcode screenshot

!! Psd2Xcode rendert eine Photoshop-Gruppe deren Namen mit "ic-" beginnt, als App Icon in allen benötigten Größen. (Es ist also ein Icon-Genrator integriert!).

In dieser Gruppe erstellen wir ein Quadrat von 1024 x 1024 Pixeln mit dem Rechteck-Werkzeug [Tastaturbefehl U]. Wir benennen die Ebene "img-BeliebigerName". In unserem Beispiel nehmen wir "img-Icon".

!! Psd2Xcode rendert jede Photoshop-Ebene deren Namen mit "img-" beginnt, als UIImageView.

psd2xcode screenshot
Wir rechts-klicken die Ebene und wählen "In Smart Objekt konvertieren", Wenn wir das Smart Objekt doppelklicken, können wir unser App Icon in einem separaten Fenster gestalten. Sobald wir dieses speichern, sind die Änderungen in allen Instanzen in unserem Beispiel-Psd zu sehen.

psd2xcode screenshot

Nun können wir die Ebene "Ebene 1" löschen.

psd2xcode screenshot

*Für „BeliebigerName" kann ein beliebiger Name eingesetzt werden. (Keine Sonderzeichen)

Schritt 3 - Das LaunchImage

Wir erstellen eine neue Gruppe namens "li-BeliebigerName“. (In unserem Beispiel nehmen wir "li-LaunchImage")

!! Psd2Xcode rendert eine Photoshop-Gruppe deren Namen mit "li-" anfängt, als LaunchImage.

Wir wählen Alles auswählen [Befehl A] im Auswahl-Menü und erstellen eine Ebenenmaske für die neue Gruppe indem wir Ebene/ Ebenen Maske/ Auswahl einblenden wählen. So müssen wir uns nicht mehr um die Größe und überlappende Objekte in dieser Gruppe kümmern .

psd2xcode screenshot

Die Ebene sollte jetzt so aussehen:

psd2xcode screenshot

Als nächstes zeichnen wir ein Rechteck in der Größe der PSD Datei (1242 x 2208) und benennen die Ebene "img-BeliebigerName" (In diesem Fall "img-bg1").

!! Psd2Xcode rendert jede Ebene deren Namen mit "img-"anfängt, als UIImageView.

psd2xcode screenshot

Wir kopieren das Smart Objekt Ebene "img-Icon" aus der Icon-Gruppe (Klicken halten & ziehen mit gedrückter alt-Taste) und ziehen es über die img-Ebene in der li-LaunchImage-Gruppe. Dann löschen wir das "Kopie" im Ebenennamen und positionieren das Icon mittig.

!! Psd2Xcode rendert jede Ebene mit gleichem Namen und Größe nur ein mal! Diese UIImageView wird dann von Xcode mehrfach verwendet. Das hält die App Größe klein.

psd2xcode screenshot

Schritt 4 - UIViewController, UILabel & UIButton

!! Psd2Xcode rendert jede Ebene deren Namen mit "vc-" anfängt als UIViewController.

Um einen UIViewController zu erstellen kopieren wir die Gruppe "li-LaunchImage" und benennen sie "vc-Start“.

Wir löschen die Ebene "img-Icon" und schreiben einen Text in eine neue Ebene.
Wir nennen diese Ebene "txt-HELLO". Herzlichen Glückwunsch, Sie haben soeben ein UILabel erstellt!

!! Psd2Xcode rendert jede Ebene deren Namen mit "txt-"anfängt als UILabel.

psd2xcode screenshot

Als nächstes ein einfacher UIButton: Wir erzeugen eine neue Ebene in der Gruppe "vc-Start“. Wir zeichnen einen Kreis oder nehmen eine Grafik aus der Custom Shape Library. Wir plazieren die Grafik oben rechts und benennen die Ebene "btn-prefs".

!! Psd2Xcode rendert jede Ebene deren Namen mit "btn-"anfängt als UIButton.

psd2xcode screenshot

Um die Button-Funktion in Xcode auszupronieren erstellen wir einen zweiten UIViewController indem wir die Gruppe "vc-Start“ kopieren, sie in "vc-Settings“ umbenennen, die Farbe der Ebene "img-bg1" in grau ändern und sie zu "img-bg2" umbenennen.

!! Da die Ebene einen neuen Namen hat, wird sie von Psd2xcode als neue UIImageView gerendert.

Dann ersetzen wir den "btn-prefs"mit einem "Schließen-Symbol" (Z.B. ein X) und benennen die Ebene "btn-close". Schließlich ändern wir den Text der Ebene "txt-HELLO" in "Settings" und benennen die Ebene "txt-Settings".

psd2xcode screenshot

 

Zuletzt bringen wir alle Gruppen in die richtige Reigenfolge.

  • 1) ic-Icon
  • 2) li-LaunchImage
  • 3) vc-Start
  • 4) vc-Settings

Siehe Screenshot:

psd2xcode screenshot

 

Wir speichern die PSD-Datei im Projekt-Ordner (example). Und jetzt sind wir bereit für Psd2Xcode!

Schritt 5 - Psd2Xcode doing the magic

psd2xcode screenshot psd2xcode screenshot

Wir öffnen Psd2Xcode und ziehen die PSD-Datei in das Feld mit dem Plus-Zeichen oder wir klicken auf das Plus-Zeichenund öffnen über das Auswahlmenü unsere PSD-Datei.

 

psd2xcode screenshot psd2xcode screenshot

Psd2Xcode wird die PSD-Datei validieren und es sollte ein Screen wie dieser sichtbar werden:

psd2xcode screenshot

!! Psd2Xcode entdeckt automatisch ob die PSD-Datei im portrait or landscape mode ist.

Als nächstes wählen wir aus ob unsere App eine normale oder eine universal App wird und ob Psd2Xcode einen Navigation Controller einfügen soll.

psd2xcode screenshot

Jetzt klicken wir auf "Export" und wählen ein Ziel (Unseren Projekt-Ordner).
Wir werden gefragt ob wir das existierende Storyboard überschreiben wollen. Ja, wir wollen!.

psd2xcode screenshot psd2xcode screenshot

!! Stellen Sie sicher dass der richtige Ordner ausgewäht ist, bevor das Storyboard überschrieben wird.

Nach einer kurzen Berechnungszeit zeigt Psd2Xcode die Nachricht "Successfully generated all files".

!! Die Berechnungszeit hängt von der Komplexität der PSD-Datei ab.

psd2xcode screenshot

Jetzt können wir einen Blick auf das Xcode Projekt werfen:

Schritt 6 - Das Xcode Projekt

Wenn wir das Xcode Projekt öffnen, sehen wir dass der LaunchScreen, alle benötigten Größen des App Icons, alle image assets und das storyboard schon importiert sind.

psd2xcode screenshot psd2xcode screenshot psd2xcode screenshot

!! Psd2Xcode generiert das Xcode Storyboard, LaunchImage, die App-Icons und Image Assets in allen benötigten Größen.

jetzt verbinden wir die ImageViews. Wir öffnen das "Main.storyboard" im example Ordner unseres Xcode Projekts, Wir Ctrl klicken und halten den kleinen close button im "Settings-View" und ziehen die Maus auf die "Hello-View". Ein Gummiband wie im folgenden Screenshot sollte erscheinen.

psd2xcode screenshot

!! Verbinden Sie Views mit Action Segues durch Ctrl Klick, Halten und Ziehen.

Sobald wir den Maus button loslassen, erscheint ein Popup Fenster, welches uns nach dem Typ der Action Segue fragt. Wir klicken auf "modal". Wir wiederholen das Ganze mit dem "Settings-Button" in der "Hello-View".

psd2xcode screenshot psd2xcode screenshot

Jetzt können wir unsere kleine App ausprobieren: "Product / Run" (Tastaturbefehl Cmd R).

psd2xcode screenshot

Mit den Buttons in der oberen rechten Ecke sollte zwischen den beiden Screens hin und her geschaltet werden können. Wenn wir die App im Simulator schließen, sollten wir das App Icon sehen.

 

!! CONSTRAINTS: Um sicherzustellen dass die App auf allen Devices gut aussieht, können wir in Xcode UIConstraints festlegen. Die Idee der UIConstraints ist, Regeln zur Auslegung der Position und Größe der Design-Elemente festzulegen, wenn die Bildschirmgröße geändert wird. Das gesamte Konzept der UIConstraints ist sehr komplex und wir können gute Ergebnisse auf unterschiedliche Weise erreichen. In diesem Fall wollen wir es so einfach wie möglich halten.


!! 1. Das Hintergrund image soll zentriert werden.

Wir wählen die UIImageView (The "Hello-View") aus, klicken auf das erste Icon in der rechten unteren Ecke von Xcode...

wählen hier "Horizontal Center in Container", "Vertical Center in Container" und klicken dann auf "Add Constraints".

psd2xcode screenshotpsd2xcode screenshot


!! 2. Der settings button soll in der oberen rechten Ecke bleiben.

Wir klicken auf den UIButton, klicken dann auf das zweite Icon in der rechten unteren Ecke von Xcode.

Wir klicken auf die vertikale rote Linie Oben und auf die rechte horizontale Linie, wählen "width" und "height" und klicken dann auf "Add constraints".

psd2xcode screenshot


!! 3. Mit allen weiteren Views verfahren wir genauso.

Dies sorgt für eine relative Position von oben nach unten und eine absolute Größe aller Elemente auf allen Geräten. Alternativ können Sie auch die Größe auf relativ einstellen.

!! NOTE: Manchmal kann man einfach die Automatik von Xcode zum erzeugen der Constraints wählen. (Editor->Resolve Auto Layout Issues->Add Missing Constraints).

Obwohl dies der einfachste Weg zu sein scheint, wird er in den meisten Fällen nicht alle Geräte abdecken und es sieht dann oftmals seltsam aus.

!! NOTE: Alle segues und constraints bleiben bei der Verwendung von Psd2Xcode zur Erzeugung von Storyboard und launchimage erhalten. Falls im PSD-Design neue Ebenen dazu kommen, müssen in Xcode allerdings zusätzliche segues und constraints hinzugefügt werden.

 

Wenn Sie den Anweisungen gefolgt sind, sollte ihre kleine Beispiel-App im iOS Simulator so aussehen:

Wir hoffen das Tutorial hat Ihnen gefallen und ihre App funktioniert!
Ein Psd2Xcode Update ist schon in Arbeit. Besuchen Sie unsere Website regelmäßig um die News zu erfahren.

Jesse & Jo von j-apps

 

Tipps & Tricks:

Wichtig: Psd2Xcode ist nur mit Original Photoshop® -Dateien kompatibel. Support für PSD-Dateien, die mit einer anderen Software erstellt wurden, werden bis jetzt nicht unterstützt. (Wir freuen uns aber auf jede Kooperation mit Herstellern von PSD-kompatibler Software. Bitte kontaktiert uns!)

1.) Der Name jeder Ebene und jeder Gruppe in eurer PSD-Datei muss ein Psd2Xcode kompatibles Präfix haben.

2.) Benutze nie Gruppen ohne eines der folgenden Psd2Xcode-Präfixe:

vc- (Steht für "UIViewControllers")

ic- (Steht für "App-Icon")

li- (Steht für "LaunchImage")

txf- (Steht für "UITextField")

scv- (Steht für "UIScrollView")

btn- (Steht für "advanced UIButton").

3.) Ebenen sollten immer mit einem dieser Präfixe beginnen:

btn- (Steht für "UIButton")

img- (Steht für "UIImageView")

txt- (Steht für "UILabel")

Einzige Ausnahmen: Ebenen in einer ic-Gruppe und Ebenen in Unterordnern von Erweiterten Buttons (btn- Gruppe) können ohne ein Präfix benannt werden.

4.) Sogenannte einfache Buttons (Ebene mit dem Präfix btn- ) dürfen nicht in einer Gruppe liegen, sondern sollten immer eine einzelne Ebene sein.

5.) Erweiterte Buttons (Eine Gruppe mit dem Präfix btn- ) mit verschiedenen Zuständen dagegen werden in einer Gruppe zusammengefasst. In dieser Gruppe müssen dann die Ebenen (oder auch Untergruppen) mit den Präfixen für die 3 Zustände liegen.

def- für default, hig- für highlighted, and sel- für selected.

6.) Für komplexere Kompositionen und Effekte empfehlen wir, die entsprechende Ebene in ein Smart object zu konvertieren und das Design in diesem zu verfeinern. Innerhalb eines smart objects können alle Ebenen-Stile wie z.B. Schatten-Effekte* etc. benitzt werden.

*Psd2Xcode unterstützt Ebenen-Stile nur innerhalb von smart objects. Lediglich die Deckkraft von Ebenen (Opacity) wird direkt unterstützt.

7.) Wenn du in einer PSD-Datei das gleiche Element in der gleichen Farbe und Größe mehrfach verwenden willst - kopiere es einfach, entferne den Text „copy" und Psd2Xcode wird nur das Bild nur ein einziges mal rendern und es an die entsprechenden Stellen in Xcode einsetzen. (Ein guter Trick, um die App-Größe zu reduzieren!)

8.) Ein kleiner Tipp noch: Wenn du schon implemetierte buttons in der PSD-Datei ändern oder löschen willst , musst du die segues der buttons in Xcode löschen. Ansonsten kann es passieren, dass Xcode could abstürzt… (Wir arbeiten an einem Update, das diesen Fehler behebt!)

9.) Manche Benutzer berichten, dass die von Psd2Xcode gerenderten Bilder nicht in Xcode geladen werden.

psd2xcode

Das Problem tritt derzeit öfters auf, da in der neusten Xcode Version der Ordner mit den Bilder nun Assets.xcassets heißt und nicht mehr wie früher Images.xcassets.
Um das Problem zu lösen müssen Sie lediglich die Bilder aus Images.xcassets (ein Ordner in Ihrem Projectverzeichnis) in den Ordner Assets.xcassets kopieren.