推荐阅读
精选国外非常吸引人的旅游门户网站设计欣赏
其实酒店和旅游类的网站最能体现多媒体内容和文字的搭配技巧了，这类网站通常需要营造氛围，展现美感，体现吸引力，优秀的案例比比皆是。今天我们就来看一组优秀的案例。现如今的旅游和酒店类网站设计的越来越带感了，壮美的风景和精致的界面融为一体，优质的服务和梦幻般的界面让用户在网站中流连忘返。这些网站以惊艳的图片和视频立足，配合以突出的现代网页设计技术，结合当下的设计趋势，视差滚动、全景图片、响应式布局、动态图片一个都不缺席。这些网站巧妙地将多媒体技术、文字排版和特效平衡为一体，为用户提供了身临其境的体验。>Pygmy ElephantPygmy Elephant 是一个旅游机构，网站为用户提供了逼真而难忘的视觉体验。其中涵盖的多媒体类型丰富，通过丰富的视觉体验鼓励游客踏上旅程。网站使用了视频背景，漂亮的图文混排，精致的交互细节。>Cruise Me为了让项目效果突出，设计和开发团队使用了诸多先锋的技术。当用户打开网站的时候能够看到首页上交互性极强的地图，每个地标都能够为用户提供丰富的信息以便浏览和了解。再向下，用户可以翻看不同主题不同旅游项目的卡片，有目的和针对性地了解具体信息。整个网页的设计友好而令人愉悦。>Bird Luxury Travel PR
PHOTOSHOP绘作逼真蕃茄
4.画个大椭圆，羽化20，反选，增加亮度30。 5.取消选择后，用加深和减淡工具处理周边，上面和两边减淡，底部加深。使用加深和减淡工具的时候，需要不断的尝试，这时最好给图像做个历史快照，或是复制一层来做，这样便于修改，涂抹时次数是很多的，不一会就数十次了，在历史记录中可恢复不了。 6.蕃茄有几个瓣，现在来做这几条陷下去的纹。画个椭圆，用选择-变换选区旋转和移动到适合的位置，羽化1，在凹纹的位置用减淡工具檫。 7.反选后用加深工具檫。 8.同样方法做出余下的陷纹。观察整体，再对局部作一些加深增强立体感，可加轻微杂色，数量约1。 9.给这个层命名“蕃茄”，新建一层，在上部画个小椭圆，羽化3，填充灰白性线渐变，将图层模式设为“颜色加深”，作为蒂部位下陷的暗调。向下合并到蕃茄。 10.新建一层，命名“茄蒂”，用钢笔仔细钩出蒂的形状，填充绿色（46/77/27）。 11.绘画实物时，离不开我们的好帮手――加深和减淡工具。刚接触时，我也是极为头痛的，它们不象图层样式那样，调节参数就可以得到效果的，不容易掌握。但只要经过耐心的练习和尝试，你会发觉它们实在是可爱极了。处理茄蒂时可用钢笔辅助钩出叶瓣，也需要载入茄蒂的选区，用轻移、旋转、羽化、反选等动作来得到我们需要的工作选区。完成后加杂色1.5%。
Photoshop打造斑驳压纹镂空文字效果
简 介】 利用PS可以打造出各种各样奇特的文字效果，下面我们来制作一款压纹镂空文字…… 先看一下效果： 效果图 制作工具：Photoshop CS 制作过程： 1、新建一个宽度为100像素，高度为100像素，分辨率为350像素的文件。 2、新建图层1，单击工具箱中的“自定义形状工具”，在其属性栏中单击路径按钮，并在形状下拉面板中选择五角星图案，然后在窗口中拖拽创建一个五角星路径，如图01所示。
自己动手用Dreamweaver制作活动菜单条
用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。 第1步：制作菜单外貌 图1 在Dreamweaer中新建一个文件，绘制一个层，在该层中插入一个表格(如图1)，对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的CSS样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration(装饰)”均设置为“None(无)”，将“Hover”的“Color(颜色)”设置为红色，最后将设置好的样式应用到各个菜单条中(可按“F12”键预览效果)。 第2步：设计菜单的动态效果 1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角(使整个菜单条完全露出但上边缘正好靠拢页面上边界)，在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置(如图2)。在时间线窗口中的第15帧处再次单击右键，在弹出的快捷菜单中选择“添加动作”，为该帧添加一个交互行为，Dreamweaer将自动打开行为面板。单击行为面板中的“+”按钮，从弹出的菜单中选择“Timeline/Stop Timeline”，打开“Stop Timeline”对话框，选择“Timeline1”后单击“确定”按钮关闭该对话框。交互行为的事件为“onFrame15”，动作为“Stop Timeline”，这样当时间线运行到第15帧时，动画将停止播放，这样就实现了菜单条弹回的功能。图2 2、用同样的方法在时间线的第30帧处也添加一个“Stop Timeline”的交互行为，这样就实现了菜单弹出的功能。添加了这两个交互行为后，在时间线窗口的相应帧上面都出现了一个蓝色方块，它代表一个交互行为。选择“自动播放和循环”复选框，使动画能够自动循环播放(如图3)。图3
最新发布
浅谈简洁风格的网站着陆页设计心得
山边小溪：Landing Page──引导页，常被直译为“着陆页”。在互联网营销中，引导页(Landing Page，有时被称为首要捕获用户页)就是当潜在用户点击广告或者利用搜索引擎搜索后显示给用户的网页。一般这个页面会显示和所点击广告或搜索结果链接相关的扩展内容，而且这个页面应该是针对某个关键字(或短语)做过搜索引擎优化的。着陆页对于帮助网站把游客变成顾客非常重要。因此，产品的消息必须明确，设计必须能吸引人且简单易懂。登陆页面的设计应有助于吸引访客购买由网站提供的产品或服务。如果它从游客到顾客的转换率很高，那么着陆页的设计被认为是做得优秀的。一个伟大的网站着陆页面的设计是能够让访问者采取行动，并在网站上花钱。着陆页的设计不应该有太多的信息和图形。一个设计糟糕的着陆页面将使它看起来没有吸引力，并会让网站访客困惑。这将阻碍着陆页面的影响，即使网站有一个坚实的产品或服务提供给客户，它可能也不会产生销售。着陆页应该美观，干净和优雅。它同时应该是简单易懂，而且必须有该网站需要传达给访问者的所有信息。它应该吸引访客，并在设计和使用的颜色方面应该是有吸引力的和相关的主题。如今，着陆页面设计的趋势是非常流行的简约设计。简约的设计，简单的设计，没有太多的内容。不必要的图形，颜色和文字不会被添加到着陆页面，以保持设计的简洁，提供给游客一个干净的着陆页面设计布局和必要的信息。在简约的设计的着陆页中往往只使用一种或两种颜色，有限的图片，图形和文字的使用。着陆页面的消息传达也是非常明确的。由于简约的设计中元素非常少，设计者必须使用这些有限的元素是创建一个非常吸引人的着陆页面。简约设计的着陆页正变得非常流行，因为他们在以一个清洁，简单而又吸引人的方式向访问者提供信息。下面是一些例子，能够帮助你设计简约着陆页(Minimal Landing Page)提供灵感：
如何让您的网页页面设计脱引而出
随着互联网的发展，Web页面在我们的生活中已经是无处不在，如何利用视觉艺术为你的Web产品增彩，也成了产品设计者逐步完善的一门课程。一个完整的Web页面是需要点线面的合理结合，每一个页面都是一个神奇的空间，同时他的深度，广度和作者赋予的元素美感决定了这个页面的可观赏性。要想让自己设计的页面有鲜明的艺术特色，从众多的页面里脱颖而出，下面着重从以下四点去介绍。一、巧妙利用文字网页设计中，文字在整体界面中起到了主体的作用，是传达信息的主要元素，字体的的大小、颜色、字体样式甚至间距都会直接影响页面的视觉传达效果。如下图例：整体页面趋于简洁，但用文字跟图形做了巧妙的结合，使整个页面显的简而不空，同时整体文字大小对比也使页面变的更具层次感。合理的将字体打散进行灵活艺术加工处理使其图形化，既呈现了信息，又使整体看起来更加贴切设计主题，更具美感和艺术性。
23套全新的免费HTML5网页模版下载
目前互联网上存在很多专业的高质量HTML5模版，并且是免费的，如果你熟悉编程的话，只需要研究一下它们的代码就可以学到很多便捷的操作和新的技术。在今天的文章当中我不是列出一长串可用模版的列表，而是精挑细选出高质量的响应式HTML5模版。更重要的是，它们都是免费的，所以我希望能有几个模版能满足的你的需求，能够运用于你的项目当中。Legend是一个基于Twitter Bootstrap的多功能响应式单页模版。你可以用它来制作一个登录页，或者说是创意设计人员的线上作品展示网站，甚至于是构建一个商务主题站。Liquid Gem利用CSS媒体查询和百分比布局给出了一个完整的响应式设计。它还包括一个图片幻灯，一套完整的PHP联系表单和一个工作示例页面。一个轻量级的模版，用于HTML5/SCSS的响应式项目。免费 ，开源，极简的响应式网站模版。
21个适合扁平化设计的创意超链接效果
虽然只是小小一个链接以及搭配的一个简单的动画，却由于牵扯到与使用者互动的部份，魔鬼藏在细节里。在今年如果谈起设计来说，没有人可以避开扁平化设计，不管它是否为未来的设计趋势，至少在今年网页设计领域中扁平化很流行很流行。相比以往，扁平化在界面上可以说是一种”偷懒”，界面”偷懒”后，对后面的交互上的细节要求就更加高了。因此Tympanus收集了一些和传统交互效果相比更加有创意且适合扁平化设计的一些案例。本文为 21个链接 Hover 交互样式，原Demo效果在此。1. 中括号2. 3D翻转3. 底部色块平滑渐隐4. 底部色块快速渐隐
如何给扁平化风格选择合适的字体
扁平化设计是时下最流行的设计风格，之前我们已经探讨过扁平化设计的原则(原文链接)很多朋友都提出了自己的疑问和观点，今天我们将回答其中一些热门问题。“扁平化设计中使用什么样的字体最合适?”http://www.floatdesign.net/https://coderwall.com/futurealhttp://www.fitbit.com/www.who-wanna.com/en/
20款国外时尚大气的按钮开关PSD素材下载
开关，顾名思义，控制开和关，在界面设计中是一种加速器。在今日的UI设计中，无论是网页还是手持设备界面，越来越多应用到这种元素。酷炫的开关能给设计增色不少。而且在具备美观的同时，也兼具功能性。可是遗憾的是设计开关是个比较麻烦的任务，所以我们今天推荐20款不同风格的开关，供大家参考学习。下载地址：http://vdisk.weibo.com/s/dt23BkiXHc0Np
浅谈如何让网站拥有受欢迎的交互界面
交互设计如今已是一个十分常见的问题，但许多设计者和开发者仍不知道它的具体意义。今天，我们将从不同于以往的方面：我们将会深入讲解能使你的网站拥有良好交互性的用户界面和设计原则。首先，何为IxD交互设计(即IxD)是一块发展迅速的新领域，大致出现于10-15年之前，源于一些体现设计问题的研究，后来被专业设计者鉴别和接受。交互设计促进人与环境的交流，这里我们指的是人和网站的交流，交互设计师只要考虑用户和电脑的交互，毋须像UX设计者那样思考软件或系统所有涉及用户的方面。你也许在不同大学里听说过人机交互度——这些度基本是在IxD领域中培养的。这样的设计师要做什么?一个交互设计师会思考谁是产品的目标用户以及谁会使用它。用户研究者或是信息架构师会提供这些信息。在这些研究的基础上，一个交互设计师为了用户与软件交流，要耗费很长时间但要尽快地创作出这种令人称奇的交互方式。设计师必须识别出关键交互并且画出线框图, 所以要不停地画草图。有的设计师会直接画出来，有的设计师会用软件来辅助(文末展示了一些不错的例子)，还有其他一些设计师会或单独或合作地创作界面。交互设计(IxD)不断地展现出新的交互方式，因为用户总是期望网站出现新的事物。但交互设计师需要意识到这些特性会如何影响用户，然后在许多想法中选择真正要实现的和可以放一段时间的。下面我们将会看到一些驱动交互设计的概念。
详解网页设计中那些不容忽视的细节
你有没有经历过看到一个页面的时候马上就被它的设计吸引并且留下了深刻的印象呢?然后你进一步细看这个页面发现真正使这个页面变得神奇的是一些小细节，在这篇文章中我们将看到几种把细节设计做到完美的页面。完美的像素线Image Spark 的设计师用一个像素的线条来分割顶部导航，搜索输入框，导航底栏。任何时候一个较浅的颜色紧挨着一个较深的颜色会使人出现有一个凸起的边缘的错觉。请注意这种线条只能比背景色稍微浅一点点。如果使用一条白线那将失去这种效果。atebits使用了类似的技术，但是在这里是用来做一些分隔。注意他们是使用两个1px的线条相映成趣，一个明亮的一个暗一点的。这给人的错觉是一个插图槽。另外一个漂亮的接触线的两端是渐渐消逝，而不是突然结束。恰到好处的阴影阴影可以给页面增加一些深度，但是在使用阴影的时候有一点需要特别注意，不要过度的使用。ps中的阴影效果如果错误的使用会成为一个非常危险的工具。阴影的强弱应该与背景颜色结合使用。一个较暗的背景需要一个更暗的阴影，一个较亮的背景比较是个一个更亮的阴影。
简洁网页设计你需知的6点技巧
洁净和一尘不染之间是不能划等号的。去掉了多余内容的设计看起来外形美观，一目了然，让人心旷神怡，尤其是对网页设计领域更甚。设计师在网站设计过程中，时常会遇到过度设计的例子。保持审美需求和实际需求之间的平衡，对整洁，干净和条理清晰的网站来说很重要。在激烈的行业竞争中，网页设计师想要获得成功，先决条件之一就是要掌握简洁的网站设计基础。在网站设计中，并没有保密规定，但相关的从业人员仍需坚持一些基本原则：用外观专业，整洁的网站设计来打动用户。但是，简洁的网页设计并不就等同于我们在网页设计中所强调的极简主义。简洁的网页设计可能使用了多种元素来衬托网站内容，但依然还能保持整洁有序的外观。不过，极简网站设计是以内容为核心，多余的东西统统扔掉。而简洁网页设计则使用了创意和美学元素，在一定程度上，这是可行的。也就是说，网页设计师所追求的拥有整洁，专业外观的网站应该着重让所使用的元素变得高雅，而不是丢弃这些元素。但是，这并非一蹴而就，一个简洁的网站可能要花上数天的艰苦努力才能完成。选用富有冲击力的图片元素设计任何网站类型，恰到好处又吸引眼球的图片总是非常重要的。虽然读者通常只关注网站的内容，但吸引人的相关图片也可以起到对内容补充的作用，同时也增添了美感。不过，在网页中使用图片元素时，不管它是静态还是动态图片，都要注意颜色的搭配。颜色使用过多容易造成视觉混乱，使用单一颜色往往会产生强烈的视觉冲击。小心使用页面空白毫无疑问，简洁的网页设计成功的先决条件之一就是做到整洁有序。设计师在网页中熟练地添加flash动画，视频，3D图形等多种元素的同时，不过应尽量避免过度使用这些元素。如今，大家都经常使用各种便携式设备浏览网页，因此也应该充分考虑到移动网络用户的需求。在网页设计中，应该小心，准确地处理页面的边距和空白。但是，空白间距过多会让网站失去吸引力。因此维持设计过程中的流动性非常重要，切勿过度使用。开启你的像素眼任何与设计的相关工作，小细节都发挥大作用。网页设计也不例外。想要成功设计出简洁的网站，你需要“第三只眼”来监控这些小细节。网站的边框，投影，高光和纹理等元素容易让浏览者印象深刻，但设计师们往往却忽略了这些小细节。在某些情况下，忽视动画和图片的优化问题会影响到网页图像质量。为了设计出最佳的网站图片，可在photoshop中启用“对齐到像素”（Snap to Pixels），对图片进行适当的优化。网页中内容排版错乱时有发生，这会从视觉上降低内容的吸引力，影响读者阅读。选用合适的字体简洁的网页设计成功离不开排版，排版应该获得和图片同样的重视。虽然可供选择的字体很多，设计师要考虑的方面很多，比如说，目标客户和客户公司的性质。为网站页眉和内容选用合适的字体是必不可少的，无衬线字体（sans serif）和有衬线（sans serif）字体通常会为设计带来良好的效果。除此之外，你还可以结合其它字体，专为孩子和女性打造网站。为你的网站选择合适的配色方案任何网站的设计都离不了合适的配色方案，这对创建一个整洁干净的网站同样适用。坚持使用淡色和非彩色的投影对成功设计一个简洁网站大有裨益。浅色的投影可以帮助用户把焦点转向网站内容。标志使用黑色和较深的投影，网页中的页眉和导航元素使用浅色背景，这些都是不错的案例，并没有规定在简洁网页设计中不能使用大胆的颜色，但是这样的颜色要小心，克制地使用。有时候，网站有必要使用深色背景色来吸引某些目标用户。比起渐变色，有些网站更钟爱纯色。如果你的网站非得要使用纹理和渐变色，也不要用得太过火。导航栏与可用性你对网站设计满意时，认为一切都趋于完美，这时，你可以通过实际试用来测试它的使用性。不妨站在局外人的角度，客观地对网站作出评价。在网站发布之前，你可以询问一下跟网站设计无关的人的看法。保持网站导航的直观性，避免使用的导航元素让初次访问者和技术新手产生挫败感。
如何从WordPress主题上获取设计灵感
在国外很多企业喜欢用WordPress这个CMS系统来做企业网站，除了能降低开发成本外，WP自身的功能、SEO优化、模板设计都是很不错的。近期设计达人网收集了一些使用WordPress制作的优秀网页设计作品，细心点可以发现，这些WP主题都喜欢用扁平化设计风格，并使用新的HTML5和CSS3来实现前端交互，使用作品看起来动感而不花哨。这些WordPress主题设计对于设计师、和前端工程师来说，这是很好的灵感来源，有很多排版、配色、CSS3的运用，都值得我们学习和尝试。而对于企业用户来说，可以尝试购买这些主题来做的你企业网站，价格也非常超值!企业网站风格wordpress主题查看网站杂志资讯类 WP主题查看网站响应式Wordpress主题