Menjana aset imej responsif dengan Photoshop CC 2014

menggunakan Photoshop CC 2014 dengan cekap untuk mencipta sumber imej responsif

Artikel ini ditaja oleh Adobe. Terima kasih atas sokongan anda untuk SitePoint!

gambar: Andy Schofield - cc

mata utama

Photoshop CC 2014 menyediakan satu set alat untuk menghasilkan sumber imej yang responsif, termasuk penggunaan objek pintar, lapisan marshalling, dan ciri "Extract Resource". Alat ini membolehkan saiz semula, mengubah, dan mengeksport imej yang cekap tanpa kehilangan kualiti.
Gunakan SVG (grafik vektor berskala) di mana mungkin, kerana ia menyediakan fail kecil yang boleh diselaraskan dengan serta -merta tanpa kehilangan kualiti imej. Ini amat berguna dalam reka bentuk responsif, kerana ia hanya bermakna satu fail perlu diuruskan untuk semua resolusi.
Perkhidmatan dalam talian Adobe baru, aset awan kreatif, membolehkan perkongsian mudah dan pemprosesan kolaboratif JPA kerja. Ini termasuk dapat berkongsi JPA dengan pelanggan untuk mengaudit, mengedarkan JPA kepada kontraktor luaran, dan memberi akses kepada rakan sekerja untuk mengekstrak sumber, semuanya tanpa memerlukan mereka memasang Photoshop sendiri.

menyediakan sumber yang tepat untuk peralatan yang betul

Lima tahun yang lalu, Internet adalah tempat yang lebih diramalkan, bukan? Sebagai pemaju web, kita boleh mengharapkan penyemak imbas web tidak kurang daripada 640 piksel lebar dan tidak lebih daripada 1240 piksel -seolah -olah "lebuh raya internet" kami hanya berlalu

siri . Realiti semasa kami sangat berbeza. Hari ini, pengguna mudah alih biasanya menyumbang lebih daripada separuh trafik kami. Sebenarnya, pada tahun 2014, terdapat banyak motosikal di "Lebuhraya Kami" sebagai kereta dan trak. Jadi mengapa kita masih memuat imej "saiz rumah" yang sama pada semua peranti yang sangat berbeza ini?

Tetapi adakah ini benar -benar penting?

Bulan lalu, Tammy Everts mengeluarkan beberapa data amaran mengenai kesan prestasi laman web pada tingkah laku pengguna. Ini termasuk:

Laman web yang perlahan boleh mengakibatkan lebih daripada $ 3 bilion kerugian jualan setahun
44% pembeli menafsirkan prestasi lambat sebagai
2. "ralat berlaku"
2 saat kelewatan semasa urus niaga = 87% kadar pengabaian kereta

Data Tammy memberitahu kami bahawa menghantar imej yang lambat, bersaiz rumah ke peranti kecil bukan sahaja tidak sopan-itu sebenarnya membebankan pelanggan dan wang kami. Dengan menyesuaikan imej ke had setiap peranti, kami dapat menyampaikan halaman lebih cepat sambil menjimatkan kos jalur lebar-menang-menang untuk semua orang.

menyampaikan imej yang betul

Terdapat beberapa cara yang matang untuk menyampaikan kandungan imej penyesuaian ke peranti. Pilihan terbaik pada masa ini ialah:

squeezr.it

Adaptive-Images.com: Penyelesaian Matt Wilcox adalah penyelesaian kegemaran bagi banyak pemaju. Ia adalah peranti bebas dan mudah alih, walaupun biasanya memerlukan pengetahuan mengenai persediaan Apache dan PHP.
squeezr.it: squeezr diilhamkan oleh imej adaptif secara besar-besaran, tetapi lebih suka menggunakan dasar klien untuk menentukan dan bertindak balas terhadap titik putus.

Jangan risau: Ini adalah penyelesaian yang sangat baik, tetapi kami tidak akan memberi perhatian kepada mereka hari ini. Sebaliknya, saya ingin melihat bahagian lain masalah: sumber imej. Bagaimanakah kita menjana semua sumber imej yang berbeza ini? Adobe banyak berfikir tentang isu ini, yang dicerminkan dalam Photoshop CC 2014. Ia menyediakan satu set alat -beberapa yang baru, beberapa lama -untuk membantu.

Berikut adalah beberapa petua untuk memulakan dengan imej responsif:

Petua 1: Benamkan semua imej sebagai objek pintar

Objek pintar bukan sesuatu yang baru - mereka telah berada di Photoshop sejak tahun 2005 - tetapi mereka telah menjadi alat teras dalam reka bentuk responsif. Walaupun selepas kami menggunakan transformasi yang merosakkan kepada mereka, objek pintar sentiasa mengekalkan pautan rujukan ke keadaan imej

asal mereka. Sebagai contoh, dalam kebanyakan kes, pemulihan imej beberapa kali akan merendahkan kualiti imej pada setiap lelaran. Walau bagaimanapun, objek pintar menggunakan setiap transformasi baru ke keadaan imej asal tanpa kehilangan kualiti imej. Ini menjadikan semua sumber imej resolusi tinggi anda (avatar, latar belakang, foto, dan lain-lain) ke dalam objek pintar hampir pilihan yang tidak dapat dielakkan, membolehkan anda mengubah saiz, berputar, mengubah dan mengubahnya tanpa perlu risau. Menukar apa-apa lapisan ke objek pintar adalah semudah mengklik kanan di atasnya dan memilih " Tukar ke objek pintar ". tip 2: Gunakan lapisan ke kumpulan

Dalam era reka bentuk responsif, " susun atur " telah menjadi " susun atur

". Kami memerlukan cara untuk menguruskan kedudukan elemen halaman yang sama dalam dua, tiga atau lebih kedudukan dan saiz.

Ini adalah tujuan "kumpulan lapisan". Fikirkan setiap kumpulan lapisan baru sebagai "snapshot" panel lapisan pada titik tertentu dalam masa. Anda kemudian boleh mengklik satu butang dalam panel kumpulan lapisan untuk kembali ke status snapshot pada bila -bila masa. Dalam praktiknya, ini biasanya bermakna membina susun atur mudah alih (mudah alih pertama) dan kemudian menangkapnya sebagai lapisan baru marshalling. Anda kemudian boleh mula mendesain semula susun atur untuk tablet anda dan menangkapnya semula ke dalam kumpulan lapisan lain.

Aplikasi praktikal kumpulan kumpulan

Panel kumpulan lapisan membolehkan anda bertukar di antara mana -mana negeri ini dengan segera dengan mengklik. Pengumpulan lapisan mengurangkan duplikasi dalam panel lapisan dan memudahkan keseluruhan fail projek.

tip 3: lupa "Penyimpanan sebagai web ..." - Gunakan "sumber ekstrak"

Saya harus mengakui bahawa saya selalu menyukai panel eksport imej Fireworks. Photoshop mengambil gambar siap sebagai aplikasi yang berasingan, dan ciri "penyimpanan Web" terbina dalamnya sendiri, tetapi bagi saya, tidak begitu mudah, kuat atau cepat seperti bunga api.

Lancarkan panel Sumber Ekstrak dari dalam panel lapisan.

Photoshop CC 2014 mengamalkan kaedah eksport imej yang baru dan bertambah baik - ciri "sumber ekstrak" baru. Mari kita lihat lebih dekat.

Panel Sumber Ekstrak akan mencari sebarang lapisan yang anda pilih dalam panel Lapisan. Secara teori, ini boleh menjadi satu lapisan, semua lapisan, atau sebarang kombinasi antara kedua -dua. Anda boleh melancarkan panel baru ini dari dua tempat:

1. dengan klik kanan pada mana -mana lapisan/lapisan dan pilih "Ekstrak Sumber"
2. atau pilih "Ekstrak Sumber" dari menu Fail

Mari kita lihat panel "Extract Resources" baru.

lapisan boleh dieksport sebagai salah satu daripada enam format imej:

png8
png24
png32
jpg
gif
svg (ya, lebih lanjut mengenai ini kemudian)

Anda juga mempunyai pilihan untuk menjana sehingga lapan resolusi yang berbeza secara serentak -bertukar dari 25% hingga 400%. Photoshop juga memudahkan untuk mengutamakan secara automatik setiap nama fail dan eksport ke nama folder yang munasabah. Anda juga boleh menetapkannya untuk menjana semula keseluruhan set fail apabila anda mengemas kini dokumen asal. Tidak sukar untuk melihat berapa banyak masa yang dapat disimpan. Perhatikan bahawa jika anda berpuas hati dengan aliran kerja semasa anda, anda masih boleh menggunakan pilihan klasik "Simpan sebagai Web". Walau bagaimanapun, saya mengesyaki kebanyakan orang akan melihat kuasa dan fleksibiliti ciri -ciri baru.

tip 4: Gunakan svg apabila mungkin

SVG telah menjadi salah satu trend panas dalam reka bentuk web pada tahun 2014, jadi menarik untuk melihat sokongan SVG Masukkan Photoshop. Vektor sangat sesuai untuk reka bentuk responsif kerana mereka menyediakan fail kecil yang boleh diselaraskan dengan serta -merta tanpa kehilangan kualiti imej. Dari sudut pandangan yang semata -mata praktikal, menggunakan SVG (dalam realiti) bermakna anda hanya perlu menguruskan satu fail untuk semua resolusi (tidak termasuk sandaran untuk pelanggan yang lebih tua).

alat eksport svg di Photoshop

Walaupun Photoshop membolehkan anda mengeksport sebarang lapisan/lapisan sebagai SVG, elemen imej berasaskan piksel tidak mungkin memberikan hasil yang baik. Mana-mana grafik berasaskan laluan, termasuk logo, ikon, topeng, dan bentuk lain, boleh menjadi calon yang ideal untuk eksport SVG.

tip 5: Jangan lupa aset awan kreatif

Salah satu manfaat tambahan baru menggunakan JPA adalah perkhidmatan dalam talian Adobe. Menyegerakkan ciptaan JPA anda untuk awan kreatif membuka pelbagai tip berguna. Saya menutupnya dengan lebih terperinci dalam jawatan terdahulu, tetapi perkara utama adalah:

Mudah untuk berkongsi JPA anda dengan pelanggan

Ekstrak sumber melalui penyemak imbas.

terlupa untuk menghantar kerja JPEG untuk semakan pelanggan. Awan Kreatif membolehkan mereka melihat dan mengulas kerja JPA anda dalam masa nyata dalam penyemak imbas. Betul - mereka tidak lagi memerlukan Photoshop untuk mengkaji semula JPA.

mengedarkan JPA kepada kontraktor luaran

Kontraktor luaran boleh menggunakan versi terkini sumber dan sumber eksport secara langsung menggunakan penyemak imbas.

Menyediakan akses rakan sekerja untuk mengekstrak sumber

Anda kini mempunyai cara mudah untuk berkongsi JPA yang diuruskan versi dengan pasukan anda. Mereka juga boleh mengekstrak CSS, imej, dan sumber lain dari JPA anda tanpa memasang Photoshop mereka sendiri. Perkhidmatan ini tersedia untuk sesiapa sahaja yang mempunyai akaun Adobe percuma.

Ringkasan

biodiversiti adalah perkara yang baik! Ekosistem penyemak imbas kami - telefon, tablet, komputer riba, desktop, dan juga TV - kaya dan bervariasi dan hanya akan lebih pelbagai pada tahun -tahun akan datang. Ini menjadikan kerja kita lebih keras dan lebih menyeronokkan. Reka bentuk web responsif mengajar kita bahawa "halaman" sebenarnya telah menjadi " siri halaman " - halaman ibu bapa, halaman ibu dan beberapa halaman kanak -kanak. Atas sebab yang sama, " imej " juga telah menjadi " siri imej ". Photoshop CC 2014 kini menyediakan aliran kerja yang agak mudah dan cepat untuk menghasilkan "siri imej" ini. Cubalah.

FAQ untuk sumber imej responsif di Photoshop dan CSS

(bahagian FAQ ditinggalkan di sini kerana artikel itu terlalu panjang dan tidak sepadan dengan matlamat asal pseudo. Bahagian FAQ boleh dikekalkan secara pilihan atau ditulis semula seperti yang diperlukan.)

Atas ialah kandungan terperinci Menjana aset imej responsif dengan Photoshop CC 2014. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!