个性原创,打造品牌

拒绝模仿抄袭、拒绝模板建站;
多位资深网页设计师同时设计,让您优中选优;
网站独一无二,品牌轻易提升...

了解详情 >

代码规范,国际标准

后台php+mysql动态管理,功能强大,千万级数据;
前台div+css生成静态,代码精简,访问速度快,
符合w3c国际标准,兼容ie/火狐/苹果等任意浏览器...

了解详情 >

细微高效,全程无忧

域名一个,主机一台;
主机BGP多线路,5G存储空间,流量不限;
新闻录入、图片处理、数据备份、安全监测、网站升级...

了解详情 >

移动时代,机不可失

全新视觉、创新操作;
跨平台兼容,微信无缝对接;
不容错过的手机网络商机,不能错过的手机网站时代...

了解详情 >

搜索领先,锁定访客

在主流搜索引擎的搜索结果中,
网站的名称,排在第一页的第一名,
网站其他相关的3-5个关键词,排在第一页...

了解详情 >

营销利器,决胜千里

全国统一呼叫,品牌企业的象标志。
中国电信4008/4009、中国联通4000/4006,号码任选;
通话资费预存...

了解详情 >
以“信”为主的服务理念,“源”为标杆的服务特点351532641点击咨询010-86203368联系电话
CSS问题设计问题程序问题优化问题

Photoshop设计立体风格的网页上传窗口教程

发布时间:2017-10-31      浏览次数:4659

本教程主要使用Photoshop设计立体风格的图片上传对话框,各种各样的对话框,对于我们来说,太常见了。发微博和在网站上上传图片,我们都会遇到图片上传的对话框。今天,参考了网上的一个图片,我们制作了一个超级简单的图片上传对话框。

先看看效果图

Photoshop设计立体风格的网页上传窗口

首先,我做了一个简单的背景,我相信这么简单的背景大家都很熟悉了。

Photoshop设计立体风格的网页上传窗口

画一个圆角矩形框框,添加图层样式。(框框的颜色无所谓,等会我们并不会用到)

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

我添加了一个纹理素材,创建剪贴蒙版。

Photoshop设计立体风格的网页上传窗口

颜色不大好,我创建了一个色相/饱和度调整层,一样的剪贴蒙版。

Photoshop设计立体风格的网页上传窗口

以剪贴蒙版形式,创建一个曲线调整层,参数如下:

Photoshop设计立体风格的网页上传窗口

添加文本和右侧的关闭按纽,我用的是白色,关闭按纽没什么难度吧,两个矩形来构成。

Photoshop设计立体风格的网页上传窗口

用直线工具,画一条直线,颜色我设置的是#121415,添加一个投影样式。添加文本和图像,图像我有做了一个近背景色的1像素描边。

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

接下来,用圆角矩形工具来画一个进度条,颜色为#121415,添加一个投影样式。

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

接下来做进度的呈现,这个不用多说吧,复制一层刚才的进度条,清除掉图层样式,用矩形减去一段就OK了,添加一个渐变叠加。

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

下面,做进度框,一个矩形,加一个三角形,然后跟叠加一个跟刚才进度一样的渐变。

Photoshop设计立体风格的网页上传窗口

添加进度的文本75%,然后添加一个投影样式。

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

添加右侧的关闭按纽,以及垃圾桶按纽,简单的布尔运算就可以搞定了。

Photoshop设计立体风格的网页上传窗口

在右下侧画一个圆角矩形,添加图层样式。

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

添加加号图标按纽和文本,添加一个投影样式。

Photoshop设计立体风格的网页上传窗口

Photoshop设计立体风格的网页上传窗口

添加右侧的取消上传按纽,跟前面一步是一样的,改变的只是渐变颜色而已。

Photoshop设计立体风格的网页上传窗口

我们的最终效果。

Photoshop设计立体风格的网页上传窗口

上一篇:如何缩小网站图片,增加打开速度
下一篇:Photoshop设计WEB游戏网站首页思路教程

Copyright©2016  xinycx.com  All Rights Reserved  北京信源创想科技有限公司  备案号:京ICP备17071760号-1   

京公网安备 11010802036302号


地址:北京市海淀区闵庄路门头馨村北二区33号楼3单元102室  电话:010-86203368  代理域名注册服务机构:北京新网数码信息技术有限公司

北京网站建设 北京网站制作 信源创想 品牌网站建设 企业网站建设 网站设计 APP开发 微信开发 前端切图 DIV+CSS html5切图 APP切图