快捷搜索:  汽车  科技

ui设计中的切图怎么设置(UI设计师界面设计)

ui设计中的切图怎么设置(UI设计师界面设计)一般公司如果花钱雇专职视觉设计师的话,那么整个公司的美术设计工作一般都会给视觉设计做。这就要求你几乎精通平面设计师所会的所有知识。很多人认为,如果去互联网公司做视觉方向ui设计,只会简单做图标、界面就OK。这是极其幼稚的想法。2. 基于用户体验、人机交互、图形化设计、界面设计等前沿理论实现产品风格设计;1、视觉设计部分:首先,视觉设计不仅仅是做ICON,做界面或者界面元素。

什么是UI

ui设计中的切图怎么设置(UI设计师界面设计)(1)

“UI”的本义是用户界面,是英文User和interface的缩写。UI设计师简称UID(User Interface Designer),指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。

UI设计师的涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及部分包装设计,是目前中国信息产业中最为抢手的人才之一。

主要要求从业人员精通Photoshop、Illustrator、Sketch、Flash等图形软件,

1. 负责公司产品在智能电视、PC端、移动端页面/应用的整体设计;

2. 基于用户体验、人机交互、图形化设计、界面设计等前沿理论实现产品风格设计;

1、视觉设计部分:

首先,视觉设计不仅仅是做ICON,做界面或者界面元素。

很多人认为,如果去互联网公司做视觉方向ui设计,只会简单做图标、界面就OK。这是极其幼稚的想法。

一般公司如果花钱雇专职视觉设计师的话,那么整个公司的美术设计工作一般都会给视觉设计做。这就要求你几乎精通平面设计师所会的所有知识。

所以,如果你想今后在视觉领域混,那么以下几项技能必不可少:

1)平面构成;

2)色彩构成;

3)版式设计;

4)心理学;

5)美术绘画;

6)设计意识;

7)懂代码的设计师

ui设计中的切图怎么设置(UI设计师界面设计)(2)

2、交互设计师应该具备的基本能力:

1)了解用户体验设计、可用性原则;

2)信息挖掘、用户调研、数据分析;

3)良好的逻辑能力;

4)心理学;

5)交互设计原则、不同平台的规范;

6)产品视觉感;

7)沟通能力。

ui设计中的切图怎么设置(UI设计师界面设计)(3)

切图神器

作为一枚UI设计师,当我们千辛万苦的改完最后一稿后,就要开始切图标注了,有时候你会发现一个稍微复杂的页面,切图标注就要要花费很多时间,所以今天U妹给大家带来了1款切图神器,希望从此可以解放你的双手哈~~

Cutterman(最好用的切图工具)是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出, 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出,方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则,纯点击操作,方便、快捷,易于上手。

最重要的是不仅功能强大,而且完全免费

1、一键切图,真正解放双手

Cutterman能够让你只需要点击一个按钮,就自动输出你需要的各种各样的图片,快到没有朋友!

ui设计中的切图怎么设置(UI设计师界面设计)(4)

2、支持IOS平台

输出支持IOS平台的1倍图、2倍图和3倍图,支持iPhone 6s/6SP尺寸比例

3、支持Android平台

输出支持Android平台的各种分辨率大小图片,什么XXHDpI,XHDPI,HDPI之类的,通通自动化切图

4、支持web平台和多种格式的输出

输出支持web平台的图片,格式输出为PNG、JPG和GIF三种格式(png24、png8两种格式),就此告别那个所谓的“存储为web所用格式”

ui设计中的切图怎么设置(UI设计师界面设计)(5)

5、支持点9切图和自定义图片尺寸大小切图

输出支持安卓设备支持的.9.png格式切图,还有可以自己设置切图输出的尺寸大小

ui设计中的切图怎么设置(UI设计师界面设计)(6)

6、支持多个图层合并输出、单独输出

图层太多?木有关系!可以多选!支持选中多个图层合并输出,也可以逐一输出的哦,简直方便到爆!

ui设计中的切图怎么设置(UI设计师界面设计)(7)

7、固定尺寸切图输出方法

想输出固定尺寸的切图,那简直就是一眨眼的事情,极速搞定

ui设计中的切图怎么设置(UI设计师界面设计)(8)

当然了,固定尺寸切图,还支持按选区大小选择的区域输出,简直爽到爆,有木有

ui设计中的切图怎么设置(UI设计师界面设计)(9)

还支持按图图蒙版区域输出切图,实在是太强大了

ui设计中的切图怎么设置(UI设计师界面设计)(10)

提示

Cutterman目前最新版本为3.2,有windows版和mac版,但是对PS版本是有一定要求的,必须是Photoshop CC以上(含CC)的版本才可以安装此插件,并且有CC版和CC2014及更高版2个版本的区别,请根据自己的PS版本仔细下载。

智能标注神器

作为一枚UI设计师,标注和切图一直以来都是UI设计师身上的两座大山。有时候你一个稍微复杂的页面,切图标注就要要花费很多时间,所以今天U妹又给大家带来了1款智能标注神器,从此可以真正解放你的双手哈~~

ui设计中的切图怎么设置(UI设计师界面设计)(11)

PxCook(像素大厨)是一款切图设计工具软件。自2.0.0版本开始,支持PSD文件的文字,颜色,距离自动智能识别。

优点在于将标注、切图这两项设计完稿后集成在一个软件内完成,支持Windows和Mac双平台。

标注功能包括:支持长度,颜色,区域,文字注释。

最重要的是不仅功能强大,而且完全免费

1、智能标注,真正解放双手

基于PSD文件和与Sketch文件的智能标注,自动识别距离,颜色,区域,字体信息

① 间距智能标注

ui设计中的切图怎么设置(UI设计师界面设计)(12)

② 尺寸智能标注

ui设计中的切图怎么设置(UI设计师界面设计)(13)

③ 内间距智能标注

ui设计中的切图怎么设置(UI设计师界面设计)(14)

④ 控件宽高智能标注

ui设计中的切图怎么设置(UI设计师界面设计)(15)

⑤ 字体样式智能标注

ui设计中的切图怎么设置(UI设计师界面设计)(16)

⑥ 区域智能标注

ui设计中的切图怎么设置(UI设计师界面设计)(17)

⑦ 内间距智能标注

ui设计中的切图怎么设置(UI设计师界面设计)(18)

⑧ PxCook首页

ui设计中的切图怎么设置(UI设计师界面设计)(19)

ui设计中的切图怎么设置(UI设计师界面设计)(20)

2、标注数值随便改

所有尺寸数值都可手动更改,自由度Max。

ui设计中的切图怎么设置(UI设计师界面设计)(21)

3、Px、Dp、 Pt单位自由转换

标注单位一键转换,减轻设计师计算负担。

ui设计中的切图怎么设置(UI设计师界面设计)(22)

该单位转换功能是作用于所有标注体的,切换的时候会将整个标注文档的单位全都改变。

Px即Web或PC标注单位。Dp即作为Android的标准单位。Pt作为iOS的标准单位。

右侧的分辨率,表示你设计稿对应的设备分辨率。拿iOS来距离,如果你是以iPhone6为目标设备而设计的1334px*750px的设计稿。那你右侧的分辨率需要选择@2x。 此时,你设计图中的2px将会以1pt的形式进行显示。

4、有Win版、Mac版和Sketch版

三版齐发,不仅有windows版和Mac版,还有Sketch版本(Sketch小伙伴的福利)

ui设计中的切图怎么设置(UI设计师界面设计)(23)

5、PSD快速切图

不仅可以智能标注,还可以快速切图,连接PS切图(切图分为两种模式——选择切图和命名切图),可同时输出多种设备,切图更精准!功能是不是很强大啊~~

ui设计中的切图怎么设置(UI设计师界面设计)(24)

总结

PxCook优点在于将标注、切图这两项设计完稿后集成在一个软件内完成,支持Windows和Mac双平台。

标注功能包括:支持长度,颜色,区域,文字注释,其中比较有特色的是:

1、长度标注针对移动端设计,支持px与dp直接的单位转换

2、注释的文字字体样式可以自定义

3、自带实时放大镜,省却了反复放大的操作。

4、长度标注的数字可以自己手动改,设计时可以小小的偷个懒~

5、标注的各种颜色可以自定义,灵活性不错。

U妹已为大家准备好了这2款切图和智能标注神器

请私信我回复“神器”带走哦

猜您喜欢: