一个前端所需具备的PS能力
前端网页设计+静态实现案例
放一个2天半内给某公司完成的(设计 + 静态实现)的案例吧,静态阴影用CSS3实现的http://www.cnblogs.com/MuYunyun/p/5693615.html,我最开始设计的时候就想好要用什么实现,各个框的大小是多少(精确到1像素),以及颜色搭配等等。
还有很多素材我就不演示了,设计了好些网页模板,如果有大家想用PS进行网页制作,欢迎大家交流。
很多人做前端只是掌握了最基本的切图(甚至连切图都有不会的),就连小小改动都要麻烦设计师,这就大大浪费了时间的。
练习时候做的
都是我的朋友啦(O-O)
关于PS学习
现在我要分享下如何学习PS的。
1.首先我想说的是要对它有兴趣(这是废话)。能恶搞别人谁没有兴趣。。
2.不要相信说一个星期速成之类的鬼话!我是把慕课网的全部PS教程全部过了遍,而且每个素材都练过!!不会就反复看然后自己找素材练习。有时候弄一张图就花了半天以上。没2个月根本学不到PS的精髓,别谈创新运用了(个人看法)。如果你单纯只要学会切图就当我没说,我只是想说只学切图会让你觉得PS怎么这么无聊。
3.我感觉PS简单又不简单,有时就相差那么点色差,或者明度。
4.多看大神P的图,找灵感,找素材。尽管我们是前端,我们要设计,后台都要懂些,这样子我们才能效率更高。
很久以前的PS笔记
图片名字 显示比例 色彩模式 颜色深度
alt+t:选着图形可以使之变形
1. 2寸照片 放在5寸纸上 2.大头贴
裁切工具:1.斜着的路标裁切 2.使不水平景色的水平①(旋转裁切)
② 使用尺子
移动工具:1.使两或者多张图片复原
△:Ctrl:移动选区 Alt:复制后移动选区
选区工具:1.镜子手表中插入脸蛋 2.二郎神的第三只眼
△:shift 选正圆 或正方形
3.去LOGO 补破照片 去护栏等等
①选区 移动(优点:快)
②选区 alt+c alt+v 或者 选区 alt+j点图层(优点:不影响原图层)
容差:越小则越严 越大则越松
描边 可以做头顶光环
填充+羽化可以①使武器、灯塔等发出炫彩的光
②制作投影
图像的变形:①把海报放到路边(透视)
②把人脸映到葫芦里(葫芦娃)(变形)
③阿拉丁神灯(变形)
④把钟表映到橘子中 (扭曲)
⑤把图片映到茶杯上(变形)
shift+ctrl+alt+t:复制并重复上一次的移动 ①做扇子
②正方形里放正方形
扩大选取:连续(相当于魔术棒连续)
选取相似:不连续(相当于魔术棒不连续)
不透明度越高越实,
不透明度越低越虚。
ctrl+n:复制原来的选区到新定义的图纸(参考日光改月照)
图层保存:可以用“图案保存”
渐变工具:①彩虹桥 彩虹(线性渐变 径向渐变)
②光线渲染(径向渐变)
③制作光盘(直角渐变)
④水晶球(径向渐变+线性渐变)
⑤彩虹戒指(ctrl+up然后alt+up)(线性渐变)
直方图:①曝光不足 ②曝光过度 ③反差不足(色调均化) ④反差过度
(具体情况选具体方法)
色阶:黑场白场同时往里压增加对比度,输出色阶同时往里压降低对比度。
灰场(照相机里面的“白平衡”)
①黑白照片上色
②云朵变色
曲线:斜率越高对比度越高,斜率越低对比度越低
①进行各部位的美容(头发、眼睛、皮肤、嘴、衣服)
②修改云的颜色
ctrl+j = ctrl+c然后ctrl+v
匹配颜色;①面若“桃”色
进阶教程
RGB(色光混合)越加越亮
CMYK(颜料混合)越减越暗
C(青)M(品)Y(黄)K(黑色)颜色模式
红黄绿青蓝紫
红+绿 黄
红+蓝 紫
蓝+绿 青
红+绿+蓝 白
黄+青+紫 黑
移动工具:(对齐 分布的功能)
①快速作张信纸(ctrl减去某个图层)
裁剪工具:shift+o:变换辅助线
人脸美白(污点修复画笔工具,修复画笔工具)
修复画笔工具:alt取样
红眼工具(使红眼变黑)
铅笔工具:可以作出像素字(1像素 shift)
仿制图章工具和修复画笔类似
历史记录艺术画笔工具:马赛克作用
钢笔工具:ctrl选择, alt调整
(锚点两侧都调整) (锚点一侧调整)
路径选择工具:移动选择路径
直接选择工具:alt复制并移动
路径实例(制作表盘)
shift+ctrl+alt+e:合并可见图层为一个新图层
蒙版:shift:停用蒙版(换脸术)
alt:查看蒙版
PS高级教学
(范冰冰素材):1.左腮偏大 2.嘴唇颜色不够鲜艳 3.黑眼圈 4.劲纹
步骤1:液化(解决左腮)
步骤2:模糊工具(处理黑眼圈、处理下嘴角,劲纹)
步骤3:加深工具(处理眉毛、图显双眼皮睫毛)
步骤4:减淡工具(鼻梁处高光部位涂抹,增强立体感)
步骤5:曲线(增强对比度)画笔(涂口红)涂抹工具
ps之脸型篇:女的可以少一些,但是男生的脸一定要有棱角。
普通照片变为卡通动漫效果:
1.液化:冻结区蒙版(保护区域不受变形影响),膨胀工具(放大眼睛)
2.添加纯色调整图层(白色,50%不透明)(图片比较暗的时候用)
3.新建图层,钢笔工具画出眉毛,路径填充
4.钢笔工具勾出侧脸轮廓
5.描边路径 画笔工具(硬圆3px)
6.特殊模糊
7.模糊工具(清楚特殊模糊块状痕迹)
8.画笔工具(涂抹原来的眉毛),加大画面对比度
作品:妈妈、吸血鬼
高反差保留磨皮:
1.通道-创建蓝副本(蓝的对比度最明显)
2.滤镜-高反差保留
3.图像-计算(2、3次)
4.ctrl:选择高光 反选
5.图层面板-新建曲线图层(处理到这里算结束,后文细节处理)
6.shift+ctrl+alt+e - 复制图层两次 -
一个副本进行表面模糊处理(处理鼻子上的汗水),
另一个副本进行高反差保留(提取皮肤纹理,还原上步模糊的一些线条)-线性光
内容识别比例:保护人物或者自己设计的某些部分不受影响
①不变的人和酒
②长高的美女
中性灰磨皮:(这种磨皮能使皮肤保留真实感)(1到5个小时)
1.新建图层
2.编辑-填充50%中性灰(模式为柔光)
3.观察组{
新建纯色调整图层,颜色为黑色(模式为颜色)
复制黑色调整图层,(模式为叠加)
}
b、选择直径在7像素以下的柔角画笔,画笔不透明度设置为:5%,流量为:50%,放大画布至500%。
c、设置前景色为白色,以单个像素为单位轻擦中灰层中较暗淡部位,使其与周边过渡均匀。设置前景色为黑色,以单个像素为单位轻擦中灰色层中较明亮部位,同样使其与周边过渡均匀。
d、增大画笔,配合黑白前景色轻擦明暗过渡区域,使明暗之间平缓过渡。
e、缩小画笔,配合黑白前景色轻擦眼黑与眼白,并用白色画笔擦亮眼神光
人物上写字:
一:打开要处理的素材,然后Ctrl + L 打开色阶调整人物的明暗度
二:然后菜单—-滤镜—–素描—-便条纸
三、确定之后,Ctrl+Alt+2 把人物高光提出来部分,按Ctrl+Shift+i 反选一下,再按Ctrl+J 创建一层图层出来
四:大字、小字
五:渐变
六;然后在图层2白色图层上面新建一个空白图层,按Ctrl点击图层1 载入选区,然后给这个新图层拉一个渐变,渐变色用,我们刚刚给人物用的那个颜色。完成之后再—-滤镜—-模糊—高斯模糊
写轮眼:B6414F 叠加
制作公司印章:结合圆形路径打字(参考金吉岛蛋糕印章)
学到ctrl+Enter:将路径转换为选区;
(自来水厂)仿真 想想看用了什么技术?
制作个人印章:篆刻艺术
常用快捷键
ctrl+shift+N:新建一个图层;
ctrl+G:编组
ctrl+alt+2:选择高光
alt+蒙版:加个黑蒙版
crtl+h:隐藏/显示快捷键
总结
如果找不到素材练习的话,我可以提供些练习过的素材。代码撸累了P张图,其实是很好的放松方式,而且P图能让心变得很安静。送给在前端路上的你我。
一个前端所需具备的PS能力的更多相关文章
- 一个GIS系统需具备的功能
数据的存储(数据结构) 图形显示 功能:拓扑分析 开源的GIS系统:QGIS,SharpMap 各个功能组件
- 优秀的web前端工程师要具备什么
优秀的前端工程师需要具备良好的沟通能力,因为你的工作与很多人的工作息息相关.在任何情况下,前端工程师至少都要满足下列四类客户的需求. 产品经理--这些是负责策划应用程序的一群人.他们能够想象出怎样通过 ...
- web设计师和前端设计师的互动—前端工程师应该具备的三种思维
如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需 ...
- web前端开发需要具备的技能
web前端开发需要具备以下7种技能: 1.页面标记(HTML) HTML页面固定,标签不多,相对来说学起来比较容易.编写HTML代码需遵循HTML代码规范(http://www.cnblogs.com ...
- 【CSS】333- 使用CSS自定义属性做一个前端加载骨架
点击上方"前端自习课"关注,学习起来~ 我们在打开APP或者网站的时候,经常可以看到这样的效果,在内容加载完成之前,会有一个骨架动画的出现,这种加载方式比传统的进度条方式要友好的多 ...
- [Linux] 一个前端必会的 Nginx 免费教程-在虚拟机中用deepin测试
原文技术胖的 nginx 技术胖 专注于前端开发 deepin Linux Deepin 是一个基于 DEB 包管理的一个独立操作系统,和那些 Ubuntu(下个大版本是基于 debian 开发) 的 ...
- capsule network——CNN仅仅考虑了“有没有”的问题,没有考虑feature map的结构关系。这个结构关系包括位置,角度等。Capsule layer的输出也跟feature map的max-pooling输出不同,capsule layer的输出是一个向量,这个向量包含了位置,大小,角度等信息,这是feature map仅能输出一个值所不具备的;训练比较慢
capsule network--<Dynamic Routing Between Capsules> from:https://zhuanlan.zhihu.com/p/31491520 ...
- [front]有效开展一个前端项目
今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodej ...
- 使用gulp来构建一个前端项目
什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...
随机推荐
- .Net中的AOP系列之构建一个汽车租赁应用
返回<.Net中的AOP>系列学习总目录 本篇目录 开始一个新项目 没有AOP的生活 变更的代价 使用AOP重构 本系列的源码本人已托管于Coding上:点击查看. 本系列的实验环境:VS ...
- ZIP压缩算法详细分析及解压实例解释
最近自己实现了一个ZIP压缩数据的解压程序,觉得有必要把ZIP压缩格式进行一下详细总结,数据压缩是一门通信原理和计算机科学都会涉及到的学科,在通信原理中,一般称为信源编码,在计算机科学里,一般称为数据 ...
- 如何在高并发环境下设计出无锁的数据库操作(Java版本)
一个在线2k的游戏,每秒钟并发都吓死人.传统的hibernate直接插库基本上是不可行的.我就一步步推导出一个无锁的数据库操作. 1. 并发中如何无锁. 一个很简单的思路,把并发转化成为单线程.Jav ...
- HTML中上传与读取图片或文件(input file)----在路上(25)
input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...
- 再谈CAAnimation动画
CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation CABasicAnimation动画, 顾名思义就是最基本的动画, 老规矩先上代码: ...
- video.js
1.github地址 2.常用API: class : video-js: video-js应用视频所需的风格.js功能,比如全屏和字幕. vjs-default-skin: vjs-default- ...
- 通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程[下]:管道是如何构建起来的?
在<中篇>中,我们对管道的构成以及它对请求的处理流程进行了详细介绍,接下来我们需要了解的是这样一个管道是如何被构建起来的.总的来说,管道由一个服务器和一个HttpApplication构成 ...
- Carousel 旋转画廊特效的疑难杂症
疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...
- Go结构体实现类似成员函数机制
Go语言结构体成员能否是函数,从而实现类似类的成员函数的机制呢?答案是肯定的. package main import "fmt" type stru struct { testf ...
- mybatis_基础篇
一.认识mybatis: MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改 ...