首页

行业观察!FLASH的未来与发展

蓝蓝

近几年对HTML5与Flash谁才是未来的发展的争论真的实在太多,也是仁者见仁智者见智,其实什么东西都不是完美的,各有优缺点,并且用户才懒得管你用的是HTML5或是Flash,用户关心的是只是应用与体验。


 

>介绍HTML5与Flash

 

很多人都说有了HTML5,Flash就可以退出了,但Flash还是有其自身的优势,来制作更好的展示效果与交互体验。

>Flash还能做什么,Flash要怎么做

 


AI+PS新手教程:打造童话梦境般的3D字体

蓝蓝

PS打造童话梦境般的3D字体

@写说说 :作者系大学学生,给我们分享他的设计文章。大家如果对原作者的作品感兴趣,可到作者的Behance看下。我们直接切入主题~

Dream这个词汇是画布的主体中心,它将控制整个画布的布局空间,我们的其他元素将从这个字体的内部出现,比如生长的树木,字体背后的山,以及山后高高的月亮。

做梦经常把我们带到一个不一样的场景里,我们比喻她为”仙境”好了。实际上这个”仙境”也是由日常的真实元素构成的,在今天的这片”仙境”里,我们利用现实世界里的自然元素,结合AI的3D效果,让这些元素都梦幻般漂浮在空中。

==================开始之前注意以下几点: =================

1、通常人们在夜间做梦,所以我们把主色调调成青色和石灰绿。
2、同时,排版的时候来个完整的氛围,给人感觉像是在讲一个故事。
3、在操作时关于字体、树木、树枝、树叶、山峰、月亮、画布请逐一添加编组以便修改。

PS打造童话梦境般的3D字体

4、本文涉及到的素材和最终的psd源文件,猛戳此处下载Dream Design with 3D Typography.rar。下载完后字体该安装的请先安装好。

5、本文中用到的AI和ps都是英文版,创建3D字体部分比较简单,说说也是直接用中文版的AI做的,相信你也可以~如果您的ps是cc且为中文版,或许改成英文版在本文的学习中会更容易操作一点:

打开你的ps cc安装文件夹,定范到Locales\zh_CN\Support Files,比如我的是G:\pscc\Adobe Photoshop CC (64 Bit)\Locales\zh_CN\Support Files,这里你会看到一个tw10428.dat的文件,把它重命名(比如直接改成tw10428.dat重命名),不要删掉。重启ps就是英文版本的了。要换回中文版就把这货的后缀改回来就是了:)

附:神马?你忘记自己软件装在哪里不知道怎么找路径了?那在开始菜单栏总有她的身影吧!或者桌面上有她的快捷方式吧?鼠标点击”开始”找到这软件(或者直接在桌面的ps快捷方式上右击),在ps cc软件上右击选择”打开文件位置”,毫不犹豫的再嗖嗖嗖几下你就找到了路径。

PS打造童话梦境般的3D字体 clip_image003

=================== 一切就绪,马上出发↓ =====================

一、创建3D字体

打开AI,创建新画布,键入一个大写的”D”字,使用素材里面的字体storybook。字体颜色设为#4C3F38。

 

 

导航设计趋势!关于图标式导航的改进

蓝蓝

不知不觉的,很多网页设计中采用了图标式导航(Navigation)——一般使用三道杠作为图标,用以导航。
这种导航的好处是节省空间,让界面更简洁。

图标式导航的案例

这是YouTube的图标式导航(移动版):

为导航瘦身!关于图标式导航的改进

这是Squarespace的图标式导航:

为导航瘦身!关于图标式导航的改进

AWARD的图标式导航不拘一格:

为导航瘦身!关于图标式导航的改进

问题所在

问题在于,点击图标式导航之后,图标本身没有任何变化。也就是说:操作缺乏反馈

 

想让网站动感十足?试试网页设计中的韵律线条

蓝蓝

网页设计中,横向和竖向的直线非常常见,利用整齐的线条可以打造出有序的视觉路径以及信息层级。
当然,有些时候,可以不按理出牌,设计一些倾斜的线条,让你的网站不拘一格,更加与众不同。

打破传统布局,创造动态的自由视感,让构成更加复杂——无论是利用简约的几何图形,或是精致的倾斜图像。
让你的设计更具吸引力,不妨试试斜线。

Paseo Itaigara

形状感很强,整体设计的很成功,显得并不杂乱。菱形无处不在,拼嵌式的菱形,装饰性的菱形,按钮的菱形,很好的主题一致性。

Paseo Itaigara
 

Impero

交互式网站,积极的氛围、极简的色彩。设计师利用两组对角线(粗细交织)打造了视觉路径。

Impero
 

Alpina

强烈推荐!利用视觉滚错,加上美轮美奂的照片。来感受这趟视觉盛典吧。流畅优美的照片美景。斜线分割的很巧妙(试想用直线风格,效果不会这么到位)

Alpina
 

android中px、dp和sp,这些单位有什么区别?

蓝蓝

相信每个Android新手都会遇到这个问题,希望这篇帖子能让你不再纠结。

px:

即像素,1px代表屏幕上一个物理的像素点;

px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小可能不同,如下图所示。

dp:

这个是最常用但也最难理解的尺寸单位。它与“像素密度”密切相关,所以首先我们解释一下什么是像素密度。假设有一部手机,屏幕的物理尺寸为1.5英寸x2英寸,屏幕分辨率为240x320,则我们可以计算出在这部手机的屏幕上,每英寸包含的像素点的数量为240/1.5=160dpi(横向)或320/2=160dpi(纵向),160dpi就是这部手机的像素密度,像素密度的单位dpi是Dots Per Inch的缩写,即每英寸像素数量。横向和纵向的这个值都是相同的,原因是大部分手机屏幕使用正方形的像素点。

不同的手机/平板可能具有不同的像素密度,例如同为4寸手机,有480x320分辨率的也有800x480分辨率的,前者的像素密度就比较低。Android系统定义了四种像素密度:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi),它们对应的dp到px的系数分别为0.75、1、1.5和2,这个系数乘以dp长度就是像素数。例如界面上有一个长度为“100dp”的图片,那么它在240dpi的手机上实际显示为80x1.5=120px,在320dpi的手机上实际显示为80x2=160px。如果你拿这两部手机放在一起对比,会发现这个图片的物理尺寸“差不多”,这就是使用dp作为单位的效果,见下图。

网络营销常用方法及术语

蓝蓝

最近看到一些刚接触网络营销的朋友,对于网络营销一些常用的方法以及概念性的东西都不是很了解,在交谈中说到软文营销、IM推广等这些的方法时他们就不知道是什么意思。在此小篇整理一部分常用的网络营销方法和术语,希望对新人有帮助,高手看到就请绕行。

网络营销常用方法

什么是网络营销?以国际互联网络为基础,利用数字化的信息和网络媒体的交互性来辅助营销目标实现的一种新型的市场营销方式。简单的说,网络营销就是以互联网为主要手段进行的,为达到一定营销目的的营销活动。(摘自百度百科)

搜索引擎优化/SEO:利用搜索引擎的搜索规则来提高网站关键词排名的方式。

搜索引擎营销/SEM:利用搜索引擎进行营销推广的,比如SEO、竞价推广等都属于SEM。

百度网盟推广:在百度的联盟网站上以图片或文字的形式展现广告。

软文营销:以文章为主,专门通过文字去宣传推广产品,或以新闻稿来提升品牌知名度。

数据库营销:通过收集和积累会员信息,经过分析筛选后有针对性的使用电子邮件、短信、电话等方式进行客户尝试挖掘与关系维护的营销方式。

邮件营销:在用户事先许可的前提下,通过电子邮件的方式向目标用户传递有价值信息的一种网络营销手段。

IM/即时通信营销:利用QQ、MSN、YY等即时工具营销推广的。

博客营销:利用新浪博客、百度空间等平台进行推广的方法。

超赞!设计师完全自学指南

蓝蓝

超赞!设计师完全自学指南

本文译自国外高质量问答社区Quora,原文作者Karen X. Cheng,原是微软Excel的项目经理,后通过自学转型成为设计师。她讲述的自学过程详实细致且条理有序,读完会发现与想象中的大不一样,对于想自学设计但迷茫不知道从何入手的童鞋来说,可以遵循她的步骤去学习,除了规划得当,还能对设计有一个全局的了解 : )

做设计很慢?先来改正你使用PS的10个坏习惯

蓝蓝

PS用途广泛,方法多样。可以用不同的方法来实现同一种效果,有时,大家会被思维局限住,采用”最笨”的办法完成工作。

本文,便是面对这一问题,罗列出PS使用中的10条坏习惯,相信只要克服这10个坏习惯,你的工作会更有效率。

1. 在单一图层内工作

尽管有很多教程讲述单图层打造xxx效果,大家不妨学习一下作为练习,掌握一下思路即可。
但是在工作中,这种习惯可真不好。

单一图层制图,缺乏灵活性,无法针对性的做出修改。
最安全的做法是:一种效果,一个新图层,这样以后修改起来会非常方便。

10 bad habits

无论如何,在工作中都尽可能的使用多个图层,编辑更起来有效率,组织也更分明。
当然也有牛人,完全在一个图层实现很复杂的。譬如这篇《PS教程!教你用一个图层制作相机图标》

2. 直接删除内容,而不使用蒙版

这个非常常见。删除和擦除图层内容几乎是不可逆的,是一种破坏性的编辑方式。其实不如利用PS的像素蒙版、矢量蒙版、剪贴蒙版来”屏蔽”内容。

蒙版仅仅会临时隐藏选中的图层部分,而不是性的删除。

10 bad habits

记住咯,尽量使用蒙版,尽量少用删除。

3. 点来点去(不会用快捷键)

20120711134546_vaEEM
 

4. 图像转换时,不利用智能对象

掌握动效设计!让你的设计富有未来科技感(下)

蓝蓝

基于情景的消隐

掌握动效设计!让你的设计富有未来科技感(下)

这是iOS上的Chrome,有着基于情景的消隐动效。

掌握动效设计!让你的设计富有未来科技感(上)

蓝蓝

掌握动效设计!让你的设计富有未来时尚科技感

为何有的产品、服务特别受欢迎?

是因为这些产品、服务在内容、外观、设计、可用性、功能等方面具有无可匹敌的优势。其实,所有的这些层面都属于交互设计的细节,其中一个关键点便是动效。

本文将介绍几种常见的动效模式(用GIF图演示),分析一下为何这些简单的设计模式在实际应用中能够奏效。
当我们设计数码产品时,我们一般用PS或者Sketch这种设计软件来进行设计。

了解设计的人明白这样一个道理:设计不光只是视觉表达。设计也不应该是静态的。乔布斯说过这样一句话:

设计并非外观怎样,感觉如何。核心在于,它是怎样工作的。

影响用户对产品的体验与印象的因素有很多,交互在其中扮演着关键性角色。我们不能再简单的把用户界面当成一种静态界面而设计。我们应该顺应互联网动态的本质,打造更加动态的图形用户界面。
好了,废话不多说,我们来看看,什么叫做更智能的交互、更精致的动效。看看这些设计模式是怎样提高用户体验的。

动效滚动

超链接是互联网的双刃剑,当你点击链接时,你可以在互联网中任意遨游,随心所欲。

可是过度自由好吗?不见得,比方说你在浏览一款精美的产品页面,然后你点击了一下页面中的链接,突然导入了一款令人毛骨悚然的木偶商店页面。这就是超链接的弊端,有时候的页面转换太突然,缺少过度,让用户一时不能接受。

我们可以看看书籍的用户体验:故事发展一般是线性的,每一章都和上文有所联系。想要阅读第二章,必须先阅读第一章,以便大致了解书中的环境与人物关系。如果你”跳章”阅读,不可避免的会错过一些关键剧情,因此无法理解有些内容。

在网页设计中,同理,尤其是那种内容比较大,页面比较长得网站,这种情况经常无意识的发生:用户会错过之前的某些关键内容,而且又缺少提示,因此很难理解当前内容,通过添加动效滚动,可以修正这一问题。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档