• 注册
  • 基础教程 基础教程 关注:7 内容:1144

    PS制作一个简单的图片上传对话框

  • 查看作者
  • 打赏作者
  • PS制作一个简单的图片上传对话框插图

    PS制作一个简单的图片上传对话框插图1

    各种各样的对话框,对于我们来说,太常见了。发微博、在网站上上传图片,我们都会遇到图片上传的对话框。今天,参考了网上的一个图片(很久之前的图片,找不着作者是谁),我们制作了一个超级简单的图片上传对话框。

    >>>点击下载PSD+素材

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

    PS制作一个简单的图片上传对话框插图2

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

    PS制作一个简单的图片上传对话框插图3

    PS制作一个简单的图片上传对话框插图4

    PS制作一个简单的图片上传对话框插图5

    PS制作一个简单的图片上传对话框插图6

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

    PS制作一个简单的图片上传对话框插图7

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

    PS制作一个简单的图片上传对话框插图8

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

    PS制作一个简单的图片上传对话框插图9

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

    PS制作一个简单的图片上传对话框插图10

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

    PS制作一个简单的图片上传对话框插图11

    PS制作一个简单的图片上传对话框插图12

    PS制作一个简单的图片上传对话框插图13

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

    PS制作一个简单的图片上传对话框插图14

    PS制作一个简单的图片上传对话框插图15

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

    PS制作一个简单的图片上传对话框插图16

    PS制作一个简单的图片上传对话框插图17

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

    PS制作一个简单的图片上传对话框插图18

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

    PS制作一个简单的图片上传对话框插图19

    PS制作一个简单的图片上传对话框插图20

    添加右侧的关闭按纽,以及垃圾桶按纽,简单的布尔运算就可以搞定了。布尔运算不会,可以看看这个《Photoshop 布尔运算新手入门指南全科普!》

    PS制作一个简单的图片上传对话框插图21

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

    PS制作一个简单的图片上传对话框插图22

    PS制作一个简单的图片上传对话框插图23

    PS制作一个简单的图片上传对话框插图24

    PS制作一个简单的图片上传对话框插图25

    PS制作一个简单的图片上传对话框插图26

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

    PS制作一个简单的图片上传对话框插图27

    PS制作一个简单的图片上传对话框插图28

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

    PS制作一个简单的图片上传对话框插图29

    我们的最终效果。

    PS制作一个简单的图片上传对话框插图1

    请登录之后再进行评论

    登录
    • 大版主
    • 小版主
  • 官方助手
  • 我爱ps
  • 任务中心
  • 帖子间隔 侧栏位置: