PS新手教程!教你创建超简单的炫彩背景

2014/07/30 39360

colorful-background-1

@飞屋睿UIdesign :IOS 7毛玻璃质感的UI设计大行其道,别处找来的背景图总是不能符合自己心中理想的配色,在此,我将教大家利用PS制作出这类超级简单又能与自己的界面风格完全搭配的背景图。制作此类背景图的前提是需要懂得一定的色彩理论,更需要一双对色彩搭配敏感的眼睛。

最后做出的背景图如下:

PS新手教程!教你创建超简单的炫彩背景

OK,让我们开始吧。

一、选择色彩方案

大家可以参考这篇教程:《配色弱有救了!教你利用图片创建独有的色彩方案!》我在这里选择了下面这张图片作为配色方案的灵感来源。因背景色彩对比明显才能更好衬托出透明感,因此倾向于选择色调变化较大、分布较广的图片。

PS新手教程!教你创建超简单的炫彩背景

配色方案吸取的颜色为:柿子椒的正红、青檬皮的深绿、葡萄的浅绿和柠檬黄,另外选择图片中的暗色木桌面作为底色,底色发挥衬托其他色彩的作用,如果你的其他色块面积大基本上也看不到底色,但能感觉到它。(嘻嘻,是否能理解这种“看不见但能感觉到”的神秘感呢?)

有人也建议直接选用黑或白的底色,但是我认为图片本身对黑白的表现要丰富得多,纯黑或纯白则过于规则和保守。

二、制作背景图

1、新建文件

在这里,我将要制作一个适应手机屏幕展示的背景图,因此我的PS文件大小设定为W:640px、H:1136px,填充背景色为配色方案中的深色——底色。

PS新手教程!教你创建超简单的炫彩背景

2、在背景层之上新建一个图层,采用大而柔软的画笔笔刷涂上第一种颜色。

这里需要注意的是:

1)涂抹的画笔后最好一步到位,不要犹豫。因为软性画笔上色后,在超出画板的部分将会有一条很突兀的边界,这将不利于你对画笔着色后的图层的移动等操作。换句话说,大而软的画笔使用法则就是一步定位,修改的几率太小。

2)画笔大小我在这里选择的900px,实际大小根据你的文件画板大小和实际需要而确定。

3)画笔的透明度降低为70%,这会使不同的颜色间实现真正的“融合”。

PS新手教程!教你创建超简单的炫彩背景

3、再继续创建新的图层,涂抹上另外几种颜色。色彩的分布随自己的喜好。但注意每一种颜色最好新建一个图层,重命名不同的图层,可以方便今后修改和调整。

PS新手教程!教你创建超简单的炫彩背景

4、将红黄绿的色彩图层合并为一个图层,将这整个图层做一次变形。

(ctrl+T>鼠标右键单击>变形)变形的目的是为了让你的色彩融合得更自然,不再是一个个圆形拼凑起来的样子,而能呈现出一种流动感。这时,你将运用图形中的操作杆任意变化出你喜欢的图案。

PS新手教程!教你创建超简单的炫彩背景

5、这时,也许对你而言这张图片比较暗,那么你可以通过调整色阶来实现提亮和加强图片色彩的对比。

PS新手教程!教你创建超简单的炫彩背景

6、进一步修饰,这类修饰是随性的。根据你自己的期望,可以使用诸如橡皮擦、调整图层进一步将图片变为你想要的结果。

7、最后,为使你的图片颜色显得更为丰富,你可以复制色彩图层,将复制后的图层混合模式改为“柔光”或“叠加”。并适当调整它的透明度。

PS新手教程!教你创建超简单的炫彩背景

三、将背景图投入使用

有很多方式可以做出这样的图片,但对我来说这是最简单的一种方式。请记得,这其中最重要是获得创作的乐趣。

PS新手教程!教你创建超简单的炫彩背景

这是投入项目实际使用后的效果,在背景图上使用的色块和线条都需要降低一点透明度。相信大家按照这个方法可以做出更出色的作品。

PS新手教程!教你创建超简单的炫彩背景

作者微信号,颇多干货,欢迎关注呦:

qrcode_for_gh_6e5bcb5706b3_258

当然,你还可以玩玩Lowpoly风格的背景:
《简易教程出来啦!教你几步创建超火的多边形背景》

没事,如果你懒得自己做的话,还有大把素材可以下载,向下看~
《大福利!350M高分辨率低多边形背景图打包下载!》

现在背景有了,那么Lowpoly风格的网站要怎么做才有范儿呢?看!
《再不学就落伍了!15个设计感极强的LOW-POLY网站欣赏》

简易教程出来啦!教你几步创建超火的多边形背景

原文地址:jianshu
作者:@飞屋睿UIdesign

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

=================== 晒照赠书!设计师男神女神在哪儿? ===================

炎炎夏日!送书解暑!现在优设微信社区也有送书福利活动啦!

【活动日期】本周一(7月28日)至周日(8月3日),发话题时附上自己的真实照片即可。
【活动规则】根据大家的【点赞量】选取男/女神各一名
【活动奖品】我们会送出图灵出版社《网页设计创意书(卷2)》哦!

P.S.照片不能作假哦,必须是本人的真实照片,带脸照!! 工作照、生活照、都可以,当然一起上更好了(*^__^*)
早发皂片早收赞,微信的小伙伴们赶快行动起来吧~\(≧▽≦)/~
进入优设微信,看到底部 点击“聊天交友”进入【优设聊吧】  在点击一次“发话题”就可以爆照啦~快快行动起来吧~

beauty

========================== 参 与 方 式 ==========================

①首先,你要关注一下优设哥的微信啦~【youshege】或者直接扫描二维码:

sdcweixin

②然后,进入优设哥的微信,看到底部,点击“聊天交友”进入【优设聊吧】

make friend

③在点击一次“发话题”就可以爆照啦~ 快快行动起来吧~

new post

P.S.群内如果有亲想要参与微社区活动,但是手机不支持传图发帖的可以联系@【江苏】花花

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/ps-simple-colorful-background

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里