Bagaimana Ekspor Aset Photoshop Untuk Web Dengan PNGHat

Konten yang disponsori

Ini adalah posting disponsori menampilkan produk / layanan yang sangat relevan dengan pembaca kami.

Baru-baru ini merilis PNGHat plugin untuk Photoshop, yang dibuat oleh Sumber , menciptakan alur kerja yang sama sekali berbeda untuk mengekspor elemen PSD untuk digunakan dalam website, game, aplikasi atau apa pun jenis lain dari proyek Anda desain untuk.
Ini adalah perangkat lunak yang kuat dengan setumpuk fungsionalitas yang besar, tetapi fitur yang paling menarik itu ditawarkan adalah kemampuannya untuk mengekspor mendidih ke dalam tiga langkah sederhana:
LANGKAH 1: Tekan tombol
LANGKAH 2: Copy & paste kode
LANGKAH 3: Profit!
Oke, jadi dengan serius itu hanya dua langkah, tapi itu benar-benar mudah. Plugin dasarnya menghilangkan proses ekspor Photoshop khas mengiris, penamaan iris, berurusan dengan daerah slice tumpang tindih, melihat pratinjau, memilih pilihan optimasi, memilih opsi ekspor, tabungan keluar, kemudian secara manual menulis kode untuk mengintegrasikan gambar ke dalam proyek Anda.
Hal ini juga dapat memangkas putih-ruang di sekitar elemen secara otomatis, dan menangani beberapa ekspor resolusi untuk dukungan retina dan teknik gambar responsif. Gambar dapat menjadi output secara lokal pada komputer Anda, langsung upload ke penyimpanan awan, atau bahkan dihasilkan sebagai kode Base64 sehingga Anda tidak perlu file gambar sama sekali.
Mari kita mulai dengan melihat inti dari plugin; tombol push fungsi ekspor gambar.

Push Button Ekspor

Mengekspor gambar menggunakan PNGHat benar-benar sebagai mudah karena mendapat. Misalnya, dalam permainan ini UI Mobile dari Graphic Burger , katakanlah Anda ingin mengekspor "Putar Button".
Pertama, Anda pilih layer (s) atau kelompok untuk "Putar Tombol":

Kemudian Anda klik tombol PNGHat Export Layers Dipilih:

Dan hey presto, Anda mendapatkan PNG dioptimalkan sempurna:

Itu saja! Dalam contoh ini kita bahas dua klik mouse dan sekitar dua detik menunggu.
Jika mengekspor gambar Anda secara lokal, Anda dapat mengatur di mana mereka harus pergi dengan mengklik tombol ... Anda akan melihat ke arah kanan dari bagian kedua dari panel PNGHat, kemudian browsing ke folder pilihan Anda.
Ada berbagai pilihan lain Anda dapat mengatur dan men-tweak, yang akan kita bahas di bawah ini, tetapi secara singkat itu seluruh proses; pilih, tekan tombol, dilakukan.

Copy & Paste Kode

Pada saat yang sama PNGHat output gambar Anda, itu juga mempersiapkan copy dan paste kode siap sehingga Anda dapat dengan mudah memasukkan gambar tersebut ke proyek Anda. Anda mendapatkan HTML, CSS, kanvas, Android dan iOS kode, misalnya:

HTML:

  <img src="images/Play-btn.png" width="108" height="109">

CSS:

  background-image: url (images / Play-btn.png);
 width: 108px;
 height: 109px;

Canvas:

  var img = new Image ();
 img.onload = function () {
     ctx.drawImage (img, 0, 0, 108, 109);
 };
 img.src = 'images / Play-btn.png';

Android:

  <ImageButton
     android: layout_width = "wrap_content"
     android: layout_height = "wrap_content"
     android: src = "@ ditarik / Play-btn.png" />

iOS:

  [UIImage imageNamed: @ "Play-btn.png"]

Dari sini Anda hanya menekan tombol "Copy" tombol pada jendela PNGHat dan Anda siap untuk menyisipkan langsung ke file proyek yang relevan:

Built-in Cloud / CDN Hosting

Alih-alih perlu FTP gambar Anda setelah ekspor, PNGHat memberikan anda pilihan untuk langsung meng-upload foto Anda ke penyimpanan awan yang mereka berikan. Pada saat ini plugin dilengkapi dengan 1Gb penyimpanan awan gratis, dengan gambar yang disampaikan melalui CDN sehingga pengguna dilayani dari terdekat mungkin lokasi.
Mengekspor gambar untuk hosting disertakan benar-benar tidak berbeda dengan proses untuk ekspor lokal. Untuk mengaktifkan auto-upload Anda memilih "Cloud" pilihan dari bagian pertama dari jendela PNGHat:

Dari sana, Anda menggunakan yang sama "pilih" dan "push button" pendekatan seperti dijelaskan di atas. Satu-satunya perbedaan adalah bahwa setelah gambar secara otomatis upload ke akun Anda, copy dan paste kode akan menyediakan Anda dengan URL awan-host misalnya:

 <img src="http://piff.ly/4077/2e404609f9b571eff1f24fd558ebd0e25cecf44f/Play-btn.png" width="108" height="109">

Base64

Ekspor opsi PNGHat ketiga menyediakan adalah Base64, yang output gambar Anda sebagai kode murni yang dapat dimasukkan ke dalam HTML proyek Anda, CSS atau kanvas. Tanpa perlu file gambar terpisah, elemen dapat dimuat tanpa tambahan http permintaan dan karenanya dapat mempercepat waktu buka proyek Anda. Seperti dengan beralih antara ekspor dan lokal cloud, Anda dapat memilih Base64 di bagian atas jendela PNGHat:

Kode Base64 dapat digunakan dengan HTML, CSS dan kanvas, misalnya (disingkat code):

HTML

  <img src="data:image/png;base64,iVBO......FTkSuQmCC" width="108" height="109">

CSS

  background-image: url (data: image / png; base64, iVBO ...... FTkSuQmCC);
 width: 108px;
 height: 109px;

Kanvas

  var img = new Image ();
 img.onload = function () {
     ctx.drawImage (img, 0, 0, 108, 109);
 };
 img.src = 'Data: image / png; base64, iVBO ...... FTkSuQmCC';

Dalam pengalaman saya, Base64 sangat besar untuk kecil gambar latar belakang yang berulang dan grafis dengan sejumlah warna. Saya juga menemukan cara yang paling efisien untuk memanfaatkan Base64 adalah dengan preprocessors CSS, sehingga kode yang membentuk sebuah gambar dapat disimpan sebagai variabel kemudian dengan mudah digunakan beberapa kali dan kemudian diperbarui jika kebutuhan akan.

Mengagumkan PNG8 Transparan

Salah satu hal yang saya anggap paling mengesankan tentang PNGHat adalah kemudahan yang Anda dapat mengekspor PNG8 transparan sangat cantik untuk menjaga ukuran file yang rendah. Aku berlari beberapa tes menggunakan DVD mockup dari Graphic Burger , pada gambar diekspor di 758px * 758px tanpa pengaturan tweak, dan menemukan dua hal.
Pertama, perbedaan dalam ukuran file PNG24 antara Photoshop ekspor default dan PNGHat adalah 6kb diabaikan. Ukuran file jadi diberikan pada dasarnya setara aku akan lebih cenderung menggunakan ekspor PNGHat untuk jenis file ini karena betapa jauh lebih cepat dan lebih mudah itu.
Hasil kedua, dan lebih menarik, adalah bahwa dari kotak PNGHat menangani transparansi file PNG8 indah. Dengan pengaturan ekspor standar Photoshop melakukan output file yang hanya 186Kb, tapi itu termasuk banding putih yang Anda lihat dalam gambar di bawah ini. Secara umum, transparansi digunakan sehingga gambar dapat ditampilkan dengan baik di atas latar belakang apapun sehingga bandeng biasanya akan menghalangi format ekspor ini dari penggunaan.
PNGHat di sisi lain dihasilkan file PNG8 yang secara visual dibedakan dari file PNG24, tapi kurang dari setengah ukuran mereka di 268KB vs 642KB / 648Kb. Dari tempat aku duduk yang membuatnya menjadi pilihan yang sangat menarik untuk dioptimalkan ekspor PNG transparan.

Potong Space Putih

PNGHat dapat secara otomatis memangkas ruang di sekitar gambar yang Anda mengekspor, menyimpan Anda kesulitan memastikan tanam atau irisan yang berbaris sempurna dengan tepi elemen. The "tombol Play" dari contoh pertama dalam artikel ini diekspor dengan menggunakan fungsi pemangkasan ini, memungkinkan untuk menjadi benar dipotong dengan tidak ada langkah tambahan yang diambil.
Untuk mengaktifkan "Trim" pilihan, hanya memeriksa kotak ini di jendela PNGHat:

Memilih Lokasi untuk Ekspor

Serta secara otomatis pemangkasan sekitar gambar, Anda juga memiliki pilihan untuk secara khusus memilih wilayah yang Anda ingin ekspor. Ini hanya masalah menciptakan seleksi tenda sebelum Anda menekan tombol ekspor. Misalnya, membuat seleksi ini sebelum ekspor:

Akan memberikan image yang dihasilkan ini:

Scaling Images

Ketika Anda bekerja dengan gambar berbasis vektor Anda memiliki pilihan untuk secara otomatis skala gambar Anda ke atas atau bawah untuk berbagai ekspor, sehingga Anda dapat menangani dukungan retina dan juga berpotensi membuat beberapa ukuran gambar untuk tanggap.
Untuk menggunakan scaling, mengatur persentase yang Anda ingin menambah atau mengurangi dengan dalam "Skala" bidang jendela PNGHat:

Sisa proses lagi tetap sama, yaitu pilih lapisan / kelompok, tombol push. Dengan "tombol Play" kami hasil dari skala 200% adalah:

Mengontrol Image File Names

Cara termudah untuk mengendalikan bagaimana file yang diekspor akan diberi nama adalah melalui lapisan atau nama grup. Jika Anda memiliki satu kelompok atau lapisan yang dipilih file gambar Anda akan diberi nama untuk mencocokkan, dengan spasi diganti dengan tanda hubung. Jika Anda telah memilih beberapa kelompok dan atau lapisan, file Anda akan diberi nama untuk mencocokkan apa pun yang menonjol dalam stack.
Atau, Anda juga dapat memeriksa opsi nama PNGHat yang Prompt file dalam panel pengaturan jendela dan eksplisit memilih nama file Anda pada setiap ekspor.

Mencapai Pengaturan Panel

Untuk mencapai panel pengaturan, klik ikon roda gigi kecil di bagian bawah jendela:

Hal ini akan mengubah tampilan jendela sebagai berikut:

Untuk beralih kembali lagi, klik ikon roda gigi kedua kalinya.

Memilih Gambar Pilihan Ekspor

PNGHat memberi Anda dua format file untuk memilih dari: PNG dan JPEG.
Ketika Anda pertama kali menginstal dan menjalankan PNGHat pilihan default yang dipilih akan, seperti yang Anda harapkan, PNG. Namun untuk beralih ke JPEG hanya beralih pemilih di jendela PNGHat:

Anda juga dapat mengontrol pengaturan kualitas gambar yang diekspor dengan pergi ke pengaturan panel (dijelaskan di atas) dan:

Memilih antara PNG8 dan PNG24
Mencentang atau menghapus centang Optimalkan PNG
Mencentang atau menghapus centang Progressive JPEG
Mengatur tingkat kualitas JPEG dari kemungkinan 100

Mengontrol Copy dan Paste Anda Template

Keluar dari kotak PNGHat memberikan lima copy dan paste kode template yang dijelaskan di atas, namun Anda juga dapat mengedit template ini serta membuat Anda sendiri.
Sebuah kasus umum di mana Anda mungkin ingin mengedit template ini adalah untuk memiliki mereka mencerminkan path gambar Anda akan disimpan di. Dalam hal ini Anda mungkin mengubah {PATH} lapangan dari default dari /static/images/{FILE} , untuk sesuatu seperti images/{FILE} , seperti yang saya lakukan selama penggunaan pertama saya. Anda juga dapat mengubah segala aspek dari template utama, seperti mungkin menambahkan border=0 ke HTML <img> tag, atau apa pun yang mungkin Anda butuhkan untuk proyek Anda.
Selain itu, Anda dapat membuat template baru jika jenis kode yang Anda butuhkan tidak hadir secara default. Untuk melakukannya, klik ikon + di dekat bagian bawah panel pengaturan, memberikan template baru Anda nama dan menambahkan kode Anda, menggunakan variabel {WIDTH} , {HEIGHT} dan {PATH} namun Anda butuhkan.

Wrapping Up

Bahkan hanya melalui proses menulis artikel ini saya pribadi benar-benar merasa perbedaan menggunakan PNGHat, bukan default Photoshop ekspor. Semua gambar yang Anda lihat di atas yang dihasilkan oleh PNGHat, dan saya menemukan itu menyelamatkan saya banyak waktu. Serta menghemat waktu, saya juga menemukan minimal proses tombol push lebih halus, dan langkah-langkah yang lebih sedikit yang harus saya ambil untuk mendapatkan pekerjaan yang dilakukan dengan bahagia saya!
Ini mungkin mungkin ada waktu sesekali saya masih menggunakan ekspor asli Photoshop jika serangkaian keadaan yang benar-benar menuntut hal itu, tetapi untuk sebagian besar kasus PNGHat akan saya pergi ke metode ekspor pada keluar dari sini.
Anda dapat mempelajari lebih lanjut tentang PNGHat, dan juga menonton video plugin beraksi di situs PNGHat .

Translate