Ändern der iOS 7 „App Icon Template“ (PSD), um abgerundete Ecken auf Bilder jeder Größe anzuwenden

Ich versuche, die "App-Symbolvorlage" mit einem kleineren Bild als 1024 x 1024 Pixel zu verwenden, um ein abgerundetes 120 x 120 Pixel großes iOS 7-Symbolbild aus meinem ursprünglichen quadratischen 120 x 120 Pixel-Bild zu generieren.

Wenn ich mein quadratisches 120-Pixel-Bild als Smart-Objekt platziere und es auf 1024 x 1024 Pixel hochskaliere, hat die exportierte 120-Pixel-Version eine geringe Qualität. Also habe ich versucht, die Bildgröße des gesamten Smart-Objekts auf 120 x 120 Pixel zu ändern, aber das führt dazu, dass das Symbol in der PSD nicht die volle Größe einnimmt, da es immer noch als 120 x 120 Pixel großes Objekt innerhalb eines 1024 x 1024 Pixel großen Objekts interpretiert wird, sodass es einen winzigen Teil davon abdeckt das exportierte Symbol.

Wie kann ich die größte Größe in der gesamten PSD von 1024 x 1024 Pixel auf 120 x 120 Pixel ändern, damit das exportierte 120-Pixel-Bild von hoher Qualität ist?

Vielen Dank im Voraus.

Warum würden Sie einfach nicht die vorhandene Größe von 120 Pixel verwenden?
@Scott Gute Frage, das habe ich nicht klargestellt: Ich verwende die PSD, um ein Symbol mit abgerundeten Ecken für die Verwendung auf einer Website zu erstellen, mein Original ist quadratisch und ich habe es nicht mehr in einer anderen Größe.
Err .. dieser Kommentar scheint mir nichts zu klären. :) Es gibt ein 120 Pixel großes (gerundetes) Symbol in dieser PSD ... können Sie das nicht einfach verwenden? Ignorieren Sie die große Größe, verwenden Sie die iPhone-Retina-Größe. Und wenn dies nicht für iOS ist, warum brauchen Sie diese Vorlage überhaupt?
Du meinst die exportierte 120px-Version? Wie ich bereits erwähnt habe, ist die Bildqualität niedrig (verschwommenes Bild), wenn ich ein 120-Pixel-Bild verwende und das Smart-Objekt auf 1024 Pixel skaliere. Ich möchte nur ein Bild mit abgerundeten Ecken erstellen, wie es für iOS 7-Apps verwendet wird.
Du hast mich komplett verwirrt. Benötigen Sie ein 120-Pixel-Bild oder ein 1024-Pixel-Bild? Warum in aller Welt verwenden Sie diese Vorlage überhaupt, wenn Sie nur ein abgerundetes Bild benötigen? Bitte bearbeiten Sie Ihre Frage, um zu verdeutlichen , was Sie erstellen müssen . Das wird einen langen Weg gehen. Meiner Meinung nach sollten Sie diese Vorlage einfach ignorieren, eine neue Photoshop-Datei in der gewünschten Größe öffnen und eine Maske mit abgerundeten Ecken erstellen.
Ich brauche ein 120px-Bild mit abgerundeten Ecken. Ich habe darüber gesprochen, es auf 1024 Pixel zu skalieren, da dies die einzige Möglichkeit ist, die ich mit dieser PSD kenne, damit sie die volle Größe einnimmt und nicht in der Mitte klein ist. Dann erzeugt die Aktion auch eine 120px-Version, die allerdings unscharf ist. Ich verwende diese Vorlage, weil ich keinen besseren Weg finden konnte. Wenn Sie mir einen einfacheren Weg zeigen möchten, sind Sie herzlich willkommen.
@Scott: Ich habe die Frage aktualisiert. „Meiner Meinung nach sollten Sie diese Vorlage einfach ignorieren, eine neue Photoshop-Datei in der gewünschten Größe öffnen und eine Maske mit abgerundeten Ecken erstellen.“ - Das ist wahrscheinlich wahr, aber ich konnte online keine PSD finden, die genau das tut, und weiß nicht, wie es geht, deshalb habe ich versucht, diese zu modifizieren, um dies zu erreichen. Möchten Sie erklären, wie es geht, oder auf eine PSD verlinken, die dies tut?
In den meisten Fällen "finden Sie keine PSD", um das zu tun, was Sie brauchen. Im Allgemeinen erstellen Sie die PSD, die das Bild ist, das Sie benötigen.
Natürlich können Sie es immer von Grund auf neu machen, aber genau wie beim Programmieren ist es sehr sinnvoll, Dinge wiederzuverwenden, um Zeit zu sparen. Und in diesem Fall könnte Ihre Antwort für viele Leute nützlich sein, die nur eine einfache Möglichkeit suchen, abgerundete Ecken im iOS 7-Stil auf jedes Bild anzuwenden.

Antworten (1)

Öffnen Sie die Vorlage

  • Löschen Sie alles im Ebenenbedienfeld mit Ausnahme der betitelten Gruppen

    • iPhone > 120 Retina-Startbildschirm
    • Abgerundete Maske

    Löschen Sie alle Ebenen außer den beiden hier hervorgehobenen Ebenen:
    Geben Sie hier die Bildbeschreibung ein

  • Command/CTRL-Klicken Sie auf das Miniaturbild der Maske in der Gruppe "Abgerundete Maske". Dadurch wird die Maske als Auswahl geladen (Sie sehen die marschierenden Ameisen).

  • Schnappen Sie sich das Laufschrift-Werkzeug , halten Sie die Option/AltTaste gedrückt und ziehen Sie Auswahlen über die Bereiche, die nicht das 120ox-Symbol sind. So bleiben am Ende nur noch marschierende Ameisen um das 120px-Icon herum.
  • Klicken Sie im Ebenenbedienfeld auf die Gruppe „120 Retina Home Screen“ , um sie hervorzuheben.
  • Klicken Sie unten im Ebenenbedienfeld auf die Schaltfläche „Neue Maske“ . Die Dinge sollten so aussehen:

    Geben Sie hier die Bildbeschreibung ein
  • Ziehen Sie die Gruppe "120 Retina-Startbildschirm" aus der Gruppe "Abgerundete Maske". (Es ist also nicht in der Gruppe "Abgerundete Maske" verschachtelt).
  • Ziehen Sie die Gruppe „Abgerundete Maske“ auf das Papierkorbsymbol unten im Ebenenbedienfeld .
  • Wählen Sie Image > Trimaus dem Menü.
  • Aktivieren Sie im Dialogfeld Transparente PixelOK und klicken Sie auf .
  • Erweitern Sie die Gruppe „120 Retinal Home Screen“ im Ebenenbedienfeld und bearbeiten Sie die Smart-Objekt-Ebene „Artwork“ mit Ihrer Kunst. Oder fügen Sie einfach eine neue Ebene hinzu, die Ihre Grafik enthält.
  • Wenn Sie fertig sind, File > Save For Webspeichern Sie Ihr Bild für das Web. ( Verwenden Sie keine der mit der Vorlage verknüpften Aktionen.)

Alles, was Sie brauchen, ist ein 120 x 120 Pixel großes Dokument mit einer Maske mit abgerundeten Ecken. Dies kann auf verschiedene Arten erstellt werden, von denen viele schneller und weniger kompliziert sind. Basierend auf Ihrer anfänglichen Entscheidung, diese Vorlage für etwas relativ Einfaches zu verwenden, denke ich, dass die obige Erklärung für Sie am vorteilhaftesten sein könnte.

Dasselbe in 5 einfachen Schritten.....

  • Neues Dokument im Format 120 x 120 Pixel
  • Zeichnen Sie mit dem Werkzeug „Abgerundetes Rechteck“ ein abgerundetes Rechteck (es spielt keine Rolle, welche Farbe das abgerundete Rechteck hat.
  • Platzieren Sie Ihre Grafik als Smart-Objekt-Ebene über der Ebene mit abgerundeten Rechtecken

  • Halten Sie die Option/AltTaste gedrückt und klicken Sie im Ebenenbedienfeld auf die Linie direkt zwischen der Grafik und den rechteckigen Ebenen.
    Schnittmaske
    Dadurch wurde eine Schnittebene erstellt , die Ihr Bildmaterial nur auf das abgerundete Rechteck beschränkt. Dies fügt deinem Kunstwerk die abgerundeten Ecken hinzu.

  • Wählen Sie, File > Save for Web...um das Bild zu speichern.

Um ehrlich zu sein, das ist sehr einfaches Photoshop-Zeug. Es sollte keine Notwendigkeit für eine "Vorlage" oder irgendetwas Vorkonstruiertes geben. Alles, was Sie brauchen, ist ein grundlegendes Verständnis der Werkzeuge und des Ebenenbedienfelds.

Erstmal danke für deine Antwort! Ich habe eine Frage zu diesem Punkt Ihrer ersten Lösung: "Erweitern Sie die Gruppe '120 Retinal Home Screen' im Ebenenbedienfeld und bearbeiten Sie die Smart-Objektebene 'Artwork' mit Ihrer Kunst.". An diesem Punkt tritt das gleiche Problem wie erwähnt auf. Ich kann entweder mein 120-Pixel-Bild platzieren und die Größe auf 1024 Pixel ändern oder ich ändere die Bildgröße auf 120 Pixel und platziere es, aber dann ist es wieder winzig in der Gruppe „120 Retina Home Screen“. Wie würden Sie hier ein 120px-Bild einfügen? Mein Gefühl ist, dass ich etwas in der Gruppe "120 Retina.." ändern muss, aber ich weiß nicht was.
Entschuldigung, Sie ergeben für mich keinen Sinn. "Platzieren Sie mein 120-Pixel-Bild und ändern Sie die Größe auf 1024 Pixel" Warum sollten Sie die Größe mit den von mir angegebenen Schritten auf 1024 Pixel ändern? Oh warte, ich war nicht klar genug ... Ich habe die Antwort bearbeitet, um deutlich zu zeigen, welche zwei Ebenen Sie behalten müssen.
Ich habe total verstanden, was du meinst. Öffnen Sie jedoch das Smart-Objekt „Artwork“ und klicken Sie dann in „Icon.psb“ auf Bild > Größe. Es ist immer noch 1024x1024px. Es erwartet ein 1024px-Bild.
Ignorieren Sie dann einfach dieses intelligente Objekt oder löschen Sie es und platzieren Sie Ihr Bildmaterial als neue Ebene in dieser Gruppe.
Perfekt! Das Hinzufügen einer neuen Ebene anstelle von "Artwork" hat den Zweck erfüllt. Jetzt ist das Bild in Originalqualität und nicht verschwommen. Vielen Dank für deine Hilfe! :) Wenn Sie möchten, bearbeiten Sie Ihre Antwort, um den Punkt "Artwork" durch das zu ersetzen, was Sie in Ihrem Kommentar geschrieben haben.
Ändern der iOS 7 „App Icon Template“ (PSD), um abgerundete Ecken auf Bilder jeder Größe anzuwenden
AntwortenHierDatenschutz-Bestimmungen1y, 0v