當程式設計師變成設計師的時候：只需要一個瀏覽器就夠了
阿新 • • 發佈：2019-01-09
前兩天突然想到要給工作室設計一個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 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”來
然後我打算把文字設定成白色放在右側，給英文選擇了一個叫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以後，再挑選一種合適的英文字型寫在右邊，最後的效果圖就是這樣噠——
是不是感覺還不錯~