网页设计中如何用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日 01:22
下一篇 2022年7月4日 01:24

相关推荐

  • 互联网营销为何被大家搞的如此复杂。

    都说互联网营销如何难,是因为太多人把一个非常简单的问题复杂化了,最后一件简单的事情被大家做的非常复杂,所以才会感觉到互联网营销如此难,但在我看来互联网营销无非就是找客户与客户找上门这两点,除了这两点…

    2022年10月17日
    032
  • 优质的企业网站建设需要具备哪些要素。

    随着互联网的发展越来越快,企业网站已经成为更多企业营销推广宣传的方式,也就意味着企业网站之间的竞争力也在不断的提升,那么想要自己的企业网站建设的更有特色,更具有竞争力,都需要具备哪些要素呢? 一、良好…

    2022年10月18日
    036
  • 我来分享软文标题写作有哪些技巧。

    都说看一个人漂不漂亮,要看她的脸,而看一个人的脸,最重要的是看她的眼睛。一篇软文好看不好看,首先我们看的就是标题,标题有没有吸引力,能不能抓住读者的眼球至关重要,特别是网络上的软文,没有吸引力的标题…

    2023年6月6日 网络推广
    00
  • 网站优化建设:金融网站设计需要注意什么。

    在互联网不断渗透的今天,越来越多的行业开始跟随互联网的脚步,纷纷建立自己的网站,并做好维护和运营。网站建设之初,除了规划网站的主题定位,还需要对网站的整体设计进行全方位的规划。对于不同的网站,设计风…

    2022年9月10日
    090
  • 如何建设一个有特色的网站。

    如何让自己的网站在用户眼中熠熠生辉,网站建设如何突出自己的网站特色?最重要的是建站者如何突出你网站的独特创意,以及网站所满足的独特需求。如何做一个真正有特色的网站,让需要你网站的用户准确找到你?下面…

    2022年9月10日
    066
  • 16个设计感最佳的自建站。

    这样设计自建站,让你的转化率瞬间飙升。 除了在亚马逊上销售产品,现在有许多电商卖家选择创建自己的电商网站,这不仅使卖家拥有更多的主动权,也让其客户拥有更多的归属感。但这一切的前提是,你的网站拥有足够的…

    2022年7月4日 建站资讯
    0199
  • 小编分享网站建设的这些服务你知道吗。

    网站建设的这些服务你知道吗? 很多客户对网站并不陌生,在浏览器输入网址,呈现在面前的网页,我们都知道那叫做网站。那么网站建设也很容易理解,就是网页不可能凭空而来,是需要专业的网站建设技术进行网页设计,…

    2022年11月14日
    05
  • 2016卡片风格网页设计 。

    如果你设计的是一般中小企业的官网,可以跳过这篇文章,因为现在的卡片式网页设计主要是针对信息量大的电商和信息提供商。 [div] 如果你是重度社区用户,尤其是爱接收欧美相关信息的用户,你应该会感觉到社区服务商…

    2022年9月10日
    065

联系我们

QQ:951076433

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