Cara Mengekspor Aset Photoshop Untuk Situs Menggunakan PNGHat

Baru-baru ini PNGHat merilis plugin untuk Photoshop, di buat oleh Source, membuat sebuah alur kerja yang sangat berbeda untuk mengekspor elemen PSD untuk digunakan di situs, permainan, aplikasi, atau tipe proyek apapun yang kamu kerjakan.

Dia adalah aplikasi yang kuat dengan fungsi yang berlimpah, namun fitur paling menariknya adalah dia menawarkan kemampuan untuk mengekspor dalam tiga langkah sederhana:

LANGKAH 1: Tekan Tombol
LANGKAH 2: Salin kode
LANGKAH 3: Untung!

Oke, sebenarnya hanya ada dua tahap, tapi ini memang sangatlah mudah. Plugin-nya akan mengeliminasi proses ekspor yang umum pada Photoshop seperti pemotongan, memberi nama potongan, mengurus area potongan yang saling menimpa, pratinnjau, seleksi pilihan, memilih opsi ekspor, menyimpan dan secara manual membuat kode yang mengintegrasikan gambar ke proyekmu.

Dia juga menangani pemangkasan area putih di sekitar elemen secara otomatis, dan menangani ekspor dalam aneka resolusi termasuk dukungan retina dan gambar responsif. Gambar bisa dihasilkan secara lokal ke komputermu, diunggah ke penyimpanan awan, atau bahkan dibuat menjadi kode Base64 hingga kamu tidak memerlukan berkas gambarnya sama sekali.

Mari mulai melihat inti dari plugin-nya; tombol untuk mengekspor gambar.

Tekan Tombol Ekspor

Mengekspor gambar menggunakan PNGHat benar-benar mudah. Contohnya, di antarmuka permainan ponsel dari Graphic Burger, anggap saja kamu ingin mengekspor "Play Button"-nya.

Pertama, pilih layer atau grup dari "Play Button".

Lalu kamu klik tombol Export Selected Layers PNGHat:

Dan begitulah, kamu mendapakat berkas PNG yang sempurna:

Begitulah! Dalam contoh ini kita menggunakan dua klik mouse dan menunggu sekitar dua detik.

Jika kamu mengekspor gambar secara lokal, kamu bisa mengatur kemanapun gambarnya akan pergi dengan menekan tombol ... yang akan kamu lihat pada bagian kanan dari bagian kedua panel PNGHat, lalu telusuri folder yang ingin kamu pilih.

Ada bermacam-macam pilihan yang bisa kamu atur dan ubah, akan kita bahas nanti. Namun, singkatnya, begitulah keseluruhan prosesnya; pilih, tekan tombol, selesai.

Mengopi dan Menempel Kode

Di saat yang sama PNGHat menghasilkan gambarmu, dia juga menyiapkan kode yang siap ditempel sehingga kamu dapat dengan mudah menggabungkan gambarnya dengan proyekmu. Kamu mendapatkan kode HTML, CSS, canvas, Android dan iOS, contohnya:

HTML:

1

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

CSS:

1

background-image: url(images/Play-btn.png);

2

width: 108px;

3

height: 109px;

Canvas:

1

var img = new Image();

2

img.onload = function () {

3

    ctx.drawImage(img, 0, 0, 108, 109);

4

};

5

img.src = 'images/Play-btn.png';

Android:

1

<ImageButton

2

    android:layout_width="wrap_content"

3

    android:layout_height="wrap_content"

4

    android:src="@drawable/Play-btn.png" />

iOS:

1

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

Dari sini kamu cukup menekan tombol "Copy" di jendela PNH\GHat dan kamu siap untuk menyalinnya langsung ke berkas proyek yang relevan:

Built-in Cloud / CDN Hosting

Ketimbang menggunakan FTP ke gambarmu setelah diekspor, PNGHat memberikanmu pilihan untuk mengunggah secara cepat gambarmu ke penyimapanan awan yang mereka sediakan. Saat ini plugin-nya hadir dengan penyimpanan awan gratis sebesar 1Gb, dengan gambar yang dikirim melalui CDN sehingga pengguna dilayani dari lokasi terdekat yang mungkin.

Mengekspor gambar untuk hosting telah disediakan juga tidak berbeda dengan proses ekspor lokal. Untuk mengaktifkan unggah otomatis pilih opsi "Cloud" di bagian pertama dari jendela PNGHat:

Dari sana, kamu menggunakan pendekatan "select" dan "push button" yang sma seperti yang dijelaskan di atas. Perbedaannya adalah bahwa setelah gambar diunggah secara otomatis ke akunmu, kamu akan diberikan tautan berbasis awan. Contohnya:

1

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

Base64

Opsi ekspor ketiga yang disediakan PNGHat adalah Base64 yang membuat gambarmu dalam kode murni yang bis digabungkan ke proyek HTML, CSS atau canvas. Tanpa memerlukan berkas gambar terpisah, elemen-nya bisa dimuat melalui permintaan http tambahan dan karena \nya kamu bisa meningkatkan kecepatan muat proyek-mu. Saat berganti antara ekspor lokal atau awan, kamu bisa memilih Base64 di bagian atas jendela PNGHat.

Kkode Base64 bisa digunakan dengan HTML, CSS dan canvas, contohnya (kode yang disingkat):

HTML

1

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

CSS

1

background-image: url(data:image/png;base64,iVBO......FTkSuQmCC);

2

width: 108px;

3

height: 109px;

Canvas

1

var img = new Image();

2

img.onload = function () {

3

    ctx.drawImage(img, 0, 0, 108, 109);

4

};

5

img.src = 'data:image/png;base64,iVBO......FTkSuQmCC';

Dalam pengalaman saya, Base64 sangat bagus untuk pengulangan kecil gambar-gambar latarbelakang dan grafik-grafik dengan jumlah waran terbatas. Saya juga menemukan cara paling efektif penggunaan Base64 adalah dengan CSS preprocessors sehingga kode yang membuat gambar bisa disimpan sebagai sebuah variabel lalu digunakan berkali-kali dan diperbarui dengan mudah saat dibutuhkan.

PNG8 Transparan Keren

Satu hal yang saya anggap sangat mengesankan mengenai PNGHat adalah kemudahan di mana kamu bisa mengekspor PNG8 transparan yang menarik dalam rangka menjaga ukuran berkasnya kecil. Saya menjalankan beberapa tes menggunakan maket DVD dari Graphic Burger, pada sebuah gambar yang e\diekspor apda 758px * m758px tanpa melakukan tweak apapun, dan saya menemukan dua hal.

Pertama, perbedaan dalam ukuran berkas PNG24 yang diekspor dari Photoshop dengan PNGHat adalah 6Kb. Jadi ukuran berkasnya hampir setara, namun saya lebih suka menggunakan PNGHat untuk melakukan ekspor karena kecepatan dan kemudahannya.

Yang kedua, yang merupakan hasil yang lebih menarik. Di mana tanpa dibayangkan PNGHat menangani transparansi dari berkas PNG8 dengan sangat baik. Walau pengaturan bawaan Photoshop menghasilkan berkas yang berukuran hanya 186Kb, tapi dia masih memiliki pita putih seperti yang bisa kamu lihat pada gambar berikut. Umumnya, transparansi digunakan sehingga gambar bisa tampil dengan baik di atas sebuah latarbelakang sehingga pita-pita biasanya mencegah tipe format ini untuk digunakan.

PNGHat di sisi lain embuat sebuah berkas PNG8 yang secara visual tidak dapat dibedakanapat dibedakan dengan berkas PNG24-nya. Namun dengan ukuran yang hanya setengahnya yaitu 268KB vs 642KB / 648Kb. Di mana ini membuatnya menjadi pilihan yang sangat menarik untuk ekspor PNG transparan yang teroptimasi.

Memangkas Area Putih

PNGHat juga bisa secara otomatis memangkas area di sekitar gambar yang kamu ekspro, menyingkirkanmu dari masalah memastikkan potongan digarisi secara  sempurna dengan pinggir dari elemen-nya. "Play button" dari contoh pertama pada artikel ini telah diekspor menggunakan fungsi pangkas ini, mengizinkan dia untuk dipotong secara benar tanpa memerlukan langkah tambahan.

Untuk mengaktifkan opsi "Trim", cukup centang kotak ini di jendela PNGHat:

Memilih Are untuk Ekspor

Seiring gambar dipangkas secara otomatis, kamu juga memiliki pilihan untuk secara spesifik memilih bagian yang ingin kamu ekspor. Ini hanyalah tentang membuat seleksi marquee sebelum kamu menekan tombol ekspor. Contohnya, membuat seleksi ini sebelum mengekspor:

Akan menghasilkan gambar ini:

Mengubah Ukuran Gambar

Saat kamu bekerja dengan gambar berbasis vektor kamu memiliki pilihan untuk secara otomatis mengubah ukuran gambar jadi lebih besar atau kecil. Jadi kamu bisa mendukung retina bahkan membuat aneka ukuran gambar untuk mendukung responsibilitas.

Untuk menggunakan penskalaan, atur persentase yang kamu ingin tambah atau kurangi di field "Scale" dari jendela PNGHat:

sisa dari prosesnya masih sama, yaitu memilih layer/grup, tekan tombol. Berikut hasil penskalaan sebesar 200% ke "Play button" kita:

Mengontrol Nama Berkas Gambar

Cara termudah untuk mengontrol cara berkas gambarmu dinamai adalah melalui nama layer atau group. Jika kamu memiliki satu grup atau layer yang menseleksi berkasmu. Maka dia akan dinamai sesuai itu, dengan spasi yang diganti tanda strip. Jika kamu memilih banyak grup atau layer, berkasmu akan dinamai sesuai apapun yang berada di paling atas tumpukan.

Jika tidak akmu juga bisa mengecek opsi PNGHat Prompt file name di panel jendela pengaturan dan secara eksplisit memilih nama berkas di tiap pengeksporan.

Meraih Panel Pengaturan

Untuk meraih panel pengaturan, klik kunci kecil di bagian bawah jendela:

Ini akan mengganti tampilan jendela menjadi sebagai berikut:

Untuk kembali lagi, klik ikon kunci untuk kedua kalinya.

Memilih Opsi Ekspor Gambar

PNGHat memberimu dua format berkas untuk dipilih: PNG dan JPEG.

Ketika kamu memasang pertama kaonya dan menjalankan PNGHat, maka opsi bawaan yang akan berjalan. Seperti yang kamu bayangkan, PNG. Namun untuk berpindah keJPEG cukup geser selector di jendela PNGHat:

Kamu juga bisa mengatur kualitas pengaturan dari gambar yang diekspor dengan pergi ke panel pengaturan (Dideskripsikan di atas) dan:

• Memilih antara PNG8 dan PNG24
  
• Mencentang atau tidak centang Optimize PNG
• Mencentang atau tidak centang Progressive JPEG
  
• Mengatur tingkat kualitas berkas JPEG hingga 100
  

Mengatur Template Kopi dan Tempel-mu

Tanpa disangka, PNGHat memberikanmu lima template kode salin dan tempel yang dideskripsikan di atas, namun kamu juga bisa mengedit template dan membuat template-mu sendiri.

Kasus umum yang ingin kamu ubah adalah untuk membuat mereka menampilkan path di mana gambar tersimpan. Dalam kasus ini kamu mengganti field {PATH} dari /static/images/{FILE}, ke sesuatu yang seperti images/{FILE}, seperti saya saya lakukan pada penggunaan pertama. Kamu juga bisa mengganti aspek apapun dari template utama, seperti menambahkan border=0 ke tag <img> HTML, atau apapun yang mungkin kamu butuhkan untuk proyekmu.

Sebagai tambahan, kamu bisa emmbuat template baru jika tipe kode yang kamu butuhkan tidak muncul secara bawaan. Untuk melakukannya, klik ikon + di dekat bagian bawah panel pengaturan, berikan template barumu sebuah nama dan tambahkan kodemu menggunakan variabel {WIDTH}, {HEIGHT} dan {PATH}. Apapun yang kamu butuhkan.

Kesimpulan

Bahkan hanya dari proses penulisan artikel ini, saya secara pribadi merasakan perbedaan saat menggunakan PNGHat ketimbang menggunakan eskpor bawaan Photoshop. semua gambar yang kamu lihat di atas dibuat oleh PNGHat, dan saya merasa dia menghemat banyak waktu saya. Selain menghemat waktu, saya juga mendapatkan prosees menekan tombol jauh lebih halus, dan semakin sedikit langkah yang perlu diselesaikan, semakin senang saya.

Mungkin masih akan ada beberapa saat di mana saya menggunakan ekspor bawaan Photoshop saat keadaannya benar-beanr memaksa itu, tapi pada kebanyakan kasus PNGHat akan menjadi metode ekspor saya.

Kamu bisa belajar lebih mengenai PNGHat, dan juga menonton video mengenai cara kerja plugin di situs PNGHat.