PS教程!用PS设计立体风格的网页上传窗口教程

photoshoppsps教程
最美UI小编收集整理的PS教程!用PS设计立体风格的网页上传窗口教程教程,供你快速学习PS

本教程主要使用Photoshop设计立体风格的图片上传对话框,各种各样的对话框,对于我们来说,太常见了。

发微博和在网站上上传图片,我们都会遇到图片上传的对话框。今天,参考了网上的一个图片,我们制作了一个超级简单的图片上传对话框。

先看看效果图

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

PS教程!用PS设计立体风格的网页上传窗口教程

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

PS教程!用PS设计立体风格的网页上传窗口教程

我们的最终效果。

PS教程!用PS设计立体风格的网页上传窗口教程

如果觉得最美UI所整理的设计内容对你有所帮助,欢迎将最美UI网站推荐给身边设计好友。

本设计资源来源于网友网络收集整理提供,主要用于学习设计之用,请勿直接用于商业化设计。

猜你在找的PS


adobe photoshop新版本来袭!PS 2019 新功能全面解析
adobe photoshop新版本来袭!PS 2019 新功能全面解析,一起了解下最新版本的photoshop的功能吧!
PS教程:手把手教你制作扁平化HTC ONE
1. 创建新文件,大小1200×1600 px,油漆桶上色,#20ade1,分辨率72px 2.选择圆角矩形工具,勾选”对齐边缘” 宽度:680px 高度:1350px 半径:70px 3.Ctrl/CMD+A 全选,然后水平居中,垂直居中,然后Ctrl/CMD+D取消选择 4.双击形状图层缩 ...
教你两招!如何利用Photoshop进行快速切图?
在UI设计中我们常常使用Ai来进行矢量图的绘制,然后导入Ps中进行设计、排版和导出。 在以前的版本中,切图一直是个很麻烦的事情,要么依托于脚本,要么手动一张张导出,很不方便,这种窘况在Photoshop CC 2015版中得到了解决。 准备 使用Photoshop C ...
PS菜鸟教程!PS移动工具还可以这样用?
首先,这是一篇Photoshop工具使用的教程,而且是非常基础非常入门的教程。如果喜欢,那就会有第二篇,第三篇,只要我时间足够的话,好了,开始正式内容吧。
ps教程!手把手教你做毛茸茸字体效果
这是一个简单的Photoshop技巧,可以应用到各种各样的效果,从毛、皮、草、火、相当多的东西。因此,在本教程中,我将向大家展示如何在PS6中用最基本的工具做一个非常酷而简单的教程—毛茸茸的字体。