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

给各位photoshop软件的使用者们来详细分享一下简洁地图主题UI图标的制作教程。

教程分享:

新建文档,这里我用的是800*600像素,画一个圆角矩形,颜色#e8e8e8。

 


为这个圆角矩形添加一个图层样式。

 


 


 


复制一层圆角矩形,将图层的填充更改为0,添加一个投影样式。

 


 


接下来,我们画出定位的那个图标的形状来,颜色#97d601。

 


这个形状,可能好多人会用圆加矩形去拼接,这里我讲一下我用的方法。先把垂直居中参考线标注出来,画一个正圆。

 


使用直接选择工具,选择住图中红圈的锚点,垂直下移一定的像素。

 


 


还是用直接选择工具,选择住这个锚点,我们会发现,出现了调节曲线片段的杠杆节点,水平向左移动一定像素。

 


 


因为,我想做成一个立体的图标,所以,最顶上的锚点,我们也适当向下移动一点,把圆压扁。

 


 


OK,现在我们已经完成了左边部分的调节,如果还是按照这个方法去调节右边,不好精确控制,无法保证百分百的对称,所以,我画了一个矩形,对齐垂直居中的参考线,模式减去。

 


选择住矩形的路径和圆形变形后的路径,合并形状组件。

 


复制这个一半的形状,水平翻转,移动到右边,保持其切面与参考线贴合,选择住这两个一半的形状,再次合并形状组件,这样我们就彻底的得到了一个对称的形状图标了。

 


复制一层定位的形状,置于这层的下层,更改颜色为#85bb03,我们来构建立体面。

 


OK,现在我们开始细化图标,首先我们先为最下层的立体面添加一个投影。

 


 


复制一层这个立体面,将图层的填充更改为0,添加一下投影样式,完善投影。

 


 


现在回到图标形状图层,添加图层样式。

 


 


 


复制一层图标主体,将图层填充更改为0,添加一个内发光。

 


 


设置前景色为#52a5ef,画一个蓝色的椭圆,并添加一个图层样式。

 


 


 


还是使用椭圆工具,画出下图中的圆环,(简单的两个圆相减,别告诉我不会画),添加一个图层样式。

 


 


 


 


设置前景色为#b5cbe5,还是画一个椭圆,创建剪贴蒙版,构建白色圆环的立体感。为避免边缘的生硬,我在属性面板中设置了1像素的羽化。

 


下面,我们开始画指针,三角形而已,不用多说吧,颜色#97d601,添加一个投影。

 


 


绿色指针的高光,我们画一个矩形,旋转,将颜色更改为#b8e64a,创建剪贴蒙版。

 


白色的指针,跟绿色的指针是一样做法的,同样也添加一个投影样式。

 


最后,我们来画指针中间的圆心,画一个正圆形,颜色为#dfedf6,并添加一个图层样式。

 


 


 


最终效果:

 


好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的简洁地图主题UI图标的制作教程分享的全部内容了,各位软件的使用者们,小编相信你们现在是非常的清楚了制作教程了吧,那么各位就快去自己按照小编的教程制作下吧。

时间: 2024-09-19 16:39:54

photoshop简洁地图主题UI图标制作教程的相关文章

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

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

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

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

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

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

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

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

photoshop设计电视机主题UI图标效果制作教程

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

photoshop设计奶酪主题UI图标实例制作教程

给各位photoshop软件的使用者们来详细的解析分享一下设计奶酪主题UI图标实例的制作教程. 教程分享:           好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的设计奶酪主题UI图标实例的制作教程解析分享的全部内容了,各位看到这里的软件使用者们,小编相信大家现在那是非常的清楚了UI图标的制作方法了吧,那么各位就快去按照小编上面的教程自己去制作下奶酪主题的UI图标吧.

photoshop皮包主题UI图标设计教程

给各位photoshop软件的使用者们来详细的说一下皮包主题UI图标的设计教程. 教程分享: 最终效果:   下面,教程开始! 在正式做图标之前,需要先自定义一个图案. 首先新建一个1000×1000px 的画布,填充颜色#c5ab90,然后[滤镜]-[杂色]-[添加杂色],给图层添加7%的杂色.完成之后,[编辑]-[自定义图案]添加一个图案,命名为[磨砂纹理]   准备工作做好了,开始画皮包. 新建一个1000×1000的画布,填充一个从#d9d5cf到#9c8c7e的径向渐变.   建一个5

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

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

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

给各位Photoshop软件的使用者们来分享一下立体UI图标的制作教程. 教程分享: 首先让我们来新建一个高度为560,宽度为420.   填充背景为:#fbf5e7   选择圆角矩形工具     画一个180*180,半径为10的圆角矩形 填充颜色为:#a9d0e1     ctrl+t,然后右击旋转,旋转45°,然后右击进行扭曲(其中万万不可双击取消变形哦)   可以拉辅助线,按住alt键,选中其中一个点,进行水平移动,这样是以中心为点进行的两边的延伸,哎呀,具体怎么个术语我也不是很清楚,就