标签归档：网页设计

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 先旋转后缩小，分两......查看更多>>

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

banner广告条设计的经验分享

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

  banner广告又叫旗帜广告，在几乎所有的网站中都能见到，也是目前最常用的一种网站广告形式。不过对于banner的设计相关文章并不多，其实在这种横幅banner中设计的好坏对于广告效果的影响是很大的，本文将介绍几种总结出的banner设计经验 1，banner广告在网页中的第一感觉：对于网站广告条的目的就是吸引用户注意，然后吸引用户点击。所以一个优秀的广告条首先要做到的就是必须能够吸引用户浏览。而用户浏览网页的时间一般也就十几秒中，因此广告条必须在第一时间内吸引到用户的眼球。在设计广告条时，我们必须要考虑用户的浏览习惯，也就是只瞄一眼情况下，是否能引起用户足够的重视。所以第一感觉对于广告条设计是最重要的一点。 2，广告条文本内容：对于广告条的文本文字内容来说，必须保持文字简短，重点突出。能在第一时间将最重要的信息高速用户才是设计目的。 3，banner广告条中的图片内容统一性：如果你是一家销售电子产品的网站，那么你的广......查看更多>>

发表在 经验感悟 | 标签为 , , , , , , , , , , , , , , , , , | 留下评论

网页设计规范

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

  一、为什么要写设计规范？设计规范是为谁服务的？ 谈这个话题之前，我们先了解一下什么是设计规范？设计规范是指对设计的具体技术要求,是设计工作的规则. 一般包括总体目标的技术描述、功能的技术描述、技术指标的技术描述,以及限制条件的技术描述等． 那我们为什么要用设计规范？第一，可以让我们清楚项目的规则，以减少犯错误的机率；第二，加强团队之间的合作，责任明确，提高工作效率．第三，锻炼我们整体全面的思维能力．  规范最终是为项目服务的．我们所做的一切都是为了优化项目，提高我们的工作效率．但是，设计规范也是一种设计团队文化．最终受益的不止是项目，还有我们自己．当我们形成这种文化，我们会配合的更默契；我们不需要在工程师加班的时候，一定留守在那里陪着；我们不需要在调别人设计的源文件时，一遍一遍的询问．当你不再因为别人的事情而加班的时候，心情是否好一些呢？ 设计规范渗透在整个软件工程里．不同的工程模型......查看更多>>

发表在 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , | 留下评论

让网页设计有规律可循

发表于 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 条评论

波尔卡点简明教程

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

  1.新建一个空白图层； 2.进入通道面板新建一个通道； 3.选中渐变工具,拉一个从黑到白的渐变； 4.选滤镜-像素化–彩色半调； 5.根据自己的需要设置参数–确定； 6.点击所有颜色的通道,就是在通道最上面的RGB那里点一下； 7.载入选区.(按住CTRL键的同时用鼠标点击那个新建的通道),然后反选； 8.回到图层填充你喜欢的颜色! 查看更多>>

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

photoshop制作3D物体立体倒影效果

发表于 2011/03/07 由 前端开发-武方博  1,022 views

  Photoshop立体物体倒影的制作方法。   最终效果   素材 将素材导入文档，如以上步骤复制好倒影图层，由于素材有一点的透视效果，因此不能直接利用渐变拖出 我们可以分步进行操作。首先以顶点为分界处，先框出右边的矩形选区 将中心点移至左上角，这一步的目的是让圆心定位于此。按住ctrl+adlt+shift键，鼠标各上拖动右侧中间的定位点直至重合 如法炮制出左边的倒影效果 最后同样添加图层蒙版，用渐变拖出，倒影制作完成。 查看更多>>

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

你需要知道的18个Web可用性原则

发表于 2010/12/28 由 前端开发-武方博  696 views

你是 Web设计师或维护一个网站吗？好，因为这篇文章正是为你准备的。如果你正在设计一个生活相关或工作业务相关的网站，有18本小提示，你需要阅读并记住。 你可以有世界上最好的视觉设计能力，但如果你建立一个不允许访问者舒适地一页一页或一项一项访问的网站，那你就理解错了好的网站的核心点了。因此，在今天的文章我会将告诉你需要知道的18件可做不可做Web可用性事情。 使用网格线来做网站页面结构 在你为一个有创意的网格页面框布局兴奋并尖叫的时候，你要保证你的整个网站的页面布局都在框子（Box）里边。网格结构能让访问者视线流固定在本页面，这是很关键的。一旦你将页面拉下来，页面也是很清晰简洁的 - 创造有趣的东西你需要放进优秀的设计放到网格里边。 不要忘记搜索表单 在你为一个有创意的网格页面框布局兴奋并尖叫的时候，你要保证你的整个网站的页面布局都在框子（Box）里边。网格结构能让访问者视线流固定在本页面，这是很......查看更多>>

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

50个背景及背景图片寻找及在线生成网站

发表于 2010/12/18 由 前端开发-武方博  1,442 views

网页设计中背景是一个很重要的元素，今天分享给大家50个网站，主要是以收集或生成背景图片为主要服务目的，可以让你更快，更好的找到你需要的应用。 Kaleidoscope From Kaleidoscope website, we learn that a patterned background can be combined with some colorful elements and the result is still eye-catching. For web-designers with great talent in illustration, they can mix and match a colorful illustration and paste it on a repetitive background to make the design more memorable like what we see on the Hugs For Monster website. Hugs For Monster Tanya Merone As in Tanya Merone and Elitist Snob’s websites, we learn that combining a tiled patterned background and a plain colored background is just like getting the best of both worlds. We could get a bit of simplicity from the plain background and a......查看更多>>

发表在 群组收集资源 | 标签为 , , , | 2 条评论
第 1 页，共 2 页12