前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

PS基本切图及应用

首页
2016-08-08 15:30:43
Designed
PS

之前一直用别人切好的页面,心中很是惭愧,为不在麻烦于他人,还是重新打开很久没用过得PS,学习了一下如何切页面,顺便整理一下近期学到的PS切图的基本方法。

美工一般只提供设计稿,那么问题来了,我们如何把设计稿切成自己想要的图片呢,今天我们来简单学习一下如何切图:

切图我们一般只切两种类型的图片,JPG图片和icon图表。重点还是在icon上。

# PS环境配置

  • ps中用到的快捷键:
    • 放大:z
    • 缩小:Ctrl+alt+空格+鼠标点击
    • 切片:c
    • 移动:v
    • 拖动:空格+鼠标拖动’
    • 撤销:Ctrl+z ctrl+alt+z
    • 保存:Ctrl+shift+Alt+s
  • 配置工作环境:


# 基本图片的切法

# icon图标切法


# 图片在网页中的定位

			*{
				margin:0;
				padding:0;
			}
			html,body{
				width:100%;
				height:100%;
			}
			.tb{background-image:url("icon.png");background-repeat:no-repeat;display:block;}
			.icon{
				width:28px;
				height:28px;
				background-position:-28px 0px;
			}
			.icon1{
				width:38px;
				height:38px;
				background-position:-39px -27px;
			}
@前端进阶之旅: 代码已经复制到剪贴板
<span class="icon tb"></span>	
<span class="icon1 tb"></span>
fe
  • PS环境配置
  • 基本图片的切法
  • icon图标切法
  • 图片在网页中的定位

← 实用的60个CSS代码片段jQuery基础之Ajax(六) →