Etiket Photoshop Untuk Desain Web Responsif

Diterbitkan: 2022-03-10

Ringkasan cepat Sudah hampir lima tahun sejak Photoshop Etiquette diluncurkan, yang secara resmi menjadikannya peninggalan di web. Banyak yang bisa terjadi di web dalam beberapa tahun, dan lima yang terakhir ini telah menggambarkan hal itu lebih baik daripada kebanyakan.

Sudah hampir lima tahun sejak Photoshop Etiquette diluncurkan, yang secara resmi menjadikannya peninggalan di web. Banyak yang bisa terjadi di web dalam beberapa tahun, dan lima yang terakhir ini telah menggambarkan hal itu lebih baik daripada kebanyakan.

Pada tahun 2011, semua orang baru saja mendapatkan kaki mereka basah dengan desain web yang responsif. Alur kerja comp-to-HTML tradisional baru mulai dikritik, dan sejak itu, kami telah melihat banyak sekali alternatif. Ubin Gaya, Prototipe Gaya, Inventaris Visual, Kolase Elemen, panduan gaya, dan bahkan mendesain di browser semuanya merupakan pendekatan yang sesuai untuk desain multi-perangkat. Dengan peralihan dari desain berbasis halaman ke membangun sistem desain, ini benar-benar waktu yang menyenangkan.

Bacaan Lebih Lanjut tentang SmashingMag:

Mendesain Untuk Retina di Photoshop
Animasi Tingkat Lanjut Di Photoshop
Alur Kerja Aset Photoshop Retina
Generator Breakpoint Gambar Responsif

Ada juga ledakan alat yang mencoba membuat alur kerja responsif menjadi lebih efisien. Aplikasi seperti Webflow dan Macaw telah membuat visualisasi breakpoint dapat dicerna oleh mereka yang menolak kode. Banyak desainer telah beralih dari Photoshop sebagai pekerja keras mereka ke Sketch, Affinity Designer, atau sejenisnya. Yang lain telah mengadopsi aplikasi seperti Keynote untuk membuat prototipe.

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Sebuah kebingungan alat dan teknik baru tampaknya menempatkan etiket kuno yang baik di belakang burner.

Apakah 'Etiket' Masih Relevan?

Dengan alternatif untuk Photoshopping berat yang mungkin kita kenal, wajar untuk mempertanyakan apakah kita masih membutuhkan etiket. Demi artikel ini, kami akan mendefinisikan etiket sebagai mentransfer file dengan cara yang terorganisir, jelas, dan dapat dilihat. Desain responsif biasanya hadir dengan banyak potongan bergerak, mulai dari @2x gambar, file CSS gabungan, dan banyak lagi. Dengan tampaknya lebih banyak yang harus dilakukan untuk mempublikasikan situs web, menjadi efisien tidak diragukan lagi adalah prioritas tinggi, jika kita ingin menguntungkan.

Sering disamarkan sebagai efisiensi, organisasi dan komunikasi yang buruk adalah produk dari terburu-buru untuk mengirimkan sebuah proyek. Dengan Photoshop mengambil peran yang berbeda dalam alur kerja kami, lapisan dan file yang diekspor adalah target mudah untuk mengambil jalan pintas. Faktanya tetap: apa pun yang layak dilakukan adalah layak dilakukan dengan baik.

Jika kita ingin menghemat waktu, kita perlu berinvestasi sedikit di awal agar tetap teratur dan jelas. Inefisiensi adalah mewarisi file dari rekan kerja dan menghabiskan waktu yang berharga untuk mencoba mencari tahu dari mana harus memulai karena tidak diberi label dengan jelas. Itu harus memperbaiki gambar yang sudah diekspor. Paling buruk, itu tidak dapat menemukan file yang Anda butuhkan sejak awal.

Apa yang Baru di Etiket Photoshop?

Photoshop Etiquette diberi lapisan cat baru oleh Adjacent, sebuah studio desain di Syracuse, NY. Bagi mereka yang baru mengenal konsep ini, Photoshop Etiquette adalah panduan praktik terbaik yang mendorong efisiensi melalui kejelasan dalam desain web. Meskipun direkayasa untuk Photoshop, banyak dari prinsip ini berlaku untuk Sketch dan alat desain berbasis lapisan yang serupa.

Panduan ini dipecah menjadi beberapa bagian berikut:

Organisasi berkas
Struktur lapisan
Ekspor aset
Ketik eksekusi
Aplikasi efek
Cek kualitas

Mereka yang akrab dengan situs ini akan melihat banyak pedoman yang sudah dikenal, seperti tip klasik seperti 'Beri Nama Lapisan Anda' dan 'Beri Nama File Secara Akurat', masing-masing merupakan upaya untuk menghilangkan praktik-praktik seperti 'Lapisan copy copy 5' dan 'client- final-v3.psd', masing-masing. Jika Anda menggali lebih dalam, Anda akan menemukan banyak sumber daya responsif yang dilampirkan ke berbagai pedoman, dan beberapa tip untuk mendesain untuk beberapa perangkat.

1. Konsolidasikan PSD Anda

Jika Anda membuat beberapa comps untuk beberapa halaman, Photoshop sekarang memiliki artboards yang dapat membantu Anda menempel pada satu dokumen. Ini membantu menghilangkan kebingungan tentang PSD mana yang merupakan PSD yang tepat .

Jika Anda dapat mengayunkannya, coba gunakan artboards, layer comps, atau objek pintar alih-alih mengelola banyak PSD.

2. Bekerja Secara Kolaboratif

Dengan tambahan Creative Cloud Library dan Linked Smart Objects, desainer dapat berbagi aset dengan cukup mudah. Misalnya, jika Anda membuat pola atau panduan komponen di Photoshop, satu desainer dapat mengerjakan sebuah komponen sementara desainer lain secara bersamaan bekerja pada komponen yang berbeda. Komponen-komponen ini dapat dibagikan dalam Perpustakaan, atau sebagai Objek Cerdas Tertaut yang ditarik ke dalam PSD master.

Antara Objek Cerdas Tertaut dan Perpustakaan CC, ada banyak pilihan untuk menjadi kolaboratif.

3. Jangan Mendesain Ke Perangkat

Ini dapat diperdebatkan, tetapi jika desain responsif adalah tentang merangkul semua perangkat, mungkin kita tidak boleh menggunakan preset perangkat Apple yang populer sebagai ukuran dokumen di Photoshop. Alih-alih, biarkan desain Anda mendikte breakpoint karena tekanan tata letak, di mana pun itu jatuh. Pengecualiannya adalah jika Anda mendesain perangkat atau aplikasi khusus platform, di mana penargetan prasetel semacam itu sangat membantu.

Izinkan desain Anda untuk menentukan titik henti sementara, bukan lebar perangkat yang populer untuk saat ini.

4. Jangan Merusak

Dengan meningkatnya implementasi dan dukungan untuk SVG, penting bagi desainer untuk mempertahankan aset vektor di Photoshop dan tidak meratakannya. Photoshop sekarang memungkinkan Anda untuk menyimpan SVG, memberi kami satu alasan lagi untuk tidak merusak piksel kami.

5. Waspadai Resolusi Layar

Berbicara tentang SVG, ini benar-benar menjadi pendekatan yang bagus untuk melayani satu aset yang dapat beradaptasi dengan ukuran apa pun dan tidak kehilangan kesetiaan. Memiliki alur kerja aset Retina, baik gambar SVG atau @2x/@3x, telah menjadi bagian dari alur kerja praktisi yang responsif.

6. Kompres

Performa adalah alasan yang berharga, tidak hanya untuk pengembang tetapi juga untuk desainer. Saya sering merasionalisasi bahwa jika saya ingin memasukkan font web yang berat dan fitur Tipe Terbuka mereka dalam proyek saya, saya harus membuat perbedaan dengan mengompresi gambar saya secara agresif agar tetap dalam anggaran kinerja. Alat pihak ketiga seperti TinyPNG telah membuat kompresi gambar menjadi mudah.

Kinerja adalah tugas seorang desainer. Pastikan Anda memeras ukuran file ekstra dari gambar Anda.

Karena alur kerja desain web kami dan penggunaan Photoshop terus berubah, begitu juga situsnya. Meskipun mencakup alur kerja yang berpusat pada Photoshop, ada beberapa tip untuk yang menggunakan Photoshop dengan hemat juga. Panduan ini hanya menganjurkan bahwa jika, dan ketika, Anda menggunakan Photoshop, komunikasikan maksud Anda sejelas mungkin.

Dipicu Oleh Komunitas

Salah satu fokus utama untuk Photoshop Etiket adalah pertumbuhan, diwujudkan dalam lebih banyak pedoman, lebih banyak sumber daya, dan lebih banyak perspektif. Sebuah fitur telah ditambahkan ke situs yang menyediakan akses lebih mudah untuk mengirimkan pedoman baru untuk ditinjau, sesuatu yang dilakukan ratusan desainer dan pengembang selama bertahun-tahun dengan melacak saya di Twitter atau mencari alamat email.

Setelah ketidakakuratan Google Terjemahan, ada juga panggilan terbuka untuk terjemahan oleh sukarelawan komunitas.

Sangat menarik untuk melihat bagaimana Photoshop Etiket telah beresonansi dengan begitu banyak organisasi dan individu. Bagaimana ini dapat membantu Anda dan tim Anda?