博文集合:【重识 HTML + CSS】知识点目录
===============================================================================
测量:
盒子模型属性:宽度、高度、内边距、外边距、边框
文字:字体大小、行高
切图:
图标
有特殊效果的按钮、文字
非纯色的背景
产品图、文章配图、广告图、Banner
行高细节:
微软雅黑的行高:上边距 >= 下边距
宋体的行高:上边距 <= 下边距
信息(F8)
历史记录
图层(F7)
)单位设置
)标尺设置
)颜色模式设置
如果是PNG8图片,颜色可能是索引颜色,需调整为RGB颜色,才不会失真
)移动工具设置
)增加画布大小
缩放:Alt + 鼠标滚轮
Ctrl + +:放大
Ctrl + -:缩小
Ctrl + 1:缩放到 100%
手抓:空格键 + 鼠标左键
移动:Ctrl + 鼠标左键
复制选中的区域:Ctrl + C
如果是拷贝图层,需要先选中图层
粘贴选中的区域:Ctrl + V
新建画布:Ctrl + N
历史记录回退:Ctrl + Alt + Z
复制 + 移动:Ctrl + Alt + 鼠标左键
取消选择:Ctrl + D
删除像素:Backspace 或 Delete键
自由变换:Ctrl + T
可以将选区内容进行拉伸
退出 Esc、确定 Enter
添加到选取:Shift+ 左键
从选取减去:Alt + 左键
与选取交叉:Shift + Alt + 左键
反向选择:Shift + Ctrl + I
测量技巧:
如果测量的元素尺寸比较大,可以在元素两边界使用 Shift 添加选区,使用 Alt 减少选区
切片工具:常常用来测量元素的位置和尺寸、切图
右键编辑切片区域能看到具体的位置和尺寸
导出图片快捷键:Shift + Ctrl + Alt + S(能够导出所有的切片)
图片颜色丰富,无透明需求:JPG(品质一般在 50 ~ 80 就OK,建议最高 95%)
图片颜色不丰富:PNG8
图片如果有半透明效果:PNG24
建议:每一份单独的图片都要保留一份对应的 PSD 格式文件,方便以后修改调整
常见用途:
吸取颜色
确认背景是否为纯颜色(如果要确定是否为线性渐变,可以使用魔棒工具)
颜色模式配置(如果是 PNG8 图片,颜色可能是索引颜色,需调整为 RGB 颜色,才不会失真)
参考线:用鼠标左键从标尺中拖拽出来
按住 Ctrl 键可以更精准挪动辅助线
显示标尺快捷键:Ctrl + R
如果文字是单独的文字图层(用移动工具点击文字),就可以用使用文字工具测量出颜色、大小、行高
如果文字不是单独的文字图层,需要借助矩形选框工具、吸管工具等测量文字的颜色、大小、行高
一般,文字高度就是 font-size 大小
一般,两行文字顶部之间的间距就是 line-height 大小,比如以下选框的高度就是 line-height 大小
按住 Alt 键来移动内容,可以用来覆盖其他内容
读到这的朋友还可以免费领取一份收集的Java进阶知识笔记和视频资料。
资料免费领取方式:关注后,点击这里即可免费领取
更多笔记分享