psschool 发表于 2017-4-6 00:00:00

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

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

http://www.06ps.com/d/file/2017/0406/1491440746190.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440747673.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440749526.jpg

http://www.06ps.com/d/file/2017/0406/1491440751120.jpg

http://www.06ps.com/d/file/2017/0406/1491440753997.jpg

http://www.06ps.com/d/file/2017/0406/1491440754250.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440756842.jpg


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

http://www.06ps.com/d/file/2017/0406/1491440758725.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440760578.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440762766.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440763782.jpg

http://www.06ps.com/d/file/2017/0406/1491440765406.jpg

http://www.06ps.com/d/file/2017/0406/1491440767832.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440769642.jpg

http://www.06ps.com/d/file/2017/0406/1491440771750.jpg


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

http://www.06ps.com/d/file/2017/0406/1491440772920.jpg

http://www.06ps.com/d/file/2017/0406/1491440774620.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440776383.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440777568.jpg

http://www.06ps.com/d/file/2017/0406/1491440779700.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440781142.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440782391.jpg

http://www.06ps.com/d/file/2017/0406/1491440784602.jpg

http://www.06ps.com/d/file/2017/0406/1491440786559.jpg

http://www.06ps.com/d/file/2017/0406/1491440787407.jpg

http://www.06ps.com/d/file/2017/0406/1491440789967.jpg


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

http://www.06ps.com/d/file/2017/0406/1491440791891.jpg

http://www.06ps.com/d/file/2017/0406/1491440792776.jpg

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

http://www.06ps.com/d/file/2017/0406/1491440794131.jpg

我们的最终效果。

http://www.06ps.com/d/file/2017/0406/1491440746190.jpg
页: [1]
查看完整版本: Photoshop设计立体风格的网页上传窗口教程