PS制作网页效果图—漂亮的绿色首页模板
更新时间:2024-03-03 11:50:01 阅读量: 综合文库 文档下载
- ps制作网页主页效果图推荐度:
- 相关推荐
Photoshop详解制作漂亮的绿色首页模板
在这篇教程中,你将学会如何在photoshop中制作一个漂亮的绿色的干净的网页效果图。你将学会一些很时髦的设计技巧,像是如何制作3D丝带,或者是如何设置看上去很专业的渐变色。这是教程的第一部分。 最终效果图
看一看我们最终的效果图吧,看上去还不错 :>
在photoshop中新建文档
1在photoshop中新建一个文档,尺寸为980px × 830px.
2 如果你在photoshop软件界面中,没有看到在画布的周围看到标尺,点击试图>标尺(Ctrl + R)可以显示标尺。
3 在画布的四个边,分别拖拽四条标尺线。在这四条线中间,我们将绘制我们的页面。
创建页面背景
4 选择圆角矩形工具 (U), 设置圆角半径为 10px, 设置颜色为#E0E0AC, 在你的整个画布中拖拽一个圆角矩形。设置这个图层名字为 “bg“.
5 好了,现在,我们将扩大我们的画布。首先,缩小我们的画布视图(ctrl+-),然后点击图像>画布尺寸(Alt + Ctrl + C),然后根据下面的截图设置参数。
6 再一次选择 图像>画布尺寸 (Alt + Ctrl + C), 然后根据下面的截图设置参数。
7 在图层面板中点击背景图层,设置前景色为 #6C821C,用油漆桶(G)填充背景。
8 在背景图层上面创建一个新图层,命名为”gradient“.
9 在工具栏中选择渐变工具 (G),从画布头部开始向下拖拽出一个从白色到黑色的渐变。 10 设置该图层渲染模式为颜色加深 ,然后设置图层图层透明度为 10%.
设置主要内容的背景
24 双击 “bg” 图层,打开图层属性面板。根据下图进行外发光的参数设定。
25 新建图层,设置前景色为#2A2009, 选择画笔工具 (B) ,用一个比较硬的直径为25px的画笔,在你的圆角矩形的下边缘,画一个圆。
26 在图层面板中右键单击该图层,设置图层为智能对象。 27 然后点击编辑>自由变化 (Ctrl + T) ,根据下图进行变形。
28 点击滤镜>模糊>高斯模糊,按照下图进行参数设定。
29 设置该图层的渲染模式为整片叠底,透明度为30%。最后,给该图层命名为”shadow“, 把这个图层放在bg图层的上面。
创建导航条
30 好了,接下来,我们来做导航条。选择矩形工具 (U) ,设置颜色为#D8D8A5. 31 在你之前创建的那个大的圆角矩形中,创建一个高为60px的矩形,命名该图层为 “navigation bar“.
Note: 打开信息面板(F8), 这样你就会看到你所创建的矩形的高度。
32 双击图层 “navigation bar” 打开图层属性面板,按照下图设置参数。
33 你可能注意到,我们刚刚创建的矩形并没有圆角。为了纠正这个小的细节,我们应用剪辑蒙板(clipping mask)这个概念。右键点击图层 “navigation bar” layer, 选择创建剪切蒙版。
34 好了,我们接下来要做的是,创建当前页的按钮。选择矩形工具 (U), 设置颜色为#A6A43F, 创建一个高为60px的矩形。
35 设置透明度为15%,命名该图层为”current page button“. 36 然后向下设置剪辑蒙板。
37 选择刚刚的四个图层,点中ctrl然后分别在图层面板中点击这四个图层,然后点击 Ctrl + G群组。设置这个群组名为 “bg & navigation bar“.
38 选择文字工具 (T),给导航添加一些文字,用颜色#A6A43F. 在这次的设计中,我用的字体是 Avenir LT 65 Medium 。如果你没有这个字体,可以用你喜欢的字体代替。
给“特色项目”部分,自定义一个图案
39 好了,我们要创建一个图案。新建一个文档,文件>新建 (Ctrl + N), 尺寸是 5px * 5px, 透明背景。
40 设置前景色为 #2A2009, 在工具栏中选择铅笔工具(B) ,在你的画布中间,画一个1px大小的方框。
41 点击编辑>定义图案。命名这个图案,然后点击ok。好了,你可以关闭这个文件了。
创建“特色项目”区域
42 选择矩形工具 (U) ,创建一个高为330px的任何颜色的矩形。
43 在图层面板上,双击该图层,打开图层属性面板。按照下图进行参数设定。
44 命名这个图层为 “pattern“.
45 选择圆角矩形工具(U), 设置圆角半径8px, 颜色 #A6A43F, 创建一个宽 940px 高240px的圆角矩形。
46 设置图层透明度为50%,命名该图层为 “featured project bg“.
47 选择矩形工具 (U), 设置颜色#A6A43F, 创建一个尺寸为 610px * 220px 的矩形。这个将会是“特色项目”的图片的位置。,命名该图层为 “image bg.”
48 导入任何你喜欢的图片。 (我用的是网站 Envato website 的截图).
49 把图片放在你刚刚创建的矩形的上面,在图层面板上单击创建图层剪切蒙版。命名这个图层为 “image“.
50 选择文字工具 (T) ,在右边添加一些文字。按照下图进行书写。群组这些文字,命名该群组为 “text“.
创建按钮call-to-action
51 好了,我们要在“特色项目”的底部创建两个按钮。选择圆角矩形工具 (U), 设置半径为
8px,颜色为#A6A42F, 创建一个小矩形。命名该图层为 “button 1“.
52我们希望按钮的上面不是圆角。按照下面的操作进行:
A. 确定图层”button 1″的蒙版是选中的。
B. 选择直接选择工具 (A),在你看到的路径上单击。好了,这时候你将看到
在每个圆角上都有两个锚点。
C.选择转换点工具 (默认图标是个小钢笔头,在这一组工具中可以找到) ,单击这四个锚点。
? 再次选择直接选择工具 (A),按住shift键创建直角边。
53 设置该图层透明度为30%.
54 然后用文字工具l (T)添加一些文字。设置颜色为 #EAEAB7. 55 你也可以添加一些小图标。如果你喜欢,可以去这里翻翻看。 56 群组所有的文字和图标图层,命名太群组为”button 1“.
57 创建另一个按钮。
58 为了方便管理,群组所有关于”特色相聚”的图层和群组层,命名这个大的群组为”featured project“.
创建3D丝带
59 选择矩形 (U) 创建一个高为130px的颜色为#A6A43F的矩形,如下图。命名该图层为 “ribbon background“.
60 选择圆角矩形 (U), 设置半径为10px ,在你刚刚创建的矩形的左边的位置,拖拽一个矩形。在这一步,你可以拖拽一些标尺线作为辅助。
61 点击你之前创建的圆角矩形的矢量蒙版,让它被选中。然后选择圆角矩形 (U), 在属性栏中点击从形状减去区的按钮,创建一个圆角矩形。按照下面的截图进行操作。
62 创建一个新的图层,右键点击设置为创建剪贴蒙版。
63 选择渐变工具 (G),按照下面的截图拖拽一个白色到透明的渐变。
64 设置该图层渲染模式为叠加,透明度为30%,命名为 “highlight“.
65 选择矩形工具 (U), 设置颜色为 #878533 ,在图层”ribbon background”上创建一个矩形。 66 选择矩形工具(U), 在属性栏中点击从形状减去区按钮,然后创建一个矩形。如图。剪切掉我们不要的那部分。
67 双击图层,打开图层属性面板。按照下面的截图进行参数设置。
68 重复以上步骤,不过这一次是在丝带的右边。 69 群组所有关于丝带的图层,命名该群组为”ribbon“.
70 在图层”ribbon background”上创建一个新图层。然后按照之前的操作,创建一个阴影。
71 选择圆角矩形工具 (U), 设置半径为8px,颜色为#E1E0C1 ,创建四个圆角矩形,大小为220px * 110px.
72 设置透明度为50%,然后群组他们。命名该群组为”images“.
73 在工具栏中选择文字工具 (T) ,在你的布局下面添加一些文字。也可以添加一些图标。
74 应用文字工具 (T) ,颜色为 #E0E0AC 。在文档的顶端,写上整个站点的名字。 75 双击该图层,打开图层属性面板。按照下图进行参数设定。
76 然后写标语。
77 为了让效果图更完整,你可以选择四个图片,导入到你的文档中。放在你的丝带上。
好了,完成了!
如果你按照该教程进行学习,你应该能得到下面的效果。单击这里查看完整效果。
正在阅读:
PS制作网页效果图—漂亮的绿色首页模板03-03
网页制作试题05-03
整数规划12-09
组织生活会批评与自我批评发言材料范文模板07-30
部编本人教版小学语文二年级上册《日月潭》优秀教学设计01-16
票据法习题09-20
卫生统计学试题10-05
《最简单的有机化合物-甲烷》教学设计资料03-17
电子商务 iwebshop 二次开发文档(简单版)06-08
《大会师》观后感04-02
- 高一物理牛顿运动定律全套学习学案
- 水处理一级反渗透加还原剂亚硫酸氢钠后为什么ORP会升高
- 毕业设计(论文)-正文董家口 - 图文
- 荣盛酒店经营管理公司录用通知及入职承诺书II
- 第二讲 大学英语四级快速阅读技巧
- 质量管理体系文件(2015年委托第三方医药物流配送企业专用版本)
- 214071收款办法
- 苏轼对《文选》选文的评价
- 《诊断学基础B》1-8作业
- 广东省东莞市高一数学下学期期末教学质量检查试题
- 海南电网公司VIS推广应用管理办法
- 红星照耀中国习题
- 苏教版小学语文六年级上册期末复习资料之生字词整理
- 局域网组建与应用—王向东
- 税务稽查内部管理文书样式
- 环保社会实践调查表
- 九年级思品第一单元复习
- 2016年全国注册咨询工程师继续教育公路路线设计规范试卷
- 毕业设计-青岛港董家口港区防波堤设计
- 撞背锻炼方法与益处
- 首页
- 效果图
- 模板
- 漂亮
- 绿色
- 网页
- 制作
- 2016年天津中考24题专题复习
- 学校党支部书记20XX年述职报告-总结报告模板
- 小学四年级数学思维拓展训练题18套
- 东风汽车物流管理改造实例分析
- 2015春山东版品生二上《家乡在哪里》word教案
- 浅析生物质能的开发和利用
- 湖北省黄石市2017年中考英语试题含答案解析
- 投票程序设计-C语言课程设计
- 中国色母粒行业发展概况及最新发展动向
- 国际税收习题及答案-精选资料
- 余额宝存一万一个月多少钱
- 机装机械制造装备设计自考3
- 大余县检察院查办征地拆迁领域职务犯罪案件的经验做法
- 在“七一”离退休表彰大会上的讲话
- (月考)2016-2017九年级英语10月月考试题(含录音稿和答案)
- 红外遥控解码程序
- 手机销售心得 手机销售案例
- 天津大学研究生学术规范
- 2018-2019年小学语文鲁教版《一年级上》《第二单元》《2 四季》
- 经济学原理A卷