界面ui设计模板-怎样用ps做ui设计(ps做ui界面设计教程)

今天简单介绍两个方法,可以供大家参考,也可以找一些UI设计资料,大纲如下:

1.品牌基因法

2.“抄”现实

3.多管齐下

1.品牌基因法

这个就不多说了,写过很多篇了,没看过的可以去看下:

《品牌基因法做图标——实战篇》

2.“抄”现实

所有的图形其实都是对现实物体的提炼与再加工,所以如果我们能够很好的“抄”现实,那必将是一个很棒的设计技能。怎么样“抄”现实呢?举个例子,现在来画一个啤酒的易拉罐。首先我们要去找到一个真实的易拉罐:

UI设计

接下来开始“抄袭”它的造型,大家要善于提炼与概括一些形状,例如看到这个这个易拉罐我们就能知道,它大体是由两个矩形两个梯形组成的:

UI设计

很多人说自己造型能力不行,那我们就多用规则的图形去拼凑,还有现实的物体给你参考,你还有啥不行的,再不行,抽你信不信?有了大体框架,慢慢加一些细节,最后得到下面的线稿:

UI设计

线稿画好之后,就加个颜色呗:

UI设计

为了增加质感,咱再加点高光、投影:

UI设计

这样一个原创的“抄”现实作品不就出来了!我们再来个例子,还是画一个酒瓶,:

UI设计

首先还是先画造型,注意,有曲线的地方如果实在不会用布尔运算,就上钢笔吧,但一定要过度平滑,不然看着就会不精致。得到线稿如下:

UI设计

接着上颜色,加高光、阴影:

UI设计

“抄”现实是设计师必备的技能,非常锻炼我们对事物的概括能力,掌握了这招,你就是最棒的!

怎么练呢?

像我这样,一段时间给自己一个主题,比如“酒瓶”,那我这一段时间就画各类酒瓶,画到自己满意为止!菜宝宝最近在画的主题是各地建筑,:

UI设计

UI设计

最开始不要害怕和别人的风格太像,这都正常,每一个独特的风格都是在大量练习与思考之后才能形成的,前期只要内容不同就ok,不要在乎有别人的影子,所以:去练吧,宝贝儿!

3.多管齐下

UI设计

大体的轮廓可以参考左图,但颜色和细节参考第二个,最后得到自己的原创作品:

UI设计

如果你只盯着一个作品来借鉴,做着做着基本就一样了,然后就没有然后了,所以多找参考,取每个参考的精华之处,最后融合成自己的作品,这也是原创的另一个途径。

总结

方法与思路虽然有很多,但还是推荐第一种和第二种,尽量让设计的灵感、造型、颜色取自现实生活或品牌,这是提高原创度非常可取的方法。与大家共勉,加油!科科。

UI设计中制作界面图标的流程:

1、图标创意阶段;

2、草图绘制阶段;

3、草图渲染阶段。

补充:

1、在PS中新建一个所需尺寸的画布并保存,将其命名为UI设计效果图模板。

2、再新建一个画布,命名为界面UI设计效果图展现。尺寸随意。

3、将刚才保存的界面UI设计效果图模板.psd拖到画布中。Ctrl加T变换到合适的尺寸,倾斜到合适的透视效果。

4、然后双击界面UI设计效果图模板这个图层即可。

补充:UI即用户界面的简称。泛指用户的操作界面,包含移动APP,网页,智能穿戴设备等。UI设计主要指界面的样式,美观程度。而使用上,对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。

步骤:

1、新建一个画布尺寸为:640*1136,然后保存,命名如:5S效果图模板

2、再新建一个画布,命名如:效果图展现

2、再新建一个画布,命名如:效果图展现

尺寸随意,可以大点,自己看情况吧。

3、将刚才保存的那个5S效果图模板.PSd拖到这个画布中。

CtrlT变换到合适的尺寸,倾斜到合适的透视效果。

4、然后双击”5S效果图模板”这个图层。

这就是智能对象的好处。

跳到这个画面后

拖入你想要做的界面:

然后保存:Command(Ctrl)S,关闭:Command(Ctrl)W

5、回到这个展示页面

注:这儿忽略了一步,把刚才保存的图层拖过来。同学们应该都懂吧_-

复制一个图层:

按住Option(Alt)鼠标左键拖动图层往下拽,或者Command(Ctrl)J,选下面的一个图层,双击图层进入图层样式,选择斜面和浮雕,设置一下参数:

参数自行调整,其中,阴影角度45°可随大环境光线可根据情况自行调整,阴影模式透明度随意,自己看情况调整。

6、然后,从第二个图层开始连续复制多个该图层,每复制的一个图层都在上一个图层的下方,每复制一个图层都往下移一个像素,按住option(Alt)鼠标左键拖动图层往下拽,可使用键盘上的下方向键来控制。

然后,在最后一个图层上设置一个投影

然后,在最后一个图层上设置一个投影,参数自行解决。

最后调整下整体环境。