header_v0.7.31

如何快速制作线上作品集

220天前发布

原创文章 / 网页 / 教程
Phaississauda 原创,如需商业用途或转载请与Phaississauda联系,谢谢配合。

元宵节过完这个年也就过完了,需要换工作的朋友也需要收收心好好准备个人简历和作品集了。

刚刚看了周士炎ETHAN_CHOU《设计师如何制作简历,人有趣比作品更重要(老周说-2)》的一篇关于如何制作简历的文章,感觉很受用!正好我也准备换工作,这方面需要多看多思考一下。

当看到这张照片时...

ac7358a055eea8012060c84dcb24.jpg卧槽,这个设计师也长的太帅了吧...

还有那个显眼的纹身,包括眼镜、手表、耳钉...

仿佛是想让我们忽略掉他穿的是短袖╮(๑•́ ₃•̀๑)╭

(。◕‿◕。)因为只有短袖才可以看见那个酷酷的纹身呀!


说了这么多,其实也就是想说:

不是每个设计师都跟大神一样帅

不是每个设计师都有一个华人狂拽炫酷X炸天的、长得最像田亮的摄影大师:JOE

不是每个设计师都会为了拍一张作为简历的照片而大动干戈

说不定你现在还穿着羽绒服了,翻开衣柜最底下一层才找到夏天穿的短袖,展开看还皱巴巴的(◑‿◐)

所以大神最后总结了:

“设计师详情页”,按不同个性和风格的设计师自己发挥,但,用心和职业,看的人都懂。


至于大神总结的第三点,就是我今天想说的内容:

简单有序的个人作品合集(简单-站酷链接就好,有序-最好在个人页面展示里分序排列)

当然人家是大神,放站酷链接自不必多说

e87c58a05aa9a8012060c88fb520.jpg

但是当你粉丝和人气并不高的时候,或者你不太想放站酷想要一个更个性的个人作品链接,例如以下:

1dde58a05c05a801219c77863595.jpgDenys Nevozhai – Product Designer网站链接:http://dnevozhai.com/


又或者是站酷性冷淡大师CrissSamson的个人网站:http://crisssamson.com/

fa7258a05d0ca8012060c89b462a.jpg

当然还有很多,我就不列出了。

这种的个人网站一般是自主设计和开发的,全球唯一。

设计、开发、时间和金钱成本肯定会很高,不适合现在急于找工作的我们,以后自己有兴趣倒可以慢慢研究,制作一个个人网站还是蛮有意思的。

我要说的这个展示作品的网站,在作品图片都整理好的情况下,完成上线只需要10分钟。

效果如下:http://www.ban-bai.com/works/

805b58a060dda8012060c8fc3b9f.jpg

最后我会放上网站源码,大家自行下载修改。

下面简单说一下修改方法,懂前端的自行忽略。

  1. 左边顶部信息找到相应的代码,自己修改

    74c958a06260a8012060c8bd5d5f.jpg

2.左边底部链接可以自行链上自己的站酷、UI中国、花瓣等等...

至于换链接图标,需去http://fontawesome.io找对应的代码换上,格式如下:

<i class="fa fa-address-book-o" aria-hidden="true"></i>

有些没有的图标,你可以用阿里的iconfont

3.更换右边作品图片和文字信息,只需要替换以下两个文件夹的图片即可

15d958a06406a801219c775dbdc5.jpg

fulls即打开后的大图

thumbs即预览图,建议尺寸切成相同大小

avatar就是头像啦

bg你要是有更合适的可以自行更换,反正这张我是挑了好久才留下来的(往下滑动页面,人会有上楼梯的感觉,非常赞)

你都更改好以后,就可以打开index.html预览看一下还有没有什么问题。


最后问题来啦,你都做完之后,怎么上线了?

  1. 你要本身就是站长,就直接上传到自己的服务器吧,记得弄个好记的域名,面试的时候可以当场打开;

  2. 你要没有服务器,我可以暂时提供给你,把制作好的网站打个包发给我,命名最好是自己的名字,只限于10M以下,大了不仅影响打开速度,而且我上传也比较慢,我说的10分钟可就不敢保证了哦!哈哈,等我上传完以后,你的作品链接就是这样:http://www.ban-bai.com/Lijun/


忘记说一点,这个网站也适用于移动端,效果如下:

cc4a58a066e3a8012060c883e5d1.jpg


第一次写文章,请大家不要吝惜给我点赞哦!

9b6f58a067c4a801219c77ffe2b8.jpg

18

    文章信息

    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功