网页设计中如何用photoshop设计立体风格的教程。

非常感谢朋友们长期以来的支持,这期间给大家分享了不少的案例和基础知识,想必大家更想知道更具有技术含量的案例,那么我接下来会给大家分享一些关于网页设计方面的知识内容,希望大家能够喜欢,本期我们主要使用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设计立体风格的网页上传窗口教程

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/48349.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
优化家优化家订阅用户
上一篇 2022年7月4日
下一篇 2022年7月4日

相关推荐

  • 教你为跨越电子政务门户网站建设瓶颈支招。

         我国电子政务门户网站建设的发展虽然有了很大进步,但是对于电子政务至关重要的互动交流平台与网上办事功能却处于落后状态,从下图可以看出,各项都按满分10分计,在“互动交流平台”与“网上办事”两项上的得分,…

    2023年6月18日
    00
  • 新站seo优化:如何快速实现网站收录。

    新网站上线后如何快速被搜索引擎收录?相信是每个站长朋友关心的问题。做seo优化需要循序渐进的操作,每个阶段都有相应的优化技巧。那么新网站应该如何优化才能让搜索引擎快速收录呢?下面我们就来学习一下SEO。 1.…

    2022年9月10日
    082
  • 做网站优化如何正确的对关键词布局。

    关键词布局就是在网站上放置关键词。在SEO中,关键词反复出现,故意出现在页面上不需要关键词出现的地方。因为关键词的相关性和密度在很多情况下可以提高排名,所以在优化中会有各种布局。只有做好关键词,才能提高…

    2022年9月10日
    066
  • 小编分享淘宝没经验怎么开店。

    对于没任何经验的淘宝卖家来说,自然是希望能够学习一些成功人士的开店经验来开好自己的淘宝店铺,但是对于没经验的卖家来说,到底应该怎么开店起步快呢?1、做淘宝首先考虑的是货源,也就是你要在淘宝上卖什么?这个…

    2023年10月17日
    00
  • SEO优化的关键词拓展和日常维护方法。

    很多传统企业不懂seo优化。当他们开始做网站的时候,他们真的很想通过网站来销售他们的产品。但是,网站做好了,就不管了。过了一两年,感觉没什么区别了。根本连网站都不要在后面。 懂一点seo的公司,顶多只做关键…

    2022年9月10日
    070
  • 小编教你页面SEO优化需要掌握哪些技巧。

    网站优化的过程中网站结构和页面优化也是非常重要的,那么网站结构和页面seo优化需要掌握的细节有哪些呢?1、网站目录优化细节介绍;网站目录在优化的过程中目录的层数做好不要超过3层,这样更有利于蜘蛛的抓取;2、网…

    2023年6月29日
    00
  • 解析百度竞价的优劣。

    当你在做网站推广的时候,站长们都知道如何利用百度进行竞价推广,而且自推广以来,百度搜索这个知名品牌迅速受到了大家的追捧。时至今日,人们做网络推广,百度竞价可以说是第一考虑。其实我不知道的是,很多百度…

    2022年9月10日
    078
  • 网站关键字如何选择。

    如何正确选择关键词,决定了一个网站的推广效果和流量。毕竟做SEO只是为了尽量把网站做好迎合搜索引擎的算法,谁也不敢说自己能完全掌控搜索引擎的排名。所以这就涉及到正确选择关键词的话题了。关键词选得好,自然…

    2022年9月10日
    070

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息