推荐阅读
解析IOS平台设计规范和常用尺寸
此文分别从控件+布局+模态情景+手势交互+动画+字体等六个方面介绍了一些iOS平台设计的基础规范，有志于UI设计的童鞋推荐收藏起来，将来要做相关的设计可以直截了当戳进来学习。一、UI的控件概述：1、框架UI的元素分为4类：A：栏：状态栏目和导航栏的结合体;B：内容视图：应用显示的内容信息，包括相关的交互行为，例如滚屏、插入、删除等操作进行排序;C：控制元素：产品行为或显示的信息;D：临时视图：临时向用户提供重要的信息，或提供额外的功能和选项。2、框架UI的尺寸：
Photoshop调出阿宝色通透肤色效果的婚纱照片
先来看一些效果：衣服：拍摄前一天路边买的一条纯白色有裙子，很素但是布料很舒服。道具：自家花店根据现有花材扎成的森系手捧，主要有尤加利叶和棉花。场地：一个普通草地器材：佳能6D+135mmf/2L时间是下午三点左右，太阳还稍微有点强，下面就开始拍摄了。这些是前期的一些准备工作。先看看效果对比：看得出原图颜色有些灰，层次不够，皮肤不够通透，下面就讲下调色思路。
滤镜特效范例23
1、新建图像，将背景变为黑色，新建一个文字层。输入白色的文字，类似下图所示。2、对文字使用【滤镜_杂色_添加杂色】滤镜(需要栅格化图层)，设定类似下左图。图像效果如下右图所示。-3、对文字层执行【滤镜_像素化_晶格化】，设定如下左图，图像效果类似下右图。-4、将文字旋转90度，执行【滤镜_模糊_高斯模糊】和【滤镜_风格化_风】滤镜，最后再将图像旋转回去。分别如下各图所示。---5、建立一个渐变映射调整层，设定如下左图，图像效果如下右图。-
最新发布
为什么设计师需要学习编写代码
通常，在完成了一件网页设计后，设计师的无知都会显露无遗而备受指责。他们把创建网页代码的繁重工作都留给了程序员们。这种现象不只出现在网络开发行业，在软件及游戏开发业也是如此。残酷的事实就是：开发进度可能会因设计师而停滞不前。为了追求最佳效率，设计师不仅需要描描画画，还需要能把它做出来！本文中，我想与读者分享一些为什么设计师需要学习编写代码的理由。有了一个最终产品将如何实现的明确印象，设计师将拿出更多实际可行的概念。作为开发进程中不可或缺的一份子，设计师肩负着确保他们的设计能够顺利转移到网络介质上，同时还要考虑其可用性，网页易读性和可实现性。一个对用户友好的网站不仅有简洁清晰的浏览顺序逻辑，还向用户提供一切所需的信息而不会显得咄咄逼人或是杂乱无章。想要知道一种 Web 布局是否可行的唯一途径就是亲自去了解如何建立一个网页。在几乎所有的设计与实现各自独立的产品中，设计组和实现组从没有满足过对方的期望，尤其是那些无形的产品，比如网站，软件和游戏。这通常归结于产品的期望和产品可行性的相互妥协，目前看来，这是难以完美统一的。解决之道是：设计师应该亲身尝试设计作品的实现，以避免沟通中的混淆，误解和误传。一个实践中的设计不应是绝对的。我的意思是，设计应该是灵活友好的，能够在修改以迎合系统技术限制的同时不扭曲其原有内涵。这些重复但必要的改动只能由原设计师来实现。一个设计师/开发者能够比开发人员把设计重提到设计师手里进行改动更加高效。而且设计师和开发者之间——事实上经常如此——会产生摩擦。我常常喜欢把软件，网络或是游戏开发想成是管弦乐，而设计师是作曲家，开发者是乐团的指挥家。想象一下二者是同一个人将会怎样？交响曲将会是令人惊叹的，迷人的，纯正的！不仅是大师的神作，而且还是其本人亲自指挥的！设计师同时充当程序员的角色意味着设计和编码的进度即使不是同时的也是连续的。结果就是开发周期的缩短——谁会不关心效率呢？现代的设计师需要提升自身的能力以保持个人价值，有一套技能是远远不够的，我们往往需要戴着不同的头衔：设计师，前端开发者，文章作者和项目经理。
Safari 4浏览器的一些新特性
在WWDC 2009上，Apple发布了正式版的Safari 4浏览器，正式版的safari 4放弃了仿Chrome的tab方式，还原至3.0版本的界面。据称，WWDC上，Serlet 严重的BS了一下微软的IE8浏览器，并称Safari的JavaScript引擎是目前世界上最快的，根据他提供的测试数据，Chrome 2的速度是IE8的5.3倍，而Safari4的速度则是IE8的7.8倍！这些数据大多是官方的噱头，我们就先不管啦，看看Safari4会对我们前端开发有哪些影响吧：支持Audio和video标签。Safari4对CSS的支持有较多改进，具体如下：Safari 4开始支持zoom属性。这一点儿的用法和效果和IE浏览器一直。不同的是，如果是缩放，Safari会缩小到浏览器支持的最小字体，而IE会直接缩小到设置的大小。比如：.zoomTest{font-size:12px; zoom:0.1} Safari只会缩小至9px字体大小，而IE会缩小至1.2px(肉眼已经看不清了)。有一系列子属性组成：CSS遮罩/蒙板效果
让XHTML与HTML兼容
在为大家介绍完如何在XHTML中正确地使用JavaScript和CSS之后，破洛洛继续为大家带来XHTML与HTML兼容的16条指引！1.避免将页面声明为XML类型，页面使用UTF-8或者UTF-16字符集。2.在空元素标签（不能用来包含内容的标签）结束符>前加上斜杠 /，如：<br />,<hr />等等。3.当一个非空元素（此标签是用来包含内容的，如标题，段落）内容为空时，给它一个空白字符，而不要使用像空元素那样的结束方法，如：当一个没有内容的P标签请书写：<p> </p>而不要写成<p />。4.当你的style和scripts内容中出现 <, &, ]]>或者两个连续的横杠 --时，请使用外部文件进行引入。5.避免在元素属性值中出现断行或者多个空格。6.不要在文档的head部分包含一个以上的isindex元素（最好不使用），此元素不推荐使用。isindex：使浏览器显示一个对话框，提示用户输入单行文本。在 HTML 4 中，此元素是不推荐使用的，而推荐使用 INPUT 元素。isIndex 的 tagName 属性将返回 input。
H标记要在网页制作中合理使用
在我的日常开发中，我最常用到的H1~H4。今天poluoluo.com还是建议大家把H1~H6都用到。 HTML标签有专门的标签处理页面上的标题。它们是h1，h2，h3，h4，h5和h6，象封建社会一样，h1就是万能的君主而h6就是最底层的百姓。<h1>主标题，写在这里</h1> <h6>次标题，写在这里 </h6> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>我的第一个网页- poluoluo.com</title></head><body><h1>我的第一个网页- poluoluo.com</h1><h2>这是什么</h2><p>用HTML组合起来的简单网页</p><h2>目的</h2><p>学习HTML</p></body></html> 注意，h1标签在一个页面只能使用一次——假定它是这个页面的主标题，是不应该使用多次的（相当于一篇文章的题目，你可以有一个副题目，但你不会使用两个并列的题目吧？——译者注poluoluo.com）。 但是，h2到h6可以如你所需任意使用多次，但它们应依设计意图，该按顺序使用。比如，h4应该是h3的子标题，h3应该是h2的子标题，以此类推。
邮件HTML的一些经验总结
最近给应用做了一个直邮推广，期间遇到一些小问题，在此记录一下。1.直邮里面不允许用javascript，这点很让人郁闷，所以一切交互只能借助html原生的的东西来实现。实现的时候按钮本来是使用 button 标签的，不过后来发现在 IE 下无法完成提交表单的功能，不知为何，后来改为 input 标签，成功。2. FireFox 下面不支持 cursor:hand 属性，所以在FireFox里设置鼠标形状为手型，需要这样来搞：cursor:pointer 。但是这么一来 IE 下又不好使了，无奈，只好 hack 一下：cursor:pointer;*cursor:hand3. HTML的原生标签都是有默认样式的，所以我设置了 h1 的padding-bottom之后发现IE 和 FireFox 显示不一致，后来得知要先把这个标签的 margin 和 padding都置为0 。所以很多页面的CSS开头就是 *{margin:0; padding:0;}，不过好像不推荐使用 * ，可以考虑一下YUI的 Reset CSS。4. 直邮里面很多地方尽量用图片。一个WD告诉我的，因为邮箱可能对邮件内容做很多限制，很多CSS属性也不保证能弄。他们说直邮是最没有技术含量的，哈哈，所以我赶紧弄过来自己切页面了，锻炼一下，没有技术含量的工作适合现在的我。
HTML5和CSS3新的WEB标准和浏览器支持
本文整理了一些最重要（或者说人气比较高罢）的新标准，虽然它们多数还只是w3c的草案，离Recommendation级别还早，却已经成为新一轮浏览器大战中备受追捧的明星，开发者社区里也涌现出大量相关的demo和API封装，有些已经进入生产环境（比如google在iphone上实现的gmail离线应用），其实我觉得如今的web领域里，从厂商私有技术转换成委员会标准再转换成通用技术产生杀手级应用的周期已经显著的加速了，是因为现在web application的需求太高了么…… UPDATE：刚才在solidot发软文的时候我突然想明白怎么表述这个问题：其实现在很多浏览器厂商同时也是基于浏览器的应用开发者和web标准的制定者，就好像修筑舞台的工程师同时也是舞台上的演员和舞蹈动作的导演一样，所以google, mozilla, apple们都在不遗余力的实现那些有利于开发web应用的技术标准，即时它们还是W3C Working Draft，相比之下IE team就比较缺乏动力，果然计划经济缺乏活力亚XD……由于是源自笔记，对每个条目我只会列出称呼和语法特征，暂时没时间写详细的解释和可执行的示例，但是会给出相关的文档地址，除了列出已经支持该特性的浏览器，也会为不支持的浏览器提供替代/过渡的实现。===================废话结束的分割线=======================对整个外链css文件和部分css代码使用的媒体类型侦测，人气高的原因显然是因为移动设备……w3c标准：http://www.w3.org/TR/css3-mediaqueries/MDC文档：https://developer.mozilla.org/En/CSS/Media_queriesOpera文档：http://www.opera.com/docs/specs/css/支持：Firefox 3.5+, Safari 3+, Opera 7+css变形，有人用这个实现伪3d效果以及旋转效果的jquery插件w3c标准：http://www.w3.org/TR/css3-2d-transforms/MDC文档：https://developer.mozilla.org/En/CSS/CSS_transform_functionswebkit博客的介绍: http://webkit.org/blog/130/css-transforms/支持：Firefox 3.5+, Safari 3.1+替代/过渡：IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx
Web标准学习：理解结构和表现相分离
当讨论到Web标准时，一些事情总是被提及，那就是结构和表现分离的重要性。 刚开始的时候理解结构和表现的不同之处可能很困难，特别是如果你不习惯于思考文档的语义结构时。 然而，理解这点是很重要的，因为，当结构和表现分离后，用 CSS 文档来控制表现就是很容易的一件事了。 结构 是由文档中的主体部分，再加上语义化、结构化的标记。 表现 是你赋予内容的一种样式。在大多数情况下，表现就是文档看起来的样子，但是它同样可以影响一个文档“听”起来的样子----毕竟不是每个人使用的都是图像化的浏览器。 尽可能的把结构和表现相分离。 理论上讲，你应该用一个 HTML 文档来保存内容与结构，用一个 CSS 文档来控制整个文档的表现。 如今表现与结构的未分离的网站还是很普遍的。 所以我们刚开始学习要养成好的习惯，把它们分别放到分开的文件中，XHTML文件可以链接并共享外部的CSS和JavaScript文档的
语义化的HTML结构怎么理解
相信大家都知道html和css，知道html结构和css表现分离，知道html语义化，这些都是这几年的热门关键字。语义化的html在国内也是一两年前才开始被追捧的，看看现在群里谈论的html结构，关于html结构的面试题，语义化的html占据了很大一部分。那么为什么要使用语义化的HTML？语义化的HTML到底有什么好处呢？HTML是提供网页文档内容的上下文结构和含义；html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以首先我们要知道html和页面的表现是没有关系的，这些是css的事情。HTML在页面中的作用就是结构和含义，通俗点说就是划分内容，这里放什么，我们放的是什么。语义化的HTML结构首先要强调HTML结构HTML结构是页面的骨架，一个页面就好像一幢房子，HTML结构就是钢精钢筋混泥土的墙，一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头，不能住人，不能办公。css是装饰材料，是原木地板，是大理石，是油漆，是用来装饰房子的，CSS的强大就不用多说了，css如果没有html结构那就是一堆木板，一同油漆，没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力充分发挥到极致，提供一个用既干净又有结构的内容的html是非常必要的，“HTML是在互联网上发布超文本的通用语……HTML使用标签来对文本结构化”（http://www.w3.org/MarkUp/）。语义化的HTML结构怎么写？HTML是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。它会告诉我们说：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”值得注意的是，不应该让HTML来告诉我们：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。语义化的HTML结构其实很简单，首先掌握html中各个标签的语义，<div>是一个容器；<strong>是表示强调；<ul><li>是一个无序列表等等…在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。语义化的HTML结构到底有什么好处？我们知道HTML5新增的标签，比如<header>和<footer>，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡的一个原因，这一点也说明了语义化的HTML结构是html的发展趋势。1.去掉或样式丢失的时候能让页面呈现清晰的结构：
在XHTML中不再使用HTML中的一些废弃元素
我们进行CSS网页布局的时候，都知道它需要符合XHTML1.0规范，在poluoluo.com昨天的文章中，向大家介绍了DTD。如果我们在进行CSS网页布局的时候，还在使用被W3C废弃的元素，那就失去了使用CSS的意义，虽然它们可能同样被样式控制。 在XHTML中不再使用HTML中的一些废弃元素。它们主要有以下一些。 Elements and attributes that have been deprecated in the most recent version of XHTML, XHTML 1.0. Elements<applet></applet> The applet element has been deprecated in favor of <object></object>. <basefont /> The basefont element has been deprecated in favor of style sheets. <blackface></blackface> The blackface element is a WebTV (MSN TV) element that has been deprecated in favor of style sheets. <blockquote></blockquote> The blockquote element is deprecated in favor of style sheets when used to indent text. <center></center> The center element has been deprecated in favor of style sheets. <dir></dir> The dir element has been deprecated in favor of <ul></ul>. <embed /> The embed element has been deprecated in favor of <object></object>. <font></font> The font element has been deprecated in favor of style sheets. <i></i>The i element has been deprecated in favor of style sheets. <isindex /> The isindex element has been deprecated in favor of the input element and CGI forms. <layer></layer>The layer element has been deprecated in favor of style sheets. <menu></menu> The menu element has been deprecated in favor of <ul></ul>. <noembed></noembed> The noembed element has been deprecated in favor of <object></object>. <s></s> The s element has been deprecated in favor of style sheets. <shadow></shadow> The shadow element has been deprecated in favor of style sheets. <strike></strike> The strike element has been deprecated in favor of style sheets. <u></u> The strike element has been deprecated in favor of style sheets. Attributesalink The alink attribute defines the color of an active link on the Web page. It has been deprecated in favor of style sheets. align Used to align elements vertically and horizontally on the document page, the align attribute has been deprecated in favor of style sheets. background The background attribute is used to define a background image for the element. It has been deprecated in favor of style sheets. border Used to define a border around the element, the border attribute has been deprecated in favor of style sheets. color Used to define the color of the enclosed text, the color attribute has been deprecated in favor of style sheets. compact The compact attribute is used in list tags to create a list that takes up less space. It has been deprecated in favor of style sheets. face Used to define the font face of the enclosed text, the face attribute has been deprecated in favor of style sheets. height Used to define the height of the element, the height attribute has been deprecated in favor of style sheets. language The language attribute is used to define the language used by the script element. It has been deprecated in favor of the type attribute. link The link attribute defines the color of a link on the Web page. It has been deprecated in favor of style sheets. name The name attribute names the element for use with dynamic content, it has been deprecated in favor of the id attribute. noshade The noshade attribute removes the 3-D effect from horizontal rules. It has been deprecated in favor of style sheets. nowrap Used to stop table contents from wrapping, the nowrap attribute has been deprecated in favor of style sheets. size Used to define the size of the enclosed text, the size attribute has been deprecated in favor of style sheets. start The start attribute of list tags defines the starting number of the list. This attribute has been deprecated in favor of style sheets. text The text attribute defines the color of the text on the Web page. It has been deprecated in favor of style sheets. type The type attribute of list tags defines what type of list should be used. This attribute has been deprecated in favor of style sheets. value The value attribute of list tags sets the value of the list item. This attribute has been deprecated in favor of style sheets. version The version attribute defines the version of HTML used by the document. It has been deprecated in favor of DTDs. vlink The vlink attribute defines the color of a visited link on the Web page. It has been deprecated in favor of style sheets. width The width attribute defines the width in pixels of the element. It has been deprecated in favor of style sheets.
让网页更有阅读性的几个网页设计技巧
1：把文章内容字体改大一点，字太小看起来很累，尤其是在内容很多的时候。目前文章内容流行的字体是14PX（像素），和180%或150%的行距，这样不容易造成视觉疲劳。例如在CSS文件中可以加入如下代码：body{font-family: "宋体","微软雅黑","arial",Verdana, sans-serif; font-size: 14px;line-height: 180%;}这段代码的意思是 BODY区域也就是整个页面默认是宋体，如果没有宋体则改为微软雅黑，以此类推。font-size的意思是字体大小，line-height是意思是行距。(非常抱歉，我犯了一个严重的错误，目前流行字体应该是14px，结果我打成16px，这里向各位修改成16px的朋友说一声抱歉。) 2：给文章内容的链接添加下划线，这样读者可以清楚的知道哪里可以点击。例如：显示下划线代码text-decoration: underline; 3：文章内容尽量简洁明了.更不要把文章弄成花花绿绿的字体颜色。 4：要勤分段落。太多的段落总比太少的段落要好很多，这样文章看上去错落有致，而且读者也容易阅读. 5：内容摘要很重要，这样读者在阅读完标题，再阅读摘要时就能大致了解文章要表达的内容。 6：给重点的句子或者段落加粗体现实。这样不仅方便快速阅读，而且搜索引擎也会着重阅读。 7：如果文章内容很长，可以使用分页。分页导航一定要清晰明了易于点击。 8：把文章保持在一个合理的宽度，尽量不要直接从word文档粘贴到文章编辑器当中。以免把样式代码也粘贴到编辑器中。我一般都使用记事本来写文章。 9：可以考虑使用插图.如果文字太多的情况下，配图可以提高文章的可读性。