人類觀察小本本 - Figma免費的UI軟體教學－你值得擁有好書封！

當你有了美美的圖片之後要如何製作書封呢？

還沒有美美書封可以參考AI繪圖軟體教學

已經有書封但無奈原圖比例和penana不同的話可以參考AI擴充圖片背景教學

不會FIGMA註冊可以參考FIGMA註冊教學

725Please respect copyright.ＰＥＮＡＮＡgK7swKMJtU

那麼話不多說，打開你的FIGMA，我們正式開始！

開啟檔案後可以使用FIGMA快捷鍵

*按住鍵盤ctrl+滑鼠滾輪，可以調整螢幕視角拉近或拉遠。

*按住鍵盤空白鍵可以任意移動螢幕視角。

１．建立新檔案

打開FIGMA之後，點擊螢幕最上面那排藍色的按鈕＂Design File＂。

205365852264cf91a485ba45.14351267-173165.png

2．命名檔案名稱

進到這個畫面之後，螢幕最上方的＂Untitled＂，可以修改你檔案名稱（可改可不改，只是讓你之後在瀏覽過去的檔案時，知道自己在幹嘛XD）。

7987008864cf91f606f666.45953906-173165.png

725Please respect copyright.ＰＥＮＡＮＡbjWv7iYNA1

3．準備製作符合書封尺寸的畫布

點擊上方工具欄從左到右數來第三個圖示，然後在下拉式選單中按下＂Frame＂功能鍵。之後在你的畫面上點擊滑鼠左鍵任意拖曳拉出一個方形。 7227531464cf92855c5d28.19156109-173165.png

725Please respect copyright.ＰＥＮＡＮＡFIgj2Hxu1P

４．調整畫布的尺寸

調整方形尺寸（這會是你之後放置圖片的尺寸），為了避免你書封的尺寸變形，可以先查看你想上傳哪個平台，以及平台書封的尺寸寬高又是多少。

以penana來說，最佳尺寸會是875x440px。 77866993564cf935fcdc078.80707198-173165.png

在螢幕右側的工具欄，點擊最上方的＂Design＂，然後再點擊下面的＂W＂調整為＂875＂，接著再點擊旁邊的＂H＂調整為＂440＂，最後按下那個橢圓形的按鈕，讓他變成鎖定的樣子（這是為了避免你不小心拖曳到圖片時，圖片的比例會跑掉）。

*按住鍵盤ctrl+滑鼠滾輪，可以調整螢幕視角拉近或拉遠。

*按住鍵盤空白鍵可以任意移動螢幕視角。

117320101564cf960fa116e9.36079702-173165.png

725Please respect copyright.ＰＥＮＡＮＡodFN5z1esJ

５．在畫布中填入圖片。

將圖片填入方形中，點擊＂Fill＂字樣底下的白色方框，然後點擊左邊數來第三個＂照片＂圖樣。

149941987164cf9cc103c3c2.72067991-173165.png

725Please respect copyright.ＰＥＮＡＮＡTGiFUSqEA0

６．選擇圖片

將滑鼠移到那個黑白相間的位置，點擊中間的＂Choose Image＂。然後就可以挑選你電腦中的圖片了。

78765356464cfa25134b3f1.01492707-173165.png

725Please respect copyright.ＰＥＮＡＮＡwSG4K92VYn

７．匯入圖片完成。

78349166064cfb5136eddf2.83414465-173165.png

725Please respect copyright.ＰＥＮＡＮＡPrn4qQcIOa

８．圖片被裁切了怎麼辦？

點擊右側工具欄的＂Fill＂字樣，在下拉式選單中選擇＂Crop＂字樣。

122433616964cfb54d869345.21489093-173165.png

725Please respect copyright.ＰＥＮＡＮＡVbooGXD9Xl

９．拖曳圖片

使用滑鼠將圖片拖曳到適當位置（按住鍵盤的＂SHIFT＂鍵時，圖片可以水平或是垂直拖曳），如果你希望人物大一些，你可以將滑鼠移到照片邊緣就可以調整圖片的大小了。

194618818364cfb59322f1d7.56427752-173165.png 57087708364cfb6545672b1.91468086-173165.png

725Please respect copyright.ＰＥＮＡＮＡuPVMkoSPL8

１０．新增文字標題／書名

加入文字標題，點擊螢幕上方的＂T＂符號，從左邊數過來第五個。然後你會看到螢幕上有小小的黑線在閃爍，沒看到也沒關係，你只要隨便輸入文字就會顯示在螢幕上了，在這個步驟可以輸入你的小說標題。

97063829864cfb661117297.63280943-173165.png

725Please respect copyright.ＰＥＮＡＮＡLwW98XSEJ5

１１．準備調整字體，請務必先完整選取字

輸入完文字標題之後，連點兩下你的標題，直到字上面有一層淺藍色，如下圖所示。

90621942864cfb6f34719f2.62170349-173165.png

725Please respect copyright.ＰＥＮＡＮＡyIKbrgZehv

１２．調整字體大小及顏色

確保有選到字之後，你可以調整字體大小及顏色。下圖步驟１指示的地方可以調整字體大小，你可以直接點擊就會出現下拉式選單供你調整（如果下拉式選單中的字沒有你喜歡的，你也可以直接輸入數字。），然後點擊＂Fill＂字樣下方的方框，左邊可以任意調整字的顏色。

＊備註：這裡的字級單位是px而不是pt。

72442302864cfb7243a0448.35624801-173165.png

725Please respect copyright.ＰＥＮＡＮＡpweLvWv1Ia

１３．拖曳你的文字到適當位置。 89329811364cfb8c949ce89.55069985-173165.png

１４．圖片輸出

點擊圖片上方的＂Frame１＂字樣，你也可以點擊左側工具列的＂Frame１＂字樣，如此才能將整張圖片輸出。點擊右側＂Export＂字樣，展開以後再點擊下方的＂Export＂（預設輸出格式會是＂PNG＂，如果你希望輸出別的格式也可以點擊＂PNG＂字樣，就可以選擇＂JPG＂）。

*如果你看不到＂Export＂字樣，可以將滑鼠移到右側工具欄上，然後滾動滑鼠滾輪，你就會看到在最下面的＂Export＂字樣了。

87835148164cfb8da6dddd3.47095719-173165.png

99749155264cfbbe0d17332.34313355-173165.png １５．結果圖

174890729264cfbe6a607f25.76629283-173165.png

當然，肯定有些人會有所追求。

不論是覺得字太醜，或是覺得想要字有顏色漸層，甚至是透出後面背景的字等等。

725Please respect copyright.ＰＥＮＡＮＡ9FPG5F5awU

對，你很聰明，下一集再教你～

如果很討厭英文介面的話，這裡提供給你一個安裝中文介面教學，你就可以自己試試看啦！

https://www.minwt.com/webdesign-dev/uiux/23814.html

725Please respect copyright.ＰＥＮＡＮＡgbVjjzXlml

FIGMA可以做到甚麼程度呢？

最近幫阿掌大人的書封是來自FIGMA（很好看很推薦！！阿掌大人不要拍我的頭！）

5529082264cfbf554ba8a6.95549591-173165.png

甚至是之前我測試的時候做的圖片，也是FIGMA弄的哈哈。

92987511264cfc104dc70f4.65049954-173165.png 198101471264cfc104e96d88.34437998-173165.png 13623207664cfc105ac94c2.05526783-173165.png

ns3.16.112.104da2

Figma免費的UI軟體教學－你值得擁有好書封！

REGISTER

LOGIN

Interface Language:

Story Language: