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

放一个2天半内给某公司完成的（设计 + 静态实现）的案例吧，静态阴影用CSS3实现的，我最开始设计的时候就想好要用什么实现，各个框的大小是多少（精确到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图能让心变得很安静。送给在前端路上的你我。