Photoshop立体UI图标制作教程分享

给各位Photoshop软件的使用者们来分享一下立体UI图标的制作教程。

教程分享:

首先让我们来新建一个高度为560,宽度为420.

 


填充背景为:#fbf5e7

 


选择圆角矩形工具

 


 


画一个180*180,半径为10的圆角矩形

填充颜色为:#a9d0e1

 


 


ctrl+t,然后右击旋转,旋转45°,然后右击进行扭曲(其中万万不可双击取消变形哦)

 


可以拉辅助线,按住alt键,选中其中一个点,进行水平移动,这样是以中心为点进行的两边的延伸,哎呀,具体怎么个术语我也不是很清楚,就是这个意思吧,哈哈

 


嗯,最后变成这个样子

 


接着我们Ctrl+Alt+↓ 多按几遍大概十七八次就可以了,这部叫轻移。look,是不是有厚度出来了,具体厚度根据自己喜好来定,可厚可薄的嘛,嘻嘻(*^__^*)

 


然后我们按住shift键点选所有轻移出的副本

 


接着Ctrl+g,这样这些副本就全部放到一个组里面了

 


点击组1图层的绿色部分的任何一个位置都可以

 


打开图层样式,进行颜色叠加,颜色为#63a8c7

 


把组1图层放到圆角矩形1图层的下面

 


效果是这样的,是不是立起来啦,

 


接着复制圆角矩形1图层放置组1图层的下面

 


打开图层样式进行颜色叠加,颜色为:#345469,往右下方移动,使阴影露出

 


 


把不透明度降低至50%

 


下面我们来制作小爪子,打开自定形工具

 


找到小爪子

 


如果没有的话,点击边上的小齿轮,然后点击动物,点击追加,这图案是自带的。也可以选择或者制作自己喜欢的图案。

 


 


填充颜色为:#f3cfd3

 


同样,我们做一些变形扭曲的调整

 


从而达到这种效果

 


Ctrl+Alt+↓轻移出多个图层,shift点选所有副本图层,Ctrl+g放入一个组里

 


打开组2的图层样式,进行颜色叠加,颜色为#efa9b1

 


复制形状1图层,放在组2图层的下面

 


进行颜色叠加,颜色为#eb8894,往右下方移动,使阴影露出

 


不透明度降低至50%

 


选择椭圆工具,画个椭圆,填充颜色为#fbf5e7

 


 


Ctrl+Alt+↓轻移出多个图层,shift点选所有副本图层,Ctrl+g放入一个组里

 


对组3进行颜色叠加,颜色为#fe12be

 


复制小肉垫图层,移至组3图层的下面

 


打开图层样式进行颜色叠加,颜色为#e1c789 往右下方移动,使阴影露出

 


不透明度降低至50%

 


大功告成啦,超简单的

 


好了,以上的信息就是小编给各位Photoshop的这一款软件的使用者们带来的立体UI图标的制作教程分享的全部内容了,各位看到这里的Photoshop软件的使用者们,小编相信你们现在是很清楚了制作方法了吧,希望小编分享的对大家有所帮助。

时间: 2024-07-29 16:30:46

Photoshop立体UI图标制作教程分享的相关文章

photoshop简洁地图主题UI图标制作教程

给各位photoshop软件的使用者们来详细分享一下简洁地图主题UI图标的制作教程. 教程分享: 新建文档,这里我用的是800*600像素,画一个圆角矩形,颜色#e8e8e8.   为这个圆角矩形添加一个图层样式.       复制一层圆角矩形,将图层的填充更改为0,添加一个投影样式.     接下来,我们画出定位的那个图标的形状来,颜色#97d601.   这个形状,可能好多人会用圆加矩形去拼接,这里我讲一下我用的方法.先把垂直居中参考线标注出来,画一个正圆.   使用直接选择工具,选择住图中

Photoshop清爽立体指南针图标制作教程

给各位Photoshop的使用者们来详细的分享一下清爽立体指南针图标的制作教程. 教程分享: 一.新建文档,这里我用的是800*600像素,画一个圆角矩形,颜色#e8e8e8.     二.为这个圆角矩形添加一个图层样式.                         三.复制一层圆角矩形,将图层的填充更改为0,添加一个投影样式.                 四.接下来,我们画出定位的那个图标的形状来,颜色#97d601.         五.这个形状,可能好多人会用圆加矩形去拼接,这里我

photoshop设计白色相机UI图标制作教程

给各位photoshop软件的使用者们来详细的解析分享一下设计白色相机UI图标的制作教程. 教程分享:           好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的设计白色相机UI图标的制作教程分享的全部内容了,各位看到这里的photoshop软件的使用者们,小编相信你们现在是非常的清楚了教程了吧,那么现在就快去自己试试吧.

photoshop描边风格图标制作教程

给各位photoshop软件的使用者们来详细的说一说描边风格图标的制作教程. 教程分享: 1.新建[Dribbble牌]画布800x600   颜色模式.分辨率别选错哦. 2.用矩形工具画一个矩形   3.选择参数,将填充去掉,打开描边,像素点自行选择.   4.调整一下描边的形式,[对齐]自行选择[端点]和[角点]一般都选择圆角   5.得到以下形状后,用钢笔工具,在红色箭头区域点几个锚点,间距自行选择.   6.用直接选择工具,框选两个锚点之间.   如下图↓   7.然后按键盘上的删除键

photoshop设计玉镯主题UI图标制作教程

给各位photoshop软件的使用者们来详细的解析分享一下设计玉镯主题UI图标的制作教程. 教程分享: 第一步.绘制图标底座形状,这里给的是300*300,圆角度数为20.   第二步.给底座填充一个从深色到浅色渐变,顶部添加亮色内阴影,底部添加投影.     第三步.添加一个240PX的圆,并给上暗内阴影,下亮投影.同时添加一个比矩形略深的渐变叠加,打造凹槽效果.   第四步.在凹槽内添加一个直径200px,宽度30px的圆环,颜色给高亮绿色,这里给了#adfcd6,做玉镯的基本形状.   第

Photoshop设计电视机主题UI图标制作教程

给各位Photoshop软件的使用者们来详细的解析分享一下设计电视机主题UI图标的制作教程. 教程分享: 首先,我们看看原图,一个400*300的小图.   新建一个1000*800的文档,添加一个渐变调整层,做一个#b4b097到#4e473a的90度的径向渐变,设置缩放为150%,勾选仿色,防止出现色块.   我想大家一定很好奇,我的截图径向渐变中的浅色为何不居中,而是位于中部居上,看我们的GIF演示. 在渐变填充的状态下,我们把鼠标指针放置到屏幕上,出现那个移动工具的图标时,我们拖动,渐变

Photoshop螺旋桨式风扇主题UI图标制作教程

给各位Photoshop软件的使用者们来详细的解析分享一下螺旋桨式风扇主题UI图标的制作教程. 教程分享:   首先,我们来建立一个1667*1250,300DPI的画布.整个教程分为右图五个部分,每个部分在完成以后,都进行了编组,并且每个组的图层状态都为穿透,这个同学们在做的时候要注意.我们首先从背景层开始.   背景1:这一层主要是用一个渐变工具(径向渐变)拉出差不多的效果就可以了.   新建一个图层,命名为背景2:这一层则是在原有背景的基础上,在下半部分制造一个近景的亮色部分.同样的,也是

photoshop扁平微质感的镜头UI图标制作教程

给各位photoshop软件的使用者们来详细的解析分享一下扁平微质感的镜头UI图标制的作教程. 分享一览: 这篇教程主要分享两个ICON的制作过程,一个是镜头主题图标,一个是时钟,图标其实不难,主要是分享一个思路.         好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的扁平微质感的镜头UI图标制的作教程分享的全部内容了,各位看到这里的使用者们现在是非常的清楚怎么去制作了吧,那么各位现在就快去自己尝试一下吧.

photoshop设计扁平化风格UI图标制作教程

给各位photoshop软件的使用者们来详细的解析分享一下设计扁平化风格UI图标的制作教程. 教程分享: 最终效果   1.新建大小自定的画布,用形状工具制作圆角矩形. 2.添加图层样式:渐变叠加和投影,参数及效果如下图.       3.分三个图层做中间的形状绘制,其对应图层如下图.   4.首先看红点标注的2个图层,参数是一样的.       5.正圆形图层样式:内阴影和内发光.       6.将刚才的三个形状选中,然后成组. 7.在组上添加图层样式:投影,如下图.     最终效果及其它