Hasilkan aset gambar dari lapisan

Anda dapat menghasilkan aset gambar JPEG, PNG, GIF, atau SVG dari konten lapisan atau grup lapisan dalam file PSD. Aset secara otomatis dihasilkan saat Anda menambahkan ekstensi format gambar yang didukung ke nama lapisan atau nama grup lapisan. Secara opsional, Anda juga dapat menentukan parameter kualitas dan ukuran untuk aset gambar yang dihasilkan.

Menghasilkan aset gambar dari file PSD sangat berguna untuk desain web multiperangkat.

Cara membuat dan mengekspor grafis web lihat Cara mengekspor file dalam berbagai format dari Photoshop.

Untuk memahami generator aset gambar dengan lebih baik, pertimbangkan file PSD sederhana (unduh dari tautan ini) dengan hierarki lapisan berikut:

Hierarki lapisan untuk file ini memiliki dua grup lapisan—Rounded_rectangles dan Ellipses. Masing-masing kelompok lapisan ini berisi lima lapisan.

Ikuti langkah-langkah ini untuk menghasilkan aset gambar dari file PSD ini:

1. Dengan file PSD terbuka, pilih File > Otomatiskan > Plugin Generator > Aset Gambar.
2. Tambahkan ekstensi format file yang sesuai (.jpg, .png, . gif, atau .svg) ke nama-nama lapisan atau grup lapisan tempat Anda ingin menghasilkan aset gambar. Misalnya, ganti nama grup lapisan, Rounded_rectangles dan Ellipses, sebagai Rounded_rectangles.jpg dan Ellipses.png; serta lapisannya, Ellipse_4 sebagai Ellipse_4.gif.

Photoshop menghasilkan aset gambar dan menyimpannya dalam subfolder di samping file PSD sumber. Jika file PSD sumber belum disimpan, Photoshop menyimpan aset yang dihasilkan dalam folder baru di Desktop Anda.

Menghasilkan aset untuk dokumen cloud

Jika Anda bekerja dengan dokumen Cloud, aset akan disimpan dalam direktori "Photoshop Cloud Associates":

• Windows: C:\Users\yourname\Documents\Adobe\Photoshop Cloud Associates
• macOS: /Users/yourname/Documents/Adobe/Photoshop Cloud Associates

Menghasilkan beberapa aset dari lapisan atau grup lapisan

Untuk menghasilkan beberapa aset dari lapisan atau grup lapisan, pisahkan nama aset dengan koma. Misalnya, nama lapisan berikut menghasilkan tiga aset:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Simpan aset ke subfolder

Anda dapat memilih untuk menyimpan aset gambar yang dihasilkan dari lapisan/grup lapisan tertentu dalam subfolder langsung di bagian folder aset dokumen. Sertakan nama subfolder dalam nama lapisan/grup lapisan; misalnya:

[subfolder]/Ellipse_4.jpg 

Kasus penggunaan desain web

Menghasilkan aset gambar dari file PSD sangat berguna untuk desain web multiperangkat. Pertimbangkan desain web berikut dan struktur lapisan:

Mari kita ekstraksi ikon di atas dan baris atas kisi gambar Global Hotspots sebagai aset gambar:

• Tambahkan ekstensi format gambar ke nama lapisan yang sesuai.

Mengganti nama lapisan/grup lapisan yang sesuai

Photoshop menghasilkan aset dan menyimpannya di lokasi yang sama dengan file PSD sumber.

Tentukan parameter kualitas dan ukuran

Aset JPEG dihasilkan dalam kualitas 90% secara default. Aset PNG dihasilkan sebagai gambar 32-bit secara default. Aset GIF dihasilkan dengan transparansi alfa dasar.

Saat mengganti nama lapisan atau grup lapisan dalam persiapan pembuatan aset, Anda dapat menyesuaikan kualitas dan ukuran.

Parameter untuk aset JPEG

• Tambahkan kualitas output yang diinginkan sebagai akhiran untuk nama aset: .jpg(1-10) atau .jpg(1-100%). Misalnya:
  • Ellipse_4.jpg5
  • Ellipse_4.jpg50%
• Tambahkan ukuran gambar output yang diinginkan (relatif atau dalam format yang didukung: px, in, cm, dan mm) sebagai awalan nama aset. Photoshop menskalakan gambar sesuai dengan ukuran tersebut. Misalnya:
  • 200% Ellipse_4.jpg
  • 300 x 200 Rounded_rectangle_3.jpg
  • 10in x 200mm Rounded_rectangle_3.jpg
    

Catatan: Jangan lupa tambahkan karakter spasi antara awalan dan nama aset. Jika Anda menentukan ukuran dalam piksel, Anda dapat menghilangkan unit. Misalnya, 300 x 200.

Parameter untuk aset PNG

• Tambahkan kualitas output yang diinginkan sebagai akhiran untuk nama aset: 8, 24 ,atau 32. Misalnya:
  • Ellipse_4.png24
• Tambahkan ukuran gambar output yang diinginkan (relatif atau dalam format yang didukung: px, in, cm, dan mm) sebagai awalan nama aset. Photoshop menskalakan gambar sesuai dengan ukuran tersebut. Misalnya:
  • 42% Ellipse_4.png
  • 300mm x 20cm Rounded_rectangle_3.png
  • 10in x 50cm Rounded_rectangle_3.png

Catatan: Jangan lupa tambahkan karakter spasi antara awalan dan nama aset. Jika Anda menentukan ukuran dalam piksel, Anda dapat menghilangkan unit. Misalnya, 300x200.

Parameter untuk aset GIF

• Tambahkan ukuran gambar output yang diinginkan (relatif atau dalam format yang didukung: px, in, cm, dan mm) sebagai awalan nama aset. Misalnya:
  • 42% Ellipse_4.gif
  • 300mm x 20cm Rounded_rectangle_3.gif
  • 20in x 50cm Rounded_rectangle_3.gif

Catatan: Jangan lupa tambahkan karakter spasi antara awalan dan nama aset. Jika Anda menentukan ukuran dalam piksel, Anda dapat menghilangkan unit. Misalnya, 300x200.

Parameter kualitas tidak tersedia untuk aset GIF.

Membangun nama lapisan kompleks

Anda dapat menentukan beberapa nama aset dengan parameter saat menamai lapisan untuk pembuatan aset. Misalnya:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Photoshop menghasilkan aset berikut dari lapisan ini:

• Delicious.jpg (gambar JPG berkualitas 8 yang diskalakan 120%)
• Delicious.png (gambar PNG 24-bit yang diskalakan 42%)
• Delicious_2.jpg (gambar JPG berkualitas 90% yang memiliki ukuran absolut 100x100 px)
• Delicious.gif (gambar GIF yang diskalakan 250%)

Contoh skala absolut

Contoh yang baik dari skala absolut

• 100x80 foo.png (skala absolut sederhana)
• 80 x 100px foo.png (spasi di antara panjang)
• 4in x100 foo.png (campuran unit dan tanpa unit)
• 90mm x120cm foo.png (campuran unit yang berbeda)
• 100x? foo.png (wild card)
• ?x60in foo.png (wild card di awal)

Contoh yang buruk dari skala absolut

• 100x100foo.png (tidak ada spasi sebelum nama file)
• 80x100 60% foo.png (campuran skala absolut dan relatif)
• 50% 80x100 foo.png (campuran skala absolut dan relatif)
• 20in cm x50cm foo.png (beberapa unit pengukuran)
• 30nm x20 nano.png (unit tidak valid)

Memformat dan memisahkan beberapa file

Contoh yang baik

• Layer 1.png (Spasi pada nama file diperbolehkan -- menghasilkan satu file bernama "Layer 1.png")
• Layer 1.png,Layer 2.jpg (Koma sebagai pemisah)
• Layer 1.png, Layer 2.jpg (Koma diikuti spasi sebagai pemisah)
• Layer 1.png+Layer 2.jpg (Plus sebagai pemisah)
• Layer 1.png + Layer 2.jpg (Plus diikuti oleh spasi sebagai pemisah)

Menempatkan semuanya bersama

100% Delicious, 42% Layer 1.png24 + 100x100 Layer.jpg-90% , 250% Quux/Foo Bar Baz.gif menghasilkan tiga file (string "100% Delicious" diabaikan, karena ini bukan nama file):

• Layer 1.png, dalam skala 42%, sebagai png 24-bit
• Layer.jpg, sebagai ukuran absolut 100x100 piksel, sebagai kualitas jpg 90%
• Foo Bar Baz.gif di subfolder Quux, dalam skala 250%, sebagai gif.

Tentukan pengaturan default untuk aset

Anda dapat menentukan pengaturan default seluruh dokumen untuk aset yang dihasilkan. Ikuti langkah-langkah ini:

1. Hasilkan lapisan kosong dalam dokumen.
2. Awali nama lapisan dengan kata kunci default. Sekarang, masukkan pengaturan yang ingin Anda terapkan ke semua aset gambar yang dihasilkan dari dokumen. Misalnya:
   

Menghasilkan semua aset gambar dalam subfolder bernama hi-res. Misalnya, [asset_folder]/hi-res/Delicious.jpg.

Menghasilkan semua aset gambar dalam subfolder bernama hi-res. Selain itu, akhiri nama aset dengan @2x. Misalnya, [asset_folder]/hi-res/Delicious@2x.jpg.

Menyimpan aset gambar yang diperkecil sebesar 50% di subfolder lo-res di folder aset dokumen

Menghasilkan dua aset gambar dari lapisan:

• Di subfolder hi-res, aset gambar yang namanya diberi akhiran @2x
• Di subfolder lo-res, aset gambar diperkecil sebesar 50%
  

Nonaktifkan pembuatan aset gambar untuk semua dokumen

Anda dapat menonaktifkan pembuatan aset gambar secara global untuk semua dokumen Photoshop dengan memodifikasi Preferensi Anda.

1. Pilih Edit > Preferensi > Plug-in.
2. Batalkan seleksi Aktifkan Generator.
3. Klik OK.

Menu Plugin Generator

Sebelum rilis Juli 2024 Photoshop di desktop versi 25.11, Plugin Generator berada di bagian menu File > Hasilkan.

Sekarang, semua plugin Generator, termasuk plugin Aset Gambar default, terdapat di bagian menu File > Otomatiskan > Plugin Generator.  Perubahan ini dilakukan untuk memperjelas nama submenu dan membedakannya dari fitur generatif baru seperti Hasilkan Gambar. 

TJU