Desain Responsif dengan Adobe Photoshop dan Adobe CC Ujung Reflow CC (Preview)

Desain Responsif dengan Adobe Photoshop dan Adobe CC Ujung Reflow CC (Preview)

Perubahan konstan . Yang tampaknya menjadi mantra web . Selama beberapa tahun terakhir , banyak yang berubah berkaitan dengan bagaimana kita konsep, desain , dan membangun situs . Selama bertahun-tahun , banyak dari kita sudah mulai desain web kami dalam program seperti Adobe Illustrator atau Photoshop ( " bagaimana Fireworks ? " Aku bisa mendengar seseorang berteriak ) . Sejak desain responsif muncul menjadi ada, desainer dan pengembang telah dihadapkan dengan tantangan alur kerja . Apakah Anda merancang beberapa iterasi (mobile , tablet , desktop yang ) dalam program seperti Photoshop dan berharap penjelasan interaktivitas akan cukup , atau apakah Anda merancang " di browser , " atau kombinasi ? Desain responsif dan semua teknologi baru yang menarik yang kita miliki di tangan pasti game changer .
The web desain landscape berubah , tapi dengan Ujung Reflow CC dan CC Photoshop , desainer dapat membuat mockup kerja yang akan memberikan klien ( atau lainnya) gagasan tentang apa desain responsif selesai akan terlihat seperti . Adobe Ujung Reflow CC terhubung langsung ke Photoshop CC sehingga Anda dapat dengan mudah mengimpor aset , konten , dan bentuk langsung ke Reflow , menciptakan titik awal untuk desain responsif Anda . Ujung Reflow sebenarnya alat desain yang dapat Anda gunakan untuk merancang dan desain tes dalam ukuran layar yang berbeda ( lihat Gambar 1 ) .
CATATAN
Ujung Reflow masih merupakan " Preview " produk, yang berarti belum dirilis sebagai produk 1.0 . Ini bukan metode fitur lengkap dan masih didefinisikan tidak jelas dari ekspor , tetapi memiliki banyak potensi .
Pada artikel ini , saya akan membawa Anda melalui proses desain responsif generik , mulai di Photoshop , untuk memberikan gambaran bagaimana itu dimaksudkan untuk bekerja .


Gambar 1 Ujung Reflow beraksi
Mari kita lihat alur kerja

Jadi, mari kita lihat di Photoshop CC ke Edge Reflow CC alur kerja.

   1.  Jika Anda ingin mengikuti bersama, men-download percobaan Edge Reflow CC dan Photoshop CC (jika Anda belum memilikinya). Juga, download demo file Photoshop ke bagian bawah halaman yang sama (lihat Gambar 2).
 
Gambar 2 Download program ( jika perlu ) dan demo berkas .

    CATATAN

    Jika Anda adalah pelanggan Creative Cloud , download aplikasi dari awan ( jika Anda belum melakukannya ) dan pastikan mereka up to date.
   2.  Simpan demo Photoshop file yang bernama BracketsIO.psd yang Anda download dari Edge situs Reflow pada langkah 1 , dalam folder pada hard drive Anda . Buka itu . Berkas PSD di Photoshop CC .
Adobe Photoshop CC baru-baru ini diperbarui dengan fitur baru yang disebut Adobe Generator . Hal ini memungkinkan Anda untuk membuat aset gambar secara real time saat Anda bekerja , menghilangkan langkah-langkah membosankan menyalin , mengiris dan mengekspor setiap lapisan secara manual , dan menghemat waktu . Ini akan ikut bermain dalam alur kerja Ujung Reflow , seperti yang akan Anda lihat .
Selanjutnya, Anda akan melihat bagaimana Anda perlu mengatur file desain Anda di Photoshop CC untuk dapat menggunakan konten di Ujung Reflow .

   1. Lihat di panel Layers di Photoshop CC , dan Anda akan melihat bahwa beberapa lapisan yang mengandung vektor dan raster konten gambar diberi nama dengan ekstensi gambar , seperti " hero.png " ( lihat Gambar 3 ) . 
 
Gambar 3 Menyiapkan lapisan dan kelompok penamaan
Dalam rangka untuk menghasilkan gambar web - dioptimalkan dari konten di Photoshop , Anda perlu mengubah nama lapisan atau kelompok lapisan yang ingin Anda ekspor , menambahkan ekstensi gambar web seperti png . , Gif . , Atau jpg . . Jadi , misalnya, jika lapisan disebut " logo " dan Anda ingin menjadi PNG8 , Anda bisa nama itu sebagai " logo.png8 . "
Berikut adalah beberapa contoh :

    . png ( nilai default adalah png32 dengan alpha semi- transparan ) , PNG8 . , png24 . , png32 .
    jpg ( nilai default: 9 ) . . . , jpg ( 1-10 ) , jpg ( 1-100 % )
    gif .
    1 - n % , ( Number ) px x ( Number ) px untuk skala
Berikut adalah beberapa contoh bagaimana tag dapat digunakan :

    " Logo.png " menghasilkan file png32
    " Hero.jpg10 " menghasilkan aset 1x dengan kualitas max
Anda bahkan dapat pergi sejauh untuk membuat beberapa aset untuk setiap gambar . Hal ini dapat berguna untuk menciptakan gambar untuk menampilkan resolusi tinggi - res dan standar; " 200 % logo - retina.png , logo.png " menghasilkan baik 2x ( high- res ) dan 1x ( res standar ) aset.
The Adobe Generator akan digunakan untuk membuat gambar yang digunakan dalam Adobe Ujung Reflow dan membuatnya sehingga kita tidak lagi harus mengiris dalam banyak kasus .
CATATAN
Dengan memilih File> Hasilkan > Aset Gambar, Anda dapat membuat aset web yang dapat Anda gunakan di mana saja , tidak hanya di Ujung Reflow ( lihat Gambar 4 ) . Selama opsi yang dipilih , gambar dioptimalkan akan auto-update . Selain itu, langkah ini tidak diperlukan untuk membawa konten desain Anda ke Ujung Reflow .
 

Gambar 4 Gunakan Adobe Generator untuk menciptakan aset image

Sekarang bahwa isi gambar disiapkan dalam panel Layers, Anda dapat membuat proyek Reflow.
Pilih File> Hasilkan> Ujung Reflow Project.

2. Lihat dalam folder yang berisi psd terbuka (BracketsIO.psd). Anda akan melihat sebuah folder baru yang disebut "BracketsIO-reflow." Folder ini berisi file proyek Reflow disebut BracketsIO.rflw serta aset yang dihasilkan dalam folder bernama "aset" (lihat Gambar 5).

 

Gambar 5 Reflow berkas dan aset proyek
3. Buka file BracketsIO.rflw dengan mengklik dua kali, dan harus terbuka di Adobe Ujung Reflow.
 Anda kemungkinan besar akan melihat Ganti Hilang Font kotak dialog (lihat Gambar 6). Tepi Reflow memungkinkan Anda untuk mengakses dan bekerja dengan font web tersedia dengan berlangganan Creative Cloud (disebut Edge Web Fonts). Jika Anda menggunakan font Creative Cloud dengan hanya sinkronisasi font Typekit Anda menggunakan Cloud Kreatif untuk mendapatkan mereka pada desktop Anda, saya menemukan bahwa mereka saat ini tidak didukung (ini mungkin berubah di masa depan).
Font "Myriad Pro" bukan font web yang didukung, sehingga Anda dapat memilih dari salah satu Ujung Font Web (klik T + atau pilih Manage Font dari menu) atau dengan menambahkan ID Typekit.
4. Pilih Sumber Sans Pro dari menu untuk menggantikan Myriad Pro dengan Sumber Sans Pro.
 
Gambar 6 Ganti font hilang

Setelah memperbaiki font yang hilang, tata letak akan dihasilkan di Ujung Reflow. Ini hanyalah sebuah titik awal bagi Anda dan mungkin tidak mencerminkan file Photoshop persis.
5. Klik ikon panel Asset Perpustakaan di sisi kanan dari ruang kerja untuk menunjukkan aset proyek. Anda harus melihat semua gambar yang dihasilkan dari lapisan bernama / kelompok di Photoshop. Panel ini adalah di mana Anda dapat menghapus aset, memperbarui aset, dan relink ke aset lain (antara lain).

PERHATIAN

Hati-hati! Ketika Anda menghapus aset, gambar dihapus dari folder dan dihapus dari desain.

Gambar 7 Aset yang dihasilkan untuk proyek Ujung kami oleh mesin Adobe Generator

Pada titik ini, Anda bisa pergi tentang memilih konten dalam desain dan membuat suntingan untuk mendapatkan desain di mana Anda ingin menjadi.
6. Ambil pegangan mengubah ukuran di sisi kanan area desain dan tarik ke kiri.
Gambar 8 Resize desain

Anda akan melihat pergeseran konten, beberapa di antaranya tidak seperti yang Anda akan inginkan. The resize handle adalah bagaimana Anda melihat bagaimana desain muncul dalam lebar viewport yang berbeda (berpikir lebar browser). Saat ini tampilan desain ditetapkan pada 2500 px lebar karena itulah lebar file Photoshop. Itu sangat besar dan jauh lebih luas daripada kebanyakan layar. Tugas kita adalah untuk merancang untuk semua lebar viewport sehingga konten yang diperlukan muncul dan itu terlihat bagus (dan mudah dinavigasi).
7. Tarik pegangan mengubah ukuran untuk kira-kira 1000px tanda pada penggaris horisontal. Klik + untuk ujung kanan penguasa untuk menambahkan media permintaan breakpoint. Sebuah bar warna muncul di atas mistar (saya adalah ungu), dan memiliki nomor di sebelah kanan yang menunjukkan lebar viewport pada breakpoint tersebut.
 
Gambar 9 Mengatur media yang pertama permintaan breakpoint Anda

Dalam desain responsif, permintaan media, adalah cara untuk menunjukkan kepada perubahan browser dalam styling CSS berdasarkan parameter seperti lebar atau orientasi (antara lain). Kami menyebutnya breakpoints ini karena mereka dimasukkan untuk memperbaiki rancangan dan UI masalah (antara lain). Breakpoints datang dalam utama (seperti tiga ukuran-desktop utama perangkat, tablet, dan mobile) dan minor ukuran (ukuran di mana memperbaiki kecil mungkin diperlukan).

TIP

Anda dapat menarik tepi kanan bar warna (saya adalah ungu) untuk mengubah lebar permintaan media yang.
8. Tarik pegangan resize menjadi sekitar 768 px (untuk latihan ini, jangan khawatir tentang hal itu menjadi tepat). Klik + lagi untuk mengatur breakpoint lain. 
 

Figure 10 Set breakpoint lain
9. Klik masing-masing baris warna di atas desain (tepat di atas mistar) untuk cepat mengubah antara ukuran viewport.

 

Gambar 11 Arahkan antara breakpoints

Kerja keras datang ketika Anda perlu mengkonfigurasi ulang desain untuk bekerja pada ukuran viewport tertentu (breakpoint). Aku akan memeriksa TV video ini Adobe (dan video lainnya pada Adobe TV) untuk mempelajari lebih lanjut tentang mengedit desain responsif.

Hari-hari ini, desain ponsel-pertama adalah semua kemarahan, dan masuk akal dalam banyak kasus. Ponsel pertama berarti Anda merancang untuk perangkat mobile pertama, dan kemudian, didasarkan pada desain dan konten, semakin meningkatkan desain berdasarkan ukuran viewport dan perangkat (tablet vs desktop yang kadang-kadang). Saya ingin menyebutkan ini karena desain Adobe menawarkan tidak diarahkan mobile pertama. Jika Anda ingin melakukan ini, Anda bisa merancang file Photoshop pada lebar mobile (lihat Gambar 12).

 

Gambar 12 Versi desain desktop di Photoshop (kiri) dan desain mobile (kanan)

Besar fitur lain dari bekerja dengan Photoshop CC adalah bahwa Anda dapat membuat halaman baru berdasarkan desain lainnya atau memperbarui aset (gambar) dari file asli Photoshop dengan cepat.
10. Klik ikon Photoshop CC Connect di sisi kanan ruang kerja, dan Anda akan melihat bahwa Edge Reflow file proyek terhubung ke file BracketsIO.psd.

Satu hal yang menarik untuk dicatat adalah bahwa file apa pun yang terbuka di Photoshop, panel di Ujung Reflow akan menunjukkan bahwa file proyek terhubung ke file terbuka. 

Panel Gambar 13 The Photoshop CC Connect
Jika Anda adalah untuk membuat perubahan ke file BracketsIO.psd di Photoshop , seperti teks atau gambar perubahan , perubahan itu tidak akan tercermin dalam Ujung Reflow , secara default . Jika Anda ingin membawa perubahan yang Anda buat di Photoshop CC , Anda bisa klik Buat Halaman Baru untuk membuat sebuah halaman baru di Ujung Reflow berdasarkan keadaan saat terbuka ( dan disimpan ) file Photoshop . Anda dapat melihat halaman dalam proyek Reflow Anda dengan mengklik ikon Pages di atas ikon Photoshop CC Connect .
Dengan mengaktifkan fitur sinkronisasi di Ujung Reflow , kita dapat memperbarui konten gambar berdasarkan file Photoshop , yang adalah apa yang akan Anda lakukan selanjutnya .11. Di Ujung Reflow , dengan Photoshop CC Connect panel menunjukkan , klik tombol Photoshop Sync untuk mengaktifkan fitur sinkronisasi .
Sekarang , jika Anda membuat perubahan pada konten gambar dalam file Photoshop di Photoshop , itu akan memperbarui aset dalam proyek Ujung Reflow . Setiap perubahan konten ( seperti teks yang dibuat di Photoshop ) tidak akan diperbarui dalam proyek Ujung Reflow Anda .
 
Gambar 14 Mengaktifkan sinkron dengan Photoshop CC
12. Kembali di Photoshop CC, pilih besar "pahlawan" gambar di sebelah kanan "Kode web" pos. Pilih Image> Adjustments> Invert. Tinggalkan file terbuka di Photoshop (Anda tidak perlu menyimpan) dan kembali ke Edge Reflow.
 
Gambar 15 Membuat perubahan gambar di Photoshop
13. Perhatikan ikon panel Asset Perpustakaan sekarang memiliki tanda yield di atasnya. Buka panel Library Asset dan gulir untuk menemukan gambar hero.jpg. Sebuah ikon pembaruan muncul di sebelah kanan nama. Klik ikon update untuk memperbarui gambar di Ujung Reflow. 
 
Gambar 16 Perbarui aset di Ujung Reflow
Salah satu fitur terakhir di panel Photoshop CC Connect di Ujung Reflow adalah Asset Library Button. Jika Anda adalah untuk klik tombol Asset Perpustakaan dengan proyek kami terbuka di Ujung Reflow , aset untuk proyek saat ini ( dalam kasus kami gambar kami) , akan ditambahkan ke perpustakaan Reflow dan tersedia untuk proyek-proyek lain juga .
TIP
Ada beberapa cara untuk bekerja dengan Ujung Reflow dan konten CC Photoshop . Cara lain adalah dengan membuat proyek baru di Ujung Reflow , membuka file Photoshop ( di Photoshop ) , kemudian membuat halaman baru di Ujung Reflow di panel Photoshop CC Connect , itu konten Photoshop .
Seperti yang saya sebutkan sebelumnya , secara default , saat ini belum ada mekanisme untuk mengekspor konten ( HTML , CSS , dll ) . Tapi, jika Anda melihat dalam browser dari Edge Reflow , dengan memilih View> Preview di Chrome ( misalnya ) , konten yang dibutuhkan untuk melihat situs di browser ( HTML , CSS , dll ) akan dibuat dan dimasukkan ke dalam folder aset yang terletak di sebelah file proyek Reflow . Sebagai kata peringatan , konten ini ( css , html ) tidak dimaksudkan untuk digunakan sebagai - dalam sebuah situs produksi akhir . Saat ini sudah diatur untuk tujuan pratinjau saja ( tapi Anda bisa membuatnya bekerja jika Anda atau seseorang yang Anda bekerja dengan tahu apa yang dia lakukan ) .

final Thoughts

Mudah-mudahan Anda dapat melihat bahwa Photoshop CC ke Edge CC Reflow adalah alur kerja yang menjanjikan. Ujung Reflow adalah ke sebuah awal yang baik, tapi seperti yang saya sebutkan sebelumnya, Ujung Reflow masih bukan produk 1.0 jadi sedikit kasar di sekitar tepi dan bahkan tidak mengandung kemampuan ekspor. Itu tidak berarti Anda masih tidak dapat menggunakannya untuk membuat desain Anda dan menyerahkan konten tersebut ke pengembang atau bahkan menggunakannya sebagai bagian dari proses desain untuk menunjukkan fitur mockup yang lebih penuh.

Untuk mempelajari lebih lanjut tentang bekerja dengan Adobe Ujung Reflow, memeriksa Adobe Ujung Reflow bagaimana-ke halaman.

 
Desain Responsif dengan Adobe Photoshop dan Adobe CC Ujung Reflow CC (Preview)