首页

10个增强Web字体排版的jquery插件

蓝蓝设计的小编

虽然Web字体版式技术在各种定制化字体解决方案(比如@font-face, Google Fonts)的支持下一路蓬勃发展,但是在我们在设计和桌面app开发中仍然对其缺少精准的控制和把握。还好有一系列的强大功能jquery插件帮助我们解决这个问题。这篇文章详细介绍了近10个最流行的Web字体版式插件,它们允许我们润色字体版式并创造出更多超级酷的效果。
不得不说,网站本身也创意十足,个性满满哟:)

Lettering.js

Lettering.js example

Lettering.js 是最简单最流行的网络版式插件之一。通过分拆每个文本,并将每个字母放在定制好的<span>中,该插件能够让你精准的操控标题版式。使用它小心的调整你的字距或者添加各式各样的CSS,从而让每个单词都有超级赞的效果。

 FitText.js

FitText.js example

交互式网站设计很好用,它允许内容根据用户的查看终端的大小自动调整。自然地你的web文本随着查看它的浏览器或者终端大小变窄而自动收缩,但是某些情况下会使题目和标题变得有点难看,尤其是由于文本自动缩进或者多出新的一行等情况。这就是FitText.js插件的功能,它能够使你的标题像一张回应式图片一样调整大小,单词不会出现跑到新的一行的情况。

想学响应式设计?来看史上最全的响应式设计资源库

蓝蓝设计的小编

想学响应式设计?来看史上最全的响应式设计资源库

响应式设计起源:Ethan Marcotte在2010年写了一篇响应式的文章,宣扬这种新式的网页设计思想,经过3年的发展,响应式设计得到了众多设计师的认可。

本文的目的在于为大家集中推荐一些最有价值的响应式设计资源。包含了CSS框架、在线工具、准备阶段的工具等等。

推荐阅读:
《不要落伍!来和小伙伴一起学习响应式网页设计》
《来试试响应式设计!25例优秀的响应式网页设计赏析》
《年终特典!当下最热门的网页设计趋势总结》

CSS 响应式框架

这一部分主要介绍了一些的CSS响应式框架,更轻量,而且兼容性也不差。(Foundation,Skeleton是较为老式的CSS响应式框架)

Girder
Girder 使用了Sass silent classes (占位符,输出时不会体现)在HTML中组织内容,标记能够额外处理一些表象类(presentational classes ),比如 “unit_1of4″, “small-2″, “grid4″.

responsive-design-1

不要落伍!来和小伙伴一起学习响应式网页设计

蓝蓝设计的小编

响应式设计现在已经成为网页设计师学习的焦点。优设哥发现群内有很多相关的讨论了,这说明我们平时接触该类案例越来越多。
你会渐渐发现,我们身边越来越多的企业和客户关注到响应式网站,作为勤奋的设计师,我们怎么能不对它进行了解呢?

响应式网页设计考虑到多平台、多种屏幕尺寸的情况,能够优化多种设备的网络浏览体验。
当你不知道用户使用什么设备,不知道用户的屏幕尺寸时,若想达到较优布局,可以采用响应式设计
在进行响应式设计时,要专门针对内容进行设计,优先考虑在不同环境下内容的适应性。

相关推荐:
《年终特典!当下最热门的网页设计趋势总结》
《学点新技能!玩转响应式图标设计》
《经验分享:响应式排版中的基础知识》

响应式网页设计

过去,上网需要一台电脑,一个猫。
现在呢,手机、平板、电视都可以上网。

实现响应式设计的几种常见方法

Responsive Web Design, 由Ethan Marcotte编写, A Book Apart出版,对响应式设计的原则进行了详尽的阐述。

多种设备均能支持联网,有利有弊:

好消息是,我们可以随时随地登入互联网。
坏消息是,设计师的工作量成倍的增加了,而且用户变得越来越挑剔,越来越不耐心。
在这种大环境下,响应式设计变成了主流。

响应式设计所带来的挑战

进行响应式设计,挑战有很多。
首先,设备种类、屏幕尺寸多种多样。小、中、大各种各样。其次,倘若你是开发者,你会明白从技术角度上,响应式设计实现起来也不容易。

15个华丽丽的模糊大背景网页设计

蓝蓝设计的小编

推荐:网页设计趋势案例:15个华丽丽的模糊大背景网页设计
现在大模糊背景图像在网页设计中越来越受欢迎,
高斯模糊的加入不仅创建了一个朦胧弥漫的效果,
具备高端观赏性的同时,
它还可以强制性引导用户关注主要信息内容,大大提升了信息的易读性。
一起来欣赏这15个网站吧:)

HappyTables

View the website

Tiny Factory

View the website

Do

View the website

找不到灵感瞧瞧这几个激活思维的技巧

蓝蓝设计的小编

 找不到灵感瞧瞧这几个激活思维的技巧 三联

  你是否正在或曾经面临着下面类似的问题:

  大黑:icon基本上都是长这样子的啊(如语音icon通常就是麦克风)!!还能画成什么样!!

  又要写文案了,想来想去,除了一开始想到的那几句文案,就再没有想到其他的。

  头脑风暴时,别人总能很快地写出一堆东西,但自己却憋不出一个点子来。

超赞!25例交互体验极佳的网页设计

蓝蓝设计的小编

25 Modern Web / Interactive Websites Design Examples

本文介绍的案例均使用了的HTML/CSS 以及 JS 技术,从视差滚动到响应式设计,实现了良好的交互性,为用户提供更好的浏览体验。我们来快速阅览一下吧。

推荐阅读:
《网页设计新趋势!25例出众的响应式导航设计》
《让网站更生动!那些在网页中完美运用视频元素的案例》
《不要落伍!来和小伙伴一起学习响应式网页设计》

 

Melbourne Remote Control Tourist

的远程旅游体验,这个概念不错吧!

Melbourne Remote Control Tourist

Melbourne Remote Control Tourist

Portfolio

展示了设计师 Bradley Haynes的作品,他来自旧金山

奔放洋气!8种杂志封面设计方法

蓝蓝设计的小编

传统纸媒衰落了?不要紧,电子杂志正当时,所以说,学习杂志封面设计技巧并不过时。
杂志封面相对来说空间充裕——8到11英尺,你需要在这样大小的空间里面合理排布文字,安置照片/插画。

你的目标只有一个:快速向读者揭示本期杂志内容
这里呢,我总结了设计师们都该知道的8种杂志封面的设计方法。

相关推荐阅读:
《2013年万圣节优秀广告设计评析》
《推荐!优秀书籍封面字体设计》
《怎么做海报?环法自行车赛100周年海报设计案例解析》

文字排布:深色字配亮色背景,亮色字配深色背景

给平面设计专业学生的建议

蓝蓝设计的小编

给平面设计专业学生的建议

来自Studiomates工作室的Frank Chimero是一名知名的平面设计师,一名作家,《设计的形状》一书的作者,他的客户包括《纽约时报》、《连线杂志》、Nike、Facebook、星巴克、时代华纳、《商务周刊》等。有一位匿名者问Frank能否给平面设计专业的学生提点建议,于是他在自己的博客上发表了自己对平面设计的一些看法。虽然是写给平面设计专业学生的,里面提到的想法同样适用于其他设计领域的学生和从业者。以下为摘要:


fc

设计不等于为客户效劳。

紫色在设计中很难处理。老师在课堂上教给你的不是福音。大部分决策都是模糊不清的,所有东西都在正确性与适合度之间徘徊。

当你对别人说话或者听别人说话时,看着对方的眼睛。最好的老师把课堂当做车间,最坏的老师把课堂当做课堂(照本宣科)。

如果你画得没有别人好,或者软件没别人用的溜,或者没有钱买办公用品,或者没有别人使用的工具,那么通过多动脑思考打败他们。思考是免费的,你只需投入时间和换位思考。

最好的沟通者都擅长送礼物给别人。

床头常备两本书:一本小说,一本非小说。

设计师必读!玩转Dribbble终极指南

蓝蓝设计的小编

dribbble

只要你是设计师,你就肯定知道Dribbble。这是一个供设计师展示作品、同行交流、寻找灵感的场所。

平面设计师、插画设计师、字体设计师、图标设计师、网页设计师、Logo设计师都经常浏览这个网站。

除了这个供设计师交流的网站,还有衍生出的Dribbble聚会、博客等等。

推荐阅读:
《拜师学艺第二弹!Dribbble上50位值得学习的设计师》

Dribbble学前班

Dribbble的术语大多来自篮球:

发布的新作品叫做Shots(投篮),新人处女作叫做debut(初登场),收集其他成员的作品并分类的合集叫做bucket(球桶),将dribbble成员归类收藏叫做lists。

如果一幅作品能够被足够多的成员like(喜爱),那么很可能会上Popluar(流行榜)。

如果设计师想要对其他设计师的作品致敬或者修改,那么这种行为叫做rebound(打篮板)。如果有很多人响应你的作品,那么你的作品和响应者的作品会列入 playoffs(季后赛)。

Dribbble上的图像尺寸限制在400 x 300px / 800 x 600px 。但是允许添加附件(比方说PSD文件)

如果电脑是retina mbp 会自动显示800×600的图,而上传800×600的图会标记为@2X。

retina mbp

设计师每个月最多能上传24件作品,这样能够防止垃圾作品,让设计师精选作品上传。

想要在这个站点上上传作品,需要得到老用户的邀请才可以。这引发了一些争议。

如果你逛Dribbble只是为了获取灵感,那么情况就有所不同了。首先,你需要注册账号,关注喜欢的设计师,这样每次登陆就能知道他们作品的更新情况。
当然,不注册也能观看作品、也能搜索关键词。
如果你想在Dribbble上雇人,可以根据设计师的粉丝数、所在地、专长来选择设计师。

Dribbble简史

Dan Cedarholm & Rich Thornett于2009年开始了Dribbble的项目。在2010年开始运营,比当时大多数的设计论坛、社交网站更加的热闹,更加的自由。
刚开始的时候,Dribbble只能被邀请加入,你必须让老用户给你一个邀请码。

后来,Dribbble加入了初登场功能。这个模块突出了那些新用户的作品,以缓解一些知名设计师“垄断主页”的现象。
2011年,Dribbble添加了工作列表模块,为用人公司提供了简单的招人方式。
最近Dribbble添加了团队账号。让团队能够有组织的在Dribbble上分享作品。

新手小册子!你应该了解的PS绘画工具

蓝蓝设计的小编

在PS中,绘画工具一方面被用来画线、绳、花花草草神马的,另一方面它还可以给区域涂上颜色或者混合颜色。熟练掌握绘图工具是每一个设计师的必经之路哟~

画笔工具

知己知彼,百战不殆。同理,为了全面的掌握画笔工具,你要先理解PS里的画笔工具到底是什么。画笔工具使用的是画笔预设里预先设定好的画笔,画笔预设可以定义任何笔刷的特性(如大小和形状)。

A brush tip will create a perfect match of the shape.

 

PS里的笔刷非常之多,纷繁复杂,每一个的形状都不尽相同。若你将某个画笔的尖儿贴着画布,那么它的形状将立即呈现。对画笔来说,这只是一个粗略的说明,你可以先在脑海中留个印象。

与真实的画笔不同,PS里的画笔可以有很多非常神奇的特性,通过熟练操纵这些属性,你可以制作出属于你的的笔刷,此外,你也可以按平时画画的要求更改画笔的形状及大小~一个笔刷可以朝任意方向自由发展,甚至可以变成透明的。所以说,只有你想不到的,没有它变不了的…

Select the first brush preset from the brush preset picker.

示范:快速制作笔刷

新建一个文件,200*200白色背景,选择画笔工具,在选项栏里选择第一个预设画笔(点击那个向下的箭头,选择第一个画笔)。
继续,将此预设笔刷折叠旋转怎么高兴怎么好看怎么来,选择你喜欢的前景色,然后点击鼠标,开始它的奇幻之旅。

修改后的笔刷

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档