zoukankan      html  css  js  c++  java
  • 前端开发使用Photoshop切图详细步骤

    切图的主要目的是从设计师提供的psd中获取网页制作所要的资源

    、界面设置

    1. 新建文件,调整界面大小,背景设置为透明

    2. 自动选择,把组切换为图层

    3. 添加窗口内容,一共四项:图层、历史纪录、信息、字符,之后在右上角调整信息面板选项

    4. 新建并保留该工作区,出问题可以直接恢复

    5. 首选项各内容单位都设置为像素

    到此,准备工作完成完成

    二、基本操作

     这部分视频里主要讲解了一些ps的常见操作,记录几个个人觉得有用的点

    1. shift & alt 的灵活使用

    2. 多个工具(套索、魔棒等)可以配合使用以得到精确的选区

    3. 裁剪时先用选择工具选择,然后转为裁剪,可以获取精确大小

    4. 历史记录画笔的使用,人脸调整

    5. 去掉文字间的底色,显影模式 (alt+单击图层显示按钮)

    6. 钢笔曲线上添加文字

    7. 隐藏参考线(ctrl + ; )

    三、传统/精准切图

     传统切图与切片

    1. 先分析一下,哪些是开发能实现的,哪些是需要切片的内容

    2. 切片(裁剪选项右键),有主动切片与被动切片之分,裁剪速度较慢

    3. 基于参考线的切片,能够同时切出多个类似瓦片,需要删除切的过细的切片

    4. 可以先裁剪出一个区域,再结合切片,最后导出存储为Web格式

    基于脚本的精准切图(要求图层的命名要有层次、准确)

    1. 文件 >脚本切图,可以保留阴影,方便快捷,各切片的名称与图层名相同

    2. 首选项 >增效工具,启用生成器,文件 >生成 >图像资源,更改图层的名称,添加后缀即可(jpg、png等)

    四、小结

    其实主要还是讲ps,对像素的概念强调的比较多,之前大四自学过的好多操作都忘了.....emmmm不经常用就是这样

    最后附上课程地址:https://www.imooc.com/video/9813

  • 相关阅读:
    什么是内存(一):存储器层次结构
    关于跨平台的一些认识
    适合小白/外行的git与github最基础最浅显教程
    Android动画(二)-属性动画
    Android动画(一)-视图动画与帧动画
    View学习(四)-View的绘制(draw)过程
    View学习(三)- View的布局(layout)过程
    View学习(二)-View的测量(measure)过程
    View学习(一)-DecorView,measureSpec与LayoutParams
    wcf的诡异问题
  • 原文地址:https://www.cnblogs.com/sleeping-dog/p/8458156.html
Copyright © 2011-2022 走看看