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