cari
Rumahhujung hadapan webTutorial PS前端工程师技能之photoshop巧用系列第二篇——测量篇

前面的话

  前端工程师使用photoshop进行的大量工作实际上是测量。本文是photoshop巧用系列第二篇——测量篇

 

测量信息

  在网页制作中需要使用photoshop测量的信息分为两类,分别是尺寸信息和颜色信息

  【1】尺寸信息

    尺寸信息主要通过矩形选框工具配合信息面板进行测量,共包括以下项目:

    1、宽度、高度

    2、内边距、外边距

    3、边框

    4、定位

    5、文字大小

    6、行高

    7、背景图位置

    [注意]测量时,画布放得尽可能大,这样结果才相对更准确

  【2】颜色信息

    颜色信息主要通过取色器来进行测量,共包括以下项目:
    1、边框色

    2、背景色

    3、文字色

实战

  接下来,通过几个实际测量来详细说明使用photoshop测量的要点

测量图片宽高】

  1、测量普通图片宽高

    先用矩形选框工具选择一个大的区域,然后再按住alt键,减去多余的部分

前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇

  2、测量超过1屏的大区域的宽高

    先用矩形选框工具在最左边画一个小矩形,按住shift键,在最右边画一个小矩形,信息面板上的宽度信息就是要测量的该区域的宽度信息

前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇
前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇

 

【测量文字大小、行高及文字颜色】

  1、当文字是单独图层

    通过选项面板上的几个面板可以分别得到文字大小、行高及文字颜色信息

前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇

  [注意]若文字颜色面板选出的颜色与显示的颜色不相符时,可能是因为文字颜色被加入了其他效果的处理,这种情况还是需要吸管工具来吸取颜色

前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇

  2、当文字已经合并在图层中时,则情况较复杂些

  a、字体大小

    对于不同字体的文字,字体大小可能是不一样的。一般选择一行中最大的文字进行测量,结果相对较准

    [注意]文字右方或下方有时会有1像素的间隙

  b、行高

    行高的测量实际是一行的测量,从第一行的下面到第二行的下面

  c、字体颜色的获取

    用吸管工具吸取时要注意,文字放大后有很多锯齿,要吸取颜色较实的部分

前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇
前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇

 

【量字母、数字、符号大小】

  敲一个字母对比来看。然后将行高和字体大小设置成一致,看字母和上下到底空几格,然后再设置行高

前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇
前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇

 

【设置加粗】

  设置加粗后,字母会多一个像素,但仍然按照原来的字体大小计算。加粗之后,原来1个像素的竖线变成2个像素

前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇

 

【确定颜色】

  1、确定纯色

  当肉眼无法确定一个区域是不是一个纯色时,可以用取色工具帮助。打开取色工具,按住鼠标不松开并移动,当取到的颜色值有变化时就不是纯色

前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇

  2、确定线性渐变

  先用移动工具选择图层,再用魔棒工具点击,若出现的都是横向的长条,则为纵向颜色变化的线性渐变

前端工程师技能之photoshop巧用系列第二篇——测量篇 前端工程师技能之photoshop巧用系列第二篇——测量篇

 

注意事项

  【1】量图的时候量到的内容区的宽度,如果有padding,要减去padding的值

  【2】当字体类型为字体时,空格为文字大小的一半

  【3】中文字符的标点占一个字符的大小,英文字符的标点占半个字符的大小

  【4】1个像素的冒号点是宋体英文状态,4个像素的冒号点可能是宋体中文、微软雅黑的中英文

  【5】如果两个字符挨得太近,甚至发生重叠,很有可能是letter-spacing为负数

  【6】若拉参考线精度不高时,先拉出参考线,鼠标不要松,然后按住ctrl键,可以让参考线以0.1px移动 

更多前端工程师技能之photoshop巧用系列第二篇——测量篇 相关文章请关注PHP中文网!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Model Langganan Photoshop: Apa yang Anda Dapatkan Untuk Wang AndaModel Langganan Photoshop: Apa yang Anda Dapatkan Untuk Wang AndaApr 15, 2025 am 12:17 AM

Model langganan Photoshop patut dibeli. 1) Pengguna boleh mengakses versi terkini dan menggunakan di seluruh peranti pada bila -bila masa. 2) Yuran langganan adalah rendah, dan kemas kini berterusan dan sokongan teknikal disediakan. 3) Fungsi lanjutan seperti penapis saraf boleh digunakan untuk pemprosesan imej yang kompleks. Walaupun kos jangka panjang yang tinggi, kemudahan dan kemas kini ciri adalah sangat berharga kepada pengguna profesional.

Photoshop: Menyiasat ujian percuma dan pilihan diskaunPhotoshop: Menyiasat ujian percuma dan pilihan diskaunApr 14, 2025 am 12:06 AM

Anda boleh mendapatkan akses ke Photoshop dengan cara yang paling ekonomik: 1. Mengalami ciri-ciri perisian dengan percubaan percuma 7 hari; 2. Cari diskaun pelajar atau guru, serta promosi bermusim; 3. Gunakan kupon di laman web pihak ketiga; 4. Langgan pelan bulanan atau tahunan Adobe CreativeCloud.

Photoshop untuk Pereka: Membuat Konsep VisualPhotoshop untuk Pereka: Membuat Konsep VisualApr 13, 2025 am 12:09 AM

Mewujudkan konsep visual di Photoshop boleh dicapai melalui langkah -langkah berikut: 1.

Adakah Photoshop percuma? Memahami rancangan langgananAdakah Photoshop percuma? Memahami rancangan langgananApr 12, 2025 am 12:11 AM

Photoshop tidak percuma, tetapi terdapat beberapa cara untuk menggunakannya dengan kos rendah atau percuma: 1. Tempoh percubaan percuma adalah 7 hari, dan anda boleh mengalami semua fungsi dalam tempoh ini; 2. Diskaun pelajar dan guru boleh mengurangkan kos sebanyak separuh, dan bukti sekolah diperlukan; 3. Pakej CreativeCloud sesuai untuk pengguna profesional dan termasuk pelbagai alat Adobe; 4. Photoshopelements dan Lightroom adalah alternatif kos rendah, dengan fungsi yang lebih sedikit tetapi harga yang lebih rendah.

Nilai Photoshop: Menimbang kos terhadap ciri -cirinyaNilai Photoshop: Menimbang kos terhadap ciri -cirinyaApr 11, 2025 am 12:02 AM

Photoshop bernilai pelaburan kerana ia menyediakan ciri -ciri yang kuat dan pelbagai senario aplikasi. 1) Fungsi teras termasuk penyuntingan imej, pengurusan lapisan, pengeluaran kesan khas dan pelarasan warna. 2) Sesuai untuk pereka profesional dan jurugambar, tetapi amatur boleh mempertimbangkan alternatif seperti GIMP. 3) Melanggan AdobecreativeCloud boleh digunakan seperti yang diperlukan untuk mengelakkan perbelanjaan satu kali yang tinggi.

Tujuan utama Photoshop: Reka Bentuk Imej KreatifTujuan utama Photoshop: Reka Bentuk Imej KreatifApr 10, 2025 am 09:29 AM

Penggunaan teras Photoshop dalam reka bentuk imej kreatif adalah fungsi dan fleksibiliti yang kuat. 1) Ia membolehkan pereka mengubah kreativiti menjadi realiti visual melalui lapisan, topeng dan penapis. 2) Penggunaan asas termasuk penanaman, saiz semula dan pembetulan warna. 3) Penggunaan lanjutan seperti gaya lapisan, mod campuran dan objek pintar boleh membuat kesan kompleks. 4) Kesalahan biasa termasuk pengurusan lapisan yang tidak betul dan penggunaan penapis yang berlebihan, yang boleh diselesaikan dengan menganjurkan lapisan dan menggunakan penapis dengan munasabah. 5) Pengoptimuman prestasi dan amalan terbaik termasuk penggunaan lapisan rasional, penjimatan fail secara tetap, dan menggunakan kekunci pintasan.

Photoshop untuk Reka Bentuk Web: Teknik Lanjutan untuk UI/UXPhotoshop untuk Reka Bentuk Web: Teknik Lanjutan untuk UI/UXApr 08, 2025 am 12:19 AM

Photoshop boleh digunakan dalam reka bentuk web untuk membuat prototaip tinggi kesetiaan, elemen UI reka bentuk, dan mensimulasikan interaksi pengguna. 1. Gunakan lapisan, topeng dan objek pintar untuk reka bentuk asas. 2. Simulasi interaksi pengguna melalui fungsi animasi dan garis masa. 3. Gunakan skrip untuk mengautomasikan proses reka bentuk dan meningkatkan kecekapan.

Artikel Newbie: Gunakan berus PS untuk menambah kesan retak ke font (kongsi)Artikel Newbie: Gunakan berus PS untuk menambah kesan retak ke font (kongsi)Apr 07, 2025 am 06:21 AM

Dalam artikel sebelumnya "Mengajar anda langkah demi langkah untuk menambah kesan percetakan ke plat imej menggunakan PS (kegemaran)", saya memperkenalkan helah kecil untuk menggunakan PS untuk menambah kesan percetakan ke imej plat menggunakan PS. Artikel berikut akan memperkenalkan kepada anda cara menggunakan berus PS untuk menambah kesan retak ke fon. Mari kita lihat bagaimana untuk melakukannya.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

MantisBT

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna