-
学习目标查看全部
-
一、四大面板： 图层\历史记录 信息\字符 网页界面设计： 1.尺寸web尺寸，或自定义1920x2000宽度一定，高度可变； 2.背景色：透明 视图设置：智能参考线，标尺 网页流行的分辨率 72 步骤：1.视图/显示/智能参考线以及视图/字符，这两个都要选上； 2.窗口/信息；窗口/字符，两个打开，其他的多余的可不需要，将前面的勾取消； 3.点击信息面板那一个小三角，打开面板选项/标尺单位：像素；两个像素模式：RGB颜色；文档尺寸选上，然后确定； 4.编辑/首选项/单位与标尺【标尺：像素；文字：像素，其他默认不用改动】 这样的做的好处：在PS里打开一个网页，随便点击哪个图片或者某个字符，就可以知道详细的信息。 5.窗口/工作区/新建工作区/名称：web切除，后两个选上，然后点击存储，这样就可以保存下来，防止丢失了。 颜色模式 RGB 标尺 Ctrl+R查看全部
-
shift增加选区，alt删除选区。查看全部
-
Alt+v+e：迅速打开新建参考线 Ctrl+;（分号）隐藏参考线查看全部
-
界面设置查看全部
-
笔记查看全部
-
PS CC版才有<br> <br> Photoshop CS系列没有生成器，没有抽出和复制CSS功能<br> 绿色Photoshop cc2014，“增效工具”没有“生成器”；“文件”没有“生成-图像资源”。Photoshop绿色2015有。查看全部
-
总结：勤、练、做、看、想，没有任何诀窍，祝愿诸君前端之路越战越勇。查看全部
-
#6.1拓展知识# · 自动切图： 【配置】配置完成后，PSD 文件所在路径会出现 对应文件名-assets 的文件夹 1、编辑--首选项--增效工具--这里对『启动生成器』打勾√ （注意，更改在下一次启动 PS 后生效） 2、文件--生成--图像资源（将其打勾√ ） 【使用】 1、在 PSD 内将图层或图层组的名称修改为.png 或.jpg 结尾，则在assets文件夹内自动生成导出图片（以图层名称及其约定的文件后缀名命名）。 2、如果需要适配 retina 显示器，可以将图层命名为『200% 图层名字 @2x.后缀名』（注意需要添加空格，如：200% button @2x.jpg）自动导出的文件名不会出现200%的字样，但是文件尺寸变为2倍大小。 3、如果不想要导出的图片资源了，可以取消图层和图层组的文件后缀名，则导出的图片自动在assets文件夹内消失。 4、还可以通过图层和图层组的文件后缀名来控制导出图片质量，例如『.jpg8』则为 导出为80%品质的 jpg文件，如果不设置则默认为最佳品质。 · 导出为 SVG 格式 与自动切图类似，图层或图层组名称添加.svg 的后缀名即可自动导出。 1、如果导出图层不是标准矢量智能对象，则可能会出现问题，需要手动调整。 2、SVG格式文件大小很小，还可以用sublime 等编辑器对其代码进行精简或进一步优化。 【Photoshop CC 版本支持】 · 文件--抽出资源（可以导出图层为指定格式） · 图层--复制 CSS （可以将矢量图形对象复制为 CSS 代码） 1、CSS 代码会以图层名称作为 class 名称 · 图层管理 图层面板处，可以使用 名称、智能对象、颜色等进行筛选查找查看全部
-
#4.2Photoshop精准切图# 改进切图流程 利用Ps的脚本，进行一种更加快捷精准的切图方法 自动化切图，省时（由于图片可能很大，省时不敢保证）省力 计算机自动计算，尺寸更精确 ----------- 单击文件-脚本-将图层导出到文件 文件类型：png-24 透明区域，交错，裁剪图层勾选 注意：比如说要做一个gif动画，如果是ps导出，半透明效果出不来，我们用ps导出一个一个png序列帧，由于命名是很顺的，我们可以在脚本 当中引入堆栈，那是非常炫的一个功能 1、有阴影会保留下来。 2、命名刚好是图层的名字，如果做网页设计把每个图层命名使用网页中合法的命名，就可以不需要导出后再调整名称。查看全部
-
#4.1Photoshop传统切图# 1、切图与切片 2、切片的基本操作及其技巧 3、导出操作 ----------- 切图工具（C）： 切图选择工具：属性面板有隐藏和显示自动切片，显示后能看到灰色的自动切片 传统切图方式：将需要的图片一个个都切上 简单切图方式：使用参考线，参考线就是在左面或上面的标尺上拖下来就是一根参考线，根据自己需要的图片，使用参考线将它框起来 然后，选择切片工具，点击属性中的，基于参考线的切片，然后将一块图片中多余的切片右键删掉，需要的一块图片形成一个切片 注意：为了使参考线看起来密集，首先使用裁剪工具，将网页切为一块一块，然后再切。 ----------- 参考线的删除和隐藏： 选择移动工具后，将参考线拖动回标尺，就删除了 如果只是想临时隐藏参考线，可以点击视图菜单>显示>参考线，也可以直接按快捷键“ Ctrl + ； ” 如果所有的参考线都不想用了，可以点击视图菜单>清除参考线 ----------- 导出切片： alt+shift+ctrl+s（文件-存储为web所用格式） 选择png-24查看全部
-
CTRL+T不能自由变换？ 首先不能用于背景层，其次，你在视图-显示额外内容，看看勾选了没有。也就是crtl+H。 可能你的crrl+t有反应，但是那个外框没显示，你以为没反应了。注意caps lock是不是按到了，或者目前默认输入法是中文的。查看全部
-
#3.5参考线及辅助# 作图时挺重要的 1.ctrl+R 标尺快捷键 2.用鼠标左键从标尺拖动到图片，可以出现参考线 3.横向参考线按住 alt 键变成纵向参考线 4.删除参考线将其拖回到标尺位置即可 5.新建参考线 按Alt\ V 后 E 6.隐藏\出现参考线 ctrl+； 网页标准：1920X1080 选中图层，再新建参考线时，参考线会被吸附到图层边缘，但吸附到文字的边缘时会自动过滤掉虚化的部分 视图->显示->网格：作图中经常会用到查看全部
-
快捷键ctrl + d,或者菜单栏"选择"-"取消选择" 可以去掉选区查看全部
-
#3.4图层原理及操作#五环案例<br><br> Alt+Delete：前景色填充 <br><br> Ctrl+Delete：背景色填充 <br><br> 先建一个图层再画圆<br> 画圆选区：椭圆选区->Shift+左键（先放开鼠标再放开shift键），alt+delete填充颜色<br><br> 选区->右键点击选区->变换选区->Alt+Shift+鼠标左键：同圆心缩小->确定->Delete删掉小圆内部颜色 <br><br> Ctrl+T：自由变换 按住shift 把圆缩小一点 <br><br> 移动工具->Alt+拖动：复制并且自动新建图层 <br><br> CTRL+在图层缩览图中单击：选中图层中环选区。。。再填充另外颜色<br><br> 按住Ctrl键，然后点击图片区域，会自动选中该图层，对该图层进行操作<br><br> 按住Shift键，选中第一个和最后一个图层可以把所有这之内的图层全选中，最后一起操作<br><br> 裁剪：按住Alt键，以图像为中心建立裁剪区域<br><br> 五环相连：CTRL+在图层缩览图中单击蓝色环，再选中黄色环图层，矩形选框->摁住alt减去黄色环要保留的部分，最后delete,可以去掉黄色部分被选中的小块，如此形成手拉手查看全部
举报
0/150
提交
取消