instruksi

Buka file templat di Adobe Photoshop. Pilih File dan Buka item dari menu atau tekan kombinasi tombol Ctrl+O. Pada dialog yang muncul setelah ini, buka direktori dengan file tersebut, pilih dalam daftar dan klik tombol "Buka".

Pilih skala tampilan yang nyaman untuk gambar template. Gunakan Alat Zoom atau item menu konteks. Anda harus memilih skala yang memungkinkan Anda memposisikan kursor dengan presisi piksel. Ini diperlukan untuk pemasangan garis referensi yang akurat.

Bentuk satu set garis referensi di atas gambar template. Aktifkan tampilan penggaris di jendela dokumen jika belum diaktifkan. Untuk melakukan ini, tekan Ctrl+R atau pilih View and Rulers dari menu.

Tambahkan jumlah garis referensi yang diperlukan dan posisikan di sepanjang batas area templat. Garis harus melewati semua tempat di mana templat perlu dipotong. Mereka harus membatasi semua gambar dan area logis (logo, header situs, menu horizontal dan vertikal, dll.) yang akan ditampilkan di halaman web.

Aktifkan Alat Iris. Tombolnya terletak di toolbar vertikal.

Buat jumlah area pemotongan yang diperlukan menggunakan Slice Tool. Pilih skala tampilan template yang nyaman. Gunakan mouse untuk mengatur batas area. Garis panduan yang ditambahkan pada langkah ketiga akan memastikan posisi yang tepat dari batas objek yang dibuat. Jika perlu sesuaikan area yang ada menggunakan Slice Select Tool.

Ubah properti area pemotongan jika diperlukan. Aktifkan Alat Pilih Irisan. Klik kanan pada area yang diinginkan. Dari menu konteks, pilih Edit Opsi Irisan. Dalam dialog Opsi Irisan yang muncul, pilih jenis area (gambar, area kosong, tabel), mode pengisian latar belakang, tentukan, jika perlu, nama, URL target, konten atribut alt, dan nilai lainnya. Klik Oke.

Saat membuat tata letak halaman HTML, terkadang Anda harus berurusan dengan banyak gambar serupa. Misalnya, jatuh untuk membuat album foto. Anda perlu memotong sekitar dua puluh “pratinjau”, lalu beri nama semuanya dan simpan. Rutin.

Untuk mengatasi semua ini dengan cepat, kami menggunakan beberapa trik.

Mengiris

Penghematan

Mengapa? Karena dalam hal ini kita harus melakukan lebih sedikit tindakan: klik pada irisan, tekan tab dan, voila, kita mendapatkan nama potongannya. Sedangkan dalam mode normal kita harus menekan empat kali tab, atau seret mouse maju mundur.

Namun, kami memiliki seluruh rangkaian gambar yang kemungkinan besar perlu diberi nama tampilan beberapa-nama-[n]. Dan dalam hal ini, Anda tidak perlu terlibat dalam pengaturan irisan sama sekali.

Pilih irisan yang kita butuhkan dan tekan tombol utama - Menyimpan. Di jendela simpan kami menunjukkan Irisan yang Dipilih dan pilih dari daftar Pengaturan ayat Lainnya...

Di jendela Pengaturan Keluaran pergi ke bagian Menyimpan File dan di sini kita membuat nama file yang nyaman bagi kita. Perancangnya serius, ada banyak detailnya, jadi tidak ada yang akan tersinggung.

Dengan tangan yang mantap, Anda akan menghabiskan tidak lebih dari satu menit untuk keseluruhan tindakan ini dan akan menerima setumpuk gambar. Dan sulit untuk memimpikan lebih banyak lagi.

Mungkin hanya sedikit orang yang suka membuat desain di Photoshop. Lebih tepatnya, kita tidak berbicara tentang konversi PSD yang sebenarnya ke situs web, tetapi tentang proses spesifik pemotongan file dan mengekspor gambar menggunakan alat Photoshop. Secara keseluruhan, prosesnya sangat membosankan karena Anda harus memisahkan setiap elemen desain dan mengekspornya secara manual.

Untuk mencari cara yang memungkinkan untuk mempermudah prosedur ini, kami harus mencoba banyak alat pengiris desain. Di bawah ini kami menawarkan kepada Anda pilihan tip dan trik yang dapat Anda gunakan untuk mempermudah tugas sulit ini bagi Anda sendiri. Kami harap ini bermanfaat bagi Anda!

Tiga jenis pemotongan di Photoshop

Tiga jenis? Ini adalah hal paling menarik yang kami temui selama proses penelitian. Ketika Anda tidak benar-benar mendalaminya, Anda duduk dan berpikir bahwa hanya ada satu metode. Tapi itu tidak benar.

Tiga jenis yang berbeda adalah: Pemotongan manual, Pemotongan otomatis, dan Pemotongan berbasis lapisan. Pertama, mari kita bahas dua hal yang mungkin pernah Anda dengar: Pemotongan manual dan Pemotongan otomatis. Mereka sangat mirip satu sama lain. Lebih tepatnya, satu jenis berasal dari jenis lainnya.

Seperti yang Anda ketahui, untuk memotong PSD, pertama-tama Anda mengambil alat pemotong (Slice Tool – C) dan menggambar sebuah kotak di sekitar area yang perlu diekspor ke gambar terpisah. Dengan menambahkan irisan/area untuk semua elemen yang Anda perlukan dalam masing-masing gambar, Anda dapat mengoptimalkan dan mempercepat proses ekspor.

Saat Anda membuat segmen garis, Anda akan mendapatkan sesuatu seperti gambar di bawah.

Di sini kita telah menggambar sebuah kotak di sekeliling logo di bagian atas halaman. Tindakan ini menghasilkan pemotongan manual dan beberapa pemotongan otomatis. Saat Anda membuat segmen, Photoshop memperlakukannya seolah-olah tujuan Anda adalah membagi satu file PSD menjadi beberapa rangkaian segmen. Ini menjadi sedikit mengganggu dan kami akan membahas opsi untuk menghindarinya nanti. Sekarang Anda perlu mempertimbangkan bahwa setiap kali Photoshop membuat kesimpulan ini, batas-batas segmen Anda meluas, sehingga menciptakan beberapa area lainnya. Hal ini ditunjukkan pada gambar di atas.

Trik saat bekerja dengan pengirisan Manual dan Otomatis

Karena sekarang kita berbicara tentang pemotongan manual dan otomatis, mari kita soroti fitur yang paling jelas dan tidak terlalu jelas yang akan membantu Anda menentukan alat dan opsi apa yang ada di gudang senjata Anda.

Memindahkan dan mengedit segmen

Setelah Anda membuat segmen, Anda akan melihat panel opsi yang mirip dengan panel Free Transform. Dengan menggunakan panel ini Anda dapat memindahkan dan mengedit segmen. Anda juga dapat menggunakan Alat Pilih Irisan untuk memastikan bahwa Anda mengedit irisan tertentu dan tidak membuat yang baru. Alat ini dapat ditemukan di menu drop-down Slice Tool.

Sepanjang proses pemotongan file, pemotongan otomatis akan dibuat dan dipisahkan dari potongan lainnya. Selanjutnya, kita akan melihat proses mengekspor data irisan ke file terpisah atau mengabaikan file tertentu saat mengekspor, tetapi sekarang mari kita lihat proses mengubah irisan otomatis menjadi manual.

Prosesnya sangat sederhana. Pertama, Anda perlu memilih segmen yang dibuat secara otomatis menggunakan alat pemilihan segmen. Selanjutnya, pilih segmen yang dibuat secara otomatis yang perlu Anda konversi dan klik tombol “Promosikan” yang terletak lebih dekat ke atas.

Segmen yang terbagi secara otomatis

Jika Anda memiliki serangkaian objek yang disusun secara horizontal, vertikal, atau dalam kotak, Anda tidak perlu membuat area pemotongan di sekitar setiap objek. Sebagai gantinya, Anda dapat membuat satu segmen yang mencakup semua objek dan memerintahkan Photoshop untuk melakukan sisanya.

Untuk melakukan ini, pertama-tama Anda perlu membuat garis besar dengan menggambar kotak di sekeliling semua objek. Selanjutnya, dengan menggunakan alat pemilihan segmen, klik tombol “Bagi” di bagian atas halaman.

Memotong sepanjang panduan

Banyak dari Anda mungkin lebih nyaman bekerja dengan panduan dibandingkan dengan alat pemotong di Photoshop. Secara keseluruhan hampir sama, namun sistem relnya memang terlihat sedikit lebih mulus.

Jika Anda menggunakan metode yang sama, ini sangat menyederhanakan proses pembuatan segmen. Sesuaikan saja panduannya sehingga Anda dapat memotong file PSD Anda dan mengabaikan alat pemotong. Selanjutnya, setelah selesai, pilih alat pemotong, dan klik tombol “Slices from Guides” yang terletak di bagian atas.

Hal pertama yang akan Anda temui jika Anda belum pernah memotong file sebelumnya adalah semua file diekspor dengan nama yang sama sekali tidak berarti dan tidak dapat diidentifikasi. Untuk memperbaikinya, Anda perlu memastikan bahwa Anda memberi nama pada setiap segmen. Apa pun nama yang Anda berikan pada segmen tersebut, segmen tersebut akan ditetapkan ke file yang diekspor.

Untuk memberi nama segmen, cukup klik dua kali pada konten menggunakan alat pembuatan segmen yang dipilih. Ini akan memunculkan dialog di bawah ini.

Sekarang, jangan kaget! Bahkan jika Anda memilih opsi CSS, Photoshop kemungkinan besar tidak akan membuat situs web ajaib untuk Anda. Akan jauh lebih nyaman dan menguntungkan bagi Anda untuk melakukan semuanya sendiri, atau setidaknya di Dreamweaver. Hal ini membawa kita pada kesimpulan bahwa lebih baik menghindari pilihan-pilihan ini sama sekali.

Irisan Berbasis Lapisan dan Mengapa Itu Pilihan Terbaik

Satu hal yang membuat proses pemotongan sedikit lebih menyenangkan adalah pemotongan berbasis lapisan. Ini seperti pemotongan tangan, tetapi memiliki beberapa kelebihan.

Sesuai dengan nama metodenya, segmen ini tidak didasarkan pada kotak, seperti pada kasus pertama. Maksudnya disini adalah tepi-tepi ruas tersebut dipatuhi oleh batas-batas lapisan. Untuk menerapkan pemotongan berbasis lapisan, pilih lapisan di panel Lapisan, buka menu dan pilih Lapisan> Irisan Berbasis Lapisan Baru. Harap dicatat bahwa ini akan berfungsi bahkan jika Anda memilih beberapa lapisan sekaligus - setiap lapisan akan diubah menjadi segmen terpisah!

Keuntungan

Salah satu penyebab mengapa alat pemotong konvensional memiliki banyak kekurangan adalah karena penggunanya harus bekerja ekstra, apalagi jika nantinya ada yang perlu diubah pada desainnya. Setelah Anda mengampelas semua gambar, Anda harus mengulangi semuanya agar potongan Anda dapat dipasang kembali di template baru. Karena alasan inilah desainer tata letak kami, misalnya, memotong dan menyimpan semua elemen secara terpisah dengan tangan.

Namun, metode pemotongan berdasarkan lapisan cukup dapat diterima. Ketika Anda telah memproses semua lapisan, bagian Anda akan dibuat secara otomatis. Jika Anda menambahkan efek yang mengubah batas (seperti cahaya luar), bilah secara otomatis meluas hingga menutupinya. Jika Anda mengubah bentuk lapisan menjadi 30% dari ukuran aslinya, maka segmen tersebut akan mengikuti secara otomatis.

Memotong gangguan

Hal lain yang mungkin mengganggu semua orang yang pernah berurusan dengan pemotongan adalah bahwa proses pemotongan dapat sangat “mengotori” file PSD, terutama jika kita berbicara tentang pemotongan otomatis.

Misalnya, lihat gambar di bawah (ini sangat disederhanakan, tetapi Anda akan melihat dengan tepat apa yang sedang kita bicarakan). Hanya ada tiga baris yang harus dibuat di sini, tetapi Photoshop secara otomatis membuat 12!

Untuk menghindari hal ini, kita cukup menggunakan alat pemilihan irisan dan mengklik tombol Sembunyikan Irisan Otomatis yang terletak di bagian atas layar. Hal ini memungkinkan kita untuk sampai pada apa yang dikatakan judulnya, yaitu. sembunyikan semua bagian yang tidak diperlukan itu.

Ini adalah poin kunci di mana pemotongan sangat membantu. Tanpa memotong, Anda harus menyimpan seluruh komposisi dalam porsi terpisah. Alur kerjanya akan seperti ini: membuat pilihan, memotong, mengoptimalkan web, menyimpan, tidak memotong, dan sebagainya dalam lingkaran. Begitu banyak langkah yang tidak perlu! Mari kita lihat bagaimana keadaannya dengan pemotongan.

Setelah Anda menyelesaikan semua pemotongan, file PSD Anda siap untuk diekspor. Sekarang Anda dapat masuk ke menu File dan pilih Simpan untuk Web dan Perangkat. Anda mungkin sudah familiar dengan langkah ini, namun akan sedikit berbeda jika Anda sudah memiliki dokumen yang dipotong.

Setelah Anda membuat semua pengaturan yang sesuai, Anda cukup menekan tombol simpan. Sebuah kotak dialog akan muncul memungkinkan Anda memilih folder untuk menempatkan gambar yang sudah jadi. Ingatlah bahwa Anda telah mengatur semua pengaturan dan nama bagian, jadi biarkan semuanya apa adanya. Kuncinya di sini adalah memastikan bahwa Anda mengekspor semua rentang khusus dan rentang yang dipilih.

Kesimpulan

Hari ini kita membahas sisi teknis Photoshop, dan sekarang kita akan mencoba meringkasnya. Pertama-tama, memotong file PSD bisa terlihat seperti sesuatu yang tidak menyenangkan dan membosankan jika Anda tidak tahu bagaimana dan apa yang harus dilakukan. Cobalah untuk memahami program ini dan mencoba berbagai teknik pemotongan.

Kedua, ingatlah bahwa ada tiga jenis pemotongan: pemotongan otomatis, pemotongan manual, dan pemotongan berbasis lapisan. Pemotongan otomatis agak kaku dan menimbulkan efek tidak menyenangkan pada dokumen itu sendiri. Mungkin seseorang tidak setuju dengan kami, tetapi cobalah menyembunyikan segmen yang dibuat secara otomatis. Pemotongan tangan itu sendiri mewakili apa yang dilakukan sebagian besar desainer tata letak. Anda dapat membuat segmen menggunakan alat pemilihan segmen, lalu menamainya dengan mengklik dua kali mouse. Pemotongan berbasis lapisan mirip dengan pemotongan manual, namun lebih terkontrol, Anda hanya perlu berhati-hati dalam memisahkan objek menjadi beberapa lapisan. Anda dapat memindahkan, menskalakan, dan menambahkan efek ke lapisan, dan irisan akan beradaptasi secara otomatis.

Terakhir, saat mengekspor dokumen dengan segmen, pilih Simpan untuk Web dan optimalkan setiap segmen satu per satu. Pastikan juga Anda hanya mengekspor potongan manual dan potongan yang dipilih, jika tidak, potongan yang dibuat secara otomatis hanya akan memakan ruang di hard drive Anda.

Ini mungkin lebih banyak informasi daripada yang ingin Anda ketahui tentang pemotongan di Photoshop, namun semoga informasi ini benar-benar membantu proyek Anda di masa depan sehingga Anda dapat memanfaatkan sepenuhnya berbagai jenis pemotongan.

Ceritakan kepada kami tentang cara Anda memotong file PSD. Bagaimanapun, alur kerja yang dijelaskan dalam artikel hari ini hanyalah satu dari ratusan struktur. Penting bagi kami untuk mengetahui metode apa yang Anda gunakan!

Setiap desainer web harus memotong situs web untuk tata letaknya HTML+CSS. Tidak hanya web designer, layout designer dan programmer juga melakukan hal serupa. Saya telah lama memperhatikan bahwa segera setelah memotong situs, desainer dan pemrogram mengeluarkan alat seleksi dari saku mereka dan mulai memilih setiap elemen grafik satu per satu. Salin, buat Pasta ke file baru, simpan. Seluruh tata letak dipotong kira-kira dengan kecepatan progresif ini.

Saya memotong situs itu sendiri dengan cara yang persis sama. Yang lama dan dapat diandalkan selalu lebih disukai daripada yang baru dan tidak dapat dipahami. Namun suatu saat Anda harus menghilangkan kebiasaan lama. Bukan tanpa alasan bahwa Photoshop telah memiliki cara progresif dalam memotong situs web selama sekitar 15 tahun hingga saat ini. Tentu saja tidak seprogresif sebelumnya. Tapi tidak ada juga. Dalam tutorial ini saya akan mengambil salah satu maket situs web terbaru saya dan memotongnya dengan alat tersebut Alat Iris.

Bagaimana cara memotong situs web di Photoshop?

Pemotongan situs yang benar harus dimulai dengan panduan. Panduan adalah garis putus-putus yang membantu menandai tata letak di Photoshop. Saat bekerja dengannya, Anda perlu memahami bahwa panduan tidak melekat pada tepi piksel dengan cara apa pun. Jika Anda mengatur panduan bukan di antara piksel, tetapi, misalnya, di tengah piksel 50% + 1%, maka saat Anda memilihnya, Anda akan menangkap piksel tambahan yang tidak Anda perlukan. Untuk menghindari hal ini saya akan menggunakan beberapa trik sederhana.

• Pastikan Anda telah mengaktifkannya Tampilan > Ekstra. Pengaturan ini bertanggung jawab atas semua label tambahan secara bersamaan.
• Nyalakan penggaris Tampilan > Penguasa, Anda akan mengambil panduan dari penggaris.
• Menyalakan Tampilan > Jepret. Secara umum, ini berarti panduan Anda akan dilampirkan ke lapisan, lapisan ke panduan, atau satu sama lain. Secara umum, segala sesuatu akan tertarik seperti magnet. Ini akan membantu Anda lebih presisi saat bekerja dengan panduan.
• Selanjutnya, aktifkan pengaturan Tampilan > Tampilkan > Tepi Lapisan, pengaturan ini akan menampilkan tepi lapisan saat dipilih.
• Tampilan > Tampilkan > Panduan— visibilitas pemandu itu sendiri.
• DAN Tampilan > Tampilkan > Panduan Cerdas. Mereka juga tidak akan berlebihan.

Kemungkinan besar, sebagian besar pengaturan ini sudah diaktifkan. Namun tidak ada salahnya untuk memeriksanya.

Manipulasi Lapisan

Sekarang beberapa kata tentang memanipulasi lapisan. Saat memotong situs, Anda harus terus-menerus mencari lapisan yang tepat. Pada saat yang sama, sebagian besar pengembang yang terlibat dalam tata letak, dan yang memiliki sedikit pengetahuan tentang Photoshop, mencari lapisan di tab Lapisan Lapisan. Yang tentu saja logis. Namun, ini hanya nyaman jika perancang, setelah merawat Anda, dengan hati-hati mengatur semua lapisan ke dalam folder, dengan hati-hati memberi nama setiap tombol. Dalam hal ini, menemukan elemen yang tepat tidaklah sulit. Ya, desainer tidak selalu bertindak seperti ini secara sadar. Kadang-kadang mustahil menemukan apa pun dalam lapisan yang tersebar secara kacau, terutama jika terdapat lebih dari seratus lapisan.

Faktanya, tidak perlu mengobrak-abrik lapisan di panel Layers. Anda dapat menentukan lokasi lapisan dengan alat ini Pindahkan Alat. Saya sudah menunjukkan cara kerjanya di . Cukup pilih alat ini dan klik pada objek yang diinginkan dengan menekan tombol CTRL. Photoshop secara otomatis akan memilih lapisan yang diinginkan di panel Layers. Anda juga dapat mengklik tanda centang di pengaturan alat Pilih Otomatis. Selanjutnya Anda perlu memilih lapisan Lapisan. Maka Anda tidak perlu terus menekan CTRL, namun, dalam hal ini alat akan selalu bekerja dalam mode pencarian otomatis. Di mana pun Anda mengklik, itu akan melompat dari satu lapisan ke lapisan lainnya, yang tidak selalu nyaman jika Anda ingin memindahkan lapisan yang dipilih.

Setelah memilih lapisan yang diinginkan, ujung-ujungnya akan segera disorot berkat pengaturannya Tampilan > Tampilkan > Tepi Lapisan, yang kami sertakan sedikit sebelumnya. Ini akan memudahkan Anda menyiapkan panduan dan memotong situs. Sekarang persiapannya sudah selesai, mari kita lanjutkan ke pemotongannya sendiri.

Menandai tata letak dengan panduan

Nyalakan penggaris Lihat > ​​Penguasa dan seret panduan keluar dari penggaris dengan mouse Anda. Pada penggaris itu sendiri, atur Piksel. Untuk melakukan ini, klik kanan pada penggaris dan pilih dari menu drop-down Piksel. Selanjutnya, tarik keluar panduan satu per satu dan tandai tata letak Anda. Bekerja dengan alat ini, klik pada elemen desain dengan mengklik CTRL untuk menyorot tepi lapisan.

Saat menandai tata letak dengan panduan Panduan Penting untuk menyorot semua elemen grafis yang Anda inginkan saat memotong. Jika tata letaknya memiliki gambar, tandai di semua sisi. Logo, slidebar besar, dan bahkan strip tekstur, jika tersedia. Semua panduan lama yang digunakan untuk membuat desain tata letak dapat dihapus. Desainnya sudah dibuat.

Hasilnya, kita akan mendapatkan gambar berikut.

Alat Iris

Setelah semua area digariskan dengan panduan, pilih alatnya Alat Iris dari bilah alat. Alat Photoshop ini hadir dalam dua alat:

• Alat Iris— memotong grafik menjadi beberapa bagian, atau lebih tepatnya, hanya menentukan tempat yang nantinya akan disimpan sebagai gambar berbeda.
• Pilih Alat Iris— dari namanya jelas bahwa alat ini memilih area yang sudah “dipotong” untuk mengubah pengaturan. Mengapa kedua instrumen tersebut tidak dapat digabungkan menjadi satu?

Ngomong-ngomong, saya tidak mengatakan itu alatnya Alat Iris muncul di Photoshop, bersaing dengan yang bernasib buruk Kembang api, dengan tujuan mengambil sebagian pasar dari yang terakhir dan memberi desainer web setidaknya beberapa alat yang berguna untuk mereka. Sejak itu, kemampuan alat tersebut Alat Iris praktis tidak ada perubahan atau penambahan yang dilakukan. Setelah pembelian Adobe perusahaan makromedia, yang menyertakan program Kembang Api, segala sesuatu yang berguna bagi perancang web dipromosikan secara ketat Kembang api. Versi terbaru Photoshop CS6 tidak menghadirkan alat tersebut Alat Iris tidak ada inovasi. Oleh karena itu, saya bekerja dengan ketenangan pikiran CS5.

Memilih alat Alat Iris, klik tombolnya Iris dari Panduan, yang artinya memotong berdasarkan panduan. Inilah sebabnya kami menciptakannya. Dan ini adalah cara termudah untuk membuat area pemotongan dengan alat Alat Iris. Satu-satunya kelemahannya adalah Photoshop tidak mengetahui area mana yang merupakan markup aktif dan mana yang merupakan tambahan. Terlebih lagi, tata letak kami menghasilkan terlalu banyak area persimpangan. Kami mempunyai panduan untuk Logo, namun panduan di bagian bawah untuk formulir input memotong logo menjadi beberapa bagian.

Untuk memperbaiki kekurangan, pilih alat Alat Pilih Iris tekan SHIFT dan pilih ketiga bagian logo tersebut. Kemudian klik kanan dan pilih dari menu Menggabungkan menghubungkan.

Lakukan hal yang sama dengan area lain pada tata letak Slice.

Faktanya, desain kami tidak terlalu cocok untuk penandaan berbasis panduan. Karena terlalu banyak elemen yang perlu dibersihkan. Ada terlalu banyak area yang harus dikeringkan. Terlalu banyak grafik yang tumpang tindih. Selain itu, timbul masalah lain. Photoshop secara default membuat semua area markup aktif, sementara Anda hanya memerlukan beberapa saja. Dalam hal ini, masuk akal untuk menggunakan pemotongan manual.

Alat Iris situs pemotongan manual

Dalam kasus lain, pemotongan tangan mungkin cocok untuk Anda Alat Iris. Dalam hal ini Anda cukup memilih alat tersebut Alat Iris, dekatkan area kerja untuk melihat pikselnya, dan gunakan alat tersebut Alat Iris mulai menandai tata letak Anda. Metode markup ini bisa berguna jika desainnya terlalu “kreatif”. Jika menunya tidak berada pada level yang sama, tetapi misalnya pada ketinggian yang berbeda. Jika grafik saling tumpang tindih. Dalam hal ini, lebih baik menandai tata letak tanpa panduan.

Saat menandai secara manual, fungsi berikut tersedia untuk Anda di panel pengaturan:

• Normal - markup standar biasa. Tempatkan kursor pada area kerja dan gambar sebanyak yang diperlukan.
• Rasio Aspek Tetap — menciptakan area penandaan dalam rasio 1:1, 2:1 dan sebagainya.
• Ukuran Tetap — membuat tanda dengan ukuran tertentu. Kami memasukkan piksel dan mendapatkan area dengan ukuran yang diperlukan.

Dan hanya itu yang bisa dilakukan alat ini Alat Iris. Saya baru saja membicarakan semua fiturnya dalam beberapa paragraf. Alat yang lebih menarik Alat Pilih Iris, yang sekarang akan kita bahas.

Alat Pilih Iris

Alat Pilih Iris— mengelola markup Anda. Dengan alat ini Anda dapat memindahkan area, menyelaraskan, membagi dua, menggabungkan dan menetapkan berbagai pengaturan yang berguna untuk membuat prototipe HTML. Kami akan melihat semuanya secara bertahap.

Tapi pertama-tama, beberapa tips bermanfaat.

Dengan membuat area potong secara manual, Anda membuat area aktif dan pasif. Area pasif muncul secara otomatis, seperti jika Anda memotong persegi dari selembar kertas kosong dengan gunting. Sisa kertasnya adalah area pasif. Area ini tidak akan disimpan sebagai grafik, namun area pasif mana pun dapat diubah menjadi area aktif. Bagaimana? Untuk demonstrasi, saya kembali menandai tata letaknya dengan panduan, tetapi menggambar area pemotongan dengan tangan.

Alat Alat Pilih Iris pilih area pemotongan pasif, dan pada panel pengaturan klik tombol Mendorong.

Beberapa pengguna mungkin merasa banyaknya area markup mengganggu. Pasif, aktif, Anda tidak ingin melihat semua area, Anda hanya ingin melihat apa yang akan disimpan sebagai gambar individual. Dalam hal ini, cukup klik tombolnya Sembunyikan Irisan Otomatis dan semua area markup pasif akan disembunyikan.

Ada beberapa situasi ketika Anda ingin menyempurnakan desain dan area pemotongan mulai menghalangi. Dalam hal ini, pilih Lihat > ​​Tampilkan > Irisan. Dan area penandaan akan hilang. Setelah Anda mengaktifkan alat tersebut Alat Iris mereka akan muncul lagi.

Hirarki Area Irisan

Area penebangan berhubungan satu sama lain dalam hierarki yang kaku. Sama seperti jalur vektor Photoshop di dalam topeng vektor. Tentu saja, Anda tidak memiliki panel Lapisan tambahan untuk memindahkan area yang dipotong, tetapi Anda tidak memerlukannya. Di bilah alat Alat Pilih Iris Anda memiliki tombol berikut.

• Bawa ke Depan — pindah ke paling atas.
• Memajukan — memindahkan satu lapisan ke atas.
• Kirim Mundur — memindahkan satu lapisan ke bawah.
• Kirim ke Belakang - bergerak ke bawah.

Kata lapisan dalam hal ini kurang tepat, kita berbicara tentang area pemotongan Mengiris.

Anda harus menggunakan opsi ini jika Anda memiliki area pemotongan yang saling bersilangan. Dalam hal ini, area di atas akan disimpan secara keseluruhan, dan area di bawah akan dibagi menjadi beberapa bagian yang sesuai. Sayangnya Alat Iris tidak dapat mempertahankan area tembus cahaya, atau memutuskan tautan lapisan. Tapi aku akan memberitahumu tentang ini nanti.

Membagi area pemotongan Iris

Pilih area markup mana pun dan klik tombol pisah Membagi di panel pengaturan alat. Kotak dialog bermanfaat akan muncul. Apa yang bisa dilakukannya? Faktanya, ada banyak hal, dan ada banyak penerapan tidak langsung untuk jendela ini.

Jendela terpisah membagi area menjadi beberapa area yang diinginkan. Anda dapat membagi area secara vertikal dan horizontal. Dalam kedua kasus tersebut, Anda dapat menentukan bilangan bulat yang dapat digunakan untuk membagi luas. Atau tentukan ukuran ini dalam piksel. Dalam kasus terakhir, Photoshop akan mencoba membagi area menjadi jumlah piksel yang Anda perlukan, tetapi jika Anda tidak menentukan angka pastinya, bagian terakhir mungkin tidak lengkap.

Tentu saja tujuan langsung dari kotak dialog ini adalah untuk membagi area menjadi bagian-bagian yang sama. Namun yang jauh lebih menarik adalah peluang tidak langsung atau sedikit trik web. Jika Anda sudah pernah membuat layout website, namun Anda mungkin tahu bagaimana di Photoshop tidak mudah menemukan pusat area kerja, dan bahkan lebih sulit lagi membagi area menjadi beberapa bagian yang sama. Paling sering, desainer web menggunakan alat untuk memilih latar belakang dan menggunakan jangkar pilihan untuk menemukan pusatnya.

Dengan alat Alat Iris Menemukan pusatnya sangat mudah. Cukup klik pada area kerja yang kosong, tekan tombol Perangkat dan membagi luasnya menjadi 4 bagian sama besar. Setelah itu, tarik keluar pemandu dan tandai area tersebut. Area yang dipotong kemudian dapat dihapus dengan tombol kanan mouse dan dari menu Menghapus. Atau sembunyikan

Saya akan menggunakannya dengan cara yang sama Alat Iris untuk memecah area tata letak di bawah menu. Di bawah ini saya telah menyiapkan area merah untuk konten bersyarat. Sekarang saya ingin membaginya menjadi 5 area untuk tombol, dan Anda tahu bahwa Photoshop bukanlah program terbaik untuk tata letak dan tata letak. Alat Alat Iris Saya akan menggambar area menu. Dan kemudian saya akan membaginya menjadi 5 bagian yang sama dengan kotak dialog Perangkat.

Markup berbasis lapisan

Cara lain yang menyenangkan dan cepat untuk membuat markup tanpa banyak usaha adalah dengan membuat markup berdasarkan lapisan tertentu. Metode ini sangat cocok untuk lapisan persegi panjang sederhana. Untuk melakukan ini, Anda perlu memilih lapisan yang diinginkan di panel Lapisan. Dan kemudian buka Lapisan > Irisan Berbasis Lapisan Baru

Photoshop akan langsung menguraikan layer Anda dengan area pemotongan.

Menyelaraskan area penandaan

Fungsi lain dari Photoshop adalah untuk menyelaraskan area potongan satu sama lain. Artinya, Anda dapat menyelaraskan sekelompok area ke kiri, kanan, tengah, atau bahkan jarak antar area.

Untuk melakukan ini, tentu saja, Anda perlu memilih beberapa area markup dengan alat tersebut Alat Pilih Iris. Setelah itu, gunakan fungsi penyelarasan di panel pengaturan. Saya tidak akan menjelaskan setiap fungsi dalam artikel ini, karena opsi ini sudah dijelaskan dengan baik di artikel. Di dalam alat Alat Iris mereka bekerja persis sama.

Pengaturan area irisan

Kotak dialog terakhir dalam artikel ini mungkin adalah jendela pengaturan untuk area markup itu sendiri. Saya tidak akan membahas dialog ini terlalu jauh karena ini mencakup topik yang sepenuhnya terpisah: pemodelan di Photoshop dari prototipe kerja nyata HTML+CSS . Apalagi di Photoshop Anda bahkan bisa menyimpan XTML file dengan skrip animasi. Apa maksudnya? Ini berarti Anda memotong situs dan menyimpan prototipe tata letak selama prosesnya.

Prototipe tata letak adalah tata letak kuasi yang dihasilkan. Tujuannya sederhana, untuk menunjukkan kepada klien tampilan desain di browser. Tentu saja Photoshop sangat lemah dalam membuat prototipe seperti itu. Sejak Adobe punya Kembang api semua pengembangan web dilakukan di dalamnya. Dan saya tidak yakin Anda akan pernah menggunakan pengaturan prototipe di Photoshop. Saya sama sekali tidak yakin apakah ini harus digunakan di Photoshop. Namun demikian, jika Anda membuat desain, tandai dengan alat Alat Iris, Anda hanya perlu beberapa klik untuk menghasilkan prototipe seperti itu. Saya akan memberi tahu Anda lebih banyak tentang ini di artikel mendatang.

Di sana kita juga akan memeriksa secara rinci kotak dialog pengaturan, yang dirancang untuk mengotomatiskan berbagai hal umum HTML pengaturan dan tag, seperti tag alternatif dan sebagainya. Dan tentu saja, di jendela ini Anda menentukan nama grafik Anda. Anda harus segera mengubah namanya, jika tidak, semua gambar Anda akan diberi nama secara default.

Menyimpan gambar yang dipotong

Untuk menyimpan gambar yang dipotong, buka File > Simpan untuk Web. Dan ini adalah kotak dialog paling dasar untuk membuat prototipe masa depan, yang akan kita bahas di artikel berikut. Tapi sekarang kita hanya akan menyimpan gambar yang dipotong sekaligus.

Anda akan melihat tata letak Anda di kotak dialog. Anda juga akan melihat area markup. Pilih alat Alat Pilih Iris dan pilih markup ini. Di bidang di sebelah kanan Anda dapat mengonfigurasi opsi grafik khusus untuk area pemilihan ini. Masuk akal untuk menyimpan gambar besar JPG, masuk PNG atau GIF. Semua pengaturan harus diatur terlebih dahulu, melewati semua area markup.

Sayangnya, Photoshop tidak dapat menyimpan gambar tersebut dengan transparansi. Anda perlu memahami bahwa alat-alat ini diperkenalkan ke Photoshop pada masa IE5, atau bahkan lebih awal. Oleh karena itu, jika Anda masih ingin logo, atau bagian lain dari desain tetap tembus pandang, Anda perlu kembali ke tata letak dan mematikan latar belakang di lapisan.

Sekarang klik Menyimpan. Di kotak dialog Simpan Format, pilih Hanya Gambar. Dalam pengaturan Bawaan. Di properti pemotongan Anda dapat memilih area untuk disimpan dari Semua bagian, bagian aktif Irisan Pengguna atau hanya bagian-bagian yang telah Anda pilih di jendela Simpan untuk Web.

Secara pribadi saya akan memilih Irisan yang Dipilih karena saya ingin mempertahankan area tata letak yang sangat spesifik karena saya harus kembali ke tata letak beberapa kali untuk menyimpan grafik secara terpisah pada latar belakang semi-transparan. Hanya beberapa menit pekerjaan ini dan grafiknya terpotong.

Saya harap artikel ini bermanfaat bagi Anda dan Anda menemukan sesuatu yang baru di dalamnya. Sekarang Anda dapat dengan mudah mengotomatiskan pemotongan situs web di Photoshop. Selamat bereksperimen!

Layanan tata letak situs web otomatis telah dilengkapi dengan yang baru ( bebas!) dilayani oleh . Dalam hal ini, kami akan memberi tahu Anda apa yang perlu dipertimbangkan saat memotong gambar dari tata letak desain Photoshop dan mengapa tugas ini tidak sepele seperti yang terlihat pada pandangan pertama.

Apa yang perlu diingat saat memotong grafik dari file PSD

1. Pertama, Anda perlu memilih tingkat kualitas grafik yang diekspor. Seharusnya dimungkinkan untuk menetapkan tingkat kualitas default dan menimpanya untuk lapisan tata letak tertentu.
2. Anda harus dapat memilih gambar mana yang ingin Anda ekstrak dari template PSD dalam format JPG. Secara alami, lapisan-lapisan yang tidak mengandung piksel transparan secara otomatis diekstraksi dalam format JPG. Namun lapisan dengan transparansi diekstraksi dalam format PNG secara default. Jika diinginkan, Anda dapat menandai layer mana pun dengan tag #jpg dan itu akan dipotong dalam format JPEG.
3. Grafik harus dioptimalkan untuk WEB sebanyak mungkin. Secara khusus, kompresi otomatis gambar PNG harus dilakukan, baik tanpa kehilangan kualitas (lossless) dan dengan penurunan kualitas (lossy) - yang disebut kuantisasi gambar PNG ke dalam format 8-bit. Hal ini diperlukan untuk memperkecil ukuran grafik dan meningkatkan kinerja SEO. Kedua jenis kompresi ini direkomendasikan oleh Google Pagespeed.
   Grafik JPEG juga harus dioptimalkan.
4. Teks dengan font standar (termasuk Google Fonts) dan gaya yang diterapkan, yang gayanya sesuai di CSS3, harus ditata sebagai teks. Teks lainnya harus ditata sebagai gambar.
5. Lapisan yang dapat ditata sebagai kode CSS3 tidak boleh diekspor. Itu harus diganti dengan kode CSS.
6. Lebar dan tinggi gambar harus minimal, mis. Gambar yang diiris tidak boleh memiliki bidang transparan kosong di sekitar tepinya.
7. Harap dicatat bahwa mode pencampuran lapisan selain 'normal' dapat digunakan. Dalam hal ini, lapisan itu sendiri tidak dapat diekstraksi, namun pengaruh lapisan di bawah lapisan yang diekspor harus diperhitungkan.
8. Efek lapisan harus diterapkan pada gambar.
9. Efek yang diterapkan pada grup lapisan harus diterapkan pada setiap gambar dalam grup.
10. Terkadang Anda ingin mengekspor seluruh kelompok lapisan sebagai satu gambar (misalnya logo). Jika Anda menandai sekelompok lapisan tersebut dengan tag #merge, ini akan dilakukan secara otomatis oleh layanan.
11. Ekspor seharusnya bekerja cukup cepat, mis. membutuhkan waktu beberapa menit, bukan jam.

Secara otomatis memotong gambar dengan cepat dari tata letak Photoshop

Semua persyaratan di atas diperhitungkan dalam layanan. Yang perlu Anda lakukan hanyalah mengunggah tata letaknya, tunggu sekitar satu menit dan unduh hasilnya. Ini benar-benar gratis.

Jika Anda memiliki ide untuk meningkatkan layanan pemotongan, tulis di komentar, atau di ulasan, atau melalui formulir umpan balik.