张铁汉在线视频

大家好

我是来自清华大学美术学院

信息艺术设计系的张铁汉

今年大三

在这里给大家分享一下

我自己在设计个人作品集网站的

一些经验和一些心得体会

希望我这些学习的过程

能够给大家带来一些启发

这里来讲一下我的作品集

这是我作品集的一个预览图

大家可以看到这个图片

这张图片其实就是我的一个最终的效果

我是如何把最后的这个我的设计

实现成这样的一个网页呢

进入我们的第一部分

叫做个人作品集的设计概述

首先我要给自己问两个问题

第一

我为什么要做这个作品集

这个问题其实很好回答

一个是个人作品的存放处

然后还有就是考虑到

我自己个人要出国申请留学

所以说这个作品是我一个

申请非常关键的一环

所以我在做这个作品集的时候

先把它做成了一个英文版

同时呢

这个作品集也可以用于找实习和找工作

第二

这个网页要包含有哪些内容

这是个作品集

毋庸置疑

所以我想要设想别人想要看到什么

什么是有用的

什么是多余的一些内容

于是我自己梳理了自己内容的框架和布局

先是要有我个人简明扼要的信息

还有简历的链接

还有就是最重要的部分作品集

如果别人看完我的作品对我感兴趣的话

可以快速联系

找到我的联系方式

所以最后一个部分是联系方式

大家可以看到左边这张图

是我的第一个设计稿

和我右边这张最终设计稿的对比

大家可以可以很明显的看出来

最初我没有把这个网站的内容

做得像一个作品集

我对内容梳理得不够好

网页显得比较杂

没有理清楚主要的内容

和次要内容之间的关系

比如我把最重要的作品集的部分

和兴趣爱好放在了同一个层级里

另外这个作品集的Icon非常不统一

导致这个页面没有很好的设计感

最终版的话

我精简了这个导航的内容

并且在背景照片的眼神

也引导着这个观看者

去了解到这个页面最重要的三个部分

就是关于我自己 作品集 还有联系我

讲完我作品集的概述

第二个部分

就是首页界面的设计与制作

第一部分我要设计整体的布局

整体的页面

我采用了长页面

并且用两张

一个系列的高清个人图片作为背景

让它体现我个性化的特点

丰富界面层次

在这个过程中

我去了一些国外的设计网站寻找灵感

比如说Pinterest和Behance

这张图就是我在Pinterest找到的

一个非常重要的灵感来源

其实我借鉴了它一些设计技巧

比如用不同的底色区分内容模块

居中排版和大面积留白

这样会显得比较正式

背景照片的体现也体现了这个作者的特点

接下来我就要设计一下我自己的内容

首先我要确定我要放什么内容

首页的内容一定要一目了然

而且要精简 抓重点

列出所需内容的单子

这是我做的下一步工作

并且我画了一些设计草图

在这里我给大家说一下我自己第二版的一个设计

这个设计就存在一个很大的问题

就是内容太不精简

放了很多本可以写在简历上的信息

比如说

这个skill这一部分

还有自己的出身啊学校啊

教育经历这些东西

其实没有必要直接放在网页上

它其实直接放在简历就可以

有一个简历的链接就就足够了

所以这个空间其实是特别浪费的

如果这么设计的话

会使这个作品集

本身作品集这个模块

在这个界面的比重下降了

那就使这个重点不是更突出

最终把我归纳了很多内容

可读性会更强

那接下来就是整理和制作素材

之前因为我列了一个单子

就是上面写了我自己需要什么物件

比如说自己需要一张个人的照片

还有自己的logo

接下来我就要为这些素材去做准备

比如我自己要拍一些

自己想要的想要的效果的照片

并且做一些后期的处理

然后自己设计自己的logo

这个logo不光是为网站

是作为网站的这个home键

还能让别人对我留下印象

还有就是

当然最重要的就是整理自己作品的素材

接下来就是字体以及色调的统一

我选用的字体是可读性比较强的

Century Gothic和Helvetica

字体本身没有太多的修饰

它本身

这样会显得这个字体会比较正式

而且比较易读

色彩我选择了以黑白为主的主题色

湖蓝色和紫色作为点缀色

然后就是具体的排版

在排版的过程中

其实我也学到了很多

我主要遵循了这三个排版法则

第一就是为了让信息能够快速的被读者获取

关键就在于区分字体的大小

颜色还有粗细

这就是清晰的信息层次

第二就是

行间距一定要合理

同一层信息要统一行间距

两个相对独立的信息之间

间距要大些

在同一层信息中

对齐的方式也要统一

所有的图片都要进行挑选和处理

然后画面尽可能统一

接下来给大家举一个例子

这两张图片

左边一张是我第二版的作品及部分

右边是我最终版

大家可以很明显的看出

左边这一版它每一个信息

每一块文字和图片

它们的间距都过于相似

内容排版没有层次

显得杂乱无章

第二就是图片未经处理

就直接摆放在了一起

显得不和谐

第三就是这个背景底图显得太花

对比度有点强

影响了前面字体的可读性

接下来这一部分

我主要会介绍一些ps的使用方法

因为这个网站我的制作工具是ps

ps是一个特别重要的一个软件

也是一个特别复杂的软件

它的功能特别特别多

但是其实作为一个设计师

未必一定要掌握所有的功能

实现自己想要的效果即可

所以要巧用一些功能

在制作这些网页的过程中

我其实发现了一些特别实用的ps小技巧

和大家分享一下

接下来我给大家展示一下这个ps

新建和参考线的用法

首先

新建一个文件

画布

这个画布的宽度呢是1920

那1920这个数字

其实是在这个所有的屏幕中都是非常适用的

所以说大家可以记住这个数字

以后如果做网页的话

基本上宽度都是1920

接下来这个网页就创建好了

这是一个什么都没有的画布

但是呢它的宽度

是和电脑的屏幕是完全吻合的

所以当这个图片放到百分之百的时候

它是可以正好和这个电脑侧面的

两边的屏幕正好贴合的

接下来我给大家展示一下如何使用这个标尺

首先是Command加R就可以调出这个标尺

大家可以看到侧面这这些标尺

然后选择这个选择工具

然后点击这个上面标尺的部分

然后拖动

大家会发现这个拖动的过程中

在中间 在拖到中间这一块

它会有一个吸附的效果

那其实这个吸附的效果

就是这个软件再告诉你

这根线是中轴线

所以大家在绘制中轴线的时候

就可以巧用这个方法

因为中轴线在这个设计中还是非常关键的

接下来给大家讲一下参考线的一些用法

还有一些其它的用法

它可以用来辅助对齐

比如说像这样的一个我的这个界面

它上面这些文字

其实是遵循的一个左对齐的一个规律的

那它们如何做到左对齐

其呢其实就是靠这个中轴线

我当时在制作的时候

是在这边先拉了一根中轴线

然后再把这些文字填完以后

会发现这些文字的侧面

它会自动的贴着这个中轴线

大家在移动这些文字的过程中

其实也会发现

这个中轴线本身就会让这个文字

对于这个中轴线有一个吸附的效果

所以它就自然而然地

贴附在了这个一条中轴线上

形成了一个左对齐的效果

那接下来给大家讲一下这个投影

PS里头这个投影其实特别常用

大家也可以看到苹果系统这个框

它的这个选项框

它本身就有一个投影的效果

就可以发现这个东西和后面的空间

和后面的这些菜单

可以很好地区分开来

让前面的这个选项框能够特别的显眼

而且有立体感

那这个效果是如何在ps上实现的呢

其实也是这个这个效果

也是非常常用

也不是那么的困难

可以给大家展示一下这个小技巧

首先我给大家先画一个方框

这是一个矩形

然后它本身是一个平面的矩形

它没有任何的投影

那如何在它上面加投影呢

首先你双击

双击这个图层

双击这个图层

然后会出现一个图层样式这个选项

那图层样式其实里面有特别特别多的功能

大家可以看侧面有特别多的功能

我们选择投影这个功能

大家会发现在这个物体上

就会出现了一个阴影

大家可以随意调整这个角度

这个光照的角度是可以调整的

然后也可以改变

也可以不使用全局光

全局光的意思就是说

这个整张画布里头所有的投影

都是朝这个光的方向反方向走的

那我们不使用全局光的话

它就是独立的一个投影光影关系

大家可以看到这个还有其它的选项可以调

比如说距离 拓展

还有它的大小

一般情况下我会把大小调的稍微大一点

这样会显得自然一些

这样可以

距离的话

稍微也调一调

不透明度调的低一点

这样显得自然一些

做一些微调

好的

现在这样的话就会

这样的话

这个投影的效果就做出来

之后再给大家讲一个

另一种图层样式常用的用法

首先也是我们选定

这个比如说我选定这个图片

大家会发现

我如果把这个图层样式给取消的话

它的对比度就变变强了

而且变亮了

但如果我们要使用原来调整它亮度的这些去调整

不是说不可以

但是呢

这个亮度的蒙版

它本身会覆盖下面所有的图层

这样子的话

其实有的时候我们不需要

让下面的图层也受这个这个这个蒙版的影响

那这个时候我们就可以使用一个技巧

叫图层样式

我们不要使用这个

我先把这个这个删掉

然后我现在的目的是

想要调整这个背景图的这个对比度

首先选择图层样式

也是双击

然后点击颜色叠加

大家会发现颜色

它颜色就突然就变深了

它这边有很多混合模式

但一般情况下我们选择正常

不透明度有很多

不透明度其实就决定了什么

决定了这个后面这个选所选的这个黑色

它本身覆盖在这图片上面

然后呢它的这个不透明度

如果越高的话

那这个颜色就越黑

那我们把这个不透明度调到一个适中的位置

这样的话

它背景图就会显得比较统一一些

而且能把前面的这些字啊

这些logo什么的显得更加明显一点

对比度更强一些

最后我来总结一下我的设计

这个设计其实

在这个过程中我经历的特别多

它也是不断的更迭

大家可以从看到这张图

从左到右一直在变化

其实就是不断更迭

它还会更好

我认为其实即使是我现在这个网页

它还是也是有进步空间的

比如下一步我可能还会想改进一下

导航的方式

然后包括一些动效的方式

一些交互的 交互的一些方式

还有调整整体

具体在屏幕上显示的时候

的一些视觉元素大小

毕竟这些是在PS上为主

就是自己做的时候还是放在PS上

它如果真正做成网站的话

它会是什么样

一定要在浏览器下面进行实验

然后一些字体大小与视觉元素的大小

还有间距还有一些细节的话

也要再做一些斟酌

保持清醒的头脑

时刻清楚自己要的是什么

设计的目的是什么

发现问题要敢于推翻重做

不要被技术束缚了自己

但适当的了解一些技术的限制

也很有必要

最好的效果不一定是视觉上最酷炫的

而是最适合设计目的和满足用户需要的

做的过程中时刻听取别人的意见

从用户的角度出发

改进现有的设计