分享

Adobe Photoshop熔岩字 抽象花朵背景教程

 百合仔 2019-05-07

PS教学第43篇

第一篇

熔岩字,制作类似熔岩般的火焰文字效果教程(8)

本效果用了多次图层样式来制作,除了制作文字效果外,还教了大家怎自定义图案,学习点相对较多,推荐给新手学习了。

最终效果

Adobe Photoshop熔岩字+抽象花朵背景教程

1、新建一个1000 * 600像素,分辨率为72的画布,背景填充黑色。

下载保存下面的文字素材:

Adobe Photoshop熔岩字+抽象花朵背景教程

再用PS打开,用移动工具拖到新建的画布里面,把图层命名为“文字”,调整好位置,效果如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图1>

2、教程开始之前,我们先来定义一组图案。方法非常简单,先把图2的大图及图3 - 图5都保持到本机,然后用PS打开,分别选择菜单:编辑 > 定义图案,名称自定。可以参考图6,7。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图3>

Adobe Photoshop熔岩字+抽象花朵背景教程

<图4>

Adobe Photoshop熔岩字+抽象花朵背景教程

<图5>

Adobe Photoshop熔岩字+抽象花朵背景教程

<图6>

Adobe Photoshop熔岩字+抽象花朵背景教程

<图7>

3、双击图层面板,文字缩略图区域调出图层样式,然后设置参数:

斜面和浮雕:

Adobe Photoshop熔岩字+抽象花朵背景教程

<图8>

纹理:这是PS自带的云彩图案,如果没有可以先把图案备份一下,然后按照图10所示的方法找回。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图9>

Adobe Photoshop熔岩字+抽象花朵背景教程

<图10>

4、确定后得到下图所示的效果。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图11>

5、按Ctrl + J 把当前文字图层复制一层,效果如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图12>

6、按Ctrl + J 把当前文字图层复制一层,得到“文字副本2”图层。然后再图层面板缩略图区域右键选择“清除图层样式”,效果如图14。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图13>

Adobe Photoshop熔岩字+抽象花朵背景教程

<图14>

7、创建图层面板“文字副本2”图层缩略图,调出图层样式,然后设置参数。

投影:颜色为暗红色:#010101,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图15>

内阴影:颜色为暗红色:#010101,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图16>

外发光:混合模式为“颜色减淡”,颜色为橙红色:#ee5f57,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图17>

内发光:混合模式为“颜色减淡”,颜色为白色,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图18>

斜面和浮雕:高光及阴影的颜色都为白色,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图19>

等高线:

Adobe Photoshop熔岩字+抽象花朵背景教程

<图20>

纹理:选择刚才定义的图案,这里会自动转为黑白,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图21>

光泽:颜色为白色,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图22>

颜色叠加:混合模式为“颜色减淡”,颜色为白色,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图23>

渐变叠加:渐变色设置为黑白,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图24>

图案叠加:也是之前定义的图案,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图25>

描边:填充类型选择“图案”,再选择之前定义的图案,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图26>

8、确定后得到小图所示的效果。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图27>

9、按Ctrl + J 把当前文字图层复制一层,然后在图层面板缩略图位置右键选择“清除图层样式”,如图28,得到图29所示的效果。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图28>

Adobe Photoshop熔岩字+抽象花朵背景教程

<图29>

10、双击图层面板当前图层缩略图调出图层样式,设置参数。

内阴影:颜色为橙黄色:#f38627,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图30>

内发光:混合模式为“叠加”,颜色为白色,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图31>

斜面和浮雕:

Adobe Photoshop熔岩字+抽象花朵背景教程

<图32>

等高线:

Adobe Photoshop熔岩字+抽象花朵背景教程

<图33>

图案叠加:混合模式为“点光”,图案为之前定义的图案,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图34>

11、确定后把填充改为:0%,得到下图所示的效果。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图35>

12、按Ctrl + J 把当前图层复制一层,同上的方法清除图层样式。然后双击图层面板当前图层缩略图载入图层样式。

斜面和浮雕:高光颜色:#d4d3ce,阴影颜色:#3a2e1e,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图36>

等高线:

Adobe Photoshop熔岩字+抽象花朵背景教程

<图37>

纹理:这是PS自带的图案。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图38>

13、确定后把填充改为:0%,得到下图所示的效果。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图39>

14、按Ctrl + J 把当前图层复制一层,得到“文字副本5”图层,然后右键选择“清除图层样式”,效果如图41。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图40>

Adobe Photoshop熔岩字+抽象花朵背景教程

<图41>

15、双击图层面板当前图层缩略图调出图层样式,设置参数。

投影:混合模式为“强光”,颜色为白色,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图42>

外发光:混合模式为“线性光”,颜色为橙黄色:#ff7f00,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图43>

斜面和浮雕:高光颜色为橙黄色:#ffcd02,阴影颜色为:#621702,其它设置如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图44>

纹理:

Adobe Photoshop熔岩字+抽象花朵背景教程

<图45>

16、确定后把填充改为:0%,效果如下图。

Adobe Photoshop熔岩字+抽象花朵背景教程

<图46>

最后把整体锐化一下,完成最终效果。

Adobe Photoshop熔岩字+抽象花朵背景教程

第二篇

Photoshop设计UI界面中的抽象花朵背景图片

在我们制作界面的时候经常会看到网上有很多的绚丽的界面他们的图形都非常炫酷。如何才能快速的制作出这样效果呢?那么今天MICU教大家如何使用2部方法制作炫酷的APP界面。喜欢的缘友们一起来学习吧。

先看看效果图

Adobe Photoshop熔岩字+抽象花朵背景教程

第1步

绘制图形

新建图层选择画板(ps cc 2015才有的功能),选这iPhone6的尺寸大小。

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

新建完图层后我们使用工具栏中的椭圆工具绘制一个椭圆形。双击形状图层将形状的颜色改为黑,

透明图设置为5%。

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

选择形状图层,Ctrl+J复制出同样的一个形状。

Adobe Photoshop熔岩字+抽象花朵背景教程

选择复制出来的图层,【Ctrl+T】将旋转的角度调整为45°。使用同样的方式Ctrl+J进行复制图层,

再Ctrl+T进行旋转,重复3次同样的操作后绘制以下的形状效果。

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

将绘制好的图层全部选中【Ctrl+G】对图层进行编组,方便后面的制作。

Adobe Photoshop熔岩字+抽象花朵背景教程

第2步

添加颜色,加强细节

在图层面板中底部找到【新建图层】按钮点击,新建一个空白图层。

Adobe Photoshop熔岩字+抽象花朵背景教程

使用工具栏中的【画笔工具】绘制颜色。在绘制的前可以调整画笔的大小和颜色,双击工具栏中的颜色进行设定前景色和背景色。通过使用【画笔工具】将颜色绘制成从蓝色到桃红色的渐变效果。

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

渐变颜色图层绘制好后,在图层与编组之间按住【Alt】键进行图层与编制之间的嵌套,让渐变的颜色嵌套到下面的编组上。从而完成以下的效果。

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

选择图层编组,Ctrl+J复制新的编组。选择复制的编组Ctrl+T进行变换,缩放的时候后按住shift+Alt键拖动边缘的方块对图形进行进等比缩放。将图形比例调整到合适的大小,让形状显得更有层次和空间。

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

为了让颜色嵌套到所有的图层上,选中形状的两个编组【Ctrl+G】把图层下面的两个编组合成为一个编组。然后在颜色层与编制之间按住【Alt】将图层嵌套到合成的编组上,这时候背景的主要形状就绘制好了。

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

背景效果制作完后,使用工具栏中的【文字工具】制作字体,文字颜色设置为白色,大小设定280px。

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

Alt键拖动复制字体图层,改成副标题的文案。在【窗口】中找到【字符】面板调整文字的字间距到合适的间距,将字体大小为42px,文字字间距为60。

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

文字制作好后,再次丰富一下背景的效果。选择路径【椭圆工具】,在绘制的时候按住【Shift】绘制一个正圆。

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

双击绘制好的路径图层打开【图层样式】面板选择【渐变叠加】。

Adobe Photoshop熔岩字+抽象花朵背景教程

在【渐变叠加】面板中双击‘“渐变条”调出渐变编辑器调整蓝色到紫色的渐变效果。

Adobe Photoshop熔岩字+抽象花朵背景教程

做好一个圆形的渐变效果后,选择图层【Ctrl+J】复制一个新的图层。然后【Ctrl+T】对新的图层进行缩放。

Adobe Photoshop熔岩字+抽象花朵背景教程

将圆形调整到合适的大小后,再双击图层调整渐变为方向为反响,从而加强两个圆形之间的层次效果。

Adobe Photoshop熔岩字+抽象花朵背景教程

Adobe Photoshop熔岩字+抽象花朵背景教程

但炫酷的效果完成后,我们可以对整体的页面进行功能布局。绘制好功能的按钮及子功能的ICON图标等,从而让页面变得更加的丰富和细腻。

Adobe Photoshop熔岩字+抽象花朵背景教程

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多