Photoshop & Dreamweaver

Mengetahui Photoshop adalah satu hal, tapi mengetahui bagaimana Photoshop dapat digunakan di seluruh Adobe Creative Suite adalah hal lain. Dalam tiga bagian seri ini, kita akan berfokus pada fitur yang akan membantu Anda menjadi lebih produktif bila menggunakan Photoshop dalam hubungannya dengan InDesign, Illustrator & Dreamweaver (besar website builder) .

Dengan melihat fitur-fitur yang sering mendapatkan diabaikan dan dengan menunjukkan bagaimana Anda dapat menggunakannya dengan program lain CS, itu akan membuat Anda jauh lebih efisien, sehingga membantu Anda menjadi desainer yang lebih baik.

• Minggu 1: Tips Untuk Bekerja dengan Photoshop & Indesign
• Minggu 2: Tips Untuk Bekerja dengan Photoshop & Dreamweaver
• Minggu 3: Tips Untuk Bekerja dengan Photoshop & Illustrator

Layer Comps

Sebagai desainer kita sering diharuskan untuk menyajikan beberapa variasi desain untuk klien dan cara yang bagus untuk melakukan ini adalah melalui penggunaan comps lapisan, salah satu fitur yang paling kurang dimanfaatkan dari Photoshop. Dengan lapisan comps, Anda dapat membuat, mengelola, dan melihat beberapa versi tata letak dalam sebuah file Photoshop tunggal. Lapisan comp pada dasarnya adalah sebuah snapshot dari keadaan panel Layers. Anda dapat mengekspor lapisan comps ke file terpisah, ke PDF tunggal, atau galeri foto web. Buka Layers panel Comp dengan pergi Comps Window> Layer. Dari sana, klik tombol snapshot untuk setiap lapisan comp baru. Anda kemudian dapat mengekspor comps lapisan dalam beberapa klik dengan pergi ke File> Scripts> Layer Comps ke File.

Positioning Absolute

Pixel desain yang sempurna diperlukan di web dan cara yang bagus untuk mencapai ini adalah dengan menggunakan Absolute Positioning - ini memungkinkan Anda untuk menempatkan objek ke pixel yang tepat dan jauh lebih akurat & memakan waktu kurang daripada menggunakan penguasa. Misalnya, jika Anda mencoba untuk membuat menu hyperlink dan Anda ingin setiap link memiliki jarak yang sama antara satu sama lain, semua yang perlu Anda lakukan adalah memilih masing-masing objek, pilih perangkat bergerak (V) dan klik "Align "tombol Pusat Vertikal ditemukan di bagian atas dari jendela Photoshop. Jika itu adalah menu horizontal, Anda akan klik "Align Horizontal Centres".

Smart Object Arus Kerja

Daripada bekerja dari Photoshop langsung, Anda dapat bekerja di Dreamweaver melalui penggunaan Smart Objects yang merupakan cara yang sangat produktif bekerja. A Smart Object di Dreamweaver adalah obyek ditempatkan pada halaman web yang memiliki koneksi langsung ke file asli Photoshop (PSD). Untuk menggunakan benda pintar, pergi ke Insert, kemudian pilih file PSD Anda. Pastikan Anda memiliki file PSD disimpan di direktori situs sehingga jika Anda berbagi file tersebut, ia tidak terhubung ke hard drive Anda.

Copy & Paste Images dioptimalkan

Tahukah Anda bahwa Anda dapat menyalin semua atau sebagian dari gambar Photoshop dan paste seleksi ke dalam halaman Dreamweaver Anda sebagai gambar web-siap? Tidak hanya dapat Anda lakukan lapisan tunggal, tapi bahkan seluruh set lapisan atau bahkan sepotong gambar namun jika Anda melakukan ini, Anda harus ingat bahwa Dreamweaver tidak membuat Smart Object. Untuk melakukan hal ini, itu adalah yang sederhana seperti menempatkan kursor di mana Anda ingin gambar yang akan dimasukkan dan paste - ini bekerja di kedua Desain dan tampilan Kode.Informasi tentang gambar, seperti lokasi file sumber PSD asli, disimpan di bagian Desain Catatan untuk referensi di masa mendatang.

Save for Web

Anda harus menyadari "Save For Web" fitur ditemukan di menu File dari Photoshop, bagaimanapun, itu selalu baik untuk mendapatkan pengingat dari dasar-dasar. JPEG harus disimpan ke foto atau "sibuk" gambar dengan banyak warna. GIF dan PNG harus disimpan untuk file yang tidak terlalu rumit, seperti pekerjaan garis, logo dan gambar yang membutuhkan transparansi. Jika Anda tidak yakin apa yang akan menjadi optimasi terbaik, pastikan Anda menggunakan '2 Up 'atau '4 Up' untuk membuat perbandingan langsung. Klik pada setiap variasi dan kemudian mengubah pengaturan untuk melihat perbandingan. Pastikan Anda memperbesar untuk melihat apa yang terjadi pada gambar Anda.