web前段 ps基础
PS基础
1、PS简介
[Adobe Photoshop,简称“PS”],是由Adobe 开发和发行的[图像处理软件]。
Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。
ps有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及。
2、常用快捷方式
2.1 文件
新建 ctrl+n
打开 ctrl + o
关闭 ctrl+w
保存 ctrl+s
另存 ctrl+shift+s
存储为web所用格式 ctrl+alt+shift+s
2.2 编缉
变换 ctrl+T
首选项——单位与标尺
2.3 图像
图像大小 crlt+alt+i
画布大小 crtl+ alt+c
裁剪
裁切
2.4 选择
反选 ctrl+shift+I
取消选择 ctrl+D
2.5 视图
ctrl+R 标尺
清除参考线
清除切片
2.6 窗口
图层F7
信息面板 F8
扩展或功能
3、常用工具
3.1 移动工具
自动选择——图层【分组】
对齐
选中图层——选择对齐方式
3.2 选区
新选区
是否羽化(提示0像素,某些同学会出现松开鼠标测量结果 不准确注意此处设置)
固定大小,固定比例
3.3 放大镜
放大、缩小画布(默认放大,配合alt缩小)
ctrl+加号 ctrl+减号 缩放
alt+鼠标滚轮滚动( 向前放大,向后缩小)
3.4 抓手工具
移动画布
任何工具下配合空格键(转换为抓手工具)
3.5 文字工具
查看文字大小、字体、颜色
复制、粘贴文字
3.6 切片工具
右键
编缉切片选
修改位置 x,y,修改大小 w,h
划分切片
右键划分切片(水平、垂直)
存储
ctrl+alt+shift+s存储为web所用格式
所有用户切片
图片命名
images文件夹
4、Cutterman插件
4.1 介绍
Cutterman是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出,以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。
它支持各种各样的图片尺寸、格式、形态输出,方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则,纯点击操作,方便、快捷,易于上手。
4.2 下载
官网:Cutterman - 最好用的切图工具
4.3 安装
下载对应工具的一键安装程序
解压下载的安装包, 里面是一个可执行文件, 双击打开
点击安装即可
4.4 启用
安装完成后重启PS, 从菜单栏 -> 窗口 -> 扩展里头打开
注:需要登录
安装完成后重启PS, 从菜单栏 -> 窗口 -> 【扩展功能】-> 【cutterman】打开。
4.5 设置输出路径
4.6 一键切图
点击导出选中图层,可以自动输出所需的各种图片。
支持各种图片格式输出
多个图层合并、单独输出
固定尺寸输出
5、图片格式
在保证视觉效果的情况下,选择最小的图片格式与图片质量(通常选择 70-80 之间),以减少加载时间。
5.1 PSD
Photoshop默认保存的文件格式,可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。
5.2 JPG
色彩丰富 【不支持透明】
压缩比高,生成文件体积小,
支持多种压缩级别可以控制文件大小
色彩丰富的图片(摄影图像(产品图,照片,渐变,banner图))
5.3 GIF
支持动画
支持透明(全透明)
颜色不够丰富,只支持256种颜色、文件小
适用于:色彩简单的logo/icon/动图
5.4 PNG
颜色丰富
支持alpha透明(全透明和全不透明,半透明)
早期的浏览器不支持PNG图像
适用于:透明背景图片【投影,发外光, 线条复杂(文字)】
5.5 WebP
谷歌(google)10年推出一种新型图片格式
文件小,支持有损和无损压缩,支持动画、透明
但并不是所有浏览器都支持 webp
web前段 ps基础相关推荐
- 计算机一级ps2019,2019年计算机一级考试PS基础学习点子:PS菜单中英文对照表.docx...
2019 年计算机一级考试 PS 基础学习点子: PS 菜单中英文对照表 PS菜单中英文对照表 一.File New 2.Open 3.Open As 4.Open Recent Close 6.Sa ...
- WEB前端模块化基础知识
前段模块化基础 概念 前端模块化其实就是将一个完整的单一的功能整合起来形成单独的一个功能组件,当需要用的的时候只需要加载这个组件,然后便可以通过该组件唯一的名称去使用其中的内容. 主流模块化框架 co ...
- web前段学习 第二部分
web前段学习 第二部分 HTML的基本使用 嵌套列表 表格标签 表格属性 表单标签 表单相关标签 表格表单组合 `<div>`与`<span>` css基础语法 内联样式与内 ...
- 【转】学PS基础:Photoshop 技能167个 经典的Photoshop技巧大全,如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级水平。
学PS基础:Photoshop 技能167个 经典的Photoshop技巧大全,如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级水平.绝对不是广告噢. 常见技巧 经典的Photoshop技巧大全 ...
- 中国大学MOOC Web前段开发之测试题答案
第一章节 概论 Web前端开发概述 1.web系统前端是指系统中用户接触到的部分.A A.√ B.× 2.web系统后端主要负责完成系统功能,包括数据存取.系统安全等.A A.√ B.× https: ...
- 关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号 单行文本溢出显示省略号 方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
- 软件创新开发基地,web前段作业(第一周)
一.第一集的笔记 1.1 课程的主要部分 HTML+CSS系列教程1之拨云见日 HTML+CSS系列教程2之朔本求源 MTML+CSS系列教程3之风生水起 MTML+CSS系列教程4之巧夺天工 1.2 ...
- HTML、CSS第十二天学习(PS基础完整)
## PS基础 ### 1.PS简介 [Adobe Photoshop,简称"PS"],是由Adobe 开发和发行的[图像处理软件]. Photoshop主要处理以像素所构成的数字 ...
- PS基础(11.5天)
PS基础 1.PS简介 [Adobe Photoshop,简称"PS"],是由Adobe 开发和发行的[图像处理软件]. Photoshop主要处理以像素所构成的数字图像.使用其众 ...
- 好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
最新文章
- 没有数据也能翻译?一文读懂「无监督」机器翻译
- RedHat 下常见系统故障及恢复方法(整理)
- Java线程池深入理解
- 如何让CloudStack使用KVM创建Windows实例成功识别并挂载数据盘
- 在Oracle里,表的别名不能用as,列的别名可以用as
- 卷积神经网络的几种典型架构
- Windows Server2012虚拟内存设置
- 计算与推断思维 三、Python 编程
- Express使用进阶:cookie-parser中间件实现深入剖析
- java项目学习_一个Java项目的学习
- 强大的网页性能测试工具--Speed Tracer
- ie6 插入图片img png24 阴影
- yolov3 指定gpu_干货|手把手教你在NCS2上部署yolov3-tiny检测模型
- 如何把手机投影到电脑,电脑可以当作电视一样被投屏
- 【2019秋招】携程数据分析岗笔试编程题——画心形
- 时序分析——Latch timing
- 程序员mac开发环境配置
- 仿乐享微信营销服务系统源码免费下载
- 十年测试经验的阿里p10讲解python初阶:函数和模块 python全栈自动化测试系类4-2
- Python界面编程第二课:Pyside2 创建窗口 (Python GUI)
热门文章
- pkg打包node工程
- Mysql查询当天,本周,本月所有数据记录
- win10更新后耳机没有声音的解决方式
- 信用卡诈骗检测(经过测试)
- 厦门大学计算机研究生2020专业目录,报录比|厦门大学各院系专业2020年硕士生报考录取数据统计表...
- 【bzoj3505】 Cqoi2014—数三角形
- 若依前后端分离密码修改成功,登录提示用户名或密码不正确。
- java接收端怎么收不到_java后端为什么接受不到前端发送的数据
- 【云原生|K8s系列第5篇】:实战使用Service暴露应用
- HDU 5745 La Vie en rose 暴力