前端网页设计+静态实现案例

放一个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能力的更多相关文章

  1. 一个GIS系统需具备的功能

    数据的存储(数据结构) 图形显示 功能:拓扑分析 开源的GIS系统:QGIS,SharpMap 各个功能组件

  2. 优秀的web前端工程师要具备什么

    优秀的前端工程师需要具备良好的沟通能力,因为你的工作与很多人的工作息息相关.在任何情况下,前端工程师至少都要满足下列四类客户的需求. 产品经理--这些是负责策划应用程序的一群人.他们能够想象出怎样通过 ...

  3. web设计师和前端设计师的互动—前端工程师应该具备的三种思维

    如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需 ...

  4. web前端开发需要具备的技能

    web前端开发需要具备以下7种技能: 1.页面标记(HTML) HTML页面固定,标签不多,相对来说学起来比较容易.编写HTML代码需遵循HTML代码规范(http://www.cnblogs.com ...

  5. 【CSS】333- 使用CSS自定义属性做一个前端加载骨架

    点击上方"前端自习课"关注,学习起来~ 我们在打开APP或者网站的时候,经常可以看到这样的效果,在内容加载完成之前,会有一个骨架动画的出现,这种加载方式比传统的进度条方式要友好的多 ...

  6. [Linux] 一个前端必会的 Nginx 免费教程-在虚拟机中用deepin测试

    原文技术胖的 nginx 技术胖 专注于前端开发 deepin Linux Deepin 是一个基于 DEB 包管理的一个独立操作系统,和那些 Ubuntu(下个大版本是基于 debian 开发) 的 ...

  7. 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 ...

  8. [front]有效开展一个前端项目

    今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodej ...

  9. 使用gulp来构建一个前端项目

    什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...

随机推荐

  1. alias导致virtualenv异常的分析和解法

    title: alias导致virtualenv异常的分析和解法 toc: true comments: true date: 2016-06-27 23:40:56 tags: [OS X, ZSH ...

  2. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  3. FFmpeg学习6:视音频同步

    在上一篇文章中,视频和音频是各自独立播放的,并不同步.本文主要描述了如何以音频的播放时长为基准,将视频同步到音频上以实现视音频的同步播放的.主要有以下几个方面的内容 视音频同步的简单介绍 DTS 和 ...

  4. 恢复SQL Server被误删除的数据(再扩展)

    恢复SQL Server被误删除的数据(再扩展) 大家对本人之前的文章<恢复SQL Server被误删除的数据> 反应非常热烈,但是文章里的存储过程不能实现对备份出来的日志备份里所删数据的 ...

  5. Entity Framework教程(第二版)

    源起 很多年前刚毕业那阵写过一篇关于Entity Framework的文章,没发首页却得到100+的推荐.可能是当时Entity Framework刚刚发布介绍EF的文章比较少.一晃这么多年过去了,E ...

  6. C++中的事件分发

    本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统(71)-微信公众平台开发-公众号管理

    系列目录 思维导图 下面我们来看一个思维导图,这样就可以更快了解所需要的功能: 上一节我们利用了一个简单的代码例子,完成了与微信公众号的对话(给公众号发一条信息,并得到回复) 这一节将讲解公众号如何设 ...

  8. 多线程条件通行工具——CountDownLatch

    CountDownLatch的作用是,线程进入等待后,需要计数器达到0才能通行. CountDownLatch(int)构造方法,指定初始计数. await()等待计数减至0. await(long, ...

  9. BPM任务管理解决方案分享

    一.方案概述任务是企业管理者很多意志的直接体现,对于非常规性事务较多的企业,经常存在各类公司下达的各种任务跟进难.监控难等问题,任务不是完成效果不理解,就是时间超期,甚至很多公司管理层下达的任务都不了 ...

  10. docker4dotnet #1 – 前世今生 & 世界你好

    作为一名.NET Developer,这几年看着docker的流行实在是有些眼馋.可惜的是,Docker是基于Linux环境的,眼瞧着那些 java, python, node.js, go 甚至连p ...