20 Trik Photoshop untuk Desainer Web

Mungkin setiap desainer web di luar sana memiliki seperangkat trik Photoshop favorit mereka sendiri. Untuk alasan yang bagus. Pengeditan gambar Adobe yang kuat adalah pokok dari dunia desain web. Sangat sedikit program di luar sana yang dapat menyaingi perangkat lunak luar biasa ini dan berbagai fiturnya.

Namun, sementara sebagian besar desainer web mengetahui cara mereka menggunakan Photoshop, selalu ada lebih banyak hal yang dapat Anda pelajari. Bagaimanapun, program ini tidak hanya kuat tetapi juga kompleks. Plus, hal-hal baru ditambahkan melalui pembaruan secara teratur.

Oleh karena itu, ada baiknya untuk terus menjelajahi alat favorit Anda. Untuk membantu Anda melakukannya, dalam artikel ini, kita akan melihat beberapa trik Photoshop terbaik di luar sana. Hal-hal yang dapat meningkatkan alur kerja Anda, mempermudah pekerjaan dan kehidupan, menghemat waktu, dan membantu Anda merancang situs web sebaik mungkin.

Apakah Anda siap untuk mempelajari lebih lanjut tentang Photoshop? Kemudian terus membaca.

Trik Photoshop untuk Mengubah Anda Menjadi Wizard Desain Web

Kiat-kiat berikut berkisar dari tingkat pemula hingga materi yang lebih kompleks. Masing-masing dipilih untuk membantu Anda menjadi desainer web terbaik.

1. Sederhanakan Ruang Kerja Anda

Mari kita mulai dengan dasar-dasarnya. Hal pertama yang harus dilakukan untuk meningkatkan alur kerja Anda adalah mengatur Photoshop dengan cara yang mendukung cara Anda menggunakannya. Lagi pula, pekerjaan menjadi lebih mudah dengan alat yang lebih tajam.

Untuk alasan itu, pemberhentian pertama kami adalah Window > Workspace > Graphic and Web . Memilih opsi ini akan mengubah alat yang tersedia menjadi apa yang paling mungkin Anda gunakan untuk desain web.

Setelah itu, lanjutkan ke Edit > Preferences . Di sini, salah satu pemberhentian terpenting adalah Unit & Rulers. Pengukuran mana pun yang Anda pilih di sini (kemungkinan besar piksel), itu akan menjadi default untuk semua dokumen yang akan datang.

(Petunjuk cepat: Untuk mengubah penggaris untuk satu dokumen, cukup klik kanan padanya dan pilih unit pengukuran yang Anda inginkan.)

Setelah itu, buka Preferences > Performance > History & Cache dan klik Web / UI Design .

Melakukannya akan mengubah pengaturan cache untuk mendukung file yang lebih kecil dengan banyak lapisan, yang sebagian besar akan Anda gunakan.

Di tempat yang sama, Anda juga dapat memilih jumlah status riwayat. Itulah jumlah langkah yang dapat Anda mundur jika Anda ingin membatalkan sesuatu.

Terakhir, keluar dari preferensi, tutup semua dokumen dan tekan tombol T pada keyboard Anda. Ini akan membuat menu font muncul di bagian atas layar. Apa pun yang Anda tetapkan di sini akan menjadi standar untuk dokumen baru. Karena tidak ada yang benar-benar menyukai Myriad Pro sebanyak itu.

2. Pelajari Pintasan Keyboard

Untuk program apa pun yang Anda gunakan secara teratur, mempelajari pintasan keyboard biasanya merupakan saran yang bagus.

Sebagai contoh, saya menggunakan Ctrl+Alt+2/3 untuk membuat heading h2 dan h3 saat menulis postingan ini. Ini jauh lebih cepat daripada menggunakan toolbar editor untuk itu karena saya tidak perlu melepaskan tangan saya dari keyboard.

Hal yang sama berlaku untuk Photoshop. Mengetahui cara melakukan tindakan dengan penekanan tombol sederhana jauh lebih cepat daripada mengklik menu.

Kami akan menyebutkan banyak pintasan keyboard di seluruh artikel ini. Namun, saya juga merekomendasikan lembar contekan ini untuk mempelajari cara pintas ke operasi Photoshop yang paling umum. Selain itu, ada baiknya juga untuk membiasakan melihat pintasan keyboard untuk hal-hal yang Anda lakukan berulang kali.

3. Lapisan Grup dan Nama

Saat bekerja dengan Photoshop, Anda akan bekerja dengan banyak lapisan. Tidak hanya mendapatkan sebagian besar elemen lapisan mereka sendiri tetapi modifikasi seperti kecerahan/kontras juga ditambahkan sebagai lapisan.

Karena alasan itu, itu bisa membingungkan dengan sangat cepat. Untungnya, ada banyak opsi untuk membuatnya kurang begitu, dua di antaranya adalah kemampuan untuk mengelompokkan dan memberi nama lapisan.

Pertama, dengan mengklik dua kali pada layer mana pun, Anda dapat mengubah namanya menjadi apa pun yang Anda suka.

Dengan begitu, Anda akan dengan mudah memahami apakah sebuah layer berisi gambar latar belakang, menu atau sidebar.

Atau, Anda juga dapat memilih beberapa lapisan sekaligus, baik dengan menahan Ctrl untuk memilih lapisan individu atau Shift untuk menandai berbagai lapisan tetangga. Ctrl+G kemudian mengubahnya menjadi grup.

Atau, klik kanan layer dan pilih opsi grup dari sana. Either way, lapisan Anda menjadi lebih terorganisir. Plus, Anda juga dapat memberi nama layer yang dikelompokkan!

4. Lapisan Filter

Penamaan dan pengelompokan layer adalah awal yang baik. Namun, ketika bekerja dengan puluhan atau bahkan ratusan dari mereka, Anda masih bisa bingung dengan mudah.

Untuk kasus tersebut, Anda juga memiliki opsi untuk memfilter lapisan Anda. Untuk melakukannya, cukup gunakan menu di bagian atas menu Lapisan untuk memfilter menurut jenis, nama, efek, warna, dan lainnya.

Atau, langsung pilih layer dengan menggunakan Move tool, tahan Ctrl dan klik pada layer atau objek.

5. Buat Kotak

Gambar oleh PureSolution / shutterstock.com.

Grid adalah salah satu prinsip terpenting dalam desain web. Ini membawa ketertiban untuk desain dan membantu Anda menempatkan objek Anda. Untuk alasan itu, masuk akal juga untuk membuat kisi di Photoshop.

Untuk melakukannya, gunakan View > New Guide Layout . Atau, buat panduan horizontal dan vertikal hanya dengan mengklik penggaris dan menyeret ke dalam dokumen. Gunakan Ctrl untuk memindahkan panduan yang ada.

6. Impor Swatch Warna

Anda dapat memuat contoh warna langsung ke Photoshop dari file HTML, CSS atau SVG. Dengan begitu, Anda memiliki titik awal yang bagus untuk skema warna Anda saat bekerja dengan aset yang ada seperti logo.

Untuk memanfaatkan trik Photoshop ini, cukup buka panel Swatches , klik menu drop-down di sudut kanan atas dan pilih Load Swatches . Sekarang navigasikan ke file yang dimaksud dan buka untuk mengimpor contoh warna baru Anda.

7. Simpan Bentuk Kustom

Terutama ketika mendesain beberapa halaman untuk situs yang sama atau situs web yang memiliki desain serupa, Anda akan menemukan diri Anda menggunakan objek dan bentuk yang sama berulang-ulang. Karena alasan itu, masuk akal untuk menyimpannya sebagai bentuk khusus untuk digunakan kembali dengan cepat.

Untuk melakukannya, klik kanan pada bentuk yang dimaksud dengan alat pemilihan jalur (panah hitam). Kemudian, pilih Tentukan Bentuk Kustom . Setelah Anda melakukannya, Anda dapat mengakses bentuk ini melalui opsi bilah atas alat Bentuk Kustom . Cukup klik pada menu tarik-turun yang bertuliskan Bentuk: dan pilih bentuk yang Anda simpan.

8. Beralih Antara Warna Background dan Foreground

Dua beralih bolak-balik antara warna latar belakang dan latar depan tanpa mengklik ikon, cukup tekan X pada keyboard Anda. Plus, jika Anda ingin warna kembali ke hitam putih sederhana, Anda dapat melakukannya dengan menekan D .

9. Ubah Opacity melalui Keyboard

Pintasan keyboard lain: Untuk alat apa pun yang dapat mengubah opacity, Anda cukup melakukannya melalui keyboard. Angka 1 sampai 0 akan mengatur opacity antara 10% dan 100%. Hal yang sama juga bekerja dengan opacity layer.

10. Gambar Garis Lurus

Untuk menggambar garis lurus dengan alat apa pun, cukup tahan tombol Shift . Setelah itu, Anda bisa menggambar garis (baik horizontal maupun vertikal) yang otomatis akan lurus seperti paku. Atau, klik pada dua titik berbeda untuk membuat garis lurus di antara keduanya.

11. Warna Sampel

Selanjutnya dalam tas trik Photoshop kami adalah kemampuan untuk mencicipi warna apa pun. Jika Anda membutuhkan warna dari objek apa pun, tahan tombol Alt dan klik rona yang Anda inginkan. Ini berfungsi baik dengan Brush , Pencil , Paint Bucket dan alat lain yang menggunakan warna.

12. Tambah ke atau Hapus Dari Pilihan

Anda dapat menambahkan ke pilihan yang ada dengan menahan shift dan memilih bagian yang ingin Anda sertakan. Untuk mengurangi, lakukan hal yang sama tetapi dengan tombol Alt .

13. Undo Lebih dari Satu Langkah

Cara klasik untuk membatalkan tindakan terakhir Anda adalah menggunakan Ctrl+Z . Namun, ini hanya berfungsi untuk hal terakhir yang Anda lakukan. Untuk kembali beberapa langkah, gunakan Ctrl+Alt+Z .

14. Ubah Ukuran Kuas Anda Secara Dinamis

Untuk mengubah ukuran kuas Anda, tidak perlu mengklik menu tarik-turun dan menyeretnya ke ukuran yang tepat. Sebagai gantinya, cukup tahan Alt dan tombol kanan mouse lalu seret ke kiri dan kanan untuk mengurangi dan menambah ukuran kuas Anda.

15. Simpan untuk Web

Menggunakan fungsi Aman untuk Web sangat penting, karena memastikan ukuran gambar sekecil mungkin. Ini sangat penting untuk meningkatkan kecepatan situs.

Di Photoshop, Anda dapat melakukannya melalui File > Export > Save for Web . Namun, cara yang lebih cepat adalah dengan menggunakan Ctrl+Alt+Shift+S . Sama sama!

16. Buka Gambar sebagai Layers

Terkadang perlu mengimpor sejumlah besar gambar ke Photoshop sekaligus. Namun, ketika Anda hanya menyeretnya ke ruang kerja Anda, Anda akan diminta untuk menempatkannya secara manual.

Cara yang lebih praktis untuk melakukannya adalah File > Scripts > Load Files into Stack . Jelajahi gambar yang dimaksud, tandai dan tekan Ok dua kali. Sekarang, setiap gambar akan secara otomatis diimpor ke lapisannya sendiri.

17. Salin CSS Langsung dari Photoshop

Salah satu trik Photoshop yang paling nyaman untuk desainer web adalah kenyataan bahwa program ini membuat CSS yang dapat Anda ekspor. Tidak perlu mengetik semuanya dengan tangan atau menggunakan trial and error untuk mengimplementasikannya.

Untuk memanfaatkan ini, cukup klik kanan layer dan pilih Copy CSS . Atau, gunakan menu Layer untuk menemukan opsi yang sama. Sekarang Anda memiliki semua gaya yang diperlukan untuk ditempelkan ke lembar gaya Anda atau program lain yang Anda gunakan.

18. Desain untuk Beberapa Perangkat dan Orientasi Sekaligus

Mendesain untuk web saat ini berarti mendesain untuk sejumlah besar perangkat yang berbeda. Pada saat perangkat seluler melampaui komputer desktop di mana pun di dunia, menerapkan desain seluler adalah suatu keharusan.

Sumber: ComScore

Untungnya, Photoshop memiliki artboard dan objek pintar yang membuatnya sangat mudah untuk menskalakan desain Anda ke format yang berbeda.

Saya bisa menjelaskan keduanya secara rinci di sini, namun, Phlearn membuat tutorial yang sangat baik tentang ini yang melakukan pekerjaan jauh lebih baik daripada yang pernah saya lakukan:

19. Gunakan Pemrosesan Otomatis untuk Tugas Berulang

Fitur Photoshop mengagumkan lainnya adalah pemrosesan otomatis. Ini berarti Anda dapat mengulangi tugas yang direkam berulang kali tanpa harus melakukannya secara manual. Ini sangat berguna, misalnya jika Anda perlu menyimpan banyak gambar untuk web.

Berikut cara kerjanya. Pertama, buka file Anda. Kemudian, buka Actions ( Alt+F9 ), cari Create New Action dan klik. Berikan nama dan, secara opsional, tetapkan kombinasi tombol dan warna.

Untuk merekam tindakan Anda, tekan Rekam . Kemudian lakukan operasi yang ingin Anda ulangi. Dalam kasus saya, saya membuka gambar dari satu folder dan menyimpannya untuk web di folder lain.

Setelah selesai, berhenti merekam. Sekarang Anda dapat menggunakan kembali tindakan ini untuk semua gambar lainnya, menghemat banyak waktu. Untuk informasi lebih lanjut tentang apa yang dapat Anda otomatisasi di Photoshop, lihat artikel ini.

20. Pratinjau di Perangkat

Terakhir, bersama dengan Photoshop, Adobe juga menawarkan aplikasi yang memungkinkan Anda melihat pratinjau pekerjaan Anda di beberapa perangkat iOS. Hal terbaik: Anda dapat mengamati perubahan pada perangkat saat Anda membuatnya di komputer.

Untuk melakukannya, instal aplikasi dan gunakan Pratinjau Perangkat untuk menghubungkan Photoshop ke perangkat eksternal melalui USB atau wifi. Anda menemukan opsi di bawah Window > Device Preview .

Apa Trik Photoshop Favorit Anda?

Photoshop adalah salah satu alat desain web yang paling banyak digunakan di luar sana. Fitur-fiturnya yang kuat membuatnya sempurna untuk merancang situs web dan aset berkualitas tinggi.

Namun, dengan kekuatan yang besar juga disertai dengan kompleksitas yang besar dan terutama untuk pemula, diperlukan beberapa waktu untuk menguasai perangkat lunak.

Untuk mempersingkat kurva belajar, di atas kami telah menyediakan sejumlah trik Photoshop yang berguna untuk desainer web. Mereka membuat banyak hal lebih mudah dari alur kerja umum hingga pemrosesan file otomatis.

Mengetahui Photoshop luar dalam adalah investasi yang bagus untuk keuntungan Anda. Ketika Anda dapat melakukan sesuatu lebih cepat, Anda dapat melakukan lebih banyak pekerjaan, sehingga menghasilkan lebih banyak pendapatan. Dan itu tidak akan pernah menjadi hal yang buruk.

Apa saja trik Photoshop favorit Anda? Beri tahu kami di bagian komentar di bawah agar kita semua dapat saling membantu.

Gambar thumbnail artikel oleh Creative Stall / shutterstock.com