逤耶

几款免费CSS UI工具包

mtobeiyf:


搜集整理了一些免费UI工具包,全部是由CSS3设计的。有Metro风格的,有极简主义风格的,有响应式的,有专门针对iOS应用的,种类丰富,总有一款适合你。如果你用过其他不错的UI工具包,也请不吝分享哈~

Semantic UI

Semantic UI一出现在Github上就受到火热的关注。Semantic UI最大的特点:完全语义化的编写模式,名称规范统一,直观易懂,可以大大提升开发效率。这对于新手来说也是一款非常容易上手的工具。另外,它充分利用了CSS3动画特效,简洁实用漂亮的样式这些都是其最受欢迎的原因之一。

点评:因为Semantic UI目前还在开发阶段,版本为0.18,js存在一些问题和Jquery有些冲突,如果要决定使用Semantic UI作为项目前端开发,可以只使用Semantic UI的CSS,js部分自己编写。



Metro UI CSS

Metro UI CSS是一款用于开发Windows 8 Metro UI风格的开发工具包,这个工具包兼容大多数浏览器,比如IE9+、谷歌、Opera、Safari 和Firefox。这个工具包提供了所有常用的UI元素,如Tiles、images、notices、froms、buttons和typography。


CSS UI Kit

CSS UI Kit是一个完全由CSS3编码的UI工具集,它包含有所有基本的UI元素,如搜素框、复选框、下拉按钮、单选按钮、页码、Audio UI等等。这款工具目前在Chrome 和 Safari下运行良好,但在IE、Firefox和Oprea下面还存在一些问题。


CSS3 UI Kit

可以创建出干净、简单的Web界面的CSS3 UI工具包,提供菜单、面板元素和按钮等常用元素。

Icon Deposit CSS3 UI Kit

它包含所有必备的Web UI元素,还提供了大量的PSD文件,便于设计人员修改。



Gumby Framework UI Kit

Gumby Framework是一个全新的响应式960 Grid CSS框架,它的网格系统是高度可自定义的,并且可以轻松建立你自己所需的设计模型。

CSS Grid UI Set

CSS Grid UI Set提供了干净的图标和独特的Dark风格UI。这个UI包是基于HTML/CSS的。


巧克力电台:

我的绘本《spring outing》样刊收到了,好开心。故事是一次难忘而美好的春之旅,希望大家会喜欢!购买请戳 http://item.taobao.com/item.htm?id=38642405751&spm=a310v.4.88.1谢谢支持


2014年Logo设计趋势报告

T-baby:

MONO CREST

利用单一的线条以及采用单色,比如黑色或白色排版出来像插图一样的标志。

  LETTER STACKS

英文字体不必用小写,改用大写字体设计,像有点堆积木的结构感觉,这样的视觉效果也许不错。

  HAND TYPE

手绘的风格logo,手绘大家并不陌生,它大部分用在插画上,而今年将会越来越多的手绘风格应用到标志上。

  DAZZLE

历史悠久的didot字体有着细微的线组成,当缩小后印刷会发现字体像错误或有缺陷一样,这是非常有趣的。

  FLAT FACETS

使用透明度和渐变已经是过时的设计,现在新的设计诞生了,它是平的,平坦、扁平化设计。这里的Flat Facets是指如珠宝和水晶,看上去像是三维物体,而且是平面的。

  GEO WIRES

这里的Logo是使用清晰的线状结构,如珠宝、对角线类的设计,但没有水平垂直结构,这是很大的特点。当然它也是平面的。

  TRANS MENAGERIE

将标志以扁平化的动物风格设计,通过不同的形状组合,结合一些半透明设计来组合成动物形态,这是先进的依靠重叠的层式设计。

  WAVES

像wifi logo一样使用波浪形的元素设计,以圆为中心形成三条波纹,表示网络、连接相关的信息。

  HEXAGONS

Logo使用六角形,像蜂窝一样的六边形。其实六边形是很常用的,很多设计都喜欢用六边形来演变,这也是未来一个趋势。

  GEOGRAPHY

这是全新的设计风格,可以说是前所未有的,标志上带有地图的形状,如下图的例子,真的有趣。

  POMPONS

像多彩绒毛球一样的风格,有着芯、轴、空间、幻觉的信息。

  KNIT

针织风格。这种连接图形看上去有雄厚实力的表现,你可以用不同的针织效果来增加你的设计效果。

  STATES

标志设计成二分简单的几何形状,扁平化风格,形状里面的字体就是Logo名称,字体与形状比例要调整好,确保文本简短。

  LINKS

叠加式连接线,有规律的叠加链接,并有半透明效果。通过这些方式你可以设计不同的连接结构,创造出一个全新的样貌。

  MOTION LINES

运动线风格,运动本身就是由一个简单的线表示,如表达亮度、振动、都可以用简单的线来表示,看看下图的Logo是怎样运动的?


原文地址:logolounge
译文地址:shejidaren


photoshop复古海报制作教程

LSYAN·LoFoTo:

粉丝破2000有点久了 我还是决定发点福利吧

所有步骤写不清的教程都是在耍流氓!!!此教程写给对我做的这张图好奇的朋友以及photoshop入门的朋友

好多人问我这是怎么做的还有要我出教程的= = 好吧第一次做教程勿喷 photoshop大师勿喷其实我也就是一个photoshop水平一般般的小姑凉而已~


首先 我是看到网上的一个教程“PS CS6教程:Photoshop制作抽象风格照片”http://pcedu.pconline.com.cn/324/3248289.html(我这里用的是PS CC)觉得不错的啊挺酷炫的啊挺好看的啊就想模仿着做一张

我就一步一步按他说的做 wocao!!第一步就看不懂了!!!!好吧那就自己做

好哒进入正题 首先要找素材

先去下载喷溅画笔噢 样式不一定要一样但是就是要喷溅的 安装画笔什么的自己百度吧

接着戳它http://mirish.deviantart.com/art/Red-4-305142089既可获得美女照片若干 选取一张你认为适合的图

我喜欢这张 眼神什么的好销魂~

新建一个文件,大小为800px*1136px,背景色为#cccec9

新建图层 选择画笔 喷溅样式颜色比背景色深一点就好了 在画布边角利用喷溅边缘点点点


与背景图层合并 点击滤镜-滤镜库-画笔描边-成角的线条适当调整参数 就得到下图


现在来弄点高光哈~ 选择椭圆选框工具


Ctrl+F6羽化选区 羽化半径不要小于50像素就好啦 也不要太大

(其实感觉200有点过了)

新建图层 点击油漆桶选择白色 在选区上色 ctrl+D取消选区


如果感觉太亮就调透明度 感觉范围太小 ctrl+T调整

背景上可以再加多一点喷溅 可能会比较酷炫 而且现在感觉背景颜色有点淡 调整色阶


这样就看着舒服多了


(不要问我怎么感觉跟前一步不一样了以前的图psd没删 真好 做教程我就省点时间吧 用旧文件= =)

背景这样就弄好了 可以先把背景隐藏起来先 避免眼花 然后再新建一个干净图层作为背景

把销魂的美女拖进来


咦 图好小哦 那就shift+alt+鼠标等比例调整图片大小 调整到你认为合适就按enter

接下来一定要栅格化图层噢不然就编辑不到


现在要开始对美女下手了嘿嘿 选中美女图片然后点击添加矢量蒙版(右下角一个长方形一个圆组合的那个)

然后换画笔工具 更改颜色为黑色右键选择画笔样式 一定要硬边圆的哟

然后就当橡皮檫一样在美女身上擦啊擦擦剩个头部 记得给人家留点头发噢!!

(你一定很想知道为什么不直接用橡皮擦擦是吧当年懵懂的我也曾经思考过这个深奥的问题 因为蒙版擦多了能恢复啊= =)

我擦成了这样 


是不是觉得还有多余的地方不完美不要在意细节!!!!反正等下要遮住它的

点击 滤镜-艺术效果-干画笔


Enter后你是不是发现她的鼻子不够漂亮??那就 液!化!

点击 滤镜-液化


选择向前液化工具(就第一个啦)调整大小 然后就像美图秀秀瘦脸一样推啊推啊~

适当液化一下她的下巴鼻嘴唇什么的反正你觉得好看就行

调整得你感觉正常就按enter好了


接着再次选择黑色画笔 右键选择喷溅样式的画笔利用画笔的边缘修改女人的头···记住先选择蒙版再按噢 一下一下的按不要拖


换多几种喷溅样式的笔刷点啊点啊接着就成了这样


(不要纠结这张图和上一张感觉不一样好吗)

因为这个步骤存在随机性 所以没必要追求和我的一模一样

接着用套索工具 选出大概的脸部范围添加色相/饱和度图层 降低脸部饱和度


这时你会发现好惨白对吧 那我们就要钢笔工具选择嘴巴部分右键-建立选区 羽化半径不要太大了


再按色相/饱和度 参数不一定要一样 看着合适就好了


最酷炫的时候来了~ 新建图层 选择画笔 画笔样式仍为喷溅 (选择酷炫的颜色 不要太鲜艳 因为这是要弄出复古风格的 ) 按着头部边缘画 记得换颜色换画笔样式 旋转画笔什么的


(做到这里你是不是在想之前那步用喷溅画笔擦头部边缘的意义在哪里就是为了过度好一点= = 哎如果你觉得没必要你就不弄吧 也不是影响太大)

可是 是不是好丑- -美女脸上好脏

建立蒙版 画笔改黑色 选择喷溅样式在脸上点啊点 点到没那么多污点就好了 头的周围也是同样的方法擦去 记得换多几种画笔啊!!(擦脸部污点的时候记得画笔不要太大)


擦完之后 滤镜-滤镜库-画笔描边-成角的线条这样做的目的是为了使它与背景和谐一点 于是就成了下图这样


如果你觉得刚刚画的颜色太鲜艳了你可以把鼠标放在那个图层上按右键-选择像素 然后再调颜的色相对比度什么的

人也弄完了 可以delete那干净的背景了


效果暂时为这样 颜色好苍白 不够复古那你就把它当相片调吧

我比较懒直接用Alien Skin的Exposure5的滤镜调的 为了使它更复古 加了刮痕


这样子算是基本完成了 可是就是下面留白太多那就选择一款酷炫的字体再加一串英文吧 “I just want to look at you QUIETLY”


最后是检查阶段 看看是否顺眼好吧我是感觉来点暗角比较有feel

那就椭圆选区工具选择较大的范围然后ctrl+shift+I反选选区 


好啦 自己看着满意那就算是完成啦~

 

其实做这种图有想法就好了 边做边想也行 ps里的每个功能都去尝试下 要有一种“如果这样弄会不会更好?”的想法 

每个人弄出来的必定都不一样 我也弄不出之前弄出的效果了 

 

友情提示 辛苦做完的图记得保存psd格式啊!!!


亲爱的你们看到最后帮我个忙好嘛~我叫刘施言 这是学校的活动 帮我投上你们宝贵的一票好吗~ http://t.cn/RvA8JxY

谢谢




Gary:

今日帮自己做的简历,系时候好好稳翻份工啦。

(备注:匆忙促成,简历信息介绍面页,参考了一个国外的设计师作品)


一大早就起床,做了一个下午,做完该去享受个下午茶!哈哈