当程序员变成设计师的时候：只需要一个浏览器就够了

最新推荐文章于 2023-10-17 19:06:56 发布

薛定谔的死猫

最新推荐文章于 2023-10-17 19:06:56 发布

阅读量1.7k

点赞数

分类专栏： h5 文章标签：设计 LOGO css

本文链接：https://blog.csdn.net/Emptyset110/article/details/49635169

版权

h5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前两天突然想到要给工作室设计一个LOGO。当时的情况是，我手边只有一台内存2G的上网本，显然是跑不动PS的……那么问题来了，我该怎么去设计一个LOGO呢？
那么既然没有强大的PS或者其他绘图软件，而我用鼠标操作windows画板的技术又是这样的——
这里写图片描述
哎……就在这个时候，“叮”地一下，我想出了一个完美方案——
1. 首先鉴于我没有高级的作图工具，这个设计方案必须走极简和扁平的路线对不对！（对不起啊万一我的艺术情操侮辱了“极简”的内涵请原谅啊我也不想的啊也么哥）
2. 即便是极简，我也不想有任何的曲线——因为我已经脑补了一个采用css和浏览器来画图的方式，那么最容易操作的就是方块！正方形色块！
3. 一个LOGO中没有任何圆角，又是由正方形色块组成的，那么它改以什么作为设计元素呢？……有限的知识索引里只给我提供了一种可能的答案：马赛克。
4. 嗯，所以这个设计方案就这么定下来了，我就只需要用两种颜色的正方形色块来完成这个马赛克LOGO的设计。
5. 开始~
首先我需要画两种颜色的方块，写一下css和html
首先我们假定我们的画布是8*8方块阵列组成的，每一行由黑色和白色的（）
logo.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/logo.css" />
    </head>
    <body>
    <div style="float:left">
        <div class="row" id="row1">
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
        </div>
        <div class="clear"></div>
        <div class="row" id="row2">
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
        </div>
        <div class="clear"></div>
        <div class="row" id="row3">
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
        </div>
        <div class="clear"></div>
        <div class="row" id="row4">
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
        </div>
        <div class="clear"></div>
        <div class="row" id="row5">
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
        </div>
        <div class="clear"></div>
        <div class="row" id="row6">
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
        </div>
        <div class="clear"></div>
        <div class="row" id="row7">
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
        </div>
        <div class="clear"></div>
        <div class="row" id="row8">
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
            <div class="square black"></div>
        </div>
        <div class="clear"></div>
    </div>
    </body>
</html>

logo.css

body{
    background-color: rgba(2,48,71,1);
    /*background-color: white;*/            
}
.row{
    height: 10px;
}
.square {
    float: left;
    margin: 2px;
    padding: 10px;
    width: 0;
    height: 0;
}
.square.black {
    background-color: rgba(144,197,45,1);
}
.square.white {
    background-color: rgba(0,0,0,0);
}
.clear {
    clear:both;
}

基本画布
这样一来，画布就做好了。接下去就是见证奇迹的时刻……将一部分的class从”square black”改成”square white”……于是各种改动以后就拼出了一个字母”D”来
字母D
然后我打算把文字设置成白色放在右侧，给英文选择了一个叫Glametrix的字体，补上一些css:

        .word {
            float:left;
            line-height:90px;
            padding: 50px;
            padding-top: 100px;
            font-family: "Glametrix";
            font-size: 200px;
            color: white;
        }
        .title {
            color: white;   
        }
        .subtitle {
            float:right;
            font-size: 80px;
            color: rgba(144,197,45,1);
        }

做完LOGO以后，再挑选一种合适的英文字体写在右边，最后的效果图就是这样哒——
LOGO
是不是感觉还不错~

薛定谔的死猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
当程序员变成设计师的时候：只需要一个浏览器就够了

前两天突然想到要给工作室设计一个LOGO。当时的情况是，我手边只有一台内存2G的上网本，显然是跑不动PS的……那么问题来了，我该怎么去设计一个LOGO呢？那么既然没有强大的PS或者其他绘图软件，而我用鼠标操作windows画板的技术又是这样的—— 哎……就在这个时候，“叮”地一下，我想出了一个完美方案—— 1. 首先鉴于我没有高级的作图工具，这个设计方案必须走极简和扁平的路线对不对！（对
复制链接

扫一扫

专栏目录