前端工程师必备的PS技能——切图篇

前端工程师必备的PS技能——切图篇

内容

1. 课程介绍
2. Photoshop界面设置
3. Photoshop基本操作
4. Photoshop传统切图
5. Photoshop精准切图
6. 扩展知识介绍
7. 课程总结

目标

• 能够自己使用Photoshop从网页设计师提供的psd中获取网页前端开发过程中所需要的资源。
• 对简单的Photoshop操作有一个基本的了解。
• 可以做一些简单的图片处理和调整。
• 提高自己的审美及其美感的培养。

---

界面设置
1.新建设置（介绍网页设计中的初始化 尺寸参数 以及一些相关的 快捷键 ）
文件——新建——预设（web）——宽度（1920像素）、高度（不确定，eg:2000像素）——分辨率（72像素/英寸）——颜色模式（RGB颜色）——背景内容（透明）——存储预设——预设名称（网页设计）——确定——确定
2.移动工具设置（介绍移动工具针对网站前端的设置 属性 及其 快捷操作）
移动工具（V）——选择：由“组”切换到“图层”——按住“Ctrl”键，然后选中图层单击鼠标左键
3.视图设置（介绍针对前端在视图方面的设置以及设置中的 技巧和优势）
视图——勾选“标尺（R）”——显示——勾选“智能参考线（M）”
窗口——勾选“图层” 、“历史记录”、“信息”、“字符”四大面板，并删除其他多余面板——信息：单击右上角，面板选项（颜色模式：RGB；标尺单位：像素；勾选“文档大小”和“文档尺寸”；确定）——编辑——首选项——单位与标尺——标尺：像素；文字：像素——确定——窗口——工作区——新建工作区——名称：web切图——勾选“菜单”、“键盘快捷键”——存储（再次打开可以直接窗口——工作区——web切图）