TypechoJoeTheme

日志随记

统计
登录
用户名
密码

扫码登录
/
注册
用户名

此用户名将作为登录时所用的账号

邮箱

XG.孤梦

随风而动,随遇而安......

制作可变logo教程

XG.孤梦博 主大佬
2023-06-12
/
0 评论
/
1,204 阅读
/
1285 个字
/
百度已收录
06/12
本文最后更新于 2023年06月21日,已超过 370天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

前言

使用joe主题的人应该都知道主题logo会随主题的明暗模式进行变换,那么这个是怎么实现的呢?其实这个有两种方法。

替换文件法

这个方法通常运用在图片(位图图像)通过在明暗模式切换的js代码中添加logo的文件路径替换,达到两张图片的切换效果。

矢量图编辑法

有学习过设计美术方面的或者使用过 Adobe Illustrator、Corel Draw 的人,应该都知道矢量图,有一个非常好的特性就是图像可以无限级缩放,对图形进行缩放,旋转或变形操作时,图形不会产生锯齿效果,而位图缩放和旋转容易失真,这个是这么实现的呢,其实你可以下载一个纯矢量图文件 文件格式通常以 .svg 结尾 ,右键以文本编辑器或者记事本方式打开然后,你就会看见一大段类似坐标点一样的代码(数学向量),就是因为这些坐标一样的数学向量组成了一张图像,所以矢量图可以使用css或者js对其就行编辑,从而达到图像变换的效果。

位图与矢量图比较

图像类型组成优点缺点常用制作工具
点阵图像(位图)像素只要有足够多的不同色彩的像素,就可以制作出色彩丰富的图象,逼真地表现自然界的景象缩放和旋转容易失真,同时文件容量较大Photo Shop、画图等
矢量图像数学向量文件容量较小,在进行放大、缩小或旋转等操作时图象不会失真不易制作色彩变化太多的图象AdobeIllustrator、Flash、CorelDraw等

两种方法根据自己需要与实际需求自行选择


教程开始

方法一

准备
  • 两张不同效果的logo图片(最好是透明镂空效果最佳)
  • 制作或者修改图片软件推荐使用 Photo Shop
制作图片

使用PS打开需要编辑的图片,根据自己需求设计,关于PS(Photo Shop)教程可自行去B站搜索相关教程这里就不过多赘述,就教一个简单的图片镂空,关于镂空不懂PS的小白可以使用AI自动抠图将图片镂空,当然效果可能不是很理想。

一、 编辑图片

用PS(Photo Shop)打开图片,这里拿老米的logo举例(如有侵权联系进行删除)

在左边工具栏选择魔棒工具,然后点击logo图片的白色区域,如果图片背景比较复杂可以修改上面菜单栏的容差与勾选上连续一点一点选取。

选取后点击删除键即可删除白色背景

然后保存为以 .png 结尾的图片文件格式

图片就制作到这里,然后上传图片到服务器文件夹里


二、代码部分
明暗模式的js代码在主题文件夹的 /assets/js/joe.config.js 文件夹里

logo的代码在主题文件目录下的 /public/header.php 文件里

使用合适的js替换代码将logo的图片地址替换即可,方法很多比如最常见的获取img图片对象的id,然后使用setAttribute()方法重新设置该id对象的src属性的值即可

例子

 <!--图片代码 -->
    <img id="img" src="img/logo.png" width="50"  height="50"/>

 <!--切换按钮代码 -->
    <button onclick="myFunction()">更改logo图片</button>

 <!--js代码 -->
    <script>
    function myFunction() {
        var img=document.getElementById("img");
        img.setAttribute("src","img/4.jpg");
            }
    </script>

方法二

准备
  • 一张logo图片(最好是透明镂空效果最佳)
  • 制作或者修改图片软件使用到 Photo Shop、Adobe Illustrator
制作矢量图

一、编辑图片

第一步与方法一一致将图片镂空,背景纯色也是可以的,然后加图片填充为纯色方便AI临摹图像,然后将保存好的图片用AI(Adobe Illustrator)打开

选中图片然后在上面菜单栏中选择对象-->栅格化

背景选择透明

然后选择对象图像描摹-->建立并扩展

这个时候我们就得到了绘制出来的图像了,如果图案复杂的可以使用钢笔工具自己照着图勾出图像然后填充图像颜色即可

然后保存为 .svg 结尾的图片文件格式

用记事本打开图片文件可以看见一大段文字内容

.svg格式的文件可以直接在浏览器中渲染出来,所以可以直接将这段内容复制代码中使用

然后再通过js替换颜色代码达到变换效果,厉害一点的大佬也可以制作出动画效果

我的joe主题logo代码在主题文件目录下的 /public/header.php 文件里,可以直接替换代码或者在主题设置的logo设置里粘贴这段代码或者文件路径地址即可

这里的 <g fill="var(--main)"> 就是图像的颜色,因为我的logo比较简单就使用的一个颜色,你也可以添加一些css与js代码来美化logo,相关代码可以通过VS Code打开主题文件夹搜索 var(--main) 进行参考,时间有限就写到这里了请各位小伙伴自行探索吧


教程结束
朗读
赞(6)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

日志随记

本文链接:

https://www.xggm.top/archives/1242.html(转载时请注明本文出处及文章链接)

评论 (0)
 
登录
X
用户名
密码