程序猿怎么玩设计

38
回复
107813
查看
[复制链接]

22

主题

274

帖子

761

安币

代码手工艺人

Rank: 4

发表于 2012-12-29 23:27:00 | 显示全部楼层 |阅读模式





     各位巴友大家好,好久没写帖子了,Android的开发也中断了一段时间,现在正式工作了,在做iOS开发,所以说Android开发方面的东西也不好写了,基本上很多东西巴士里都能查的到,所以呢…作为UI板块的版主之一,我就讲讲UI吧,不过不是代码方面的,而是一个工具 PS….大家别急着吐槽,也没人说程序员就玩不了PS,做不了设计,咱们稍微会点,以后不管是公司工作还是个人开发都能多点便利,这一系列教程就叫做“程序猿怎么玩设计”好了,下面进入正题。
     照例,先打开软件吧,我用的是PS(全称PhotoShop),至于怎么下载安装还有破解,大家自己解决吧,当然能用正版还是用正版。



介绍一下主界面:
       这里我截了个图做了下标注,我的PS版本是PhotoShop CS6 MAC版,和Windows版本的区别不大。
最上方是菜单,和平常软件的菜单栏功能一样,软件的大部分功能都能在菜单栏找到。
左侧是工具栏,P图需要的工具都在这里了,从上到下按照大的功能分为4组,我们主要用到的是第一组和第三组,每个工具的属性设置都可以在菜单栏下面的工具属性栏里面设置。
中间是编辑内容区,我们的图片打开之后或者新建文件之后这里会显示出来,也就是我们肆意操作的对象。
右侧这一片,是各种悬浮面板(其实除了菜单栏,其他区域都可以随意拖拽),这是默认的板式,从上到下依次是颜色、调整、样式等面板,最重要的是下面的图层,这里显示的是我们的所有图层,至于图层是什么,我们后面讲,你可以先简单和Android开发中一层一层的view联系起来。


既然是写给程序员看的教程,美术基础什么那套理论咱们就掠过,我们今天的目标就是搞出个开发中最常见的控件----按钮来。经常看到朋友们在群里求按钮什么的,看完这篇教程,如果你有兴趣,几分钟就可以搞出来一个像模像样的按钮出来。

-----------------------------------------------------------下面开始今天的正文--------------------------------------------------------

1. 既然要开始作图,当然是要新建一个文件,点击菜单—>新建,就会弹出如下窗口:



这里面的基础的都很容易理解,照着填写就是了,有几个我说明一下, 这里的宽度和高度,我填的960*640,是一个普通手机屏幕的大小,单位是像素,像素这个单位呢,对普通屏幕来说一个像素代表一个屏幕上的一个点,像iPhone4s的视网膜屏是4个像素一个点,这些我们知道就行了,具体的可以去请教一下公司的美工。
然后就是分辨率,72像素/英寸,代表像素的密度,这里的意思是每英寸有72个像素,也是一般屏幕的值。这里默认就好,我们点确定就OK了。



2. 第二步,我们就要开始画按钮了,选工具栏第三组里面的形状工具,画一个圆角矩形,  在工具属性栏里面,设置好圆角半径后(越大圆角就越大),




在新建出来的白布上用鼠标拖一个圆角矩形出来,如图:





好,我们的按钮出来了,大家可以去鼓鼓掌了....本着天地良心,教程不能如此坑,所以我们继续往下做,做出一个靠谱的按钮。

3.第三步,嗯,我们的按钮形状已经出来了,这一步就是对他进行美化了,怎么美化呢,方法很多,我常用的就是设置混合样式(相当于按钮控件的各个属性),怎么设置呢?


在右侧的图层面板中可以看到自己刚才画的圆角矩形,右击选择混合选项,弹出如图所示的窗口,可以看到有很多的属性,如下:




我们只要对这些属性稍加设置,就可以做出一个不错的按钮来,下面来看看我设置的样式,主要以图说话,当然...我还是会当旁白的。



这里我设置了一下颜色渐变,看名字就可以知道,这是给这个图形设置渐变颜色,有很多选项,我只是修改了其中的渐变色。

我设置了一个深蓝到浅蓝的渐变,具体数值大家自己调着玩就行了,没什么硬性要求,只是建议大家 色彩过度不要太夸张,比如大红到大绿,这样...真的很山寨,当然你喜欢我也没办法,一般情况下稍微差一点体现出渐变就行了...嗯,还可以体现出你设计的大气(^0^)。



看按钮,是不是基本没变化,其实我是给它设置了一个很淡很淡的阴影,其实别小看那么淡淡的一抹阴影,能增色不少,设计就是要讲究细节。

你看梁朝伟,那眼神流留露出蛋蛋的忧桑,瞬间气质就不一样了(不是黑他啊,举例举例而已)。

大家可以自己调节看看,我觉得这东西就和做开发一样,写死的东西没什么意思,要自己敲敲代码,调调Bug才能真正领悟,所以,大家来调数值玩玩吧,别把电脑玩坏了就成...


这里也是个小细节,我用斜面和浮雕做了按钮的高光和暗区(说白了,就是亮的地方和暗的地方),也是很细小的一点,同样可以起到不错的效果。

自己调着玩吧,兄弟们,咱们的第一个按钮就出来了,有没有成就感啊?

还有个小技巧,看到上图右边取消按钮下面的"新建样式"了么,点击一下有惊喜哦,可以把你设置好的样式保存起来,方便以后再用...怎么样,像是写了一个方法吧,调用就可以设置好一个按钮,这里和编程又有共同之处了。


来看看我们的作品:


好,第一课到此结束,咱们下会儿 再见....

预祝各位元旦快乐^_^

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

165

主题

1047

帖子

2585

安币

版主

打酱油

Rank: 7Rank: 7Rank: 7

活跃会员突出贡献优秀版主QQ达人

发表于 2012-12-29 23:28:31 | 显示全部楼层
{:soso_e163:}

点评

哈哈,谢谢支持  详情 回复 发表于 2012-12-29 23:34

22

主题

274

帖子

761

安币

代码手工艺人

Rank: 4

 楼主| 发表于 2012-12-29 23:34:35 | 显示全部楼层
guohui612 发表于 2012-12-29 23:28

哈哈,谢谢支持

18

主题

119

帖子

425

安币

攻城狮

Rank: 3Rank: 3

发表于 2012-12-29 23:40:51 | 显示全部楼层
不错
{:Music 2:}{:Hello:}{:Hello:}

点评

希望 符合大家口味  详情 回复 发表于 2012-12-29 23:42

22

主题

274

帖子

761

安币

代码手工艺人

Rank: 4

 楼主| 发表于 2012-12-29 23:42:56 | 显示全部楼层
iloster 发表于 2012-12-29 23:40
不错

希望 符合大家口味

4

主题

195

帖子

174

安币

程序猿

Rank: 2

发表于 2012-12-30 00:14:06 | 显示全部楼层
谢谢分享{:Skateboard:}

点评

^_^,谢谢支持  详情 回复 发表于 2012-12-30 10:49

18

主题

433

帖子

711

安币

代码手工艺人

Rank: 4

发表于 2012-12-30 00:18:07 | 显示全部楼层
太好了,会做ui,会弄ps,以后可以少用万国牌的图标,素材之类的了

点评

后面还会教其他的东西,能完整做一套ui  详情 回复 发表于 2012-12-30 10:49

190

主题

2597

帖子

7万

安币

码皇(巴士元老)

祝福

Rank: 8Rank: 8

活跃会员突出贡献优秀版主

发表于 2012-12-30 00:38:36 | 显示全部楼层
不错不错啊,有个ios问题问一下,下载最新的Xcode4.5里面有ios 的sdk吗?

点评

有的,我们公司用iOS6.0的sdk,可以编译低版本的,开发的时候做控制,一般要求是兼容4.3以上的系统  详情 回复 发表于 2012-12-30 10:48
擅长Android应用开发
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )