19
07.2018

斷層卡片設計,簡約且有設計感

生活品味(玩樂)  
標籤: 卡片 

今天推薦的是小夥伴一粒簡子的《隨筆丨森林中的小樹屋》是一篇隨筆,編者在文字卡片上的設計很有想法,利用布局+間距設計出的「斷層」卡片,簡單也很有設計感:

 

 

版式參考

 

斷層卡片樣式設計

編者在文章上排版實行簡約原則,讓讀者視覺專註在文章上;但文字卡片的設計,有點獨特,文字邊框的線條沒有相交,就像斷裂了一樣:

我們打開布局糢式,能清楚的看出編者是添加了兩層布局,然後設定了布局邊框制作而成的:

  • 打開布局糢式,添加一個空白布局,到編輯區域中;

  • 設定布局左邊邊框樣式為實線,尺寸1px,顏色rgb(71, 193, 168);

  • 設定這個布局的左右間距為10px;

斷層卡片設計,簡約且有設計感
  • 然後再拖一個空白布局到這個卡片框中,設定布局段前距為10px;

  • 然後設定布局上邊邊框樣式為實線,尺寸1px,顏色rgb(71,193,168);

  • 設定布局上邊的間距為10px;

斷層卡片設計,簡約且有設計感
  • 最後拖入文字就好

 

「斷層」卡片就是這樣做出來的,後邊的放在右邊的線條,就是將外層布局的邊框從左邊換成右邊就好:

 

多圖旋轉樣式

編者在文章配圖上,使用了秀米現有的糢板,但因為利用到了布局與旋轉元素,讓文章變得有趣起來:

斷層卡片設計,簡約且有設計感
  • 打開布局糢式,添加一個二列布局,到編輯區域中;

  • 設定布局寬度均為45%,設定布局為居中對齊;左右布局邊距均為10px;

 

斷層卡片設計,簡約且有設計感
  • 然後拖入圖片糢板,調整圖片糢板的旋轉角度;

  • 因為這個是組合糢板,小夥伴們要註意辨認清楚,哪一層布局是圖片糢板的布局;然後點擊它,再設定旋轉角度就好:

斷層卡片設計,簡約且有設計感

 

 

文章格式參數

標題字型大小

18

正文字型大小

14

文字間距

1.8倍

配色方案

標題

rgb(71, 193, 168)

正文

rgb(62,62,62)

其他配色參考

rgb(13, 136, 70)

 

  更多咨詢請瀏覽:http://www.designnow.com.hk/

發表於2018.7.19
留言(0)
博客名稱 :
Lau Si Ting
網誌名稱:
zikei's blog
使用天數:285
電郵:www.renewa@gmail.com
按月份瀏覽
    2018
  • 一月
  • 二月
  • 三月
  • 四月
  • 五月
  • 六月
  • 七月
  • 八月
  • 九月
  • 十月
  • 十一月
  • 十二月
>> 更多
系統分類
  • 美容時尚
  • 飲食烹飪
  • 環球旅遊
  • 親子育兒
  • 數碼科技
  • 生活品味
  • 藝文創作
  • 電影戲劇
  • 攝影寫真
  • 戀愛心情
  • 文化政經
  • 其他
  • 財經生活
自行分類