Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Avocode
Webdesign

Memperkenalkan Avocode - PSD ke Kode Tanpa Photoshop

by
Length:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Indonesian (Bahasa Indonesia) translation by Diangr (you can also view the original English article)

Photoshop telah menjadi bagian dari desain web selama bertahun-tahun, dan kemungkinan besar akan terus seperti itu untuk waktu yang lama. Jika anda mendesain web menggunakan Photoshop, atau Anda adalah pengembang yang menangani pengkodean PSD, kemungkinan ada beberapa masalah yang anda hadapi secara rutin.

Bahkan jika anda telah beralih dari Photoshop ke Sketch untuk tahap desain alur kerjamu, anda masih akan menghadapi masalah coders yang membutuhkan akses ke perangkat lunak yang mereka tidak akan gunakan. Dengan salah satu dari kedua program tersebut, kemungkinan anda akan mencapai guncangan kecepatan yang hanya setara untuk kursus ketika menggunakan alat yang tujuan utamanya adalah desain, bukan menghasilkan kode untuk web.

Dibuat oleh sumber

Orang-orang di Source telah memproduksi ekstensi untuk Photoshop sejak 2012. Plugin mereka dirancang untuk meringankan beberapa masalah yang paling umum dalam desain proses kode, seperti menciptakan CSS yang secara akurat mewakili Desain, dan ekspor gambar secara efisien.

Saya sudah lama menjadi penggemar plugin CSSHat mereka, yang menghasilkan kode CSS atau preprocessor dari lapisan Photoshop. Saya juga menggunakan plugin PNGHat mereka hampir setiap kali saya menggunakan Photoshop, untuk mengekspor gambar PNG, JPEG atau Base64. Anda dapat melihat kedua plugin ini dalam tindakan dalam tutorial dua bagian saya:

Plugin ini berfokus pada tahap pengembang proses pembuatan situs; mengubah PSDs menjadi situs web yang berfungsi penuh. Mengingat banyak pengembang tidak bahkan perlu Photoshop untuk tujuan apapun selain mengakses PSDs, itu adalah langkah berikutnya alami untuk melihat jenis alur kerja tambahan yang diambil langsung dari Photoshop bersama-sama.

Itulah apa sumber desktop baru dan alat berbasis web, Avocode, adalah semua tentang.

Avocode adalah sebuah program yang adalah tujuan dibangun untuk proses akan dari PSD (atau sketsa) untuk kode. Tidak secara otomatis menghasilkan situsmu, melainkan ini memberimu satu set alat yang memungkinkan anda untuk membuat situs dengan cara yang anda secara pribadi lebih suka, tapi lebih efisien daripada ketika bekerja secara langsung di dalam Photoshop atau sketsa. Avocode bertujuan untuk menjembatani kesenjangan antara desain dan pengkodean tahap pengembangan web.

Buka

Dalam artikel ini kita akan melihat bagaimana anda dapat menggunakan Avocode untuk:

  • Membuka PSDs untuk pengkodean tanpa Photoshop, dan tanpa email atau meng-upload file.
  • Pilih lapisan, kelompok dan bergerak dalam desain.
  • Menghasilkan CSS atau preprocessor kode untuk unsur-unsur dalam desainmu.
  • Mendapatkan pengukuran dimensi yang akurat yang digunakan untuk membangun tata letak anda.
  • Menyalin konten teks untuk mudah penempatan dalam kode.
  • Ekstrak palet warna dan hexcodes dari PSDs.
  • Ekspor gambar, bahkan dari beberapa lapisan, tanpa harus berurusan dengan proses mengiris.

Buka PSDs tanpa Photoshop

Dengan Avocode, PSDs dibagi antara desainer dan pengembang melalui proses sinkronisasi otomatis. Jika Anda seorang desainer Anda akan menginstal Photoshop plugin dan, ketika desain Anda sudah siap, Anda hanya akan menekan "Sinkronkan sekarang" tombol untuk membuat PSD Anda tersedia untuk pengembang.

Cara lain untuk melakukan sinkronisasi sedang dalam proses, dengan Dropbox sebagai opsi yang dikonfirmasi akan dirilis di masa mendatang. Dilihat oleh antarmuka beta 0.5.0 saat ini kita mungkin juga melihat sinkronisasi melalui Layervault, unggah langsung dan tarik file langsung dari penyimpanan lokal.

Jika anda seorang pengembang, anda akan menerima pemberitahuan melalui Avocode bahwa desain baru tersedia, pada titik dimana anda dapat membukanya langsung melalui satu klik di panel penelusuran PSD. Ini menyingkirkan kebutuhan untuk mengirim email mega-lampiran atau mentransfer file PSD secara manual.

Seiring dengan masing-masing desain datang sistem manajemen versi built-in. Iterasi progresif dari PSD dapat dengan mudah disinkronkan antara perancang dan pengembang, sekali lagi dengan menekan tombol plugin Photoshop Sync sekarang, dengan setiap versi dapat diakses melalui panel penelusuran PSD. Avocode mengingat sebelumnya ekspor pengaturan gambar dalam rancangan, berarti tugas-tugas seperti mengekspor baru saja diperbarui gambar dapat diotomatisasi.

Memilih dan menavigasi

Setelah anda memiliki PSD buka di Avocode anda akan menemukan berinteraksi dengan itu harus cukup intuitif. Seperti Photoshop, Avocode memiliki lapisan Panel dimana anda bisa melihat semua PSD lapisan dan kelompok. Lapisan ini dan kelompok dapat semua akan ditampilkan atau disembunyikan, dan anda juga dapat mengklik untuk memilih salah satu dari mereka.

Juga memilih elemen desain melalui Panel lapisan, anda dapat memilih Pilih Alat dari panel alat di sebelah kiri, kemudian klik item di panggung langsung. Untuk memilih beberapa item, hanya tahan SHIFT dan terus mengklik item yang anda inginkan untuk memilih.

Multi pilih karya apakah mengklik langsung pada tahap atau pada Panel Lapisan.

Untuk panci di sekitar desain memilih Alat Tangan kemudian klik dan drag untuk bergerak.

Menghasilkan CSS dan kode Preprocessor

Dengan setiap lapisan yang dipilih dan Inspeksi Panel terbuka anda akan melihat CSS untuk bahwa output item dalam panel Kode ayat, dalam bentuk preprocessor atau mentah tergantung pada preferensimu. Ini menggunakan CSS generasi logika yang sama sebagai plugin CSSHat, yang masih generator CSS paling visual akurat yang pernah kulihat di antara pilihan yang tersedia saat ini.

Meraih CSS untuk item semudah mengklik tombol Salin CSS atau Salin LESS, sehingga anda dapat menempelkan ke stylesheet anda atau langsung menyorot garis yang ingin anda gunakan dan menyalinnya dari sana. Jika anda mengalami preprocessor kode yang dihasilkan, itu akan secara otomatis memasukkan mixins dari perpustakaan mixin pilihan anda. Pilihan yang tersedia saat ini adalah:

  • KURANG + LESSHat
  • Sass + Kompas
  • SCSS + Kompas
  • Sass + Bourbon
  • SCSS + Bourbon
  • Stylus + Nib

Mendapatkan tata letak akurat pengukuran

Saya yakin saya tidak sendirian ketika saya mengatakan bahwa mencari letak dimensi dalam Photoshop bisa agak sulit. Avocode's pendekatan untuk masalah ini adalah sangat lurus ke depan. Untuk mendapatkan tinggi dan lebar item:

1. Pilih Alat Pilih dan pilih item apa pun, atau beberapa item.

2. Baca sorot nilai di sudut kiri bawah seleksi biru kotak.

3. atau, membaca nilai di sebelah kanan preview ibu jari di bagian atas Panel Inspeksi.

Untuk mengetahui jarak horizontal dan vertikal dalam pixel antara dua item:

1. Pilih Alat Ukur dan pilih item.

2. gerakkan barang lainnya dan membaca nilai di jalur merah horisontal dan vertikal.

Salin Konten Teks

Jika anda memiliki lapisan teks yang dipilih anda akan melihat preview terpotong konten dalam Panel Inspeksi, serta yang lebar dan tinggi, dan cepat Salin teks tombolmu dapat menggunakan untuk ambil teks di dalamnya untuk paste ke dalam kodemu.

Menghasilkan palet warna

1. Pilih Color Picker Tool dan gerakkan mousemu di sekitar panggung, tonton pratinjau warna sampai anda memiliki warna yang anda inginkan.

2. Klik di lokasi itu dan warna anda akan ditambahkan ke bagian Warna di Panel Inspeksi, dengan kode-kode heksadesimal ditampilkan untuk masing-masing.

Ekspor Gambar

1. Pilih Alat Pilih dan pilih item apa pun, atau beberapa item.

2. Di Panel Inspeksi di bawah subseksi Ekspor panel, klik ikon file kecil dengan tanda tambah biru di atasnya untuk menetapkan pilihan anda sebagai aset.

3. Nama aset anda akan diambil dari nama lapisan. Pilih ekspor PNG, JPEG atau SVG, kemudian klik "Ekspor sekarang". Jika ini adalah ekspor aset pertama dari proyek anda akan dapat memilih folder tujuan, jika tidak file akan diekspor langsung.

Setelah anda menetapkan pilihanmu sebagai aset, itu juga akan muncul di panel aset. Dari sini anda dapat mengklik ikon kaca pembesar untuk dibawa ke folder yang menyimpan ekspor aset anda.

Anda juga dapat mengklik tombol "Dapatkan Kode" di bagian atas panel, atau ikon <> di sebelah kanan nama asetmu, untuk menghasilkan HTML, CSS, atau KURANG yang dapat anda gunakan untuk menempatkan aset dalam kode.

Di PNGHat plugin untuk Photoshop juga kontrol atas tepat JPEG dan PNG ekspor pengaturan serta skala pilihan, jadi saya membayangkan kita akan melihat kontrol ini sama didaftarkan ke Avocode segera.

Untuk mendapatkan gambaran tentang apa yang harus diantisipasi dalam proses pengeksporan gambar Avocode, baca lebih lanjut tentang PNGHat di sini: Cara Mengekspor Aset Photoshop Untuk Web Dengan PNGHat

Fitur Tambahan Dalam Pengembangan

Sekarang Avocode adalah beta pribadi begitu ada masih beberapa sangat menarik mencari memiliki karena keluar dalam waktu dekat. App dijadwalkan untuk pindah ke versi beta publik di beberapa titik musim panas ini, setelah itu kita akan melihat peluncuran resmi.

Sebagai pengembangan bergerak, berikut adalah beberapa hal yang kita dapat mengantisipasi:

Penuh Multi Platform dan Web Berdasarkan Dukungan

Apa pun OS yang anda gunakan, atau bahkan jika anda menggunakan perangkat seluler, anda akan dapat menggunakan Avocode. Saat ini versi beta tertutup Avocode sedang diproses di Mac, tetapi pelepasan penuh aplikasi asli juga akan berjalan di Windows dan Linux, dan versi web akan berjalan di browser modern apa pun.

Digunakan dengan sketsa berbasis desain

Laporan sumber mereka sudah memiliki prototipe kerja untuk memberikan semua fungsi yang sama untuk sketsa berbasis desain. Jadi jika anda seorang desainer menggunakan sketsa pada Mac, seorang desainer menggunakan Photoshop pada Windows, seorang pengembang menulis kode pada Linux, atau jika anda menggunakan kombinasi lainnya anda akan sama siap untuk pergi.

Editor Kode Atom Di Dalam Avocode

Avocode benar-benar dibangun di atas Atom Code Editor yang dihasilkan oleh GitHub. Apa yang benar-benar menarik tentang ini adalah itu berarti akan ada sepenuhnya matang, kuat dan kaya fitur kode editor tersedia tepat di dalam Avocode setelah rilis umum. Mampu untuk menangani seluruh proses pengkodean tepat di dalam aplikasi tunggal yang benar-benar topi off apa adalah membentuk sebagai satu set fitur kuat.

Variabel warna

Serta mampu mengambil hexcodes untuk warna yang ditambahkan ke paletmu, anda juga akan dapat menetapkan nama variabel ke setiap warna untuk digunakan dalam kode preprocessormu

FTP dibangun dan CDN Upload

Sebagai dengan banyak fungsi lain pada jalan bagi Avocode, kemampuan untuk meng-upload langsung ke CDN sudah hadir di salah satu sumber plugin, PNGHat, jadi kita bisa menebak bahwa fungsi akan menjadi sama. Gambar dapat diekspor secara lokal melalui Avocode, atau atau anda akan dapat mendorong mereka langsung ke CDN dan memiliki lokasi file ditambahkan ke output CSS Anda. Anda juga akan memiliki opsi untuk FTP gambar langsung ke servermu saat diekspor.

Terhubung dengan TypeKit dan Google font

Video pengantar untuk Avocode menyebutkan akan ada pilihan untuk mengintegrasikan dengan TypeKit dan font Google ketika menghasilkan kode pengaturan font. Ini bukan lagi dalam versi beta tertutup atau salah satu sumber plugin jadi saya tidak yakin persis bagaimana ini akan bekerja, tapi saya pribadi berharap itu akan merampingkan proses menyusun URL yang sesuai dan kode yang digunakan untuk memanggil berbagai font.

Base64 dan Sprite Lembar Ekspor

Tahap pertama dari ekspor gambar dalam versi beta yang tertutup Avocode adalah untuk JPEG, PNG dan SVG. Namun sumber sudah memiliki proses yang didirikan untuk Base64 generasi melalui mereka PNGHat plugin untuk Photoshop, jadi saya berharap kita akan melihat mereka Menggambar dari kode dasar untuk membawanya ke dalam Avocode. Mereka juga berniat untuk mendukung produksi sprite lembar bersama dengan CSS diperlukan.

Ekspor Kode untuk iOS

Fokus dari Avocode akan web sampai mencapai kedewasaan penuh, namun ada juga rencana dalam karya-karya untuk memungkinkan untuk digunakan sebagai bagian dari pengembangan iOS.

Sumber sudah memiliki sebuah plugin yang disebut iOSHat yang bekerja dalam Photoshop untuk menghasilkan Objective-C atau Swift kode dari Photoshop lapisan untuk digunakan dalam pengembangan iOS. Ada kemungkinan dukungan untuk iOS kode ekspor dalam Avocode akan bekerja dalam banyak cara yang sama.

Paket untuk Kostum Ekstensi

Ada item menu yang menarik di Avocode; satu yang mengisyaratkan kemungkinan diperpanjang masa depan dari platform, dengan beberapa paket awal sudah di tempat:

Sumber mengatakan mereka terinspirasi oleh pelepasan Atom untuk mengadopsi metode yang sama memungkinkan kustom "paket" yang akan dibuat dan dibagi di antara masyarakat. Kita dapat berharap untuk melihat jalur ini membuka sebagai pengembangan bergerak.

Preorder Lock di Diskon 70%

Pada saat sumber terus menggelar fitur dan bekerja di umpan balik pengguna beta sebagai mereka pergi bersama. Ketika perangkat lunak diumumkan kepada publik itu akan tersedia melalui model berlangganan untuk $240 per tahun.

Namun, jika anda mendapatkan di awal pada preordermu akan mengunci di tempat dengan diskon abadi 70%, membawanya ke $69 per tahun sebagai gantinya. Anda juga akan mendapatkan akses ke beta pribadi, dan selama periode ini Anda akan dapat menggunakan perangkat lunak secara gratis. Langganan Anda yang sebenarnya hanya dimulai ketika Avocode masuk ke peluncuran publik.

Preorder tempat terbatas, dan pada saat ini ada kurang dari 230 tempat tersedia. Untuk preorder: http://avocode.com/preorder.html

Link yang Berguna

Untuk informasi tambahan kunjungi:

Kesimpulan

Aku akan meninggalkan gambar kesimpulan sepenuhnya terserah anda! Apa yang anda pikirkan, apakah anda terkejut dengan salah satu fitur sumber telah mengumumkan? Akankah Avocode membentuk bagian dari alur kerjamu di masa depan? Beri tahu kami di komentar!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.