Heim Web-Frontend HTML-Tutorial 前端工程师技能之photoshop巧用(从效果图到雪碧图)2--测量篇_html/css_WEB-ITnose

前端工程师技能之photoshop巧用(从效果图到雪碧图)2--测量篇_html/css_WEB-ITnose

Jun 24, 2016 am 11:37 AM

【需要测量的信息】
  [1]尺寸信息 -> 测量(矩形选框工具+信息面板)
    [注意]测量时,画布放得尽可能大
    [a]宽度、高度
    [b]内边距、外边距
    [c]边框
    [d]定位
    [e]文字大小
    [f]行高
    [g]背景图位置
  [2]颜色信息 -> 取色(取色器)
    [a]边框色
    [b]背景色
    [c]文字色

【实战】

【1】测量图片宽高
  [1.1]测量普通图片宽高:先用矩形选框工具选择一个大的区域,然后再按住alt键,减去多余的部分

 

[1.2]测量超过1屏的大区域的宽高:先用矩形选框工具在最左边画一个小矩形,按住shift键,再最右边画一个小矩形,信息面板上的宽度信息就是要测量的该区域的宽度信息

 

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

[2.1]当文字是单独图层:通过选项面板上的几个面板可以分别得到文字大小、行高及文字颜色信息

 

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

 

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

[注意]若拉参考线的时候精度不是很高时,先拉出参考线,鼠标不要松,然后按住ctrl键,可以让参考线以0.1px移动

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

    [注意]文字右方或下方有时会有1像素的间隙
  [2.2.2]行高:一行的测量,从第一行的下面到第二行的下面
  [2.2.3]字体颜色的获取:用吸管工具吸取时要注意,文字放大后有很多锯齿,要吸取颜色较实的部分

 

[3]量字母、数字、符号大小:敲一个字母对比来看。然后将行高和字体大小设置成一致,看字母和上下到底空几格,然后再设置行高

 

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

 

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

  

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

 

【量图时的注意事项】
  [a]量图的时候量到的内容区的宽度,如果有padding,要记住减去padding的值
  [b]宋体时,空格为文字大小的一半
  [c]中文字符的标点占一个字符的大小,英文字符的标点占半个字符的大小
  [d]1个像素的冒号点是宋体英文状态,4个像素的冒号点可能是宋体中文、微软雅黑的中英文
  [e]如果两个字符挨得太近,甚至发生重叠,则letter-spacing为负数

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Mar 20, 2025 pm 05:56 PM

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

See all articles