GameMale
登陆 / 注册 搜索

USERCENTER

SEARCHSITE

搜索

查看: 2110|回复: 57
收起左侧

[技巧科普] 【冬宫学府】【教程】进阶版泥潭个人空间Css代码装修技巧教程丨UI制作篇

  [复制链接] |关注本帖

永远的克叔裸体克里斯保卫领土【新春限定】果体 隆生金蛋的鹅金钱马车和你一起飞行的皮卡丘亚瑟‧摩根業火死鬥史莱姆牧场

     楼主| 大河内太 发表于 2024-12-24 17:42:25 | 显示全部楼层 |阅读模式 <
    本帖最后由 大河内太 于 2024-12-24 18:33 编辑
    【冒险开始!】
    【点击音频开启一场RPG之旅!】





    此主题为泥潭个人空间装修的
    “图文/UI/特效制作”Part
    将会在文章最后附带一份Css基础模板
    以及其的使用方式!
    我将会以我自己空间的部分模板作为教学示范,
    教会大家如何在Css模板里制作各种样式以及特效的文字UI
    方便大家更加花样多变的玩转自己的个人空间!
    .
    【此操作不会占用服务器资源,但如若上传的图片过大,进你空间可能会加载不出来图片】
    .
    【声明】
    这个功能对网站并没有危害,仅只能自定义个人空间的CSS样式,对网站数据并不构成威胁。
    (但是请勿试图用此教程隐藏脏东西,不然你会被查房脚本单向还原+加倍视奸还请注意.JPG)
    【若教程不妥当 请联系我删除主题!】

    这是此文章的结构整理
    你将会看到
    【壹】准备工作
    【贰】图片/文字处理,特效制作
    【叁】打包上传
    【肆】Css泥潭空间代码(基础框架模板)

    踏上冒险征途的第一步吧!


    【壹】准备工作

    你需要准备的东西有:

    ①任意版本PhotoShop(可替换任意图片处理软件
    ②各式各样的Windows字体(选择自己喜欢的即可)
    ③一个自己的图床账号(我个人使用的是聚合图床
    ④喜欢的各式各样的UI素材,背景底图图片等(可以塞很多)
    【贰】图片/文字处理,特效制作

    我会用我个人空间的
    “赠礼板块”与“好友板块”
    为示范进行UI的教学!
    .
    【好友板块】
    让我们先抛开一切无关的内容
    让空间白纸化
    此时显示的图层叫做“底图”(重点)
    如你所见
    我选择了画面左侧中央的“城池”
    作为好友板块的触发点

    那么我就在我喜欢的位置用喜欢的文字预设出文字本身
    命名为“眺望之城”
    即可完成一个最基本的文字UI指向组
    是不是感觉很简单啊?

    【文字激活发光(可选)】
    第一步:选中你已经做好的文字
    右键复制图层并粘贴。命名为“眺望之城(激活)”
    第二步:双击“眺望之城(激活)”图层或右键此图层选择“混合选项”
    给予它一个“描边(像素随意,透明度随意)”效果
    随后再给予它一个
    “外发光(不透明度建议50-70之间,拓展和大小根据你的像素大小自由调整)”效果
    你就能得到这样的激活发光版文字


    【图片激活发光(可选)】
    选中“底图”图层
    使用图像处理软件的“套索”或任意俗称的“抠图”工具
    将图片从底图图层框选出来
    (教程仅做演示,如需使用建议能抠多精致就抠多精致)
    随后右键被框选的部分
    选择“通过拷贝的图层
    这样你就能得到一个单独被抠出来的建筑物了!

    随后仅需给予它一个
    “外发光(不透明度建议50-70之间,拓展和大小根据你的像素大小自由调整)”效果
    就能变为图中激活的样子。
    .
    【进阶可选-通过html自定义js结构+Css代码添加的弹窗UI】
    (此部分图片制作简单,但代码实装难度有门槛,不会代码可以直接跳过此部分
    仅想单独制作好友栏UI也可以选择性观看此部分

    插入一张你喜欢的“好友栏背景图”

    为其添加你想要的效果

    我自己选用的效果如下:


    以及


    为你的好友们准备一个漂亮的ID框和头像框
    (你当然可以自己画,但是我的建议是去开源网站找免费的现成的.JPG)

    然后在代码部分把好友的头像和ID分别绑进这两个框里就行


    【赠礼板块】
    图像/文字的发光与否
    以及抠图流程都与好友部分完全一致
    重复一次操作即可复刻。

    【进阶可选-通过超链接与html代码实现自定义勋章赠礼UI】
    (此部分图片制作简单,但代码实装难度有门槛,不会代码可以直接跳过此部分
    仅想单独制作赠礼部分UI也可以选择性观看此部分


    一张“赠礼底图”


    为其添加想要的各种Diy装饰


    给你想放的勋章Diy自定义文字
    并不是一定要和原文描述一致,
    请随意自由发挥~

    文字使用效果为:
    描边

    然后在代码部分把赠礼的超链接和勋章的Gif定位到图中准备好的勋章空位即可。


    【叁】打包上传

    简单的将你的图片组合导出为整张
    或者拆成你需要的很多部分皆可,
    将他们上传至图床网站,
    以便你在后续随时通过替换代码的链接来更换图文

    推荐的整合方式Belike:

    即没事不要大量拆分图层,没有特殊需求 直接合并把处理好的文字和底图图层“合并”即可
    .
    【肆】Css泥潭空间代码(基础框架模板)
    基础模板可以去这篇开源的免费文章寻找你喜欢的模板
    .
    使用方式:
    打开你的“留言板”
    选择F12或自定义快捷键呼出“审查元素”
    在“审查元素”中找到“控制台”
    .
    在“控制台”中键入你从上方帖子里获得的js脚本

    .
    如果你的操作正常
    那么此时将会弹出一个输入框
    提示你注入css代码
    在框里输入你在上方模板分享帖里获得的模板
    随后刷新自己的空间即可成功实现css空间装修!
    (若无弹窗,请重头进行第肆部分的教程)
    .
    【如何将模板的图片替换为上方教程做完的图片?】
    用记事本新建文本后,
    将模板的css代码粘贴进去
    保存记事本为“我的空间样式.css
    随后再次以记事本打开此css文件
    找到里面的图片链接
    (一般来讲都会是xxxxxx.jpg xxxxxx.png这样的链接)
    将其替换为你自己制作的图片,
    记得保存文件!
    随后重新在控制台的css代码里注入一次就可以了
    以后的所有图片更换都是简单的重复这一步即可。
    .
    完成所有装修之后
    【你可能用得到的Gamemale链接】
    1.我的留言板:
    https://www.gamemale.com/home.php?mod=space&uid=你的UID&do=wall
    2.我的个人信息:
    https://www.gamemale.com/home.php?mod=space&uid=你的UID&do=profile
    .
    【写在后面】
    教程仅起到一个抛砖引玉的作用,
    如有更多更好的建议以及模板,
    也欢迎大家一起分享出来进行魔改.JPG
    长篇教程不易,期待你的追随催更!
    .
    【特别鸣谢】
    感谢老公福狸为了帮我实装PSD的所有预期
    而把自己做得bfnz。
    我个人空间的Css代码全部由福狸施工
    非常好福狸 爱来自大河内太!

    @福黎

    评分

    参与人数 30血液 +62 追随 +29 堕落 +15 收起 理由
    Henggy + 1
    469MAPabu + 1 + 1
    崽仔狼 + 1 + 1
    zhuovboyan + 2
    大零食主义 + 1 + 1
    ELR + 3 + 1 + 1
    Xiongbear + 1 很给力!
    绕指柔 + 1
    Toru + 1
    KamiuBlued + 1

    查看全部评分

    回复

    使用道具 举报

    永亘环小狮欢舞『搓粉团珠』黄粱一梦【新春限定】果体 隆死灵之书永远的克叔業火死鬥实现梦想官复原职

      娱乐法师火布偶 发表于 2024-12-24 17:47:58 | 显示全部楼层 <
      楼主的空间画面太高级了,像本人就是懒人,懒得对架构和背景做大修改
      回复

      举报

      漂洋小船冒险用指南针破损的旧书人鱼之泪雪王的心脏苏格兰圆脸胖鸡[Pro Max]丛林的鸟飞走了不曾寄出的信件幽灵竹筒『随时随地开启!』

        凯诺斯 发表于 2024-12-24 17:48:46 | 显示全部楼层 <
        好高技术力的空间,这地图风格有点像在玩游戏的感觉
        回复

        举报

        赛博朋克2077『冰雕马拉橇』【新春限定】果体 隆星芒戒指小狮欢舞小丑与格雷与星光璀璨

          克雷森Cresen 发表于 2024-12-24 17:49:57 | 显示全部楼层 <
          回复

          举报

          『不败之花』『搓粉团珠』幸运女神的微笑最终幻想XVI永亘环『落樱缤纷』『逆境中的幸运女神』

            singto 发表于 2024-12-24 17:51:38 | 显示全部楼层 <
            回复

            举报

            猪庇特『搓粉团珠』变身器御医神兔闪耀的魔仙棒肉垫手套永浴爱河

              卡扎拉尔 发表于 2024-12-24 17:53:41 | 显示全部楼层 <
              我的天啊,太神了,马上收藏学习起来!!!
              回复

              举报

              『搓粉团珠』【圣诞限定】心心念念小雪人小狮欢舞无瑕的回忆保卫领土『不败之花』虚空之海的鲸永远的克叔亚瑟‧摩根Forever Titanic

                XLK 发表于 2024-12-24 17:55:44 | 显示全部楼层 <
                回复

                举报

                金钱马车【圣诞限定】心心念念小雪人史莱姆牧场和你一起飞行的皮卡丘【新春限定】果体 隆雷夜嘯聲

                  高希声 发表于 2024-12-24 17:55:49 | 显示全部楼层 <
                  回复

                  举报

                  卡斯迪奥40x43 隐形➁『圣洁化身』40x43 隐形➀『流星赶月:宙刃』『伊黎丝的赞词』『星河碎片』近地夜航

                    Hadley0T 发表于 2024-12-24 17:57:48 | 显示全部楼层 <
                    大河内老师的教程真的很详细了,可惜我还是看不太懂,空间装修总是乱糟糟的,完全没有审美感
                    回复

                    举报

                    堕落之舞海边的邻居禽兽扒手

                      巫萨洛金 发表于 2024-12-24 17:59:37 | 显示全部楼层 <
                      代码好学审美难学。想做一个漂亮的空间真不容易。
                      回复

                      举报

                      40x43 隐形➀『搓粉团珠』16x43 隐形➀兴奋的小伯炼金之心月影狼

                        SweetUncle 发表于 2024-12-24 18:03:07 | 显示全部楼层 <
                        回复

                        举报

                          崽仔狼 发表于 2024-12-24 18:03:38 | 显示全部楼层 <
                          回复

                          举报

                          永远的克叔永亘环『搓粉团珠』小狮欢舞实现梦想官复原职诺克提斯·路西斯·伽拉姆卡利亚权杖史莱姆牧场男巫之歌

                            ☆Yuki☆ 发表于 2024-12-24 18:07:43 | 显示全部楼层 <
                            大河内设老师我yyds,我愿称其为泥潭最强空间_(:з)∠)_
                            回复

                            举报

                            打开一个礼物盒『搓粉团珠』人鱼之泪银色溜冰鞋『冰雕马拉橇』劫掠核芯御医神兔金牌矿工

                              promax 发表于 2024-12-24 18:09:10 | 显示全部楼层 <
                              回复

                              举报

                              永亘环小狮欢舞吃饱的小阿尔吃饱金币的Doge希德‧海温特Joker卡利亚权杖恶魔城

                                飞扬fox 发表于 2024-12-24 18:10:50 | 显示全部楼层 <
                                回复

                                举报

                                男巫之歌冰原Forever Titanic至尊法师Beauty and the Beast『搓粉团珠』不朽之恋剑指撒冷【夏日限定】夏日的泰凯斯丹雀衔五穗,人间始丰登

                                  大墨迹 发表于 2024-12-24 18:12:00 | 显示全部楼层 <
                                  看了楼主的空间,顿时觉得不知道自己这两年玩的是什么论坛太强了
                                    收起(1)
                                  回复

                                  举报

                                  裸体克里斯『召唤好运的角笛』诡案谜集·黑夜之星绿茵宝钻无瑕的回忆

                                    AncL 发表于 2024-12-24 18:12:33 | 显示全部楼层 <
                                    omg偶遇泥潭代码大佬 拼尽全力无法战胜
                                    回复

                                    举报

                                    圣甲虫秘典吃饱金币的Doge生金蛋的鹅果体76Futūrum(未来)亭亭如盖

                                      Makima 发表于 2024-12-24 18:13:02 | 显示全部楼层 <
                                      好了,收藏说明我搞了(
                                        收起(2)
                                      回复

                                      举报

                                      性感男神GM卡洛斯·奥利维拉幽浮起司煲车厢特供 · 热巧 450ml图腾饼干『酒馆蛋煲』『搓粉团珠』『南瓜拿铁』男巫之歌虚空之海的鲸

                                        一只随行 发表于 2024-12-24 18:21:16 | 显示全部楼层 <
                                        回复

                                        举报

                                        我的天使GM吸血伯爵吃饱金币的Doge阿拉喵?神灯苏格兰圆脸胖鸡小小舞台永浴爱河

                                          毛茸茸兽兽 发表于 2024-12-24 18:24:06 | 显示全部楼层 <
                                          阿门(´×ω×`)之前送楼主勋章时就有找了好一会在那里咧~
                                            收起(2)
                                          回复

                                          举报

                                          您需要登录后才可以回帖 登录 | 立即注册

                                          本版积分规则

                                          文字版|手机版|小黑屋|GameMale

                                          GMT+8, 2025-2-23 10:04 , Processed in 0.155739 second(s), 144 queries , Redis On.

                                          Copyright © 2013-2025 GameMale

                                          All Rights Reserved.

                                          快速回复 返回列表