网页图片上传对话框 Photoshop设计立体质感风格的网页上传窗口

软件发布|下载排行|最新软件

当前位置:首页photoshop教程图片处理

网页图片上传对话框 Photoshop设计立体质感风格的网页上传窗口

P大点S   2023-12-09 我要评论
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设计立体质感风格的网页上传窗口,网页图片上传对话框

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们