codecamp

测量及取色

Table of Contents generated with DocToc

测量及取色

所有能接受数字的属性都需要测量并尽可能百分百的还原设计稿。

测量

  • 宽度,高度 (width, height)
  • 内外边距 (padding, margin)
  • 边框 (border)
  • 定位 (position)
  • 文字大小 (font-size)
  • 行高 (line-height),其为第一行的底端到第二行的底端。
  • 背景位置 (background-position)

NOTE: 测量时尽可能放大画布以减少误差。量取文字是为了减少误差尽量选取尺寸大的文字进行测量。

选框工具的多用途,增(Shift)减(Alt)以及交叉选择(Shift + Alt)。左右(或上下)使用分离选框选择可以得到整两个分离边框的距离总值。

取色

所有能接受颜色的属性都需要取色。

  • 边框色
  • 背景色
  • 文字色

NOTE:使用魔棒工具可以迅速识别背景色是否没线性渐变的方法。Mac OS X 推荐使用 Sip 可在 Mac App Store 免费下载。 NOTE+:可以使用魔棒工具来判断颜色是否为渐变。


工具, 面板, 视图
切图
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

书单

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }