网页设计中优化图片的6大技巧

2014-2-19 蓝蓝 前端及开发文章及欣赏

平面设计和网页设计是两个截然不同的领域，这两个领域有不同的设计需求、设计实践和设计方法。

例如，在网页设计中更常使用基于像素或栅格的文件格式，诸如JPG、GIF或PNG。相反，在平面设计领域像logo这样的图形可能会用到不同尺寸，因此使用最多的格式则是EPS和AI这样的矢量格式。然而，用于网页界面设计的矢量格式，如SVG或HTML5 Canvas则不能广泛应用，也不会被所有浏览器所支持。

另外，用于web端的图形有基于它们自身的相关处理方式。其中一条便是你要时刻注意文件的大小，因为你需要使你的网页加载越快越好。作为一名网页ui设计师，你应当尽量减少HTTP对图像的请求次数——无论通过减少图片的使用数量还是将它们整合成CSS sprite——以及确保你选择了正确的图像格式，使其在图像大小和质量间得以平衡。

Photoshop是平面设计师和网页设计师使用的行业标准工具。以下是你在创建web端使用图像时的一些简单的小技巧。

1. 将图片保存成Web所用格式

在网页设计中，你必须确保你的图像大小越小越好。当然，当你想要图片完好显示时可以抛弃这条原则。
在Photoshop中创建图像的完美方法便是平衡质量与文件大小。
网页设计师经常犯的一个错误便是使用“另存为”命令，而不是使用“存储为Web所用格式”。

阅读全文>>

标签: ps技巧 图片优化 经验分享

评论(0) 浏览(1022)

Mac 和 PC 哪个更适合做设计

2013-12-25 蓝蓝 前端及开发文章及欣赏

在苹果电脑和PC之间，我们究竟该如何选择呢？很多人的答案便是，苹果电脑适合做图，PC适合游戏。也许是由于都这么回答，所以，目前这个观点几乎已经成为一个定理了。那么事实是否真的是如此呢？以小编看来，这个观点可能不尽然，下面，笔者便纯理论的说明一下其中的原因。

苹果机比PC更适合做图 真的是这样吗?

阅读全文>>

标签: 设计 mac pc 适合设计的电脑

评论(0) 浏览(1018)

经验分享：响应式排版中的基础知识

2013-11-1 蓝蓝 前端及开发文章及欣赏

Arrietty：当我们建立网站的时候，我们一般从定义正文开始。正文的定义显示了你的主栏有多宽，其它几栏的大小就随它自己内容定义了。直到最近，各种屏幕分辨率或多或少是同质化的。如今，我们要处理各种屏幕尺寸和分辨率。这让处理变得更复杂。

在重整旗鼓的热情中，我写了一篇关于响应式排版的博客，这篇文章主要专注于我们最近的实验：响应式字体。如果不知道IA的历史，你可能会错过我们新启动的网站中的响应式排版和设计的一些关键点。我决定从头做起，一步一步解释响应式排版，而不是整理所有文章。以下是第一步。

阅读全文>>

标签: 排版基础 响应式排版

评论(0) 浏览(1184)

最新出炉的20个CSS3特效打包下载（附特效预览+源码）

2013-10-28 蓝蓝 前端及开发文章及欣赏

最新出炉的20个CSS3特效打包下载（附特效预览+源码）

1. Putting CSS Clip to Work : Expanding Overlay Effect

阅读全文>>

标签: css3 css样式 css特效

评论(0) 浏览(1025)

软件厂商该如何拥抱大屏时代？

2013-10-21 蓝蓝 前端及开发文章及欣赏

2013年安卓旗舰机都有一个共同的主题——大屏，在大屏机当道的现在我们继续探讨手机该不该大屏化已经渐渐没有了意义，那么我们不妨直接从大屏入手来探讨下 App 或 Rom 厂商如何在现在的安卓市场中适应“大屏”潮流。

认识问题

魅族在发布 MX3 时提出了要做最好用的大屏机这个口号，但当笔者在10月3日拿到真机后发现其并没有真正符合“好用大屏机”这个称号，从一成不变的下拉菜单、顶部的电源键等设计中我渐渐发现魅族仍旧是在用做小屏机的思想在做大屏机，所以效果才会如此差强人意。再看发展越趋成熟的 MIUI，小米的系统在现有的小米机型上暂无压力，但如果将 MIUI 放在小米3上就又成为了一个老观念适配新生事物的例子。

这就类似于 Z Watch 的设计（见上图），用做手机的思路做手表显然是行不通的。纵观现在的安卓市场，很多厂家虽推出了便于单手操作的各种功能，尽力让手机适应各种使用场景，但却鲜有厂家去思考如何去利用大屏的优势来扩展自身的软件体验，做那些在小屏幕设备上能想却不能做的事。

阅读全文>>

评论(0) 浏览(1036)

高效实用！切图绝技之扣图大法

2013-10-11 蓝蓝 前端及开发文章及欣赏

绝音：专业提供扣图药方，一帖见效，药到病除。当然，也推荐你看看优设今年下载量第一的抠图神器：

PS抠图神器：KNOCKOUT 2.0汉化版下载及教程

功效：去除图标、按钮等背景图的底色

阅读全文>>

标签: ps教程 切图 前端应用

评论(0) 浏览(2042)

8个惊艳的 HTML5 和 JavaScript 特效　

2013-10-7 蓝蓝 前端及开发文章及欣赏

这篇文章向大家展示8个惊艳的 HTML5 和 JavaScript 特效。作为下一代网页语言，HTML5 拥有很多让人期待已久的新特性，越来越多的开发人员开始使用 HTML5 来制作各种交互性强、效果丰富的 Web 应用。下面这些惊艳的示例带您体验 Web 技术的魅力，相信你看完这些例子后会对未来的 Web 发展充满无限期待。为了有更好的效果，建议在 Chrome 浏览器中浏览。

阅读全文>>

标签: 惊艳的HTML5效果 JavaScript 特效　

评论(0) 浏览(1516)

图片压缩原理与优化

2013-7-12 蓝蓝 前端及开发文章及欣赏

前言：该文收集了前辈们的一些关于图片优化的技巧，在此收拢到一起，对于各个方法的优化原理做了一些研究，希望能给大家对于图片优化这一块起到抛砖引玉的作用。

提到图片，我们不得不从位图开始说起，位图图像(bitmap)，也称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时，可以看见赖以构成整个图像的无数单个方块。

常见的格式中JPG、PNG、GIF亦属于位图，所以它们的数据结构大致相同，只是每一种图片格式都有不同的压缩算法，不同的扫描方式，但是优化的方法都有一个共同点，都是围绕着每个像素颜色值来下手，具体如何进行优化呢？
下面来给大家介绍一下图片的一些基本原理和优化的方法：

1.JPG原理与优化
JPG是一种对彩色或灰阶之类连续色调图形作压缩和解压缩的标准．这个标准是由ISO/IEC JTC1/SC29 WG10所订定。
压缩算法为正、反离散余弦转换，如下图：

阅读全文>>

标签: JPG原理与优化 jpg压缩到多少才好，色彩优化 PNG原理与优化 PNG文件优化设置

评论(0) 浏览(1976)

漂亮的CSS弹出窗效果

2013-6-28 蓝蓝 前端及开发文章及欣赏

网页设计中弹出窗一般用于简短的文字介绍，是十分常用的一个代码。通过CSS3动画样式，我们可以实现不同交互的弹出框。

下面这个DEMO演试有19种不同动画效果的弹出窗，如向上、向左、右、全屏、渐变展示等等。

在线演试 代码下载

阅读全文>>

标签: CSS弹出窗效果

评论(0) 浏览(3564)

前端技术：让用户感到贴心的细节处理

2013-6-19 蓝蓝 前端及开发文章及欣赏

　　一个页面的细节，从重构的角度去看，页面的精细度，代码的可读性、扩展性，为下游服务的代码注释，交互接口样式的书写，代码的压缩，图片的优化等都可以归为细节处理，我的理解是，刚才提到的细节处理是每个重构工程师都应该具备的基本技能，不能算是真正意义上的细节，好的细节处理应该是从用户出发，应该是发自内心对用户的一种关怀。下面有两个小例，都是我们做页面时常见的板块，如果我们细心处理一下，也许会让用户会倍感贴心。

阅读全文>>

标签: 让用户感到贴心的细节处理 前端总结

评论(0) 浏览(1973)