分类目录归档：网页设计

网页设计师一定要知道的网站资源

发表于 2012/03/25 由 前端开发-武方博  497 views

网站设计资源在网上有很多，而且大多是国内的，但都不够具体，没有什么顺序或流程。下面说一下做为一名真正的网站设计师，你必需要知道的网站设计资源或文献。 无论你是一个已经有经验的网页设计师还是一个刚入门的网页美工，最有效的方法来提高你们的网站设计技巧或思维方式，那就是实践。作为网站设计人员，无论有经验与否，我都将把我觉得最好的资源或网页设计教程全部分享给大家： WebMonkey ，是一个专业为网页设计爱好才提供很多很有用的素材和资源的网站，这里的信息相当完善，几乎涉及到有关Web设计行业的内容全都包括了。我自己也不断地在这里学习网页设计的新思路和一些重要技能，同时在设计上我确实得到了不少的提高。 网站地址：www.webmonkey.com，下面先截图： W3 Schools 这个是最好用的，因为在国内有中文。最开始我只知道有英文，后来我是无意中发现了这个中文版。这个网站最突出的作用在于：你可以找到你想要的提示性服务，如HTML代码、C......查看更多>>

发表在 网页设计 | 标签为 , , | 一条评论

常用的icon png透明图标

发表于 2012/01/19 由 前端开发-武方博  814 views

网页设计过程中收藏的一些icon图标，懒得自己画图标的可以直接拿去用哦，都是png透明的！ 查看更多>>

发表在 网页设计 | 标签为 , , | 留下评论

7个Loading图标在线生成工具

发表于 2011/11/12 由 前端开发-武方博  560 views

对于网站加载过程中出现的用户等待状态来说，有一个足够明确的告知可能是绝对明智的方法。某些不确定的状况下，页面的加载或特定内容的局部加载并不是立即完成的（对于人的肉眼反应来说），在这样的情况下，有个一改善用户等待体验的明示状态就不可或缺了，所以，设计一些必要的 Loading状态图标是完全必要的了，这里就为你介绍7个优秀的在线Loadin图标生成工具，方便你实现。   Preloaders.net ajaxload.info loadinfo.net webscriptlab.com chimply.com mentalized Activity Indicators SanBaldo Ajax Loading Animated GIF 查看更多>>

发表在 网页设计, 群组收集资源 | 标签为 , , , | 留下评论

每个苦逼的设计师背后都有一群指点江山的神

发表于 2011/11/10 由 前端开发-武方博  793 views

Hovering Art Directors 是由Jacqueline Law 建立的一个Tumblr Blog，它主要是收集设计工作者们最惊心动魄最荡气回肠的工作场面——被众神背后围观并指点江山的经典时刻。看过这些照片后往往能增加其它设计师们的自信心，镇上的美工都会觉得自己的工作正在和国际接轨……   如果你是业内人士的话，不防也多留意一下你周围苦逼的设计师们，去围观时也要怀着一颗慈悲的心，再顺手把本篇分享给他们看看，仅表安慰。 设计师很威风，不要被骗，其实他们很可怜的，遇到搞设计的人就嫁了吧… 这样的设计师，你们伤害不起。搞设计的人，会在阳光下，站成一棵树… 原谅我就是这样的设计师，请别爱上搞设计的人… 每个搞设计的上辈子都是折翼的天使…… 1. 这儿少了1px，看到了没？   2. 左：要向左偏一点，右：该向右移一下，中：都试试吧。   3. 大姐，什么时候能改完，我们好下班啊！   4. 客户说了，不够大气。   5......查看更多>>

发表在 网页设计 | 标签为 | 3 条评论

banner广告设计要素

发表于 2011/05/05 由 前端开发-武方博  676 views

  应上面要求，在内部做一个关于“banner“设计的分享。搜了下，网上这类文章挺多，思来想去，决定这么干：1对前人的经验总结一下，2重点介绍一下flash 广告设计的要点。 本文适合新手阅读。 1:主题 投放在媒体的banner需要在最短的时间内给用户传递出最关键的信息，这就要求我们在设计之前一定要和需求方充分沟通,明确活动主题、重点、一定要求对方提交宣传文案、商品图。（如果商品图质量不好，可以要求他们再重新给几张，有时候他们自己也不知道那个好，随便给的） 例如：XX商城 全场正品 春季疯狂大特卖 默认情况下，价格信号、打折标签都是需要重点突出的，所以要对数字进行强化处理。（活动时间除外）  2: 字体 在banner的设计中文字扮演着相当重要的角色，正确的选择字体是一个良好的开端。首先要根据主题选择适合氛围的字体，例如轻松氛围的可以选择卡通、活泼一点的字体，中国传统节日可以选择书法字体等。 另外还需要注意......查看更多>>

发表在 网页设计 | 标签为 , , , , , , , , , , , , , , | 留下评论

浅议Web表单设计

发表于 2011/04/25 由 前端开发-武方博  808 views

  “输入框（ Input ）应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。”– 《HTML权威指南》 Web 应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致。输入区域的对齐方式，各自的标签（label），操作方式，以及周围的视觉元素都会或多或少影响用户的行为。 表单布局 考虑到用户完成表单填写的时间应当尽可能的短，并且收集的数据都是用户所熟悉的（比如姓名、地址、付费信息等），垂直对齐的标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉，并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动：下。 在这种布局中，推荐使用加粗的标签，这可以增加它们视觉比重，提高其显著性。如果不加粗的话，从用户的角度讲，标签和输入框的文字几乎就一样了。 如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难（比如一个地址的多个组......查看更多>>

发表在 用户体验UED, 网页设计 | 标签为 , , , , , , , , , , , , , , | 留下评论

JPG图片优化压缩

发表于 2011/04/22 由 前端开发-武方博  1,376 views

当人们讨论图像优化时，他们只注意到一些流行软件提供的那几个仅有的参数调节工具，例如“质量”滑块，颜色数调板，抖动等。此外，少数专门的软件，如OptiPNG和JPEGtran，设法压缩一些多余的数据来优化图像。所有这些都是非常有名的工具，它们为网页开发者和设计师提供简单直接的方法来优化图像。 在本文中，我们会向您展示一种不同的方法来优化图像，这种方法是源于“图像数据在不同图片格式中的储存原理”。我们从JPEG格式开始，这里有个基础技术称“8像素栅格” (原文：eight-pixel grid )  eight-pixel grid 就如你已知的，JPEG图像由一系列8px × 8px区块组成，当您吧JPEG的图像质量调的太低的时候，这些区块尤其明显。这些东西如何帮助我们优化我们的图像呢？请观察下面的例子：   32×32 px, 图片质量:10（PS中），396 bytes 两个白色小方块都是8×8 px。虽然都是低质量，但右下角看......查看更多>>

发表在 网页设计 | 标签为 , , , , , , , , , , , , | 留下评论

PNG图片优化压缩

发表于 2011/04/21 由 前端开发-武方博  2,971 views

原文地址：www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques 作者：Sergey Chikuyonok 引言 做为一名网页设计师你或许已经对png格式非常熟悉，它提供了完整的透明度，这是一种无损的，功能强大的图像格式。能够很好代替gif图像格式。但 是绝大多数人认为它不可被压缩，带着这样的疑问我们来认真看完下面这篇文章。每一种图像格式都有自己的优缺点，如果掌握了相关知识，在进行图像优化时能够 针对图像进行相应处理，得到高品质的图像和高压缩率，这是图像优化的关键所在。png被称为开源的gif图像格式，它们之间有很多相同的地方（如：索引 色），但png在每一个方面都要强于gif。它介绍了一些非常酷的功能，例如：图像封装和压缩，但对我们网页设计师来说最重要的还是线性过滤（也称为“三 角过滤”）。 什么是线性过滤？ 这里介绍下它的原理，假如我们有一张5*5像素水平渐变的图片，如下图（每个数字代表了一种颜色） 通过上图你会......查看更多>>

发表在 网页设计 | 标签为 , , , , , , , , , , , , , , , , , , | 留下评论

photoshop消除锯齿

发表于 2011/04/21 由 前端开发-武方博  1,602 views

有感于一些朋友的作品（尤其是页面软件界面设计这种对精度要求很高的地方）在细节方面总是受到锯齿的困扰，而拉低了整体档次。特根据自己的经验讲一讲常 见的毛刺问题。随笔写写，有些可能不是很完善很对~俺记性一向不好。另外像素风格图片、gif边缘锯齿不再这次讨论范围之内。 （本教程以cs3为例，快捷键的不同不再另行说明。另，cs4中新增的蒙版控制功能可以结合使用） 1、ctrl+t 类变形导致的锯齿问题 1-1 原因：常规选项设置不当（很少有的情况）        解决：打开菜单 [编辑]-[首选项]-[常规]。请确保你的[图像插值]设置为“两次立方（适用于平滑渐变）”。 当然你有特殊需要且明确这里选项的含义则另当别论（比如说像素风格的缩放一般用“邻近”来确保不模糊） 1-2 原因：旋转与缩小等产生的锯齿与走形        解决：        1-2-1 先旋转后缩小，分两......查看更多>>

发表在 网页设计 | 标签为 , , , , , , , , , , , , , , , , , , , , , | 留下评论

让网页设计有规律可循

发表于 2011/03/14 由 前端开发-武方博  738 views

    随着开放平台日益增多，衍生出来的各类应用服务也就呈不断增长的趋势。这些应用服务的站点设计也可谓是五彩斑斓，灿若繁星。 我们可以来找找这些网站的设计是否有规律可循。 通常一个网站，都会有许多目标需要完成，而像应用服务或程序类网站其最主要的目标就是吸引访客去购买或者注册他们的产品。   可以从几个方面来分析   色彩 Amoderneden 从它的整体色彩配图元素构建等不难看出，这是一个关于儿童教育有关的网站，推的就是寓教于乐的产品服务。   Paraply 他们为用户的当前位置提供降雨预报服务。忧郁的蓝色预示着雨雪的降临，与雨伞保护感强烈的红色相对比显得相得益彰。   MailChimp 他们专门为客户公司提供强大的电子邮件营销服务。鲜亮的色彩预示这是家充满激情活力的公司。   色彩的应用组合预示了这些信息。   布局 一般访客的视线会从页面的左上角的开始，扫视网站的顶部（Logo,导航） 接着他......查看更多>>

发表在 网页设计 | 标签为 , , , , , , | 评论关闭

与众不同的网页设计细节

发表于 2011/03/14 由 前端开发-武方博  619 views

细节使得这个世界从平凡变得不平凡。 一辆豪华汽车与传统汽车拥有同样数量的车轮、座位、门窗，但是使得它在竞争中脱颖而出的却是花费在细节上的时间。加热真皮座椅，一按即启动引擎，无钥车门开关，自动泊车系统，丰富的数字电台等等使得它成为一辆昂贵的新型车。 同样的规则也适用于网页设计。愿意花费时间专注于细节的网页设计师能够获得拥有更多价值的设计。这里的关键词就是价值。我们无法保证建立网站所花费的时间和其结果所带来的价值之间有直接的关系，总有一些细节比其他更加重要，关键是要能够确定哪些细节更具有影响力。 增加价值的细节 这一类型的细节是我们愿意在审美层面之外花费额外时间以改进我们工作的细节。我们希望专注于可以深入改变用户体验的视觉调整，例如用户对该网站的主题和消息的体验或者他们如何畅游网站。 一般的没有建站经验的网站访问者，无法指出某些细微差别来的用户体验改善，但是如果这些细节被移除，用户将在感知和可用......查看更多>>

发表在 网页设计 | 标签为 , , , , , , , , , | 留下评论

网站导航设计模式指南

发表于 2011/03/14 由 前端开发-武方博  752 views

在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式，可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式，我们将讨论它的一般特征，它的缺点，以及什么时候使用它最好。   顶部水平栏导航 顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且最通常地放在网站所有页面的网站头的直接上方或直接下方。   顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。   顶部水平栏导航一般特征 导航项是文字链接，按钮形状，或者选项卡形状 水平栏导航通常直接放在邻近网站logo的地方 它通常位于折叠之上 顶部水平栏导航的缺点 顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说，这不是什......查看更多>>

发表在 网页设计 | 标签为 , , , , , , , , , , , , , , , , , | 留下评论

复古风格纹理丝带设计教程

发表于 2011/03/14 由 前端开发-武方博  623 views

    新建图层 砂岩这一层应该是叠加，然后我把不透明度调到40     这个是做高光，用白颜色的笔刷，图层的图层模式应该是叠加，注意设置图层的不透明度。原始教程上面google翻译的不准确！ 这个是做暗调，用黑颜色的笔刷，图层的图层模式应该是叠加，注意设置图层的不透明度。 查看更多>>

发表在 网页设计 | 标签为 , , , , , , , , | 留下评论

圆滑的icon图标设计

发表于 2011/03/13 由 前端开发-武方博  950 views

  哈哈  上面是我比这着教程做的，下面的是翻译的英文教程，不是我翻译的，使用软件翻译的，大致上能看明白这个教程！   设立帆布与历史背景 Create a new document 800×600 pixels, you can use a bigger canvas if you wish to but for the purpose of this tutorial we'll be using those dimensions.创建一个新文件800 × 600像素，可以使用更大的画布，如果你想但本教程中我们将使用这些方面的目的。 创建该图标的环绕声 Select the rounded rectangle tool with a radius of 15px, change the type to “shape layers”.选择与15px半径圆角矩形工具，类型更改为“形状图层”。 使用形状图层可以让您调整不损失画质的图标。 Draw out your icon surround in the center of the canvas, make the surround fairly big.绘制出你的图标环绕在画布中心，使环绕相当大。 将这些图层样式环绕。 ......查看更多>>

发表在 网页设计 | 标签为 , , , , , , , , | 2 条评论

栅格文字效果教程

发表于 2011/03/12 由 前端开发-武方博  904 views

  本效果非本人原创,原创者为一老外!!!只是和PS友友,刚好讨论到此效果,由于原版外国教程中,有些 地方说得不是太清楚,对于初学者而言,这些会影响效果的整体性.特此,写一中文教程,希望更多的友友成功!   外 国友人PS的效果   栅 格文字效果 查看更多>>

发表在 网页设计 | 标签为 , , , , | 3 条评论
第 1 页，共 2 页12