IFE 基础学院 第九到十一天:学习 Photoshop 和 做一个漂亮的网站

2018/10/21 FrontEnd

学习目标:根据 psd 实现效果,首先需要学习 Photoshop 的使用,能够根据 psd 文件切出想要的文件,以及了解布局细节。

[TOC]

第九天到第十一天:来做一个漂亮的网站

可参考代码及效果:

日期,今天的学习总用时,今天学习的目标是什么,是否达成

  • 2018.10.20 - 2018.10.21
  • 零碎的几段时间,大概十几个小时吧

学习内容

  • photoshop 的基本使用,掌握查看 psd 以及切图等基本功能
  • 具备根据 psd 实现基本 ui 的能力

学习笔记

切图

前端开发人员也要会的切图技巧

  1. 移动工具移动参考线围住图片
  2. 切片工具
  3. 存储为 web 图片

PS 使用学习

慕课网 ps 课程

1.界面设置

左侧的叫“工具栏”。

  • 移动工具打开后,关闭自动选择,command + 左键,可定位到具体图层
  • 视图,打开:标尺、智能参考线
  • 窗口,关闭多余 tab,双指选择关闭也可以
  • command + 左键,点击具体图层的左侧“图层缩览图”,可以在信息里看到长宽和具体信息

窗口 -> 工作区,保存之前的界面设置

2.简单操作

command + : 隐藏基准线

1.移动工具(快捷键 v)

选中图层后,command + 鼠标悬浮,可以看到该图层到周围元素的距离像素。

alt + 拖动元素,可以复制一个出来。

2.选区

  • 选区工具
  • 套索工具
  • 快速选择区域

选择完区域后,可以按 alt + delete 填充颜色

选区工具(快捷键 m,shift + m 可以切换矩形和椭圆选择)

选择区域,左上角按钮操作,选择多个选区时,在有交集,不同的按钮状态,最后保留的区域不同。

矩形、椭圆选择区域时,按 shift 可以变成正方形或者圆形。记得先放开鼠标再放开 shift 键,不然又会变成矩形、椭圆。

alt 键可以让选择的起点变成圆心。

有点类似安卓的那个 自定义 View 里的熟悉

套索工具 (l)

选择不规则区域,有点类似美图秀秀里的那个选择功能

快速选择区域 (w),还是为了选择区域。

3.裁剪

裁剪工具,类似微信的裁剪

4.吸管工具

获取当前选择点的颜色


中间的八个工具主要用于图片处理。


先用钢笔绘制路径,然后选择文字,在钢笔路径的点上开始,就可以让文字随着钢笔的路径走,而不是水平的。


control + t 可以调整选择的区域大小

3.了解图层

删除不同图层交界元素

  1. command + 左键选择下层
  2. 然后点击要删除的上层图层
  3. 然后选择区域 alt 框选保留的
  4. 最后点击 delete 删除交界的

第三步也可以改成不按 alt,直接框选要删除的,然后按 delete,删除的就是刚才框选的。

4.切片

选中区域后,拉参考线会自动贴近区域边缘。

传统切片

先画参考线,然后用切片工具切。

最好先裁剪为多个模块,分别切。

精准切片

直接打开 psd,文件 -> 导出 -> 将图层导出为文件

可以自动生成图片。

修改图层名,自动生成图片

  1. command + k -> 增效工具 -> 打开“启用生成器”
  2. 文件 -> 生成 -> 图像资源勾选
  3. 文件夹里,会生成 psd 文件名加 “-assets” 的文件夹
  4. 在图层里修改名称,加文件后缀,比如 “.png”,就会在文件夹里生成对应图片

文件名前加 “200%”,比如 “200% Screen @2x.png”,就会生成两倍图,后面的 “@2x” 是为了方便了解是两倍图

如果添加的文件后缀为 .svg,就可以直接生成 svg 文件,太厉害了!

去掉 svg 文件中的长和宽,就可以变成自适应的,bravo!

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 60">
  <defs>
    <style>
      .cls-1 {
        fill: #f00;
      }
    </style>
  </defs>
  <rect id="Button.svg" class="cls-1" width="240" height="60" rx="2" ry="2"/>
</svg>

网页设计时命名规范的话,使用这种自动切图,会方便很多。

双击某个图层,点击弹出的 “复制 css”,就可以复制该图层的 CSS 样式代码到剪切板,真是牛啊!

.China_is_speeding_up_strategic_plan__standards_ {
  font-size: 20px;
  font-family: "Montserrat";
  color: rgba(255, 255, 255, 0.702);
  line-height: 1.6;
  text-align: center;
  position: absolute;
  left: 398.721px;
  top: 372.198px;
  width: 766px;
  height: 84px;
  z-index: 258;
}

其他

图层里有搜索功能,搜索具体的图层。

实战笔记

  1. 使用 ps 查看图层信息,包括尺寸、位置、颜色等
  2. rgba 最后一个表示透明度,范围在 0 到 1,我好蠢啊

让图片铺满整个屏幕:

background-size:100% 100%; /* 背景图片宽度为容器宽度的100%,高度为容器高度的100% */

CSS 背景相关的属性

总结

勤、练、做、看、想

Search

    Table of Contents