首页

设计师应该知道的图片优化技巧

蓝蓝设计的小编

未标题-333

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

腾讯财付通设计中心 Jia :提到图片,我们不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时,可以看见赖以构成整个图像的无数单个方块。
常见的格式中JPG、PNG、GIF亦属于位图,所以它们的数据结构大致相同,只是每一种图片格式都有不同的压缩算法,不同的扫描方式,但是优化的方法都有一个共同点,都是围绕着每个像素颜色值来下手,具体如何进行优化呢?
下面来给大家介绍一下图片的一些基本原理和优化的方法:

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

正离散余弦转换

反离散余弦转换即把整个流程反转。

这里的8X8像素区块是我们JPG优化方法的重点,在之后会涉及到取样区块量化、扫描的步骤,然而取样区块量化这两个步骤将是导致图像失真的过程,也是我们优化工作所涉及到核心部分。

取样:

一网打尽!优秀图像优化工具推荐

蓝蓝设计的小编

Kraken

网页设计中往往需要大量部署图片。网站的品质取决于图像,如果一个网站的图像品质精良,那么体验将非常的棒。

可以去看看那些优秀设计师和开发者的作品,他们往往非常注意图像的优化。既保证了图片的质量,又适度压缩图像,以提高加载速度。

本文将介绍多种极佳的图像优化工具,可以在日常应用中帮助你。

Online Image Optimizer(在线)

The Online Image Optimizer是一款在线压缩图像工具。支持本地上传图像进行压缩(最大不超过2.86MB)。可以选择图像输出类型。默认输出格式设置为和输入图像格式相同。

Online Image Optimizer

应该如何驾驭黑色?请看这20个强大的黑色系网站

蓝蓝设计的小编

瞧吧!现在到处都是明亮的设计照亮我们的屏幕,有时甚至亮瞎到我们的眼睛!大伙应该都感同身受,接近节日或者年底的时候,以红色为主色调的设计稿常常可以让我们看到昏厥,还有那些色彩斑斓的促销专题。

那么今天,我们要好好和大家来推荐一些低调内涵的网站,而这些设计者们也正采取了与热闹相反的路线:但他们依然创造了强大的网站,通过黑暗柔和的色彩!这些设计有一种诱人的存在,它们用黑白捕捉人的记忆情感。

这篇文章我们倾力推荐了20多个美丽的黑色系网站,微妙的色调和戏剧性的黑白图像一定会让你陷入这一场低调奢华的视觉盛宴里,来尝尝吧:)

另外也希望大家带着问题去欣赏这些网站,这些设计师是如何把黑色设计的更有国际范?如果是你来,布局、素材、辅助色又会怎么选用呢?

我们也为您准备了其他色系的优秀文章,推荐您也有空一起来看看哟。
《配色秘要:奢华低调有内涵的米黄色》
《超赞!网页设计色彩剖析之瞩目红(附百枚网页案例)》
《浅谈色彩学:以红色为主的色彩配色》

 

MoreSleep

MoreSleep

Apple Mac Pro

Apple Mac Pro

Rook

进度条设计欣赏

蓝蓝设计的小编

「Loading」是经常在APP以及游戏中见到的,因为需要用户等待,为了避免用户在等待的过程中退出,通常辅以进度条告知用户大概还有多久,但等待总是让人不耐烦的,所以一些设计师试图用更人性化的方式来表现进度,他们将进度条设计成各种极具创意与美观的形态,让人们更乐意欣赏进度条的滚动。花瓣网设计师汉斯戴尔收集了上百张进度条设计图,我们从中精选了10种进度条设计。

loading (1)

loading (1)

loading (2)

精华整理:11月UI模板psd免费大派送

蓝蓝设计的小编

好东西越来越多了,免费的午餐也越来越多了,如果你买不起付费的素材,可以先用免费的应应急,而且不少免费素材也不差。
在本篇文章中,你可以看到很多熟悉的“老面孔”,没错,本篇便是十一月份UI设计素材精选。

一应俱全的PSD模板:包括iPhone、iPad以及其他移动设备的UI套件(包括的5s,iPad Air)、线框图、展示效果图(分层的、实物的)。

所有模板均为免费(有的是限免,所以抓紧),各位请一一挑选吧。

推荐阅读:
《怒赞!50套万里挑一的设计师专属精华资源包》

iGravertical Screen Layers + iOS 7 Screen Converter

Free-PSD-Mockups-of-App-Interface-Design-4

Isometric Perspective MockUp


Free-PSD-Mockups-of-App-Interface-Design-8

活力十足:25个富有艺术感的卡通风格网站赏析

蓝蓝设计的小编

 

使你的网站不再无聊的一个方法就是利用艺术的力量去改变它,你可以使用有趣的卡通插画、萌萌的人物造型、天马行空的童话布景,让你的网站不仅独特且生机勃勃。

网站上的涂鸦可以直接吸引访问者的注意力,提升访问者的愉悦感,还能使他们更加留意各方面的细节,让个性鲜明的网站为你代言!

今天我们收集了28款童趣十足的卡通风格网站,它们确实通过有趣的插画、巧妙的结合强烈地吸引了我。希望你打开来学习借鉴的时候感受到纯美的童真,开心一笑 : )

想让你的设计更具趣味性吗?你也可以阅读以下文章:
《20款可增强设计趣味性的缝纫字体下载》
《让网站更生动!那些在网页中完美运用视频元素的案例》
《聊聊那些令人愉悦的动画(GIF图)》

Rainbow Nursery

色彩明丽的儿童插画,传递出温暖开心的感受。

Rainbow Nursery

XHTML Crab

一眼就被中间那只眼神滴溜溜转的螃蟹吸引住了,看起来非常想迪斯尼动画人物造型,对吗?

超赞!15个国内优秀互动网站案例欣赏

蓝蓝设计的小编

@设计达人网 :国外网站是不是欣赏多了,这次设计达人网尝试整理一些国内专题活动网站设计,收集这些也是让大家了解下国内现在的互动网站。这些国内的互动专题网站很少像国外一样使用HTML5来做交互,大部分用FLASH代替来实现交互设计。

互动网站主要是让网站与用户进行互动,大部分都是让用户通过微博来分享,最终实现品牌宣传的目的,之于效果如何这就要看你的专题有没有创意啦!接下来大家一起看看国内的互动网站与国外网页设计的有什么不同吧。

你也看看外国的优秀范例:《超赞!25例交互体验极佳的网页设计》

蒙牛:3D音乐 特别的奶特时光

听,让3D音乐与美味一起,带您走进特别的奶特时光。

专题活动网站欣赏:zhuan-ti-wang-zhan-01

Adidas :NEO Label 冬季夹克造型对决 活动网站

2013年冬季全球知名运动品牌adidas推出adidas NEO Label 2013秋冬广告搭配,由彭于晏与Angelababy分别以不同的搭配方法,呈现出不同的街头范和运动派,让冬季搭配更鲜艳亮丽。

专题活动网站欣赏:zhuan-ti-wang-zhan-02

手机QQ浏览器 :玩转双屏互动新花样

经验分享:为儿童设计移动应用界面的技巧

蓝蓝设计的小编

本文是爱奇艺无线UED负责人@晓生 在项目工作中学习到的知识,针对儿童的习惯,从 配色、线条、布局、声音等都作了图文分析,如果有设计师刚好在开发儿童类产品,这篇小结会是不错的学习经验唷。

@晓生 :最近处于项目需要,开始研究儿童产品的界面设计。在此之前,对儿童如何使用移动产品和如何设计知之甚少。优质的移动应用,为儿童带来乐趣的同时可以帮助儿童认知事物。越来越多的儿童使用移动设备,接触虚拟社区的时间甚至早于真实世界,如何设计儿童产品是一个非常值得深入研究的课题。

如果你钟情纯美的童真,那么这个教程可能非常适合你唷:
《PS教程:利用修饰技术将照片变为有趣的漫画》

本文简单地从视觉、界面层级关系和交互等方面分析儿童与成人界面之间的差异性。

颜色

儿童移动应用界面

细心的朋友会发现儿童家具明显有别于其他家具,最明显的特征就是颜色,这是因为儿童视力到8岁才能发育完全,对色彩的认知也是从简单的三原色开始,儿童偏向于喜欢高纯度和高明度的原色。


儿童移动应用界面

iPad版奇艺动画片的启动界面以品牌绿为主,配合多种红蓝黄等颜色,整体写实蓝天绿草地的真实意境,营造轻松有趣的氛围。


儿童移动应用界面

线条


儿童移动应用界面

 

超赞!25例交互体验极佳的网页设计

蓝蓝设计的小编

25 Modern Web / Interactive Websites Design Examples

本文介绍的案例均使用了的HTML/CSS 以及 JS 技术,从视差滚动到响应式设计,实现了良好的交互性,为用户提供更好的浏览体验。我们来快速阅览一下吧。

推荐阅读:
《网页设计新趋势!25例出众的响应式导航设计》
《让网站更生动!那些在网页中完美运用视频元素的案例》
《不要落伍!来和小伙伴一起学习响应式网页设计》

 

Melbourne Remote Control Tourist

的远程旅游体验,这个概念不错吧!

Melbourne Remote Control Tourist

Melbourne Remote Control Tourist

20个优秀的国外扁平化网页设计作品

蓝蓝设计的小编

扁平化设计为印刷品、网页和移动操作系统的设计带来了新的变化。扁平化设计最核心的地方就是放弃一切装饰效果,诸如阴影,透视,纹理,渐变等能做出3D效果的元素一概不用。所有元素的边界都干净利落,没有任何羽化,渐变,或者阴影。

更少的按钮和选项使得界面干净整齐,使用起来格外方便。可以将信息和事物的工作方式更加简单直接的展示出来,减少认知障碍的产生。越来越多的公司正在效仿,比如下面这些:

 

Who Wanna

10.flat websites

Very-Make


18.flat websites

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档