PS字体设计中8种常用创意方法;2018.12.12

汉字,凝聚着独特而深厚的中华之美,是中华文化璀璨绚丽的瑰宝; 在进行广告的设计,对汉字进行创意,往往也能达到比较惊艳的效果。本篇笔记介绍一些常用的字体设计创意方法!

1、【替换法】替换法是在统一形态的文字元素加入另类不同的图形元素或文字元素;其本质是根据文字的内容意思,用某一形象替代字体的某个部分或某一笔画,这些形象或写实或夸张;将文字的局部替换,是文字的内涵外露,在形象和感官上都增加了一定的艺术感染力

字体1.jpg

2、【共用法】“笔画共用”是文字图形化创意设计中广泛运用的形式;文字是一种视觉图形,它的线条有着强烈的构成性,可以从单纯的构成角度来看到笔画之间的异同,寻找笔画之间的内在联系,找到他们可以共同利用的条件,把它提取出来合并为一

字体2.jpg

3、【分解重构法】分解重构法是将熟悉的文字或图形打散后,通过不同的角度审视并重新组合处理,主要目的是破坏其基本规律并寻求新的设计生命;把文字图形化运用到设计中,能使作品具有强烈的视觉冲击力,更便于公众对设计者的作品主题的认识、理解与记忆

字体3.jpg

4、【断肢法】断肢法是把一些封合包围的字,适当的断开一口出来 ,或把左边断一截,或右边去一截,体现出一些设计感;但是使用这种方法要注意一点:要在能识别的情况下适当断肢

字体4.jpg

5、【上下拉长法】这种方法是把字变细,然后上下拉长,营造出类似条形码的感觉,这样的做法可以增强艺术感和设计感

字体5.jpg

6、【画龙点睛法(或一点拉长法)】其实这也算是拉长法的一种,找到标志中的一个点或线作为重点把他拉长,使得处理好的字体,再加一笔更是画龙点睛之作

字体6.jpg

7、【洋为中用法】使用这种方法首先到字库里找几个特别点的英文字体,然后找出这些字体的笔触和特征,最后就可以把这些特征运用到中文字体设计中,体现出不一样的美感

字体7.jpg

8、【结构转变法】这种方法可以说是替代法的一种,就是把竖或横线或折换成其他比划,这样的创意方法虽然可以营造艺术感,但是字体的识别度会大大降低

字体8.jpg

总之不管用哪种方法去设计创意字体,都要在能识别的情况下去创意设计!

UI让产品火爆起来的6个设计技巧;2018.12.11

有些小众产品APP界面惊艳、功能强大、定位精准,但为什么就是火不起来呢;很有可能是设计得不够人性化,或者说,没把用户当人看。本篇笔记介绍了6个产品设计的技巧!

1、抓住兴趣点;说话太过死板可能难得到任何好处,有时适当挑选用词能达超出预期的效果

举例:

(错误对话)

问:平时有什么兴趣爱好啊?
答:各种运动
问:怎么平衡运动与工作?

(正确对话)

比如面试的时候:

问:平时有什么兴趣爱好啊?
答:马拉松
问:看来意志力不错

比如长辈的时候:

问:平时有什么兴趣爱好啊?
答:晨跑
问:年轻人就要活力

比如朋友的时候:

问:平时有什么兴趣爱好啊?
答:羽毛球
问:下次一起啊

前者像是传统内容平台,在首页铺出各种热门内容,以展示自己的体量和丰富性;后者像是新型内容平台,也许资源数量有限,但是因为能抓住用户的兴趣点,反而更容易获得好感

腾讯、抖音.jpg

比如腾讯视频将热门内容排列出来,而抖音根据用户喜好推荐可能感兴趣的内容

2、提供有效帮助;过于执着于展示自己可能毫无意义,为他人考虑才能对话愉快地进行下去

举例:

(错误对话)

问:一起打羽毛球吧?
答:我水平很高的,高中是特长生,上次有个哥们自不量力要和我比,结    果一个球都没赢,哈哈哈......
问:我水平还是算了吧

(正确对话)

问:一起打羽毛球吧?
答:行啊,我知道一个很好的场地,你哪天有空我来定
问:好啊

设计产品也是这样,与其做一个高大上的首页,还不如把有用的信息和入口最高效地传达给用户

滴滴、优步.jpg

比如滴滴的官网放了一个酷炫的视频,而优步的官网向用户介绍功能和使用途径

3、不感兴趣就不要强推;将自己的标准强加于人未必有结果,暂时的妥协可能换取到长远的利益

举例:

(错误对话)

问:这周末我来定那个我常去的球场吧
答:可是这次时间不够,要不先去附近那一家方便些?
问:要去肯定就去好的,我保证你不会失望,这个不用将就!
答:我担心时间不够,不然下次再去吧

(正确对话)

问:这周末我来定那个我常去的球场吧
答:可是这次时间不够,要不先去附近那一家方便些?
问:好啊,那你下次一定陪我去远的那家好吗?
答:没问题

没有什么产品是完美,如果忽视用户的建议,负面情绪累积后可能引发流失;如果在用户表示负面情绪时能立即表现良好态度并做出改变,反而能获得用户的喜欢

网易、头条.jpg

比如网易允许用户选择减少制定类型广告,今日头条可以屏蔽制定广告

4、要付出也要索取;单方面的付出效果未必好,有来有往的才能形成长久互动

举例:

(错误对话)

问:我有一对专业球拍,球也有,你尽管来就好
答:OK

(正确对话)

问:我有一对专业球拍,球也有,你尽管来就好
答:好啊,我今晚就下单,什么品牌比较好呢?

心理学研究帮过一次忙的朋友很有可能帮第二次,而一直给予帮助的人可能导致对方形成习惯;如果一个产品只是单方面服务用户内容,而不吸引用户主动提供信息,就很难形成良好的互动社区,用户的粘着性也不高

爱奇艺、bibi.jpg

比如爱奇艺这种内容视频网站与Bibili这种社区类的视频网站最大的差异在于产品与用户间的良好互动

5、失望是长久性的;做不到的事情如果不提前告知,会引起更大的反感

举例:

(错误对话)

问:不好意思,我今天紧急加班,不能去打羽毛球了
答:怎么我都到球场了才说

(正确对话)

问:不好意思,我今天紧急加班,不能去打羽毛球了
答:还好你告诉我,正打算出门呢

一旦产品给用户不诚实的印象,就会造成长久的口碑问题;大厂可以承受,小厂就未必了

腾讯视频.jpg

比如腾讯视频在用户付费去广告之后,依旧贴上不同类型的广告

6、信赖也是长久性的;刚认识的朋友,哪怕一点问题也可能形成不好印象;多年老友,有什么问题都能好好解决

举例:

(错误对话)

问:跟你第一次打羽毛球就忘记带球拍了,不好意思
答:这你都可以忘记....

(正确对话)

问:跟你打了三年的羽毛球了,这还是第一次忘带球拍
答:我就知道有这么一天...

老用户会因为情怀、迁移成本等原因对产品更加宽容一些,这样会导致一些存活时间较久的产品自我感觉过于良好,觉得不需要更新换代;这种状态犹如温水煮青蛙,直到发现来不及的那一天

酷我.jpg

比如上面酷我评论里的老用户只需要基础功能就可以满足,而下面的新用户却可能因为任何细节问题给差评

【总结】

总是用太过严谨的逻辑思考产品,可能会进入死胡同;偶尔尝试着把用户当做面前可以对话的人,会有不一样的发现

PS模拟制作雨天玻璃窗手写字效;2018.12.10

1、选择合适的两张图片(一张城市夜景、一张雨天),先将城市背景图层拖进PS、再将玻璃图层拖进置入PS [Alt+F+L置入],调整好尺寸、比例,玻璃图层置于城市图层之下

2、城市图层选择叠加 [Shift+Alt+O叠加]

3、城市图层进行修改:滤镜 >模糊 >高斯模糊(半径1.1像素)

4、玻璃图层进行修改:按实际情况调整亮度/对比度(亮度-40、对比度-50)、曝光度(曝光度+0.61、位移-0.0412、灰度系数校正1.03),让玻璃显得更加通透

5、城市图层进行修改:不透明度降低为90%,这一步是为了让玻璃显得更加通透

6、打字:Hello ,用文字工具 [T文字]

7、字体图层进行液化:滤镜 >液化 [Shift+Ctrl+X液化];将字体底部做延长处理,显得更下水珠往下流的感觉

8、字体图层进行波纹修改:滤镜 >扭曲 >波纹(数量100%)

9、文字图层选择叠加 [Shift+Alt+O叠加]

10、拷贝复制玻璃图层,选择污点修复画笔工具 >修复画笔工具 [J],进行文字上的水珠处理,使文字更加光滑

11、最后,合并 [Ctrl+Shift+E合并可见图层],保存[Ctrl+S保存当前图像]

【卖家秀】:

城市夜景.教.png

雨天玻璃.教.png

雨天城市夜景玻璃文字.教.jpg

【买家秀】

城市夜景.学.jpg

雨天玻璃.学.jpg

雨天城市夜景玻璃文字.成品.png

UI-Banner设计的常用3种构图形式;2018.12.09

最常用的3种构图形式分别是对称式构图、局中构图、左右构图。本篇笔记介绍为什么 Banner 的构图形式趋向于这三种构图!

【最常见的三种构图形式】

常见的三种构图形式有:对称式构图、居中式构图、左右构图;可以观察一些手机线上 app 中的 banner 设计,大多数采用这三种构图形式

【Banner 区域变小】

1、导致构图形式可选范围缩小的最直接原因就是:banner区域变小,由于产品结构的变化,业务的成熟与增多,首页第一屏需要呈现更多的“业务”,所以我们不得到不缩小“Banner”的面积,以节省出更大的空间来服务其他业务的使用

2、Banner 设计尺寸由原来通用的 4:3 的比例大小逐渐缩小至 5:3 或 5:4 的比例尺寸大小(均四舍五入选取近似值)

3、以手机APP线上产品为例进行分析测量,如美团5:3、转转5:3、淘宝5:3、网易云音乐5:4的 Banner 比例,均采用四舍五入取近似值的方式,可以发现 Banner 区域不同程度的缩小,在页面中所占的比例较少,节省出更多的空间以便其他业务模块的使用

4、[Banner变小的主要两点原因]

4.1、首先是产品结构的日益成熟,业务增多或者结构变更,需要在首页第一屏展示更多内容

4.2、视觉上有助于保持页面平衡,缩小 Banner 有效的避免了头重脚轻的情况发生
【自身优势】

1、构图简单;构图简单是这三种构图的最大优点

1.1、对称式构图:通过对画面的平均分割能够保证画面的平衡,对称式构图给人简洁、有力、稳固的视觉感受

1.2、居中式构图:居中式构图是将主体放置画面的中心进行构图;这种构图方式的最大优点就在于主体突出、明确,而且画面容易取得左右平衡的效果

1.3、左右式构图:左右构图一般参考黄金比例分割线的原理,并根据实际状况进行调整,将文字标题元素和主体物按照比例分割进行位置安排
2、空间利用率高;这三种构图形式对空间的利用比较高,无论是对称式构图、居中式构图还是左右式构图都采用了X(水平)、Y(垂直)轴的直线排布,尽量避免了斜线线或曲线构图的方式

2.1、直线排布可以有效的节省空间,避免产生多余的空间缝隙;而斜线排布或者曲线排布无可避免的会产生多余的空间缝隙,无法充分使用
3、能够快速复用;构图简单,易于修改,我们通过修改主体物和标题信息,可以快速复用到其他运营活动中,大大节省了设计成本,提高工作效率

【为什么其它构图不合适】

1、空间小,不适合结构复杂的构图

1.1、由于空间小,在排版的时候我们更多的要考虑到用户对标题信息的识别度,采用直线排布的构图可以节省空间,能够尽可能的放大字体;如果采用斜线或曲线排布的构图会产生多余的空间缝隙,会导致标题文字压缩减小,降低信息识别度
1.2、例如对斜线构图和曲线构图,在小面积的情况下很难适用,因为我们需要让用户尽可能的获取信息,所以我们需要将信息在 Banner 中尽可能放大,这样一来很难形成对斜线和曲线动势,所以不适用于这类对空间要求成本高的构图
2、不符合用户的阅读习惯

2.1、由于 Banner 面积小,选用直线排布符合用户自左到右、自上而下的阅读习惯,能够帮助用户快速获得信息。而曲线排布和斜线排布需要用户耗费一定的精力去识别信息,学习成本高,不适合小面积的构图
【总结】

1、由于产品结构体系的日益成熟,构图形式也更加追求实际效用,最终筛选出三种最为实用的构图的构图形式,分别是对称式构图、局中构图、左右构图

2、导致 Banner 构图形式由多变少的主要原因:首页结构变换,Banner区域变小;三种构图的自身优势,构图结构简单、空间利用率高、能够快速复用

3、其它构图不合适的主要原因:构体结构复杂,不够简单;Banner 空间小,不适合斜线和曲线排布

更改Hexo博客主题;2018.12.08

【创建主题】

1、首先在浏览器https://hexo.io/themes/进入博客官方主题界面

2、随便选择一个自己喜欢的主题,点进去;记住这个主题的名字叫spfk,点击去之后会进入这个主题拥有者的博客,就能展此主题的样式风格

3、然后找到博主的github仓库,点击进入仓库;在Repositories(仓库)的搜索栏中搜索刚才那个主题的名字spfk

4、点进去这篇spfk博客,在Clone or download将它的下载地址复制下来:https://github.com/luuman/hexo-theme-spfk.git

5、在_config.yml文件夹打开Git Bash Here输入以下命令下载主题:

$ git clone https://github.com/luuman/hexo-theme-spfk.git themes/spfk 
注:($ git clone代码,https://github.com/luuman/hexo-theme-spfk.git网址,themes/spfk代码)

6、待下载完之后会在themes目录下生成一个名为spfk文件(就是D盘 >hexo >qianchenblog >themes >spfk的文件里)

7、更改一下hexo工程目录下的配置文件_config.yml,主题名修改一下(就是D盘 >hexo >qianchenblog >_config.yml里,用记事本打开,把theme后面改成spfk,保存)即可:

#Extensions
##Plugins: https://hexo.io/plugins/
##Themes: https://hexo.io/themes/
theme: spfk

8、清空一下public缓存,输入命令:

$ hexo clean

9、重新生成datebase,输入命令:

$ hexo g

10、打开本地仓库服务,观察主题是否发生变化,输入命令:

$ hexo s

注:以上三个命令完成后,在_config.yml文件用Git Bash Here输入命令:$ hexo server 启动!

浏览器打开本地仓库http://localhost:4000/,就会发现本地仓库已经变为自己刚刚更改的主题了

11、最后上传到远程仓库,输入命令:

$ hexo d

【更改主题内容】

改博客名字,就是D盘 >hexo >qianchenblog >_config.yml文件里,用记事本打开,把author后面修改成qqccjy,保存即可:

# Site
title: 我的博客
subtitle:
description:
keywords:
author: qqccjy
language:
timezone:

改博客头像,先到网上搜索找一个跟原头像一样的JPG文件的头像,然后保存到桌面上,把找到的头像重命名为和以前头像一样的名称head,最后把这个头像拖到D盘 >hexo >qianchenblog >themes >spfk >source >img就可以了

改博客主页信息资料,就是D盘 >hexo >qianchenblog >themes >spfk >_config.yml文件里,用Edit with Notepad++打开,修改,保存即可。(添加#号是停止取消)

注:要下载Notepad++软件;改好了要在_config.yml文件用Git Bash Here输入命令:$ hexo server 启动,再到博客本地预览看是否成功!

Hexo博客搭建;2018.12.07

Hexo是一个基于Node.js的静态博客程序,可以方便的生成静态网页托管在Github和Heroku上。并且有很多人为其制作了很多优秀的主题(theme),你可以根据自己的喜好进行设置

【准备环境】

1、Git下载、解压安装,https://git-scm.com/(32位)

2、Node.js下载、解压安装,https://nodejs.org/en/(32位)

3、安装Hexo,在命令行(即Git Bash)运行输入命令:

$ npm install -g hexo-cli(安装)

4、初始化Hexo,选择创建Hexo文件夹,在命令行(即Git Bash)依次运行输入以下命令即可:

$ hexo init qianchen(hexo init初始化网站;qianchen自己命名的文件夹)

$ cd qianchen(cd命令用来切换工作目录、进入用户主目录;qianchen自己命名的文件夹)

$ npm install(安装)

新建完成后,在路径下,会产生这些文件和文件夹:

.

├── _config.yml

├── package.json

├── scaffolds

├── source

|   ├── _drafts

|   └── _posts

└── themes

5、启动服务器,在路径下,命令行(即Git Bash)输入以下命令,运行即可:

$hexo server(启动本地服务器)

6、浏览器访问网址: http://localhost:4000/

注意:快捷键Ctrl+C是终止,每个命令先终止再执行

这样,自己的Hexo博客已经搭建在本地。

【实施方案】

方案:GithubPages

1、创建Github账号

2、创建仓库, 仓库名为:qqccjy.github.io

3、将本地Hexo博客推送到GithubPages

3.1、安装hexo-deployer-git插件。在命令行(即Git Bash)运行以下命令即可:

$ npm install hexo-deployer-git --save(npm install安装;hexo-deployer-git --save部署网站)

3.2、添加SSH key
创建一个 SSH key 。在命令行(即Git Bash)输入以下命令, 回车三下(或回车三下以上代码显示内容)即可:

$ ssh-keygen -t rsa -C 18552371475@163.com(若代码显示后面有(y/n)?,要输入y)

添加到 github。 复制密钥文件内容[路径形如C:\Users\Administrator.ssh\id_rsa.pub(就是在C盘 >用户 > Administrator> ssh >id_rsa.pub里面)],粘贴到New SSH Key即可。

测试是否添加成功。在命令行(即Git Bash)依次输入以下命令,返回“You’ve successfully authenticated”即成功:

$ ssh -T git@github.com

$ yes(yes在前面ssh -T git@github.com命令显示出来提示就可以接着输入 ; 若直接显示“You've successfully authenticated”且成功,可不输yes)

3.3、 修改_config.yml[在站点目录下(就是D盘 >hexo >qianchenblog >_config.yml的文件里,打开)]。文件末尾修改为:

#Deployment

##Docs:http://hexo.io/docs/deployment.html

deploy:

  type: git

  repo: git@github.com:qqccjy/qqccjy.github.io.git

  branch: master
注意:上面仓库地址写ssh地址,不写http地址。

3.4、 推送到GithubPages。在命令行(即Git Bash)依次输入以下命令, 返回INFO Deploy done: git就成功推送:

$ hexo g(生成)

$ hexo d(部署;可与hexo g合并为 hexo d -g)

4、等待1分钟左右,浏览器访问网址: https://qqccjy.github.io

现在,您的Hexo博客已经搭建在GithubPages, 域名为https://qqccjy.github.io

【博客发布】

编写之前先到_config.yml文件夹右击Git Bash Here开启,输入命令$ hexo server启动;然后编写 > 发布;最后再到_config.yml文件夹右击Git Bash Here开启,输入命令$ hexo d -g

【博客上传添加图片】

首选打开上传添加图片用的网站https://sm.ms/;然后点击Browse...把要添加的图片拖到Drag & drop files here …大空格里去;接着点击Upload上传图片;最后复制Markdown下面的链接、再粘贴到正在编写的博客笔记位置即可完成

博客官方网站:https://hexo.io/zh-cn/

编写博客:http://localhost:4000/admin/#/

博客本地预览:http://localhost:4000/

我的博客:https://qqccjy.github.io/

博客上传添加图片网站:https://sm.ms/

,