Marco Nie - 2019年12月

创建 Templates 模版 in Photoshop

2019-12-23T23:17:00+08:00

在处理图片时，有时候可能需要给批量图片处理成同一效果，例如给台历上的预留处换上不同的照片。这一过程可以通过建立一个模版文件来作为基础，使用时只需要加入不同图片进行微调即可。首先建立略大于相框部分的选区，建立 50% 灰的图层，转换为智能图层 smart object：将相框部分选出来，可以使用钢笔工具精确选择，然后给50%灰图层建立蒙版，混合模式设置为 multiply：这样基本混合到背景了，为了更好的处理高光阴影部分，将背景图层新建2个，ctrl shift U 去掉饱和度，放到最上方，分别处理高光和阴影。首先将一个图层混合模式设置为 multiply，蒙版使用 50% 灰的蒙版，画框阴影部分更加明显，可以使用曲线图层加强阴影部分，注意曲线图层设置为只影响下面的阴影图层：类似的方法，将另一个图层混合模式设置为 screen，画框亮部更加明亮，可以新建曲线图层调节亮度到合适：可以将亮部暗部的处理图层建立组，给组一个画框的蒙版就行了。将这个项目文件保存为 .psdt 文件，这样就建立了一个模版：下次打开这个文件，会直接以复制的方式打开一个新文件而不会影响愿模版文件，想要更换新图片到模版，打开模版后双击 50% 灰的 smart objet，将图片拖入图层：确认后，可以查看效果，根据情况可以把阴影高光图层进行不透明度或曲线的微调：

Linux 自动删除指定天数前文件

2019-12-20T10:15:00+08:00

服务器上搭建了个云盘，有个 temp 目录存放一些临时文件，想要设定指定天数后自动删除，可以使用 Linux 脚本实现。用到的命令：find mtime crontab基本思路是使用 find 命令筛选符合条件的文件或文件夹，使用 crontab 创建定时任务。find 的详细用法：https://niekun.net/index.php/archives/543.htmlcrontab 的详细用法：https://niekun.net/index.php/archives/461.html指定删除 /temp 目录下超过 3 天的文件，新建脚本 timerRemove.sh 内容如下：LOCALDIR="/temp/" LOCALAGE="3" cd ${LOCALDIR} || exit find ${LOCALDIR}* -mtime +${LOCALAGE} -exec rm -rf {} \;在 crontab 配置文件内修改如下，每 2 小时执行一次脚本：SHELL=/bin/bash PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin MAILTO=root HOME=/root 0 */2 * * * root bash /path/to/timerRemove.sh

替换背景时修复主体边沿亮条 in Photoshop

2019-12-19T10:06:00+08:00

在修图中，经常需要将主体图片换一个背景，在提取主体后，会发现主体边沿部分会有一部分和原背景颜色过度部分，在和新背景融合后不协调。此处介绍两种处理方法。第一种方法适合替换背景和原背景差别较大情况，第二种方法适合替换背景和原背景属于同一色系的情况。处理的主体是树，换上不同的天空背景。blend mode 方法首先使用 color range 工具选出背景，此图背景蓝色部分上下两部分区别较大，可以通过两次选择提取出来，点击 select - color range：先将 preview 设置为 none，fuzziness 设为最小，开始拾取背景，使用加号工具增加区域:点击 invert 反选选取，preview 设置为 black，调节 fuzziness 使选取更加自然，注意保留树枝细节不要丢失：点击图层蒙版，可以看到图像下部的背景还需要去除，按住 shift 点击图层蒙版暂时屏蔽蒙版，再次使用 select color 选出多余部分图像，这时候取消 invert 选项：按住 shift 键点击激活蒙版，使用笔刷工具将选出部分涂黑：开始处理蒙版细节，新建黑色 solid color 图层，放大图片可以看到，树的周围有灰色的色块，使用画笔工具，混合模式改为 overlay 使用黑色画笔涂抹需要处理的地方：这样就将主体提取出来了，下面开始添加背景。放上背景图片，可以看到数的边沿明显有亮环，将树的混合模式改为 multiply：效果好了很多，但树的阴影在右边，但背景的光源在右边，所以先转换背景左右，使光源和阴影匹配：观察树干上显现的的背景图像，需要进行处理，可以将树干上的背景进行模糊处理，复制背景图层，按住 CTRL 点击树的蒙版提取选区，点击背景图层新建蒙版，点击蒙版和图层中间的链接符，这样对图层进行修改不会移动蒙版了，将图层进行高斯模糊：树干上的背景已经很柔和了。树的亮度相比较背景还是有些亮，复制树干图层，适当降低不透明度：增加树干细节，再次复制树干图层，混合模式改为 color dodge，降低 fill 查看效果：match color 方法和上面同样的方法选出树干主体图像，添加入背景图片，可以看到背景也是蓝色天空，但树的周围还是有明显亮环：此方法通过调节背景的颜色来匹配原始背景的颜色来消除亮环。首先关闭树的蒙版，选出原始背景的一块复制到新图层备用：新建曲线图层，放到新背景图层上方，锁定为只影响背景图层，开始使用手形工具调节亮度和rgb曲线使背景图层颜色和原背景尽量接近：不需要调节得很精确，你会发现边缘的亮条没有了：原始图像背景下部有白色的过度，可以新建 gradient 图层进行匹配，颜色为左边白色不透明度100%，右侧不透明度0%，拖动图层位置调节到合适：

TypechoAwesome theme for Typecho

2019-12-19T09:55:00+08:00

此主题是我在 typecho 原版默认主题基础上做了移动端的优化处理，适合喜欢简洁风格的人使用。typecho 是一款轻量的博客系统，风格很简洁，相比较 wordpress 占用资源很少，所以我选择了 typecho。官网：http://typecho.org/GitHub 主页：https://github.com/typecho/typecho关于 typecho 的安装参考我的教程：https://niekun.net/index.php/archives/6.html下载主题此主题是基于 typecho 最新 GitHub master 分支制作的，不保证向下兼容，请升级到最新源码后在使用此主题，升级教程参考：https://niekun.net/index.php/archives/21.htmlGitHub 主页：https://github.com/nie11kun/TypechoAwesomerelease 页面：https://github.com/nie11kun/TypechoAwesome/releases首先从 release 页面下载最新版本的源码到 typecho themes 目录：wget -O /tmp/TypechoAwesome.tar.gz https://github.com/nie11kun/TypechoAwesome/archive/V1.0.1.tar.gz tar -zxvf /tmp/TypechoAwesome.tar.gz -C /path/to/typecho/usr/themes/ 进网站后台，选择控制台 - 外观：找到 TypechoAwesome 点击启用：然后就可以返回网站查看效果了。桌面端访问效果：移动端访问效果：移动端导航栏内容：

使用 color range 提取头发细节 in Photoshop

2019-12-18T10:09:00+08:00

此方式适用于背景颜色单一的情况，或者配合选区工具使用在背景稍微复杂的情况，或者使用背景擦除工具。背景擦除工具使用教程参考：https://niekun.net/index.php/archives/719.html打开图片，选择 select - color range，内部选项中：select 选择 sample color，selection preview 为 none 这样可以清楚看到所选区域，localized color cluster不要选中：先将 fuzziness 将为 0，选取图片中的背景颜色，使用带加号的拾取工具将整个背景拾取出来。点击 invert，selection preview 选择 white，可以看到提取的主体；放大图片，调整 fuzziness 使头发边沿提取出来，确认后，点击图层蒙版：可以看到主题已经提取出来了，但中间有些地方需要恢复，按住 alt 键点击蒙版，开始修复蒙版：使用画笔工具开始将需要恢复的地方用白色画笔涂抹，这里说一个技巧，画笔的混合模式设置为 overlay 可以保护黑色地方不被影响，不确定黑白的地方按住 alt 键点击蒙版恢复图像查看原始细节：完成后效果：可以注意到头发边沿有之前背景的红色，可以通过新建颜色图层来去除：新建空白图层，混合模式改为 color，按住 alt 键将图层锁定只影响到下方图层：使用拾色工具(快捷键 I)拾取正常颜色的头发，设置为 3×3，current and below 模式：使用画笔工具涂抹需要恢复颜色的头发，注意不同地方的头发要再次进行拾取颜色操作，同样的方法处理衣服和皮肤边沿：对于一些新背景颜色和之前背景反差过大的时候，可以进行以下操作将选取柔化处理，更加自然：选中双击蒙版，选择 select and mask：view 选择第一个：output setting 里选中 decontaminate，可以发现主题和背景过度更加自然了：以上就是使用 color range 提取图像的过程。这里提供一个头发笔刷，在提取不完善或者提起困难的情况下，使用头发笔刷来手动画出边沿头发细节来：PiXimperfect Hair Brushes.zip导入笔刷：选择笔刷工具，上方菜单栏选择 import brushes：

HTML 特殊字符转义符号实体

2019-12-17T14:25:00+08:00

一些特殊符号需要显示在 HTML 上时，需要使用符号实体来表示：常用符号转义符号含义转义实体转义号空格 <小于号<<>大于号>>&和&&"双引号""'单引号''¢分¢¢£磅££¥元¥¥€欧元€€©版权©©®注册商标®®更多符号w3 教程：https://www.w3schools.com/HTML/html_entities.asp希腊字符：https://www.w3schools.com/charsets/ref_utf_greek.asp货币字符：https://www.w3schools.com/charsets/ref_utf_currency.asp箭头符号：https://www.w3schools.com/charsets/ref_utf_arrows.asp数学符号：https://www.w3schools.com/charsets/ref_utf_math.asp更多杂类：https://www.w3schools.com/charsets/ref_utf_symbols.asp

CSS element+element Selector 的使用

2019-12-17T09:37:00+08:00

选择特定元素内部的某个元素，需要使用加号 + 来进行选择。

Welcome to My Homepage

My name is Donald

I live in Duckburg.

My best friend is Mickey.

I will not be styled.

javascript/css 强制更新

2019-12-16T17:14:00+08:00

当我们对网站做了修改，推送到远程服务器后，发现页面还是老样子。这是由于浏览器缓存的问题，html 页面一般会及时更新，但 JavaScript/css 脚本常常无法及时更新，这时候需要手动进行处理。方法一：在多数浏览器中，可以使用 CTRL + F5 快捷键强制刷新。一般能看到最新的结果。方法二：如果你使用 Google chrome 浏览器，则可以使用 debugger 禁止缓存: 右键 - inspect - Network - Disable cache方法三：在源码的 link/script 中修改如下：主要是在文件后加上 ?v=1 类似的字符串。当然也可换成其他写法，如：?time=2019126 等。下次更新文件时，将后缀修改成其他数字即可。这样的好处是你的用户们也可以同时收到最新更新。参考链接：https://stackoverflow.com/questions/3951187/javascript-file-not-updating-no-matter-what-i-dohttps://stackoverflow.com/questions/3466989/what-does-appending-v-1-to-css-and-javascript-urls-in-link-and-script-tags-do

lightbox2 使用

2019-12-12T22:03:00+08:00

lightbox 是一个JavaScript 库，用来在前端显示图片。它的特点是轻量，容易部署，适用于现代的浏览器。官网：https://lokeshdhakar.com/projects/lightbox2/GitHub 项目地址：https://github.com/lokesh/lightbox2release 下载：https://github.com/lokesh/lightbox2/releases下载在发布页下载最新版本到本地或服务器：wget https://github.com/lokesh/lightbox2/archive/v2.11.1.tar.gz tar -zxvf v2.11.1.tar.gz css/js 文件在解压包的 dist 目录下。引用在 html 的标签栏内引用 css 文件：在 html 结束前的标签前引用 js 文件： lightbox2 的 js 需要 jQuery 1.7，所以确保 jQuery 在 lightbox 的 js 文件之前引用。如果你没有安装 jQuery，可以使用预先包含了 lightbox 和 jQuery 的 js 文件代替上面的 lightbox.js：使用在图片链接内增加属性 data-lightbox 来激活 lightbox。单图片显示Image #1 选项:增加 data-title 属性，如果你想增加一个title.增加 data-alt 属性，如果你想附加一个图片的属性.多图片库如果你有多张图片想要通过左右箭头切换显示，可以设置如下：Image #2 Image #3 Image #4属性设置如果想要修改默认的显示设置，可以引用 option method，例如：所有可设置的参数，可查看官网：https://lokeshdhakar.com/projects/lightbox2/

font awesome 使用

2019-12-12T22:00:00+08:00

font awesome 是流行的 icon 图标库。最新版为 version 5font awesome 分为付费版和免费版，付费版有 7020 个 icon，免费版有 1535 个 icon。免费：brands.js solid.js付费：regular.js light.js官网：https://fontawesome.com/GitHub 项目地址：https://github.com/FortAwesome/Font-Awesomerelease 地址：https://github.com/FortAwesome/Font-Awesome/releasesw3 教程：https://www.w3schools.com/icons/fontawesome5_intro.asp下载在 GitHub 发布页下载最新版：wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.12.0/fontawesome-free-5.12.0-web.zip unzip fontawesome-free-5.12.0-web.zip 引用在 html 的标签内引用免费的 js 文件：或者加载 all.min.js 文件，内含所有基本的功能：使用icon 图标常使用或标签来定义。修改图标大小也可以通过父级相对大小进一步调整大小属性：

图标宽度匹配使用 class 类 fa-fw 使图标大小相匹配。

Skating

Skiing

Nordic Skiing

Snowboarding

Snowplow

修改图标颜色动态图标通过增加 class 属性 fa-spin 可使图标旋转起来，使用 fa-pulse 属性可使图标分 8 steps 进行旋转。

其他使用方法及功能参考教程的右边边栏项：https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons图标检索使用一下网站进行图标搜索：cheatsheet 官网：https://fontawesome.com/cheatsheet搜索图标：https://fontawesome.com/icons/search